/*
 * Stable, uniquely named palette layer.
 * This duplicates the active cream palette declarations so browsers that
 * retained an older immutable Next.js CSS chunk receive the current design.
 */

:root {
  --color-cream-primary: #fcf7f3 !important;
  --color-cream-secondary: #f8efe9 !important;
  --color-cream-tertiary: #f3e6de !important;
  --color-cream-border: #ead8ce !important;
  --color-cream-highlight: #fffdfc !important;
  --color-brown-preserved: #391602 !important;
  --cream: var(--color-cream-primary) !important;
  --paper: var(--color-cream-highlight) !important;
  --sage: var(--color-cream-tertiary) !important;
  --sage-light: var(--color-cream-secondary) !important;
  --peach: var(--color-cream-tertiary) !important;
  --line: var(--color-cream-border) !important;
}

.skip-link,
.button,
.button-light {
  border-color: var(--color-brown-preserved) !important;
  background: var(--color-brown-preserved) !important;
  color: #fff !important;
}

.announcement {
  background: var(--color-cream-secondary) !important;
  color: var(--ink) !important;
}

.brand-mark {
  border-color: var(--color-brown-preserved) !important;
}

.nav-links a::after,
.eyebrow::before {
  background: var(--color-cream-border) !important;
}

.text-link {
  border-color: var(--color-cream-border) !important;
}

.text-link-light {
  border-color: var(--color-brown-preserved) !important;
  color: var(--ink) !important;
}

.hero-visual {
  background: var(--color-cream-secondary) !important;
}

.hero-frame::after {
  background: linear-gradient(
    180deg,
    transparent 65%,
    rgba(234, 216, 206, 0.28)
  ) !important;
}

.hero-note {
  border-color: var(--color-cream-border) !important;
  background: rgba(255, 253, 252, 0.92) !important;
  box-shadow: 0 18px 50px rgba(234, 216, 206, 0.65) !important;
}

.hero-note-icon,
.orb-one,
.real-skin-image {
  background: var(--color-cream-tertiary) !important;
}

.orb-two {
  border-color: var(--color-cream-border) !important;
}

.manifesto,
.real-skin {
  background: var(--color-cream-highlight) !important;
}

.services {
  background: var(--color-cream-primary) !important;
}

.service-card {
  background: var(--color-cream-highlight) !important;
}

.service-card:nth-child(2) {
  background: var(--color-cream-tertiary) !important;
}

.service-card:hover,
.service-card:nth-child(2):hover {
  background: var(--color-cream-secondary) !important;
  box-shadow: 0 24px 55px rgba(234, 216, 206, 0.72) !important;
}

.process,
.booking {
  background: var(--color-cream-secondary) !important;
  color: var(--ink) !important;
}

.image-caption {
  background: rgba(255, 253, 252, 0.92) !important;
  color: var(--ink) !important;
}

.process-copy .eyebrow,
.booking .eyebrow,
.steps > li > span,
.footer-links strong {
  color: var(--moss) !important;
}

.process-intro,
.steps p,
.booking p,
.footer-brand p,
.footer-links span,
.footer-bottom p {
  color: var(--ink-soft) !important;
}

.steps,
.steps li,
.booking-orbit,
.booking-orbit::before,
.footer-brand,
.footer-bottom {
  border-color: var(--color-cream-border) !important;
}

.button-light:hover,
.button-light:focus-visible {
  border-color: var(--color-brown-preserved) !important;
  background: transparent !important;
  color: var(--ink) !important;
}

footer {
  background: var(--color-cream-tertiary) !important;
  color: var(--ink) !important;
}

.brand-light {
  color: var(--ink) !important;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--moss) !important;
}

:focus-visible {
  outline-color: var(--color-brown-preserved) !important;
}