:root {
  --pine:#1e3a2f; --sage:#4a7c59; --mist:#a8c5b0; --water:#3d7a8a;
  --sand:#f4ede0; --bark:#5c3d2e; --cream:#fdf8f2;
  --gold:#c9a84c; --charcoal:#2d2d2d;
  --nav-h: 56px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Jost',sans-serif;
  background:var(--cream);
  color:var(--charcoal);
  font-weight:300;
  line-height:1.75;
  font-size:16px;
  padding-top: var(--nav-h);
}

/* ── STICKY NAV ───────────────────────────────────────── */
.sticky-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  background: rgba(30,58,47,0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  border-bottom: 1px solid rgba(168,197,176,0.2);
}
.snav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .35rem .25rem;
  text-decoration: none;
  color: rgba(168,197,176,0.6);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color .2s, border-color .2s;
  border-bottom: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
  gap: .15rem;
}
.snav-icon { width: 1.15rem; height: 1.15rem; display: block; flex-shrink: 0; }
.snav-brand {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 0 .15rem;
  border-bottom: 2px solid transparent;
  user-select: none;
}
.snav-item.active {
  color: var(--sand);
  border-bottom-color: var(--gold);
}
.snav-item:active { opacity: .7; }

/* ── HERO ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--hero-gradient);
  padding: 3rem 1.5rem 5rem;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 60% at 50% 80%,rgba(61,122,138,.4) 0%,transparent 70%);
}
.mountains { position:absolute; bottom:0; left:0; right:0; height:110px; }
.hero-content { position:relative; z-index:2; max-width:480px; }
.hero-eyebrow {
  font-weight:500; font-size:.7rem; letter-spacing:.35em;
  text-transform:uppercase; color:var(--mist); margin-bottom:.9rem;
}
.hero h1 {
  font-family:'Playfair Display',serif;
  font-size: clamp(2rem,8vw,3.8rem);
  font-weight:400; color:var(--sand); line-height:1.1; margin-bottom:.25rem;
}
.hero h1 em { font-style:italic; color:var(--mist); }
.hero-divider { width:36px; height:1px; background:var(--gold); margin:.9rem auto; }
.hero-address { font-size:.78rem; letter-spacing:.08em; color:rgba(244,237,224,.6); margin-bottom:.5rem; }

/* ── STAT BAND ────────────────────────────────────────── */
.stat-band { background:var(--pine); padding:1.75rem 1.5rem; }
.stat-band .inner {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem; max-width:600px; margin:0 auto; text-align:center;
}
.stat-block .num {
  font-family:'Playfair Display',serif; font-size:1.7rem;
  color:var(--mist); display:block; line-height:1;
}
.stat-block .lbl {
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,237,224,.5); margin-top:.25rem; display:block;
}

/* ── SHARED SECTION CHROME ────────────────────────────── */
section { padding:2.75rem 1.25rem; }
.container { max-width:700px; margin:0 auto; }

.section-header { text-align:center; margin-bottom:2rem; }
.section-tag {
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sage); font-weight:500; display:block; margin-bottom:.5rem;
}
.section-header h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,5vw,2.1rem); font-weight:400; color:var(--pine); margin-bottom:.6rem;
}
.section-header p { color:#666; font-size:.9rem; max-width:460px; margin:0 auto; }
.rule { width:28px; height:2px; background:var(--gold); margin:.9rem auto 0; }
.section-alt { background:#f7f3ee; }

/* ── PROPERTY SECTION ─────────────────────────────────── */
.property-section { background:#fff; }

.wifi-box {
  background:var(--pine); border-radius:8px;
  padding:1.25rem 1.5rem; margin-bottom:1.5rem;
  display:flex; align-items:flex-start; gap:1.25rem;
}
.wifi-icon { flex-shrink:0; color:var(--mist); display:flex; padding-top:.2rem; }
.wifi-info { flex:1; min-width:0; }
.wifi-row { overflow-x:auto; line-height:1.6; display:flex; align-items:center; gap:.6rem; }
.wifi-row-value { font-size:1.25rem; font-weight:600; white-space:nowrap; color:var(--sand); }
.copy-btn {
  flex-shrink:0;
  background:none; border:1px solid rgba(168,197,176,.35); border-radius:4px;
  color:var(--mist); cursor:pointer; font-family:inherit;
  font-size:.7rem; letter-spacing:.08em; padding:.2rem .6rem;
  transition:background .15s,border-color .15s,color .15s;
}
.copy-btn.copied { background:var(--gold); border-color:var(--gold); color:#fff; }

.checkinout { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.time-box { background:var(--sand); border-radius:6px; padding:.9rem 1rem; text-align:center; }
.time-label { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); display:block; margin-bottom:.25rem; }
.time-value { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--pine); }

.prop-block { margin-bottom:1.5rem; }
.prop-block h4 {
  font-family:'Playfair Display',serif; font-size:.95rem; font-weight:400;
  color:var(--pine); margin-bottom:.5rem;
  display:flex; align-items:center; gap:.45rem;
}
.prop-block h4::before {
  content:''; display:inline-block; width:3px; height:1em;
  background:var(--sage); border-radius:2px; flex-shrink:0;
}
.prop-block p, .prop-block li { font-size:.92rem; color:#555; line-height:1.75; }
.prop-block ul { padding-left:1.2rem; }
.prop-block li { margin-bottom:.2rem; }

/* ── NEARBY AMENITIES ────────────────────────────────── */
.amenity-list { display:flex; flex-direction:column; gap:.4rem; }
.amenity-row {
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem .9rem;
  background:#fafaf8; border:1px solid #ece8e1; border-radius:6px;
}
.amenity-icon { font-size:1.1rem; flex-shrink:0; }
.amenity-info { flex:1; min-width:0; }
.amenity-category {
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage); display:block; line-height:1.3;
}
.amenity-name { font-size:.84rem; font-weight:500; color:var(--pine); display:block; }
.amenity-address { font-size:.72rem; color:#888; display:block; margin-top:.1rem; }
.amenity-right { display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; flex-shrink:0; }
.amenity-dist { font-size:.68rem; color:#888; white-space:nowrap; }
.amenity-links { display:flex; gap:.3rem; }
.amenity-map-link {
  font-size:.62rem; font-weight:500; padding:.22rem .55rem;
  border-radius:50px; text-decoration:none;
  border:1.5px solid #aaa; color:#555;
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
.amenity-map-link:active { background:#555; color:#fff; border-color:#555; }

.appliance-list { display:flex; flex-direction:column; gap:.4rem; }
.appliance { border:1px solid #ece8e1; border-radius:6px; overflow:hidden; }
.appliance summary {
  padding:.75rem 1rem; cursor:pointer; font-weight:500;
  font-size:.88rem; color:var(--pine); background:#fafaf8;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
  -webkit-tap-highlight-color:transparent;
}
.appliance summary::-webkit-details-marker { display:none; }
.appliance summary::after { content:'›'; font-size:1.2rem; color:var(--sage); transition:transform .2s; }
.appliance[open] summary::after { transform:rotate(90deg); }
.appliance-body { padding:.7rem 1rem .9rem; font-size:.86rem; color:#555; line-height:1.65; border-top:1px solid #ece8e1; }

.contacts-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.contact-item { background:var(--sand); border-radius:6px; padding:.85rem 1rem; }
.contact-role { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage); display:block; margin-bottom:.15rem; }
.contact-name { font-size:.88rem; font-weight:500; color:var(--pine); }
.contact-value { font-size:.86rem; color:#555; }
.contact-item a { color:var(--water); text-decoration:none; }

/* ── CARDS ────────────────────────────────────────────── */
.card-stack { display:flex; flex-direction:column; gap:1.1rem; }

.card { background:#fff; border-radius:6px; border:1px solid #ece8e1; overflow:hidden; }
.card-accent { height:3px; }
.card-accent.restaurant { background:linear-gradient(90deg,var(--bark),var(--gold)); }
.card-accent.attraction { background:linear-gradient(90deg,var(--water),var(--sage)); }
.card-accent.winery    { background:linear-gradient(90deg,#6b2d5e,#c9a84c); }

.card-body { padding:1.1rem 1.25rem; }
.card-category { font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--sage); font-weight:500; margin-bottom:.35rem; }
.card h3 {
  font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:400;
  color:var(--pine); margin-bottom:.35rem; line-height:1.3;
}

.card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:.6rem; }
.card-address { font-size:.78rem; color:#999; display:flex; align-items:center; gap:.3rem; }
.card-address svg { width:10px; height:10px; flex-shrink:0; }
.card-distance {
  font-size:.72rem; font-weight:500;
  background:#eef5f0; color:var(--sage);
  padding:.15rem .55rem; border-radius:50px;
  display:inline-flex; align-items:center; gap:.25rem;
  white-space:nowrap;
}

.stars { display:flex; align-items:center; gap:.3rem; margin-bottom:.6rem; }
.stars-icons { color:var(--gold); font-size:.78rem; }
.stars-num { font-size:.76rem; color:#888; }

.card-desc { font-size:.9rem; color:#555; line-height:1.7; margin-bottom:.85rem; }

.badge {
  display:inline-block; padding:.18rem .6rem; border-radius:50px;
  font-size:.62rem; font-weight:500; letter-spacing:.08em; margin-bottom:.85rem;
}
.badge-green { background:#e8f5ee; color:var(--pine); }
.badge-blue  { background:#e3f0f5; color:var(--water); }
.badge-amber { background:#fdf3e0; color:#996600; }

.card-links { display:flex; gap:.45rem; flex-wrap:wrap; }
.card-link {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.38rem .85rem; border-radius:50px; font-size:.7rem;
  font-weight:500; letter-spacing:.04em; text-decoration:none;
  border:1.5px solid; transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.card-link svg { width:10px; height:10px; flex-shrink:0; }
.card-link.website { border-color:var(--sage); color:var(--sage); }
.card-link.website:active { background:var(--sage); color:#fff; }
.card-link.reviews { border-color:var(--gold); color:#8a6e00; }
.card-link.reviews:active { background:var(--gold); color:#fff; }
.card-link.maps { border-color:#aaa; color:#666; }
.card-link.maps:active { background:#555; color:#fff; border-color:#555; }

.card-footer {
  border-top:1px solid #f0ece6; padding:.7rem 1.25rem;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.76rem; color:#888; background:#fafaf8; flex-wrap:wrap; gap:.35rem;
}
.card-footer .hours { display:flex; align-items:center; gap:.3rem; }
.card-footer .hours svg { width:11px; height:11px; }

/* ── COLLAPSIBLE CARDS ───────────────────────────────── */
.card { cursor:pointer; position:relative; }
.card::after {
  content:'›'; position:absolute; top:1.25rem; right:1rem;
  color:#ccc; font-size:1.05rem; line-height:1;
  transition:transform .3s ease; pointer-events:none;
}
.card.open::after { transform:rotate(90deg); }
.card-detail { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.card.open .card-detail { max-height:1400px; }
.card-footer {
  border-top-color:transparent; padding-top:0; padding-bottom:0;
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .35s ease, border-top-color .35s ease;
}
.card.open .card-footer {
  border-top-color:#f0ece6; padding-top:.7rem; padding-bottom:.7rem; max-height:120px;
}

/* ── PHOTO STRIP ─────────────────────────────────────── */
.photo-strip {
  display:flex; gap:.5rem; overflow-x:auto; padding:0;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  background:var(--charcoal);
}
.photo-strip::-webkit-scrollbar { display:none; }
.photo-strip-img {
  flex:0 0 auto; width:72vw; max-width:340px; height:220px;
  object-fit:cover; scroll-snap-align:start; display:block;
}
.photo-strip-img:first-child { width:100vw; max-width:100%; height:260px; }

/* ── WELCOME NOTE ────────────────────────────────────── */
.welcome-note {
  background: var(--sand);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: .88rem;
  color: #555;
  line-height: 1.7;
}
.welcome-note .welcome-sig {
  display: block;
  margin-top: .5rem;
  font-weight: 500;
  color: var(--pine);
  font-size: .82rem;
}

/* ── TIPS ─────────────────────────────────────────────── */
.tips-section { background:var(--sand); }
.tips-stack { display:flex; flex-direction:column; gap:.65rem; margin-top:1.75rem; }
.tip-card {
  background:#fff; padding:1.1rem 1.25rem; border-radius:6px;
  border-left:3px solid var(--sage); display:flex; gap:.9rem; align-items:flex-start;
}
.tip-icon { font-size:1.3rem; flex-shrink:0; margin-top:.1rem; }
.tip-card h4 {
  font-family:'Playfair Display',serif; font-size:.92rem;
  color:var(--pine); margin-bottom:.25rem; font-weight:400;
}
.tip-card p { font-size:.84rem; color:#555; line-height:1.6; }

/* ── FOOTER ───────────────────────────────────────────── */
footer {
  background:var(--pine); color:rgba(255,255,255,.55);
  padding:1.25rem; display:flex; align-items:stretch; gap:1rem;
}
.footer-logo-col {
  flex:0 0 100px;
  display:flex; align-items:center; justify-content:center;
}
.footer-logo {
  width:100%; height:auto; display:block;
  object-fit:contain; opacity:.9; transition:opacity .2s;
}
.footer-logo:hover { opacity:1; }
.footer-text-col {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  font-size:.88rem; line-height:1.65; letter-spacing:.01em;
}
.footer-text-col strong { color:var(--mist); }
.footer-text-col a { color:var(--mist); text-decoration:none; }
.footer-text-col .footer-book {
  display:inline-block; margin-top:.85rem;
  background:var(--gold); color:var(--pine);
  text-decoration:none;
  padding:.55rem 1.5rem; border-radius:50px;
  font-size:.8rem; font-weight:600; letter-spacing:.04em;
  transition:background .2s, transform .1s;
  align-self:flex-start;
}
.footer-text-col .footer-book:hover { background:#d4b060; }
.footer-text-col .footer-book:active { transform:scale(.97); }

/* ── DESKTOP ──────────────────────────────────────────── */
@media (min-width:640px) {
  :root { --nav-h: 52px; }
  .hero { min-height:65vh; padding:4rem 2rem 6rem; }
  .mountains { height:160px; }
  section { padding:4rem 2rem; }
  .card-stack { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
  .tips-stack { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
  .contacts-grid { grid-template-columns:repeat(3,1fr); }
  .card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(30,58,47,.1); }
  .card { transition:transform .25s,box-shadow .25s,max-height .4s; }
}
@media (min-width:900px) {
  .card-stack { grid-template-columns:repeat(3,1fr); }
}