/* ============================================================
   NIVAAS — LIVING EDITION (Phase 2)
   Same section set as midnight; Living visual language (Fraunces /
   Manrope, cream + forest + terracotta). Renders from sites.json.
   ============================================================ */

/* ============================================================
   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: #f7f1e6;
  --surface: #fbf7ee;
  --surface-2: #efe6d4;
  --line: rgba(29, 42, 34, 0.12);
  --line-strong: rgba(29, 42, 34, 0.22);
  --text: #1d2a22;
  --muted: #5c6b61;
  --lime: #bc5727;
  --lime-soft: rgba(188, 87, 39, 0.12);
  --font-display: 'Fraunces', Georgia, serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 22px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--lime);
  color: #fbf7ee;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #2a2e1f;
  border-radius: 8px;
}
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 while sites.json loads */
.boot-screen {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.boot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  animation: boot-pulse 1.1s ease-in-out infinite;
}
@keyframes boot-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.7);
    opacity: 0.4;
  }
}
.boot-error {
  flex-direction: column;
  gap: 14px;
  text-align: center;
  padding: 24px;
}
.boot-error b {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--text);
  text-transform: none;
}
.boot-error span {
  letter-spacing: 0.04em;
  max-width: 420px;
  line-height: 1.6;
}
.boot-retry {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 12px 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}
.boot-retry:hover {
  border-color: var(--lime);
  color: var(--lime);
}

/* ——— utilities ——— */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow-mono {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lime);
}
.eyebrow-mono::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
}
.accent-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.text-lime {
  color: var(--lime);
}
.section {
  padding: 110px 0;
  position: relative;
}

/* ——— reveal animation ——— */
.rv {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease),
    filter 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.rv.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ——— buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: all 0.35s var(--ease);
}
.btn .lucide {
  transition: transform 0.35s var(--ease);
}
.btn:hover .lucide {
  transform: translateX(3px);
}
.btn-lime {
  background: var(--lime);
  color: #fbf7ee;
}
.btn-lime:hover {
  box-shadow: 0 8px 32px rgba(188, 87, 39, 0.35);
  transform: translateY(-2px);
}
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--lime);
  color: var(--lime);
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(1160px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  background: rgba(251, 247, 238, 0.92);
  border: 1px solid var(--line);
  border: 1px solid rgba(29, 42, 34, 0.08);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: nav-drop 0.9s var(--ease) 0.15s both;
}
@keyframes nav-drop {
  from {
    opacity: 0;
    transform: translate(-50%, -24px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nav-logo em {
  color: var(--lime);
  font-style: normal;
}
.nav-logo img {
  height: 30px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 28px;
}
.nav-links a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.3s;
}
.nav-links a:hover {
  color: var(--lime);
}
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lime);
  color: #11130a;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.3s var(--ease);
}
.nav-phone:hover {
  box-shadow: 0 6px 24px rgba(211, 248, 92, 0.4);
}
.nav-burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  align-items: center;
  justify-content: center;
}

/* mobile menu */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(247, 241, 230, 0.98);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.mmenu.open {
  opacity: 1;
  pointer-events: auto;
}
.mmenu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mmenu-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mmenu nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.mmenu nav a {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  opacity: 0;
  transform: translateY(20px);
  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(--lime);
}
.mmenu .nav-phone {
  width: fit-content;
  margin-top: 28px;
}
.mmenu-foot {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 150px 0 80px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 60% 30%, black 20%, transparent 75%);
  opacity: 0.5;
}
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.glow-lime {
  width: 480px;
  height: 480px;
  background: rgba(211, 248, 92, 0.13);
  top: -140px;
  right: -80px;
}
.glow-warm {
  width: 420px;
  height: 420px;
  background: rgba(150, 110, 60, 0.16);
  bottom: -160px;
  left: -120px;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.4vw, 6rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 26px 0 24px;
}
.hero h1 .accent-serif {
  font-size: 1.06em;
  letter-spacing: -0.02em;
}
.hero-sub {
  max-width: 460px;
  color: var(--muted);
  font-size: 15.5px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.hero-stats {
  display: flex;
  margin-top: 54px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-stat {
  flex: 1;
}
.hero-stat + .hero-stat {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
.hero-stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 700;
  color: var(--text);
}
.hero-stat span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* hero collage */
.collage {
  position: relative;
  height: 620px;
}
.collage-main {
  position: absolute;
  right: 0;
  top: 0;
  width: 82%;
  height: 78%;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  transform: rotate(2deg);
  transition: transform 0.6s var(--ease);
}
.collage-sub {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 4/3.4;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  transform: rotate(-3deg);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
  transition: transform 0.6s var(--ease);
}
.collage:hover .collage-main {
  transform: rotate(0deg) scale(1.01);
}
.collage:hover .collage-sub {
  transform: rotate(-1deg) translateY(-6px);
}
.collage-chip {
  position: absolute;
  top: 42%;
  left: -8px;
  background: rgba(251, 247, 238, 0.95);
  border: 1px solid var(--line-strong);
  border: 1px solid rgba(29, 42, 34, 0.08);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 14px 18px;
  transform: rotate(-2deg);
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0%,
  100% {
    transform: rotate(-2deg) translateY(0);
  }
  50% {
    transform: rotate(-2deg) translateY(-10px);
  }
}
.collage-chip .stars {
  display: flex;
  gap: 3px;
  color: var(--lime);
  font-size: 13px;
}
.collage-chip q {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  quotes: '“' '”';
}
.collage-chip small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
}
.scroll-cue:hover {
  color: var(--lime);
}
.scroll-cue .lucide {
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* ============ TICKER (outline marquee) ============ */
.ticker {
  overflow: hidden;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ticker-track {
  display: flex;
  width: max-content;
  gap: 48px;
  align-items: center;
  white-space: nowrap;
  animation: tick 36s linear infinite;
}
.ticker:hover .ticker-track {
  animation-play-state: paused;
}
@keyframes tick {
  to {
    transform: translateX(-50%);
  }
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 48px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 240, 226, 0.34);
  transition: all 0.4s;
}
.ticker-item:hover {
  color: var(--lime);
  -webkit-text-stroke-color: var(--lime);
}
.ticker-item .lucide {
  color: var(--lime);
  -webkit-text-stroke: 0;
  font-size: 0.55em;
}

/* ============ SECTION HEADERS ============ */
.head {
  margin-bottom: 60px;
}
.head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-top: 22px;
}
.head h2 .accent-serif {
  font-size: 1.07em;
}
.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.head-note {
  max-width: 320px;
  color: var(--muted);
  font-size: 14px;
}

/* ============ ABOUT ============ */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
}
.about-copy p {
  color: var(--muted);
  font-size: 15.5px;
  margin-top: 18px;
  max-width: 520px;
}
.about-copy p:first-of-type {
  margin-top: 30px;
}
.values {
  margin-top: 48px;
  border-top: 1px solid var(--line);
}
.value-row {
  display: grid;
  grid-template-columns: 56px 44px 1fr;
  gap: 20px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition:
    background 0.35s,
    padding 0.35s var(--ease);
}
.value-row:hover {
  background: var(--lime-soft);
  padding-left: 14px;
}
.value-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lime);
  letter-spacing: 0.1em;
}
.value-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  font-size: 18px;
}
.value-row h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.value-row p {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 440px;
}
.signature {
  margin-top: 36px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--muted);
}

.about-media {
  position: sticky;
  top: 110px;
}
.about-media .main {
  width: 100%;
  aspect-ratio: 4/4.6;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
}
.about-media .sub {
  position: absolute;
  left: -34px;
  bottom: -34px;
  width: 46%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 16px;
  border: 4px solid var(--bg);
  transform: rotate(-4deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.about-badge {
  position: absolute;
  top: -18px;
  right: -10px;
  background: var(--lime);
  color: #11130a;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  transform: rotate(4deg);
  box-shadow: 0 10px 30px rgba(211, 248, 92, 0.3);
}

/* ============ 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: 22px;
}
.room-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.5s var(--ease),
    border-color 0.4s,
    box-shadow 0.5s var(--ease);
}
.room-card:hover {
  transform: translateY(-8px);
  border-color: var(--line-strong);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.room-card.featured {
  border-color: rgba(211, 248, 92, 0.55);
  box-shadow:
    0 0 0 1px rgba(211, 248, 92, 0.25),
    0 24px 60px rgba(211, 248, 92, 0.07);
}
.room-media {
  position: relative;
  height: 240px;
  overflow: hidden;
}
.room-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.room-card:hover .room-media img {
  transform: scale(1.06);
}
.room-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(12, 13, 8, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
}
.room-card.featured .room-badge {
  background: var(--lime);
  color: #11130a;
  border-color: var(--lime);
  font-weight: 700;
}
.room-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.room-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.room-blurb {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted);
}
.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: #c9ccb9;
}
.room-feats .lucide {
  color: var(--lime);
  margin-top: 3px;
  flex-shrink: 0;
}
.room-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.room-price {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.room-price small {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.room-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lime);
  padding: 10px 16px;
  border: 1px solid rgba(211, 248, 92, 0.4);
  border-radius: 999px;
  transition: all 0.3s var(--ease);
}
.room-cta:hover {
  background: var(--lime);
  color: #11130a;
}
.room-cta .lucide {
  transition: transform 0.3s var(--ease);
}
.room-cta:hover .lucide {
  transform: rotate(45deg);
}
.stay-note {
  margin-top: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ============ AMENITIES (numbered rows) ============ */
.amen-list {
  border-top: 1px solid var(--line);
}
.amen-row {
  display: grid;
  grid-template-columns: 70px 52px 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 24px 10px;
  border-bottom: 1px solid var(--line);
  transition:
    background 0.35s,
    padding 0.35s var(--ease);
  position: relative;
}
.amen-row:hover {
  background: var(--surface);
  padding-left: 22px;
}
.amen-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  transition: color 0.3s;
}
.amen-row:hover .amen-num {
  color: var(--lime);
}
.amen-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  font-size: 19px;
  overflow: hidden;
  transition: all 0.35s var(--ease);
}
.amen-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amen-row:hover .amen-icon {
  border-color: var(--lime);
  box-shadow: 0 0 20px rgba(211, 248, 92, 0.18);
}
.amen-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.amen-text p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}
.amen-arrow {
  color: var(--muted);
  transition: all 0.35s var(--ease);
  font-size: 20px;
}
.amen-row:hover .amen-arrow {
  color: var(--lime);
  transform: rotate(45deg);
}

/* ============ LOCATION ============ */
.loc-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 56px;
  align-items: start;
}
.loc-desc {
  color: var(--muted);
  font-size: 15.5px;
  margin-top: 24px;
  max-width: 440px;
}
.addr-card {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  gap: 18px;
}
.addr-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--lime);
  color: #11130a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.addr-card small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.addr-card p {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  margin-top: 5px;
}
.addr-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lime);
}
.addr-card a:hover {
  text-decoration: underline;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: #c9ccb9;
  transition: all 0.3s var(--ease);
}
.chip:hover {
  border-color: var(--lime);
  color: var(--lime);
  transform: translateY(-2px);
}
.chip b {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--lime);
  letter-spacing: 0.06em;
}
.map-frame {
  position: sticky;
  top: 110px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.map-frame iframe {
  width: 100%;
  height: 540px;
  border: 0;
  display: block;
  filter: invert(0.9) hue-rotate(180deg) grayscale(0.25) brightness(0.86) contrast(1.06);
}

.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(12, 13, 8, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
}

/* ============ 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: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 28px;
  transition:
    border-color 0.3s,
    transform 0.3s var(--ease);
}
.agg-card:hover {
  border-color: rgba(211, 248, 92, 0.5);
  transform: translateY(-3px);
}
.agg-num {
  font-family: var(--font-mono);
  font-size: 52px;
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
}
.agg-card .stars {
  display: flex;
  gap: 3px;
  color: var(--lime);
  font-size: 14px;
}
.agg-card small {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.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: 18px;
  padding: 26px;
  transition:
    border-color 0.3s,
    transform 0.4s var(--ease);
}
.rev-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}
.rev-card .stars {
  display: flex;
  gap: 3px;
  color: var(--lime);
  font-size: 13px;
}
.rev-card blockquote {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.5;
  color: #dfe2cf;
  quotes: '“' '”';
}
.rev-card blockquote::before {
  content: open-quote;
}
.rev-card blockquote::after {
  content: close-quote;
}
.rev-who {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
}
.rev-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: #11130a;
  background: var(--lime);
  overflow: hidden;
}
.rev-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rev-ava.alt {
  background: #2c3120;
  color: var(--lime);
  border: 1px solid var(--line-strong);
}
.rev-who b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
}
.rev-who span {
  font-size: 12px;
  color: var(--muted);
}

/* ============ ENQUIRY ============ */
.enq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.enq-desc {
  color: var(--muted);
  font-size: 15.5px;
  margin-top: 22px;
  max-width: 440px;
}
.chan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 36px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.chan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: 100%;
  transition: all 0.35s var(--ease);
}
.chan:hover {
  border-color: rgba(211, 248, 92, 0.55);
  transform: translateY(-3px);
  background: var(--surface-2);
}
.chan-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--lime);
  font-size: 18px;
}
.chan-top .arr {
  color: var(--muted);
  transition: all 0.3s var(--ease);
  font-size: 15px;
}
.chan:hover .chan-top .arr {
  color: var(--lime);
  transform: rotate(45deg);
}
.chan small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.chan b {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  margin-top: 3px;
  display: block;
}
.chan span {
  font-size: 11.5px;
  color: var(--muted);
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: 38px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
}
.form-card h3 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 12px;
}
.f-fields {
  margin-top: 28px;
  display: grid;
  gap: 18px;
}
.f-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.f-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.f-field input,
.f-field select,
.f-field .f-select-btn,
.f-field .f-select-panel {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 13px 15px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.f-field input::placeholder {
  color: #5d624f;
}
.f-field input:focus,
.f-field select:focus,
.f-field .f-select.open .f-select-btn {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(211, 248, 92, 0.14);
}
.f-submit {
  width: 100%;
  margin-top: 8px;
  background: var(--lime);
  color: #11130a;
  border: 0;
  border-radius: 999px;
  padding: 16px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.35s var(--ease);
}
.f-submit:hover {
  box-shadow: 0 10px 36px rgba(211, 248, 92, 0.35);
  transform: translateY(-2px);
}
.f-helper {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* ============ FOOTER ============ */
footer {
  border-top: 1px solid var(--line);
  padding: 70px 0 40px;
  overflow: hidden;
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}
.foot-desc {
  max-width: 340px;
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 14px;
}
.foot-socials {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.foot-socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 16px;
  transition: all 0.3s var(--ease);
}
.foot-socials a:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: #11130a;
}
.foot-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 56px;
}
.foot-nav a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.3s;
}
.foot-nav a:hover {
  color: var(--lime);
}
.foot-desk small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
}
.foot-desk a {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin-top: 8px;
  transition: color 0.3s;
}
.foot-desk a:hover {
  color: var(--lime);
}
.foot-desk p {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 4px;
}
.foot-giant {
  margin-top: 64px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 15.5vw, 15rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-align: center;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(29, 42, 34, 0.22);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  user-select: none;
  transition: all 0.6s;
}
.foot-giant:hover {
  -webkit-text-stroke-color: rgba(211, 248, 92, 0.4);
}
.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.foot-base em {
  font-family: var(--font-serif);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .hero-grid,
  .about-grid,
  .loc-grid,
  .enq-grid {
    grid-template-columns: 1fr;
  }
  .collage {
    height: 480px;
    margin-top: 20px;
  }
  .about-media,
  .map-frame {
    position: relative;
    top: 0;
  }
  .rooms-grid {
    grid-template-columns: 1fr 1fr;
  }
  .rev-cols {
    columns: 2;
  }
  .map-frame iframe {
    height: 420px;
  }
}
@media (max-width: 768px) {
  .section {
    padding: 76px 0;
  }
  .nav-links {
    display: none;
  }
  .nav-phone {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
  .nav {
    padding: 8px 8px 8px 20px;
  }
  .hero {
    padding-top: 120px;
  }
  .hero-stats {
    flex-direction: column;
    gap: 18px;
  }
  .hero-stat + .hero-stat {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }
  .collage {
    height: 380px;
  }
  .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: 40px 1fr auto;
  }
  .amen-icon {
    display: none;
  }
  .value-row {
    grid-template-columns: 40px 1fr;
  }
  .value-icon {
    display: none;
  }
  .form-card {
    padding: 26px;
  }
  .about-media .sub {
    left: -8px;
    bottom: -20px;
  }
}

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

/* ── Phase 2 ops islands (FSD-OPS-05) ── */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 18px 20px;
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.trust-chip.lime {
  color: var(--lime);
  border-color: rgba(188, 87, 39, 0.35);
  background: var(--lime-soft);
}
.avail-updated {
  font-size: 12px;
  margin: -8px 0 18px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.room-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.room-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.chip-lime {
  color: var(--lime);
  border-color: rgba(188, 87, 39, 0.4);
}
.chip-warn {
  color: #9a6b1e;
  border-color: rgba(154, 107, 30, 0.45);
}
.chip-dim {
  opacity: 0.55;
}
.room-allin {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 12px;
  line-height: 1.45;
}
.room-allin b {
  color: var(--text);
  font-weight: 600;
}
.room-ops-ctas {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.btn-sm {
  padding: 10px 16px;
  font-size: 13px;
}
.food-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}
.menu-tabs {
  display: flex;
  gap: 8px;
  margin: 22px 0 14px;
  flex-wrap: wrap;
}
.menu-tabs button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
}
.menu-tabs button.on {
  background: var(--lime);
  color: #fbf7ee;
  border-color: transparent;
}
.meal {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.meal .t {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}
.food-media img {
  width: 100%;
  border-radius: var(--radius, 22px);
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 1px solid var(--line);
}
.dist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.dist-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius, 22px);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px;
}
.dist-card .m {
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.video-ph {
  position: relative;
  border-radius: var(--radius, 22px);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16/9;
  background: var(--surface-2, #1b1e14);
}
.video-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.video-ph .play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--lime);
  color: #fbf7ee;
  font-size: 22px;
  text-decoration: none;
}
.rules-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: start;
}
.faq-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 14px 18px;
  margin-bottom: 10px;
}
.faq-card summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  list-style: none;
}
.faq-card summary::-webkit-details-marker {
  display: none;
}
.faq-card p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}
/* 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: 10px;
  color: var(--muted);
  font-size: 14px;
}
.book-opts {
  display: grid;
  gap: 10px;
  margin: 18px 0 28px;
}
.book-opt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  transition: border-color 0.25s var(--ease, ease);
}
.book-opt:hover {
  border-color: var(--line-strong, rgba(236, 240, 222, 0.16));
}
.book-opt .i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--lime-soft);
  color: var(--lime);
  flex-shrink: 0;
}
.book-opt b {
  display: block;
  font-family: var(--font-display);
}
.book-opt small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 12px;
}
.f-ops-row {
  display: flex;
  gap: 10px;
  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;
}
@media (max-width: 860px) {
  .food-grid,
  .rules-grid,
  .dist-grid {
    grid-template-columns: 1fr;
  }
}
/* ——— visitor funnel: CTA success + OTP/contact modal (FSD-OPS-10) ——— */
.ops-cta.ok {
  border-color: var(--lime);
  color: var(--lime);
}
.brix-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.brix-modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.brix-modal-title {
  margin: 0 0 12px;
  font-family: var(--font-display, inherit);
  font-size: 22px;
}
.brix-modal-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
}
.brix-modal-field {
  display: block;
  margin: 12px 0;
  font-size: 13px;
  color: var(--muted);
}
.brix-modal-field input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}
.brix-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.brix-modal-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 14px;
  cursor: pointer;
}
.brix-modal-btn.go {
  background: var(--lime);
  color: var(--bg);
  border-color: var(--lime);
}
.brix-modal-btn.ghost {
  background: transparent;
  color: var(--text);
}

/* 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(4rem, 15.5vw, 15rem), 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
   ============================================================
   Same contract as the other Style1 packs: the wrapper becomes the plate so
   the shared runtime's ::after key light has an element to render on -- a
   pseudo-element does not exist on an <img>.

   THIS PACK'S DIFFERENCE: the tilt is a BASE transform, not a hover state.
   `rotate(2deg)` and `rotate(-3deg)` are the design -- the photographs are
   pinned to the page at an angle. So the rotation moves to the wrapper along
   with the position: a rotated image inside an unrotated clipping frame would
   have its corners sliced off and show gaps, which is the opposite of the
   intended look.

   The runtime writes `translate` on this same wrapper. `translate` and
   `transform` are separate CSS properties -- both apply, neither overwrites
   the other -- so the 2deg pin survives the stage motion exactly. Verified in
   a browser rather than assumed.
   ============================================================ */
.collage-main-stage {
  position: absolute;
  right: 0;
  top: 0;
  width: 82%;
  height: 78%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  transform: rotate(2deg);
  transition: transform 0.6s var(--ease);
}
.collage-main-stage > .collage-main {
  position: static;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  transform: none;
}
.collage-sub-stage {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 4/3.4;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  transform: rotate(-3deg);
  /* kept as the pre-JS fallback; the stage replaces it once the runtime mounts */
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
  transition: transform 0.6s var(--ease);
}
.collage-sub-stage > .collage-sub {
  position: static;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.collage:hover .collage-main-stage {
  transform: rotate(0deg) scale(1.01);
}
.collage:hover .collage-sub-stage {
  transform: rotate(-1deg) translateY(-6px);
}