/* =============================================================
   Stay on Cypress — Site Styles
   Luxury long-term rental cottage · Hillcrest, San Diego
   ============================================================= */

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

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Warm neutrals */
  --paper:        #FFFFFF;
  --linen:        #FBF9F2;
  --cream:        #F5F1E8;
  --shell:        #EDE6D7;
  --beige:        #D4BDA8;
  --beige-soft:   #E8DACA;
  --taupe:        #A08D77;
  --taupe-soft:   #C7B8A4;

  /* Ink */
  --ink:          #3C3C3B;
  --ink-2:        #6B6967;
  --ink-3:        #9A968F;
  --ink-4:        #C2BDB4;
  --rule:         #EAE2D2;
  --rule-strong:  #D7CCB6;
  --rule-soft:    #F0EAD9;

  /* Sage */
  --sage:         #A7B29A;
  --sage-2:       #8B987F;
  --sage-deep:    #6B7864;
  --sage-soft:    #CFD6C5;
  --sage-mist:    #E4E8DD;

  /* Coastal blue — primary accent */
  --blue:         #5D7591;
  --blue-2:       #3F5366;
  --blue-deep:    #2C3D4F;
  --blue-soft:    #B8C7D2;
  --blue-mist:    #DDE5EB;
  --blue-wash:    #EEF2F5;

  /* Ochre warm tertiary */
  --ochre:        #C1A169;
  --ochre-2:      #A08652;
  --ochre-soft:   #E2D2A9;
  --ochre-wash:   #F2EAD3;

  /* Semantic */
  --bg:           var(--linen);
  --fg:           var(--ink);
  --brand:        var(--blue-2);
  --brand-on:     var(--linen);
  --link:         var(--blue-2);

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(44,61,79,0.04);
  --shadow-sm:    0 2px 8px rgba(44,61,79,0.05);
  --shadow-md:    0 10px 28px rgba(44,61,79,0.07);
  --shadow-lg:    0 22px 60px rgba(44,61,79,0.10);

  /* Radii */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    14px;
  --radius-xl:    22px;
  --radius-pill:  999px;

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --maxw:         1240px;
  --maxw-wide:    1440px;
  --gutter:       clamp(20px, 4vw, 48px);

  /* Motion */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:       150ms;
  --t-med:        260ms;
  --t-slow:       420ms;

  /* Texture */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3   0 0 0 0 0.28   0 0 0 0 0.24   0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ochre-2); }
::selection { background: var(--blue-mist); color: var(--ink); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container      { max-width: var(--maxw);      margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter); }

section.band { padding: 96px 0; }
section.band.tight { padding: 72px 0; }
section.band.bg-linen  { background: var(--linen); }
section.band.bg-cream  { background: var(--cream); }
section.band.bg-paper  { background: var(--paper); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,249,242,0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
}
.nav.scrolled {
  border-bottom-color: var(--rule);
  background: rgba(251,249,242,0.94);
}
.nav-inner {
  display: flex; align-items: center; gap: 28px;
  height: 76px; white-space: nowrap;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink); flex-shrink: 0;
}
.nav-brand .brand-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.nav-brand .word {
  font-family: 'Tenor Sans', serif;
  font-size: 19px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.nav-brand .tagline {
  font-family: var(--font-sans);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--taupe);
}
.nav-brand .tree-mark { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.nav-crumbs {
  display: flex; gap: 6px;
  font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.04em; flex: 1; justify-content: center;
}
.nav-crumbs .sep { color: var(--ink-4); }
.nav-crumbs .cur { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.nav-actions .lang { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }

.nav-cta, .cta-primary {
  background: var(--blue-2); color: var(--linen);
  border: 0; padding: 12px 22px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 13px;
  transition: background var(--t-fast);
  white-space: nowrap; letter-spacing: 0.02em;
}
.nav-cta:hover, .cta-primary:hover { background: var(--blue-deep); }

/* ============================================================
   HERO MOSAIC
   ============================================================ */
.hero-mosaic-wrap { display: block; }
.hero-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4px;
  height: clamp(440px, 60vh, 620px);
  margin: 4px auto 0;
  border-radius: 18px;
  overflow: hidden;
  max-width: var(--maxw-wide);
  width: calc(100% - 2 * var(--gutter));
}
.hero-mosaic .ph {
  background-size: cover; background-position: center; position: relative;
}
.hero-mosaic .stack { display: grid; gap: 4px; }
.hero-mosaic .badge {
  position: absolute; left: 18px; top: 18px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); padding: 6px 12px; border-radius: var(--radius-pill);
}
.hero-mosaic .gallery-btn {
  position: absolute; right: 18px; bottom: 18px;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
  border: 0; border-radius: var(--radius-pill); padding: 10px 18px;
  font-size: 12px; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 0.04em; transition: background var(--t-fast);
}
.hero-mosaic .gallery-btn:hover { background: rgba(255,255,255,1); }
.hero-mosaic .gallery-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ============================================================
   TITLE BLOCK
   ============================================================ */
.title-block {
  text-align: center;
  padding: 0 var(--gutter);
  max-width: 1000px; margin: 0 auto;
}
.location-trail {
  font-family: var(--font-sans);
  font-size: 11px; color: var(--taupe);
  letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700;
  margin-bottom: 22px;
}
.location-trail .sep { color: var(--ink-4); margin: 0 10px; }
.title-block h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 400; line-height: 1.05; letter-spacing: -0.02em;
  margin: 0; color: var(--ink);
}
.title-block .subtitle {
  margin: 22px auto 0; max-width: 56ch;
  font-family: var(--font-display); font-size: 20px; font-style: italic;
  color: var(--ink-2); line-height: 1.5; font-weight: 400;
}
.title-block .meta-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 32px;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-2);
}
.title-block .meta-row span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.title-block .meta-row svg { stroke: var(--ink-2); width: 17px; height: 17px; flex-shrink: 0; }

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
.section-label {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--taupe); font-weight: 700;
  margin: 0 0 18px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 400; line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 20px;
}
.section-lead {
  font-size: 17px; color: var(--ink-2); line-height: 1.6;
  max-width: 60ch; margin: 0 0 36px;
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 36px; margin-bottom: 36px;
}
.section-head .ttl { flex: 1; max-width: 720px; }
.section-head .ttl .section-title { margin-bottom: 12px; }
.section-head .ttl .section-lead { margin-bottom: 0; }

.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* ============================================================
   CYPRESS PROMISE
   ============================================================ */
.promise-bisect {
  background: linear-gradient(to bottom, var(--paper) 0 50%, var(--cream) 50% 100%);
  padding: 48px 0;
}
.promise {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px; padding: 32px 44px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 18px 40px -28px rgba(44,61,79,0.18);
}
.promise-item { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.promise-item .check {
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  background: var(--sage-mist); border: 1px solid var(--sage-soft);
  display: flex; align-items: center; justify-content: center; margin-top: 2px; flex-shrink: 0;
}
.promise-item .check svg { width: 13px; height: 13px; stroke: var(--sage-deep); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.promise-item strong { display: block; font-weight: 700; color: var(--ink); margin-bottom: 4px; font-size: 14px; }
.promise-item .ds { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* ============================================================
   HIGHLIGHTS
   ============================================================ */
.h-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.h-tile { display: flex; flex-direction: column; min-width: 0; }
.h-tile .photo { aspect-ratio: 4/5; border-radius: 14px; background-size: cover; background-position: center; }
.h-tile .num { font-family: var(--font-display); font-size: 14px; color: var(--taupe); letter-spacing: 0.04em; margin-top: 18px; margin-bottom: 4px; }
.h-tile .cap { font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.3; color: var(--ink); letter-spacing: -0.005em; }

/* ============================================================
   CAROUSEL
   ============================================================ */
.q-arrows { display: flex; gap: 6px; flex-shrink: 0; }
.q-arrow {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--rule-strong); background: transparent;
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.q-arrow:hover { border-color: var(--ink); background: var(--ink); color: var(--linen); }
.q-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.q-arrow svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 56px) / 3);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }

/* ============================================================
   EDITORIAL QUOTE BREAK
   ============================================================ */
.editorial {
  position: relative; min-height: 540px;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  color: var(--linen); overflow: hidden;
}
.editorial::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,40,52,0.18) 0%, rgba(28,40,52,0.55) 100%);
}
.editorial .inner {
  position: relative; z-index: 2;
  text-align: center; max-width: 820px; padding: 0 var(--gutter);
}
.editorial .lead-mark {
  font-family: var(--font-display); font-size: 90px;
  color: rgba(255,255,255,0.5); line-height: 1; margin-bottom: -8px;
}
.editorial blockquote {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400; font-style: italic;
  line-height: 1.3; color: var(--linen);
  margin: 0 0 24px; letter-spacing: -0.005em;
}
.editorial .attrib {
  font-family: var(--font-sans); font-size: 12px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(251,249,242,0.85); font-weight: 700;
}
.editorial .attrib .dot { margin: 0 10px; opacity: 0.6; }

/* ============================================================
   HOME TRUTHS
   ============================================================ */
.truths-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
.truths-img {
  aspect-ratio: 4/5; border-radius: 18px;
  background-size: cover; background-position: center;
}
.ht-list { list-style: none; padding: 0; margin: 0; counter-reset: ht; }
.ht-list li {
  display: grid; grid-template-columns: 42px 1fr; gap: 18px;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  font-size: 16px; color: var(--ink); line-height: 1.55;
  counter-increment: ht;
}
.ht-list li:last-child { border-bottom: 0; }
.ht-num {
  font-family: var(--font-display); font-size: 18px; font-weight: 400;
  color: var(--blue-2); letter-spacing: 0.04em; padding-top: 1px;
}

/* ============================================================
   ABOUT THE STAY
   ============================================================ */
.stay-sub h3 {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--taupe); margin: 0 0 22px;
}
.amen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.amen {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.amen svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.amen .label { font-size: 15px; color: var(--ink); }
.amen-show-all { margin-top: 28px; }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); padding: 12px 24px;
  border-radius: var(--radius-pill); font-weight: 600; font-size: 13px;
  transition: all var(--t-fast); letter-spacing: 0.02em;
}
.btn-ghost:hover { background: var(--ink); color: var(--linen); }

/* Bedrooms */
.bb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bb-card {
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 24px 26px; background: var(--paper); position: relative;
}
.bb-card .badge {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage-deep); background: var(--sage-mist);
  border: 1px solid var(--sage-soft);
  padding: 5px 10px; border-radius: var(--radius-pill); line-height: 1;
}
.bb-card .ic {
  display: inline-flex; width: 36px; height: 36px;
  border-radius: var(--radius-pill); background: var(--linen);
  align-items: center; justify-content: center; margin-bottom: 18px;
}
.bb-card .ic svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.5; }
.bb-card .nm { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.005em; }
.bb-card .ds { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* ============================================================
   HOSTS
   ============================================================ */
.hosts-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: center; }
.hosts-photo {
  aspect-ratio: 4/5; border-radius: 18px; overflow: hidden;
  background-size: cover; background-position: center; position: relative;
}
.hosts-photo .signature {
  position: absolute; right: 20px; bottom: 20px;
  background: rgba(251,249,242,0.95); backdrop-filter: blur(8px);
  border-radius: var(--radius-pill); padding: 8px 16px;
  font-family: var(--font-display); font-style: italic;
  font-size: 17px; color: var(--ink);
}
.hosts-body h2 { margin-bottom: 14px; }
.hosts-body p { font-size: 17px; color: var(--ink-2); line-height: 1.65; margin: 0 0 18px; }
.hosts-body p.first { font-size: 19px; color: var(--ink); }
.hosts-body p.first::first-letter {
  font-family: var(--font-display); font-size: 56px;
  float: left; line-height: 0.9; padding-right: 10px; padding-top: 6px;
  color: var(--blue-2); font-weight: 400;
}
.hosts-body .signoff { margin-top: 22px; display: flex; align-items: center; gap: 18px; }
.hosts-body .signoff .face {
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--linen);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 500; flex-shrink: 0;
}
.hosts-body .signoff .who { font-size: 14px; }
.hosts-body .signoff .who strong { display: block; font-weight: 700; color: var(--ink); font-size: 15px; }
.hosts-body .signoff .who span { color: var(--ink-3); font-size: 12.5px; }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-head { text-align: center; margin-bottom: 56px; }
.reviews-head .score {
  font-family: var(--font-display); font-size: 72px; font-weight: 400;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px;
}
.reviews-head .stars { color: var(--ochre-2); letter-spacing: 3px; font-size: 16px; margin-bottom: 8px; }
.reviews-head .count { font-size: 13px; color: var(--ink-2); letter-spacing: 0.06em; }
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.review {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 16px; padding: 32px;
}
.review .qt { font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: var(--ink); font-style: italic; }
.review .meta { margin-top: 26px; display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--rule); }
.review .av {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--sage-mist); color: var(--sage-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px; font-weight: 500; flex-shrink: 0;
}
.review .who { font-size: 13px; }
.review .who strong { color: var(--ink); font-weight: 700; display: block; font-size: 14px; }
.review .who span { color: var(--ink-3); font-size: 12px; }

/* ============================================================
   LOCAL GUIDE
   ============================================================ */
/* Preview scroller */
.lg-preview-wrap { margin-bottom: 56px; }
.lg-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 18px;
}
.lg-preview-label {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--taupe); font-weight: 700;
}
.lg-preview-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px) / 3);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 48px), transparent 100%);
}
.lg-preview-track::-webkit-scrollbar { display: none; }
.lg-preview-track > * { scroll-snap-align: start; }
.lg-preview-track .card { background: var(--paper); border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); }
.lg-preview-track .card .ph { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.lg-preview-track .card .body { padding: 16px 18px 18px; }
.lg-preview-track .card .nm { font-family: var(--font-display); font-size: 19px; color: var(--ink); font-weight: 500; }
.lg-preview-track .card .ds { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; }

/* Walk/Close/Not Far grid */
.lg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.lg-col { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.lg-col .lg-header { padding: 26px 28px 18px; border-bottom: 1px solid var(--rule); }
.lg-col .lg-header .badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--taupe); margin-bottom: 14px;
}
.lg-col .lg-header .badge svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lg-col .lg-header h3 { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.lg-col .lg-header .h-sub { margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.lg-list { list-style: none; padding: 8px 28px 24px; margin: 0; }
.lg-list li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px dashed var(--rule);
  font-size: 14.5px;
}
.lg-list li:last-child { border-bottom: 0; }
.lg-list li .nm { color: var(--ink); font-weight: 500; }
.lg-list li .nm .cat { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.lg-list li .dist { color: var(--ink-2); font-weight: 600; font-size: 13px; text-align: right; white-space: nowrap; }
.lg-list li .dist .mode { display: block; color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-top: 2px; }

/* ============================================================
   BOOKING POLICIES
   ============================================================ */
.policies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.pol h4 {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--taupe); margin: 0 0 18px;
}
.pol ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.pol li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.pol li svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.4; margin-top: 2px; }
.pol li strong { color: var(--ink); display: block; font-weight: 600; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--blue-deep); color: var(--blue-soft);
  padding: 80px 0 36px; position: relative; overflow: hidden;
}
.footer > .container { position: relative; }
.subscribe {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center;
  padding-bottom: 56px; margin-bottom: 56px;
  border-bottom: 1px solid rgba(221,229,235,0.18);
}
.subscribe h3 {
  font-family: var(--font-display); font-size: clamp(28px, 3vw, 38px);
  font-weight: 400; color: var(--linen); margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.subscribe p { color: var(--blue-soft); font-size: 14px; line-height: 1.55; margin: 0; max-width: 50ch; }
.subscribe form { display: flex; gap: 8px; }
.subscribe input {
  flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--blue-soft);
  color: var(--linen); padding: 14px 0; font-size: 14px; font-family: inherit; outline: none;
}
.subscribe input::placeholder { color: var(--blue-soft); opacity: 0.7; }
.subscribe input:focus { border-bottom-color: var(--linen); }
.subscribe button {
  background: var(--linen); color: var(--blue-deep); border: 0;
  padding: 12px 22px; border-radius: var(--radius-pill); font-family: inherit;
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  transition: background var(--t-fast);
}
.subscribe button:hover { background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; }
.footer h5 { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--linen); margin: 0 0 16px; }
.footer a { color: var(--blue-soft); text-decoration: none; display: block; padding: 5px 0; font-size: 14px; }
.footer a:hover { color: var(--linen); }
.footer .brand-block .brand-lockup { display: flex; align-items: center; gap: 14px; }
.footer .brand-block .brand-lockup img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.footer .brand-block .word { font-family: 'Tenor Sans', serif; font-size: 22px; color: var(--linen); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.1; }
.footer .brand-block .tagline { font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.28em; color: var(--blue-soft); text-transform: uppercase; margin-top: 4px; }
.footer .brand-block p { color: var(--blue-soft); font-size: 13.5px; max-width: 320px; margin-top: 18px; line-height: 1.6; }
.footer-bottom {
  border-top: 1px solid rgba(221,229,235,0.18); margin-top: 56px; padding-top: 24px;
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--blue-soft); letter-spacing: 0.22em; text-transform: uppercase;
}

/* ============================================================
   RESERVE BAR (floating bottom)
   ============================================================ */
.reserve-bar {
  position: fixed; bottom: 24px; left: 50%;
  transform: translate(-50%, 200%);
  z-index: 40;
  background: var(--paper); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 22px;
  display: flex; align-items: center; gap: 24px;
  box-shadow: 0 20px 60px -20px rgba(44,61,79,0.25);
  transition: transform var(--t-med) var(--ease-out);
}
.reserve-bar.show { transform: translate(-50%, 0); }
.reserve-bar .rb-price { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -0.01em; }
.reserve-bar .rb-price small { font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.reserve-bar .rb-divider { width: 1px; height: 24px; background: var(--rule); }
.reserve-bar .rb-meta { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.reserve-bar .rb-meta svg { width: 13px; height: 13px; fill: var(--ochre-2); flex-shrink: 0; }
.reserve-bar .rb-meta strong { color: var(--ink); }

/* ============================================================
   BOOKING DRAWER
   ============================================================ */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(28,40,52,0.32);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out);
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: min(460px, 100vw); z-index: 61;
  background: var(--paper);
  box-shadow: -24px 0 60px -20px rgba(0,0,0,0.25);
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease-out);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; border-bottom: 1px solid var(--rule);
}
.drawer-head .title { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
.drawer-head .close {
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--linen); border: 1px solid var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.drawer-head .close:hover { background: var(--ink); color: var(--linen); border-color: var(--ink); }
.drawer-head .close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawer-body { flex: 1; overflow-y: auto; padding: 26px 28px 28px; }

/* Booking card inside drawer */
.book-card { background: transparent; }
.book-card .price-row { display: flex; align-items: baseline; gap: 6px; }
.book-card .price { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.book-card .per { font-size: 14px; color: var(--ink-3); }
.book-card .row1 { display: flex; align-items: center; justify-content: space-between; }
.book-card .rating-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.book-card .rating-inline strong { color: var(--ink); font-weight: 700; }
.book-card .rating-inline svg { width: 13px; height: 13px; fill: var(--ochre-2); }
.book-card .stay-min { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.book-card .fields { margin-top: 22px; border: 1px solid var(--rule-strong); border-radius: 12px; overflow: hidden; }
.book-card .fields .grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.book-card .field { padding: 14px 16px; border-right: 1px solid var(--rule); transition: background var(--t-fast); }
.book-card .field:hover { background: var(--linen); cursor: pointer; }
.book-card .field:last-child, .book-card .field.full { border-right: 0; }
.book-card .field.full { border-top: 1px solid var(--rule); grid-column: 1 / -1; }
.book-card .field .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.book-card .field .v { font-size: 14.5px; color: var(--ink); margin-top: 3px; font-weight: 600; }
.book-card .cta {
  width: 100%; margin-top: 18px;
  background: var(--blue-2); color: var(--linen);
  border: 0; padding: 16px; font-size: 14px; font-weight: 700;
  border-radius: 12px; transition: background var(--t-fast);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.book-card .cta:hover { background: var(--blue-deep); }
.book-card .helper { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.book-card .breakdown { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-2); display: grid; gap: 10px; }
.book-card .bd-li { display: flex; justify-content: space-between; }
.book-card .bd-li.discount { color: var(--sage-deep); }
.book-card .bd-li.total { padding-top: 16px; border-top: 1px solid var(--rule); margin-top: 6px; font-weight: 700; color: var(--ink); font-size: 15px; }
.book-card .helper-2 { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.book-card .helper-2 a { color: var(--ink); }

/* ============================================================
   HOME GUIDE — specific overrides
   ============================================================ */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

.guide-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,249,242,0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.guide-nav .nav-inner { height: 72px; justify-content: space-between; }

.private-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue-2); padding: 6px 12px;
  border: 1px solid var(--blue-soft); border-radius: var(--radius-pill);
  background: var(--blue-wash); white-space: nowrap; flex-shrink: 0;
}
.private-tag .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--blue-2); }

.guide-hero { padding: 64px 0 72px; text-align: center; }
.guide-hero .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe); margin-bottom: 22px; }
.guide-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 7vw, 56px); font-weight: 400; line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 22px; }
.guide-hero .lead { font-family: var(--font-display); font-size: clamp(17px, 3.4vw, 21px); font-style: italic; color: var(--ink-2); line-height: 1.55; margin: 0 auto; max-width: 52ch; }

.guide-band { padding: 56px 0; }
.guide-band.linen { background: var(--linen); }
.guide-band.cream { background: var(--cream); }
.guide-band + .guide-band { border-top: 1px solid var(--rule); }
@media (min-width: 720px) { .guide-band { padding: 72px 0; } }

.sec-head { text-align: center; margin-bottom: 28px; }
.sec-head .eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe); margin-bottom: 14px; }
.sec-head h2 { font-family: var(--font-display); font-size: clamp(28px, 4.8vw, 36px); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); margin: 0; }

.guide-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 16px; padding: 28px; box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) { .guide-card { padding: 36px 40px; } }
.guide-card p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; }
.guide-card p strong { color: var(--ink); font-weight: 700; }
.guide-card p:last-child { margin-bottom: 0; }

.sub { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe); margin: 28px 0 10px; }
.sub:first-child { margin-top: 0; }

.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.facts li .k { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); }
.facts li .v { color: var(--ink); }
.facts li .v strong { font-weight: 600; color: var(--ink); }
@media (max-width: 520px) { .facts li { grid-template-columns: 1fr; gap: 4px; } }

.bul { list-style: none; margin: 0 0 8px; padding: 0; }
.bul li { position: relative; padding: 6px 0 6px 22px; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.bul li::before { content: ''; position: absolute; left: 4px; top: 17px; width: 5px; height: 5px; border-radius: 999px; background: var(--taupe); }
.bul li strong { color: var(--ink); font-weight: 600; }

.code { display: inline-block; font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; color: var(--ink); background: var(--cream); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 1px 8px; }

.cred { display: grid; grid-template-columns: 1fr 1fr; margin: 4px 0 18px; background: var(--linen); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.cred-cell { padding: 14px 18px; border-right: 1px solid var(--rule); }
.cred-cell:last-child { border-right: 0; }
.cred-cell .k { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe); margin-bottom: 6px; }
.cred-cell .v { font-family: var(--font-mono); font-size: 17px; font-weight: 500; color: var(--ink); word-break: break-word; }
@media (max-width: 520px) { .cred { grid-template-columns: 1fr; } .cred-cell { border-right: 0; border-bottom: 1px solid var(--rule); } .cred-cell:last-child { border-bottom: 0; } }

.note { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px 18px; background: var(--sage-mist); border: 1px solid var(--sage-soft); border-radius: 12px; margin: 18px 0; font-size: 14.5px; color: var(--ink); line-height: 1.55; }
.note .tag { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-deep); padding: 3px 8px; background: var(--paper); border: 1px solid var(--sage-soft); border-radius: 999px; white-space: nowrap; align-self: start; margin-top: 2px; }
.note strong { font-weight: 700; }
.note.warn { background: var(--ochre-wash); border-color: var(--ochre-soft); }
.note.warn .tag { color: var(--ochre-2); border-color: var(--ochre-soft); }

.schedule { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--linen); margin: 8px 0 18px; }
.schedule .col { padding: 16px 18px; border-right: 1px solid var(--rule); }
.schedule .col:last-child { border-right: 0; }
.schedule .col .swatch { width: 18px; height: 18px; border-radius: 4px; margin-bottom: 10px; border: 1px solid rgba(0,0,0,0.06); }
.schedule .col .nm { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.schedule .col .when { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 520px) { .schedule { grid-template-columns: 1fr; } .schedule .col { border-right: 0; border-bottom: 1px solid var(--rule); } .schedule .col:last-child { border-bottom: 0; } }

.quickref { margin: 28px auto 0; max-width: 760px; text-align: left; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
.qr-head { padding: 14px 22px; background: linear-gradient(180deg, var(--blue-wash) 0%, var(--paper) 100%); border-bottom: 1px solid var(--rule); font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-2); }
.qr-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.qr-cell { padding: 16px 22px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.qr-cell:nth-child(2n) { border-right: 0; }
.qr-cell .k { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe); margin-bottom: 6px; }
.qr-cell .v { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.3; word-break: break-word; }
.qr-cell .v small { display: block; font-family: var(--font-sans); font-size: 11.5px; font-weight: 400; color: var(--ink-3); margin-top: 4px; letter-spacing: 0; }
@media (min-width: 600px) { .qr-grid { grid-template-columns: repeat(4, 1fr); } .qr-cell { border-bottom: 0; } .qr-cell:nth-child(2n) { border-right: 1px solid var(--rule); } .qr-cell:nth-child(4n) { border-right: 0; } }
.qr-hosts { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream); border-top: 1px solid var(--rule); }
.qr-host { padding: 16px 22px; border-right: 1px solid var(--rule); }
.qr-host:last-child { border-right: 0; }
.qr-host .nm { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px; }
.qr-host .line { display: block; font-size: 13.5px; color: var(--ink); text-decoration: none; line-height: 1.5; padding: 2px 0; word-break: break-word; }
.qr-host .line.tel { font-family: var(--font-mono); font-size: 13px; }
.qr-host .line:hover { color: var(--blue-2); }
@media (max-width: 520px) { .qr-hosts { grid-template-columns: 1fr; } .qr-host { border-right: 0; border-bottom: 1px solid var(--rule); } .qr-host:last-child { border-bottom: 0; } }

.guide-signoff { padding: 72px 0; text-align: center; background: var(--linen); border-top: 1px solid var(--rule); }
.guide-signoff .stamp { font-family: var(--font-display); font-size: clamp(30px, 5vw, 40px); font-style: italic; color: var(--ink); line-height: 1.2; margin: 0 0 16px; }
.guide-signoff .sig { font-family: var(--font-display); font-size: 20px; font-style: italic; color: var(--ink-2); margin: 0; }
.guide-signoff .meta { margin-top: 28px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--taupe); }

.guide-footer { background: var(--blue-deep); color: var(--blue-soft); padding: 40px 0; text-align: center; }
.guide-footer .word { font-family: 'Tenor Sans', serif; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--linen); margin-bottom: 10px; }
.guide-footer p { font-size: 12px; color: var(--blue-soft); margin: 0; letter-spacing: 0.04em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .hero-mosaic { grid-template-columns: 1fr; height: auto; }
  .hero-mosaic .ph { aspect-ratio: 3/2; }
  .hero-mosaic .stack { display: none; }
  .promise { grid-template-columns: 1fr; gap: 20px; }
  .truths-split, .hosts-split, .split-2 { grid-template-columns: 1fr; gap: 36px; }
  .reviews-grid, .amen-grid, .bb-grid, .policies-grid, .h-tiles, .lg-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .lg-preview-track { grid-auto-columns: 78%; }
  .subscribe { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .nav-crumbs { display: none; }
  .reserve-bar { width: calc(100% - 24px); border-radius: 16px; padding: 12px; flex-wrap: wrap; justify-content: center; gap: 12px; }
}
@media (max-width: 640px) {
  section.band { padding: 64px 0; }
  .h-tiles, .reviews-grid, .bb-grid, .policies-grid, .lg-grid { grid-template-columns: 1fr; }
  .amen-grid { grid-template-columns: 1fr; }
  .title-block h1 { font-size: clamp(32px, 9vw, 48px); }
  .truths-img { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .nav-actions .lang { display: none; }
}

/* Print (home guide) */
@media print {
  body { background: #fff; }
  .guide-nav, .guide-footer { display: none; }
  .guide-band { padding: 24px 0; page-break-inside: avoid; border-top: 1px solid #ccc !important; background: #fff !important; }
  .guide-card { box-shadow: none; }
  .note, .cred, .schedule, .quickref { page-break-inside: avoid; }
  a { color: #000; }
}