/* Nature Stay Getaway — naturestaygetaway.com */
:root {
  --ink: #1e2a23;
  --forest: #2f4a3a;
  --pine: #3e6650;
  --cream: #ffffff; /* de-creamed 2026-07-16: pure white page background */
  --sand: #ececec;  /* de-creamed: neutral light gray for borders/chips */
  --amber: #c98d4b;
  --muted: #6b7a70;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: var(--cream); line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: var(--pine); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 2rem;
  padding: .8rem clamp(1rem, 4vw, 3rem); background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand); }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--forest);
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
.brand em { font-style: normal; color: var(--amber); }
.logo-mark { width: 34px; height: 34px; }
.nav nav { display: flex; gap: 1.4rem; margin-left: auto; }
.nav nav a { text-decoration: none; color: var(--ink); font-size: .95rem; }
.nav nav a:hover { color: var(--pine); }
.btn { display: inline-block; padding: .7rem 1.4rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .95rem; border: 0; cursor: pointer; }
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: var(--pine); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn-nav { background: var(--forest); color: #fff; padding: .55rem 1.1rem; }

/* hero */
/* overflow:hidden is load-bearing — the slideshow's scale(1.06) keyframe makes a slide wider
   than the viewport and it escaped, giving the whole page a horizontal scrollbar */
.hero { position: relative; min-height: min(88vh, 780px); display: flex; align-items: flex-end;
  overflow: hidden; }
picture { display: contents; } /* responsive <picture> wrappers must not affect layout */
picture source { display: none; } /* keep <source> out of grid/flex layouts (display:contents promotes children) */
.hero > img, .hero > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,30,24,.28) 0%, rgba(20,30,24,.06) 38%, rgba(20,30,24,.34) 68%, rgba(20,30,24,.88) 100%); }
.hero-content { position: relative; padding: clamp(1.2rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  color: #fff; max-width: 780px; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4rem); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero p { margin: 1rem 0 1.5rem; font-size: clamp(1rem, 2.2vw, 1.25rem); text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.trust { margin-top: 1.6rem; font-size: .9rem; opacity: .92; }

/* sections */
.section { padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem); max-width: 1280px; margin: 0 auto; }
.section-sub { color: var(--muted); margin: .5rem 0 1.5rem; max-width: 640px; }

/* pills + grid */
.pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.pill { padding: .5rem 1.05rem; border-radius: 999px; border: 1px solid #d6d6d6; background: #fff;
  cursor: pointer; font-size: .9rem; color: var(--ink); }
.pill.active { background: var(--forest); color: #fff; border-color: var(--forest); }
/* every auto-fill/auto-fit grid uses min(Npx, 100%): a column wider than a small phone's content
   box (e.g. 290px on a 320px screen) pushed the whole page sideways */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 1.5rem; }
/* a grid sitting straight under a heading (e.g. "Stay at Ruby Ranch") needs breathing room;
   grids that follow a .section-sub already get it from the paragraph's margin */
h2 + .grid { margin-top: 1.6rem; }
.card { background: #fff; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 3px rgba(30,42,35,.08); transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(30,42,35,.16); }
.card-img { aspect-ratio: 3/2; overflow: hidden; position: relative; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
/* photo arrows on a card (site.js builds these from data-slides). The extra photo is one <img>
   laid over the card's own picture and only given a src when asked for. Arrows show on hover
   for a mouse and stay visible on touch screens, where a swipe works too. */
.card-img[data-slides] { touch-action: pan-y; }
.card-img .cs-img { position: absolute; inset: 0; opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.card-img .cs-img.on { opacity: 1; }
.cs-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--ink); line-height: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 6px rgba(30,42,35,.28); opacity: 0; transition: opacity .16s ease, transform .16s ease; }
.cs-nav svg, .cal-nav svg { display: block; width: 16px; height: 16px; flex: none; }
.cs-prev { left: .6rem; }
.cs-next { right: .6rem; }
.cs-nav[hidden] { display: none; }
.cs-nav:hover { transform: translateY(-50%) scale(1.07); }
.cs-nav:focus-visible { opacity: 1; outline: 2px solid var(--forest); outline-offset: 2px; }
.card:hover .cs-nav, .card:focus-within .cs-nav { opacity: 1; }
@media (hover: none) { .cs-nav { opacity: .9; width: 32px; height: 32px; } }
.cs-dots { position: absolute; left: 0; right: 0; bottom: .55rem; z-index: 2; display: flex;
  justify-content: center; gap: 5px; pointer-events: none; }
.cs-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.6);
  box-shadow: 0 0 2px rgba(0,0,0,.35); transition: background .16s ease, transform .16s ease; }
.cs-dots i.on { background: #fff; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .card-img .cs-img, .cs-nav, .cs-dots i { transition: none; } }
.card-body { padding: 1rem 1.1rem 1.2rem; }
.card-meta { display: flex; gap: .6rem; align-items: baseline; font-size: .85rem; color: var(--muted); }
.stars { color: var(--amber); font-weight: 700; }
.muted { color: var(--muted); }
.card h3 { font-size: 1.08rem; margin: .3rem 0 .2rem; }
.card-facts { font-size: .88rem; color: var(--muted); }
.chips { margin-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { font-size: .74rem; padding: .18rem .6rem; border-radius: 999px; background: var(--sand); color: var(--forest); font-weight: 600; }
.card.hide { display: none; }

/* book direct */
.direct { background: var(--forest); color: #fff; max-width: none; }
.direct h2 { color: #fff; max-width: 1280px; margin: 0 auto; }
.direct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 2rem;
  max-width: 1280px; margin: 2rem auto 0; }
.direct h3 { color: var(--amber); margin-bottom: .4rem; }
.direct p { opacity: .92; }

/* about strip */
.about-strip { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.about-copy p { margin: 1rem 0 1.5rem; color: var(--muted); }
.about-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.about-imgs img { border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 860px) { .about-strip { grid-template-columns: 1fr; } }

/* footer — everything centered (brand, the Explore/More pair, Contact) stacked above a
   full-width bottom bar: copyright far-left, Privacy/Terms far-right, on one line. */
.footer { background: var(--ink); color: #cfd8d1; padding: 3rem clamp(1.5rem, 6vw, 125px) 2rem; }
.footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.7rem; }
.f-brand { max-width: none; }
.footer .brand { color: #fff; justify-content: center; }
/* Explore + More: two columns centered as a pair with an even gap between them */
.f-cols { display: flex; justify-content: center; gap: clamp(2.5rem, 8vw, 6rem); }
.f-col, .f-contact { text-align: center; }
.footer h4 { color: #fff; margin-bottom: .4rem; font-size: 1.2rem;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.footer a { color: #e8d5b8; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
/* icon-only social links in the Contact block */
.f-social { display: inline-flex; padding: .35rem; margin: .15rem .3rem 0; }
.f-social .s-icon { width: 21px; height: 21px; }
.f-social:hover { text-decoration: none; color: #fff; transform: translateY(-1px); transition: color .15s ease, transform .15s ease; }
.f-socials { margin-top: .3rem; }
.tagline { font-family: var(--serif); font-style: italic; margin-top: .6rem; }
.footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.13); }
.copyright { margin: 0; font-size: .82rem; opacity: .62; }
.f-legal { margin: 0; font-size: .82rem; }
.f-by { margin: 0; font-size: .82rem; opacity: .62; transition: opacity .18s ease; }
.f-by:hover { opacity: 1; }
/* the site's own .footer a:hover underline would draw a second line under the
   wordmark, which already carries a border-bottom — suppress it and brighten instead */
.f-by a, .f-by a:hover { color: inherit; text-decoration: none; }
.f-by .by { opacity: .72; }
.f-by .dlgm { font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.f-by .sl { color: #5A7FFF; font-weight: 700; }
@media (max-width: 640px) {
  .footer-bar { flex-direction: column; gap: .55rem; text-align: center; }
}

/* listing page */
.listing { max-width: 1280px; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; }
.l-head h1 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.l-sub { display: flex; gap: 1rem; align-items: baseline; color: var(--muted); margin: .4rem 0 1.2rem; flex-wrap: wrap; }
.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: .6rem; border-radius: 18px; overflow: hidden; }
.g-main, .g-thumb { padding: 0; border: 0; cursor: pointer; background: var(--sand); }
.g-main img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }
.g-side { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.g-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }
.g-more { display: grid; place-items: center; font-weight: 700; color: var(--forest); font-size: 1rem; background: var(--sand); }
@media (max-width: 720px) { .gallery { grid-template-columns: 1fr; } .g-side { grid-template-columns: repeat(4, 1fr); } .g-more { aspect-ratio: 3/2; } }

.l-cols { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; margin-top: 2rem; }
@media (max-width: 900px) { .l-cols { grid-template-columns: 1fr; } }
.facts { display: flex; gap: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--sand); font-size: 1.05rem; }
.amen-hi { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.2rem 0; }
.amen-hi li { background: #fff; border: 1px solid var(--sand); padding: .4rem .9rem; border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--forest); }
.desc h3 { margin: 1.4rem 0 .4rem; color: var(--forest); }
.desc p { margin: .6rem 0; }
.amen-all { margin-top: 1.5rem; }
.amen-all summary { cursor: pointer; font-weight: 700; color: var(--pine); padding: .6rem 0; }
.amen-all ul { columns: 2; list-style: none; padding: .8rem 0; }
.amen-all li { padding: .18rem 0; font-size: .92rem; color: var(--muted); break-inside: avoid; }

/* column = the box + the phone line under it; the column (not the box) is sticky */
.book-col { position: sticky; top: 90px; align-self: start; }
.book-card { background: #fff; border-radius: 18px;
  padding: 1.6rem; box-shadow: 0 6px 30px rgba(30,42,35,.12); }
.book-card h3 { font-size: 1.25rem; }
.book-card p { color: var(--muted); font-size: .92rem; margin: .5rem 0 1rem; }
.btn-book { width: 100%; text-align: center; font-size: 1.05rem; padding: .9rem; }
.book-alt { text-align: center; margin: 1rem 0 0; font-size: .9rem; color: var(--muted); }
.book-alt a { color: var(--forest); font-weight: 600; }
.bc-neg { color: var(--forest); font-weight: 600; }
.rating-line { color: var(--ink); }

.mobile-book { display: none; }
@media (max-width: 900px) {
  .book-card { display: none; }
  .mobile-book { display: block; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 40;
    text-align: center; padding: 1rem; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
  body:has(.mobile-book) { padding-bottom: 5rem; }
}

/* all-photos overview grid */
.gridview { position: fixed; inset: 0; z-index: 90; background: #fff; overflow-y: auto; }
.gridview[hidden] { display: none; }
.gv-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: .9rem clamp(1rem, 4vw, 2.5rem); background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sand); }
.gv-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.gv-close { border: 0; background: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 .3rem; }
.gv-grid { max-width: 1100px; margin: 0 auto; padding: 1.2rem clamp(1rem, 3vw, 2rem) 3rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: .8rem; }
.gv-item { padding: 0; border: 0; background: var(--sand); cursor: pointer; border-radius: 10px; overflow: hidden; }
.gv-item img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .25s ease; }
.gv-item:hover img { transform: scale(1.02); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,20,17,.96);
  display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: none; border: 0; color: #fff;
  font-size: 2.6rem; cursor: pointer; padding: .5rem 1rem; opacity: .8; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { opacity: 1; }
.lb-close { top: .5rem; right: 1rem; }
.lb-prev { left: .5rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .5rem; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  color: #fff; opacity: .75; font-size: .9rem; }

/* ============ About / Our story (editorial) ============ */
.about { color: var(--ink); }
.ab-eyebrow, .ab-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber); }
/* typographic hero — no image, the line does the work */
.ab-hero-txt { text-align: center; border-bottom: 1px solid var(--sand);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(62,102,80,.07) 0%, rgba(62,102,80,0) 60%),
    #fff;
  padding: clamp(4.5rem, 11vw, 8.5rem) clamp(1.2rem, 5vw, 2rem) clamp(3rem, 7vw, 5rem); }
.ab-hero-txt-inner { max-width: 940px; margin: 0 auto; }
.ab-hero-emblem { width: 52px; height: 52px; margin: 0 auto 1.5rem; opacity: .95; }
.ab-hero-txt .ab-eyebrow { display: inline-block; margin-bottom: 1.1rem; }
.ab-hero-txt h1 { font-size: clamp(2.1rem, 5.6vw, 4rem); line-height: 1.1;
  letter-spacing: -.01em; color: var(--ink); }
.ab-hero-txt h1 em { font-style: normal; color: var(--amber); }
.ab-hero-txt p { margin: 1.6rem auto 0; max-width: 58ch; color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem); }
/* alternating story rows */
.ab-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center; max-width: 1180px; }
.ab-row-rev .ab-row-media { order: 2; }
.ab-row-media { border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px rgba(30,42,35,.14); }
.ab-media { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5/4; display: block; }
.ab-row-copy h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--forest); margin: .5rem 0 1rem; }
.ab-row-copy p { color: var(--muted); margin: .9rem 0; max-width: 46ch; }
.ab-inline-quote { font-family: var(--serif); font-size: 1.15rem; color: var(--ink) !important;
  border-left: 3px solid var(--amber); padding-left: 1.1rem; }
/* full-bleed pull quote */
.ab-quote { position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: min(60vh, 460px); }
.ab-quote-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-quote picture { position: absolute; inset: 0; }
.ab-quote-shade { position: absolute; inset: 0; background: rgba(18,26,21,.66); }
.ab-quote blockquote { position: relative; max-width: 900px; margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.2rem, 5vw, 3rem); color: #fff; text-align: center;
  font-family: var(--serif); font-size: clamp(1.4rem, 3.2vw, 2.3rem); line-height: 1.32; }
.ab-quote cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: .95rem;
  letter-spacing: .16em; text-transform: uppercase; color: #e6c896; font-family: var(--sans); }
/* three places */
.ab-places-head { text-align: center; max-width: 620px; margin: 0 auto 2.4rem; }
.ab-places-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); color: var(--forest); }
.ab-places-head p { color: var(--muted); margin-top: .5rem; }
.ab-places-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 1.4rem; }
.ab-place { display: flex; flex-direction: column; background: #fff; border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--sand);
  transition: transform .18s ease, box-shadow .18s ease; }
.ab-place:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(30,42,35,.16); }
.ab-place-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.ab-place-copy { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.ab-place-copy h3 { font-size: 1.25rem; color: var(--forest); }
.ab-place-copy p { font-size: .9rem; color: var(--muted); }
.ab-place-go { margin-top: .5rem; font-weight: 600; font-size: .85rem; color: var(--amber); }
/* owners + stats */
.ab-owners { display: grid; grid-template-columns: 45% 1fr; gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center; max-width: 1180px; }
.ab-owners-media { border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px rgba(30,42,35,.14); }
.ab-owners-copy h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--forest); margin: .5rem 0 1rem; }
.ab-owners-copy p { color: var(--muted); max-width: 48ch; }
.ab-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 1.6rem; margin: 1.8rem 0; }
.ab-stats div { display: flex; flex-direction: column; }
.ab-stats strong { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--forest); line-height: 1; }
.ab-stats span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }
@media (max-width: 420px) { .ab-stats { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 2.2rem; } }
@media (max-width: 820px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr column grows to its content's minimum width, and the
     4-across stats made the owners block 316px wide on a 320px phone (page scrolled sideways) */
  .ab-row, .ab-owners { grid-template-columns: minmax(0, 1fr); }
  .ab-row-rev .ab-row-media { order: 0; }
  .ab-owners-media { order: 0; }
  .ab-stats { gap: 1.1rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .ab-place:hover { transform: none; } }

/* prose pages */
.prose { max-width: 720px; margin: 0 auto; padding: 3rem clamp(1rem, 4vw, 2rem) 4rem; }
.prose h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1.2rem; }
.prose h3 { margin: 1.6rem 0 .4rem; color: var(--forest); }
.prose p { margin: .8rem 0; }

@media (max-width: 720px) {
  .nav nav { display: none; }
  .nav { gap: 1rem; }
  .btn-nav { margin-left: auto; }
}

/* ===== v2 lifestyle additions ===== */
.hero-kicker { text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; font-weight: 700;
  opacity: .85; margin-bottom: .8rem; }
.hero-cine .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: cine 28s infinite; }
.hero-cine .hero-base { opacity: 1; animation: none; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .18s ease; }
/* The film appears and starts moving the moment it can play (site.js). The still underneath is
   the film's own first frame, so this short fade only smooths any trace of colour difference
   between the photo and the video decoder — it is NOT a wait. */
.hero-video.playing { opacity: 1; }
.hero-cine .slide-2 { animation-delay: 7s; }
.hero-cine .slide-3 { animation-delay: 14s; }
.hero-cine .slide-4 { animation-delay: 21s; }
@keyframes cine {
  0% { opacity: 0; transform: scale(1.06); }
  4% { opacity: 1; }
  25% { opacity: 1; }
  32% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cine .hero-slide { animation: none; }
}
.hero-short { min-height: min(52vh, 480px); }
/* destination hero carries no copy — the name/tagline sit below it in black.
   Taller than a text hero on purpose: at 480px a 16:9 film gets ~170px sliced off the
   top AND bottom, leaving only a middle band (roof + wall, no sky, no ground) which
   reads as a downward camera angle. ~660px keeps the horizon and the foreground, so the
   shot reads level and centred, as filmed. */
.hero-clean { min-height: min(74vh, 660px); }
.hero-clean .hero-overlay { background: linear-gradient(180deg, rgba(20,30,24,.18) 0%, rgba(20,30,24,0) 45%); }
.hero-clean > img, .hero-clean > picture > img, .hero-clean .hero-video { object-position: center 46%; }
/* intro: name, then tagline, then the paragraph BELOW them running the full content
   width — the same span as the five tiles underneath it (per Colin; a two-column
   version and a narrow left-hand block were both rejected). */
.d-intro { margin-bottom: 4.5rem; }
.d-intro h1 { font-size: clamp(2.1rem, 4.5vw, 3.1rem); color: var(--ink); margin-bottom: .55rem;
  letter-spacing: -.01em; }
.d-tagline { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3;
  color: var(--ink); margin: 0; }
.d-intro .lede { position: relative; padding-top: 1.5rem; margin: 1.6rem 0 0;
  font-size: 1.1rem; line-height: 1.8; color: var(--muted); max-width: none; }
.d-intro .lede::before { content: ""; position: absolute; top: 0; left: 0; width: 64px;
  height: 2px; background: var(--amber); }
/* .d-intro and .dbullets are adjacent siblings, so their margins COLLAPSE to the larger:
   the 4.5rem above is what actually creates the gap over the tiles. */
.hero-short h1 { font-size: clamp(2rem, 5vw, 3.2rem); }

.feel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.2rem; }
.feel { position: relative; border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff;
  aspect-ratio: 4/5; display: flex; align-items: flex-end; }
.feel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.feel:hover img { transform: scale(1.05); }
.feel-copy { position: relative; padding: 1.2rem; width: 100%;
  background: linear-gradient(180deg, transparent, rgba(20,30,24,.85)); }
.feel-copy h3 { font-size: 1.5rem; }
.feel-copy p { font-size: .88rem; opacity: .92; margin-top: .2rem; }

.dest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.4rem; margin-top: 1.6rem; }
.dest { position: relative; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff;
  aspect-ratio: 16/11; display: flex; align-items: flex-end; }
.dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dest:hover img { transform: scale(1.04); }
.dest-copy { position: relative; padding: 1.4rem; width: 100%;
  background: linear-gradient(180deg, transparent, rgba(20,30,24,.88)); }
.dest-copy h3 { font-size: 1.7rem; }
.dest-copy p { font-size: .92rem; opacity: .92; margin: .25rem 0 .5rem; }
.dest-count { font-weight: 700; color: var(--amber); font-size: .9rem; }

.season-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1.4rem; margin-top: 1.6rem; }
.season img { border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; width: 100%; margin-bottom: .7rem; }
.season h3 { color: var(--forest); }
.season p { color: var(--muted); font-size: .92rem; }

/* centred, three stacked lines: headline / invitation / social buttons (per Colin).
   The four photos that sat beside it were removed. */
.community { text-align: center; }
/* one line, must never overflow: the 2.1rem cap is measured — at 2.55rem this headline is
   1353px wide against 1184px of content and runs off the page. The vw term keeps it fitting
   between the wrap breakpoint and full width. */
.community h2 { max-width: none; margin: 0 auto; white-space: nowrap;
  font-size: clamp(1.05rem, 2.42vw, 2.1rem); }
.community > p { margin: 1.1rem auto 0; color: var(--muted); max-width: none; }
.community .social-row { justify-content: center; margin-top: 1.8rem; }
@media (max-width: 720px) {
  /* the headline can't hold one line on a phone — let it wrap rather than shrink to nothing */
  .community h2 { white-space: normal; font-size: 1.5rem; }
  .community .social-row { gap: .5rem; }
}
.social-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn-ghost-dark { background: transparent; color: var(--forest); border: 1.5px solid var(--forest);
  display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.5rem;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn-ghost-dark .s-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.btn-ghost-dark:hover { background: var(--forest); color: #fff; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30,42,35,.18); }

.center { text-align: center; margin-top: 2rem; }
.lede { font-size: 1.15rem; max-width: 780px; color: var(--ink); margin-bottom: 1.6rem; }
/* 5 across on wide screens so nothing orphans; each tile still wide enough that a
   4:3 photo reads (~220px+). Wraps to 3 then 2 on smaller screens. */
.dbullets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1.1rem;
  margin: 1.8rem 0 2.5rem; }
.dbullet { background: #fff; border-radius: 14px; padding: 1.2rem 1.3rem; box-shadow: 0 1px 3px rgba(30,42,35,.08); }
.dbullet h3 { color: var(--forest); font-size: 1.05rem; margin-bottom: .3rem; }
/* photo tile: the photo shows FULL at its native 4:3 with the copy BELOW it.
   (An earlier version laid text over a tall portrait tile — object-fit:cover then sliced
   the 4:3 assets down to a narrow vertical strip and the scrim hid the subject. Never
   display these assets in a box whose aspect differs from the asset's.) */
.dbullet-photo { padding: 0; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(30,42,35,.12); }
.dbullet-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform .5s ease; }
.dbullet-photo:hover img { transform: scale(1.03); }
.db-copy { padding: .9rem 1rem 1.1rem; }
.dbullet-photo h3 { color: var(--forest); font-size: 1.05rem; margin-bottom: .3rem; }
.dbullet-photo p { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.dbullet p { font-size: .92rem; color: var(--muted); }

.exp-live { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.6rem; background: #fff;
  border-radius: 18px; overflow: hidden; box-shadow: 0 4px 20px rgba(30,42,35,.1); margin: 1.5rem 0 2.5rem; }
.exp-live img { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.exp-copy { padding: 1.6rem 1.6rem 1.6rem 0; }
.exp-copy h3 { font-size: 1.4rem; margin: .6rem 0 .4rem; }
.exp-copy p { color: var(--muted); margin-bottom: 1rem; }
@media (max-width: 720px) { .exp-live { grid-template-columns: 1fr; } .exp-copy { padding: 0 1.4rem 1.4rem; } }
.chip-live { background: var(--forest); color: #fff; }
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.exp-soon { background: #fff; border: 1px dashed #cbcbcb; border-radius: 14px; padding: 1.1rem 1.2rem; }
.exp-soon h3 { font-size: 1.02rem; color: var(--forest); margin-bottom: .25rem; }
.exp-soon p { font-size: .88rem; color: var(--muted); }

.cta-panel { background: var(--forest); color: #fff; border-radius: 18px; padding: 2rem;
  margin-top: 2.5rem; text-align: center; }
.cta-panel h3 { font-size: 1.4rem; color: var(--amber); }
.cta-panel p { max-width: 560px; margin: .6rem auto 1.2rem; opacity: .93; }
.cta-panel a { color: #fff; }
.cta-panel .btn-primary { background: var(--amber); color: var(--ink); font-weight: 700; }

/* things-to-do guide: filter chips + area sections + link cards */
.ttd-guide h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
/* filter chips scroll away with the page (NOT sticky) — they only live at the top of the guide */
.g-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 1.2rem; padding: .2rem 0; }
.g-chip { font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink); cursor: pointer;
  background: #fff; border: 1px solid var(--sand); border-radius: 999px; padding: .5rem 1.05rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.g-chip:hover { border-color: var(--pine); color: var(--pine); }
.g-chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.g-count { color: var(--muted); font-size: .82rem; min-height: 1.2em; margin: .1rem 0 .4rem; }

.g-area[hidden] { display: none; }  /* [hidden] loses to the flex/grid display below */
.g-area-head { display: flex; align-items: baseline; gap: 1rem; margin: 2.4rem 0 1.1rem; }
.g-area-head::after { content: ""; flex: 1; height: 1px; background: var(--sand); }
.g-area-head h2 { font-size: clamp(1.3rem, 2.6vw, 1.85rem); color: var(--forest); flex: none; }
/* flex:none here would let a long subtitle ("about 30 miles southwest of downtown Indy")
   refuse to shrink and drag the whole page into a horizontal scroll on a phone */
.g-area-meta { color: var(--muted); font-size: .85rem; flex: 0 1 auto; }
@media (max-width: 620px) {
  .g-area-head { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .g-area-head::after { display: none; }  /* the rule line has nothing to fill when stacked */
}

.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr)); gap: 1rem; }
.g-card { position: relative; display: flex; flex-direction: column; gap: .3rem;
  padding: 1.15rem 1.25rem 1.25rem; background: #fff; border: 1px solid var(--sand);
  border-radius: 16px; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.g-card[hidden] { display: none; }
a.g-card:hover { transform: translateY(-3px); border-color: #dcdcdc;
  box-shadow: 0 12px 30px rgba(30,42,35,.11); }
a.g-card:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
.g-eyebrow { display: block;
  font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber); padding-right: 1.4rem; }  /* clear the corner arrow */
/* self-hosted brand logo, held in a uniform tile so 49 different marks read as one grid */
.g-logo { width: 46px; height: 46px; border-radius: 11px; border: 1px solid var(--sand);
  background: #fff; object-fit: contain; margin-bottom: .8rem; }
.tm-note { margin-top: 2rem; font-size: .72rem; line-height: 1.5; color: var(--muted);
  max-width: 720px; }
.g-card h3 { font-size: 1.05rem; color: var(--forest); padding-right: 1.2rem; }
.g-card p { font-size: .87rem; color: var(--muted); }
.g-go { position: absolute; top: 1.1rem; right: 1.15rem; color: var(--sand); font-size: 1rem;
  transition: color .18s ease, transform .18s ease; }
a.g-card:hover .g-go { color: var(--amber); transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .g-card, .g-go { transition: none; }
  a.g-card:hover { transform: none; }
  a.g-card:hover .g-go { transform: none; }
}

/* per-property "Explore the area" band on the destination pages */
.area-guide { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--sand); }
.ag-intro { max-width: 640px; margin-bottom: 1.8rem; }
.ag-intro h2 { color: var(--forest); }
.ag-intro p { color: var(--muted); margin-top: .6rem; }
.ag-head { margin: 2rem 0 1rem; }
.ag-head h3 { font-size: 1.15rem; color: var(--forest);
  display: inline-block; border-bottom: 2px solid var(--amber); padding-bottom: .3rem; }
.ag-all { display: inline-block; margin-top: 2.2rem; font-weight: 600; color: var(--forest);
  text-decoration: none; border-bottom: 1px solid var(--amber); padding-bottom: 2px; }
.ag-all:hover { color: var(--pine); }

.chips-lg .chip, .chips-lg { font-size: .85rem; }
.chips-lg { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.faq { background: #fff; border-radius: 12px; padding: .3rem 1.1rem; margin: .5rem 0; border: 1px solid var(--sand); }
.faq summary { cursor: pointer; font-weight: 600; padding: .55rem 0; color: var(--ink); }
.faq p { padding: 0 0 .8rem; color: var(--muted); }
.crumb { font-weight: 700; color: var(--pine); text-decoration: none; }
.crumb:hover { text-decoration: underline; }
.l-main h2 { margin-top: 2rem; font-size: 1.35rem; }
.prose-wide { max-width: 1000px; }
.grid-3 { margin: 1.6rem 0; }

/* mobile nav */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem;
  flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 2.5px; background: var(--forest); border-radius: 2px; }
@media (max-width: 960px) {
  .nav nav { display: none; }
  .nav-toggle { display: flex; }
  .nav.open nav { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); border-bottom: 1px solid var(--sand); padding: 1rem clamp(1rem, 4vw, 3rem) 1.4rem;
    gap: 1rem; box-shadow: 0 12px 30px rgba(30,42,35,.12); }
  .btn-nav { margin-left: auto; }
}

/* ---- live availability search (/stays/) ---- */
.searchbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
  background: #fff; border: 1px solid var(--sand); border-radius: 16px;
  padding: 1rem 1.1rem; margin: 0 0 1.4rem;
  box-shadow: 0 6px 20px rgba(30,42,35,.06);
}
.sb-field { display: flex; flex-direction: column; gap: .3rem; }
.sb-field label { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.searchbar input {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid #d6d6d6; border-radius: 10px; padding: .6rem .7rem; min-height: 44px;
}
.searchbar input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(47,74,58,.14); }
.sb-field input[type="date"] { min-width: 9.5rem; }
.sb-guests input { width: 5rem; }

/* ---- custom date range picker ---- */
.sb-dates { position: relative; display: flex; align-items: stretch; gap: .5rem; }
/* progressive enhancement: native inputs are the fallback; once JS adds .js we swap in
   the custom clickable fields and hide the native ones */
.sb-dates .sb-datefield { display: none; }
.sb-dates .sb-dates-arrow { display: none; }
.sb-dates.js .sb-native { display: none; }
.sb-dates.js .sb-datefield { display: flex; }
.sb-dates.js .sb-dates-arrow { display: flex; align-items: center; color: var(--muted); }
.sb-datefield { flex-direction: column; align-items: flex-start; gap: .18rem; cursor: pointer;
  background: #fff; border: 1px solid var(--sand); border-radius: 12px; padding: .5rem .85rem;
  min-width: 9.2rem; text-align: left; font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease; }
.sb-datefield:hover { border-color: #cfcfcf; }
.sb-datefield.is-active { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(47,74,58,.14); }
.sb-datefield-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.sb-datefield-value { font-size: .98rem; color: var(--muted); }
.sb-datefield-value.is-set { color: var(--ink); font-weight: 600; }

.sb-cal { position: absolute; top: calc(100% + .6rem); left: 0; z-index: 60;
  background: #fff; border: 1px solid var(--sand); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(30,42,35,.20); padding: 1.1rem 1.2rem 1rem; }
.sb-cal[hidden] { display: none; }
.cal-head { position: relative; height: 0; }
.cal-nav { position: absolute; top: .1rem; background: none; border: 1px solid var(--sand);
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer; padding: 0; line-height: 0;
  color: var(--ink); display: flex; align-items: center; justify-content: center; }
.cal-nav:hover { border-color: var(--ink); }
.cal-prev { left: 0; }
.cal-next { right: 0; }
.cal-nav.is-off { opacity: .3; pointer-events: none; }
.cal-months { display: flex; gap: 2rem; }
.cal-month { width: 15.5rem; }
.cal-mtitle { text-align: center; font-family: var(--serif); font-size: 1.05rem;
  color: var(--forest); margin-bottom: .7rem; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: .3rem; }
.cal-dow span { text-align: center; font-size: .68rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-day { aspect-ratio: 1; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .9rem; color: var(--ink); border-radius: 999px; position: relative;
  display: flex; align-items: center; justify-content: center; }
/* hover highlight only on real pointers (mouse). On touch, iOS keeps a sticky :hover after a
   tap, and the grey :hover was overriding the green selected day — making the first tap look
   like it didn't register (so people tapped twice). Excluding selected days + gating on
   (hover: hover) makes a single tap turn the day solid green immediately. */
@media (hover: hover) and (pointer: fine) {
  .cal-day:hover:not(:disabled):not(.is-start):not(.is-end) { background: var(--sand); }
}
.cal-day.is-disabled { color: #c9c9c9; cursor: default; text-decoration: line-through; }
/* booked nights (cabin pages): crossed out like a past day. "Checkout only" = the first booked
   night after an open one — you can leave that morning, so it is greyed but NOT crossed out.
   is-off = open, but out of reach for the check-in picked (past the next booking, or short of
   the minimum stay). All three sit above is-start/is-end so a selected day still turns green. */
.cal-day.is-booked { color: #c9c9c9; cursor: default; text-decoration: line-through; }
.cal-day.is-coonly { color: #a3aca6; cursor: default; }
.cal-day.is-off { color: #c9c9c9; cursor: default; }
.cal-day.is-today { font-weight: 700; }
.cal-day.is-range { background: rgba(47,74,58,.10); border-radius: 0; }
.cal-day.is-start, .cal-day.is-end { background: var(--forest); color: #fff; font-weight: 600; }
.cal-day.is-start { border-radius: 999px 0 0 999px; }
.cal-day.is-end { border-radius: 0 999px 999px 0; }
.cal-day.is-start.is-end { border-radius: 999px; }
.cal-pad { aspect-ratio: 1; }
.cal-note { margin: .8rem 0 0; font-size: .78rem; line-height: 1.4; color: var(--muted); text-align: center; }
.cal-foot { display: flex; align-items: center; justify-content: space-between;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--sand); }
.cal-note + .cal-foot { margin-top: .6rem; }
.cal-clear { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cal-clear:hover { color: var(--pine); }
.cal-done { min-height: 40px; padding: .5rem 1.4rem; }
@media (max-width: 760px) {
  .sb-cal { left: 50%; transform: translateX(-50%); width: min(94vw, 22rem);
    padding: 1rem 1rem .9rem; }
  .cal-months { gap: 1rem; }
  .cal-month { width: 100%; }
}
.searchbar .sb-go { min-height: 44px; padding: .6rem 1.4rem; }
.searchbar .sb-clear {
  min-height: 44px; padding: .6rem 1rem; background: transparent;
  color: var(--muted); border: 1px solid #d6d6d6;
}
.searchbar .sb-clear:hover { color: var(--ink); border-color: var(--ink); }

.stays-status { margin: -.4rem 0 1.4rem; font-size: .95rem; color: var(--ink); }
.stays-status.is-loading { color: var(--muted); }
.stays-status.is-ok { color: var(--forest); font-weight: 600; }
.stays-status.is-warn { color: #a4552b; font-weight: 600; }

.card-price {
  margin: .55rem 0 0; padding: .4rem .6rem; border-radius: 9px;
  background: rgba(47,74,58,.07); color: var(--forest);
  font-size: .9rem; line-height: 1.3;
}
.card-price strong { font-size: 1.02rem; }
.card.search-hide { display: none; }

@media (max-width: 640px) {
  .searchbar { padding: .9rem; gap: .7rem; }
  .sb-field { flex: 1 1 42%; }
  .sb-field input[type="date"] { min-width: 0; width: 100%; }
  .searchbar .sb-go { flex: 1 1 100%; }
}

/* homepage search band: center the shared form and give it a little breathing room */
.home-search .searchbar { max-width: 940px; margin-left: auto; margin-right: auto; }

/* ---- interactive booking box on listing pages (Airbnb-style UX, NatureStay brand) ---- */
.bc-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.bc-price { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.bc-price .bc-per { font-weight: 400; color: var(--muted); font-size: .95rem; }
.bc-price.bc-price-lg { font-size: 1.3rem; }
.bc-cap-note { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.bc-inputs { border: 1px solid #d0d0d0; border-radius: 12px; margin: 1rem 0 .9rem; }
.bc-dates { display: grid; grid-template-columns: 1fr 1fr; }
.bc-cell { display: flex; flex-direction: column; gap: .15rem; padding: .55rem .75rem; position: relative; }
.bc-dates .bc-cell { border-bottom: 1px solid #d0d0d0; }
.bc-dates .bc-cell:first-child { border-right: 1px solid #d0d0d0; }
.bc-cell-label { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.bc-date { border: none; padding: 0; font: inherit; color: var(--ink); background: transparent; width: 100%; }
.bc-date:focus { outline: none; }
.bc-guests-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: none; border: none; font: inherit; cursor: pointer; padding: 0; color: var(--ink); }
.bc-caret { color: var(--muted); font-size: .8rem; }
.bc-guests-pop { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 30; background: #fff;
  border: 1px solid var(--sand); border-radius: 14px; box-shadow: 0 14px 36px rgba(30,42,35,.18); padding: .4rem 1.1rem 1rem; }
.bc-guests-pop[hidden] { display: none; }
.bc-grow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--sand); }
.bc-grow:last-of-type { border-bottom: none; }
.bc-grow-t { font-weight: 600; color: var(--ink); }
.bc-grow-s { font-size: .82rem; color: var(--muted); }
.bc-grow.is-off { opacity: .5; }
.bc-stepper { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
.bc-step { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #b0b0b0; background: #fff;
  color: var(--forest); font-size: 1.15rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bc-step:hover:not(:disabled) { border-color: var(--forest); }
.bc-step:disabled { opacity: .3; cursor: not-allowed; }
.bc-count { min-width: 1.3rem; text-align: center; font-variant-numeric: tabular-nums; }
.bc-cap-line { font-size: .8rem; color: var(--muted); margin: .7rem 0 0; }
.bc-pop-close { display: block; margin: .8rem 0 0 auto; background: none; border: none; color: var(--forest);
  font-weight: 700; cursor: pointer; text-decoration: underline; font-size: .95rem; }
.bc-charge { text-align: center; color: var(--muted); font-size: .84rem; margin: .7rem 0 0 !important; white-space: nowrap; }
@media (max-width: 360px) { .bc-charge { white-space: normal; text-wrap: balance; } }
.bc-breakdown { margin-top: 1rem; font-size: .93rem; font-variant-numeric: tabular-nums; }
.bc-breakdown + .btn-book { margin-top: 1.1rem; }
.bc-line { display: flex; justify-content: space-between; padding: .38rem 0; color: var(--ink); }
.bc-line-sub { color: var(--muted); }
.bc-total { border-top: 1px solid var(--sand); margin-top: .3rem; padding-top: .75rem; font-weight: 700; font-size: 1.05rem; }
.bc-unavail { color: #a4552b; font-weight: 600; text-align: center; margin: .7rem 0 0; }
.book-card.is-loading .bc-price { color: var(--muted); }

/* booking box works on mobile too: show it inline, retire the old fixed bar */
@media (max-width: 900px) {
  .book-card { display: block; }
  .book-col { position: static; }
  .mobile-book { display: none; }
  body:has(.mobile-book) { padding-bottom: 0; }
}

/* booking box: shown when the authoritative price can't be fetched (never a guessed number) */
.bc-atcheckout { font-size: .84rem; color: var(--muted); margin: .5rem 0 0; }

/* ---- real guest reviews (data from Hostaway) ---- */
.reviews h2 { margin-bottom: .3rem; }
.rev-head { color: var(--ink); font-size: 1.05rem; margin: 0 0 1.4rem; }
.rev-score { font-weight: 700; color: var(--amber); }
.rev-count { color: var(--muted); }
/* min(300px, 100%): on a 320px phone a fixed 300px column stuck out 12px and the page scrolled sideways */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.2rem; }
.rev-card { margin: 0; background: #fff; border: 1px solid var(--sand); border-radius: 14px;
  padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; }
.rev-stars { color: var(--amber); font-size: .95rem; letter-spacing: .05em; }
.rev-card blockquote { margin: 0; color: var(--ink); font-size: .96rem; line-height: 1.55; }
.rev-meta { color: var(--muted); font-size: .85rem; }
.rev-meta .rev-name, .rev-card figcaption { font-weight: 600; color: var(--ink); }
.rev-more { margin-top: 1.2rem; }
.rev-more > summary { cursor: pointer; font-weight: 700; color: var(--forest); text-decoration: underline;
  text-underline-offset: 4px; list-style: none; display: inline-block; padding: .4rem 0; }
.rev-more > summary::-webkit-details-marker { display: none; }
.rev-more[open] > summary { margin-bottom: 1.2rem; }

/* ---- mobile polish pass (2026-07-17) ---- */
/* listing page: stop the grid column from forcing a sideways scroll */
@media (max-width: 900px) {
  .l-cols > * { min-width: 0; }                    /* single-column grid items may shrink */
  .facts { flex-wrap: wrap; gap: .6rem 1.5rem; }   /* facts row wraps instead of overflowing */
  .l-main .desc, .l-main p, .l-main h3 { overflow-wrap: break-word; }
}
/* bigger tap targets: hamburger + booking-box guests toggle */
.nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.bc-guests-toggle { min-height: 34px; }
/* tighten the mobile nav so "Book your stay" stays on one line */
@media (max-width: 480px) {
  .nav { gap: .55rem; padding-left: 1rem; padding-right: 1rem; }
  .btn-nav { white-space: nowrap; padding: .5rem .8rem; font-size: .9rem; }
  /* keep the wordmark to a tidy 2 lines next to the one-line button */
  .brand span { font-size: .98rem; line-height: 1.18; }
  .brand .logo-mark { flex: 0 0 auto; }
}

/* ============================================================================
   batch 2026-07-17b — hero de-zoom, booking-box position + range calendar,
   search-bar guests picker, gallery show-all tile
   ============================================================================ */

/* --- hero: less object-fit zoom on phones. A 16:9 film in a very tall box gets its sides
   cropped hard (reads as "zoomed in"); shorter heroes on mobile show much more of the frame.
   Destination heroes carry no text, so they can go shortest. --- */
@media (max-width: 700px) {
  .hero { min-height: min(66vh, 500px); }
  .hero-clean { min-height: min(50vh, 380px); }
  .hero-short { min-height: min(42vh, 330px); }
}

/* --- booking box: on mobile it moves directly under the amenity pills and above the
   description (facts + pills now sit full-width above .l-cols; the box is ordered first). --- */
@media (max-width: 900px) {
  .book-col { order: -1; margin: .4rem 0 1.7rem; }
}

/* --- booking-box date fields: same custom range calendar as the search bar. The two cells
   are now buttons that open #bc-cal; hidden inputs (#bc-in/#bc-out) still feed /api/quote. --- */
.bc-dates { position: relative; }
.bc-datefield { appearance: none; background: none; border: none; cursor: pointer; font: inherit;
  text-align: left; color: var(--ink); align-items: flex-start; }
.bc-datefield:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; border-radius: 8px; }
.bc-datefield.is-active { box-shadow: inset 0 0 0 2px var(--forest); border-radius: 8px; }
.bc-datefield-value { font-size: .96rem; color: var(--muted); }
.bc-datefield-value.is-set { color: var(--ink); font-weight: 600; }
/* the booking-box calendar (shares .sb-cal styling) is a single month so it fits the sidebar;
   override the search bar's mobile centering (translateX/width) so it anchors under the fields */
.bc-cal.sb-cal { left: 0; right: auto; transform: none; width: auto; min-width: 0; max-width: 100%; }

/* --- search-bar guests: the Adults/Children/Infants/Pets picker (matches the booking box) --- */
.sb-guests { position: relative; display: flex; flex-direction: column; gap: .3rem; align-items: stretch; }
.sb-guests-lbl { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.sb-guests-toggle { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  min-width: 11.5rem; min-height: 44px; background: #fff; border: 1px solid #d6d6d6; border-radius: 10px;
  padding: .55rem .85rem; font: inherit; color: var(--ink); cursor: pointer; }
.sb-guests-toggle:hover { border-color: #bdbdbd; }
.sb-guests-toggle[aria-expanded="true"] { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(47,74,58,.14); }
.sb-guests-pop { left: 0; right: auto; top: calc(100% + .5rem); min-width: 17rem; z-index: 45; }

/* --- gallery: the "Show all N photos" tile (4th slot, far right of the thumbnail row). --- */
.g-more { text-align: center; line-height: 1.25; padding: .5rem; }
.g-more-txt { font-size: .92rem; }
/* keep the big photo and the 2x2 thumbnail block the same height on desktop so the strip
   reads as one clean block (no dead space under three thumbs + the show-all tile) */
@media (min-width: 721px) {
  .g-side { grid-template-rows: 1fr 1fr; }
  .g-thumb img { aspect-ratio: auto; height: 100%; }
  .g-more { height: 100%; }
}

/* --- kill iOS Safari's accidental double-tap-to-zoom when tapping controls quickly (the +/−
   steppers, pills, chips, calendar days, date fields, toggles, links, nav). `manipulation`
   disables ONLY the double-tap-zoom gesture; normal scrolling AND pinch-to-zoom (accessibility)
   are untouched. Applied to every interactive control across the whole site. --- */
a, button, input, select, textarea, label, summary, [role="button"],
.bc-step, .bc-guests-toggle, .sb-guests-toggle, .bc-datefield, .sb-datefield,
.cal-day, .cal-nav, .pill, .g-chip, .nav-toggle, .g-thumb, .g-main, .cs-nav {
  touch-action: manipulation;
}

/* ---------- on-site checkout (/book/) ---------- */
/* Turnstile's box: empty (no height) for nearly every guest; when Cloudflare does want a click,
   its checkbox appears here, right above the pay button */
.co-human:empty { display: none; }
.co-human { margin: .4rem 0 .9rem; }
.checkout { max-width: 1120px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem) 4rem; }
.co-state { max-width: 640px; margin: 3rem auto; text-align: center; }
.co-state h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: .6rem; }
.co-stop-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.co-muted { color: var(--muted); }
.co-small { font-size: .88rem; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 3rem; align-items: start; }
.co-form-col h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin: .4rem 0 1.4rem; }
.co-back { font-size: .92rem; text-decoration: none; font-weight: 600; }
.co-h { font-family: var(--sans); font-size: 1.1rem; font-weight: 700; margin: 1.8rem 0 .9rem; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.co-row-3 { grid-template-columns: 1.4fr 1fr 1fr; }
.co-field { display: block; margin-bottom: .9rem; }
.co-field > span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.co-field em { font-weight: 400; color: var(--muted); font-style: normal; }
.co-field input, .co-field select, .co-field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: .75rem .85rem; border: 1px solid #cfd6d1; border-radius: 10px; background: #fff; }
.co-field textarea { resize: vertical; }
.co-field input:focus, .co-field select:focus, .co-field textarea:focus { outline: 2px solid var(--pine); outline-offset: 1px; border-color: var(--pine); }
.co-field .is-invalid, .co-check input.is-invalid { border-color: #a4552b; outline: 2px solid rgba(164,85,43,.35); }
.co-card-wrap { min-height: 120px; }
.co-secure { font-size: .85rem; color: var(--muted); margin: .7rem 0 0; }
.co-policy { margin: 1.4rem 0 .4rem; font-size: .95rem; }
.co-check { display: flex; gap: .6rem; align-items: flex-start; margin: .8rem 0; font-size: .95rem; cursor: pointer; }
.co-check input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--forest); flex: none; }
.co-error { background: #fbf1ec; color: #8a431f; border: 1px solid #efcdbb; border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0; font-weight: 600; }
.co-pay { width: 100%; margin-top: 1rem; padding: 1.05rem; font-size: 1.08rem; }
.co-pay.is-busy { opacity: .75; cursor: progress; }
.co-fineprint { text-align: center; margin-top: .9rem; }
.co-summary { position: sticky; top: 90px; border: 1px solid var(--sand); border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 10px 30px rgba(30,42,35,.08); }
.co-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.co-sum-body { padding: 1.3rem 1.4rem 1.5rem; }
.co-sum-name { font-size: 1.3rem; margin-bottom: .2rem; }
.co-trip { margin: 1rem 0 .6rem; border-top: 1px solid var(--sand); }
.co-trip > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--sand); text-align: right; }
.co-label { font-weight: 600; text-align: left; }
.co-lines { margin-top: 1rem; }
.co-line { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.co-line.co-total { border-top: 1px solid var(--sand); margin-top: .4rem; padding-top: .8rem; font-weight: 700; font-size: 1.1rem; }
.co-done { text-align: left; }
.co-done h1, .co-done > p { text-align: center; }
.co-check-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--forest); color: #fff;
  display: grid; place-items: center; font-size: 2rem; }
.co-receipt { border: 1px solid var(--sand); border-radius: 14px; padding: .4rem 1.2rem; margin: 1.6rem 0; }
.co-receipt > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--sand); text-align: right; }
.co-receipt > div:last-child { border-bottom: 0; }
.co-receipt span { color: var(--muted); text-align: left; }
.co-next { padding-left: 1.3rem; margin-bottom: 1.4rem; }
.co-next li { margin: .4rem 0; }
.co-done .btn { display: inline-block; }
@media (max-width: 900px) {
  .co-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .co-summary { position: static; order: -1; }
  .co-img { aspect-ratio: 16 / 7; }
}
@media (max-width: 560px) {
  .co-row, .co-row-3 { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- /groups/ — group planner (static/groups.js) ---------- */
.gp { --line: #e3e6e3; --soft: #f5f7f5; --ok: #2f6b48; --amber-ink: #8a5a24; --warn-bg: #fbf3e6; }
.gp [hidden] { display: none !important; }
.gp-stage { position: relative; min-height: min(640px, 80vh); display: grid; place-items: center; padding: 40px 16px; overflow: hidden; }
.gp-bg { position: absolute; inset: 0; }
.gp-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,23,.18), rgba(20,28,23,.42)); }
.gp-card { position: relative; z-index: 1; background: #fff; border-radius: 24px; padding: 30px 28px 26px; width: min(560px, 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.35); display: grid; gap: 16px; }
.gp-card.gp-wide { width: min(720px, 100%); }
.gp-stepno { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); }
.gp-card h1 { font: 600 clamp(1.7rem, 4.2vw, 2.3rem)/1.12 var(--serif); margin: 0; text-wrap: balance; }
.gp-guests { display: grid; }
.gp-grow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.gp-grow:first-child { border-top: 1px solid var(--line); }
.gp-gt { font-weight: 700; font-size: 1.06rem; }
.gp-gs { font-size: .86rem; color: var(--muted); }
.gp-ctr { display: flex; align-items: center; gap: 6px; }
.gp-step { width: 38px; height: 38px; border-radius: 999px; border: 1px solid #c9cfca; background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink); padding: 0; }
.gp-step svg { width: 15px; height: 15px; display: block; }
.gp-step:disabled { opacity: .35; cursor: default; }
.gp-cnt { width: 58px; text-align: center; font: 700 1.25rem/1 var(--sans); color: var(--ink); border: 1.5px solid transparent; border-radius: 10px; padding: 7px 2px; background: transparent; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.gp-cnt::-webkit-outer-spin-button, .gp-cnt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gp-cnt:hover { border-color: var(--line); }
.gp-cnt:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(47,74,58,.14); }
/* the summary and the message keep fixed heights so the card never grows or shrinks */
.gp-sum { margin: 0; height: 1.8rem; line-height: 1.2; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 6px; font-size: 1.02rem; }
.gp-sum b { font-size: 1.15rem; }
.gp-sum span { color: var(--muted); }
.gp-muted { color: var(--muted); font-weight: 600; }
.gp-msg { margin: 0; height: 64px; display: flex; align-items: center; justify-content: center; text-align: center; visibility: hidden;
  background: var(--warn-bg); color: var(--amber-ink); border-radius: 12px; padding: 10px 12px; font-size: .9rem; font-weight: 600; }
.gp-msg.on { visibility: visible; }
.gp-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 12px 20px; font: 700 1rem/1.2 var(--sans);
  cursor: pointer; background: var(--forest); color: #fff; text-decoration: none; white-space: nowrap; }
.gp-btn:hover { background: var(--pine); }
.gp-btn.gp-ghost { background: #fff; color: var(--forest); border: 1.5px solid var(--forest); }
.gp-btn.gp-ghost:hover { background: var(--forest); color: #fff; }
.gp-btn.gp-amber { background: var(--amber); color: #1e2a23; }
.gp-btn.gp-big { width: 100%; padding: 16px 22px; font-size: 1.05rem; }
.gp-btn.gp-small { padding: 8px 14px; font-size: .88rem; }
.gp-btn:disabled { background: #c6cbc7; border-color: #c6cbc7; color: #fff; cursor: default; }
.gp-btn:focus-visible, .gp-step:focus-visible, .gp-link:focus-visible, .gp-seebeds:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.gp-aside { margin: 0; text-align: center; font-size: .9rem; color: var(--muted); }
.gp-aside a, .gp-link { color: var(--forest); font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.gp-back { justify-self: start; border: 0; background: var(--soft); border-radius: 999px; padding: 7px 14px; font-weight: 700; cursor: pointer; color: var(--forest); display: inline-flex; gap: 6px; align-items: center; font-size: .92rem; }
.gp-back svg { width: 14px; height: 14px; }
/* step 2: the site's own range calendar, shown inline in the card */
.gp-dates { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #d6d6d6; border-radius: 14px; }
.gp-datefield { border: 0; background: #fff; text-align: left; padding: 10px 14px; cursor: pointer; display: grid; gap: 2px; border-radius: 14px; }
.gp-datefield + .gp-datefield { border-left: 1px solid #d6d6d6; border-radius: 0 14px 14px 0; }
.gp-datefield.is-active { box-shadow: inset 0 0 0 2px var(--forest); }
.gp-dl { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gp-dv { color: var(--muted); }
.gp-dv.is-set { color: var(--ink); font-weight: 600; }
.gp .sb-cal.gp-cal { position: static; grid-column: 1 / -1; transform: none; width: auto; border: 0; border-top: 1px solid #d6d6d6; border-radius: 0; box-shadow: none; padding: 16px 14px 10px; }
.gp .gp-cal .cal-months { justify-content: space-around; }
.gp-calnote { margin: 0; min-height: 2.6em; font-size: .88rem; color: var(--muted); text-align: center; }
/* step 3: results */
.gp-results { max-width: 1120px; margin: 0 auto; padding-inline: 20px; padding-block: 26px 60px; display: grid; gap: 22px; }
.gp-results h1 { font: 600 clamp(1.7rem, 3.6vw, 2.4rem)/1.12 var(--serif); margin: 0; text-wrap: balance; }
.gp-sumbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 999px; padding: 10px 12px 10px 20px; }
.gp-sumbar > span:first-child { font-weight: 600; }
.gp-sumbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.gp-loading { color: var(--muted); }
.gp-opts { display: grid; gap: 24px; }
.gp-opt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 8px 26px rgba(30,42,35,.08); background: #fff; }
.gp-opt.gp-best { border: 2px solid var(--forest); }
.gp-car { position: relative; background: var(--sand); min-height: 340px; }
.gp-carimg { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; cursor: zoom-in; background: none; width: 100%; height: 100%; }
.gp-carimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-carlbl { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.95); border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 700; pointer-events: none; }
.gp-carcount { position: absolute; right: 12px; bottom: 12px; background: rgba(20,28,23,.72); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: .78rem; font-weight: 700; pointer-events: none; font-variant-numeric: tabular-nums; }
.gp-carnav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,255,255,.95); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.gp-carnav svg { width: 18px; height: 18px; display: block; }
.gp-carprev { left: 12px; } .gp-carnext { right: 12px; }
.gp-optbody { padding: 22px 24px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.gp-besttag { justify-self: start; background: var(--forest); color: #fff; border-radius: 999px; padding: 4px 11px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.gp-opt h2 { font: 600 1.55rem/1.15 var(--serif); margin: 0; }
.gp-sent { margin: -4px 0 0; color: var(--muted); }
.gp-sent.gp-tot { margin-top: -10px; color: var(--ink); font-weight: 600; font-size: .95rem; }
.gp-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gp-plan li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px 6px 6px; }
.gp-thumb { width: 96px; height: 68px; border: 0; padding: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--sand); }
.gp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-plan b { font-family: var(--serif); font-size: 1.02rem; display: block; line-height: 1.2; }
.gp-plan span { font-size: .82rem; color: var(--muted); }
.gp-seebeds { border: 0; background: none; padding: 0; margin-top: 3px; color: var(--forest); font-weight: 700; font-size: .84rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; display: block; }
.gp-nobeds { display: block; margin-top: 3px; font-size: .8rem; color: var(--muted); font-style: italic; }
.gp-who { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.gp-who small { display: block; font-weight: 400; font-size: .74rem; color: var(--muted); }
.gp-buy { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.gp-buy b { font: 700 1.5rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.gp-pp { display: block; font-size: .92rem; font-weight: 700; color: var(--ok); margin-top: 2px; }
.gp-fine { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.gp-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.gp-how { margin: 0; font-size: .84rem; color: var(--muted); }
.gp-none { border: 1px dashed #c9cfca; border-radius: 18px; padding: 22px; display: grid; gap: 12px; justify-items: start; }
.gp-none p { margin: 0; font-size: 1rem; }
.gp-ranch { background: var(--forest); color: #eef2ef; border-radius: 18px; padding: 20px 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.gp-ranch b { font: 600 1.25rem/1.2 var(--serif); color: #fff; display: block; }
/* full-screen photos */
.gp-lb { position: fixed; inset: 0; z-index: 100; background: #101512; color: #f1f3f1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.gp-lb-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; }
.gp-lb-title { font: 600 1.15rem/1.2 var(--serif); }
.gp-lb-tabs { display: inline-flex; gap: 6px; }
.gp-lb-tabs button { border: 1px solid rgba(255,255,255,.3); background: transparent; color: #f1f3f1; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: .84rem; cursor: pointer; }
.gp-lb-tabs button[aria-pressed="true"] { background: #f1f3f1; color: #101512; border-color: #f1f3f1; }
.gp-lb-tabs button:disabled { opacity: .35; cursor: default; }
.gp-lb-x { width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.gp-lb-x svg, .gp-lb-nav svg { width: 18px; height: 18px; display: block; }
.gp-lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 56px; }
.gp-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 6px; }
.gp-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: #101512; cursor: pointer; display: grid; place-items: center; padding: 0; }
.gp-lb-prev { left: 8px; } .gp-lb-next { right: 8px; }
.gp-lb-cap { text-align: center; padding: 10px 16px 4px; font-size: .95rem; margin: 0; }
.gp-lb-cap b { color: #e9c08f; }
.gp-lb-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px)); justify-content: safe center; }
.gp-lb-thumbs button { flex: none; width: 78px; height: 54px; border: 2px solid transparent; border-radius: 6px; padding: 0; overflow: hidden; cursor: pointer; background: #222; opacity: .6; }
.gp-lb-thumbs button[aria-current="true"] { border-color: #e9c08f; opacity: 1; }
.gp-lb-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-mapdlg { border: 0; border-radius: 18px; padding: 0; width: min(620px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.gp-mapdlg::backdrop { background: rgba(20,28,23,.55); }
.gp-mapdlg > div { padding: 20px; display: grid; gap: 12px; }
.gp-mapdlg h2 { font: 600 1.35rem/1.2 var(--serif); margin: 0; }
.gp-mapdlg img { width: 100%; height: auto; border-radius: 12px; display: block; }
.gp-mapdlg .gp-btn { justify-self: end; }
@media (max-width: 860px) { .gp-opt { grid-template-columns: 1fr; } .gp-car { min-height: 0; aspect-ratio: 4 / 3; } }
@media (max-width: 560px) {
  .gp-card { padding: 24px 18px 20px; }
  .gp-sum { height: 3.4rem; }
  .gp-msg { height: 84px; }
  .gp-optbody { padding: 18px 16px; }
  .gp-sumbar { border-radius: 18px; }
  .gp-plan li { grid-template-columns: 76px minmax(0, 1fr); }
  .gp-thumb { width: 76px; height: 56px; }
  .gp-who { grid-column: 2; text-align: left; }
  .gp-lb-stage { padding: 0 8px; }
  .gp .sb-cal.gp-cal { padding: 12px 6px 8px; }
}
@media (prefers-reduced-motion: reduce) { .gp-btn, .gp-step { transition: none; } }
.gp-links { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.gp-links .gp-seebeds { margin-top: 3px; }
.gp-dt { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
.gp-dt summary { cursor: pointer; padding: 10px 0; font-weight: 700; color: var(--forest); font-size: .92rem; }
.gp-dt[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.gp-dt-block { display: grid; gap: 4px; padding: 6px 0 10px; }
.gp-dt-block + .gp-dt-block { border-top: 1px dashed var(--line); padding-top: 10px; }
.gp-dt-head { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.gp-dt-head span { color: var(--muted); }
.gp-dt-line { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; font-variant-numeric: tabular-nums; }
.gp-dt-line span:first-child { color: var(--muted); }
.gp-dt-sub { font-weight: 700; }
.gp-dt-sub span:first-child { color: var(--ink); }
.gp-dt-total { border-top: 1px solid var(--line); padding: 10px 0; font-weight: 800; font-size: .98rem; }
.gp-dt-total span:first-child { color: var(--ink); }
.gp-dt-pol { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.gp-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .86rem; color: var(--muted); }
.gp-rules li::before { content: "\2713"; color: var(--forest); font-weight: 700; margin-right: 8px; }
.gp-lede { margin: -4px 0 0; color: var(--muted); }
.gp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.gp-f { display: grid; gap: 5px; font-weight: 700; font-size: .9rem; min-width: 0; }
.gp-f em { font-weight: 400; color: var(--muted); font-style: normal; }
.gp-f-full, .gp-form > .gp-btn, .gp-form > .gp-aside, .gp-form > .gp-ferr, .gp-form > .gp-human, .gp-reach { grid-column: 1 / -1; }
.gp-f input, .gp-f textarea { font: 400 1rem/1.4 var(--sans); color: var(--ink); border: 1px solid #d6d6d6; border-radius: 10px; padding: 11px 12px; width: 100%; min-width: 0; background: #fff; }
.gp-f textarea { resize: vertical; }
.gp-f input:focus, .gp-f textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(47,74,58,.14); }
.gp-f .is-invalid { border-color: #a4552b; box-shadow: 0 0 0 3px rgba(164,85,43,.14); }
.gp-ferr { margin: 0; background: #f8eae7; color: #8e3a2c; border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: .92rem; }
.gp-human:empty { display: none; }
.gp-sent { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 12px 0 6px; }
.gp-sent-ic { width: 54px; height: 54px; border-radius: 999px; background: #e7f3eb; color: #2f6b48; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; }
.gp-sent h2 { font: 600 1.5rem/1.2 var(--serif); margin: 0; }
.gp-sent p { margin: 0; color: var(--muted); max-width: 46ch; }
.gp-reach { border: 0; margin: 0; padding: 0; min-width: 0; }
.gp-reach legend { padding: 0; margin: 0 0 5px; font-weight: 700; font-size: .9rem; }
.gp-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gp-seg label { position: relative; display: block; }
.gp-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gp-seg span { display: block; text-align: center; padding: 11px 8px; border: 1px solid #d6d6d6; border-radius: 10px; background: #fff; font-weight: 600; font-size: .95rem; }
.gp-seg input:checked + span { border-color: var(--forest); background: #eef3ef; color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.gp-seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(47,74,58,.14); }
/* the request form's dates: the same boxes + calendar as the booking box. The calendar opens
   inside the form (pushing the fields below down) so the page edge can never cut it off. */
.gp-when .gp-dv { font-weight: 400; }
.gp-when .gp-dv.is-set { font-weight: 600; }
.gp .sb-cal.gp-wcal[hidden] { display: none; }
.gp-flex { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .92rem; cursor: pointer; justify-self: start; margin-top: 4px; }
.gp-flex input { width: 18px; height: 18px; margin: 0; accent-color: var(--forest); }
.gp-seg-wrap { grid-template-columns: repeat(4, 1fr); }
.gp-seg-wrap span { padding-inline: 6px; white-space: nowrap; }
.gp-reach legend em { font-weight: 400; font-style: normal; color: var(--muted); }
/* phones: one column, except first + last name side by side */
@media (max-width: 560px) { .gp-form > .gp-f:not(.gp-f-name) { grid-column: 1 / -1; } .gp-seg-wrap { grid-template-columns: 1fr 1fr; } }
.gp-callus { display: grid; gap: 14px; text-align: center; }
.gp-callus p { margin: 0; color: var(--muted); }
.stays-grouplink { font-weight: 700; color: var(--forest); text-decoration: underline; text-underline-offset: 3px; white-space: normal; }

/* ---- homepage hero with the search inside it (Aaron, 5 Oct 2026) ----
   .hero-media holds the photos, video and shade and clips the slideshow's zoom (the reason
   .hero has overflow:hidden). This hero itself must NOT clip, or the date calendar and the
   guests picker would be cut off at its bottom edge. */
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero.hero-search { overflow: visible; }
.hero-search .hero-content { max-width: 980px; width: 100%; min-width: 0; }
@media (max-width: 640px) {
  /* On phones the two date boxes share one full-width row instead of keeping their 9.2rem
     minimum, which pushed the page sideways (homepage photo at 390px; /stays/ at 320px) and
     put the calendar, centred on the boxes, 3px off a 360px screen. The plain date inputs
     (shown only if the calendar script fails to load) follow the same rule. */
  .searchbar .sb-dates { flex: 1 1 100%; min-width: 0; }
  .searchbar .sb-dates .sb-datefield, .searchbar .sb-dates .sb-native { flex: 1 1 0; min-width: 0; }
}
.hero .searchbar { color: var(--ink); text-shadow: none; border: 0; margin: .2rem 0 0;
  box-shadow: 0 18px 50px rgba(0,0,0,.28); width: fit-content; max-width: 100%; }
@media (max-width: 640px) { .hero .searchbar { width: auto; } }
.hero-browse { margin-top: .85rem; font-size: .95rem; }
.hero-browse a { color: #fff; text-decoration: underline; text-underline-offset: 3px;
  text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.hero-search .trust { margin-top: 1rem; }

/* ---- the homepage's featured cards: "Sleeps X · Bedrooms · Hot tub · Setting", then View Stay ---- */
.card-facts-feat { color: var(--ink); font-weight: 600; font-size: .92rem; margin-top: .1rem; }
.card-cta { display: inline-block; margin-top: .8rem; padding: .5rem 1.15rem; border-radius: 999px;
  background: var(--forest); color: #fff; font-weight: 600; font-size: .9rem; }
.grid-feat .card:hover .card-cta { background: var(--pine); }

/* ---- "More Than a Place to Sleep" (Aaron's plan, section 3) ---- */
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
.more-item { background: #fff; border: 1px solid var(--sand); border-radius: 16px; padding: 1.2rem 1.25rem 1.1rem; }
.more-ic { width: 34px; height: 34px; fill: none; stroke: var(--forest); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.more-item h3 { margin: .55rem 0 .3rem; font-size: 1.12rem; color: var(--ink); }
.more-item p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.45; }

/* ---- homepage reviews: which stay each review is from ---- */
.rev-stay { font-size: .85rem; color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Aaron's homepage plan (comparison build) ---- */
.aaron-ranch { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #1e2a23; color: #fff; }
.ar-media { position: relative; min-height: 420px; overflow: hidden; }
.ar-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-copy { padding: clamp(1.6rem, 4vw, 3.4rem); }
.ar-copy h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); margin: .2rem 0 .8rem; }
.ar-copy p { color: rgba(255,255,255,.88); line-height: 1.55; }
.ar-stays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1.2rem 0 1.4rem; }
.ar-stay { color: #fff; text-decoration: none; font-size: .82rem; }
.ar-stay img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; margin-bottom: .35rem; }
@media (max-width: 860px) { .aaron-ranch { grid-template-columns: minmax(0, 1fr); } .ar-media { min-height: 260px; } .ar-stays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 1rem; margin-top: 1.4rem; }
.kind { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; color: #fff; text-decoration: none; }
.kind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kind::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.62) 100%); }
.kind span { position: absolute; left: 1rem; bottom: .9rem; z-index: 1; font-family: var(--serif); font-size: 1.25rem; }
.aaron-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.ag-copy h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.ag-opts { display: grid; gap: .7rem; }
.ag-opt { background: #fff; border: 1px solid var(--sand); border-radius: 14px; padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.ag-opt span { color: var(--muted); font-size: .92rem; }
@media (max-width: 860px) { .aaron-groups { grid-template-columns: minmax(0, 1fr); } }
.aaron-email { text-align: center; }
.ae-form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.ae-in { font: inherit; padding: .7rem .9rem; min-height: 46px; border: 1px solid #d6d6d6; border-radius: 10px; min-width: 0; flex: 0 1 320px; }
.ae-note { color: var(--muted); font-size: .85rem; margin-top: .7rem; }
.aaron-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #f4f1ea; }
.as-media { position: relative; min-height: 380px; overflow: hidden; }
.as-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-copy { padding: clamp(1.6rem, 4vw, 3.4rem); align-self: center; }
.as-copy h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin: .2rem 0 .8rem; }
.as-copy .hero-kicker, .ar-copy .hero-kicker { color: var(--amber); }
@media (max-width: 860px) { .aaron-split { grid-template-columns: minmax(0, 1fr); } .as-media { min-height: 240px; } }
.aaron-final h2 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 3rem); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.direct .btn-primary { background: #fff; color: var(--forest); }
.direct .btn-primary:hover { background: #f4f1ea; }
.ag-copy .hero-actions { margin-top: 1.2rem; }
.aaron-ext .grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.ae-form { max-width: 720px; margin: 1.2rem auto 0; }
.ae-row { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.ae-row .ae-in { flex: 1 1 220px; }
.ae-row .ae-first { flex: 1 1 170px; }
.ae-consent { display: flex; gap: .55rem; align-items: flex-start; justify-content: center; text-align: left; margin: .9rem auto 0; max-width: 560px; font-size: .9rem; color: var(--muted); cursor: pointer; }
.ae-consent input { margin-top: .2rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--forest); }
.ae-human { display: flex; justify-content: center; margin-top: .6rem; }
.ae-msg { min-height: 1.2em; margin: .6rem 0 0; font-size: .92rem; color: var(--forest); }
.ae-msg.bad { color: #a4552b; font-weight: 600; }
.ae-done { font-weight: 600; color: var(--forest); margin-top: 1rem; }
.ae-off { color: var(--muted); margin-top: 1rem; }