:root {
  --ever: #1f2d27;
  --ever-deep: #16211c;
  --ever-raised: #273830;
  --ever-line: #36493f;
  --cream: #f4ecdf;
  --cream-raised: #fbf6ee;
  --cream-line: #e3d6c3;
  --gold: #d4a25a;
  --gold-bright: #e9c07c;
  --bronze: #85601f;
  --ink: #241f1a;
  --ink-muted: #5c5348;
  --light: #f4ecdf;
  --light-muted: #c9c1b3;
  --radius: 16px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Each band is either dark evergreen or cream. Components read the --s-* tokens,
   so the same markup works on both. The look is fixed in light and dark mode. */
.site-header, .hero, #benefits, #first-visit, #faq, .site-footer, .notfound {
  --s-bg: var(--ever);
  --s-focus: var(--gold);
  --s-raised: var(--ever-raised);
  --s-line: var(--ever-line);
  --s-text: var(--light);
  --s-muted: var(--light-muted);
  --s-accent: var(--gold);
  --s-accent-text: var(--gold-bright);
  --s-btn: var(--gold);
  --s-btn-hover: var(--gold-bright);
  --s-on-btn: var(--ever-deep);
  --s-icon-bg: rgb(212 162 90 / 14%);
  --s-soft: rgb(212 162 90 / 12%);
  --s-shadow: 0 1px 2px rgb(0 0 0 / 25%), 0 14px 34px rgb(0 0 0 / 25%);
  color-scheme: dark;
}
#massage, #about, #prices, #book, #statement {
  --s-bg: var(--cream);
  --s-focus: var(--ever);
  --s-raised: var(--cream-raised);
  --s-line: var(--cream-line);
  --s-text: var(--ink);
  --s-muted: var(--ink-muted);
  --s-accent: var(--ever);
  --s-accent-text: var(--bronze);
  --s-btn: var(--ever);
  --s-btn-hover: #2d4137;
  --s-on-btn: var(--cream);
  --s-icon-bg: var(--ever);
  --s-soft: rgb(212 162 90 / 18%);
  --s-shadow: 0 1px 2px rgb(40 30 15 / 6%), 0 12px 30px rgb(40 30 15 / 9%);
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ever);
  color: var(--light);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -0.01em; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
a { color: var(--s-accent-text); text-underline-offset: 0.18em; }

.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  padding: 0.5rem 1rem;
  background: var(--gold);
  color: var(--ever-deep);
  border-radius: 8px;
  z-index: 10;
}
.skip:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--s-focus, var(--gold)); outline-offset: 3px; border-radius: 6px; }

.site-header, .hero, .section, .site-footer { background: var(--s-bg); color: var(--s-text); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--ever) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ever-line);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: 4.75rem;
  padding-block: 0.6rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; color: var(--s-text); text-decoration: none; }
.mark { width: 2.75rem; height: 2.75rem; flex: none; }
.mark-bg { fill: var(--gold); }
.mark-leaf { fill: var(--ever); }
.mark-bud { fill: var(--cream); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.brand-sub { color: var(--gold-bright); font-size: 0.82rem; letter-spacing: 0.06em; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; }
.main-nav a {
  color: var(--s-muted);
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.95rem;
}
.main-nav a:hover { color: var(--s-text); background: var(--ever-raised); }
.main-nav .nav-cta { color: var(--ever-deep); background: var(--gold); margin-left: 0.3rem; font-weight: 600; }
.main-nav .nav-cta:hover { color: var(--ever-deep); background: var(--gold-bright); }

@media (max-width: 760px) {
  html { scroll-padding-top: 1rem; }
  .site-header { position: static; }
  .header-inner { justify-content: center; }
  .main-nav { width: 100%; justify-content: center; }
  .main-nav a { padding: 0.4rem 0.6rem; }
}

/* Hero */
.hero {
  background:
    radial-gradient(ellipse at 78% 38%, rgb(212 162 90 / 15%), transparent 55%),
    radial-gradient(circle at 5% 100%, rgb(212 162 90 / 7%), transparent 40%),
    var(--ever);
}
.hero-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  padding: clamp(2.75rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem);
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}
.eyebrow {
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}
.hero h1 { color: var(--cream); }
.lede { color: var(--s-muted); font-size: 1.2rem; max-width: 36rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-primary { background: var(--s-btn); color: var(--s-on-btn); box-shadow: 0 0 0 0 rgb(212 162 90 / 0%); }
.btn-primary:hover { background: var(--s-btn-hover); box-shadow: 0 0 28px rgb(212 162 90 / 35%); }
.btn-secondary { border: 1.5px solid var(--s-accent); color: var(--s-accent-text); }
.btn-secondary:hover { background: var(--s-soft); }

.trust {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  color: var(--s-muted);
  font-size: 0.95rem;
}
.trust li { display: flex; align-items: center; gap: 0.6rem; }
.trust li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--gold);
  transform: rotate(45deg);
}

.hero-art { display: block; width: 100%; max-width: 420px; height: auto; justify-self: center; }
@media (min-width: 900px) { .hero-art { justify-self: end; } }
@media (max-width: 899px) { .hero-art { max-width: 340px; } }

.glow-in { stop-color: #f0c987; stop-opacity: 0.42; }
.glow-mid { stop-color: #d4a25a; stop-opacity: 0.12; }
.glow-out { stop-color: #d4a25a; stop-opacity: 0; }
.wax-l { stop-color: #e6d7bf; }
.wax-m { stop-color: #f7efe1; }
.wax-r { stop-color: #c9b597; }
.wax-shine { fill: #ffffff; opacity: 0.22; }
.candle-top { fill: #fbf4e8; }
.candle-pool { fill: #e8dcc6; }
.wick { fill: none; stroke: #2b231c; stroke-width: 3; stroke-linecap: round; }
.flame-base { stop-color: #e2792b; }
.flame-tip { stop-color: #f8d98f; }
.flame-core { fill: #fff6dc; }
.flame-wrap {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  /* Stops after 4.8 s (WCAG 2.2.2): 2 x 2.4 s, and 3 x 1.6 s for the small flame. */
  animation: flicker 2.4s ease-in-out 2;
}
.flame-wrap.small { animation-duration: 1.6s; animation-iteration-count: 3; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(0.96, 1.05); }
  55% { transform: scale(1.03, 0.97); }
  80% { transform: scale(0.98, 1.03); }
}
@media (prefers-reduced-motion: reduce) { .flame-wrap { animation: none; } }
.stone-a { fill: #33473d; }
.stone-b { fill: #3d5347; }
.stone-c { fill: #486153; }
.stone-rim { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.art-sprig { fill: none; stroke: var(--gold); stroke-width: 1.8; opacity: 0.85; }
.art-surface { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0.45; }
.art-frame { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0.35; }

/* Sections */
.section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.section-head { max-width: 46rem; margin-bottom: 2.25rem; }
.section-head.centered { margin-inline: auto; text-align: center; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--s-accent-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
}
.kicker::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  background: currentColor;
  transform: rotate(45deg);
}
.ornament + .kicker::before { display: none; }
.section-intro { color: var(--s-muted); font-size: 1.1rem; margin: 0; }

.ornament { display: block; width: 120px; height: 24px; margin: 0 auto 0.75rem; }
.orn-line { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0.55; }
.orn-flame { fill: var(--gold); }

.icon {
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0.65rem;
  border-radius: 50%;
  background: var(--s-icon-bg);
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon .faint { opacity: 0.5; }
.icon .dot { fill: currentColor; }

/* Massage types */
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2.25rem; }
.jump a {
  color: var(--s-accent);
  background: var(--s-raised);
  border: 1px solid var(--s-line);
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.92rem;
  text-decoration: none;
}
.jump a:hover { border-color: var(--gold); }

.services {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}
.service {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--s-raised);
  border: 1px solid var(--s-line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--s-shadow);
  scroll-margin-top: 6rem;
}
.service-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.service h3 { margin: 0; }
/* When text is enlarged and the title no longer fits beside the icon, it moves below the icon. */
.service-head, .perk { flex-wrap: wrap; }
.service-head > div, .perk > div { flex: 1 1 10rem; min-width: 0; }
.service h3, .perk h3 { overflow-wrap: break-word; hyphens: auto; }
.tagline {
  margin: 0.15rem 0 0;
  color: var(--s-accent-text);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}
.service > p { color: var(--s-muted); }
.benefits { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.45rem; }
.benefits li { display: flex; align-items: baseline; gap: 0.7rem; }
.benefits li::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--s-accent-text);
  transform: translateY(-0.1rem) rotate(45deg);
}
.service .fit {
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--s-line);
  color: var(--s-muted);
  font-size: 0.95rem;
}
.fit strong { color: var(--s-text); }

/* Why massage */
.perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.perk {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--s-raised);
  border: 1px solid var(--s-line);
  border-radius: var(--radius);
}
.perk .icon { width: 3rem; height: 3rem; padding: 0.6rem; }
.perk h3 { font-size: 1.15rem; margin: 0.1rem 0 0.15rem; color: var(--cream); }
.perk p { margin: 0; color: var(--s-muted); }
.disclaimer { margin: 1.75rem 0 0; color: var(--s-muted); font-size: 0.95rem; font-style: italic; text-align: center; }

/* About */
.about { display: grid; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 860px) {
  .about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.about-art {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  justify-self: center;
  filter: drop-shadow(0 18px 30px rgb(31 45 39 / 28%));
}
.arch-fill { fill: var(--ever); }
.arch-line { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0.75; }
.sprig-stem { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.sprig-leaf { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.mono { font-family: var(--serif); font-size: 92px; font-weight: 600; fill: var(--cream); }
.mono-rule { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.mono-sub { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.28em; fill: var(--gold); }
.about-copy > p:not(.kicker) { font-size: 1.1rem; }
.creds { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.creds li {
  display: grid;
  gap: 0.1rem;
  padding: 0.9rem 1.1rem;
  background: var(--s-raised);
  border: 1px solid var(--s-line);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
}
.creds strong { font-family: var(--serif); font-size: 1.05rem; }
.creds span { color: var(--s-muted); font-size: 0.95rem; }

/* First visit */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.steps li {
  counter-increment: step;
  padding: 1.4rem;
  background: var(--s-raised);
  border: 1px solid var(--s-line);
  border-radius: var(--radius);
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  box-shadow: 0 0 22px rgb(212 162 90 / 22%);
}
.steps h3 { font-size: 1.2rem; margin-bottom: 0.3rem; color: var(--cream); }
.steps p { margin: 0; color: var(--s-muted); }

/* Prices */
.prices { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 860px) {
  .prices { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .prices .section-head { margin-bottom: 0; }
}
/* Price list, for when Tabitha sends prices. */
.menu {
  list-style: none;
  margin: 0;
  padding: 1.25rem 1.75rem;
  background: var(--s-raised);
  border: 1px solid var(--s-line);
  border-radius: var(--radius);
  box-shadow: var(--s-shadow);
}
.menu li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.8rem 0; border-bottom: 1px solid var(--s-line); }
.menu li:last-child { border-bottom: 0; }
.menu .item { font-weight: 600; }
.menu .item small { display: block; color: var(--s-muted); font-weight: 400; font-size: 0.9rem; }
.menu .leader { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--s-line); }
.menu .price { color: var(--ever); font-family: var(--serif); font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.price-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--s-raised);
  border: 1px solid var(--s-line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--s-shadow);
}
.price-card h3 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.price-card p { margin: 0; color: var(--s-muted); }
.price-card .actions { margin-top: 1.5rem; }

/* FAQ */
.faq-list { display: grid; gap: 0.75rem; max-width: 48rem; margin-inline: auto; }
.faq-list details {
  padding: 0 1.25rem;
  background: var(--s-raised);
  border: 1px solid var(--s-line);
  border-radius: 14px;
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+" / "";
  flex: none;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1;
  transition: transform 0.2s;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }
.faq-list details p { margin: 0 0 1.15rem; color: var(--s-muted); overflow-wrap: anywhere; }

/* Book */
.contact { border-top: 1px solid var(--cream-line); }
.contact-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: 1.4rem 1.5rem;
  background: var(--s-raised);
  border: 1px solid var(--s-line);
  border-radius: var(--radius);
  color: var(--s-text);
  text-decoration: none;
  box-shadow: var(--s-shadow);
  transition: border-color 0.15s, transform 0.15s;
}
.contact-card:hover { border-color: var(--gold); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .contact-card:hover { transform: none; } }
.contact-label {
  color: var(--s-accent-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}
.contact-value { font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
/* Keep the address on one line by scaling it to the card's width. When text is enlarged
   past that, it wraps at the <wbr> after "@" and before ".com" instead of being cut off. */
.contact-card { container-type: inline-size; }
.contact-email { white-space: normal; overflow-wrap: anywhere; font-size: clamp(0.75rem, 5cqi, 1.1rem); }
@media (max-width: 400px) { .contact-card { padding-inline: 1.1rem; } }
.area { margin: 1.5rem 0 0; color: var(--s-muted); }

/* Footer */
.site-footer { padding: 2.25rem 0; background: var(--ever-deep); color: var(--s-muted); font-size: 0.92rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.site-footer p { margin: 0; }
.family a { color: var(--gold); font-weight: 600; text-decoration: none; }
.family a:hover { text-decoration: underline; }
/* "Designed by lab5.dev": its own small line, in the footer's muted color */
.footer-link a { color: var(--light); text-decoration-color: rgb(244 236 223 / 45%); }
.footer-link a:hover { text-decoration-color: currentColor; }
.credit { flex-basis: 100%; font-size: 0.8rem; }
.credit a { color: inherit; text-decoration-color: rgb(201 193 179 / 40%); text-underline-offset: 0.2em; }
.credit a:hover { color: var(--light); text-decoration-color: currentColor; }

/* Windows high contrast: filled buttons keep an edge once their background is removed. */
@media (forced-colors: active) {
  .btn-primary, .main-nav .nav-cta { border: 2px solid ButtonText; }
}

/* Accessibility statement */
.page-hero .hero-inner { grid-template-columns: minmax(0, 46rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.statement { max-width: 46rem; }
.statement h2 { font-size: clamp(1.4rem, 2.8vw, 1.7rem); margin-top: 2.25rem; }
.statement h2:first-child { margin-top: 0; }
.statement p { color: var(--s-muted); }
.statement .benefits { margin-bottom: 1em; }

/* 404 */
.notfound {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, rgb(212 162 90 / 14%), transparent 50%), var(--ever);
}
.notfound .mark { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.5rem; }
.notfound h1 { color: var(--cream); }
.notfound .lede { margin-inline: auto; }
.notfound .actions { justify-content: center; }