/* ============================================================
   Legoland Comfort Retreat — shared stylesheet (all pages)
   ============================================================ */

:root {
  --canvas: #FBF7EF;
  --ink: #16384A;
  --ink-hover: #0F2A38;
  --footer: #11303F;
  --body: #2A2620;
  --muted: #6B6155;
  --subtle: #8A7E6C;
  --subtle-2: #9A8E7C;
  --gold-text: #8A6413;
  --border: #EFE7D8;
  --border-2: #EAE1D3;
  --border-3: #F2EADC;
  --sunshine: #F4B63E;
  --sunshine-hover: #f0a92a;
  --sky: #3FA7D6;
  --coral: #EE6C5A;
  --leaf: #4CB07F;
  --band-gold: #FBEFD8;
  --tint-gold: #FBE6BE;
  --tint-sky: #D7ECF6;
  --tint-coral: #FAD9D3;
  --tint-leaf: #D7EEE2;
  --maxw: 1200px;

  /* ---- Lodgify Portable Search Bar theme (navy/gold, not yellow) ---- */
  --ldg-psb-background: #ffffff;
  --ldg-psb-border-radius: 16px;
  --ldg-psb-box-shadow: 0px 24px 60px rgba(22,56,74,0.18);
  --ldg-psb-padding: 14px;
  --ldg-psb-input-background: #ffffff;
  --ldg-psb-button-border-radius: 999px;
  --ldg-psb-color-primary: #16384A;
  --ldg-psb-color-primary-lighter: #27516A;
  --ldg-psb-color-primary-darker: #0F2A38;
  --ldg-psb-color-primary-contrast: #ffffff;
  --ldg-semantic-color-primary: #16384A;
  --ldg-semantic-color-primary-lighter: #27516A;
  --ldg-semantic-color-primary-darker: #0F2A38;
  --ldg-semantic-color-primary-contrast: #ffffff;
  --ldg-component-modal-z-index: 999;

  /* ---- Lodgify Book Now Box theme ---- */
  --ldg-bnb-background: #ffffff;
  --ldg-bnb-border-radius: 16px;
  --ldg-bnb-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
  --ldg-bnb-padding: 14px;
  --ldg-bnb-input-background: #FBF7EF;
  --ldg-bnb-button-border-radius: 999px;
  --ldg-bnb-color-primary: #16384A;
  --ldg-bnb-color-primary-lighter: #27516A;
  --ldg-bnb-color-primary-darker: #0F2A38;
  --ldg-bnb-color-primary-contrast: #ffffff;
  --ldg-bnb-font-family: 'Hanken Grotesk', sans-serif;
  --ldg-component-calendar-cell-selection-bg-color: #16384A;
  --ldg-component-calendar-cell-selection-color: #ffffff;
  --ldg-component-calendar-cell-selected-bg-color: #E3EBF0;
  --ldg-component-calendar-cell-selected-color: #16384A;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: var(--canvas);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}
.page { min-height: 100vh; overflow-x: clip; }
::selection { background: var(--sunshine); color: var(--ink); }
h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding-top: 56px; padding-bottom: 56px; }
.eyebrow { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.icon { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

@keyframes lcrFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* photos / placeholders */
.media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ph { background: repeating-linear-gradient(45deg, #ece2cf, #ece2cf 16px, #e4d8c0 16px, #e4d8c0 32px); }
.ph-2 { background: repeating-linear-gradient(45deg, #eee5d3, #eee5d3 14px, #e6dac3 14px, #e6dac3 28px); }
.ph-map { background: repeating-linear-gradient(45deg, #e7eadf, #e7eadf 16px, #dfe4d4 16px, #dfe4d4 32px); }
.ph-tag { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; color: #8a7c63; background: rgba(255,255,255,0.74); padding: 7px 13px; border-radius: 999px; }

/* buttons */
.btn-pill { text-decoration: none; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 999px; box-shadow: 0 6px 16px rgba(22,56,74,0.22); transition: background 0.15s ease; white-space: nowrap; }
.btn-pill:hover { background: var(--ink-hover); }
.btn-gold { text-decoration: none; background: var(--sunshine); color: var(--ink); font-weight: 700; border-radius: 999px; text-align: center; transition: background 0.15s ease; }
.btn-gold:hover { background: var(--sunshine-hover); }
.btn-cta { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 999px; transition: background 0.15s ease; }
.btn-cta:hover { background: var(--ink-hover); }
.btn-outline { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; border: 1.5px solid var(--ink); padding: 10px 18px; border-radius: 999px; transition: background 0.15s, color 0.15s; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-outline-light { text-decoration: none; border: 1.5px solid rgba(255,255,255,0.4); color: #fff; font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; transition: background 0.15s; }
.btn-outline-light:hover { background: rgba(255,255,255,0.1); }

/* ============================ TOP STRIP ============================ */
.topstrip { background: var(--ink); color: #E7DFD0; font-size: 13px; letter-spacing: 0.02em; }
.topstrip .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.topstrip .left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topstrip .right { display: flex; align-items: center; gap: 18px; }
.topstrip .star { color: var(--sunshine); }
.topstrip .sep { opacity: 0.55; }
.topstrip a { color: #E7DFD0; text-decoration: none; opacity: 0.85; }
.topstrip a:hover { opacity: 1; }

/* ============================ HEADER / NAV ============================ */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(251,247,239,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-2); }
header.site .row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand .name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.brand .tag { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; }
.brand .stack { display: flex; flex-direction: column; line-height: 1.05; }
nav.main { display: flex; align-items: center; gap: 22px; }
nav.main a.link { position: relative; text-decoration: none; color: #4A4339; font-weight: 500; font-size: 15px; padding-bottom: 3px; }
nav.main a.link:hover { color: var(--ink); }
nav.main a.link.active { color: var(--ink); font-weight: 700; }
nav.main a.link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--sunshine); }
.navtoggle { display: none; background: none; border: 1.5px solid var(--ink); border-radius: 10px; padding: 8px; cursor: pointer; }
.navtoggle svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 2; fill: none; }

/* ============================ PAGE HEAD ============================ */
.page-head { padding-top: 56px; padding-bottom: 28px; }
.page-head h1 { font-weight: 800; font-size: 48px; line-height: 1.04; letter-spacing: -0.02em; margin: 10px 0 12px; color: var(--ink); text-wrap: balance; }
.page-head p { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0; max-width: 620px; }

/* ============================ HERO (home) ============================ */
.hero { position: relative; padding-top: 28px; }
.hero-media { position: relative; border-radius: 28px; overflow: hidden; min-height: 560px; display: flex; align-items: flex-end; }
.hero-media .grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,56,74,0.30) 0%, rgba(22,56,74,0.16) 32%, rgba(22,56,74,0.58) 60%, rgba(22,56,74,0.86) 100%); z-index: 1; }
.hero-copy { position: relative; z-index: 1; padding: 40px 44px 150px; max-width: 680px; }
.hero-copy h1, .hero-copy .sub { text-shadow: 0 2px 18px rgba(11,26,34,0.55); }
.hero-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--sunshine); color: var(--ink); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; padding: 7px 14px; border-radius: 999px; }
.hero h1 { font-weight: 800; color: #fff; font-size: 54px; line-height: 1.02; letter-spacing: -0.02em; margin: 18px 0 0; text-wrap: balance; text-shadow: 0 2px 18px rgba(22,56,74,0.4); }
.hero p.sub { color: #F7F1E6; font-size: 18px; line-height: 1.5; margin: 16px 0 0; max-width: 540px; text-shadow: 0 2px 16px rgba(11,26,34,0.72); }
.booking-search { position: relative; margin: -68px auto 0; max-width: 940px; z-index: 5; }
.booking-search #lodgify-search-bar { width: 100%; }
.booking-search #lodgify-search-bar > * { width: 100% !important; max-width: none !important; }

/* ============================ QUICK FACTS ============================ */
.facts-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.fact { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.fact .tile { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.fact .tile .icon { width: 17px; height: 17px; }
.fact .val { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); }
.fact .lbl { font-size: 12.5px; color: var(--muted); line-height: 1.25; }

/* ============================ SECTION HEAD + PERKS ============================ */
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.head-row h2 { font-weight: 800; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; margin: 10px 0 0; color: var(--ink); text-wrap: balance; }
.head-row .lead { max-width: 380px; color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0; }
.head-center { text-align: center; margin-bottom: 36px; }
.head-center h2 { font-weight: 800; font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; margin: 10px 0 0; color: var(--ink); }
.perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.perk { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s ease; }
.perk:hover { border-color: var(--ink); }
.perk .tile { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.perk .tile .icon { width: 22px; height: 22px; }
.perk .ttl { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 17px; color: var(--body); }
.perk .desc { font-size: 14px; color: #7A7064; line-height: 1.45; }

/* ============================ PROPERTY OVERVIEW ============================ */
.band-white { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.property-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.property-grid h2 { font-weight: 800; font-size: 38px; line-height: 1.06; letter-spacing: -0.02em; margin: 10px 0 18px; color: var(--ink); }
.property-grid p { color: var(--muted); font-size: 16.5px; line-height: 1.6; margin: 0 0 14px; }
.property-grid h3 { font-weight: 700; font-size: 18px; color: var(--body); margin: 26px 0 14px; }
.beds { display: flex; gap: 12px; flex-wrap: wrap; }
.bed { flex: 1; min-width: 150px; border: 1px solid var(--border-2); border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 12px; }
.bed .icon { width: 24px; height: 24px; flex-shrink: 0; }
.bed .nm { font-weight: 700; color: var(--body); font-size: 15px; display: block; }
.bed .rm { font-size: 12.5px; color: var(--muted); }
.property-media { position: relative; border-radius: 22px; overflow: hidden; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.price-chip { position: absolute; z-index: 1; bottom: 16px; left: 16px; right: 16px; background: rgba(22,56,74,0.92); color: #fff; border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.price-chip .from { font-size: 12px; opacity: 0.7; display: block; }
.price-chip .amt { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; }
.price-chip .amt small { font-size: 13px; font-weight: 500; opacity: 0.8; }
.price-chip .rated { background: var(--sunshine); color: var(--ink); font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }

/* ============================ EXPLORE CARDS (home) ============================ */
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.explore-card { text-decoration: none; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 2; display: block; background: #e9e2d5; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.explore-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(22,56,74,0.18); }
.explore-card .ic { position: absolute; top: 14px; left: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; }
.explore-card .ic .icon { width: 22px; height: 22px; }
.explore-card .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.explore-card .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px; background: linear-gradient(180deg, rgba(22,56,74,0) 0%, rgba(22,56,74,0.45) 45%, rgba(22,56,74,0.9) 100%); }
.explore-card .cap .t { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; color: #fff; }
.explore-card .cap .d { display: block; font-size: 13.5px; color: #E7DFD0; margin-top: 3px; }

/* ============================ EXTENDED BAND (home) ============================ */
.band-gold { background: var(--band-gold); }
.ext-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ext-band .copy { max-width: 620px; }
.ext-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--sunshine); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; }
.ext-badge .icon { width: 15px; height: 15px; stroke: var(--sunshine); }
.ext-band h2 { font-weight: 800; font-size: 34px; line-height: 1.06; letter-spacing: -0.02em; margin: 14px 0 10px; color: var(--ink); }
.ext-band p { color: #6B5A3E; font-size: 16.5px; line-height: 1.6; margin: 0; }

/* ============================ FINAL CTA (split) ============================ */
.finalcta { position: relative; border-radius: 28px; overflow: hidden; background: var(--ink); padding: 56px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.finalcta .studs { position: absolute; top: -30px; right: -10px; display: flex; gap: 14px; opacity: 0.16; }
.finalcta .studs span { width: 64px; height: 64px; border-radius: 50%; }
.finalcta .ctacopy { position: relative; max-width: 560px; }
.finalcta h2 { font-weight: 800; font-size: 38px; line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 12px; color: #fff; }
.finalcta p { color: #C9C0AE; font-size: 17px; line-height: 1.55; margin: 0; }
.finalcta .actions { position: relative; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.finalcta .actions .btn-gold { padding: 16px 36px; font-size: 17px; }
.finalcta .micro { color: #9FB0BA; font-size: 13px; text-align: center; text-decoration: none; }

/* ============================ CTA (centered navy) ============================ */
.cta-center { background: var(--ink); border-radius: 24px; padding: 44px; text-align: center; }
.cta-center h2 { font-weight: 800; font-size: 32px; letter-spacing: -0.02em; margin: 0 0 10px; color: #fff; }
.cta-center p { color: #C9C0AE; font-size: 16px; margin: 0 0 22px; }
.cta-center .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-plain { text-align: center; }
.cta-plain h2 { font-weight: 800; font-size: 34px; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--ink); }
.cta-plain p { color: var(--muted); font-size: 16px; margin: 0 0 22px; }
.cta-split { background: var(--ink); border-radius: 24px; padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-split h2 { font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 8px; color: #fff; }
.cta-split p { color: #C9C0AE; font-size: 16px; line-height: 1.55; margin: 0; }
.cta-split .copy { max-width: 560px; }
.cta-split .acts { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-dashed { border: 1.5px dashed #D8C9A8; border-radius: 22px; padding: 40px; text-align: center; background: #fff; }
.cta-dashed h2 { font-weight: 800; font-size: 32px; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--ink); }
.cta-dashed p { color: var(--muted); font-size: 16px; margin: 0 auto 22px; max-width: 520px; }

/* ============================ GALLERY ============================ */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { font-size: 13.5px; font-weight: 600; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border-2); background: #fff; color: #4A4339; cursor: default; }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; grid-auto-flow: dense; }
.shot { position: relative; border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; transition: filter 0.15s ease; }
.shot:hover { filter: brightness(0.97); }
.shot .num { position: absolute; top: 12px; left: 12px; z-index: 1; font-family: ui-monospace, monospace; font-size: 11px; color: #8a7c63; background: rgba(255,255,255,0.78); padding: 5px 10px; border-radius: 999px; }
.shot .cap { position: relative; z-index: 1; width: 100%; padding: 16px; color: #fff; font-weight: 600; font-size: 15px; background: linear-gradient(180deg, rgba(22,56,74,0) 0%, rgba(22,56,74,0.62) 100%); }

/* ============================ RATES ============================ */
.rates-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.rate-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rate-card { border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 6px; min-height: 180px; justify-content: space-between; border: 1px solid var(--border); background: #fff; }
.rate-card .rtag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 12px; }
.rate-card .price { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.02em; color: var(--ink); }
.rate-card .price small { font-size: 16px; font-weight: 500; opacity: 0.7; }
.rate-card .rdesc { font-size: 14px; color: var(--subtle); line-height: 1.45; }
.rate-card.dark { background: var(--ink); border-color: var(--ink); }
.rate-card.dark .rtag { color: var(--sunshine); }
.rate-card.dark .price { color: #fff; }
.rate-card.dark .rdesc { color: #C9C0AE; }
.rate-card.gold { background: var(--band-gold); border-color: #F3E2C0; }
.rate-card.gold .rdesc { color: #6B5A3E; }
.policy-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px; }
.policy-card h3 { font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 16px; }
.policy-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-3); }
.policy-row .icon { width: 19px; height: 19px; margin-top: 1px; flex-shrink: 0; }
.policy-row .pt { font-weight: 700; font-size: 14.5px; color: var(--body); display: block; }
.policy-row .pd { font-size: 13px; color: var(--subtle); line-height: 1.45; }
.note-band { background: var(--band-gold); border-radius: 18px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.note-band .l { display: flex; align-items: center; gap: 14px; }
.note-band .l .ic { width: 34px; height: 34px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; }
.note-band .l .ic .icon { width: 18px; height: 18px; }
.note-band .nt { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); }
.note-band .nd { display: block; font-size: 14px; color: #6B5A3E; margin-top: 2px; }

/* ============================ AMENITIES BAND ============================ */
.band-dark { background: var(--ink); color: #EDE6D7; }
.band-dark .eyebrow { color: var(--sunshine); }
.band-dark h2 { font-weight: 800; font-size: 34px; line-height: 1.06; letter-spacing: -0.02em; margin: 10px 0 28px; color: #fff; }
.amenity-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; }
.amenity-group .gh { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.amenity-group .gh .icon { width: 18px; height: 18px; stroke: var(--sunshine); }
.amenity-group .gh .gt { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 16px; color: #fff; }
.amenity-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.amenity-pills span { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #E2DAC9; font-size: 13.5px; padding: 7px 13px; border-radius: 999px; }

/* ============================ LOCATION ============================ */
.loc-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; align-items: stretch; }
.map-media { position: relative; border-radius: 22px; overflow: hidden; min-height: 480px; display: flex; align-items: center; justify-content: center; border: 1px solid #E1E0CF; }
.map-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-chip { position: absolute; z-index: 1; bottom: 16px; left: 16px; background: rgba(255,255,255,0.92); color: var(--ink); font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 10px; }
.dist-card { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 8px 24px; }
.dist { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--border-3); }
.dist:last-child { border-bottom: none; }
.dist .place { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--body); font-weight: 500; }
.dist .place .sq { width: 9px; height: 9px; border-radius: 2px; }
.dist .time { font-size: 14px; color: var(--subtle); font-weight: 700; }
.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.area-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px; }
.area-card .tile { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.area-card .tile .icon { width: 22px; height: 22px; }
.area-card .at { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 16px; color: var(--body); margin-bottom: 8px; }
.area-card .ai { font-size: 13.5px; color: #7A7064; line-height: 1.4; display: block; }
.sec-h2 { font-weight: 800; font-size: 30px; letter-spacing: -0.02em; margin: 0 0 24px; color: var(--ink); }

/* ============================ EXTENDED STAYS PAGE ============================ */
.ext-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.ext-hero h1 { font-weight: 800; font-size: 46px; line-height: 1.04; letter-spacing: -0.02em; margin: 16px 0 14px; color: #fff; }
.ext-hero p { color: #C9C0AE; font-size: 17px; line-height: 1.6; margin: 0 0 26px; max-width: 540px; }
.ext-hero .badge-gold { display: inline-flex; align-items: center; gap: 8px; background: var(--sunshine); color: var(--ink); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; }
.ext-hero .badge-gold .icon { width: 15px; height: 15px; stroke: var(--ink); }
.ext-hero .media { position: relative; border-radius: 22px; overflow: hidden; min-height: 360px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #244a5c, #244a5c 16px, #1e4150 16px, #1e4150 32px); }
.ext-hero .media .ph-tag { color: #9fb4bf; background: rgba(255,255,255,0.12); }
.two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feat-card { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 30px; }
.feat-card .ttl { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px; color: var(--ink); display: block; margin-bottom: 18px; }
.feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feat-list .li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #4A4339; }
.feat-list .li .icon { width: 17px; height: 17px; stroke-width: 2.5; flex-shrink: 0; }
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.reason { background: #fff; border-radius: 18px; padding: 26px; }
.reason .tile { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.reason .tile .icon { width: 24px; height: 24px; }
.reason .rt { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 7px; }
.reason .rd { display: block; font-size: 14px; color: #7A7064; line-height: 1.5; }

/* ============================ HOST ============================ */
.host-card { background: #fff; border: 1px solid var(--border); border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: 0.8fr 1.2fr; }
.host-media { position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center; }
.host-body { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; }
.host-body h1 { font-weight: 800; font-size: 38px; line-height: 1.08; letter-spacing: -0.02em; margin: 10px 0 16px; color: var(--ink); }
.host-body p { color: var(--muted); font-size: 16.5px; line-height: 1.6; margin: 0 0 12px; }
.host-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 10px; }
.host-stats .s .v { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 26px; color: var(--ink); display: block; }
.host-stats .s .l { font-size: 13px; color: var(--subtle); }

/* reviews */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.reviews-head h2 { font-weight: 800; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; margin: 10px 0 0; color: var(--ink); }
.rating-badge { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px 20px; }
.rating-badge .big { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 32px; color: var(--ink); }
.rating-badge .stars { color: var(--sunshine); font-size: 15px; letter-spacing: 2px; display: block; }
.rating-badge .sub { font-size: 12.5px; color: var(--subtle); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.review .stars { color: var(--sunshine); font-size: 14px; letter-spacing: 2px; }
.review p { font-size: 15px; color: #4A4339; line-height: 1.55; margin: 0; flex: 1; }
.review .who { display: flex; align-items: center; gap: 11px; padding-top: 6px; border-top: 1px solid var(--border-3); }
.review .who .av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink); font-size: 14px; background: var(--tint-gold); }
.review .who .nm { font-weight: 700; font-size: 14px; color: var(--body); display: block; }
.review .who .mt { font-size: 12px; color: var(--subtle-2); }
.review.placeholder { border-style: dashed; border-color: #D8C9A8; background: #FCFAF4; }
.review.placeholder p { color: #9A8E7C; font-style: italic; }
.review.placeholder .av { background: #EFE7D8; color: #B0A085; }
.review.placeholder .nm { color: #9A8E7C; }

/* ============================ CONTACT ============================ */
.contact-layout { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 22px; align-items: start; }
.book-card { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 26px; }
.book-card .bh { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.book-card .bh .l { display: flex; align-items: center; gap: 10px; }
.book-card .bh .mark { width: 38px; height: 38px; border-radius: 11px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.book-card .bh .t { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); }
.book-card .bh .live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--leaf); font-weight: 600; }
.book-card .bh .live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
.book-mount { border-radius: 16px; background: var(--canvas); padding: 14px; }
.book-mount #lodgify-book-now-box { width: 100%; }
.assurances { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.assurances span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.assurances .icon { width: 15px; height: 15px; stroke: var(--leaf); stroke-width: 2.5; }
.contact-side { display: flex; flex-direction: column; gap: 16px; }
.contact-navy { background: var(--ink); color: #EDE6D7; border-radius: 22px; padding: 28px; }
.contact-navy h3 { font-weight: 700; font-size: 20px; color: #fff; margin: 0 0 6px; }
.contact-navy p { font-size: 14.5px; color: #C9C0AE; line-height: 1.55; margin: 0 0 20px; }
.contact-list { display: flex; flex-direction: column; gap: 14px; }
.contact-list a { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; }
.contact-list .ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
.contact-list .ic .icon { width: 19px; height: 19px; stroke: #fff; }
.contact-list .lbl { font-size: 12px; color: #9FB0BA; display: block; }
.contact-list .val { font-size: 15px; color: #fff; font-weight: 600; }
.rules-glance { background: var(--band-gold); border-radius: 22px; padding: 24px; }
.rules-glance .h { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); display: block; margin-bottom: 12px; }
.rules-glance .list { display: flex; flex-direction: column; gap: 10px; }
.rules-glance .li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #6B5A3E; }
.rules-glance .li .icon { width: 17px; height: 17px; stroke: var(--gold-text); flex-shrink: 0; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.faq { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.faq .q { display: block; font-weight: 700; font-size: 15.5px; color: var(--ink); margin-bottom: 7px; }
.faq .a { display: block; font-size: 14px; color: #7A7064; line-height: 1.55; }

/* ============================ FOOTER ============================ */
footer.site { background: var(--footer); color: #B9C4CB; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 56px 24px 28px; max-width: var(--maxw); margin: 0 auto; }
.footer-grid .fbrand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.footer-grid .fbrand .nm { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 17px; color: #fff; }
.footer-grid p.blurb { font-size: 14px; line-height: 1.6; margin: 0 0 18px; max-width: 320px; color: #93A1A9; }
.footer-grid .colh { font-weight: 700; color: #fff; font-size: 14px; display: block; margin-bottom: 14px; }
.footer-grid .flist { display: flex; flex-direction: column; gap: 9px; }
.footer-grid .flist a, .footer-grid .flist span { text-decoration: none; color: #B9C4CB; font-size: 14px; }
.footer-grid .flist a:hover { color: #fff; }
.footer-grid .stayinfo { color: #93A1A9; }
.footer-grid .stayinfo a { color: var(--sunshine); font-weight: 600; }
.footer-cta { display: inline-flex; margin-top: 20px; align-items: center; gap: 8px; text-decoration: none; background: var(--sunshine); color: var(--ink); font-weight: 700; font-size: 14px; padding: 11px 20px; border-radius: 999px; transition: background 0.15s; }
.footer-cta:hover { background: var(--sunshine-hover); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.footer-bottom .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #9EAAB2; padding: 18px 24px; max-width: var(--maxw); margin: 0 auto; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1000px) {
  .facts-grid { grid-template-columns: repeat(3, 1fr); }
  .perks-grid, .area-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .property-grid, .rates-layout, .loc-layout, .ext-hero, .two-cards, .host-card, .contact-layout, .reasons-grid, .explore-grid, .amenity-2col { grid-template-columns: 1fr; }
  .host-media { min-height: 280px; }
  .hero h1 { font-size: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  nav.main { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--canvas); border-bottom: 1px solid var(--border-2); padding: 12px 24px 18px; gap: 14px; box-shadow: 0 12px 24px rgba(22,56,74,0.08); }
  nav.main.open { display: flex; }
  nav.main a.link { font-size: 16px; padding: 4px 0; }
  nav.main a.link.active::after { display: none; }
  .btn-pill { text-align: center; }
  .navtoggle { display: inline-flex; }
  header.site .row { position: relative; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .shot { grid-column: auto !important; grid-row: auto !important; }
  .finalcta, .cta-split { flex-direction: column; align-items: flex-start; }
  .finalcta .actions { align-self: stretch; }
  .rate-cards, .feat-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  .facts-grid, .area-grid, .faq-grid, .rate-cards, .feat-list, .reviews-grid { grid-template-columns: 1fr; }
  .perks-grid { grid-template-columns: 1fr; }
  .hero-media { min-height: 460px; }
  .hero-copy { padding: 28px 24px 120px; }
  .hero h1 { font-size: 34px; }
  .hero p.sub { font-size: 16px; }
  .page-head h1 { font-size: 34px; }
  .booking-search { margin-top: -54px; }
  .head-row h2, .property-grid h2, .ext-hero h1, .host-body h1 { font-size: 30px; }
  .finalcta { padding: 40px 26px; }
  .finalcta h2 { font-size: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .topstrip .left .ts-extra { display: none; }
  .host-body { padding: 32px 26px; }
}

/* CLS: reserve booking-widget height so lazy-loaded Lodgify widgets don't shift layout */
.booking-search #lodgify-search-bar{min-height:72px;}
.book-mount #lodgify-book-now-box{min-height:360px;}


/* utilities (replaces former inline style attributes) */
.u-dim { opacity: 0.8; }
.nap-line { font-style: normal; margin: 6px 0 2px; line-height: 1.5; }
.svg-sprite { position: absolute; }
.ic-sky { stroke: var(--sky); }
.ic-leaf { stroke: var(--leaf); }
.ic-coral { stroke: var(--coral); }
.ic-sm { width: 15px; height: 15px; }
.bg-tint-sky { background: var(--tint-sky); }
.bg-tint-gold { background: var(--tint-gold); }
.bg-tint-leaf { background: var(--tint-leaf); }
.bg-tint-coral { background: var(--tint-coral); }
.bg-sunshine { background: var(--sunshine); }
.bg-sky { background: var(--sky); }
.bg-leaf { background: var(--leaf); }
.bg-coral { background: var(--coral); }
.sp-1-1 { grid-column: span 1; grid-row: span 1; }
.sp-2-1 { grid-column: span 2; grid-row: span 1; }
.mw-820 { max-width: 820px; }
.mb-72 { margin-bottom: 72px; }
.my-64-72 { margin: 64px auto 72px; }
.btn-md { padding: 13px 26px; font-size: 15px; }
.btn-lg { padding: 15px 34px; font-size: 16px; }
.p-8-24 { padding: 8px 24px; }
.p-60-24 { padding: 60px 24px; }
.p-56-24 { padding: 56px 24px; }
.p-56-24-8 { padding: 56px 24px 8px; }
.p-56-24-72 { padding: 56px 24px 72px; }
.p-44-24-8 { padding: 44px 24px 8px; }
.p-20-24-8 { padding: 20px 24px 8px; }
.p-8-24-64 { padding: 8px 24px 64px; }
.p-8-24-56 { padding: 8px 24px 56px; }

.mw-560 { max-width: 560px; }
.mt-14-8 { margin: 14px 0 8px; }
.list-muted { margin: 0 0 4px 20px; color: var(--muted); line-height: 1.7; }
.my-72 { margin: 72px auto; }
.my-8-72 { margin: 8px auto 72px; }
.mt-44 { margin-top: 44px; }
.p-0-24-20 { padding: 0 24px 20px; }
.p-12-24-8 { padding: 12px 24px 8px; }
.sp-2-2 { grid-column: span 2; grid-row: span 2; }
.sp-1-2 { grid-column: span 1; grid-row: span 2; }
.btn-sm { padding: 12px 22px; font-size: 14.5px; }
.btn-md2 { padding: 14px 26px; font-size: 15px; }
.btn-md3 { padding: 14px 28px; font-size: 15px; }
.row-gap12 { display: flex; gap: 12px; flex-wrap: wrap; }
.row-link { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.grid-auto300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 900px; margin: 0 auto; gap: 18px; }
.txt-verified { color: #2C8A4A; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }