/* A restrained autumn palette, paired with Harmoniq's signature deep teal. */
:root {
  --cream: #fbf6ed;
  --mist: #eeeade;
  --sage: #dfe3d3;
  --sand: #f0e1cd;
  --gold: #925536;
  --line: #d7cebc;
  --text: #5d655b;
  --copper: #925536;
}

html { scroll-padding-top: 100px; }
.site-header {
  background: rgba(251, 246, 237, .96);
  border-bottom-color: #e4d7c6;
}
.nav > .button { background: var(--copper); border-color: var(--copper); }
.nav > .button:hover, .nav > .button:focus-visible { background: var(--ink); border-color: var(--ink); }
.promo-bar { background: #885239; color: #fffaf1; }
.promo-bar span { opacity: 1; }
.promo-bar a { border-bottom: 1px solid rgba(255, 250, 241, .55); padding-bottom: 2px; }

.hero-video { filter: saturate(.7) sepia(.13) contrast(1.02) brightness(.78); }
.hero:before {
  background: linear-gradient(90deg, rgba(21, 45, 43, .96) 0%, rgba(29, 48, 43, .88) 37%, rgba(80, 57, 39, .3) 73%, rgba(103, 65, 39, .18) 100%);
}
.hero .eyebrow { color: #e7bd8c; }
.hero h1 em { color: #edc798; }
.hero p { color: #f0ebe1; }
.hero-copy { padding-top: 100px; }
.season-note {
  display: flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  margin-top: 30px;
  padding-top: 19px;
  border-top: 1px solid rgba(237, 199, 152, .36);
  color: #edc798;
}
.season-note svg { flex-shrink: 0; }
.season-note span { font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-size: 21px; }

.intro { position: relative; isolation: isolate; }
.intro:after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  right: -24px;
  top: 22px;
  width: 175px;
  height: 250px;
  background: url('autumn-botanical.svg') center / contain no-repeat;
  opacity: .24;
}
.intro .quote { color: #4e6155; }
.experience { background: #eeeade; }
.package { background: linear-gradient(115deg, #f8f0e3, #ead8be); border-color: #d7cbb8; }
.package:nth-child(2) { background: linear-gradient(115deg, #edf0e5, #d9dfcc); }
.package:nth-child(3) { background: linear-gradient(115deg, #f5e9dd, #e8cbb5); }
.package:nth-child(4) { background: linear-gradient(115deg, #e5ebe1, #c5d1bf); }
.package-number, .package > p { color: #506052; }
.package summary { color: #79462d; }
.head-spa { background: #f2e5d3; }
.steps { border-color: #d8c5ad; background: #d8c5ad; }
.step { background: #fffbf4; }
.step-icon { background: #4f604d; color: #ffe0ae; }
.step p { color: var(--text); }
.benefits, .faq { background: var(--cream); }
.benefit { background: #e1e5d6; }
.benefit:nth-child(2) { background: #efe0cf; }
.benefit-icon { background: #4f604d; }
.benefit:nth-child(2) .benefit-icon { background: var(--copper); }
.benefit ul { color: #506052; }
.addons { background: #f0e1cd; }
.testimonial.featured { background: #e8c8a3; }
.testimonials h2 em { color: #edc798; }
.testimonial footer { background: transparent; padding: 0; }
.testimonial.featured .stars { color: #704321; }
body > footer { background: #dce1d1; }
.copyright { border-color: #c2cbb5; color: #52604e; }

@media (max-width: 980px) {
  .hero-copy { padding-top: 82px; }
  .intro:after { width: 130px; right: 0; opacity: .17; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 90px; }
  .hero:before { background: linear-gradient(90deg, rgba(21, 45, 43, .96), rgba(29, 48, 43, .82) 55%, rgba(70, 53, 36, .38)); }
  .hero-copy { padding-top: 64px; padding-bottom: 42px; }
  .season-note { margin-top: 25px; padding-top: 17px; }
  .season-note span { font-size: 19px; }
  .intro:after { top: 6px; right: -12px; width: 86px; height: 130px; opacity: .22; }
  .promo-bar .shell { column-gap: 12px; row-gap: 5px; padding: 10px 0; }
  .promo-bar strong { flex-basis: 100%; }
  .promo-bar span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-video { display: none; }
}