/* White is the site canvas on every route. Photos remain images, not page backgrounds. */
html, body, :root, #app, main, .site-chrome, .site-header, .announcement,
.page-intro, .collection-wrap, .collection-page, .section, .property-hero,
.property-detail, .inquiry-page, .location-section, .host-section, .experience-band,
.inquiry-band, .detail-quote, .site-footer, .form-shell, .availability-note,
.location-card, .fact, .card-image, .commitment-pills span, .inquiry-direct-contact a,
.email-handoff-note, .form-success, .primary-nav, .primary-nav.is-open {
  background-color: #fff !important;
}
:root, body { background: #fff !important; }
.announcement { background: #fff !important; }

/* A split editorial hero: white text panel and the original pool photo as a separate image. */
.hero {
  min-height: min(700px, calc(100vh - 130px));
  padding: 58px 6vw 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(35px, 5vw, 82px);
  overflow: hidden;
  color: var(--navy);
  background: #fff !important;
  isolation: isolate;
}
.hero::before, .hero::after { display: none !important; }
.hero-content { grid-column: 1; grid-row: 1; width: auto; }
.hero .eyebrow { color: var(--navy); }
.hero h1 { color: var(--navy); font-size: clamp(58px, 7.6vw, 106px); }
.hero h1 em { color: #4f98ad; }
.hero-copy { color: #59686e; }
.hero .button-primary { color: #fff; background: var(--navy); }
.hero .button-ghost { color: var(--navy); border-color: rgba(31,52,65,.32); background: #fff; }
.hero .button-ghost:hover { background: #f5f7f8; }
.hero-photo {
  position: relative;
  z-index: 0;
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: 100%;
  height: clamp(380px, 43vw, 570px);
  object-fit: cover;
}
.hero-side-note {
  z-index: 1;
  top: auto;
  right: 6vw;
  bottom: 112px;
  color: var(--navy);
  border: 1px solid rgba(31,52,65,.22);
  background: rgba(255,255,255,.94);
  backdrop-filter: none;
}
.hero-side-note span { color: #59686e; }
.hero-meta { left: 6vw; right: auto; bottom: 30px; color: #59686e; }
.hero-meta .meta-line { background: #4f98ad; }
.hero-meta { position: absolute; }

/* Blue remains an accent in type, rules and small controls, never a filled section. */
.announcement, .location-card, .inquiry-band, .availability-note,
.email-handoff-note, .form-success, .inquiry-direct-contact a,
.experience-image::after, .hero-side-note, .footer-contact > a {
  background-color: #fff !important;
}
.location-card { color: var(--navy); }
.location-card h3, .location-card .eyebrow { color: var(--navy); }
.location-card p { color: #59686e; }
.location-card::before { border-color: rgba(31,52,65,.12); box-shadow: 0 0 0 38px rgba(31,52,65,.025), 0 0 0 76px rgba(31,52,65,.02); }
.location-card::after { border-color: #4f98ad; }
.inquiry-band, .inquiry-band h2 { color: var(--navy); }
.inquiry-band .button { color: #fff; background: var(--navy); }
.email-handoff-note { border: 1px solid #d9e2e5; border-left: 3px solid #4f98ad; }
.form-success { border: 1px solid #d9e2e5; }
.inquiry-direct-contact a { border: 1px solid #d9e2e5; border-left: 3px solid #4f98ad; }
.inquiry-direct-contact a span { color: #42535a; }
.experience-image::after { border: 1px solid #d9e2e5; }

/* White footer with dark, high-contrast text and outlined contact buttons. */
.site-footer {
  color: #43535a;
  background: #fff !important;
  border-top: 1px solid #dfe5e7;
}
.brand-light { color: var(--navy); }
.brand-light .brand-mark { background: var(--navy); }
.brand-light .brand-copy small { color: #59686e; }
.footer-top p { color: var(--navy); }
.footer-arrow { color: #4f98ad; border-color: rgba(31,52,65,.24); }
.footer-contact > a {
  color: var(--navy);
  border-color: rgba(31,52,65,.22);
}
.footer-contact > a:hover { border-color: #4f98ad; background: #fff !important; }
.footer-contact > a small { color: #42535a; }
.footer-contact > a strong { color: var(--navy); }
.footer-bottom { border-top-color: rgba(31,52,65,.16); }
.footer-bottom a { color: #246e82; }

@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: 48px; padding-bottom: 72px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; }
  .hero h1 { font-size: clamp(50px, 7.7vw, 72px); }
  .hero-photo { height: 390px; }
  .hero-side-note { right: 6vw; bottom: 92px; }
}
@media (max-width: 640px) {
  .hero { display: flex; min-height: 0; flex-direction: column; align-items: stretch; gap: 30px; padding: 45px 5vw 70px; background: #fff !important; }
  .hero-content { width: 100%; }
  .hero h1 { font-size: clamp(55px, 14vw, 74px); }
  .hero-photo { width: 100%; height: 270px; }
  .hero-side-note { top: auto; right: 7vw; bottom: 102px; width: 144px; padding: 12px; }
  .hero-meta { display: none; }
}


/* The three property hero photos share one top edge and the same dimensions. */
.property-hero-grid { align-items: start; }
.property-hero-media { height: 480px; min-height: 0; align-self: start; }
.property-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.gallery-strip { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: start; }
.gallery-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) {
  .property-hero-grid { grid-template-columns: minmax(0,1fr); gap: 32px; align-items: start; }
  .property-hero-media { order: -1; height: 410px; }
}
@media (max-width: 640px) {
  .property-hero-media { height: 330px; }
}


/* Gentle neighborhood-card starlight: a quiet twinkle, never a flashing effect. */
.location-card { isolation: isolate; }
.magic-sparkles { position: absolute !important; z-index: 2 !important; inset: 0; pointer-events: none; }
.magic-sparkles span {
  position: absolute;
  display: block;
  color: #b18a45;
  font-family: Georgia, serif;
  line-height: 1;
  opacity: 0;
  animation: magic-twinkle 3.8s ease-in-out infinite;
  will-change: transform, opacity;
}
.magic-sparkles span:nth-child(1) { top: 16%; right: 14%; font-size: 18px; }
.magic-sparkles span:nth-child(2) { top: 44%; right: 9%; font-size: 15px; animation-delay: .9s; }
.magic-sparkles span:nth-child(3) { top: 72%; right: 14%; font-size: 13px; animation-delay: 1.8s; }
.magic-sparkles span:nth-child(4) { top: 24%; right: 34%; font-size: 11px; animation-delay: 2.6s; }
@keyframes magic-twinkle {
  0%, 100% { opacity: .12; transform: translateY(2px) scale(.72) rotate(-10deg); }
  50% { opacity: .86; transform: translateY(-5px) scale(1.12) rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .magic-sparkles span { opacity: .55; animation: none; will-change: auto; }
}


/* Listing cards are a calm, equal three-up set—not an editorial stagger. */
.stay-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.stay-card:nth-child(1), .stay-card:nth-child(2), .stay-card:nth-child(3),
.collection-page .stay-card:nth-child(1), .collection-page .stay-card:nth-child(2), .collection-page .stay-card:nth-child(3) {
  grid-column: auto;
  width: auto;
  margin-top: 0;
}
.card-image, .stay-card:nth-child(2) .card-image, .stay-card:nth-child(3) .card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.card-body p { color: #42535a; }
.card-footer span { color: #59686e; }
@media (max-width: 640px) {
  .stay-grid { display: flex; flex-direction: column; gap: 42px; }
  .stay-card, .stay-card:nth-child(1), .stay-card:nth-child(2), .stay-card:nth-child(3),
  .collection-page .stay-card:nth-child(1), .collection-page .stay-card:nth-child(2), .collection-page .stay-card:nth-child(3) {
    width: 100%;
    margin-top: 0;
  }
}


/* Keep the experience story fully readable on the white canvas, even over cached base styles. */
.experience-band { color: var(--navy); background-color: #fff !important; }
.experience-copy .section-kicker { color: #246e82; }
.experience-copy h2 { color: var(--navy); }
.experience-copy h2 em { color: #246e82; }
.experience-copy p { color: #42535a; }
.experience-list li { color: #42535a; border-color: rgba(31, 52, 65, .16); }
.experience-list li:last-child { border-color: rgba(31, 52, 65, .16); }
.experience-list b { color: #246e82; }
.experience-band .button-ghost { color: var(--navy); border-color: rgba(31, 52, 65, .35); background: #fff; }