/* ============================================================
   EMBER — Bold & Warm Editorial
   Playfair Display / Source Sans 3
   Warm white + Charcoal + Terracotta + Amber
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   MOTION TOKENS — the same three-tier contract the Style2 packs use, so the
   shared cinema stage scales here exactly as it does there.

   --mo-par is the amplitude the stage multiplies its rim, float, shadow
   reaction and parallax by. Mobile is not the desktop with motion removed: the
   same effect runs smaller. Only an explicit reduced-motion request collapses
   it, and at 0 the stage still paints its static lighting -- it just stops
   moving.
   ============================================================ */
:root {
  --mo-par: 1;
}
@media (max-width: 768px) {
  :root {
    --mo-par: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-par: 0;
  }
}

:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-warm: #f5ede3;
  --line: rgba(26, 26, 26, 0.1);
  --line-strong: rgba(26, 26, 26, 0.2);
  --text: #1a1a1a;
  --muted: #6b5e54;
  --terracotta: #c45c3e;
  --terracotta-soft: rgba(196, 92, 62, 0.1);
  --terracotta-warm: rgba(196, 92, 62, 0.06);
  --amber: #f5a623;
  --amber-soft: rgba(245, 166, 35, 0.12);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'Source Sans 3', system-ui, sans-serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-dramatic: cubic-bezier(0.87, 0, 0.13, 1);
  --radius: 2px;
  --radius-lg: 8px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--terracotta);
  color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--terracotta);
  border-radius: 4px;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* lucide icon sizing */
.lucide {
  width: 1em;
  height: 1em;
  stroke-width: 2;
}
.stars svg,
.hero-stat b svg {
  fill: currentColor;
}

/* ============================================================
   BOOT / ERROR SCREENS
   ============================================================ */
.boot-screen {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
}

.boot-orb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: boot-pulse 1.2s ease-in-out infinite;
}

@keyframes boot-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.35;
  }
}

.boot-error {
  flex-direction: column;
  gap: 18px;
  text-align: center;
  padding: 32px;
}
.boot-error b {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  text-transform: none;
}
.boot-error span {
  letter-spacing: 0.05em;
  max-width: 400px;
  line-height: 1.7;
  color: var(--muted);
}
.boot-retry {
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
  border-radius: 0;
  padding: 14px 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.35s var(--ease);
}
.boot-retry:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 120px 0;
  position: relative;
}

.muted {
  color: var(--muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
}

.eyebrow-mono {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
}
.eyebrow-mono::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--terracotta);
}

.accent-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.text-lime {
  color: var(--terracotta);
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.rv {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.95s var(--ease),
    transform 0.95s var(--ease);
  transition-delay: var(--d, 0s);
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
  z-index: -1;
}
.btn:hover::after {
  transform: scaleX(1);
}
.btn .lucide {
  transition: transform 0.35s var(--ease);
}
.btn:hover .lucide {
  transform: translateX(4px);
}

.btn-lime {
  background: var(--terracotta);
  color: #fff;
  border-color: var(--terracotta);
}
.btn-lime:hover {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  box-shadow: 0 12px 40px rgba(26, 26, 26, 0.25);
}
.btn-lime::after {
  background: var(--text);
}

.btn-ghost {
  border-color: var(--text);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--terracotta);
  color: #fff;
}
.btn-ghost::after {
  background: var(--terracotta);
}

.btn-sm {
  padding: 12px 20px;
  font-size: 11px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 32px;
  background: rgba(250, 247, 242, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: nav-slide 0.8s var(--ease) 0.1s both;
}
@keyframes nav-slide {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.nav-logo em {
  color: var(--terracotta);
  font-style: italic;
}
.nav-logo img {
  height: 34px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 36px;
}
.nav-links a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.35s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--terracotta);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover {
  color: var(--text);
}
.nav-links a:hover::after {
  width: 100%;
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: #fff;
  padding: 12px 24px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: all 0.35s var(--ease);
}
.nav-phone:hover {
  background: var(--terracotta);
  box-shadow: 0 8px 28px rgba(196, 92, 62, 0.35);
}

.nav-burger {
  display: none;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  color: var(--text);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: all 0.3s;
}

/* Mobile menu */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.mmenu.open {
  opacity: 1;
  pointer-events: auto;
}
.mmenu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.mmenu-close {
  width: 48px;
  height: 48px;
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s;
}
.mmenu-close:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}
.mmenu nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.mmenu nav a {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 10vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease),
    color 0.3s;
}
.mmenu.open nav a {
  opacity: 1;
  transform: none;
}
.mmenu nav a:hover {
  color: var(--terracotta);
}
.mmenu .nav-phone {
  width: fit-content;
  margin-top: 32px;
}
.mmenu-foot {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 160px 0 100px;
  overflow: hidden;
  background: var(--bg);
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(135deg, var(--terracotta-warm) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  height: 60%;
  background: linear-gradient(45deg, var(--amber-soft) 0%, transparent 60%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7vw, 6.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 28px 0 26px;
  color: var(--text);
}
.hero h1 .accent-serif {
  font-size: 1.08em;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--terracotta);
}

.hero-sub {
  max-width: 480px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.hero-stats {
  display: flex;
  margin-top: 60px;
  padding-top: 32px;
  border-top: 2px solid var(--text);
}
.hero-stat {
  flex: 1;
}
.hero-stat + .hero-stat {
  border-left: 1px solid var(--line-strong);
  padding-left: 32px;
}
.hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-stat b .count {
  font-family: inherit;
}
.hero-stat span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* Hero collage */
.collage {
  position: relative;
  height: 640px;
}
.collage-main {
  position: absolute;
  right: 0;
  top: 0;
  width: 85%;
  height: 80%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: saturate(0.88) contrast(1.05);
  transition: all 0.7s var(--ease);
  box-shadow: 0 30px 80px rgba(26, 26, 26, 0.18);
}
.collage-sub {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  aspect-ratio: 4/3.2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: saturate(0.85) contrast(1.08);
  box-shadow: 0 40px 80px rgba(26, 26, 26, 0.22);
  transition: all 0.7s var(--ease);
  border: 6px solid var(--bg);
}
.collage:hover .collage-main {
  transform: translateY(-4px);
  filter: saturate(0.95) contrast(1.02);
}
.collage:hover .collage-sub {
  transform: translateY(-8px) rotate(-1deg);
  filter: saturate(0.92) contrast(1.05);
}

.collage-chip {
  position: absolute;
  top: 45%;
  left: -4px;
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: 0 16px 40px rgba(26, 26, 26, 0.12);
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
.collage-chip .stars {
  display: flex;
  gap: 4px;
  color: var(--amber);
  font-size: 14px;
}
.collage-chip q {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  quotes: '“' '”';
  letter-spacing: -0.01em;
}
.collage-chip small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  transition: color 0.35s;
}
.scroll-cue:hover {
  color: var(--terracotta);
}
.scroll-cue .lucide {
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  overflow: hidden;
  padding: 32px 0;
  border-top: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  background: var(--text);
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 56px;
  align-items: center;
  white-space: nowrap;
  animation: tick 32s linear infinite;
}
.ticker:hover .ticker-track {
  animation-play-state: paused;
}
@keyframes tick {
  to {
    transform: translateX(-50%);
  }
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 56px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(250, 247, 242, 0.35);
  transition: all 0.4s;
}
.ticker-item:hover {
  color: var(--terracotta);
  -webkit-text-stroke-color: var(--terracotta);
}
.ticker-item .lucide {
  color: var(--terracotta);
  -webkit-text-stroke: 0;
  font-size: 0.5em;
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 20px 24px;
  border-block: 1px solid var(--line);
  background: var(--surface-warm);
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 0;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  background: var(--surface);
  transition: all 0.3s var(--ease);
}
.trust-chip:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.trust-chip.lime {
  color: var(--terracotta);
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.head {
  margin-bottom: 64px;
}
.head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 20px;
  color: var(--text);
}
.head h2 .accent-serif {
  font-size: 1.06em;
  font-weight: 500;
  color: var(--terracotta);
}
.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.head-note {
  max-width: 360px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.about-copy p {
  color: var(--muted);
  font-size: 17px;
  margin-top: 20px;
  max-width: 520px;
  line-height: 1.75;
}
.about-copy p:first-of-type {
  margin-top: 32px;
}

.values {
  margin-top: 52px;
  border-top: 2px solid var(--text);
}
.value-row {
  display: grid;
  grid-template-columns: 60px 48px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  transition: all 0.4s var(--ease);
}
.value-row:hover {
  background: var(--terracotta-warm);
  padding-left: 16px;
}
.value-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--terracotta);
  letter-spacing: 0.15em;
  font-weight: 700;
}
.value-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta);
  font-size: 18px;
  transition: all 0.35s;
}
.value-row:hover .value-icon {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: #fff;
}
.value-row h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.value-row p {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
  max-width: 400px;
}

.signature {
  margin-top: 40px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  color: var(--terracotta);
  font-weight: 500;
}

.about-media {
  position: sticky;
  top: 120px;
}
.about-media .main {
  width: 100%;
  aspect-ratio: 4/4.8;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: saturate(0.88) contrast(1.05);
  box-shadow: 0 20px 60px rgba(26, 26, 26, 0.15);
}
.about-media .sub {
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 48%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 6px solid var(--bg);
  filter: saturate(0.85) contrast(1.08);
  box-shadow: 0 30px 60px rgba(26, 26, 26, 0.2);
}
.about-badge {
  position: absolute;
  top: -16px;
  right: -12px;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(196, 92, 62, 0.3);
  transform: rotate(3deg);
}

/* ============================================================
   ROOMS
   ============================================================ */
#stay {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.room-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.5s var(--ease);
}
.room-card:hover {
  transform: translateY(-10px);
  border-color: var(--terracotta);
  box-shadow: 0 32px 64px rgba(26, 26, 26, 0.14);
}
.room-card.featured {
  border-color: var(--terracotta);
  box-shadow:
    0 0 0 2px var(--terracotta-soft),
    0 24px 60px rgba(196, 92, 62, 0.1);
}

.room-media {
  position: relative;
  height: 260px;
  overflow: hidden;
}
.room-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
  transition: transform 1.2s var(--ease);
}
.room-card:hover .room-media img {
  transform: scale(1.08);
  filter: saturate(0.95) contrast(1.02);
}

.room-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(26, 26, 26, 0.88);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 0;
  font-weight: 700;
}
.room-card.featured .room-badge {
  background: var(--terracotta);
  color: #fff;
}

.room-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.room-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.room-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.room-price {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--terracotta);
}
.room-price small {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.room-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 0;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  transition: all 0.3s;
}
.chip:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.chip-dim {
  opacity: 0.5;
}
.chip-warn {
  color: var(--amber);
  border-color: rgba(245, 166, 35, 0.4);
  background: var(--amber-soft);
}
.chip-lime {
  color: var(--terracotta);
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
}

.room-blurb {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
.room-allin {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 14px;
  line-height: 1.5;
}
.room-allin b {
  color: var(--text);
  font-weight: 600;
}

.room-feats {
  margin: 20px 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.room-feats li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  list-style: none;
  font-size: 13px;
  color: var(--muted);
}
.room-feats .lucide {
  color: var(--terracotta);
  margin-top: 2px;
  flex-shrink: 0;
}

.room-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.room-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding: 10px 18px;
  border: 2px solid var(--terracotta);
  border-radius: 0;
  transition: all 0.35s var(--ease);
}
.room-cta:hover {
  background: var(--terracotta);
  color: #fff;
}
.room-cta .lucide {
  transition: transform 0.3s var(--ease);
}
.room-cta:hover .lucide {
  transform: rotate(45deg);
}

.room-ops-ctas {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.avail-updated {
  font-size: 12px;
  margin: -8px 0 18px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}

.stay-note {
  margin-top: 44px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* ============================================================
   FOOD & DINING
   ============================================================ */
.food-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.food-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/5;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(26, 26, 26, 0.12);
}

.menu-tabs {
  display: flex;
  gap: 0;
  margin: 24px 0 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--text);
}
.menu-tabs button {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s;
  margin-bottom: -2px;
}
.menu-tabs button.on {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}
.menu-tabs button:hover:not(.on) {
  color: var(--text);
}

.menu-panel {
  display: none;
}
.menu-panel.on {
  display: block;
}

.meal {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.meal .t {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
}
.meal b {
  font-weight: 600;
  color: var(--text);
}

/* ============================================================
   AMENITIES
   ============================================================ */
.amen-list {
  border-top: 2px solid var(--text);
}
.amen-row {
  display: grid;
  grid-template-columns: 72px 56px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 26px 12px;
  border-bottom: 1px solid var(--line);
  transition: all 0.4s var(--ease);
  position: relative;
}
.amen-row:hover {
  background: var(--surface-warm);
  padding-left: 24px;
}
.amen-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  transition: color 0.35s;
  font-weight: 600;
}
.amen-row:hover .amen-num {
  color: var(--terracotta);
}
.amen-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta);
  font-size: 20px;
  overflow: hidden;
  transition: all 0.4s var(--ease);
}
.amen-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amen-row:hover .amen-icon {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 0 24px rgba(196, 92, 62, 0.2);
}
.amen-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.amen-text p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}
.amen-arrow {
  color: var(--muted);
  transition: all 0.35s var(--ease);
  font-size: 22px;
}
.amen-row:hover .amen-arrow {
  color: var(--terracotta);
  transform: rotate(45deg);
}

/* ============================================================
   DISTANCES
   ============================================================ */
.dist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.dist-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 15px;
  transition: all 0.3s var(--ease);
}
.dist-card:hover {
  border-color: var(--terracotta);
  transform: translateY(-2px);
}
.dist-card .m {
  color: var(--terracotta);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  font-weight: 700;
}

/* ============================================================
   VIDEO
   ============================================================ */
.video-sec {
  position: relative;
}
.video-ph {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16/9;
  background: var(--surface-warm);
}
.video-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  filter: saturate(0.8) contrast(1.1);
}
.video-ph .play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--terracotta);
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: all 0.4s var(--ease);
  box-shadow: 0 12px 40px rgba(196, 92, 62, 0.4);
}
.video-ph .play:hover {
  transform: scale(1.1);
  background: var(--amber);
  box-shadow: 0 16px 48px rgba(245, 166, 35, 0.45);
}

/* ============================================================
   RULES & FAQ
   ============================================================ */
.rules-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px 20px;
  transition: all 0.3s;
}
.faq-card:hover {
  border-color: var(--terracotta);
}
.faq-card summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  list-style: none;
  font-size: 17px;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-card summary::-webkit-details-marker {
  display: none;
}
.faq-card p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
/* Multi-line "Other rules"/"Menu notes" answers render as a bullet
   list (app.js escLines()) instead of one flat line -- match the
   plain-<p> spacing/colour above so both forms look consistent. */
.bullet-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.bullet-list li {
  margin-bottom: 4px;
}
.bullet-list li:last-child {
  margin-bottom: 0;
}
.faq-card ul.bullet-list {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

/* ============================================================
   LOCATION
   ============================================================ */
.loc-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.loc-desc {
  color: var(--muted);
  font-size: 17px;
  margin-top: 24px;
  max-width: 460px;
  line-height: 1.7;
}

.addr-card {
  margin-top: 36px;
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  gap: 20px;
  transition: all 0.3s;
}
.addr-card:hover {
  border-color: var(--terracotta);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.08);
}
.addr-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--terracotta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.addr-card small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.addr-card p {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.addr-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.addr-card a:hover {
  text-decoration: underline;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.map-frame {
  position: sticky;
  top: 120px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(26, 26, 26, 0.12);
}
.map-frame iframe {
  width: 100%;
  height: 540px;
  border: 0;
  display: block;
  filter: saturate(0.7) contrast(1.05);
}

.map-frame-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.map-frame iframe {
  pointer-events: none;
}
.map-tag {
  z-index: 4;
  pointer-events: none;
}

.map-tag {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 0;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
}

/* ============================================================
   REVIEWS
   ============================================================ */
#reviews {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.agg-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg);
  border: 2px solid var(--text);
  border-radius: var(--radius-lg);
  padding: 22px 32px;
  transition: all 0.35s var(--ease);
  margin-bottom: 24px;
}
.agg-card:hover {
  border-color: var(--terracotta);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.1);
}
.agg-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  color: var(--terracotta);
  line-height: 1;
  letter-spacing: -0.03em;
}
.agg-card .stars {
  display: flex;
  gap: 4px;
  color: var(--amber);
  font-size: 15px;
}
.agg-card small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.rev-cols {
  columns: 3;
  column-gap: 20px;
}
.rev-card {
  break-inside: avoid;
  margin-bottom: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all 0.4s var(--ease);
}
.rev-card:hover {
  border-color: var(--terracotta);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(26, 26, 26, 0.08);
}
.rev-card .stars {
  display: flex;
  gap: 4px;
  color: var(--amber);
  font-size: 14px;
}
.rev-card blockquote {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  quotes: '“' '”';
  font-style: italic;
}
.rev-card blockquote::before {
  content: open-quote;
  color: var(--terracotta);
  font-size: 1.4em;
  line-height: 0.5;
}
.rev-card blockquote::after {
  content: close-quote;
  color: var(--terracotta);
  font-size: 1.4em;
  line-height: 0.5;
}
.rev-who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.rev-ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--terracotta);
  overflow: hidden;
}
.rev-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rev-ava.alt {
  background: var(--text);
  color: var(--bg);
  border: 2px solid var(--line);
}
.rev-who b {
  display: block;
  font-size: 14px;
  font-weight: 700;
}
.rev-who span {
  font-size: 12px;
  color: var(--muted);
}

/* ============================================================
   ENQUIRY
   ============================================================ */
.enq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.enq-desc {
  color: var(--muted);
  font-size: 17px;
  margin-top: 24px;
  max-width: 460px;
  line-height: 1.7;
}

.book-opts {
  display: grid;
  gap: 12px;
  margin: 20px 0 32px;
}
.book-opt {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  transition: all 0.3s var(--ease);
}
.book-opt:hover {
  border-color: var(--terracotta);
  transform: translateX(4px);
}
.book-opt .i {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: var(--terracotta-soft);
  color: var(--terracotta);
  flex-shrink: 0;
  font-size: 18px;
}
.book-opt b {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}
.book-opt small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: 13px;
}

.chan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 40px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.chan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100%;
  transition: all 0.35s var(--ease);
}
.chan:hover {
  border-color: var(--terracotta);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.08);
}
.chan-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--terracotta);
  font-size: 20px;
}
.chan-top .arr {
  color: var(--muted);
  transition: all 0.3s var(--ease);
  font-size: 16px;
}
.chan:hover .chan-top .arr {
  color: var(--terracotta);
  transform: rotate(45deg);
}
.chan small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.chan b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-top: 4px;
  display: block;
  letter-spacing: -0.01em;
}
.chan span {
  font-size: 12px;
  color: var(--muted);
}

/* ============================================================
   FORM
   ============================================================ */
.form-card {
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: 0 30px 80px rgba(26, 26, 26, 0.1);
}
.form-card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.f-fields {
  margin-top: 32px;
  display: grid;
  gap: 20px;
}
.f-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.f-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.f-field input,
.f-field select,
.f-field .f-select-btn,
.f-field .f-select-panel {
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 0;
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: all 0.3s;
}
.f-field input::placeholder {
  color: #a89b8e;
}
.f-field input:focus,
.f-field select:focus,
.f-field .f-select.open .f-select-btn {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px var(--terracotta-soft);
}

/* Strip the browser's own rounded/native select chrome so it matches the
   square, flat-bordered look of the text inputs, and draw our own chevron
   in its place (see .f-select-chevron below). */
.f-select {
  position: relative;
  display: block;
}
.f-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.f-select-chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.f-ops-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 8px;
}
.f-ops-row .f-submit {
  flex: 1 1 auto;
  width: auto;
  margin-top: 0;
}
.f-ops-row .btn-ghost {
  flex: 0 0 auto;
  justify-content: center;
  white-space: nowrap;
}

.f-submit {
  width: 100%;
  margin-top: 8px;
  background: var(--terracotta);
  color: #fff;
  border: 2px solid var(--terracotta);
  border-radius: 0;
  padding: 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.4s var(--ease);
  cursor: pointer;
}
.f-submit:hover {
  background: var(--text);
  border-color: var(--text);
  box-shadow: 0 12px 40px rgba(26, 26, 26, 0.2);
  transform: translateY(-2px);
}

.f-helper {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}

/* Extra breathing room below the enquiry form (on top of .section's own
   padding) since it's the last section before the footer — the Room Type
   field's native <select> popup renders as a browser overlay right on top
   of whatever's behind it, so a bit more buffer keeps that from reading as
   a layout glitch when it opens near the bottom of the page. */
#contact {
  padding-bottom: 40px;
}
@media (max-width: 768px) {
  #contact {
    padding-bottom: 24px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  border-top: 2px solid var(--text);
  padding: 80px 0 44px;
  overflow: hidden;
  background: var(--bg);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
}
.foot-desc {
  max-width: 360px;
  color: var(--muted);
  font-size: 14px;
  margin-top: 16px;
  line-height: 1.7;
}
.foot-socials {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.foot-socials a {
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: 2px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 17px;
  transition: all 0.35s var(--ease);
}
.foot-socials a:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
  transform: translateY(-3px);
}

.foot-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 56px;
}
.foot-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.3s;
}
.foot-nav a:hover {
  color: var(--terracotta);
}

.foot-desk small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
}
.foot-desk a {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  margin-top: 8px;
  transition: color 0.3s;
  letter-spacing: -0.02em;
}
.foot-desk a:hover {
  color: var(--terracotta);
}
.foot-desk p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.foot-giant {
  margin-top: 72px;
  font-family: var(--font-display);
  font-weight: 700;
  /* Ceiling comes from --giant-max, set inline per-business based on the
     longest word in the name (see app.js) so long names shrink enough to
     wrap only between words, never in the middle of one. */
  font-size: clamp(2.5rem, 14vw, var(--giant-max, 12rem));
  line-height: 0.88;
  letter-spacing: -0.05em;
  text-align: center;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(26, 26, 26, 0.1);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  user-select: none;
  transition: all 0.6s;
}
.foot-giant:hover {
  -webkit-text-stroke-color: var(--terracotta);
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.foot-base em {
  font-family: var(--font-serif);
  font-style: italic;
}

/* ============================================================
   MODAL (brix-modal)
   ============================================================ */
.brix-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(26, 26, 26, 0.5);
  backdrop-filter: blur(6px);
}
.brix-modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--text);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 24px 60px rgba(26, 26, 26, 0.2);
}
.brix-modal-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
}
.brix-modal-note {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
}
.brix-modal-field {
  display: block;
  margin: 14px 0;
  font-size: 13px;
  color: var(--muted);
}
.brix-modal-field input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 0;
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s;
}
.brix-modal-field input:focus {
  border-color: var(--terracotta);
}
.brix-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.brix-modal-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 0;
  border: 2px solid var(--line);
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.3s;
}
.brix-modal-btn.go {
  background: var(--terracotta);
  color: #fff;
  border-color: var(--terracotta);
}
.brix-modal-btn.go:hover {
  background: var(--text);
  border-color: var(--text);
}
.brix-modal-btn.ghost {
  background: transparent;
  color: var(--text);
}
.brix-modal-btn.ghost:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}

/* ============================================================
   OPS CTA
   ============================================================ */
.ops-cta.ok {
  border-color: var(--terracotta);
  color: var(--terracotta);
}

/* ============================================================
   GLOW ELEMENTS
   ============================================================ */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.glow-lime {
  width: 500px;
  height: 500px;
  background: rgba(196, 92, 62, 0.08);
  top: -160px;
  right: -100px;
}
.glow-warm {
  width: 450px;
  height: 450px;
  background: rgba(245, 166, 35, 0.07);
  bottom: -180px;
  left: -140px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid,
  .about-grid,
  .loc-grid,
  .enq-grid {
    grid-template-columns: 1fr;
  }
  .collage {
    height: 500px;
    margin-top: 24px;
  }
  .about-media,
  .map-frame {
    position: relative;
    top: 0;
  }
  .rooms-grid {
    grid-template-columns: 1fr 1fr;
  }
  .rev-cols {
    columns: 2;
  }
  .map-frame iframe {
    height: 420px;
  }
  .food-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 80px 0;
  }
  .wrap {
    padding: 0 20px;
  }
  .nav-links {
    display: none;
  }
  .nav-phone {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
  .nav {
    padding: 14px 20px;
  }
  .hero {
    padding-top: 130px;
    min-height: auto;
  }
  .hero-stats {
    flex-direction: column;
    gap: 20px;
  }
  .hero-stat + .hero-stat {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 16px;
  }
  .collage {
    height: 400px;
  }
  .rooms-grid,
  .rev-cols,
  .chan-grid,
  .f-pair {
    grid-template-columns: 1fr;
    columns: 1;
  }
  .chan-grid {
    grid-auto-rows: auto;
  }
  .amen-row {
    grid-template-columns: 44px 1fr auto;
  }
  .amen-icon {
    display: none;
  }
  .value-row {
    grid-template-columns: 44px 1fr;
  }
  .value-icon {
    display: none;
  }
  .form-card {
    padding: 28px;
  }
  .about-media .sub {
    left: -10px;
    bottom: -24px;
  }
  .dist-grid,
  .rules-grid {
    grid-template-columns: 1fr;
  }
  .book-opt {
    padding: 14px 16px;
  }
  .foot-giant {
    font-size: clamp(2rem, 11vw, var(--giant-max-mobile, 6rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rv {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .ticker-track,
  .collage-chip,
  .scroll-cue .lucide,
  .boot-orb {
    animation: none;
  }
}

/* Video tour — responsive 16:9 embed (YouTube / Vimeo iframe). */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 860px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   LAYOUT FIXES — contact cards, footer wordmark, long business names
   Appended deliberately: these override rules declared earlier in this file,
   including ones inside media queries, without rewriting them.
   ============================================================ */

/* 1 — Contact channel cards.
   .chan-grid sets `grid-auto-rows: 1fr`, so every card is as tall as the
   tallest one. The phone card's hint is the business's full week of opening
   hours ("Monday: Open 24 hours; Tuesday: …"), which ran to eight lines and
   dragged the WhatsApp, Instagram and Email cards to the same height — three
   cards that were almost entirely empty space. Clamping the hint to two lines
   keeps the row compact; app.js puts the full text in the title attribute, so
   nothing is lost. */
.chan-hint {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* A grid item defaults to `min-width: auto`, so a long unbroken string — an
   email address, a URL — sizes the card to the string instead of wrapping,
   and the text escapes the card's border. */
.chan {
  min-width: 0;
}
.chan > *,
.chan b,
.chan small,
.chan span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The channel cards are now a direct child of .enq-grid rather than a
   nested block inside its left column. Nested, they were confined to half
   the section width — two cramped cards per row — while the area beside them
   sat empty, because the form in the right column is shorter than the
   heading and booking options stacked above them. Spanning both columns
   fills that gap and lets all four cards sit on one row.
   `auto-fit` handles every width from here down without a media query. */
.enq-grid > .chan-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  width: 100%;
}

/* Every other template collapses the enquiry section to one column at
   1024px (obsidian at 960px). Sovereign had no such rule at all, so the
   heading, the booking options and the form stayed side by side in half a
   viewport all the way down to 320px. Declared here for all eight so the
   floor is guaranteed; where a template already collapses earlier, that
   wider breakpoint still wins above 1024px and this changes nothing. */
@media (max-width: 1024px) {
  .enq-grid {
    grid-template-columns: 1fr;
  }
}

/* 2 — Footer wordmark.
   `word-break: break-word` breaks inside a word whenever the word does not
   fit, so a long business name split mid-word: "ZOSTEL BANGALOR / E
   (INDIRANA / GAR)". The fix is to stop the word ever needing to break.
   `--fg-ch` is the character count of the longest word in the name, set on
   the element by app.js; capping the size so that word fits the viewport
   means the browser never has to split it. `overflow-wrap` stays as the
   last-resort guard for a single absurdly long word. */
.foot-giant {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  font-size: min(clamp(4.5rem, 16vw, 16rem), calc(96cqw / (var(--fg-ch, 8) * 0.67)));
}

/* The wrapper app.js emits around the wordmark. `inline-size` containment
   means 1cqw is 1% of the space the footer actually gives the text, gutters
   already subtracted — 100vw would have ignored them and overflowed. */
.foot-giant-fit {
  container-type: inline-size;
}

/* 3 — Navbar with a long name.
   The name sits in a pill navbar next to the phone button and the burger.
   `min-width: 0` lets it share the row instead of forcing an overflow, and
   the clamp stops a very long name running to a third line. */
.nav-logo {
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 640px) {
  .nav-logo {
    font-size: clamp(14px, 4.4vw, 19px);
  }
}

/* 5 — Form fields on small screens.
   Every input and select in these eight templates is set between 13.5px and
   15px. iOS Safari zooms the entire page in whenever a focused field is under
   16px, and it does not zoom back out afterwards — the visitor is left
   scrolled sideways in the middle of the enquiry form with no obvious way
   back. 16px is a browser threshold, not a design preference, so it only
   applies at the widths where a touch keyboard is in play.
   The 44px floor is the minimum comfortable touch target; obsidian sat at
   about 40px, and obsidian is also the one template with no mobile form
   rules of its own at all. */
@media (max-width: 640px) {
  .f-field input,
  .f-field select,
  .f-field textarea,
  .f-field .f-select-btn {
    font-size: 16px;
    min-height: 44px;
  }
  .form-card {
    padding: 22px 18px;
  }
  /* .f-submit is width:100% inside a flex row, so a WhatsApp button beside it
     had no room left and was crushed down to its own padding. Wrapping gives
     each control a full line instead. */
  .f-ops-row {
    flex-wrap: wrap;
  }
  .f-ops-row > * {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* 6 — In-page select.
   A native <select> opens an operating-system menu. The page cannot style,
   size or position it: on a narrow viewport Chrome draws it at its own width,
   overhanging the layout entirely, and it looks nothing like the form around
   it. app.js now renders a listbox in the page and keeps the real <select>
   hidden beside it as the value holder, so FormData still sees it.

   The trigger and the panel are added to this theme's own
   `.f-field input, .f-field select` rule above rather than restyled here, so
   they inherit its background, border, radius, colour and font for free and
   stay correct in every one of the eight skins. Only layout lives here. */
.f-select {
  position: relative;
}
/* Kept focusable-adjacent but out of the tab order and off-screen — removing
   it or setting display:none would drop the field from the submitted form. */
.f-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.f-field .f-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.f-select-caret {
  flex: none;
  transition: transform 0.25s;
}
.f-select.open .f-select-caret {
  transform: rotate(180deg);
}
.f-field .f-select-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto;
  max-height: min(260px, 46vh);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
.f-select-panel[hidden] {
  display: none;
}
.f-select-opt {
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Mixed from currentColor so the highlight reads correctly on the light skins
   and the dark ones without a per-theme value. */
.f-select-opt:hover,
.f-select-opt.is-active {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.f-select-opt[aria-selected='true'] {
  font-weight: 600;
}

/* ============================================================
   HERO STAGE WRAPPERS
   ============================================================
   Why these exist: the shared runtime lights a stage with an ::after overlay
   (key light + rim), and a pseudo-element does not render on a replaced
   element. With data-stage on the <img>, this hero got the shadow and the tilt
   but never the key light -- the one thing that separated the 8 Style1 heroes
   from the 11 Style2 ones.

   The wrapper takes over POSITION and SIZE; the image keeps its own crop and
   authored treatment. Measured before/after at 1440 / 1024 / 768 / 390: the
   image's box is identical to the pixel in all four, as is the collage height
   and the hero height.

   AUTHORED TRANSFORMS MOVE TO THE WRAPPER, and this is not optional. The hover
   lift was `transform: translateY(-4px)` on the image. Left there, the image
   would slide up INSIDE a wrapper that clips it -- opening a 4px gap along the
   bottom instead of lifting the plate. The whole plate has to move, so the
   transform belongs to the element that is the plate.

   It composes with the runtime rather than fighting it: `translate` and
   `transform` are separate CSS properties, both applied, neither overwriting
   the other. Verified in a browser -- setting `translate` leaves the computed
   rotate matrix untouched. So the wrapper carries the authored transform and
   the runtime's translate at the same time.

   `filter` stays on the IMAGE. It is a treatment of the photograph, not a
   movement of the plate, and it is part of this pack's identity.

   box-shadow moves to the wrapper because the stage draws it there now; leaving
   it on the image too would double it, one inside the other. */
.collage-main-stage {
  position: absolute;
  right: 0;
  top: 0;
  width: 85%;
  height: 80%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.collage-main-stage > .collage-main {
  position: static;
  width: 100%;
  height: 100%;
  box-shadow: none;
}
.collage-sub-stage {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  aspect-ratio: 4/3.2;
  /* the mount board is part of this template's identity, so it moves to the
     wrapper intact rather than being dropped */
  border: 6px solid var(--bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.collage-sub-stage > .collage-sub {
  position: static;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  box-shadow: none;
  /* inner radius = outer minus the border, or the corners show a light sliver */
  border-radius: calc(var(--radius-lg) - 6px);
}
/* the hover lift now moves the PLATE, not the photograph inside it */
.collage:hover .collage-main-stage {
  transform: translateY(-4px);
  transition: transform 0.7s var(--ease);
}
.collage:hover .collage-sub-stage {
  transform: translateY(-8px) rotate(-1deg);
  transition: transform 0.7s var(--ease);
}
/* and the image itself no longer moves independently of its frame */
.collage-main-stage > .collage-main,
.collage-sub-stage > .collage-sub {
  transform: none;
}