/* Primary: plum, pink, olive, deep teal. Aqua tones are supporting accents. */
:root {
  --plum: #741353;
  --pink: #e9409b;
  --olive: #8b920a;
  --teal: #024f5b;
  --aqua: #1cb6bb;
  --pale: #a0e5e5;
  --mist: #f8f5f7;
}
::selection { background: var(--plum); color: #fff; }

.site-header nav .nav-cta { background: var(--plum); border-color: var(--plum); color: #fff; }
.site-header nav .nav-cta:hover { background: var(--teal); border-color: var(--teal); }
.hero-shade {
  background: linear-gradient(90deg, rgba(2,79,91,.94), rgba(2,79,91,.78) 36%, rgba(2,79,91,.28) 78%, rgba(2,79,91,.18));
}
.hero h1 em { color: #fff; }
.hero-copy .button, .closing-content .button {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  padding: 14px 25px;
}
.hero-copy .button:hover, .closing-content .button:hover {
  background: var(--plum);
  border-color: var(--plum);
  color: #fff;
}
.hero-feature { border: 1px solid #ffffff40; }
.welcome { background: #fff; }
.welcome h2 em, .journey h2 em, .packages h2 em, .faq h2 em { color: var(--plum); }
.welcome .button { background: var(--plum); border-color: var(--plum); color: #fff; }
.welcome .button:hover { background: var(--teal); border-color: var(--teal); }
.welcome-note { border-top: 1px solid var(--olive); padding-top: 24px; }

.services { background: var(--plum); }
.services h2 em { color: #fff; }
.service-card { border: 1px solid #ffffff29; background: #ffffff0e; }
.service-card .card-photo > span { background: #fff; color: var(--plum); }
.card-bottom .text-link { color: var(--pale); }
.additional-service .mini-number { color: var(--pale); }
.garment-note { border-top-color: #a0e5e54d; }

.journey { background: var(--mist); }
.approach { background: #fff; color: var(--teal); }
.approach .eyebrow { color: var(--teal); }
.approach-points p { color: var(--muted); }
.approach-content h2 em { color: var(--plum); }
.approach-points article { border-bottom-color: var(--line); }
.feature-icon { background: var(--plum); color: #fff; }
.approach-points article:nth-child(2) .feature-icon,
.approach-points article:nth-child(3) .feature-icon { background: var(--plum); color: #fff; }
.approach-image figcaption { background: #fff; color: var(--teal); }

.packages { background: var(--olive); color: #fff; }
.packages h2 em { color: #fff; }
.packages .section-heading .eyebrow {
  display: inline-flex;
  background: #fff;
  color: var(--plum);
  padding: 6px 14px;
  border-radius: 99px;
}
.packages .section-heading > p:not(.eyebrow) { color: #fff; font-size: 19px; font-weight: 700; line-height: 1.65; }
.plan-card { background: #fff; color: var(--teal); border-top: 0; }
.plan-card .plan-icon,
.plan-card:nth-child(2) .plan-icon,
.plan-card:nth-child(3) .plan-icon { background: #fff; color: var(--plum); border: 1px solid var(--olive); }
.hours-bar { background: var(--teal); border-left: 0; }
.faq { background: #fff; }
.faq details { background: var(--mist); }
.faq details[open] { background: var(--pale); }
.faq details[open] summary { color: var(--plum); }
.contact { background: var(--plum); color: #fff; }
.contact-copy .eyebrow, .contact-copy .phone-number, .contact-copy .text-link { color: #fff; }
.contact-copy .visit-details { border-top-color: #ffffff40; }
.contact-copy .button-outline { color: #fff; border-color: #fff; }
.contact-copy .button-outline:hover { background: #fff; color: var(--plum); }
.consultation-form { color: var(--teal); border: 1px solid #024f5b14; }
.closing-cta { background: var(--pink); }
.closing-cta > img { opacity: .06; }
.closing-content h2 em { color: #fff; }
.closing-content > p:not(.eyebrow) { color: #fff; font-size: 19px; font-weight: 700; }
.closing-content .eyebrow { display: inline-flex; background: #fff; color: var(--plum); border-radius: 99px; padding: 7px 14px; }
.closing-content .eyebrow::before { display: none; }

/* Pink consistently signals the main action, with readable white labels. */
.site-header nav .nav-cta,
.welcome .button,
.journey-top .button,
.hours-bar .button,
.contact-actions .button:first-child,
.consultation-form > .button,
dialog .button {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}
.site-header nav .nav-cta:hover,
.welcome .button:hover,
.journey-top .button:hover,
.hours-bar .button:hover,
.contact-actions .button:first-child:hover,
.consultation-form > .button:hover,
dialog .button:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.closing-content .button { background: var(--plum); border-color: var(--plum); color: #fff; }
.closing-content .button:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

.site-footer { background: var(--teal); color: #fff; }
.site-footer .eyebrow, .footer-service, .footer-policy { color: #fff; }
.footer-about > p, .footer-bottom > p { color: var(--pale); }
.footer-bottom { border-top-color: #a0e5e53d; }
.footer-brand img, .footer-wordmark {
  filter: brightness(0) invert(1);
}
@media (max-width: 580px) {
  .hero-shade {
    background: linear-gradient(90deg, rgba(2,79,91,.9), rgba(2,79,91,.38)), linear-gradient(0deg, rgba(2,79,91,.8), transparent 55%);
  }
  .welcome-note { padding-top: 16px; }
}