/* 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); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 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(260px, 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(270px, 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: 820px) {
  .ab-row, .ab-owners { grid-template-columns: 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(240px, 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(280px, 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(230px, 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(210px, 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(250px, 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(258px, 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); }
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 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/) ---------- */
.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; }
}