/* Cabin Life Rental, v2 (2026-10-18): Nav's brief and mockups - "a warm, modern lakeside theme: ivory
   backgrounds, forest green sections and cedar-coloured accents", subtle backgrounds so the photos stand out.
   Fonts are self-hosted (no Google request): DM Serif Display for headings, Figtree for text.
   v1 (black/red, Righteous) is kept in archive/v1-2026-10-18/. */
@font-face { font-family: "DM Serif Display"; src: url(/assets/fonts/DMSerifDisplay-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/assets/fonts/Figtree-Variable.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --ivory: #f7f2e8; --ivory-2: #efe7d7; --card: #fffdf8; --line: #e3d9c6;
  --forest: #1f3b2d; --forest-2: #162b20; --forest-soft: #2c4a3a;
  --cedar: #a8623a; --cedar-dark: #8b4d2b; --cedar-soft: #f3e3d6;
  --ink: #1c231f; --text: #3c4540; --muted: #6b726c;
  --star: #c98a2e;
  --open: #e3f0e4; --open-ink: #1f5e35; --booked: #ece6dc; --booked-ink: #9a948a;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px; --shadow: 0 6px 24px rgba(31, 45, 36, .09); --shadow-up: 0 16px 36px rgba(31, 45, 36, .16);
  --wrap: 1240px; --gutter: clamp(16px, 3.4vw, 48px);
}
@media (min-width: 2000px) { :root { --wrap: 1560px; } body { font-size: 18px; } }
@media (min-width: 3000px) { :root { --wrap: 2000px; } body { font-size: 20px; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--sans); color: var(--text); background: var(--ivory); padding-bottom: 66px; }
img, video { max-width: 100%; display: block; }
a { color: var(--cedar-dark); }
h1, h2, h3 { color: var(--ink); line-height: 1.12; margin: 0; }
p { margin: 0 0 14px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 99; }
.h1 { font: 400 clamp(38px, 6vw, 64px)/1.05 var(--serif); letter-spacing: -.01em; }
.h2 { font: 400 clamp(32px, 4.6vw, 52px)/1.08 var(--serif); letter-spacing: -.01em; }
.h3, h3 { font: 400 clamp(22px, 2.4vw, 26px)/1.2 var(--serif); }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 600 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .18em; color: var(--cedar); margin: 0 0 14px; }
.eyebrow::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .7; }
.eb-light { color: #e9c39f; }
.lead { font: 400 clamp(20px, 2.2vw, 24px)/1.35 var(--serif); color: var(--ink); }
.small { font-size: 15px; color: var(--muted); }
mark.ph { background: #fff2a8; color: #6a4c00; border: 1px dashed #c9a400; padding: 0 4px; border-radius: 3px; font: 600 12px/1.6 var(--sans); }
section { scroll-margin-top: 84px; }

/* banner + header */
.banner { background: var(--forest-2); text-align: center; padding: 7px 12px; font: 500 13px/1.3 var(--sans); letter-spacing: .04em; }
.banner a { color: #e8e1d2; text-decoration: none; } .banner a:hover { color: #fff; }
.site-header { background: rgba(247, 242, 232, .96); border-bottom: 1px solid rgba(0, 0, 0, .05); position: relative; z-index: 40; }
.head-in { display: flex; align-items: center; gap: 18px; padding: 12px var(--gutter); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; transition: padding .25s ease; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--forest); }
.wordmark svg { width: 36px; height: 36px; fill: currentColor; flex: none; }
.wordmark span { display: flex; flex-direction: column; line-height: 1; }
.wordmark b { font: 400 25px/1 var(--serif); letter-spacing: .06em; text-transform: uppercase; }
.wordmark small { font: 600 10.5px/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; margin-top: 5px; padding-left: 2px; color: var(--cedar); }
.wm-light { color: #f3ecdf; } .wm-light small { color: #e2b993; }
.nav { display: none; gap: 30px; margin-left: auto; }
.nav a { position: relative; font: 500 16px var(--sans); color: var(--ink); text-decoration: none; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cedar); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.head-book { margin-left: auto; min-height: 42px; padding: 8px 16px; font-size: 15px; }
@media (min-width: 960px) { .nav { display: flex; } .head-book { margin-left: 20px; } }
@media (max-width: 420px) { .wordmark b { font-size: 21px; } .wordmark svg { width: 30px; height: 30px; } .head-book { padding: 8px 12px; font-size: 14px; } .head-book svg { display: none; } }
@media (min-width: 960px) {
  .site-header { position: sticky; top: 0; }
  .site-header.scrolled { box-shadow: 0 6px 20px rgba(31, 45, 36, .1); }
  .site-header.scrolled .head-in { padding-top: 7px; padding-bottom: 7px; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 11px 22px;
  font: 600 16px/1.2 var(--sans); text-decoration: none; border: 1.5px solid transparent; border-radius: 10px; cursor: pointer; }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn-lg { min-height: 54px; padding: 14px 28px; font-size: 17px; }
.btn-cedar { background: var(--cedar); color: #fff; } .btn-cedar:hover { background: var(--cedar-dark); }
.btn-forest { background: var(--forest); color: #fff; } .btn-forest:hover { background: var(--forest-2); }
.btn-ghost { background: rgba(0, 0, 0, .12); color: #fff; border-color: rgba(255, 255, 255, .85); } .btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.btn-call { background: var(--cedar); color: #fff; }
.btn-text { background: var(--forest); color: #fff; }
.btn-wa { background: #1f7a49; color: #fff; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.cta-stack { flex-direction: column; } .cta-stack .btn { width: 100%; }
.cta-center { justify-content: center; }

/* hero */
.hero2 { position: relative; min-height: clamp(520px, 78vh, 820px); display: flex; align-items: center; overflow: hidden; background: var(--forest); }
.hero2 picture, .hero2-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero2-img { object-fit: cover; object-position: 50% 55%; }
.hero2::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(14, 28, 20, .78) 0%, rgba(14, 28, 20, .5) 38%, rgba(14, 28, 20, .08) 70%, rgba(14, 28, 20, 0) 100%),
  linear-gradient(0deg, rgba(14, 28, 20, .35), rgba(14, 28, 20, 0) 40%); }
.hero2-in { position: relative; z-index: 1; width: 100%; padding-top: 60px; padding-bottom: 110px; color: #fff; }
.hero2 h1 { color: #fff; font: 400 clamp(46px, 8vw, 96px)/1 var(--serif); letter-spacing: -.015em; max-width: 8em; margin: 0 0 18px; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.hero2-sub { font: 400 clamp(19px, 2.2vw, 24px)/1.4 var(--sans); max-width: 30em; color: #f2ede4; margin: 0 0 28px; }
.hero2-btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 759px) {
  .hero2 { min-height: 0; align-items: flex-end; }
  .hero2-img { object-position: 66% 60%; }
  .hero2::after { background: linear-gradient(0deg, rgba(14, 28, 20, .86) 0%, rgba(14, 28, 20, .55) 55%, rgba(14, 28, 20, .2) 100%); }
  .hero2-in { padding-top: 180px; padding-bottom: 92px; }
  .hero2-btns .btn { flex: 1 1 100%; }
}

/* availability finder */
.finder-wrap { position: relative; z-index: 2; margin-top: -64px; }
.finder { display: grid; grid-template-columns: 1fr; gap: 10px; background: var(--card); border-radius: 16px; box-shadow: 0 18px 44px rgba(20, 35, 27, .16); padding: 14px; }
.f-field { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); cursor: pointer; }
.f-field svg { width: 22px; height: 22px; fill: var(--forest); flex: none; }
.f-field span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.f-field b { font: 600 13px var(--sans); color: var(--ink); }
.f-field input, .f-field select { border: 0; background: transparent; font: 500 16px var(--sans); color: var(--text); padding: 2px 0; width: 100%; min-width: 0; outline: none; }
.f-field:focus-within { border-color: var(--cedar); box-shadow: 0 0 0 3px var(--cedar-soft); }
.f-go { min-height: 56px; }
@media (min-width: 560px) { .finder { grid-template-columns: 1fr 1fr; } .f-go { grid-column: 1 / -1; } }
@media (min-width: 960px) { .finder { grid-template-columns: 1fr 1fr 1fr auto; padding: 16px; } .f-go { grid-column: auto; padding: 0 30px; } .f-field { border-color: transparent; border-right-color: var(--line); border-radius: 0; background: transparent; } }
.finder-out:empty { display: none; }
.finder-out { margin-top: 14px; display: grid; gap: 12px; }
.fo-msg { background: var(--card); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.fo-card { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; background: var(--card); border-radius: 12px; padding: 10px; box-shadow: var(--shadow); }
.fo-card img { width: 110px; height: 80px; object-fit: cover; border-radius: 8px; }
.fo-card h3 { font-size: 22px; } .fo-card p { margin: 2px 0 8px; }
.fo-ok { color: var(--open-ink); font-weight: 600; } .fo-no { color: #9a4a2a; font-weight: 600; }
.fo-card .cta { margin: 0; gap: 8px; } .fo-card .btn { min-height: 40px; padding: 7px 14px; font-size: 15px; }
@media (min-width: 760px) { .finder-out { grid-template-columns: 1fr 1fr; } .fo-msg { grid-column: 1 / -1; } }
.finder-note { text-align: center; font-size: 15px; color: var(--muted); margin: 14px 0 0; text-wrap: balance; }

/* intro */
.intro { display: grid; gap: 28px; padding-top: 64px; padding-bottom: 40px; align-items: center; }
.intro-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (min-width: 900px) { .intro { grid-template-columns: 1fr 1.25fr; gap: 56px; padding-top: 84px; } }

/* section headings */
.sec-head { margin-bottom: 30px; max-width: 760px; }
.sec-head .h2 { margin-bottom: 10px; }
.sec-sub { color: var(--muted); font-size: 18px; max-width: 34em; margin: 0; }
.sec-head.split { max-width: none; display: grid; gap: 10px; align-items: end; }
@media (min-width: 900px) { .sec-head.split { grid-template-columns: 1fr minmax(260px, 380px); gap: 48px; } }

/* cabin cards */
.cabins { background: var(--ivory-2); padding: 64px 0; margin-top: 30px; }
.cards { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-kicker { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .16em; color: var(--cedar); margin: 0; }
.card-body h3 { font-size: 30px; } .card-body h3 a { color: var(--ink); text-decoration: none; }
.card-facts { margin: 0; color: var(--ink); font-weight: 500; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 2px 0 4px; }
.chips li { background: var(--ivory); border: 1px solid var(--line); color: var(--forest); border-radius: 30px; padding: 4px 12px; font: 500 14px var(--sans); }
.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.price { font: 400 30px var(--serif); color: var(--ink); margin: 0; } .price span { font: 400 16px var(--sans); color: var(--muted); }
.rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 500 15px var(--sans); color: var(--text); text-decoration: none; }
.rating svg { width: 17px; height: 17px; fill: var(--star); } .rating b { color: var(--ink); }
.rating .fav { color: var(--forest); font-weight: 600; } a.rating:hover { color: var(--ink); text-decoration: underline; }

/* swipeable photos (cabin cards): swipe on phones, arrows and a slow autoplay under the mouse on computers */
.car { position: relative; background: var(--ivory-2); }
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.car-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; position: relative; aspect-ratio: 3 / 2; cursor: pointer; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 100px); padding: 5px 12px; border-radius: 20px; background: rgba(20, 32, 25, .78); color: #fff; font: 600 14px/1.3 var(--sans); }
.slide:first-child figcaption { display: none; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 253, 248, .92); color: var(--ink); font: 400 26px/1 var(--sans); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .2s ease; }
.car-btn.prev { left: 10px; } .car-btn.next { right: 10px; }
.car:hover .car-btn, .car-btn:focus-visible { opacity: 1; }
.car-dots { position: absolute; right: 12px; bottom: 16px; display: flex; gap: 6px; pointer-events: none; }
.car-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 3px rgba(0, 0, 0, .45); transition: background .2s, transform .2s; }
.car-dots i.on { background: #fff; transform: scale(1.25); }
@media (hover: none) { .car-btn { display: none; } }

/* experiences */
.experiences { padding-top: 72px; padding-bottom: 40px; }
.exp-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .exp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .exp-grid { grid-template-columns: repeat(3, 1fr); } }
.exp { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.exp-img { overflow: hidden; } .exp-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.exp-body { padding: 18px 20px 20px; } .exp-body h3 { margin-bottom: 6px; } .exp-body p { margin: 0; color: var(--text); }
.adventures { margin-top: 28px; display: grid; gap: 0; background: var(--forest); color: #e9e3d6; border-radius: var(--radius); overflow: hidden; }
.adv-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .adv-imgs img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.adv-body { padding: 26px 26px 28px; } .adv-body h3 { color: #fff; font-size: clamp(26px, 3vw, 34px); margin-bottom: 10px; }
.adv-body .eyebrow { color: #e2b993; } .adv-body p { color: #e9e3d6; }
@media (min-width: 900px) { .adventures { grid-template-columns: 1.2fr 1fr; align-items: center; } .adv-imgs { height: 100%; } .adv-body { padding: 36px 40px; } }

/* four seasons */
.seasons { background: var(--forest); color: #e8e1d3; padding: 64px 0; margin-top: 56px; }
.seasons .h2 { color: #fff; } @media (min-width: 900px) { .seasons-head .h2 { font-size: 40px; } } .seasons-head p { color: #d8d1c2; margin: 10px 0 0; font-size: 18px; }
.seasons-in { display: grid; gap: 36px; }
.season-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px 18px; grid-template-columns: repeat(2, 1fr); }
.season { text-align: center; }
.s-img { width: min(150px, 34vw); aspect-ratio: 1; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.s-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.season h3 { color: #fff; font-size: 26px; margin-bottom: 4px; } .season p { color: #d8d1c2; margin: 0; font-size: 16px; }
@media (min-width: 900px) { .seasons-in { grid-template-columns: minmax(260px, 340px) 1fr; align-items: center; gap: 48px; }
  .seasons-head { border-right: 1px solid rgba(255, 255, 255, .2); padding-right: 40px; } .season-list { grid-template-columns: repeat(4, 1fr); } }

/* gallery */
.gallery-home { padding-top: 72px; padding-bottom: 40px; }
.g-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .g-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } .g-grid a:nth-child(1), .g-grid a:nth-child(8) { grid-column: span 2; grid-row: span 2; } }
.g-grid a { display: block; overflow: hidden; border-radius: 10px; } .g-grid img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (max-width: 759px) { .g-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .g-grid::-webkit-scrollbar { display: none; } .g-grid a { flex: 0 0 82%; scroll-snap-align: center; } }
.vids { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin-top: 22px; max-width: 640px; margin-left: auto; margin-right: auto; }
.vid { margin: 0; } .vid video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: #111; }
.vid figcaption { font: 600 14px/1.25 var(--sans); color: var(--ink); margin-top: 8px; text-align: center; }
.g-more { text-align: center; color: var(--muted); margin-top: 18px; }

/* reviews */
.reviews { background: var(--ivory-2); padding: 64px 0; margin-top: 40px; }
.rbadges { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.rbadge { background: var(--card); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.rb-name { font: 400 20px var(--serif); color: var(--ink); }
.rb-line { margin-bottom: 18px; }
.review-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review { margin: 0; background: var(--card); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); }
.review blockquote { margin: 8px 0 12px; color: var(--ink); } .review figcaption { font-size: 14px; color: var(--muted); }
.stars { color: var(--star); letter-spacing: 2px; font-size: 18px; } .rtitle { font: 400 21px var(--serif); color: var(--ink); }

/* FAQs */
.faqs { padding-top: 72px; padding-bottom: 56px; }
.faq-list { display: grid; gap: 10px; }
@media (min-width: 900px) { .faq-list { display: block; columns: 2; column-gap: 20px; } .faq-list .faq { break-inside: avoid; margin-bottom: 12px; } }
.faq { background: var(--card); border-radius: 12px; box-shadow: 0 2px 10px rgba(31, 45, 36, .06); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font: 600 17px/1.35 var(--sans); color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--sans); color: var(--cedar); transition: transform .2s; }
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { padding: 0 18px 14px; } .faq-a p:last-child { margin-bottom: 0; }

/* closing */
.closing { position: relative; overflow: hidden; padding: 84px 0 76px; text-align: center; }
.closing-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.7); }
.closing::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ivory) 0%, rgba(247, 242, 232, .55) 45%, rgba(247, 242, 232, .7) 100%); z-index: 1; }
.closing-in { position: relative; z-index: 2; } .closing .eyebrow { justify-content: center; } .closing .eyebrow::before { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .7; }
.closing .h2 { margin-bottom: 22px; } .closing-btns { margin-bottom: 4px; }

/* lists */
.ticks { list-style: none; padding: 0; margin: 0; } .ticks li { padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid var(--line); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 8px; height: 8px; background: var(--cedar); border-radius: 50%; }

/* cabin page */
.cabin-top { padding-top: 28px; padding-bottom: 16px; } .cabin-top .h1 { margin: 0 0 6px; } .crumbs { margin: 0 0 10px; } .crumbs a { color: var(--muted); text-decoration: none; }
.loc { margin: 0 0 8px; color: var(--muted); }
.mosaic { position: relative; display: grid; gap: 8px; grid-template-columns: 1fr; border-radius: var(--radius); overflow: hidden; }
.mosaic a { display: block; overflow: hidden; } .mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.mosaic .m1, .mosaic .m2, .mosaic .m3, .mosaic .m4 { display: none; }
@media (min-width: 760px) { .mosaic { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 480px; }
  .mosaic .m0 { grid-row: 1 / 3; } .mosaic .m1, .mosaic .m2, .mosaic .m3, .mosaic .m4 { display: block; } .mosaic img { aspect-ratio: auto; } }
.mosaic .all { position: absolute; right: 14px; bottom: 14px; background: var(--card); color: var(--ink); font: 600 14px var(--sans); padding: 9px 16px; text-decoration: none; border-radius: 30px; box-shadow: var(--shadow); }
.mosaic.none .noimg { aspect-ratio: 16 / 7; }
.noimg { display: grid; place-items: center; background: var(--ivory-2); color: var(--muted); }
/* phone order: key facts, then open dates and contact, then the full description */
.cabin-main { display: grid; gap: 24px 48px; grid-template-columns: 1fr; grid-template-areas: "top" "box" "rest"; padding-top: 30px; padding-bottom: 40px; }
.ci-top { grid-area: top; } .ci-rest { grid-area: rest; } .book-box { grid-area: box; }
.ci-rest .h3 { margin: 24px 0 8px; } .ci-rest .h3:first-child { margin-top: 0; }
@media (min-width: 960px) { .cabin-main { grid-template-columns: 1.4fr 1fr; grid-template-areas: "top box" "rest box"; }
  .book-box { position: sticky; top: 96px; align-self: start; } }
.price.big { font-size: 38px; margin: 0; } .sleeps { margin: 2px 0 16px; font: 600 18px var(--sans); color: var(--ink); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0 0 16px; border-top: 1px solid var(--line); }
@media (min-width: 560px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts div { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); } .facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .facts dd { margin: 0; font: 600 16px var(--sans); color: var(--ink); }
.book-box { background: var(--card); border-radius: 16px; box-shadow: var(--shadow-up); padding: 22px 20px 10px; }
.book-box h2 { margin: 0 0 12px; font: 400 30px var(--serif); }
.gallery .grid { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .gallery .grid { grid-template-columns: repeat(4, 1fr); } }
.gallery .grid a { display: block; overflow: hidden; border-radius: 8px; }
.gallery .grid img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ivory-2); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.gallery { padding-bottom: 20px; } .gallery .h3 { margin-bottom: 14px; }
.others { padding-top: 30px; padding-bottom: 50px; } .others ul { padding-left: 20px; }

/* availability calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head button { background: var(--ivory-2); border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; color: var(--ink); }
.cal-head button:disabled { opacity: .35; cursor: default; }
.cal-title { font: 600 18px var(--sans); color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; padding: 2px 0; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; font: 500 15px var(--sans); border: 0; border-radius: 8px; }
.cal-day.open { background: var(--open); color: var(--open-ink); cursor: pointer; } .cal-day.open:hover { outline: 2px solid var(--open-ink); }
.cal-day.booked { background: var(--booked); color: var(--booked-ink); text-decoration: line-through; }
.cal-day.past { color: #c9c2b6; background: transparent; }
.cal-msg { background: var(--ivory-2); padding: 12px; font-size: 14px; border-radius: 10px; }
.cal-key { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.cal-key span { width: 14px; height: 14px; display: inline-block; border-radius: 4px; } .k-open { background: var(--open); } .k-booked { background: var(--booked); margin-left: 10px; }

/* footer + phone booking bar */
.site-footer { background: var(--forest-2); color: #d7d0c2; padding: 52px 0 24px; } .site-footer h2 { color: #fff; font: 400 28px var(--serif); margin-bottom: 10px; }
.site-footer a { color: #fff; } .foot-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1fr 1.6fr .8fr; } }
.foot-links { display: flex; flex-direction: column; gap: 8px; } .foot-links a { color: #d7d0c2; text-decoration: none; } .foot-links a:hover { color: #fff; }
.cert { font: 500 14px var(--sans); color: #d7d0c2; margin-top: 16px; } .copy { text-align: center; font-size: 13px; color: #9b9586; margin: 34px 0 0; }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto repeat(3, 1fr); align-items: stretch; background: var(--forest-2); z-index: 50; box-shadow: 0 -4px 16px rgba(0, 0, 0, .2); padding-bottom: env(safe-area-inset-bottom); }
.sc-label { display: grid; place-items: center; padding: 0 14px; color: #e2b993; font: 700 13px var(--sans); text-transform: uppercase; letter-spacing: .14em; }
.sticky-cta a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; text-decoration: none; padding: 8px 0 9px; font: 600 13px var(--sans); }
.sticky-cta a:nth-of-type(1) { background: var(--cedar); } .sticky-cta a:nth-of-type(3) { background: #1f7a49; }
.sticky-cta svg { width: 22px; height: 22px; fill: currentColor; }
@media (min-width: 960px) { .sticky-cta { display: none; } body { padding-bottom: 0; } }

/* lightbox */
.lb { position: fixed; inset: 0; background: rgba(12, 18, 14, .95); display: none; align-items: center; justify-content: center; z-index: 100; }
.lb.on { display: flex; } .lb img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.lb button { position: absolute; background: rgba(255, 255, 255, .14); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; cursor: pointer; }
.lb .x { top: 12px; right: 12px; } .lb .prev { left: 8px; top: 50%; } .lb .next { right: 8px; top: 50%; }
.lb .count { position: absolute; bottom: 14px; color: #ccc; font: 500 14px var(--sans); }

/* motion: hover only with a real mouse; scroll reveals only once site.js has run; all off for reduced motion */
.card, .review, .exp, .btn, .cal-day, .rbadge { transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .card:hover, .exp:hover { transform: translateY(-6px); box-shadow: var(--shadow-up); }
  .exp:hover .exp-img img, .g-grid a:hover img, .gallery .grid a:hover img, .mosaic a:hover img, .season:hover .s-img img { transform: scale(1.06); }
  .review:hover, .rbadge:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .16); }
  .btn:active { transform: none; box-shadow: none; }
  .nav a:hover::after { transform: scaleX(1); }
  .cal-day.open:hover { transform: scale(1.1); }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* "backwards", not "both": a finished animation must not pin transform, or hover lifts stop working */
.hero2-in > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.hero2-in > :nth-child(2) { animation-delay: .1s; } .hero2-in > :nth-child(3) { animation-delay: .2s; } .hero2-in > :nth-child(4) { animation-delay: .3s; }
.finder { animation: rise .8s .35s cubic-bezier(.2, .7, .2, 1) backwards; }
.reveal-on .reveal:not(.in) { opacity: 0; }
.reveal-on .reveal.in { animation: rise .75s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal-on .reveal:not(.in) { opacity: 1; }
}
.btn-ghost-dark { background: transparent; color: var(--forest); border-color: var(--forest); } .btn-ghost-dark:hover { background: var(--forest); color: #fff; }

/* luxury tents band under the cabin cards (Arjun, 2026-10-18) */
.tents { margin-top: 26px; display: grid; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.tent-imgs { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; min-height: 260px; }
.tent-imgs a { display: block; overflow: hidden; } .tent-imgs a:first-child { grid-row: 1 / 3; }
.tent-imgs img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tent-body { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 6px; }
.tent-body h3 { font-size: clamp(26px, 3vw, 32px); } .tent-body > p:not(.eyebrow) { margin: 4px 0; }
@media (min-width: 900px) { .tents { grid-template-columns: 1.15fr 1fr; align-items: stretch; } .tent-imgs { min-height: 340px; } .tent-body { padding: 32px 36px; justify-content: center; } }
@media (hover: hover) and (pointer: fine) { .tent-imgs a:hover img { transform: scale(1.06); } }
.tents .card-foot { margin-top: 14px; }
@media (min-width: 900px) { .tent-imgs { height: 360px; min-height: 0; } }

/* ---- date-range calendar, booking options and on-page email form (2026-10-18) ---- */
button.f-field { font: inherit; text-align: left; width: 100%; color: inherit; }
.f-val { font: 500 16px var(--sans); font-style: normal; color: var(--text); padding: 2px 0; }
.rc-pop { margin-top: 10px; background: var(--card); border-radius: 16px; box-shadow: 0 18px 44px rgba(20, 35, 27, .16); padding: 16px; }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.rc-hint { margin: 0; font: 600 15px var(--sans); color: var(--forest); text-align: center; flex: 1; }
.rc-nav { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ivory-2); color: var(--ink); font-size: 22px; cursor: pointer; flex: none; }
.rc-nav:disabled { opacity: .35; cursor: default; }
.rc-months { display: grid; gap: 26px; grid-template-columns: 1fr; }
.rc-pop .rc-months { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rc-title { text-align: center; font: 600 16px var(--sans); color: var(--ink); margin: 4px 0 8px; }
.rc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 0; }
.rc-dow { text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; padding: 2px 0 4px; }
.rc-day { aspect-ratio: 1; min-height: 38px; display: grid; place-items: center; font: 500 15px var(--sans); border: 0; background: transparent; color: var(--ink); border-radius: 8px; }
button.rc-day { cursor: pointer; } button.rc-day:hover { outline: 2px solid var(--forest); outline-offset: -2px; }
.rc-day.open { background: var(--open); color: var(--open-ink); }
.rc-day.booked { background: var(--booked); color: var(--booked-ink); text-decoration: line-through; }
.rc-day.booked.can-end { text-decoration: none; background: var(--open); color: var(--open-ink); opacity: .85; }
.rc-day.past { color: #c9c2b6; }
.rc-day.in { background: #cfe3d2; color: var(--forest-2); border-radius: 0; }
.rc-day.start, .rc-day.end { background: var(--forest); color: #fff; font-weight: 700; }
.rc-day.start { border-radius: 8px 0 0 8px; } .rc-day.end { border-radius: 0 8px 8px 0; }
.rc-day.start:last-child, .rc-day.start.end { border-radius: 8px; }
.rc-clear { margin-top: 10px; background: none; border: 0; color: var(--cedar-dark); font: 600 14px var(--sans); text-decoration: underline; cursor: pointer; padding: 4px 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--cedar-dark); font: inherit; text-decoration: underline; cursor: pointer; }
.cal-out:empty { display: none; }
.cal-out { margin: 12px 0 6px; padding: 14px; background: var(--ivory); border-radius: 12px; }
.cal-sum { margin: 0 0 8px; color: var(--ink); }
.cal-guests { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.cal-guests select { font: 500 16px var(--sans); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.send { margin: 12px 0 4px; } .send .btn { flex: 1 1 auto; min-width: 110px; }
.send-alt { margin: 4px 0 0; }
.direct { margin: 10px 0; } .direct summary { cursor: pointer; font-weight: 600; color: var(--forest); padding: 6px 0; }
.em-dlg { border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); background: var(--card); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.em-dlg::backdrop { background: rgba(14, 24, 18, .55); }
.em-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 4px; }
.em-head h2 { font: 400 28px var(--serif); }
.em-x { border: 0; background: var(--ivory-2); width: 38px; height: 38px; border-radius: 50%; font-size: 24px; cursor: pointer; color: var(--ink); }
.em-sum { margin: 0 20px 10px; color: var(--forest); font-weight: 600; }
.em-form, .em-status { padding: 0 20px 18px; }
.em-form { display: grid; gap: 12px; }
.em-form label { display: grid; gap: 4px; font: 600 14px var(--sans); color: var(--ink); }
.em-form .opt { font-weight: 400; color: var(--muted); }
.em-form input, .em-form textarea { font: 400 16px var(--sans); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.em-form input:focus, .em-form textarea:focus { outline: 0; border-color: var(--cedar); box-shadow: 0 0 0 3px var(--cedar-soft); }
.em-form .small { margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.em-ok { color: var(--open-ink); } .em-warn { color: #8a4a1c; font-weight: 600; }
.em-status .btn { margin: 4px 6px 4px 0; }
.fo-card .send .btn { min-width: 0; }
/* narrow phones: let the seven day columns shrink instead of pushing the page sideways */
.rc-day { min-width: 0; padding: 0; }
@media (max-width: 380px) { .rc-day { min-height: 0; font-size: 14px; } .book-box { padding: 18px 12px 8px; } .rc-pop { padding: 12px 8px; } }

/* the email form hides itself after a successful send; [hidden] must beat display: grid */
.em-form[hidden] { display: none; }

/* Email button beside Call / Text / WhatsApp (2026-10-18): lake blue, so the four read as distinct choices */
.btn-email { background: #2f5d7c; color: #fff; } .btn-email:hover { background: #244a63; }
.sticky-cta { grid-template-columns: auto repeat(4, 1fr); }
.sticky-cta button { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; background: #2f5d7c; border: 0;
  padding: 8px 0 9px; font: 600 13px var(--sans); cursor: pointer; }
.sticky-cta button svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 380px) { .sc-label { padding: 0 8px; font-size: 11px; letter-spacing: .08em; } .sticky-cta a, .sticky-cta button { font-size: 12px; } }
/* smallest phones: keep the wordmark and the Book button on one line each */
@media (max-width: 360px) { .head-in { gap: 10px; } .wordmark b { font-size: 18px; white-space: nowrap; } .wordmark small { letter-spacing: .38em; } .wordmark svg { width: 26px; height: 26px; } .head-book { white-space: nowrap; padding: 8px 10px; font-size: 13px; min-height: 38px; } }