/*!
Theme Name: Amary By Vivere
Theme URI: https://amarielnido.com/
Description: Custom theme for Amari by Vivere based on Elementor Hello Theme
Author: Jasper Allibang Espejo
Author URI: https://jasperespejo.com
Template: hello-elementor
Version: 1.0
*/

/* ============================================================
   ELEMENTOR OVERRIDES
   ============================================================ */

.elementor .e-heading-base,
.elementor .e-paragraph-base {
    margin: unset;
}

.elementor-heading-title {
    line-height: 1.6!important;
}

/* ============================================================
   AMARI V3 — Design System
   Brand/story-driven direction
   ============================================================ */

:root {
  /* Color — Amari brand palette (from 2025 brand deck p.47)
     Sage #7B8551 · Terracotta #AE593C · Cream #E1D0BC · Deep Brown #2F1B14 */
  --bone:      #F7F1E6; /* page background — light cream */
  --ivory:     #FFFCF6; /* warm white */
  --ink:       #2F1B14; /* Deep Brown — primary text */
  --graphite:  #6B5848; /* warm muted brown-gray */
  --mist:      #A89F8E; /* warm mid neutral */
  --hairline:  #D9CEB9; /* warm divider */
  --bay:       #7B8551; /* Sage — primary accent / button */
  --bay-700:   #5F6A3E; /* darker sage — hover */
  --limestone: #E1D0BC; /* Cream — alt section bg */
  --palm:      #6E7A48; /* deep sage — reserved accent */
  --sunset:    #AE593C; /* Terracotta — secondary accent */

  /* Typography — Fraunces (Romie stand-in) + Manrope */
  --txt-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --txt-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --maxw: 1280px;
  --maxw-text: 1040px;
  --maxw-narrow: 720px;
  --pad-x: clamp(20px, 5vw, 48px);
  --section-py: clamp(40px, 7vw, 80px);

  /* Radius */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* ---- Tokens added in Step 6 (formalizing existing patterns; no visual change) ---- */

  /* Spacing scale — 4px base; matches the values already used in components */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Typography scale — extracted from existing styles.css usage */
  --fs-xs:   11px;   /* overline, spec labels */
  --fs-sm:   12px;   /* btn--sm, fine print */
  --fs-body: 14px;   /* default body-adjacent */
  --fs-md:   15px;   /* long-read body */
  --fs-lg:   18px;   /* H3 body scale */
  --fs-xl:   20px;   /* benefit h3 */
  --fs-2xl:  24px;   /* fact__value */
  --fs-3xl:  28px;   /* room name display */
  --fs-4xl:  32px;   /* hero subtitles */
  /* H1 / H2 remain clamp()-based in the heading rules; not tokenized here. */

  --lh-tight: 1.1;
  --lh-snug:  1.4;
  --lh-body:  1.6;
  --lh-read:  1.65;

  /* Shadows — three tiers matching the three values already in use */
  --shadow-sm: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-up: 0 -4px 20px rgba(0, 0, 0, 0.15); /* used by sticky mobile book bar */

  /* Surfaces — semantic aliases over existing color tokens */
  --surface-page:   var(--bone);
  --surface-card:   var(--ivory);
  --surface-alt:    var(--limestone);
  --surface-dark:   var(--ink);
  --border-hairline: var(--hairline);

  /* Z-index scale */
  --z-base:   1;
  --z-nav:    100;
  --z-mobile-bar: 150;
  --z-modal:  1000;

  /* Breakpoints — documented, not usable in @media directly (CSS variables don't work
     in media queries across browsers). Mirror these values when writing new @media rules. */
  --bp-sm: 480px;
  --bp-md: 640px;
  --bp-lg: 900px;
  --bp-xl: 1024px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--txt-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--txt-display);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.4em!important;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

h1 {
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 400;
}

h2 {
  font-size: clamp(32px, 4.5vw, 56px);
}

h3 {
  font-size: clamp(22px, 2.5vw, 30px);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Field Guide pass: overline picks up a hairline-rule prefix (guide-book convention) */
.overline {
  font-family: var(--txt-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 18px!important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.overline::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.lede {
  font-family: var(--txt-display);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
  font-weight: 400;
}

.text-large { font-size: 18px; line-height: 1.6; }
.text-center { text-align: center; }
.text-muted { color: var(--graphite); }

/* ============================================================
   LAYOUT
   ============================================================ */

.wrapper {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) !important;
  display: block!important; /* override Elementor's default .wrapper { display: flex } */
}
.container--text { max-width: var(--maxw-text) !important; }
.container--narrow { max-width: var(--maxw-narrow) !important; }

.section {
  padding: var(--section-py) 0!important
}
.section--alt { background: var(--limestone); }
.section--dark { background: var(--ink); color: var(--ivory); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--ivory); }
.section--dark .overline { color: rgba(255,255,255,0.7); }

.section__header { margin-bottom: clamp(24px, 4vw, 48px)!important; }
.section__header--center { text-align: center; max-width: 820px!important; margin-left: auto; margin-right: auto; }

/* ============================================================
   BUTTONS
   ============================================================ */

/* Field Guide pass: pill shape + normal-case + sentence-case */
.btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  font-family: var(--txt-body);
  font-size: var(--fs-body)!important; /* override Elementor's tendency to set font-size on buttons inline */
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  min-height: 44px;
  text-transform: none;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  white-space: nowrap;
}

.btn--sm { padding: 10px 16px; font-size: var(--fs-sm)!important; min-height: 38px; }
.btn--lg { padding: 16px 26px; font-size: var(--fs-md)!important; min-height: 52px; }

/* Field Guide pass: Terracotta = Book / Check availability (single high-intent colour) */
.btn-primary, a.btn-primary {
  background: var(--sunset);
  color: var(--ivory);
  border-color: var(--sunset);
}
.btn-primary:hover {
  background: #94482E;
  border-color: #94482E;
}
/* .btn-sage — opt-in class if a non-booking primary is needed anywhere */
.btn-sage {
  background: var(--bay);
  color: var(--ivory);
  border-color: var(--bay);
}
.btn-sage:hover {
  background: var(--bay-700);
  border-color: var(--bay-700);
}

.btn-secondary, a.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--ivory);
}

.btn-white {
  background: var(--ivory);
  color: var(--ink)!important;
  border-color: var(--ivory);
}
.btn-white:hover {
  background: transparent;
  color: var(--ivory)!important;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding-bottom: 4px;
}
.btn-ghost:hover { color: var(--bay); border-color: var(--bay); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

#_resbookingbtnContainer {
  border-radius: 100px!important;
}

/* ============================================================
   UTILITY HEADER (Vivere Hospitality bar)
   ============================================================ */

.utility {
  background: var(--ink);
  color: var(--ivory);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  z-index: 100;
}

.utility__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--pad-x);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}

.utility__group {
  position: relative;
}

.utility__trigger {
  background: none;
  border: none;
  color: var(--ivory);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 6px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.utility__trigger::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms var(--ease);
}

.utility__group.is-open .utility__trigger::after {
  transform: rotate(-135deg) translateY(2px);
}

.utility__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--ivory);
  color: var(--ink);
  min-width: 280px;
  padding: 12px 0;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  border-radius: var(--r-md);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
}

.utility__group.is-open .utility__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.utility__item {
  display: block;
  padding: 12px 20px;
  font-size: 14px;
  color: var(--ink);
  border-left: 2px solid transparent;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.utility__item:hover { background: var(--bone); border-left-color: var(--bay); }

.utility__item--current {
  background: var(--bone);
  border-left-color: var(--bay);
  font-weight: 500;
  cursor: default;
}
.utility__item--current small { display: block; font-size: 11px; color: var(--graphite); font-weight: 400; margin-top: 2px; letter-spacing: 0.04em; }

.utility__item--disabled {
  color: var(--mist);
  cursor: not-allowed;
}
.utility__item--disabled small { display: block; font-size: 11px; margin-top: 2px; }

/* ============================================================
   PROPERTY NAV
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--bone);
  border-bottom: 1px solid var(--hairline);
  transition: top 250ms var(--ease), background 300ms var(--ease), border-color 300ms var(--ease);
  width:100%;
}

.nav--transparent {
  background: transparent;
  border-bottom-color: transparent;
  top: var(--util-h, 38px);
}

.nav--transparent .nav__link { color: var(--ivory); }
.nav--transparent .nav__logo--dark { display: none; }
.nav--transparent .nav__logo--light { display: block; }

.nav:not(.nav--transparent) .nav__logo--dark { display: block; }
.nav:not(.nav--transparent) .nav__logo--light { display: none; }

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav__logo img {
  height: 64px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: color 150ms var(--ease);
  position: relative;
}

.nav__link:hover { color: var(--bay); }
.nav__link--active::after,
.nav__link.current::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
}

.nav__cta { margin-left: 8px; }

.nav__hamburger {
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.nav__hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ivory);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end!important; /* overrides Elementor's default centering */
  background: var(--ink);
  color: var(--ivory);
  overflow: hidden;
  margin: 0!important;
  padding: 0!important;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0!important;
}

.hero__media .placeholder-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bay) 0%, var(--ink) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-family: var(--txt-display);
  font-size: 24px;
  font-style: italic;
  padding: 0!important;
}

.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
  pointer-events: none;
}

/* HOME HERO — locked 2026-04-27 (Christina chose Option B: left-side gradient + reduced font).
   Scoped via .hero--home so inner pages keep their existing treatment until reviewed separately. */
.hero--home .hero__media::after {
  background: linear-gradient(
    115deg,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.68) 40%,
    rgba(0,0,0,0.42) 65%,
    rgba(0,0,0,0.10) 88%,
    rgba(0,0,0,0)    100%
  );
}
.hero--home .hero__title {
  max-width: 720px;
  font-size: clamp(28px, 3.6vw, 50px)!important;  /* was clamp(44px, 7vw, 96px) — too large */
  line-height: 1.1;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.hero--home .hero__sub {
  font-size: 16px;
  line-height: 1.6;
  max-width: 480px;
  color: rgba(255,255,255,0.95);
  margin-bottom: 32px;
}

/* Photo fill rule — any <img> inside a placeholder container covers it edge-to-edge */
/* Photo fill rule — containers */
.placeholder-img img,
.hero__media .placeholder-img img,
.room-tile__img img,
.room-card__img img,
.feature__image img,
.room-gallery__item img,
.room-detail-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.placeholder-img,
.room-tile__img,
.room-card__img,
.room-gallery__item,
.room-detail-card__img {
  position: relative;
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) 56px!important;
}

.hero__content .overline {
  color: rgba(255,255,255,0.8);
  margin: 0 0 18px!important;
}

.hero__title {
  max-width: 900px;
  color: var(--ivory);
  font-size: clamp(44px, 7vw, 96px);
  margin-bottom: 24px!important;
}
.hero__sub {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  margin-bottom: 32px!important;
}

/* ============================================================
   POSITIONING BAND
   ============================================================ */

.positioning {
  padding: clamp(48px, 8vw, 88px) 0 !important;
  text-align: center;
}

.positioning p {
  font-family: var(--txt-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.4;
  color: var(--ink);
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* ============================================================
   QUICK FACTS STRIP
   ============================================================ */
/* Field Guide pass: FactsBar-style strip with vertical dividers + tabular numerals */
.quick-facts {
  /* padding: var(--space-6) 0; */
  padding: clamp(48px, 8vw, 88px) 0 !important;
  background: var(--limestone);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.quick-facts__heading {
  font-family: var(--txt-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 var(--space-4);
  padding: 0 var(--pad-x);
}
.quick-facts__footnote {
  font-family: var(--txt-body);
  font-size: 13px;
  color: var(--graphite);
  text-align: center;
  margin: var(--space-4) auto 0;
  padding: 0 var(--pad-x);
  max-width: var(--maxw);
}
.quick-facts__grid {
  list-style: none;
  margin: 0;
  padding: 0 var(--pad-x);
  display: grid!important;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  max-width: var(--maxw);
  margin-inline: auto;
}
.quick-facts__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-5);
  border-left: 1px solid var(--hairline);
}
.quick-facts__tile:first-child { border-left: none; padding-left: 0; }
.quick-facts__tile:last-child { padding-right: 0; }
.quick-facts__label {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 600;
  margin: 0;
}
.quick-facts__value {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 48;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}
@media (max-width: 900px) {
  .quick-facts__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); }
  .quick-facts__tile { padding: 0 var(--space-4); }
  .quick-facts__tile:nth-child(odd) { border-left: none; padding-left: 0; }
  .quick-facts__tile:nth-child(n+3) { border-top: 1px solid var(--hairline); padding-top: var(--space-4); }
}
@media (max-width: 520px) {
  .quick-facts__grid { grid-template-columns: 1fr; }
  .quick-facts__tile { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--hairline); padding-top: var(--space-3) !important; }
  .quick-facts__tile:first-child { border-top: none; padding-top: 0 !important; }
}

/* ============================================================
   REVIEW BADGES (scale-ordered editorial grid)
   ============================================================ */

.review-badges {
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
  max-width:860px!important;
  margin:0 auto;
  align-items:stretch;
}

.review-badge {
  text-align:center;
  padding:28px 20px;
  background:var(--ivory);
  border-radius:14px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--ink);
  box-shadow:0 1px 2px rgba(47,27,20,0.04);
  transition:transform .2s ease, box-shadow .2s ease;
}

/* ============================================================
   FEATURE SPLIT (A. Cliff Kitchen, Guide anchor)
   ============================================================ */

.feature {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.feature--reverse .feature__image { order: 2; }

.feature__image {
  aspect-ratio: 4/5;
  background: var(--limestone);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}

.feature__content { padding: 12px 0; }
.feature__content h2 { margin-bottom: 20px!important; }
.feature__content p { max-width: 480px; margin-bottom: 28px!important; }

.feature__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.feature__bullets li {
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}
.feature__bullets li:last-child { border-bottom: 1px solid var(--hairline); }

/* ============================================================
   WALKING DISTANCE / CHIPS
   ============================================================ */

.walking { text-align: center; }

.walking h2 { margin-bottom: 40px; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 48px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-size: 14px;
  color: var(--ink);
}

.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bay);
}

.map {
  aspect-ratio: 21/9;
  background: var(--limestone);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite);
  font-family: var(--txt-display);
  font-style: italic;
  font-size: 18px;
}

.map iframe {
  aspect-ratio: 21/9;
}

/* ============================================================
   ROOM MOSAIC (scale-ordered editorial grid)
   ============================================================ */

.room-mosaic span.e-paragraph-base {
  display: grid!important;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.room-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--limestone);
  aspect-ratio: 4/3;
  transition: transform 300ms var(--ease);
  display: block;
}
.room-tile:hover { transform: translateY(-2px); }
.room-tile:hover .room-tile__overlay { background: rgba(0,0,0,0.5); }

/* scale-ordered: smallest (19sqm) to largest (57sqm) */
.room-tile--superior   { grid-column: span 4; aspect-ratio: 4/3; }
.room-tile--queen      { grid-column: span 4; aspect-ratio: 4/3; }
.room-tile--king       { grid-column: span 4; aspect-ratio: 4/3; }
.room-tile--family     { grid-column: span 6; aspect-ratio: 3/2; }
.room-tile--suite-1    { grid-column: span 6; aspect-ratio: 3/2; }
.room-tile--suite-2    { grid-column: span 12; aspect-ratio: 21/9; }

/* First 3 tiles */
.room-mosaic .room-tile:nth-child(-n+3) { grid-column: span 4 !important; aspect-ratio: 4/3 !important; }

/* Tiles 4 and 5 */
.room-mosaic .room-tile:nth-child(4),
.room-mosaic .room-tile:nth-child(5) { grid-column: span 6 !important; aspect-ratio: 3/2 !important; }

/* Last tile (6th) */
.room-mosaic .room-tile:last-child { grid-column: span 12 !important; aspect-ratio: 21/9 !important; }

.room-tile__img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(47,93,92,0.15), rgba(27,42,46,0.4));
  color: rgba(255,255,255,0.6);
  font-family: var(--txt-display);
  font-style: italic;
  font-size: 18px;
}

.room-tile__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  transition: background 300ms var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 28px;
  color: var(--ivory);
}

.room-tile__overline {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}

.room-tile__name,
.room-tile__name h3 {
  font-family: var(--txt-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  margin: 0 0 2px !important;
  color: var(--ivory);
}

.room-tile__meta {
  font-size: 13px;
  opacity: 0.9;
}

/* ============================================================
   ARRIVAL BAND
   ============================================================ */

.arrival {
  text-align: center;
  padding: clamp(40px, 6vw, 64px) 0!important;
  background: var(--limestone);
}
.arrival p {
  font-family: var(--txt-display);
  font-style: italic!important;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--ink);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.45;
}

/* ============================================================
   FINAL CTA
   ============================================================ */

.final-cta {
  text-align: center;
  padding: clamp(48px, 8vw, 88px) 0!important;
  background: var(--ink);
  color: var(--ivory);
}
.final-cta h2 { color: var(--ivory); margin-bottom: 24px!important; }
.final-cta .overline { color: rgba(255,255,255,0.7); }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--bay-700);
  color: var(--ivory);
  padding: 20px 0 16px;
}

.footer__grid {
  display: grid!important;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 0!important;
}

.footer__socials { margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.footer__socials span { color: rgba(255,255,255,0.4); }

.footer__col h2,
.footer__col h4 {
  color: var(--ivory);
  font-family: var(--txt-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__col li { margin-bottom: 4px; font-size: 13px; line-height: 1.4; }
.footer__col a { color: rgba(255,255,255,0.75); transition: color 150ms var(--ease); }
.footer__col a:hover { color: var(--ivory); }

.footer__brands {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 16px;
}

.footer__brands-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 16px;
}

.footer__brands-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  font-size: 14px;
}
.footer__brands-list a { color: rgba(255,255,255,0.85); }
.footer__brands-list a:hover { color: var(--ivory); }

.footer__contact {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
}
.footer__contact a { color: rgba(255,255,255,0.9); }

.footer__bottom {
  margin-top: 0 !important;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
}
.footer__bottom p { margin: 0; }
.footer__bottom a { color: rgba(255,255,255,0.75); }
.footer__bottom a:hover { color: var(--ivory); }

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumb {
  padding: 18px 0;
  font-size: 13px;
  color: var(--graphite);
  border-bottom: 1px solid var(--hairline);
  display: none; /* hidden by default, shown on inner pages via .breadcrumb--show */
}
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--mist); }
.breadcrumb a { color: var(--graphite); }
.breadcrumb a:hover { color: var(--ink); }

/* ============================================================
   SKIP LINK + A11Y
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--ivory);
  z-index: 9999;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--bay);
  outline-offset: 2px;
}

/* ============================================================
   MOBILE MENU
   ============================================================ */

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bone);
  z-index: 200;
  padding: 100px 32px 40px;
  display: none;
  flex-direction: column;
  gap: 8px;
}
.mobile-menu.is-open { display: flex!important; }
.mobile-menu__link {
  font-family: var(--txt-display);
  font-size: 28px;
  padding: 12px 0;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.mobile-menu__cta { margin-top: auto; padding-top: 24px; }
.mobile-menu .elementor-shortcode {
  flex-direction: column!important;
  gap: 8px;
}

/* ============================================================
   STICKY MOBILE BOOK BAR
   ============================================================ */

.mobile-book-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: var(--bay);
  z-index: 150;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.mobile-book-bar .btn { width: 100%; background: var(--ivory); color: var(--bay); border-color: var(--ivory); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }

  .feature { grid-template-columns: 1fr !important; }
  .feature--reverse .feature__image { order: 0; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  .room-tile--superior,
  .room-tile--queen,
  .room-tile--king { grid-column: span 6; }
  .room-tile--family,
  .room-tile--suite-1,
  .room-tile--suite-2 { grid-column: span 12; }
}

@media (max-width: 640px) {
  .utility__inner { justify-content: space-between; gap: 12px; }
  .utility { font-size: 11px; }

  .hero__content { padding-bottom: 32px; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 8px; }

  .mobile-book-bar { display: block; }
  body { padding-bottom: 72px; }

  .room-mosaic { gap: 12px; }  

  .room-mosaic span.e-paragraph-base {
    display: block!important;
  }
}

/* ============================================================
   ROOM FEATURED CARDS (3-up on homepage)
   ============================================================ */

.room-featured {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
  padding: 0 !important;
}

.room-card {
  background: var(--ivory);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
  color: var(--ink);
}

.room-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.room-card__img {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, rgba(47,93,92,0.12), rgba(27,42,46,0.25))!important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  font-family: var(--txt-display);
  font-style: italic;
  font-size: 18px;
}

.room-card__body {
  padding: 28px 28px 32px!important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.room-card__body .overline { margin-bottom: 8px!important; }
.room-card__name,
.room-card__name .elementor-heading-title {
  font-family: var(--txt-display);
  font-size: 28px;
  line-height: 1.1 !important;
  margin: 0 0 6px;
}
.room-card__meta { 
  font-size: 14px; 
  color: var(--graphite); 
  margin-bottom: 18px!important; 
  line-height: 1.6;
}
.room-card .btn-ghost { align-self: flex-start; }

@media (max-width: 900px) {
  .room-featured { grid-template-columns: 1fr!important; }
}

/* ============================================================
   ROOM LISTING / AMENITY GRID
   ============================================================ */

.amenity-grid span.e-paragraph-base {
  display: grid!important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  /*
  background: var(--hairline);
  border-radius: var(--r-md);
  */
  overflow: hidden;
}

.amenity-item {
  background: var(--bone);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.amenity-item__icon {
  width: 28px;
  height: 28px;
  color: var(--bay);
  display: flex;
  align-items: center;
  justify-content: center;
}
.amenity-item__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.amenity-item__label {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 900px) {
  .amenity-grid span.e-paragraph-base { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ROOM DETAIL PAGE COMPONENTS
   ============================================================ */

/* Gallery */
.room-gallery {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  aspect-ratio: 16/9;
  max-height: 620px;
  margin-bottom: 0;
}
.room-gallery__item {
  background: var(--limestone);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite);
  font-family: var(--txt-display);
  font-style: italic;
  font-size: 14px;
}
.room-gallery__item:first-child {
  grid-row: span 2;
  background: linear-gradient(135deg, rgba(47,93,92,0.15), rgba(27,42,46,0.4));
  color: rgba(255,255,255,0.7);
  font-size: 18px;
}

@media (max-width: 900px) {
  .room-gallery { grid-template-columns: 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .room-gallery__item:not(.room-gallery__item:first-child) { display: none; }
  .room-gallery__item:first-child { aspect-ratio: 4/3; grid-row: auto; }
}

/* Micro-facts bar */
.facts-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 32px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 48px 0;
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fact__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}
.fact__value {
  font-family: var(--txt-display);
  font-size: 24px;
  color: var(--ink);
}

@media (max-width: 640px) {
  .facts-bar { gap: 24px 32px; }
  .fact__value { font-size: 20px; }
}
/* Semantic upgrade (Step 4): facts-bar is now a <dl>. Reset browser defaults for <dt>/<dd> so visual presentation stays identical to the prior <div>/<span> markup. */
.facts-bar, .facts-bar dt, .facts-bar dd { margin: 0; padding: 0; }

/* Room detail two-column */
.room-detail {
  display: grid!important;
  grid-template-columns: 1.6fr 1fr;
  gap: 64px;
  align-items: start;
}
.room-detail__body h2 { margin-top: 0; }
.room-detail__body p { margin-bottom: 18px; }

.room-detail__aside {
  background: var(--limestone);
  border-radius: var(--r-md);
  padding: 32px !important;
  position: sticky;
  top: 96px;
}
.room-detail__aside h3 {
  font-family: var(--txt-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 18px !important;
}
.room-detail__aside ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.room-detail__aside li {
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.room-detail__aside li:last-child { border-bottom: 1px solid rgba(0,0,0,0.08); }
.room-detail__aside .btn { width: 100%; }

@media (max-width: 900px) {
  .room-detail { grid-template-columns: 1fr; gap: 32px; }
  .room-detail__aside { position: static; }
}

/* Upsell card */
.upsell {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--r-md);
  overflow: hidden;
}
.upsell__image {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, rgba(47,93,92,0.4), rgba(27,42,46,0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-family: var(--txt-display);
  font-style: italic;
}
.upsell__image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.upsell__body { padding: 40px !important; }
.upsell__body .overline { color: rgba(255,255,255,0.7); }
.upsell__body h3 { color: var(--ivory) !important; font-size: 32px !important; margin: 0 0 14px !important; }
.upsell__body p { color: rgba(255,255,255,0.85); margin: 0 0 20px !important; }
.upsell__body .btn-white { display: inline-flex; }

@media (max-width: 900px) {
  .upsell { grid-template-columns: 1fr !important; }
  .upsell__body { padding: 28px !important; }
}

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item {
  border-top: 1px solid var(--hairline);
  padding: 24px 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.faq__q {
  font-family: var(--txt-display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.faq__q::after {
  content: '+';
  font-family: var(--txt-body);
  font-size: 24px;
  font-weight: 300;
  color: var(--graphite);
  transition: transform 200ms var(--ease);
}
.faq__item[open] .faq__q::after { content: '–'; }
.faq__a {
  font-size: 15px;
  line-height: 1.65;
  color: var(--graphite);
  margin: 8px 0 0;
  padding-right: 44px;
}

/* ============================================================
   COMPONENTS LAYER — relocated from rooms.html inline <style>
   (Step 2 refactor; no visual change)
   Components: FilterGroup, RoomDetailCard, ComparisonTable,
               BenefitsRow, LocationChips
   ============================================================ */

/* FilterGroup / FilterPill */
.room-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 12px; }
.room-filters__btn {
  padding: 10px 22px;
  font-family: var(--txt-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  background: var(--ivory);
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.room-filters__btn:hover { border-color: var(--bay); color: var(--bay); }
.room-filters__btn.is-active { background: var(--bay); color: var(--ivory); border-color: var(--bay); }

/* RoomDetailCard (rooms hub) */
.room-cards span.e-paragraph-base {   display: grid!important; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.room-detail-card {
  background: var(--ivory);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.room-detail-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.room-detail-card[data-hidden] { display: none; }

.room-detail-card__img {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(47,93,92,0.12), rgba(27,42,46,0.25));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-family: var(--txt-display);
  font-style: italic;
  font-size: 18px;
  position: relative;
}

.room-detail-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--bay);
  color: var(--ivory);
  font-family: var(--txt-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  font-style: normal;
}

.room-detail-card__body { padding: 28px; }

.room-detail-card__name {
  font-family: var(--txt-display);
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 10px;
}

.room-detail-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: var(--graphite);
  margin-bottom: 16px;
}
.room-detail-card__specs span { display: inline-flex; align-items: center; gap: 6px; }
.room-detail-card__specs svg { width: 16px; height: 16px; stroke: var(--bay); fill: none; stroke-width: 1.5; flex-shrink: 0; }

.room-detail-card__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--graphite);
  margin-bottom: 16px;
}

.room-detail-card__bestfor {
  font-size: 14px;
  line-height: 1.6;
  color: var(--graphite);
  border-left: 2px solid var(--bay);
  padding-left: 14px;
  margin-bottom: 20px;
}
.room-detail-card__bestfor strong { color: var(--ink); font-weight: 600; }

.room-detail-card__ctas { display: flex; gap: 10px; }
.room-detail-card__ctas .btn { flex: 1; min-width: 0; font-size: 12px!important; padding: 12px 16px !important; min-height: 0; }

@media (max-width: 900px) {
  .room-cards span.e-paragraph-base { grid-template-columns: 1fr;  }
}

/* ComparisonTable */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.compare-table thead { background: var(--bay); color: var(--ivory); }
.compare-table th {
  padding: 14px 18px;
  text-align: left;
  font-family: var(--txt-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.compare-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
.compare-table tbody tr:hover { background: rgba(47,93,92,0.04); }
.compare-table .col-room { font-weight: 500; }
.compare-table .col-bestfor { font-size: 13px; color: var(--graphite); }

@media (max-width: 640px) {
  .compare-table { font-size: 13px; }
  .compare-table th, .compare-table td { padding: 10px 12px; }
  .compare-table .col-bestfor { display: none; }
}

/* BenefitsRow */
.benefits-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.benefit-item {
  background: var(--ivory);
  padding: 28px 24px !important;
}
.benefit-item h3 {
  font-family: var(--txt-display);
  font-size: 20px;
  margin: 0 0 8px !important;
}
.benefit-item p {
  font-size: 14px;
  color: var(--graphite);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) { .benefits-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .benefits-row { grid-template-columns: 1fr; } }

/* LocationChips */
.location-chips { display: flex !important; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.location-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-size: 13px;
  color: var(--ink);
  background: var(--ivory);
}
.location-chip::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bay);
  flex-shrink: 0;
}
/* .location-chip__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bay); flex-shrink: 0; } replace with .location-chip::before */


/* ============================================================
   FIELD GUIDE — DIRECTION PREVIEW (scoped .fg-*)
   Phase 1 additive-only. Nothing here is referenced by live
   pages. Preview lives inside `#field-guide` in playground.html.
   Uses existing tokens only — no new values, no new families.
   ============================================================ */

/* Preview frame ------------------------------------------------ */
.fg-preview {
  --fg-rule: var(--hairline);
  --fg-ink-soft: rgba(47, 27, 20, 0.68);
  font-family: var(--txt-body);
  color: var(--ink);
}
.fg-preview .fg-section {
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--fg-rule);
}
.fg-preview .fg-section:last-child { border-bottom: none; }
.fg-preview .fg-section__head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.fg-preview .fg-section__title {
  font-family: var(--txt-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.fg-preview .fg-section__meta {
  font-family: var(--txt-body);
  font-size: var(--fs-xs);
  color: var(--graphite);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fg-preview .fg-caption {
  font-family: var(--txt-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--graphite);
  max-width: var(--maxw-narrow);
  margin: 0 0 var(--space-6);
}

/* Split: current | field guide --------------------------------- */
.fg-split {
  display: grid!important;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) { .fg-split { grid-template-columns: 1fr; } }
.fg-split__cell {
  background: var(--ivory);
  border: 1px solid var(--fg-rule);
  border-radius: var(--r-sm);
  padding: var(--space-6);
}
.fg-split__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 var(--space-5);
  font-weight: 600;
}
.fg-split__label::before {
  content: "";
  width: 18px; height: 1px; background: var(--ink);
}
.fg-split__cell--current { background: var(--bone); }
.fg-split__cell--fg { background: var(--ivory); }

/* Overline — Field Guide treatment ----------------------------- */
.fg-overline {
  font-family: var(--txt-body);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--graphite);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
.fg-overline::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* Typographic specimen ----------------------------------------- */
.fg-type-specimen {   display: grid!important; gap: var(--space-5); margin-top: var(--space-3); }
.fg-type-row { display: grid!important; grid-template-columns: 110px 1fr; gap: var(--space-5); align-items: baseline; }
.fg-type-row__meta {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  padding-top: 6px;
  border-top: 1px solid var(--fg-rule);
}
.fg-type-row__sample { margin: 0; }

.fg-h1 {
  font-family: var(--txt-display);
  font-weight: 400;
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-variation-settings: "opsz" 120;
  margin: 0;
  text-wrap: pretty;
}
.fg-h2 {
  font-family: var(--txt-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 72;
  margin: 0;
  text-wrap: pretty;
}
.fg-h3 {
  font-family: var(--txt-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.3;
  letter-spacing: -0.002em;
  color: var(--ink);
  margin: 0;
}
.fg-body {
  font-family: var(--txt-body);
  font-size: var(--fs-md);
  line-height: var(--lh-read);
  color: var(--ink);
  margin: 0;
  max-width: 56ch;
}
.fg-body--muted { color: var(--graphite); }
.fg-lede {
  font-family: var(--txt-body);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 52ch;
}
.fg-italic-accent {
  font-family: var(--txt-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink);
  font-variation-settings: "opsz" 14;
  margin: 0;
  max-width: 52ch;
}
.fg-smallcaps {
  font-family: var(--txt-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-feature-settings: "smcp" on, "c2sc" on;
  color: var(--graphite);
  margin: 0;
}
.fg-tabular {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" on, "lnum" on;
  font-size: var(--fs-2xl);
  color: var(--ink);
  letter-spacing: 0;
  margin: 0;
}

/* Color re-weighting swatches --------------------------------- */
.fg-palette {   display: grid!important; gap: var(--space-6); }
.fg-palette-row {
  display: grid!important;
  grid-template-columns: 140px 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--fg-rule);
}
.fg-palette-row:first-child { border-top: none; padding-top: 0; }
.fg-palette-role {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 600;
  padding-top: 4px;
}
.fg-palette-cells { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fg-swatch {
  width: 96px;
  min-height: 72px;
  border-radius: var(--r-sm);
  border: 1px solid var(--fg-rule);
  padding: var(--space-3);
  display: flex; flex-direction: column; justify-content: flex-end;
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.fg-swatch__name { font-weight: 600; }
.fg-swatch__hex { color: var(--graphite); margin-top: 2px; }
.fg-swatch--dark { color: var(--ivory); border-color: transparent; }
.fg-swatch--dark .fg-swatch__hex { color: rgba(255,252,246,0.72); }
.fg-palette-rule {
  font-family: var(--txt-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--graphite);
  margin: var(--space-3) 0 0;
  max-width: 52ch;
}
.fg-palette-rule strong { color: var(--ink); font-weight: 600; }

/* Buttons — Field Guide ---------------------------------------- */
.fg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--txt-body);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 13px 22px;
  min-height: 44px;
  border-radius: 100px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.fg-btn:focus-visible {
  outline: 2px solid var(--bay);
  outline-offset: 3px;
  border-radius: 100px;
}
.fg-btn--book {
  background: var(--sunset);
  color: var(--ivory);
}
.fg-btn--book:hover { background: #94482E; }
.fg-btn--primary {
  background: var(--bay);
  color: var(--ivory);
}
.fg-btn--primary:hover { background: var(--bay-700); }
.fg-btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.fg-btn--secondary:hover { background: var(--ink); color: var(--ivory); }
.fg-btn--ghost {
  background: transparent;
  color: var(--ink);
  padding-left: 0; padding-right: 0;
  min-height: auto;
  border-radius: 0;
  border-bottom: 1px solid var(--ink);
  min-width: auto;
}
.fg-btn--ghost:hover { color: var(--bay-700); border-bottom-color: var(--bay-700); }
.fg-btn--white {
  background: var(--ivory);
  color: var(--ink);
}
.fg-btn--white:hover { background: var(--limestone); }
.fg-btn--sm { font-size: var(--fs-sm); padding: 10px 16px; min-height: 38px; }
.fg-btn--lg { font-size: var(--fs-md); padding: 16px 26px; min-height: 52px; }
.fg-btn[disabled],
.fg-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button matrix grid ------------------------------------------ */
.fg-btn-matrix {   display: grid!important; gap: var(--space-6); }
.fg-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--ivory);
  border: 1px solid var(--fg-rule);
  border-radius: var(--r-sm);
}
.fg-btn-row--dark { background: var(--ink); border-color: transparent; }
.fg-btn-row__tag {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 600;
  margin-right: var(--space-3);
  min-width: 84px;
}
.fg-btn-row--dark .fg-btn-row__tag { color: rgba(255,252,246,0.6); }

/* Motion rules card ------------------------------------------- */
.fg-motion-card {
  background: var(--ivory);
  border: 1px solid var(--fg-rule);
  border-radius: var(--r-sm);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 640px) { .fg-motion-card { grid-template-columns: 1fr; } }
.fg-motion-card h4 {
  font-family: var(--txt-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
  color: var(--graphite);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--fg-rule);
}
.fg-motion-card ul {
  margin: 0; padding-left: 0; list-style: none;
  display: grid; gap: var(--space-2);
}
.fg-motion-card li {
  font-family: var(--txt-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink);
  padding-left: var(--space-5);
  position: relative;
}
.fg-motion-card li::before {
  position: absolute; left: 0; top: 0.25em;
  font-family: var(--txt-body); font-size: 13px; font-weight: 700;
}
.fg-motion-card .fg-allow li::before { content: "+"; color: var(--bay-700); }
.fg-motion-card .fg-deny li::before { content: "×"; color: var(--sunset); }

/* Hierarchy demo (H1/H2/H3 stacked vs current) ---------------- */
.fg-hierarchy-stack { display: grid; gap: var(--space-4); }

/* Signoff questions block ------------------------------------- */
.fg-signoff {
  background: var(--limestone);
  padding: var(--space-6);
  border-radius: var(--r-sm);
  margin-top: var(--space-6);
}
.fg-signoff h4 {
  font-family: var(--txt-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
.fg-signoff ol {
  margin: 0; padding-left: var(--space-5);
  display: grid; gap: var(--space-2);
}
.fg-signoff li {
  font-family: var(--txt-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* Pass marker (top-of-section) --------------------------------- */
.fg-passmark {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sunset);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.fg-intro {
  font-family: var(--txt-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  max-width: 42ch;
  letter-spacing: -0.01em;
}
.fg-intro-body {
  font-family: var(--txt-body);
  font-size: var(--fs-md);
  line-height: var(--lh-read);
  color: var(--graphite);
  max-width: 58ch;
  margin: 0;
}

/* Scoped anchor highlight (so jumping to #field-guide reads) --- */
#field-guide {
  scroll-margin-top: 160px;
}
#field-guide .fg-preview {
  background: var(--bone);
  padding: var(--space-10) var(--pad-x);
  border-top: 3px solid var(--sunset);
  border-bottom: 3px solid var(--sunset);
  margin-top: var(--space-8);
}


/* ============================================================
   FIELD GUIDE — PASS 2 · COMPONENTS (scoped .fg-*)
   Playground-only, additive-only. Nothing here ships.
   ============================================================ */

/* 2.1 — Placeholder imagery system --------------------------- */
.fg-img {
  position: relative;
  display: block;
  width: 100%;
  background-color: var(--limestone);
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(47, 27, 20, 0.06) 0,
      rgba(47, 27, 20, 0.06) 1px,
      transparent 1px,
      transparent 10px
    );
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.fg-img--hero    { aspect-ratio: 16 / 9; }
.fg-img--wide    { aspect-ratio: 21 / 9; }
.fg-img--card    { aspect-ratio: 4 / 3; }
.fg-img--room    { aspect-ratio: 3 / 2; }
.fg-img--portrait{ aspect-ratio: 3 / 4; }
.fg-img--square  { aspect-ratio: 1 / 1; }

.fg-img__caption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(247, 241, 230, 0.82);
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  max-width: calc(100% - 24px);
}
.fg-img__caption::before {
  content: '▍ ';
  color: var(--sunset);
  font-weight: 700;
}
.fg-img__crosshair {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fg-img__crosshair::before,
.fg-img__crosshair::after {
  content: '';
  position: absolute;
  background: rgba(47, 27, 20, 0.14);
}
.fg-img__crosshair::before {
  left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-0.5px);
}
.fg-img__crosshair::after {
  top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-0.5px);
}

.fg-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

/* 2.2 — SectionHeader ---------------------------------------- */
.fg-sheader {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: var(--space-4) var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
.fg-sheader__eyebrow { align-self: start; }
.fg-sheader__body    { max-width: 62ch; }
.fg-sheader__title {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.fg-sheader__dek {
  font-family: var(--txt-body);
  font-size: var(--fs-md);
  line-height: var(--lh-read);
  color: var(--graphite);
  margin: 0;
  max-width: 58ch;
}
.fg-sheader--center {
  grid-template-columns: 1fr;
  justify-items: start;
  text-align: left;
}
@media (max-width: 720px) {
  .fg-sheader {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* 2.3 — Card (generic) --------------------------------------- */
.fg-card {
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.fg-card:hover {
  border-color: var(--ink);
  background: var(--bone);
}
.fg-card__media { display: block; }
.fg-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.fg-card__eyebrow {
  font-family: var(--txt-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fg-card__eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px; height: 1px;
  background: var(--graphite);
}
.fg-card__title {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 72;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.fg-card__excerpt {
  font-family: var(--txt-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--graphite);
  margin: 0;
}
.fg-card__foot {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.fg-card__meta {
  font-family: var(--txt-body);
  font-size: 12px;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* 2.3b — RoomDetailCard -------------------------------------- */
.fg-room {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--ivory);
  border: 1px solid var(--hairline);
}
.fg-room__media {
  position: relative;
  border-right: 1px solid var(--hairline);
}
.fg-room__body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fg-room__eyebrow {
  font-family: var(--txt-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fg-room__eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px; height: 1px; background: var(--graphite);
}
.fg-room__name {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.fg-room__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 0;
  list-style: none;
}
.fg-room__facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fg-room__fact-label {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.fg-room__fact-value {
  font-family: var(--txt-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fg-room__desc {
  font-family: var(--txt-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--graphite);
  margin: 0;
  max-width: 48ch;
}
.fg-room__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fg-room__amenities li {
  font-family: var(--txt-body);
  font-size: 12px;
  color: var(--ink);
  padding: 4px 10px;
  background: var(--bone);
  border: 1px solid var(--hairline);
  border-radius: 100px;
}
.fg-room__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}
.fg-room__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fg-room__price-label {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.fg-room__price-value {
  font-family: var(--txt-display);
  font-size: 24px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .fg-room { grid-template-columns: 1fr; }
  .fg-room__media { border-right: none; border-bottom: 1px solid var(--hairline); }
  .fg-room__body { padding: var(--space-6); }
}

/* 2.4 — FactsBar (HIGH-RISK §3.2) ---------------------------- */
.fg-factsbar {
  background: var(--limestone);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-6) var(--space-5);
}
.fg-factsbar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.fg-factsbar__item {
  padding: var(--space-2) var(--space-5);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.fg-factsbar__item:first-child { border-left: none; padding-left: 0; }
.fg-factsbar__item:last-child { padding-right: 0; }
.fg-factsbar__label {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
}
.fg-factsbar__value {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 48;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.fg-factsbar__note {
  font-family: var(--txt-body);
  font-size: 11px;
  color: var(--graphite);
  margin: 0;
}
@media (max-width: 820px) {
  .fg-factsbar__inner { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); }
  .fg-factsbar__item { padding: 0 var(--space-4); }
  .fg-factsbar__item:nth-child(odd) { border-left: none; padding-left: 0; }
  .fg-factsbar__item:nth-child(3) { border-top: 1px solid var(--hairline); padding-top: var(--space-4); }
  .fg-factsbar__item:nth-child(4) { border-top: 1px solid var(--hairline); padding-top: var(--space-4); }
}

/* FactsBar — compact variant (inline, not a bar) */
.fg-factsbar--compact {
  background: transparent;
  border: none;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-5) 0;
}
.fg-factsbar--compact .fg-factsbar__value { font-size: 18px; }

/* FactsBar — stacked variant (vertical, for room detail sidebars) */
.fg-factsbar--stack .fg-factsbar__inner {
  grid-template-columns: 1fr;
}
.fg-factsbar--stack .fg-factsbar__item {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-left: none;
  border-top: 1px solid var(--hairline);
}
.fg-factsbar--stack .fg-factsbar__item:first-child { border-top: none; }
.fg-factsbar--stack .fg-factsbar__value { font-size: 18px; }

/* Grid helpers used by Pass 2 preview ------------------------ */
.fg-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.fg-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 820px) {
  .fg-grid-3 { grid-template-columns: 1fr; }
  .fg-grid-2 { grid-template-columns: 1fr; }
}

/* Small helpers ---------------------------------------------- */
.fg-subsection-title {
  font-family: var(--txt-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 var(--space-3);
}
.fg-risk-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sunset);
  border: 1px solid var(--sunset);
  border-radius: 100px;
  background: rgba(174, 89, 60, 0.06);
}
.fg-risk-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--sunset);
  border-radius: 50%;
}


/* ============================================================
   FIELD GUIDE — PASS 3 · PAGE BEHAVIORS (scoped .fg-*)
   Playground-only, additive-only. Nothing here ships.
   ============================================================ */

/* 3.1 — Compact Hero ----------------------------------------- */
.fg-hero {
  position: relative;
  background: var(--bone);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.fg-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  min-height: 520px;
}
.fg-hero__text {
  padding: var(--space-10) var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  border-right: 1px solid var(--hairline);
}
.fg-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--txt-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.fg-hero__meta::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.fg-hero__title {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.fg-hero__title em {
  font-style: italic;
  font-weight: 400;
}
.fg-hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.fg-hero__lede {
  font-family: var(--txt-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--graphite);
  max-width: 40ch;
  margin: 0;
}
.fg-hero__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.fg-hero__media {
  position: relative;
}
.fg-hero__media .fg-img {
  border: none;
  height: 100%;
  min-height: 520px;
}
@media (max-width: 820px) {
  .fg-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .fg-hero__text { border-right: none; border-bottom: 1px solid var(--hairline); padding: var(--space-8) var(--space-5); }
  .fg-hero__media .fg-img { min-height: 320px; }
}

/* 3.2 — FinalCTA --------------------------------------------- */
.fg-finalcta {
  background: var(--ink);
  color: var(--ivory);
  padding: var(--space-12) var(--space-8);
  position: relative;
  overflow: hidden;
}
.fg-finalcta__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: end;
  position: relative;
  z-index: 1;
}
.fg-finalcta__eyebrow {
  font-family: var(--txt-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 252, 246, 0.6);
  margin: 0 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fg-finalcta__eyebrow::before {
  content: '';
  width: 16px; height: 1px;
  background: rgba(255, 252, 246, 0.4);
}
.fg-finalcta__title {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ivory);
  margin: 0 0 var(--space-4);
  max-width: 20ch;
  text-wrap: balance;
}
.fg-finalcta__dek {
  font-family: var(--txt-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 252, 246, 0.7);
  max-width: 42ch;
  margin: 0;
}
.fg-finalcta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}
.fg-finalcta__contact {
  font-family: var(--txt-body);
  font-size: 12px;
  color: rgba(255, 252, 246, 0.55);
  margin: 0;
  text-align: right;
}
.fg-finalcta__contact a {
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 252, 246, 0.3);
}
@media (max-width: 720px) {
  .fg-finalcta__inner { grid-template-columns: 1fr; }
  .fg-finalcta__action { align-items: flex-start; }
  .fg-finalcta__contact { text-align: left; }
}

/* 3.3 — MobileBookBar ---------------------------------------- */
.fg-mobilebar-frame {
  max-width: 390px;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  overflow: hidden;
  background: var(--ivory);
  position: relative;
}
.fg-mobilebar-frame__screen {
  padding: var(--space-5);
  min-height: 520px;
  background: var(--bone);
}
.fg-mobilebar-frame__room {
  font-family: var(--txt-display);
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
.fg-mobilebar-frame__meta {
  font-family: var(--txt-body);
  font-size: 12px;
  color: var(--graphite);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.fg-mobilebar-frame__body {
  font-family: var(--txt-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--graphite);
}
.fg-mobilebar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--ivory);
  border-top: 1px solid var(--hairline);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  box-shadow: 0 -1px 0 rgba(47, 27, 20, 0.02);
}
.fg-mobilebar__price {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.fg-mobilebar__price-label {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.fg-mobilebar__price-value {
  font-family: var(--txt-display);
  font-size: 20px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fg-mobilebar__price-note {
  font-family: var(--txt-body);
  font-size: 11px;
  color: var(--graphite);
  margin-top: 2px;
}
.fg-mobilebar .fg-btn { white-space: nowrap; }

/* 3.4 — FAQ -------------------------------------------------- */
.fg-faq {
  border-top: 1px solid var(--hairline);
}
.fg-faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 0;
}
.fg-faq summary {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--txt-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.fg-faq summary::-webkit-details-marker { display: none; }
.fg-faq summary:hover { color: var(--bay); }
.fg-faq summary::after {
  content: '+';
  font-family: var(--txt-body);
  font-weight: 300;
  font-size: 24px;
  color: var(--graphite);
  line-height: 1;
  transition: transform var(--dur-base) var(--ease), color var(--dur-fast) var(--ease);
  justify-self: center;
}
.fg-faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--ink);
}
.fg-faq__answer {
  padding: 0 0 var(--space-5);
  font-family: var(--txt-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--graphite);
  max-width: 64ch;
}
.fg-faq__answer p { margin: 0 0 var(--space-3); }
.fg-faq__answer p:last-child { margin: 0; }

/* 3.5 — Motion demo ------------------------------------------ */
.fg-motion-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 720px) {
  .fg-motion-demo { grid-template-columns: 1fr; }
}
.fg-motion-card2 {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 220px;
}
.fg-motion-card2__label {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
}
.fg-motion-card2__name {
  font-family: var(--txt-display);
  font-size: 20px;
  color: var(--ink);
  margin: 0;
}
.fg-motion-card2__desc {
  font-family: var(--txt-body);
  font-size: 13px;
  color: var(--graphite);
  line-height: 1.55;
  margin: 0;
}
.fg-motion-card2__stage {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Hover-fade demo */
.fg-demo-btn {
  align-self: flex-start;
  padding: 10px 18px;
  background: var(--bay);
  color: var(--ivory);
  font-family: var(--txt-body);
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease);
}
.fg-demo-btn:hover { background: var(--bay-700); }

/* Card-hover demo */
.fg-demo-card {
  padding: var(--space-4);
  background: var(--ivory);
  border: 1px solid var(--hairline);
  font-family: var(--txt-body);
  font-size: 13px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.fg-demo-card:hover {
  border-color: var(--ink);
  background: var(--bone);
}

/* Fade-in demo (toggleable) */
.fg-demo-fade {
  aspect-ratio: 4 / 3;
  background-color: var(--limestone);
  background-image: repeating-linear-gradient(135deg, rgba(47,27,20,0.06) 0, rgba(47,27,20,0.06) 1px, transparent 1px, transparent 10px);
  border: 1px solid var(--hairline);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.fg-demo-fade.is-in { opacity: 1; }
.fg-demo-replay {
  align-self: flex-start;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--hairline);
  font-family: var(--txt-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  border-radius: 100px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.fg-demo-replay:hover { border-color: var(--ink); color: var(--ink); }

/* Focus-ring demo */
.fg-demo-focus {
  align-self: flex-start;
  padding: 10px 18px;
  background: transparent;
  color: var(--ink);
  font-family: var(--txt-body);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--ink);
  border-radius: 100px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.fg-demo-focus:focus {
  outline: 2px solid var(--bay);
  outline-offset: 3px;
}
.fg-demo-focus:hover { background: var(--bone); }

/* Details demo reuse of FAQ chevron */
.fg-demo-details {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-3) 0;
  font-family: var(--txt-body);
  font-size: 13px;
}
.fg-demo-details summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fg-demo-details summary::-webkit-details-marker { display: none; }
.fg-demo-details summary::after {
  content: '+';
  color: var(--graphite);
  transition: transform var(--dur-base) var(--ease);
}
.fg-demo-details[open] summary::after { transform: rotate(45deg); }
.fg-demo-details__body {
  margin-top: 10px;
  color: var(--graphite);
  font-size: 12px;
  line-height: 1.55;
}

/* Directional rollup ----------------------------------------- */
.fg-rollup {
  background: var(--ink);
  color: var(--ivory);
  padding: var(--space-10) var(--space-8);
  margin-top: var(--space-8);
}
.fg-rollup h4 {
  font-family: var(--txt-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 252, 246, 0.5);
  margin: 0 0 var(--space-4);
}
.fg-rollup h3 {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  color: var(--ivory);
  margin: 0 0 var(--space-6);
  max-width: 22ch;
  letter-spacing: -0.015em;
}
.fg-rollup__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  border-top: 1px solid rgba(255, 252, 246, 0.12);
  padding-top: var(--space-6);
}
@media (max-width: 820px) {
  .fg-rollup__grid { grid-template-columns: 1fr; }
}
.fg-rollup__col h5 {
  font-family: var(--txt-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sunset);
  margin: 0 0 var(--space-3);
}
.fg-rollup__col ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 252, 246, 0.78);
  font-family: var(--txt-body);
  font-size: 13px;
  line-height: 1.7;
}
.fg-rollup__col li { margin-bottom: var(--space-2); }
.fg-rollup__col li::marker { color: rgba(255, 252, 246, 0.3); }


/* ============================================================
   FIELD GUIDE — SCOPED OVERRIDES (.fg-scope on <body> of room pages)
   Applies Field Guide visual direction to Rooms listing + 6 per-room
   pages without changing markup, schema, or copy. Reversible by
   removing the `fg-scope` class from <body>.
   ============================================================ */

/* Type + hierarchy refinements scoped to room pages ---------- */
.fg-scope {
  --fg-rule: var(--hairline);
}

.fg-scope h1 {
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-weight: 400;
}
.fg-scope h2 {
  font-variation-settings: 'opsz' 72;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.fg-scope h3 {
  font-family: var(--txt-body);
  font-weight: 600;
  letter-spacing: -0.002em;
}

/* FactsBar (dl.facts-bar) — limestone bar, tabular numerals --- */
.fg-scope .facts-bar {
  background: var(--limestone);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-6) var(--space-5) !important;
  margin: var(--space-6) 0 var(--space-8) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 !important;
  border-radius: 0;
}
.fg-scope .fact {
  padding: var(--space-2) var(--space-5) !important;
  border-left: 1px solid var(--hairline);
  display: flex !important;
  flex-direction: column;
  gap: var(--space-1);
  background: transparent;
}
.fg-scope .fact:first-child { border-left: none; padding-left: 0 !important; }
.fg-scope .fact:last-child { padding-right: 0 !important; }
.fg-scope .fact__label {
  font-family: var(--txt-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 600;
  margin: 0 !important;
}
.fg-scope .fact__value {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 48;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0 !important;
}
@media (max-width: 820px) {
  .fg-scope .facts-bar { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); }
  .fg-scope .fact { padding: 0 var(--space-4); }
  .fg-scope .fact:nth-child(odd) { border-left: none; padding-left: 0; }
  .fg-scope .fact:nth-child(n+3) { border-top: 1px solid var(--hairline); padding-top: var(--space-4); }
}

/* Room-detail two-column — hairline card, tighter spacing ---- */
.fg-scope .room-detail {
  gap: var(--space-8);
  margin-top: var(--space-6);
}
.fg-scope .room-detail__aside {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: none;
  padding: var(--space-6);
}
.fg-scope .room-detail__aside h3 {
  font-family: var(--txt-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}
.fg-scope .room-detail__aside li {
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-body);
}
.fg-scope .room-detail__aside li:last-child { border-bottom: 1px solid var(--hairline); }

/* Hero (compact + bordered) on per-room pages --------------- */
.fg-scope .hero {
  background: var(--bone);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.fg-scope .hero__title {
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.fg-scope .hero__title em,
.fg-scope h1 em {
  font-style: italic;
  font-weight: 400;
}

/* Room mosaic / detail cards on rooms.html ------------------ */
.fg-scope .room-detail-card {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.fg-scope .room-detail-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ink);
  background: var(--bone);
}
.fg-scope .room-detail-card__name {
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 72;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.fg-scope .room-detail-card__specs {
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-3) 0;
  gap: var(--space-5);
}
.fg-scope .room-detail-card__specs svg { stroke: var(--graphite); }
.fg-scope .room-detail-card__desc { font-size: var(--fs-md); line-height: var(--lh-read); color: var(--graphite); }
.fg-scope .room-detail-card__bestfor {
  background: var(--bone);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
  color: var(--ink);
  display: inline-block;
  width: auto;
  align-self: start;
}

/* Mosaic tiles — remove lift, use border-hover instead ------ */
.fg-scope .room-tile { border: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease); position: relative; display:block !important; }
.fg-scope .room-tile:hover { transform: none; border-color: var(--ink); }

/* Page intro / lede copy gets softer colour ----------------- */
.fg-scope .lede { color: var(--graphite); max-width: 56ch; }

/* Comparison table — tabular numerals + tighter type -------- */
.fg-scope .compare-table {
  font-variant-numeric: tabular-nums lining-nums;
}
.fg-scope .compare-table th,
.fg-scope .compare-table td {
  border-color: var(--hairline);
}



/* ============================================================
   FIELD GUIDE — AMENITY GRID (Everything you need)
   Scoped to .fg-scope. Numbered rows, hairline dividers,
   inline section header (overline beside H2).
   ============================================================ */

/* Inline section header: overline sits next to H2 on both breakpoints */
.fg-scope .amenity-section .section__header {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: var(--space-4) var(--space-8);
  text-align: left;
  max-width: none;
  margin: 0 0 var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.fg-scope .amenity-section .section__header .overline {
  margin: 0;
  align-self: center;
}
.fg-scope .amenity-section .section__header h2 {
  margin: 0;
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Grid: 4 cols desktop, 2 mobile. Icons hidden. Numbered prefix. */
.fg-scope .amenity-grid {
  counter-reset: fg-amenity;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-8);
  row-gap: 0;
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--hairline);
  overflow: visible;
  margin-top: var(--space-4);
}
.fg-scope .amenity-item {
  counter-increment: fg-amenity;
  background: transparent;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: baseline;
  gap: var(--space-3);
}
.fg-scope .amenity-item::before {
  content: counter(fg-amenity, decimal-leading-zero);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sunset);
  font-weight: 500;
  padding-top: 2px;
}
.fg-scope .amenity-item__icon { display: none; }
.fg-scope .amenity-item__label {
  font-family: var(--txt-body);
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: 1.4;
}

/* Footer caption after the grid */
.fg-scope .amenity-section .amenity-footer {
  margin: var(--space-5) 0 0;
  font-family: var(--txt-body);
  font-size: var(--fs-sm);
  color: var(--graphite);
}

@media (max-width: 820px) {
  .fg-scope .amenity-grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-5); }
  .fg-scope .amenity-section .section__header { grid-template-columns: minmax(110px, 150px) 1fr; gap: var(--space-3) var(--space-4); }
  .fg-scope .amenity-section .section__header h2 { font-size: clamp(24px, 6vw, 32px); }
}
@media (max-width: 480px) {
  .fg-scope .amenity-grid { grid-template-columns: 1fr; }
}



/* ============================================================
   FIELD GUIDE — INLINE SECTION HEADERS (site-consistent on room pages)
   Applies the overline-left / title-right layout across ALL
   .section__header inside .fg-scope, matching amenity section.
   ============================================================ */

.fg-scope .section__header:not(.amenity-section .section__header) {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: var(--space-4) var(--space-8);
  text-align: left !important;
  max-width: none;
  margin: 0 auto var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.fg-scope .section__header .overline {
  margin: 0;
  align-self: center;
}
.fg-scope .section__header h2 {
  margin: 0;
  font-family: var(--txt-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.fg-scope .section__header .text-large {
  grid-column: 2;
  margin-top: var(--space-3);
  font-size: var(--fs-md);
  color: var(--graphite);
  max-width: 58ch;
}

/* room-detail body: overline + H2 at the start of the column also inline-style */
.fg-scope .room-detail__body {
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}

@media (max-width: 820px) {
  .fg-scope .section__header:not(.amenity-section .section__header) {
    grid-template-columns: minmax(110px, 150px) 1fr;
    gap: var(--space-3) var(--space-4);
  }
  .fg-scope .section__header h2 { font-size: clamp(24px, 6vw, 32px); }
  .fg-scope .section__header .text-large { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .fg-scope .section__header:not(.amenity-section .section__header) {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* ============================================================
   BOOK-DIRECT BANNER
   ============================================================ */
.book-direct-banner {
  background: var(--ink, #2F1B14);
  color: #F7F0E6;
  font-family: var(--txt-body);
  font-size: 14px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 5;
}
/* Push transparent nav below banner (nav top was calibrated for utility bar only) */
.book-direct-banner ~ .nav--transparent { top: calc(var(--util-h, 42px) + 46px); }
@media (max-width: 640px) {
  .book-direct-banner ~ .nav--transparent { top: 128px; }
}
.book-direct-banner__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}
.book-direct-banner__full { display: inline; }
.book-direct-banner__short { display: none; }
.book-direct-banner__link {
  color: #F7F0E6;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  white-space: nowrap;
}
.book-direct-banner__link:hover { opacity: 0.85; }
@media (max-width: 640px) {
  .book-direct-banner__full { display: none; }
  .book-direct-banner__short { display: inline; }
  .book-direct-banner__inner { font-size: 13px; padding: 9px var(--pad-x); gap: 10px; }
}

/* 6-column walk-time strip: wrap to 3 cols at medium, 2 at mobile */
@media (max-width: 1100px) {
  .quick-facts__grid { grid-template-columns: repeat(3, 1fr) !important; row-gap: var(--space-4); }
  .quick-facts__tile:nth-child(3n+1) { border-left: none; padding-left: 0; }
}
@media (max-width: 640px) {
  .quick-facts__grid { grid-template-columns: repeat(1, 1fr) !important; }
  .quick-facts__tile { border-left: 1px solid var(--hairline); padding-left: var(--space-4); padding-right: var(--space-4); }
  .quick-facts__tile:nth-child(odd) { border-left: none; padding-left: 0; }
  .quick-facts__tile:nth-child(3n+1):not(:nth-child(odd)) { border-left: 1px solid var(--hairline); padding-left: var(--space-4); }
}

/* Merged Location block inside quick-facts (desktop + mobile) */
.quick-facts__extras {
  max-width: var(--maxw);
  margin: var(--space-5) auto 0;
  padding: 0 var(--pad-x);
}
.quick-facts__extras .map { margin-bottom: var(--space-4); }
.quick-facts__cta { text-align: center; }

/* ============================================================
   MOBILE-FIRST CONVERSION TWEAKS — 2026-04-23
   (CSS-gated to mobile; HTML restructure applies to both)
   ============================================================ */
@media (max-width: 640px) {
  /* #2 Hide VIVERE HOSPITALITY utility bar on mobile */
  .utility { display: none; }

  /* Readjust transparent nav top offset — utility bar gone, banner shrunk */
  .book-direct-banner ~ .nav--transparent { top: 36px; }

  /* #3 Shrink announcement bar to ~36px */
  .book-direct-banner__inner {
    padding: 7px var(--pad-x);
    font-size: 12px;
    gap: 8px;
    line-height: 1.25;
  }

  /* #5 Reduce nav height (logo + hamburger only, ~60px) */
  .nav__inner { padding: 10px var(--pad-x); gap: 12px; }
  .nav__logo img { height: 40px; }
  .nav__hamburger { width: 36px; height: 36px; padding: 8px; }

  /* #10 Hide secondary brand paragraph on mobile */
  .positioning { display: none; }

  /* #12 Shrink review badges — 2-up grid, tighter padding, smaller type */
  .review-badge { 
    padding: 12px 10px !important; 
    border-radius: 10px !important; 
  }
  .review-badge .overline {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 2px !important;
  }
  .review-badge p:last-child { font-size: 1rem !important; }
  /* Force review badge grid to 2 columns on mobile (inline grid style override) */
  .review-badge:first-child { grid-column: auto; }
  section > .container > div:has(> .review-badge) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* #13 Hide Guide teaser on mobile (accessible via nav link) */
  #guide-preview { display: none; }

  /* #16 Reduce H1 font size ~15% on mobile; tighten spacing */
  .hero__title {
    font-size: 37px;
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .hero__sub { font-size: 15px; margin-bottom: 16px; }
  .hero__content { padding-bottom: 56px; }

  /* #17 Tighten vertical padding between sections on mobile */
  .section { padding: 32px 0; }
  .quick-facts { padding: 20px 0; }
  .quick-facts__extras { margin-top: 16px; }
  .arrival { padding: 32px 0; }
  .final-cta { padding: 40px 0 !important; }
  .section__header { margin-bottom: 20px; }

  /* #18 Increase room-card "View Room" tap target to 44px min */
  .room-card .btn-ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 0;
  }

  /* #20 Show only 2 featured rooms on mobile (hide the 3rd) */
  .room-featured .room-card:nth-child(3) { display: none; }
}



/* ============================================================
   OPTION C-FINAL — Conversion-first header (2026-04-27)
   - Slim Vivere bar (non-sticky, scrolls away)
   - Single sticky cream-on-scroll main nav
   - Two-line BOOK button with perk inline
   - Mobile sticky bottom BOOK bar
   ============================================================ */

/* Slim the Vivere utility bar */
.utility .utility__inner { padding: 7px var(--pad-x); }
.utility { font-size: 11px; letter-spacing: 0.14em; }

/* Hide legacy book-direct-banner (perk now lives inside BOOK button) */
.book-direct-banner { display: none !important; }

/* Hide legacy mobile-book-bar — replaced by .mobile-cta */
.mobile-book-bar { display: none !important; }

/* Re-anchor transparent nav directly below the slim utility bar */
.nav--transparent { top: 34px !important; }
@media (max-width: 640px) {
  .nav--transparent { top: 0 !important; }
}

/* Sticky cream-on-scroll variant */
.nav.is-solid {
  position: fixed !important;
  top: 0;
  background: var(--ivory) !important;
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: 0 1px 16px rgba(47,27,20,0.06);
}
.nav.is-solid .nav__link { color: var(--ink) !important; }
.nav.is-solid .nav__logo--dark { display: block !important; }
.nav.is-solid .nav__logo--light { display: none !important; }

/* Dark hamburger on solid nav */
.nav.is-solid .nav__hamburger span {
  background: var(--ink) !important; 
}

/* Two-line BOOK button with perk inline */
.nav__cta.cta-stack {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sunset);
  color: var(--ivory) !important;
  border: 0;
  padding: 9px 22px;
  text-align: center;
  line-height: 1.15;
  min-width: 220px;
  text-decoration: none;
  transition: background 200ms ease;
  border-radius: 0;
  font-family: var(--txt-body);
}
.nav__cta.cta-stack:hover { background: #963F25; color: var(--ivory) !important; }
.nav__cta__primary { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.nav__cta__perk { font-size: 10.5px; letter-spacing: 0.04em; opacity: 0.92; margin-top: 3px; font-weight: 500; }
.nav.is-solid .nav__cta.cta-stack { color: var(--ivory) !important; }

/* Mobile sticky bottom BOOK bar */
.mobile-cta { display: none !important; }
@media (max-width: 900px) {
  .mobile-cta {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
    background: var(--sunset); color: var(--ivory);
    padding: 12px 16px; gap: 12px;
    box-shadow: 0 -2px 16px rgba(47,27,20,0.18);
  }
  .mobile-cta__copy { display: flex !important; flex-direction: column !important; line-height: 1.2; }
  .mobile-cta__primary { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .mobile-cta__perk { font-size: 11px; opacity: 0.92; margin-top: 2px; }
  .mobile-cta__btn {
    background: var(--ivory); color: var(--ink); border: 0;
    padding: 10px 16px; font: inherit; font-weight: 700;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; white-space: nowrap;
  }
  body { padding-bottom: 76px; }
  /* On mobile, the desktop BOOK button in nav can hide — bottom bar covers it */
  .nav__cta.cta-stack { display: none !important; }
}

/* ── Content Table ── */
.content-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 520px;
  margin: 24px 0;
}

.content-table thead tr {
  border-bottom: 2px solid var(--limestone);
}

.content-table th {
  text-align: left;
  padding: 12px 16px;
}

.content-table tbody tr {
  border-bottom: 1px solid var(--limestone);
}

.content-table tbody tr:last-child {
  border-bottom: none;
}

.content-table td {
  padding: 12px 16px;
}

.content-table .col-label {
  font-weight: 600;
}

/* ============================================================
   ADDITIONAL CSS FOR VARIOUS PAGES (not part of Field Guide scope, 
   but shared across multiple pages, so included here for convenience)
   ============================================================ */

/* ── Location page ── */
.loc-faq{max-width:720px;margin:0 auto;}
.loc-faq__item{border-bottom:1px solid rgba(0,0,0,0.08);padding:18px 4px;}
.loc-faq__item summary{cursor:pointer;font-family:var(--ff-display);font-size:1.15rem;font-weight:500;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;}
.loc-faq__item summary::after{content:'+';font-size:1.4rem;font-weight:300;color:rgba(0,0,0,0.4);margin-left:16px;}
.loc-faq__item[open] summary::after{content:'−';}
.loc-faq__item p{margin:14px 0 4px;color:rgba(0,0,0,0.75);font-size:15px;line-height:1.6;}
.dist-table{width:100%;border-collapse:collapse;margin:16px 0;}
.dist-table th,.dist-table td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(0,0,0,0.08);font-size:15px;}
.dist-table th{font-family:var(--ff-body);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(0,0,0,0.55);font-weight:500;}
.dist-table tbody tr:hover{background:rgba(0,0,0,0.02);}
.dist-table td:first-child{font-family:var(--ff-display);font-size:17px;}
.dist-table td:nth-child(2){font-weight:500;white-space:nowrap;}
.route-card{background:var(--ivory);border-radius:12px;padding:28px;border:1px solid rgba(0,0,0,0.06);}
.route-card h3{font-family:var(--ff-display);font-size:1.3rem!important;margin:0 0 8px;}
.route-card p {margin:8px 0;color:rgba(0,0,0,0.72);}
.coord-box{display:inline-flex;gap:12px;align-items:center;padding:12px 18px;background:var(--ivory);border-radius:999px;border:1px solid rgba(0,0,0,0.08);font-family:var(--ff-body);font-size:14px;}

/* ── Contact page ── */
.contact_details_wrapper {
  margin: 24px 0!important;
  padding:0!important;
}
.contact_details_wrapper h3 {
  font-family: var(--txt-body)!important;
  font-size: 17px!important;
  font-weight:600!important;
  line-height: 1.6!important;
  color: var(--ink)!important;
  margin-top:12px!important;
  margin-bottom:0!important;
}
.contact_details_wrapper p {
  margin-bottom:0!important;
}
.contact_details_wrapper a {
  color:var(--bay)!important;
}