/* J Massage SLC: design system. A port of elitespautah.com assets/styles.css (2026-11-02 twin redesign).
   Fonts come from /css/fonts.css (same three families, self-hosted under /fonts). Keep this file in step with
   Elite: change shared rules there and here together. JM-only additions sit at the end. */

/* ============ TOKENS ============ */
:root {
  --brand-orange: #a04d2c;
  --brand-orange-soft: rgba(160, 77, 44, 0.12);
  --brand-orange-deep: #7d3d23;
  --brand-orange-on-dark: #c9805a; /* lightened warm accent for text/links on dark grounds — 4.8:1 on --ink, 5.5:1 on --ink-deep (AA); --brand-orange is only 2.6:1 there */
  --brand-cream: #faf7f3;
  --brand-cream-soft: #f5f0e8;
  --brand-cream-deep: #ebe2d2;
  --surface: #fffdfb; /* card/input surface: white warmed a hair toward the brand hue so it sits on cream without reading cold */
  --ink: #2a2622;
  --ink-muted: #5b544c;
  --ink-dim: #6b6358; /* 5.2:1 on cream-soft (was #7a7268 = 4.17:1, failed AA) */
  --line: rgba(42, 38, 34, 0.10);
  --line-strong: rgba(42, 38, 34, 0.20);

  --type-display: 'Marcellus', Georgia, serif;
  --type-body: 'PT Serif', Georgia, serif;
  --type-ui: 'DM Sans', system-ui, -apple-system, sans-serif;

  --type-1: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);
  --type-2: clamp(2rem, 1.2rem + 2.5vw, 3rem);
  --type-3: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --type-4: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --type-5: 1rem;
  --type-6: 0.875rem;
  --type-7: 0.75rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --maxw-narrow: 720px;
  --maxw-content: 1080px;
  --maxw-wide: 1280px;

  /* Elevation pass (2026-06) */
  --ink-deep: #1f1a16;
  --cream-on-dark: #f5efe6;
  --shadow-soft: 0 2px 12px rgba(42, 30, 22, 0.06);
  --shadow-lift: 0 10px 32px rgba(42, 30, 22, 0.10);
  --shadow-bloom: 0 24px 64px rgba(160, 77, 44, 0.16);
  --type-hero: clamp(3rem, 2rem + 5.5vw, 6rem);
  --ease-organic: cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow: 0.9s;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--type-body);
  font-size: var(--type-5);
  line-height: 1.65;
  color: var(--ink);
  background: var(--brand-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a {
  color: var(--brand-orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--brand-orange-deep); }
:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============ TYPE ============ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--type-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  color: var(--ink);
  letter-spacing: -0.005em;
}
h1 { font-size: var(--type-1); line-height: 1.05; }
h2 { font-size: var(--type-2); }
h3 { font-size: var(--type-3); }
h4 {
  font-size: var(--type-4);
  font-family: var(--type-ui);
  font-weight: 500;
  letter-spacing: 0;
}
p { margin: 0 0 var(--space-2); max-width: 65ch; }
.lead { font-size: var(--type-4); line-height: 1.5; color: var(--ink-muted); max-width: 50ch; }
.eyebrow {
  font-family: var(--type-ui);
  font-size: var(--type-7);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin: 0 0 var(--space-2);
}

/* ============ LAYOUT ============ */
.container {
  width: 100%;
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding-inline: clamp(var(--space-3), 4vw, var(--space-5));
}
.container--narrow { max-width: var(--maxw-narrow); }
.container--content { max-width: var(--maxw-content); }
.section { padding-block: var(--space-6); }
.section--cream { background: var(--brand-cream-soft); }
.section--cream-deep { background: var(--brand-cream-deep); }
.section--ink { background: var(--ink); color: var(--brand-cream); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 {
  color: var(--brand-cream);
}
.section--ink p { color: rgba(250, 247, 243, 0.85); }
.section--ink .eyebrow { color: var(--brand-cream); opacity: 0.65; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--brand-cream);
  z-index: 100;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
}
.skip-link:focus { top: var(--space-2); color: var(--brand-cream); }

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 243, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  min-height: 64px;
}
.site-header__brand {
  font-family: var(--type-display);
  font-size: var(--type-3);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.site-header__brand:hover { color: var(--ink); }
.site-nav { display: flex; align-items: center; gap: var(--space-2); }
.site-nav__list {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.site-nav__link {
  font-family: var(--type-ui);
  font-size: var(--type-6);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-1);
}
.site-nav__link:hover { color: var(--brand-orange); }

.site-nav__menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--ink);
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .site-nav__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--brand-cream);
    border-bottom: 1px solid var(--line);
    padding: var(--space-2) var(--space-3) var(--space-3);
    box-shadow: 0 8px 24px rgba(42, 38, 34, 0.08);
  }
  .site-nav__list--open { display: flex; }
  .site-nav__link {
    padding: var(--space-2);
    border-bottom: 1px solid var(--line);
    justify-content: flex-start;
  }
  .site-nav__list .btn { margin-top: var(--space-2); }
  .site-nav__menu-toggle { display: inline-flex; }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--type-ui);
  font-size: var(--type-6);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
  min-height: 48px;
  white-space: nowrap;
}
.btn--primary {
  background: var(--brand-orange);
  color: #fff;
}
.btn--primary:hover { background: var(--brand-orange-deep); color: #fff; }
.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); color: var(--brand-cream); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--on-dark {
  color: var(--brand-cream);
  border-color: rgba(250, 247, 243, 0.4);
}
.btn--on-dark:hover {
  color: var(--ink);
  background: var(--brand-cream);
  border-color: var(--brand-cream);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  background: var(--ink);
  color: var(--brand-cream);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 80%;
}
/* Mobile: a 16:9 hero over-crops inside a full-height portrait box and reads
   off-center. Trim the height so more of the image shows, and center the crop. */
@media (max-width: 640px) {
  .hero { min-height: 82svh; }
  .hero__media img,
  .hero__media video { object-position: 50% 42%; }
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,18,16,0.8) 0%, rgba(20,18,16,0.55) 30%, rgba(20,18,16,0.05) 65%, transparent 100%);
}
/* Ambient hero video — layered over the hero photo by ambient-video.js and
   faded in once playing. The photo underneath stays the LCP element and the
   only thing reduced-motion / Save-Data visitors see. The ::after scrim above
   paints over both, so text contrast is unchanged. Scoped to .ambient-video so
   the controlled inline .svc-hero-video (head spa) stays in normal flow and
   visible for everyone, including reduced-motion. */
.hero__media .ambient-video,
.svc-hero-media .ambient-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__media .ambient-video { object-position: 30% 80%; }
.hero__media .ambient-video.is-playing,
.svc-hero-media .ambient-video.is-playing { opacity: 1; }
.svc-hero-media.has-ambient { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .hero__media .ambient-video,
  .svc-hero-media .ambient-video { display: none; }
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-6);
  width: 100%;
}
.hero__heading {
  color: var(--brand-cream);
  margin-bottom: var(--space-2);
  max-width: 18ch;
}
.hero__lead {
  color: rgba(250, 247, 243, 0.92);
  font-size: var(--type-4);
  line-height: 1.5;
  max-width: 36ch;
  margin: 0 0 var(--space-4);
}
.hero__eyebrow { color: rgba(250, 247, 243, 0.85); }
.hero__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ============ TRUST BAR ============ */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  text-align: center;
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
}
.trust-bar__item-label {
  font-family: var(--type-display);
  font-size: var(--type-3);
  color: var(--ink);
  display: block;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.trust-bar__item-text {
  font-family: var(--type-ui);
  font-size: var(--type-7);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ============ SERVICE CARDS ============ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.service-card {
  background: var(--surface);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
}
.service-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-orange);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(42, 38, 34, 0.06);
}
.service-card__title {
  font-family: var(--type-display);
  font-size: var(--type-3);
  margin: 0 0 var(--space-1);
}
.service-card__price {
  font-family: var(--type-ui);
  font-size: var(--type-6);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--brand-orange);
  margin: 0;
}
.service-card__desc {
  color: var(--ink-muted);
  font-size: var(--type-6);
  line-height: 1.55;
  margin: var(--space-1) 0 0;
}
.service-card__cta {
  font-family: var(--type-ui);
  font-size: var(--type-7);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-top: var(--space-2);
  display: inline-block;
}

/* ============ REVIEWS ============ */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.review {
  background: var(--surface);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.review__stars { color: var(--brand-orange); margin: 0 0 var(--space-1); font-size: 1.1em; letter-spacing: 0.08em; }
.review__quote {
  font-family: var(--type-display);
  font-size: var(--type-4);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.review__author {
  font-family: var(--type-ui);
  font-size: var(--type-7);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}

/* ============ CTA BAND ============ */
.cta-band {
  text-align: center;
  padding-block: var(--space-6);
}
.cta-band__heading {
  font-size: var(--type-2);
  margin-bottom: var(--space-2);
}
.cta-band__text {
  font-size: var(--type-4);
  color: var(--ink-muted);
  max-width: 50ch;
  margin: 0 auto var(--space-4);
}

/* ============ PRICE TABLE ============ */
.price-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 0; }
.price-row__name { font-family: var(--type-display); font-size: var(--type-4); margin: 0; }
.price-row__time { color: var(--ink-dim); font-size: var(--type-6); font-family: var(--type-ui); letter-spacing: 0.04em; }
.price-row__amount { font-family: var(--type-ui); font-size: var(--type-4); color: var(--brand-orange); font-weight: 500; }

/* ============ FAQ ============ */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq__item {
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-3) var(--space-2);
}
.faq__item summary {
  font-family: var(--type-display);
  font-size: var(--type-4);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--ink);
  padding-block: var(--space-1);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-size: 1.5em;
  color: var(--brand-orange);
  transition: transform 0.2s;
  flex: 0 0 auto;
  line-height: 1;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 65ch;
}

/* ============ SPA PACKAGE BOXES (pricing.html) ============ */
/* Tap-to-open package cards on native details/summary, no JS. Closed: name + From price. */
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  align-items: start;
}
@media (min-width: 720px) {
  .pkg-grid { grid-template-columns: 1fr 1fr; }
}
.pkg {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.pkg[open] { border-color: var(--brand-orange); }
.pkg summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-2);
  row-gap: 0.25rem;
  padding: var(--space-3);
}
.pkg summary::-webkit-details-marker { display: none; }
.pkg summary:focus-visible { outline-offset: -2px; border-radius: var(--radius-lg); }
.pkg summary > :not(.pkg__toggle) { grid-column: 1; }
.pkg__eyebrow { font-family: var(--type-ui); font-size: var(--type-7); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.pkg__name { font-family: var(--type-display); font-size: var(--type-3); line-height: 1.15; color: var(--ink); }
.pkg__desc { color: var(--ink-muted); font-size: var(--type-5); line-height: 1.5; }
.pkg__from { font-family: var(--type-ui); font-weight: 600; color: var(--brand-orange); margin-top: 0.25rem; }
.pkg__toggle {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-orange-soft);
  color: var(--brand-orange);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.2s;
}
.pkg[open] .pkg__toggle { transform: rotate(45deg); }
.pkg__body { padding: 0 var(--space-3) var(--space-3); }
.pkg__label { font-family: var(--type-ui); font-size: var(--type-6); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); margin: var(--space-2) 0 var(--space-1); }
/* Two columns inside the boxes so amounts sit flush right. */
.pkg__body .price-row { grid-template-columns: 1fr auto; padding: var(--space-2) var(--space-3); }
.pkg__note { font-size: var(--type-6); color: var(--ink-muted); margin-top: var(--space-2); }
.pkg__actions { margin-top: var(--space-2); }
.pkg__more { margin-top: var(--space-2); font-size: var(--type-6); }

/* ============ FORMS ============ */
.form { display: grid; gap: var(--space-2); max-width: 540px; }
.form__field { display: grid; gap: 0.4rem; }
.form__label {
  font-family: var(--type-ui);
  font-size: var(--type-7);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.form__input, .form__textarea {
  font-family: var(--type-body);
  font-size: var(--type-5);
  padding: 0.7em 1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  min-height: 48px;
}
.form__textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.form__input:focus, .form__textarea:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px var(--brand-orange-soft);
}

/* ============ INFO LIST ============ */
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.info-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: baseline;
}
/* Phones: label above its text. Side by side, a long label ("10 Min from SLC Airport") squeezed the text into a thin column. */
@media (max-width: 599px) {
  .info-list li { grid-template-columns: 1fr; gap: var(--space-1); }
}
.info-list__label {
  font-family: var(--type-ui);
  font-size: var(--type-7);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--ink);
  color: var(--brand-cream);
  padding-block: var(--space-5) var(--space-3);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 700px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.site-footer__brand {
  font-family: var(--type-display);
  font-size: var(--type-3);
  margin: 0 0 var(--space-2);
  color: var(--brand-cream);
}
.site-footer__heading {
  font-family: var(--type-ui);
  font-size: var(--type-7);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-cream);
  opacity: 0.6;
  margin: 0 0 var(--space-2);
}
.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.site-footer p { color: rgba(250, 247, 243, 0.85); margin: 0; line-height: 1.6; }
.site-footer a {
  color: rgba(250, 247, 243, 0.85);
  text-decoration: none;
}
.site-footer a:hover { color: var(--brand-orange-on-dark); }
.site-footer__legal {
  border-top: 1px solid rgba(250, 247, 243, 0.12);
  padding-top: var(--space-3);
  font-size: var(--type-7);
  opacity: 0.65;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ============ UTILITIES ============ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.flow > * + * { margin-top: var(--space-3); }
.stack > * + * { margin-top: var(--space-2); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.cluster--center { justify-content: center; }

/* Page header (interior pages) */
.page-header {
  background: var(--brand-cream-soft);
  padding-block: var(--space-6) var(--space-5);
  text-align: center;
}
.page-header h1 { margin-bottom: var(--space-2); }
.page-header .lead { margin: 0 auto; }

/* Service-page hero photo band (interim imagery). Fixed ratio = no layout shift. */
.svc-hero-media {
  margin: 0 auto;
  max-width: var(--maxw-wide);
  padding: var(--space-5) var(--space-3) 0;
}
.svc-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
/* Ordinary inline portrait video (head spa). Centered, capped at 70vh, keeps
   the site's media radius + lift. Sits in the same .svc-hero-media band. */
.svc-hero-video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  aspect-ratio: 720 / 1280; /* reserve the portrait box so the poster/video causes no layout shift */
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
/* Landscape inline video (foot reflexology). Full band width, 16:9 reserved box. */
.svc-hero-video--wide {
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
}

/* Two-up room gallery (head spa), sitting in its own quiet band below the hero
   video. Fixed image ratios = no layout shift; stacks on small screens. */
.svc-room-gallery {
  margin: 0 auto;
  max-width: var(--maxw-wide);
  padding: var(--space-4) var(--space-3) 0;
}
.svc-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.svc-gallery figure { margin: 0; }
.svc-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
@media (min-width: 800px) {
  .svc-gallery { grid-template-columns: 1fr 1fr; }
}

/* Large inline figure (ashiatsu portrait). Centered, capped so a portrait shot
   does not dominate; caption sits quietly beneath. */
.svc-figure { margin: 0 auto; }
.svc-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.svc-figure--portrait { max-width: 560px; }
.svc-figure__caption {
  margin-top: var(--space-2);
  font-size: var(--type-7);
  line-height: 1.6;
  color: var(--ink-muted);
  text-align: center;
}

/* Lower "in action" media band (head spa, foot reflexology). A warm still image
   now leads these heroes, so their autoplay clip lives here, below the main
   content, in its own quiet band with room to breathe. The video keeps its base
   .svc-hero-video sizing; each media figure is centered and constrained. */
.svc-action { padding-block: var(--space-6); }
.svc-action__media {
  margin: var(--space-4) auto 0;
  max-width: var(--maxw-wide);
  padding-inline: var(--space-3);
}
.svc-action__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

/* Service-page utility classes (promoted from per-element inline styles in
   build_services.py so generated pages stay lean). */
.svc-subhead {
  margin-top: var(--space-4);
  font-size: var(--type-4);
  font-family: var(--type-ui);
  font-weight: 500;
  letter-spacing: 0;
}
.svc-best-for {
  padding-left: 1.2em;
  color: var(--ink-muted);
  line-height: 1.7;
}
.svc-note {
  margin-top: var(--space-3);
  font-size: var(--type-7);
  color: var(--ink-muted);
}

/* Two-column layout */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 800px) {
  .cols-2 { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

/* ============ ELEVATION PASS (2026-06) ============ */

/* Masked line reveals — visual state identical without JS; gsap.set hides. */
.line { display: block; overflow: hidden; }
.line-inner { display: inline-block; will-change: transform; }

/* Dark editorial band — deeper than --ink for contrast moments. */
.band-dark { background: var(--ink-deep); color: var(--cream-on-dark); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--cream-on-dark); }
.band-dark p { color: rgba(245, 239, 230, 0.85); }
.band-dark .eyebrow { color: #c9805a; }
.band-dark .trust-bar { border-block: 0; }
.band-dark .trust-bar__item-label { color: var(--cream-on-dark); }
.band-dark .trust-bar__item-text { color: rgba(245, 239, 230, 0.55); }

/* Header scroll state (class toggled by motion.js). */
.site-header { transition: box-shadow 0.4s var(--ease-organic), background 0.4s var(--ease-organic); }
.site-header--scrolled { box-shadow: var(--shadow-soft); }

/* Link underline draw. */
.u-underline {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-slow) var(--ease-organic);
}
.u-underline:hover, .u-underline:focus-visible { background-size: 100% 1px; }

/* Image zoom frame. */
.img-zoom { overflow: hidden; border-radius: var(--radius-md); }
.img-zoom img { transition: transform 1.2s var(--ease-organic); will-change: transform; }
.img-zoom:hover img { transform: scale(1.04); }

/* Card physics upgrade. */
.service-card {
  transition: transform var(--t-slow) var(--ease-organic),
              border-color var(--t-slow) var(--ease-organic),
              box-shadow var(--t-slow) var(--ease-organic);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.service-card:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 4px; }

.btn { transition: background 0.3s var(--ease-organic), color 0.3s var(--ease-organic),
              border-color 0.3s var(--ease-organic), box-shadow 0.3s var(--ease-organic); }
.btn--primary:hover { box-shadow: var(--shadow-bloom); }
.btn-magnetic { will-change: transform; }

/* Hero display scale. */
.hero__heading { font-size: var(--type-hero); line-height: 1.04; letter-spacing: -0.01em; }

/* Asymmetric editorial services grid. */
.svc-editorial { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.svc-editorial__rest {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
@media (min-width: 800px) {
  .svc-editorial { grid-template-columns: repeat(12, 1fr); }
  /* Equal halves: both feature photos show at the same width and height. */
  .svc-feature--a,
  .svc-feature--b { grid-column: span 6; aspect-ratio: 16 / 10; }
  .svc-editorial__rest { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}
.svc-feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  overflow: hidden;
  background-color: var(--ink-deep);
  background-size: cover;
  background-position: center;
  color: var(--cream-on-dark);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-slow) var(--ease-organic), box-shadow var(--t-slow) var(--ease-organic);
}
/* Scrim keeps the cream title/desc legible over the photo (text sits bottom-left). */
.svc-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 26, 22, 0.82) 0%, rgba(31, 26, 22, 0.45) 38%, rgba(31, 26, 22, 0.12) 70%, rgba(31, 26, 22, 0.05) 100%);
  pointer-events: none;
}
/* Feature photography from the real JM shoot (2026-11-01): --a = body massage, --b = couples massage.
   Phones get the portrait body shot, closer to the card's shape; desktop gets the wide room shot. The photos
   switch on (.photos-on, set by index.html) when the cards near the screen, so they never compete with the hero. */
.photos-on .svc-feature--a { background-image: url("/images/photos/home-body.webp"); }
.photos-on .svc-feature--b { background-image: url("/images/photos/home-couples.webp"); }
@media (min-width: 800px) {
  .photos-on .svc-feature--a { background-image: url("/images/photos/home-session.webp"); }
}
.svc-feature > div { position: relative; z-index: 1; }
.svc-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-bloom); }
.svc-feature:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 4px; }
.svc-feature__title {
  font-family: var(--type-display);
  font-size: var(--type-2);
  color: var(--cream-on-dark);
  margin: 0 0 var(--space-1);
}
.svc-feature__desc {
  color: rgba(245, 239, 230, 0.8);
  font-size: var(--type-5);
  line-height: 1.55;
  max-width: 44ch;
  margin: var(--space-1) 0 0;
}
/* Price sits on the dark photo scrim; cream keeps it AA-legible (was #c9805a, 2.62:1). */
.svc-feature .service-card__price { color: var(--cream-on-dark); opacity: 0.92; }

/* Real-photo sections (2026-11-01): About tour grid, single page figures, and
   the services panorama. Every tile in a set shares one aspect ratio. */
.photo-tour {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-4);
}
@media (min-width: 900px) { .photo-tour { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photo-tour__item,
.photo-figure { margin: 0; }
/* The banner is also a .container: reset only block margins so it stays centered. */
.photo-banner { margin-block: 0; }
.photo-tour__item img,
.photo-figure img,
.photo-banner img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); object-fit: cover; }
.photo-tour__item img,
.photo-figure img { aspect-ratio: 4 / 3; }
.photo-banner img { aspect-ratio: 3 / 1; }
.photo-figure { margin-top: var(--space-4); }
.photo-tour__item figcaption,
.photo-figure figcaption { margin-top: var(--space-1); color: var(--ink-muted); font-size: var(--type-6); }
/* A page's second photo, set inside the text column at its own portrait shape. */
.photo-figure--portrait { max-width: 440px; margin-block: var(--space-4); }
.photo-figure--portrait img { aspect-ratio: 928 / 1152; }

/* Editorial pull-quote reviews. */
.pull-quote { position: relative; border: 0; background: transparent; padding: var(--space-3) 0 0; }
.pull-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.18em;
  left: -0.08em;
  font-family: var(--type-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--brand-orange);
  opacity: 0.22;
  pointer-events: none;
}
.pull-quote .review__quote { font-size: var(--type-3); line-height: 1.35; }

/* Most-booked pricing row, weighted via background tint + heavier type (no side stripe). */
.price-row--featured {
  background: var(--brand-cream-soft);
}
.price-row--featured .price-row__name { font-weight: 600; }
.price-row--featured .price-row__amount { font-weight: 600; }

/* Booking selector pills (book.html): meet 44px min touch target. CSS-only;
   the booking markup/handler are unchanged. */
.book-pick {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============ LIVE REVIEWS WIDGET ============ */
/* Consumed by the /api/reviews fetch on reviews.html and the two combo landing
   pages (spa-combo, couples-spa). #reviews stays [hidden] until the fetch
   confirms >=1 real review; the static attributed fallback shows otherwise.
   (reviews.html carries its own inline copy; these globals let the combo pages
   reuse the exact same widget.) */
#reviews { animation: reviewsIn 0.7s var(--ease-organic) both; }
@keyframes reviewsIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.reviews-summary {
  font-family: var(--type-ui);
  font-size: var(--type-5);
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em 0.6em;
  margin: 0;
}
.reviews-summary__stars { color: var(--brand-orange); letter-spacing: 0.08em; }
.reviews-summary [data-rating] { color: var(--ink); font-weight: 600; }
.reviews-summary__dot { color: var(--line-strong); }
.reviews-summary a { white-space: nowrap; }
.review--live { display: flex; flex-direction: column; }
.review--live .review__quote {
  font-family: var(--type-body);
  font-size: var(--type-5);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
  margin: auto 0 0;
  padding-top: var(--space-2);
}
.review__when {
  font-family: var(--type-ui);
  font-size: var(--type-7);
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.reviews-attribution {
  font-family: var(--type-ui);
  font-size: var(--type-7);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  margin: var(--space-3) 0 0;
}

/* ============ COMBO LP — MOBILE STICKY CTA ============ */
/* Rendered only on the two combo landing pages (spa-combo, couples-spa), so it
   never appears on /book. Mobile-only; hidden on desktop. Repeats the one
   primary action (Check availability) with the total price. */
.combo-sticky-cta { display: none; }
@media (max-width: 640px) {
  .combo-sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 247, 243, 0.96);
    backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(42, 30, 22, 0.10);
  }
  .combo-sticky-cta__price {
    font-family: var(--type-display);
    font-size: var(--type-4);
    color: var(--ink);
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .combo-sticky-cta .btn { flex: 1 1 auto; min-width: 0; }
  /* Keep the footer's last line clear of the fixed bar. */
  body:has(.combo-sticky-cta) .site-footer { padding-bottom: calc(var(--space-3) + 92px); }
}

/* ============ JM ADDITIONS ============ */
/* Footer: brand + four link columns (Treatments, Quick Links, Areas We Serve, Visit Us). */
.site-footer__legal a { color: inherit; }
.site-footer__rating { margin-top: var(--space-2); font-family: var(--type-ui); font-size: var(--type-6); color: rgba(250, 247, 243, 0.85); }
.site-footer__rating .stars { color: var(--brand-orange-on-dark); letter-spacing: 0.08em; }
.star-half { position: relative; display: inline-block; color: rgba(250, 247, 243, 0.25); }
.star-half::before { content: "\2605"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--brand-orange-on-dark); }
.site-footer address { font-style: normal; color: rgba(250, 247, 243, 0.85); line-height: 1.6; }

/* Phone Book/Call bar: kept on purpose (Elite has none). Phones only. */
.m-cta { display: none; }
@media (max-width: 900px) {
  .m-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1) calc(var(--space-2) + 64px) calc(var(--space-1) + env(safe-area-inset-bottom, 0px)) var(--space-2);
    background: rgba(250, 247, 243, 0.96);
    backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(42, 30, 22, 0.10);
  }
  .m-cta .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--space-2); }
  body:has(.m-cta) .site-footer { padding-bottom: calc(var(--space-3) + 80px); }
}

/* Centered utility paragraphs span the row (p max-width 65ch would hold them left). */
p.text-center { max-width: none; }

/* Header. JM keeps every label on one line and shows the menu button up to 1239px. From 1240px the full row
   (8 links, phone number, Book Now) fits beside the brand with Elite's spacing: no list gap, the button set off. */
.site-nav__link { white-space: nowrap; }
@media (max-width: 1239px) {
  .site-nav__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--brand-cream);
    border-bottom: 1px solid var(--line);
    padding: var(--space-2) var(--space-3) var(--space-3);
    box-shadow: 0 8px 24px rgba(42, 38, 34, 0.08);
    /* Short phones: the open menu scrolls so Book Now is always reachable. */
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav__list--open { display: flex; }
  .site-nav__link {
    padding: var(--space-2);
    border-bottom: 1px solid var(--line);
    justify-content: flex-start;
    min-height: 48px;
  }
  .site-nav__list .btn { margin-top: var(--space-2); }
  .site-nav__menu-toggle { display: inline-flex; }
}
@media (min-width: 1240px) {
  .site-nav__list { gap: 0; }
  .site-nav__list .btn { margin-left: var(--space-1); padding-inline: 1.25rem; }
}

/* Footer: two columns on tablets; on desktop the four link columns size to their content (one line each)
   and the brand column takes the rest. */
@media (min-width: 700px) and (max-width: 1099px) {
  .site-footer__grid--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .site-footer__grid--cols { grid-template-columns: minmax(0, 1fr) repeat(4, max-content); gap: var(--space-4) var(--space-3); }
  .site-footer__grid--cols .site-footer__list { font-size: var(--type-6); white-space: nowrap; }
}

/* Trust band: 2 x 2 on small tablets instead of 3 + 1. */
@media (min-width: 600px) and (max-width: 899px) {
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
}

/* Phones: the hero copy runs full width, so the scrim also darkens top to bottom. */
@media (max-width: 640px) {
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(20, 18, 16, 0.30) 0%, rgba(20, 18, 16, 0.55) 45%, rgba(20, 18, 16, 0.80) 100%),
      linear-gradient(90deg, rgba(20, 18, 16, 0.80) 0%, rgba(20, 18, 16, 0.55) 30%, rgba(20, 18, 16, 0.05) 65%, transparent 100%);
  }
}

/* Homepage services: two feature panels (photos drop in later) then three cards; quiet notes under the grid. */
@media (min-width: 800px) {
  .svc-editorial__rest--3 { grid-template-columns: repeat(3, 1fr); }
}
.svc-notes { margin-top: var(--space-4); }
.svc-notes p { font-size: var(--type-6); color: var(--ink-muted); line-height: 1.6; }
.cta-band__text { text-wrap: balance; }
.reviews-summary .stars { color: var(--brand-orange); letter-spacing: 0.08em; }
.reviews-summary .star-half { color: var(--line-strong); }
.reviews-summary .star-half::before { color: var(--brand-orange); }
/* Gift card amount tiles: two by two on phones, one row of four from 480px. */
.service-grid[data-gift-tiles] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .service-grid[data-gift-tiles] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Star rows on light sections (foot massage & head spa page): orange stars, the last one half filled. */
.star-row { color: var(--brand-orange); letter-spacing: 0.08em; }
.star-row .star-half { color: var(--line-strong); }
.star-row .star-half::before { color: var(--brand-orange); }
/* A heading that follows body text gets more room above than below, so it reads with the text it introduces. */
main :is(p:not(.eyebrow), ul, ol, figure, blockquote) + :is(h2, h3) { margin-top: var(--space-4); }
/* Feature panels: 16:10 plus a 340px minimum height forces 544px wide, wider than a half column below 1240px. */
@media (min-width: 800px) and (max-width: 1239px) {
  .svc-feature--a,
  .svc-feature--b { aspect-ratio: auto; }
}

/* Service pages: JM's hero facts as one quiet line (price first), and price rows that link to booking. */
.svc-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-3) auto 0;
  font-family: var(--type-ui);
  font-size: var(--type-6);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
@media (min-width: 600px) { .svc-pill { white-space: nowrap; } }
.svc-pill--price { color: var(--brand-orange); font-weight: 500; }
a.price-row { color: inherit; text-decoration: none; transition: background-color 0.2s ease; }
a.price-row:hover,
a.price-row:focus-visible { background: var(--brand-cream-soft); }
/* Two columns: price and Book stay on screen beside the long service text (clears the sticky header). */
@media (min-width: 800px) {
  .svc-price-col { position: sticky; top: calc(80px + var(--space-3)); }
}
/* Visit block on the foot massage & head spa page (Elite's address, phone, hours). */
.svc-visit { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-1); }
.svc-visit strong { font-family: var(--type-ui); font-weight: 500; margin-right: 0.5em; }
/* Service-area chips on /massage-salt-lake-city: area pages link, other cities are plain. */
.area-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.area-chips li { border: 1px solid var(--line); border-radius: 999px; padding: 0.4em 1em; font-family: var(--type-ui); font-size: var(--type-6); color: var(--ink-muted); }
.area-chips a { color: var(--brand-orange); text-decoration: none; }
.area-chips a:hover, .area-chips a:focus-visible { text-decoration: underline; }
/* Blog posts: the side note box (full border, no side stripe). */
.post-note { background: var(--brand-cream-soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); margin-block: var(--space-4); color: var(--ink-muted); }
/* Long button labels ("Book Foot Massage at Elite Spa Utah →") wrap instead of pushing the page sideways on small
   phones, and two-column sections may shrink below their widest unbreakable child. */
.btn { white-space: normal; text-align: center; text-wrap: balance; }
/* Phone numbers and hour ranges never break mid-number ("(801) 288-" / "1118"). */
.nowrap,
.site-footer__list a[href^="tel:"] { white-space: nowrap; }
.cols-2 > * { min-width: 0; }
/* Phones: the four footer link lists sit two by two under a full-width brand block (was one 1,400px column). */
@media (max-width: 699px) {
  .site-footer__grid--cols { grid-template-columns: 1fr 1fr; column-gap: var(--space-3); }
  .site-footer__grid--cols > div:first-child { grid-column: 1 / -1; }
}
/* Long SEO H1s and the hero facts line: balanced rag, full-width pill row (no lone orphan pill). */
.page-header h1 { text-wrap: balance; }
.svc-pills { max-width: none; }