/* Amber's Essential Touch — walnut + sage atmospheric layer.
   Loaded after the page styles so the completed layout can sit over one
   continuous material background without losing its white reading surfaces. */

:root {
  --aet-walnut: #24170f;
  --aet-walnut-deep: #140d09;
  --aet-sage-soft: #9aaa8f;
  --aet-sage-smoke: #66705e;
  --aet-panel: rgba(255, 249, 243, .935);
  --aet-panel-strong: rgba(255, 253, 249, .62);
  --aet-panel-border: rgba(255, 255, 255, .38);
  --aet-depth-shadow: 0 26px 72px rgba(12, 8, 6, .28);
  --aet-foreground-y: 0px;
  --aet-background-y: 0px;
  --aet-sparkle-y: 0px;
  --aet-sparkle-y-2: 0px;
  --aet-sparkle-y-3: 0px;
  --aet-sparkle-energy: .48;
}

html { background: var(--aet-walnut-deep); }

body {
  position: relative;
  min-height: 100%;
  background-color: var(--aet-walnut-deep) !important;
  background-image:
    linear-gradient(145deg, rgba(21, 15, 10, .32), rgba(97, 112, 83, .16)),
    url("../images/site-ready/editorial/walnut-sage-background-v1.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}

.aet-background-layer,
.aet-sparkle-field {
  position: fixed;
  pointer-events: none;
  user-select: none;
}

.aet-background-layer {
  z-index: 0;
  inset: -120vh -8vw;
  background:
    linear-gradient(135deg, rgba(28, 18, 12, .30), rgba(112, 128, 98, .16)),
    url("../images/site-ready/editorial/walnut-sage-background-v1.webp") center / cover no-repeat;
  transform: translate3d(0, var(--aet-background-y), 0) scale(1.08);
  filter: saturate(.88) contrast(1.04);
  will-change: transform;
}

.aet-sparkle-field {
  z-index: 0;
  inset: -18vh 0;
  opacity: var(--aet-sparkle-energy);
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,.92) 0 1px, transparent 1.8px),
    radial-gradient(circle at center, rgba(226,235,158,.80) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at center, rgba(255,215,178,.58) 0 .8px, transparent 1.8px);
  background-size: 173px 193px, 251px 277px, 317px 229px;
  background-position: 19px var(--aet-sparkle-y), 91px var(--aet-sparkle-y-2), 42px var(--aet-sparkle-y-3);
  transform: translate3d(0, var(--aet-background-y), 0);
  animation: aetSparkleBreathe 6s ease-in-out infinite alternate;
  will-change: transform, opacity, background-position;
}

.aet-sparkle-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 2.5px),
    radial-gradient(circle, rgba(212,225,147,.72) 0 .8px, transparent 2px);
  background-size: 421px 367px, 503px 449px;
  background-position: 77px 33px, 201px 151px;
  animation: aetSparkleDrift 11s linear infinite;
}

@keyframes aetSparkleBreathe {
  from { opacity: .32; }
  to { opacity: var(--aet-sparkle-energy); }
}

@keyframes aetSparkleDrift {
  from { transform: translate3d(0, -8px, 0); opacity: .42; }
  50% { opacity: .82; }
  to { transform: translate3d(0, 18px, 0); opacity: .36; }
}

body > :not(.aet-background-layer):not(.aet-sparkle-field):not(.sheet):not(.book-bar):not(.stickybook) {
  position: relative;
  z-index: 1;
}

.hdr,
.site-header {
  background: linear-gradient(105deg, rgba(28, 18, 12, .91), rgba(70, 81, 61, .86)) !important;
  border-bottom-color: rgba(255, 249, 243, .15) !important;
  box-shadow: 0 12px 34px rgba(10, 7, 5, .20);
}

.hdr a,
.hdr button,
.site-header a,
.site-header button,
.nav__name-main,
.nav__name-sub,
.brand__name,
.brand__sub { color: #fff9f3 !important; }

.nav-drawer {
  background: linear-gradient(160deg, rgba(35, 23, 16, .98), rgba(74, 86, 65, .98)) !important;
}

main {
  position: relative;
  z-index: 1;
  padding-block: 4px 18px;
}

main > section {
  width: min(calc(100% - clamp(18px, 3vw, 48px)), 1560px);
  margin: clamp(12px, 1.8vw, 24px) auto !important;
  border: 1px solid var(--aet-panel-border);
  border-radius: clamp(22px, 3vw, 38px);
  box-shadow: var(--aet-depth-shadow);
  overflow: clip;
  isolation: isolate;
}

/* Genuine frosted glass: low enough alpha that the blurred walnut/sage is the
   dominant material, not a white surface with backdrop-filter as decoration.
   .52/.42 is the floor that still clears WCAG AA for espresso body text sitting
   directly on the surface — verified, not eyeballed. */
main > section:not(.bookband):not(.book):not(.cta-band) {
  background:
    linear-gradient(155deg, rgba(255, 253, 249, .52), rgba(239, 244, 235, .42)) !important;
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

main > .hero {
  background:
    linear-gradient(145deg, rgba(255,253,249,.55), rgba(223,232,218,.44)) !important;
}

main > .bookband,
main > .book,
main > .cta-band {
  background: linear-gradient(140deg, rgba(39, 24, 16, .96), rgba(84, 98, 73, .93) 58%, rgba(103, 63, 69, .93)) !important;
}

.card,
.service-entry,
.product,
.testimonial,
.booking-shell,
.capture,
.step-card,
.concern,
.finder__row,
.quote,
.result,
.menu-panel,
.prep-shell,
.review-source {
  background: var(--aet-panel-strong) !important;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-color: rgba(64, 46, 34, .14) !important;
  box-shadow: 0 16px 42px rgba(22, 14, 10, .12) !important;
}

/* .step (the borderless "Consult / Treat / Preserve" rhythm) was never designed
   as a card — it's a top-rule-only editorial layout. Leave its own styling
   alone instead of stamping the same box onto every foreground element. */
.step {
  background: none !important;
  box-shadow: none !important;
}

[data-aet-depth="foreground"] {
  transform: translate3d(0, var(--aet-foreground-y), 0);
  will-change: transform;
}

/* Amber's supplied photographs stay photographic and still. Motion belongs
   to the interface layers around her, never to her likeness. */
.aet-real-amber-wrap,
.aet-real-amber {
  animation: none !important;
  transform: none !important;
}

.hero__media.aet-real-amber-wrap > .aet-real-amber {
  object-position: center 24%;
}

.service-entry,
.card,
.product,
.testimonial,
.booking-shell,
.menu-panel,
.prep-shell,
.review-source {
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms ease;
}

.pricebook { margin-top: clamp(34px, 5vw, 64px); }
.pricebook__head { max-width: 760px; margin-bottom: 24px; }
.pricebook__head h2 { margin-bottom: 10px; }
.pricebook__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.menu-panel { border: 1px solid var(--line, rgba(111,63,42,.18)); border-radius: 20px; padding: clamp(20px, 3vw, 30px); }
.menu-panel--wide { grid-column: 1 / -1; }
.menu-panel h3 { margin-bottom: 12px; }
.menu-panel summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-family: var(--serif, Georgia, serif); font-size: clamp(25px, 3vw, 36px); color: var(--ink, #33231e); }
.menu-panel summary::-webkit-details-marker { display: none; }
.menu-panel summary::after { content: "+"; font-family: var(--sans, sans-serif); font-size: 22px; color: var(--rose, #a95870); }
.menu-panel[open] summary::after { content: "−"; }
.price-list { list-style: none; padding: 0; margin: 14px 0 0; }
.price-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(111,63,42,.12); }
.price-list li:last-child { border-bottom: 0; }
.price-list strong { white-space: nowrap; color: var(--brown, #6f3f2a); }
.price-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 14px; }
.price-note { margin: 14px 0 0; font-size: 13px; color: var(--muted, #71655f); }

.prep-shell { border: 1px solid var(--line, rgba(111,63,42,.18)); border-radius: 24px; padding: clamp(22px, 4vw, 42px); }
.prep-intro { max-width: 720px; margin-bottom: 28px; }
.prep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.prep-group { border: 0; margin: 0; padding: 20px; border-radius: 18px; background: rgba(239, 244, 235, .68); }
.prep-group--wide { grid-column: 1 / -1; }
.prep-group legend { padding: 0 6px; font-family: var(--serif, Georgia, serif); font-size: 24px; color: var(--ink, #33231e); }
.prep-group__hint { margin: 0 0 12px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #71655f); }
.prep-options { display: grid; gap: 10px; }
.prep-options--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prep-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.prep-status { margin: 0; font-size: 13px; color: var(--muted, #71655f); }

.review-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.review-source { border: 1px solid var(--line, rgba(111,63,42,.18)); border-radius: 18px; padding: 22px; }
.review-source h3 { margin-bottom: 6px; }
.review-source p { margin: 0 0 16px; color: var(--muted, #71655f); }

@media (max-width: 760px) {
  body { background-attachment: scroll !important; }
  main > section { width: calc(100% - 14px); margin-block: 9px !important; border-radius: 20px; }
  .pricebook__grid,
  .price-columns,
  .prep-grid,
  .prep-options--columns,
  .review-sources { grid-template-columns: 1fr; }
  .menu-panel--wide,
  .prep-group--wide { grid-column: auto; }
  .aet-sparkle-field { opacity: .34; }
}

@media (prefers-reduced-motion: reduce) {
  .aet-background-layer,
  .aet-sparkle-field,
  .aet-sparkle-field::after,
  [data-aet-depth="foreground"] {
    animation: none !important;
    transform: none !important;
  }
}