:root {
  --cream: #fbf7ee;
  --paper: #fffdf8;
  --sand: #e6ded1;
  --soft-beige: #f1eadf;
  --ink: #2d2928;
  --muted: #716967;
  --line: #e3d8c3;
}

.site-header {
  background: rgba(255, 253, 248, 0.94);
  border-bottom-color: rgba(198, 155, 74, 0.2);
}

.nav-cta {
  border-color: var(--terracotta);
  background: transparent;
}

.button.primary {
  background: var(--terracotta);
}

.button.secondary {
  border-color: var(--terracotta);
  background: rgba(255, 255, 255, 0.45);
}

.hero-portrait::before {
  background-image: linear-gradient(rgba(234, 247, 243, 0.12), rgba(255, 255, 255, 0.08)), url("resort-water-divider.png");
  background-size: cover;
  background-position: center;
}

.portrait-image-frame {
  position: relative;
  z-index: 2;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 47% 47% 3px 3px;
}

.hero-portrait .portrait-image-frame img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 72%;
  border-radius: 0;
  transform: scale(1.07);
  transform-origin: center 72%;
}

.hero h1 {
  margin-bottom: 42px;
}

.tan-mon-cheri {
  display: block;
  width: min(108%, 680px);
  margin-top: 0.34em;
}

.tan-mon-cheri img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .tan-mon-cheri {
    width: 104%;
    margin-top: 0.3em;
  }
}

.tan-mon-cheri-ready {
  display: block;
  width: min(100%, 650px);
  margin: 0 auto 24px;
}

.tan-mon-cheri-ready img {
  display: block;
  width: 100%;
  height: auto;
}

.promise {
  background: var(--sand);
  color: var(--burgundy);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.beach-divider {
  height: clamp(230px, 31vw, 430px);
  margin: 0;
  overflow: hidden;
}

.beach-divider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.travel-care {
  background: var(--soft-beige);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.care-card {
  color: var(--ink);
}

.care-card h2,
.travel-care .eyebrow.light {
  color: var(--terracotta);
}

.care-card > p:not(.eyebrow) {
  color: var(--muted);
}

.button.gold {
  background: var(--terracotta);
  color: #fffdf8;
}

.path-grid article.featured {
  background: var(--sand);
  color: var(--ink);
  border-color: var(--line);
}

.path-grid .featured h3 {
  color: var(--burgundy);
}

.path-grid .featured p:not(.eyebrow) {
  color: var(--muted);
}

.path-grid .featured .eyebrow.light {
  color: var(--terracotta);
}

footer {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.footer-brand strong {
  color: var(--burgundy);
}

.footer-brand span,
.socials a {
  color: var(--terracotta);
}

.footer-contact a {
  color: var(--ink);
}

.disclaimer {
  color: var(--muted);
  border-top-color: var(--line);
}

.copyright {
  color: #8b817d;
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    gap: 32px;
    padding-top: 50px;
    padding-bottom: 58px;
  }

  .hero-copy {
    max-width: 640px;
  }

  .hero-portrait {
    margin-top: 2px;
  }

  .about {
    gap: 32px;
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .care-card {
    padding-top: 68px;
    padding-bottom: 48px;
  }

  .levels {
    margin-bottom: 58px;
  }
}

@media (max-width: 600px) {
  .site-header {
    padding-inline: 18px;
  }

  .hero {
    gap: 26px;
    padding: 40px 20px 48px;
  }

  .hero .eyebrow {
    margin-bottom: 13px;
  }

  .hero h1 {
    margin-bottom: 34px;
  }

  .tan-mon-cheri {
    width: 100%;
    margin-top: 0.27em;
  }

  .hero-intro {
    margin-bottom: 24px;
  }

  .microcopy {
    margin-top: 13px;
  }

  .hero-portrait {
    width: min(94%, 440px);
    padding: 15px 15px 0;
  }

  .hero-portrait .portrait-image-frame img {
    object-position: center 72%;
    transform: scale(1.09);
    transform-origin: center 72%;
  }

  .portrait-note {
    bottom: 5%;
    padding: 12px 16px;
  }

  .promise {
    padding: 18px 14px;
  }

  .section {
    padding: 62px 20px;
  }

  .about {
    gap: 24px;
  }

  .about h2,
  .section-heading h2,
  .care-card h2 {
    margin-bottom: 18px;
  }

  .about-copy p:first-child {
    margin-top: 0;
  }

  .section-heading {
    margin-bottom: 30px;
  }

  .service-grid article,
  .service-grid article + article {
    padding-block: 25px;
  }

  .beach-divider {
    height: 235px;
  }

  .care-card {
    padding: 58px 0 38px;
  }

  .levels {
    margin-bottom: 48px;
    padding: 38px 22px;
  }

  .levels > div {
    padding: 16px 0;
  }

  .tan-mon-cheri-ready {
    margin-bottom: 18px;
  }

  .path-grid article {
    padding: 32px 24px;
  }

  footer {
    gap: 27px;
    padding: 50px 20px 28px;
  }
}

/* Approved brand masters, displayed without altering the artwork. */
.site-header { height: 140px; }
.brand .brand-logo { width: 120px; height: 120px; object-fit: contain; flex-shrink: 0; }
.footer-brand .footer-logo { width: 180px; height: 180px; object-fit: contain; margin-bottom: 12px; }
@media (max-width: 760px) {
 .site-header { height: 120px; }
 .brand .brand-logo { width: 100px; height: 100px; }
}