:root {
  --emerald: #1d4e89;
  --emerald-dark: #0b2038;
  --mint: #e7eef9;
  --sage: #647793;
  --ink: #1e2522;
  --muted: #64706b;
  --line: #dce3ea;
  --paper: #f6f9fd;
  --white: #ffffff;
  --rose: #b9824a;
  --gold: #d8aa4b;
  --shadow: 0 20px 50px rgba(8, 20, 40, 0.14);
}

* {
  box-sizing: border-box;
}

/* The HTML [hidden] attribute must always win. Many components set display
   (flex/grid/inline-flex), which silently overrides the UA [hidden]{display:none}
   and leaves "hidden" elements visible (this caused the service filter, the
   therapy grid, and the wizard's Back/Submit buttons to all show when they
   shouldn't). One global rule makes [hidden] authoritative everywhere. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Lato, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: clip;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.top-strip {
  background: linear-gradient(120deg, var(--emerald-dark), var(--emerald));
  color: var(--white);
  font-size: 15px;
}

.announcement-bar {
  background: var(--mint);
  color: var(--emerald-dark);
  text-align: center;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 800;
  border-bottom: 1px solid var(--line);
}

.quick-nav-section {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 90px;
  z-index: 20;
}

.quick-nav {
  padding: 12px 22px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-left: 16px;
  -webkit-overflow-scrolling: touch;
}

.quick-nav::-webkit-scrollbar {
  display: none;
}

.quick-nav a {
  flex: 0 0 auto;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--emerald-dark);
  font-size: 13px;
  font-weight: 900;
}

.top-strip .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 22px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.top-strip a {
  font-weight: 900;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.nav-wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 230px;
}

.brand-logo-img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--emerald);
  flex: 0 0 auto;
}

.brand-name {
  font-weight: 800;
  line-height: 1.15;
  font-size: 19px;
  color: var(--emerald-dark);
}

.brand-sub {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.nav-links a:hover,
.nav-links a.active {
  background: var(--mint);
  color: var(--emerald-dark);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-actions .menu-toggle {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn:disabled:hover,
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  transform: none;
}

.btn:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.btn-primary {
  background: linear-gradient(120deg, var(--emerald), var(--emerald-dark));
  color: var(--white);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.btn-secondary {
  border-color: var(--emerald);
  color: var(--emerald-dark);
  background: var(--white);
}

.btn-soft {
  background: var(--mint);
  color: var(--emerald-dark);
}

.hero {
  min-height: 74vh;
  display: grid;
  align-items: end;
  position: relative;
  color: var(--white);
  background-color: var(--emerald-dark);
  background-position: center;
  background-size: cover;
}

.page-hero.hero {
  min-height: 58vh;
}

body[data-page="home"] .page-hero.hero {
  min-height: 60vh;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--emerald-dark) 84%, transparent), color-mix(in srgb, var(--emerald-dark) 42%, transparent) 48%, color-mix(in srgb, var(--emerald-dark) 18%, transparent));
}

.hero .inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding: 110px 22px 72px;
}

.eyebrow {
  color: #836527;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
}

/* Brighter gold reads fine (and looks better) on dark backgrounds. */
.hero .eyebrow,
.page-hero .eyebrow,
.booking-info .eyebrow,
.contact-band .eyebrow {
  color: var(--gold);
}

/* Hero promo badge — a premium gold pill for a limited-time offer
   (e.g. the Grand Opening special). It sits above the eyebrow and is
   editable in Live edit exactly like any other hero text. */
.hero-badge {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 18px 44px;
  border-radius: 999px;
  /* Two layers: a moving glossy "shine" band (behind the text, so text stays
     readable) over the gold gradient. */
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.6) 43%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.6) 57%, transparent 72%) no-repeat,
    linear-gradient(135deg, #ffe9a6 0%, #eec25c 46%, #cf9836 100%);
  background-size: 260% 100%, 100% 100%;
  color: #3a2708;
  font-weight: 900;
  font-size: clamp(25px, 4vw, 46px);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  line-height: 1.05;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), 0 0 0 rgba(240, 196, 80, 0), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: heroBadgeGlow 2s ease-in-out infinite, heroBadgeShine 2.3s ease-in-out infinite;
}
.hero-badge::before {
  content: "✦";
  font-size: 1.05em;
  line-height: 1;
  color: #7a5410;
  transform-origin: center;
  animation: heroBadgeTwinkle 2.2s ease-in-out infinite;
}
/* A bright golden pulse to make the offer pop. */
@keyframes heroBadgeGlow {
  0%, 100% { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), 0 0 6px rgba(255, 205, 95, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
  50% { box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42), 0 0 48px rgba(255, 205, 95, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
}
/* The glossy shine sweeps across the pill more often — a lively "闪闪" glint. */
@keyframes heroBadgeShine {
  0% { background-position: -70% 0, 0 0; }
  60%, 100% { background-position: 210% 0, 0 0; }
}
/* The sparkle icon twinkles. */
@keyframes heroBadgeTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.3) rotate(20deg); opacity: 1; }
}
/* Phones: a smaller, tidy pill instead of a chunky multi-line blob. */
@media (max-width: 560px) {
  .hero-badge {
    gap: 9px;
    margin: 0 0 18px;
    padding: 11px 22px;
    font-size: 17px;
    letter-spacing: 0.4px;
    border-width: 1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge, .hero-badge::before { animation: none; }
}
/* Live edit: hint the owner to type when the badge is still empty. */
body.emerald-edit .hero-badge {
  min-width: 40px;
  cursor: text;
}
body.emerald-edit .hero-badge:empty::after {
  content: attr(data-ph);
  opacity: 0.72;
  font-weight: 800;
}

/* --- Promo banner: a slim clickable gold capsule between sections ------------
   Same gold gradient, shine sweep, glow pulse and twinkling star as the hero
   badge (all keyframes reused), sized down to sit under the hero without
   fighting it. Rendered by script.js for sections of type "promoBanner". */
.promo-banner-section {
  padding: 58px 0 50px;
  text-align: center;
}
/* Supporting line under the capsule so the band reads as a real section, not a
   lone floating pill. */
.promo-banner-note {
  max-width: 640px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}
.promo-banner {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 34px;
  border-radius: 999px;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.6) 43%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.6) 57%, transparent 72%) no-repeat,
    linear-gradient(135deg, #ffe9a6 0%, #eec25c 46%, #cf9836 100%);
  background-size: 260% 100%, 100% 100%;
  color: #3a2708;
  font-weight: 900;
  font-size: clamp(15px, 2.1vw, 23px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 26px rgba(8, 20, 40, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: heroBadgeGlow 2s ease-in-out infinite, heroBadgeShine 2.3s ease-in-out infinite;
  transition: transform 0.18s ease;
}
.promo-banner::before {
  content: "✦";
  font-size: 1.05em;
  line-height: 1;
  color: #7a5410;
  transform-origin: center;
  animation: heroBadgeTwinkle 2.2s ease-in-out infinite;
}
a.promo-banner:hover {
  transform: translateY(-2px);
}
a.promo-banner:focus-visible {
  outline: 3px solid var(--emerald);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .promo-banner-section {
    padding: 36px 0 30px;
  }
  .promo-banner {
    gap: 9px;
    padding: 11px 20px;
    font-size: 14px;
    letter-spacing: 0.35px;
    border-width: 1px;
  }
  .promo-banner-note {
    font-size: 14.5px;
    margin-top: 12px;
    padding: 0 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .promo-banner, .promo-banner::before { animation: none; }
}

/* Small gold shimmer badge above a section title (introSplit "badge" field) —
   the capsule look scaled down to eyebrow duty. Same keyframes as the hero badge. */
.promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding: 14px 32px;
  border-radius: 999px;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.6) 43%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.6) 57%, transparent 72%) no-repeat,
    linear-gradient(135deg, #ffe9a6 0%, #eec25c 46%, #cf9836 100%);
  background-size: 260% 100%, 100% 100%;
  color: #3a2708;
  font-weight: 900;
  font-size: clamp(17px, 1.9vw, 22px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.25;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 20px rgba(8, 20, 40, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: heroBadgeGlow 2s ease-in-out infinite, heroBadgeShine 2.3s ease-in-out infinite;
}
.promo-pill::before {
  content: "✦";
  font-size: 1.05em;
  line-height: 1;
  color: #7a5410;
  transform-origin: center;
  animation: heroBadgeTwinkle 2.2s ease-in-out infinite;
}

/* Promo variant of the intro split (section has a gold badge): the image is a
   portrait POSTER, not a photo — keep its natural shape at a capped height,
   centred in its column, instead of stretching to fill (which blew a 1078x1520
   poster up past the viewport and left the text column floating in space). */
.promo-split .split {
  gap: 48px;
}
.promo-split .split img {
  width: auto;
  max-width: 100%;
  min-height: 0;
  max-height: 540px;
  object-fit: contain;
  justify-self: center;
  border-radius: 14px;
}
/* The poster is wrapped in a lightbox link — the anchor becomes the grid item,
   so centre it and signal that a click zooms. */
.promo-split .split .gallery-link {
  justify-self: center;
  display: block;
  line-height: 0;
  cursor: zoom-in;
}
@media (max-width: 720px) {
  .promo-split .split img {
    max-height: 430px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .promo-pill, .promo-pill::before { animation: none; }
}

.hero h1,
.page-hero h1 {
  margin: 10px 0 14px;
  max-width: 820px;
  font-size: clamp(38px, 5.6vw, 62px);
  line-height: 0.96;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.hero p,
.page-hero p {
  max-width: 700px;
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 28px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.center-actions {
  justify-content: center;
  margin-top: 30px;
}

.hero-actions .btn {
  min-width: 168px;
}

.page-hero {
  color: var(--white);
  background-position: center;
  background-size: cover;
  position: relative;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--emerald-dark) 86%, transparent), color-mix(in srgb, var(--emerald-dark) 36%, transparent));
}

.page-hero .inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 92px 22px;
}

.section {
  padding: 72px 22px;
}

.section.alt {
  background: var(--white);
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.section-head {
  max-width: 760px;
  margin-bottom: 34px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

h2 {
  margin: 0 0 12px;
  font-size: clamp(25px, 3.3vw, 38px);
  line-height: 1.08;
  color: var(--emerald-dark);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

h3 {
  margin: 0 0 10px;
  color: var(--emerald-dark);
  line-height: 1.2;
}

p {
  margin-top: 0;
}

.lead {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

/* Mobile "Read more" — the .clamp-mobile class is only added by JS on phones, so
   these rules are inert on desktop. Clamps long marketing copy to a short preview
   with a tap-to-expand toggle. */
.clamp-mobile {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.clamp-mobile.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.read-more-btn {
  display: inline-flex;
  align-items: center;
  margin: 9px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--emerald);
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.read-more-btn::after { content: " ›"; font-weight: 700; }
.read-more-btn[aria-expanded="true"]::after { content: " ‹"; }
.read-more-btn:hover { text-decoration: underline; }

.grid {
  display: grid;
  gap: 22px;
}

/* auto-fit so that when cards are removed, the rest stretch to fill the row
   (no empty trailing column). The min() keeps one clean column on phones. */
.grid.two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

.grid.three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid.four {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(8, 20, 40, 0.07);
}

.card-body {
  padding: 22px;
}

.card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.service-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Square (1:1) service-card images. The owner's photos are a mix of landscape and
   portrait; a square frame crops far less of a portrait shot than the old fixed
   230px landscape band, while still looking tidy for landscape ones. */
.service-card img {
  height: auto;
  aspect-ratio: 1 / 1;
}

.service-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Service card actions: a Book button + Read more, pinned to the card bottom. */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.service-card .card-actions { margin-top: auto; }
.service-card .card-actions .btn { margin-top: 0; align-self: auto; }

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}

.split img {
  border-radius: 8px;
  box-shadow: var(--shadow);
  width: 100%;
  min-height: 420px;
  object-fit: cover;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.stat {
  border-left: 4px solid var(--rose);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.7);
}

.stat strong {
  display: block;
  color: var(--emerald-dark);
  font-size: 24px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  margin: 16px 0 28px;
}

.price-mobile-list {
  display: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

th,
td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  background: var(--mint);
  color: var(--emerald-dark);
  font-size: 14px;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
}

.pill-list li {
  background: var(--mint);
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--emerald-dark);
  font-weight: 800;
  font-size: 14px;
}

/* =====================================================================
   SPA PRICE MENU — editorial image + dotted-leader menu (scoped .spa-menu).
   Opt-in via priceSection layout:"menu". Each category = a premium photo
   beside its price list (name · gold dotted leader · price), alternating
   sides like a magazine spread; stacks on mobile.
   ===================================================================== */
.spa-menu {
  --sm-ink: var(--emerald-dark, #0b2038);
  --sm-body: var(--ink, #1e2522);
  --sm-gold: var(--gold, #bf9442);
  --sm-line: var(--line, #dce3ea);
  --sm-muted: var(--muted, #64706b);

  /* Fills its (widened, see .section--menu) container: each category is a wide
     editorial band — photo beside a multi-column price list — stacked top to
     bottom. Reads naturally and uses the screen width instead of a narrow column. */
  margin: clamp(26px, 3.2vw, 46px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 30px);
}

/* The spa price menu gets a wider container than the default 1180 .wrap so it
   uses the screen instead of leaving big empty side margins. The heading stays
   narrow (.section-head caps it); only the menu grid goes full width. */
.section--menu > .wrap { max-width: min(1600px, calc(100% - 40px)); }

/* One category = a wide band: photo on one side, the price list on the other,
   alternating sides down the page like a magazine spread. */
.spa-menu__group {
  display: flex;
  align-items: stretch;
  background: var(--white, #fff);
  border: 1px solid var(--sm-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(11, 32, 56, 0.08);
}
/* Alternate down the page: photo on the right for even bands. row-reverse keeps
   the photo the narrow side and the price list the wide side, and align-items:
   stretch makes the photo grow to the full height of the list beside it. */
.spa-menu__group:nth-child(even) { flex-direction: row-reverse; }

.spa-menu__media {
  flex: 0 0 clamp(240px, 27%, 340px);
  position: relative;
  overflow: hidden;
  min-height: 208px;
  background: var(--sm-line);
}
.spa-menu__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spa-menu__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.8vw, 30px) clamp(22px, 2vw, 34px);
  min-width: 0;
}

.spa-menu__book {
  align-self: flex-start;
  margin-top: 18px;
  min-height: 0;
  padding: 9px 18px;
  font-size: 14px;
  border-radius: 999px;
  gap: 7px;
  box-shadow: 0 8px 18px rgba(11, 32, 56, 0.14);
}
.spa-menu__book svg,
.spa-menu__book i { width: 16px; height: 16px; }
@media (max-width: 680px) {
  .spa-menu__book { width: 100%; justify-content: center; margin-top: 16px; }
}

.spa-menu__head {
  margin: 0 0 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sm-line);
}
.spa-menu__title {
  margin: 0;
  font-size: clamp(1.04rem, 1.4vw, 1.22rem);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sm-ink);
  overflow-wrap: anywhere;
}
.spa-menu__rule {
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--sm-gold);
}

/* The price list flows into as many ~232px columns as the band is wide, so long
   categories (Waxing, Hands & Feet) stay short instead of a tall single column. */
.spa-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 232px;
  column-gap: clamp(22px, 2.4vw, 44px);
}
.spa-menu__item { list-style: none; break-inside: avoid; }
.spa-menu__hint { break-inside: avoid; }

.spa-menu__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  font-size: 0.96rem;
  line-height: 1.45;
  break-inside: avoid;
}
.spa-menu__row + .spa-menu__row {
  border-top: 1px solid color-mix(in srgb, var(--sm-line) 60%, transparent);
}

.spa-menu__name {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--sm-body);
  font-weight: 500;
  overflow-wrap: anywhere;
  hyphens: none;
}

.spa-menu__leader {
  flex: 1 1 auto;
  align-self: flex-end;
  height: 0.62em;
  min-width: 14px;
  border-bottom: 1px dotted color-mix(in srgb, var(--sm-gold) 55%, var(--sm-muted));
  transform: translateY(-0.16em);
}

.spa-menu__price {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
  color: var(--sm-gold);
  font-weight: 700;
}

/* Tablets & phones: cancel the wide break-out and stack photo-on-top with a
   single-column price list. */
@media (max-width: 760px) {
  .spa-menu {
    margin-top: 22px;
    gap: 16px;
  }
  .spa-menu__group,
  .spa-menu__group:nth-child(even) { flex-direction: column; border-radius: 14px; }
  .spa-menu__media { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .spa-menu__body { padding: 15px 17px 19px; }
  .spa-menu__list { columns: auto; }
  .spa-menu__head { margin-bottom: 11px; padding-bottom: 9px; }
  .spa-menu__title { font-size: 0.92rem; letter-spacing: 0.1em; }
  .spa-menu__rule { width: 32px; margin-top: 9px; }
  /* Tighter rows so more of the menu fits per screen */
  .spa-menu__row { font-size: 0.9rem; padding: 7px 0; line-height: 1.35; }
  .spa-menu__price { font-size: 0.9rem; }
}

@media print {
  .spa-menu__media { box-shadow: none; }
  .spa-menu__price { color: #8a6a1f; }
  .spa-menu__leader { border-bottom-color: #9aa0a6; }
}

/* ===== Spa menu: tap-to-pick rows + shared "order" cart bar ============== */
.spa-menu__item { list-style: none; }
button.spa-menu__row {
  width: 100%;
  background: none;
  border: 0;
  border-radius: 10px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding-left: 9px;
  padding-right: 9px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .15s ease;
}
.spa-menu__item + .spa-menu__item > button.spa-menu__row {
  border-top: 1px solid color-mix(in srgb, var(--sm-line) 60%, transparent);
}
button.spa-menu__row:hover { background: color-mix(in srgb, var(--sm-gold) 9%, transparent); }
button.spa-menu__row:focus-visible { outline: 2px solid var(--sm-gold); outline-offset: 1px; }

.spa-menu__check {
  flex: 0 0 auto;
  align-self: center;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--sm-gold) 55%, var(--sm-muted));
  border-radius: 6px;
  color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.spa-menu__check svg, .spa-menu__check i { width: 13px; height: 13px; }

.spa-menu__row.is-picked { background: color-mix(in srgb, var(--sm-gold) 15%, transparent); }
.spa-menu__row.is-picked .spa-menu__check { background: var(--sm-gold); border-color: var(--sm-gold); color: #fff; }
.spa-menu__row.is-picked .spa-menu__name { font-weight: 700; color: var(--sm-ink); }

.spa-menu__hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin: 16px 0 0;
  padding: 7px 13px;
  font-size: 12.5px;
  color: var(--sm-muted);
  background: color-mix(in srgb, var(--sm-gold) 9%, transparent);
  border-radius: 999px;
}
.spa-menu__hint svg, .spa-menu__hint i { width: 15px; height: 15px; color: var(--sm-gold); flex: 0 0 auto; }

/* The fixed order bar — appears once a service is picked. */
.spa-cart {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(680px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px 11px 20px;
  background: var(--emerald-dark);
  color: #fff;
  border-radius: 16px;
  border: 1px solid rgba(216, 170, 75, 0.4);
  box-shadow: 0 16px 40px rgba(8, 20, 40, 0.35);
}
.spa-cart[hidden] { display: none; }
/* Phones: the fixed bottom action bar (Call · Book · …) owns the bottom edge —
   lift the cart above it (bar ≈ 62px tall + iPhone safe area) so "Book selected"
   is never covered. */
@media (max-width: 680px) {
  .spa-cart {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 20px);
    gap: 10px;
    padding: 10px 12px 10px 16px;
  }
}
.spa-cart__info { display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.2; }
.spa-cart__count { font-weight: 700; font-size: 13.5px; color: #dbe5f1; }
.spa-cart__total { font-size: 20px; font-weight: 800; color: var(--gold); }
.spa-cart__total:empty { display: none; }
.spa-cart__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.spa-cart__clear { background: none; border: 0; color: #cdd8e6; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; padding: 8px 6px; }
.spa-cart__clear:hover { color: #fff; text-decoration: underline; }
.spa-cart__book { min-height: 0; padding: 11px 18px; border-radius: 999px; white-space: nowrap; box-shadow: none; }
/* While an order is being built, hide the floating Help bubble so it can't sit on
   top of the cart bar's "Book selected" button (they share the bottom edge). */
body.has-spa-cart .emf-faq-fab { opacity: 0; pointer-events: none; visibility: hidden; }
/* …and make room so the fixed cart bar never covers the footer / last rows. */
body.has-spa-cart { padding-bottom: 96px; }
@media (max-width: 680px) { body.has-spa-cart { padding-bottom: 150px; } }
@media (max-width: 680px) {
  .spa-cart { bottom: 76px; width: calc(100% - 18px); padding: 9px 11px 9px 15px; gap: 9px; border-radius: 14px; }
  .spa-cart__total { font-size: 18px; }
  .spa-cart__count { font-size: 12.5px; }
  .spa-cart__book { padding: 10px 14px; font-size: 14px; }
  .spa-cart__clear { padding: 6px 4px; }
}

/* Booking wizard — "Your selected services" order banner (carried from the menu) */
.bw-order {
  margin: 0 0 18px;
  padding: 15px 17px;
  background: color-mix(in srgb, var(--mint) 50%, #fff);
  border: 1px solid color-mix(in srgb, var(--emerald) 24%, var(--line));
  border-radius: 14px;
}
.bw-order-head { display: flex; align-items: center; gap: 8px; color: var(--emerald-dark); font-size: 15px; }
.bw-order-head strong { font-weight: 800; }
.bw-order-head svg, .bw-order-head i { width: 18px; height: 18px; color: var(--emerald); }
.bw-order-edit { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--emerald); text-decoration: none; }
.bw-order-edit:hover { text-decoration: underline; }
.bw-order-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.bw-order-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink); }
.bw-order-list li span:last-child { font-weight: 700; color: var(--emerald); white-space: nowrap; }
.bw-order-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--emerald) 30%, var(--line)); }
.bw-order-total span { font-size: 13px; color: var(--muted); font-weight: 600; }
.bw-order-total strong { font-size: 19px; font-weight: 800; color: var(--emerald-dark); }
.bw-order-note { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.bw-order-note svg, .bw-order-note i { width: 14px; height: 14px; color: var(--gold); flex: 0 0 auto; margin-top: 2px; }

.note {
  border-left: 4px solid var(--gold);
  background: #fff8e8;
  padding: 18px 20px;
  border-radius: 8px;
}

.contact-band {
  background: var(--emerald-dark);
  color: var(--white);
  padding-top: 44px;        /* tighter than the global 72px section padding */
  padding-bottom: 44px;
}

/* Center the two columns so the action button sits beside the copy instead of
   floating at the top with a tall empty navy gap beneath it. */
.contact-band .grid.two {
  align-items: center;
  gap: 16px 40px;
}
/* Right column: keep the CTA buttons left-aligned and compact, not stretched. */
.contact-band .grid.two > div:last-child .actions { margin-top: 0; }

.contact-band h2,
.contact-band h3 {
  color: var(--white);
  margin-bottom: 6px;
}

.contact-band .lead {
  color: #d9eee8;
  margin: 0;
}

.contact-list {
  display: grid;
  gap: 12px;
}

.contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.contact-item svg {
  color: var(--gold);
  min-width: 22px;
  margin-top: 3px;
}

form {
  display: grid;
  gap: 14px;
}

label {
  font-weight: 800;
  color: var(--emerald-dark);
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font: inherit;
  background: var(--white);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--mint);
}

textarea {
  min-height: 130px;
  resize: vertical;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Live (in-place) editing affordances — only active in the admin Live Edit tab */
body.emerald-edit [data-edit] {
  border-radius: 4px;
  transition: outline 0.12s ease, background 0.12s ease;
}

body.emerald-edit [data-edit]:hover {
  outline: 2px dashed var(--gold);
  outline-offset: 3px;
  cursor: text;
}

body.emerald-edit [data-edit]:focus {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  background: rgba(255, 255, 255, 0.75);
}

body.emerald-edit img[data-edit-img] {
  cursor: pointer;
}

body.emerald-edit img[data-edit-img]:hover {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

/* Live-edit formatting toolbar (Bold / italic / size / colour / font). It floats
   above the text being edited; only present inside the admin Live edit iframe. */
.em-fmt-toolbar {
  position: fixed;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: #0b2038;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  font-family: system-ui, -apple-system, sans-serif;
}
.em-fmt-toolbar.show { display: flex; }
.em-fmt-toolbar button,
.em-fmt-toolbar select {
  height: 34px;
  min-width: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.em-fmt-toolbar button:hover,
.em-fmt-toolbar select:hover { background: rgba(255, 255, 255, 0.2); }
.em-fmt-toolbar select { min-width: 74px; }
.em-fmt-toolbar button[data-cmd="clear"] { font-weight: 600; font-size: 12px; }
.em-fmt-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.18); margin: 0 3px; }
.em-fmt-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  width: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  overflow: hidden;
}
.em-fmt-color span { color: #fff; font-weight: 800; font-size: 15px; pointer-events: none; }
.em-fmt-color input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Live-edit: insert a new text block, and remove an inserted one. */
.em-add-text-block {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9998;
  padding: 12px 18px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #1d4e89, #0b2038);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}
.em-add-text-block:hover { filter: brightness(1.08); }
body.emerald-edit .rich-text-section { position: relative; }
.em-del-section {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(180, 40, 40, 0.4);
  background: #fff;
  color: #b42828;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.em-del-section:hover { background: #b42828; color: #fff; }

/* Live-edit gallery management: per-photo Remove + a "click to replace" hint, and
   a big Add-photo button. Only visible inside the admin Live edit (.emerald-edit). */
body.emerald-edit .gallery-edit-item {
  position: relative;
}
body.emerald-edit .gallery-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(192, 57, 43, 0.92);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}
body.emerald-edit .gallery-edit-item:hover .gallery-remove-btn {
  opacity: 1;
}
body.emerald-edit .gallery-remove-btn:hover {
  transform: scale(1.08);
  background: #c0392b;
}
body.emerald-edit .gallery-remove-btn svg {
  width: 17px;
  height: 17px;
}
body.emerald-edit .gallery-edit-hint {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 41, 74, 0.88);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
body.emerald-edit .gallery-edit-hint svg {
  width: 14px;
  height: 14px;
}
body.emerald-edit .gallery-edit-item:hover .gallery-edit-hint {
  opacity: 1;
}
body.emerald-edit .gallery-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 22px;
  border: 2px dashed var(--gold, #c8a24a);
  border-radius: 12px;
  background: rgba(200, 162, 74, 0.08);
  color: var(--emerald-dark);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
body.emerald-edit .gallery-add-btn:hover {
  background: rgba(200, 162, 74, 0.18);
  border-color: var(--emerald-dark);
}
body.emerald-edit .gallery-add-btn svg {
  width: 18px;
  height: 18px;
}

.edit-photo-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(7, 36, 31, 0.8);
  color: #fff;
  border: 0;
  padding: 9px 13px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
}

.edit-photo-btn:hover {
  background: rgba(7, 36, 31, 0.96);
}

.edit-photo-btn svg {
  width: 16px;
  height: 16px;
}

.footer {
  background: linear-gradient(160deg, var(--emerald-dark), color-mix(in srgb, var(--emerald-dark) 78%, #000));
  color: #cdd8e6;
  padding: 40px 22px 0;
  margin-top: 8px;
}

.footer a {
  color: #eaf0f7;
}

.footer a:hover {
  color: #ffffff;
}

.footer h3 {
  color: #ffffff;
  font-size: 12.5px;
  text-transform: uppercase;
  margin: 0 0 12px;
  letter-spacing: 0.7px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 28px;
  padding-bottom: 26px;
}

.footer-line {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 9px 0 0;
  font-size: 13.5px;
}

.footer-line svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex: 0 0 auto;
  margin-top: 3px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.footer-links a {
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-hours {
  margin: 0 0 14px;
  color: #9fb3ac;
  font-size: 13px;
}

.footer-book {
  width: 100%;
  max-width: 240px;
}

.footer-share .small {
  margin-bottom: 12px;
}

.footer-qr {
  display: inline-block;
  background: #ffffff;
  padding: 7px;
  border-radius: 12px;
  line-height: 0;
  margin-bottom: 12px;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button.footer-qr:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.footer-qr img:not(.qr-logo) {
  width: 96px;
  height: 96px;
  display: block;
}

.footer-share-btn {
  width: 100%;
  max-width: 220px;
}

.footer-newsletter {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 0;
}

.footer-news-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}

.footer-news-copy { flex: 1 1 280px; min-width: 0; }
.footer-news-copy h3 { margin: 0 0 4px; font-size: 14.5px; text-transform: none; letter-spacing: 0; }
.footer-news-copy p { margin: 0; color: #9fb0c4; font-size: 13px; }

.footer-news-form {
  flex: 0 1 440px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

.footer-news-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font: inherit;
}

.footer-news-form input[type="email"]::placeholder { color: #8ea2b6; }
.footer-news-form input[type="email"]:focus {
  outline: none;
  border-color: var(--gold, #c8a24a);
  background: rgba(255, 255, 255, 0.12);
}

.footer-news-form .btn { flex: 0 0 auto; }

.footer-news-msg {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: 13.5px;
}
.footer-news-msg.is-ok { color: #8be0b0; }
.footer-news-msg.is-error { color: #ffb4b4; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px 0;
}

.footer-bottom .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: #8ea69d;
  font-size: 14px;
}

.footer-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-legal a {
  color: #b9c8c3;
  text-decoration: none;
  font-size: 14px;
}
.footer-legal a:hover {
  color: #fff;
  text-decoration: underline;
}

.small {
  font-size: 14px;
  color: var(--muted);
}

.footer .small {
  color: #b9c8c3;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}

.gallery-grid img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.gallery-grid figure {
  margin: 0;
}

.gallery-grid figcaption {
  padding-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* Gallery tiles open the in-page photo viewer — hint that they're tappable. */
.gallery-item .gallery-link {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
}

.gallery-item .gallery-link img {
  border-radius: 8px;
  transition: transform 0.45s ease;
}

.gallery-item .gallery-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 45, 0) 55%, rgba(11, 31, 45, 0.32) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.gallery-item .gallery-link:hover img,
.gallery-item .gallery-link:focus-visible img {
  transform: scale(1.05);
}

.gallery-item .gallery-link:hover::after,
.gallery-item .gallery-link:focus-visible::after {
  opacity: 1;
}

.gallery-item .gallery-link:focus-visible {
  outline: 3px solid var(--gold, #c9a24a);
  outline-offset: 2px;
}

/* ── Full-screen photo viewer (lightbox) ───────────────────────────── */
body.lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
}

.lightbox.open {
  display: flex;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 18, 27, 0.92);
  backdrop-filter: blur(2px);
  animation: lb-fade 0.2s ease;
}

@keyframes lb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-stage {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: lb-pop 0.22s ease;
}

@keyframes lb-pop {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.lightbox-counter {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lightbox-btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.lightbox-btn:hover,
.lightbox-btn:focus-visible {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lightbox-close {
  top: clamp(10px, 3vw, 26px);
  right: clamp(10px, 3vw, 26px);
  width: 46px;
  height: 46px;
  font-size: 30px;
  line-height: 1;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  font-size: 34px;
  line-height: 1;
}

.lightbox-prev { left: clamp(8px, 2.5vw, 28px); }
.lightbox-next { right: clamp(8px, 2.5vw, 28px); }

.lightbox-prev:hover,
.lightbox-next:hover { transform: translateY(-50%) scale(1.06); }

.lightbox-btn[hidden] { display: none; }

@media (max-width: 600px) {
  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
  .lightbox-img { max-height: 74vh; }
}

.testimonial p {
  font-size: 18px;
}

/* FAQ — a single, centered, always-aligned column (no lopsided 2-up grid). */
.faq-wrap {
  max-width: 780px;
  margin-inline: auto;
}

.faq-group {
  margin-top: 40px;
}
.faq-group:first-of-type {
  margin-top: 0;
}

.faq-group-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  color: var(--emerald-dark);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold, #c8a24a);
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  margin: 0;
  background: var(--white);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.faq-item:hover {
  border-color: var(--gold, #c8a24a);
}

.faq-item[open] {
  border-color: var(--gold, #c8a24a);
  box-shadow: 0 6px 20px rgba(15, 41, 74, 0.06);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  font-weight: 800;
  color: var(--emerald-dark);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* +/− affordance so it's clearly tap-to-expand */
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  color: var(--gold, #c8a24a);
  transition: transform .2s ease;
}
.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  padding: 0 18px 18px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.map-card iframe {
  display: block;
  width: 100%;
  height: 430px;
  border: 0;
}

.footer-logo {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #fff;
  text-decoration: none;
  margin-bottom: 10px;
}

.footer-logo img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}

.footer-logo strong,
.footer-logo small {
  display: block;
}
.footer-logo strong { font-size: 15.5px; }

.footer-logo small {
  color: #b9c8c3;
  margin-top: 3px;
  font-size: 12.5px;
}

.prose {
  max-width: 860px;
}

section[id] {
  scroll-margin-top: 140px;
}

/* Booking form — balanced two-tone card */
.booking-wrap {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
}

.booking-info {
  background: linear-gradient(165deg, var(--emerald), var(--emerald-dark));
  color: #ffffff;
  padding: 40px 34px;
}

.booking-info h2 {
  color: #ffffff;
}

.booking-info .lead {
  color: rgba(255, 255, 255, 0.86);
}

.booking-info .contact-list {
  margin-top: 22px;
}

.booking-info .contact-item {
  color: #ffffff;
}

.booking-info .contact-item svg {
  color: var(--gold);
}

.booking-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.55;
}

.booking-note svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex: 0 0 auto;
  margin-top: 1px;
}

.booking-form-panel {
  padding: 36px 34px;
}

.booking-form-panel h3 {
  margin-bottom: 18px;
}

.contact-booking-wrap {
  grid-template-columns: 0.9fr 1.1fr;
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contact-info-panel .contact-list {
  gap: 16px;
}

.contact-info-panel a {
  color: #ffffff;
}

.bk-time-field {
  display: grid;
  gap: 7px;
}

.bk-time-field select,
.bk-time-field input {
  max-width: 260px;
}

.booking-submit {
  width: 100%;
  margin-top: 6px;
}

.form-row {
  display: grid;
  gap: 14px;
}

.form-row.two {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 860px) {
  .booking-wrap {
    grid-template-columns: 1fr;
  }
}

/* Let the date/time inputs shrink inside the narrow split column instead of
   being clipped between ~681px and 1024px. */
.form-row.two > div,
.form-row.two input {
  min-width: 0;
}

/* ============================================================
   Step-by-step booking wizard
   ============================================================ */
.booking-section-head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.booking-wizard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Step indicator */
.bw-steps {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 10px 16px;
  background: linear-gradient(120deg, var(--emerald-dark), var(--emerald));
  overflow-x: auto;
}
.bw-step-ind {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: max-content;
  padding: 3px 12px 3px 3px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.bw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  flex: 0 0 auto;
}
.bw-step-ind.active { color: #fff; }
.bw-step-ind.active .bw-step-num { background: var(--gold); color: var(--emerald-dark); }
.bw-step-ind.done { color: rgba(255, 255, 255, 0.92); cursor: pointer; }
.bw-step-ind.done .bw-step-num { background: rgba(255, 255, 255, 0.92); color: var(--emerald-dark); }

/* Body: steps (left) + summary (right) */
.bw-body { display: grid; grid-template-columns: 1fr 300px; gap: 0; }
.bw-main { display: block; padding: 28px 30px; min-width: 0; }
/* Steps must be able to shrink to their column so the nowrap category chips and
   cards never blow the wizard out (they scroll/wrap inside instead). */
.bw-step { min-width: 0; }
.bw-cards { max-width: 100%; min-width: 0; }
.bw-step-title { margin: 0 0 18px; font-size: 21px; color: var(--emerald-dark); }
.bw-opt { font-weight: 400; color: var(--muted); font-size: 13px; }

/* Service / therapist cards */
.bw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bw-card {
  position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--white);
  padding: 13px 15px 12px; cursor: pointer; font: inherit; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
/* IMPORTANT: .bw-card sets display:flex, which would override the [hidden]
   attribute the category filter sets — so filtered-out cards must be hidden
   explicitly here. (This was the filter bug.) */
.bw-card[hidden] { display: none; }
/* Same trap for the grid container itself: .bw-cards sets display:grid, which
   overrides [hidden]{display:none}. Needed so the therapy grid actually hides
   when the length stage opens. */
.bw-cards[hidden] { display: none; }
.bw-card:hover { border-color: var(--emerald); box-shadow: 0 6px 16px rgba(8, 20, 40, 0.08); }
.bw-card.active { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--mint); }
.bw-card-name { font-weight: 800; color: var(--emerald-dark); font-size: 14.5px; line-height: 1.25; padding-right: 52px; display: flex; align-items: center; gap: 6px; }
.bw-card-name svg { width: 16px; height: 16px; color: var(--gold); flex: 0 0 auto; }
.bw-card-dur { font-size: 13px; color: var(--muted); font-weight: 600; }
.bw-card-price { position: absolute; top: 12px; right: 14px; font-weight: 800; color: var(--emerald); font-size: 15px; }
.bw-card-meta { font-size: 13px; color: var(--muted); }
.bw-card-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; }
.bw-card-tick {
  position: absolute; bottom: 10px; right: 12px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--emerald); color: #fff; display: none; align-items: center; justify-content: center;
}
.bw-card-tick svg { width: 13px; height: 13px; }
.bw-card.active .bw-card-tick { display: inline-flex; }
.bw-card.active { padding-bottom: 14px; }

/* Step 1 stage A — therapy picker (5 cards: icon | name/note/from | chevron) */
.bw-therapy-grid { grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 12px; }
.bw-therapy-card { flex-direction: row; align-items: center; gap: 14px; padding: 15px 16px; }
.bw-therapy-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  background: var(--mint); color: var(--emerald);
  display: flex; align-items: center; justify-content: center;
}
.bw-therapy-ico svg { width: 22px; height: 22px; }
.bw-therapy-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bw-therapy-card .bw-card-name { padding-right: 0; font-size: 15.5px; }
.bw-therapy-note { font-size: 12px; font-weight: 700; color: #9c7a2b; }
.bw-therapy-meta { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.bw-therapy-go { flex: 0 0 auto; color: var(--sage, #647793); display: flex; opacity: .6; transition: transform .15s, opacity .15s; }
.bw-therapy-go svg { width: 20px; height: 20px; }
.bw-therapy-card:hover .bw-therapy-go { opacity: 1; transform: translateX(3px); }

/* ============================================================
   STEP 1 · Stage A — premium therapy cards ("Luxury Spa Minimalist")
   Synthesised from a 4-direction design panel: big roomy 2-col cards,
   a gold left accent rule, an emerald medallion that lights up when
   selected, a Georgia serif name, a gold credential pill on the
   insurance note, and a mint→emerald chevron pill. Overrides the
   rules above by source order. Keeps .active / [hidden] / hover.
   ============================================================ */
.bw-therapy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 4px;
}
.bw-therapy-card {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 26px 24px 26px 28px;
  min-height: 116px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
  box-shadow: 0 1px 2px rgba(8, 20, 40, 0.04), 0 12px 30px rgba(29, 78, 137, 0.07);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.bw-therapy-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(216, 170, 75, 0.35) 100%);
  opacity: .55;
  transition: opacity .22s ease, width .22s ease, background .22s ease;
}
.bw-therapy-card:hover {
  border-color: var(--emerald);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(8, 20, 40, 0.05), 0 18px 44px rgba(29, 78, 137, 0.14);
}
.bw-therapy-card:hover::before { opacity: 1; width: 5px; }
.bw-therapy-card.active {
  border-color: var(--emerald);
  background: linear-gradient(180deg, var(--white) 0%, var(--mint) 140%);
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px var(--mint), 0 16px 38px rgba(29, 78, 137, 0.16);
}
.bw-therapy-card.active::before {
  opacity: 1;
  width: 6px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--emerald) 100%);
}
.bw-therapy-card .bw-therapy-ico {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, #ffffff 0%, var(--mint) 55%, #d4e0f2 100%);
  color: var(--emerald);
  box-shadow: inset 0 0 0 1px rgba(216, 170, 75, 0.45), 0 6px 16px rgba(29, 78, 137, 0.12);
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.bw-therapy-card .bw-therapy-ico svg { width: 30px; height: 30px; }
.bw-therapy-card:hover .bw-therapy-ico {
  transform: scale(1.04);
  box-shadow: inset 0 0 0 1px rgba(216, 170, 75, 0.7), 0 8px 20px rgba(29, 78, 137, 0.18);
}
.bw-therapy-card.active .bw-therapy-ico {
  background: radial-gradient(120% 120% at 30% 25%, var(--emerald) 0%, var(--emerald-dark) 100%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(216, 170, 75, 0.85), 0 8px 20px rgba(29, 78, 137, 0.22);
}
.bw-therapy-text { gap: 5px; }
.bw-therapy-card .bw-card-name {
  padding-right: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .1px;
  line-height: 1.15;
  color: var(--emerald-dark);
}
.bw-therapy-note {
  align-self: flex-start;
  max-width: 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #8a6a22;
  background: rgba(216, 170, 75, 0.14);
  border: 1px solid rgba(216, 170, 75, 0.4);
  padding: 2px 9px;
  border-radius: 999px;
  margin-top: 1px;
}
.bw-therapy-meta {
  font-size: 13.5px;
  color: var(--sage, #647793);
  font-weight: 600;
  letter-spacing: .1px;
}
.bw-therapy-card .bw-therapy-go {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--mint);
  color: var(--emerald);
  opacity: 1;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.bw-therapy-card .bw-therapy-go svg { width: 20px; height: 20px; }
.bw-therapy-card:hover .bw-therapy-go {
  background: var(--emerald);
  color: var(--white);
  transform: translateX(4px);
}
.bw-therapy-card.active .bw-therapy-go {
  background: var(--emerald);
  color: var(--white);
}
@media (max-width: 640px) {
  /* Denser "Choose your service" cards: ~3 per screen, still ≥44px tap height.
     Smaller medallion, tighter padding/gaps, single-line-friendly name. */
  .bw-therapy-grid { grid-template-columns: 1fr; gap: 9px; }
  .bw-therapy-card {
    gap: 13px;
    padding: 12px 14px 12px 16px;
    min-height: 0;
    border-radius: 14px;
  }
  .bw-therapy-card .bw-therapy-ico { width: 46px; height: 46px; }
  .bw-therapy-card .bw-therapy-ico svg { width: 22px; height: 22px; }
  .bw-therapy-text { gap: 3px; }
  .bw-therapy-card .bw-card-name { font-size: 16.5px; line-height: 1.18; }
  .bw-therapy-note { font-size: 10px; padding: 1px 7px; letter-spacing: .3px; }
  .bw-therapy-meta { font-size: 12.5px; }
  .bw-therapy-card .bw-therapy-go { width: 28px; height: 28px; }
  .bw-therapy-card .bw-therapy-go svg { width: 18px; height: 18px; }
}

/* ============================================================
   STEP 2 · Therapist cards — same premium language as the therapy
   cards: roomy 2-col cards, gold left accent, an avatar medallion
   that lights up when selected, a serif name, specialty chips and a
   calm availability line so no card ever looks empty.
   ============================================================ */
.bw-therapists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
/* "No preference" is a secondary fallback — full width, under the named therapists. */
.bw-therapists .bw-therapist-any { grid-column: 1 / -1; }
.bw-therapist-card {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 20px 22px 20px 26px;
  min-height: 112px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
  box-shadow: 0 1px 2px rgba(8, 20, 40, 0.04), 0 12px 30px rgba(29, 78, 137, 0.07);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.bw-therapist-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(216, 170, 75, 0.35) 100%);
  opacity: .5; transition: opacity .22s ease, width .22s ease, background .22s ease;
}
.bw-therapist-card:hover {
  border-color: var(--emerald); transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(8, 20, 40, 0.05), 0 18px 44px rgba(29, 78, 137, 0.14);
}
.bw-therapist-card:hover::before { opacity: 1; width: 5px; }
.bw-therapist-card.active {
  border-color: var(--emerald);
  background: linear-gradient(180deg, var(--white) 0%, var(--mint) 150%);
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px var(--mint), 0 16px 38px rgba(29, 78, 137, 0.16);
}
.bw-therapist-card.active::before { opacity: 1; width: 6px; background: linear-gradient(180deg, var(--gold) 0%, var(--emerald) 100%); }
.bw-therapist-avatar {
  flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 22px;
  color: var(--emerald-dark);
  background: radial-gradient(120% 120% at 30% 25%, #ffffff 0%, var(--mint) 55%, #d4e0f2 100%);
  box-shadow: inset 0 0 0 1px rgba(216, 170, 75, 0.45), 0 6px 16px rgba(29, 78, 137, 0.12);
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
}
.bw-therapist-avatar svg { width: 26px; height: 26px; }
.bw-therapist-card:hover .bw-therapist-avatar { transform: scale(1.04); }
.bw-therapist-card.active .bw-therapist-avatar {
  background: radial-gradient(120% 120% at 30% 25%, var(--emerald) 0%, var(--emerald-dark) 100%);
  color: #fff; box-shadow: inset 0 0 0 1px rgba(216, 170, 75, 0.85), 0 8px 20px rgba(29, 78, 137, 0.22);
}
.bw-therapist-avatar-any { color: var(--emerald); }
.bw-therapist-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bw-therapist-card .bw-card-name {
  padding-right: 0;
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 19px;
  line-height: 1.15; color: var(--emerald-dark);
}
.bw-therapist-role { font-size: 13px; font-weight: 700; color: var(--gold-ink, #8a6a22); letter-spacing: .2px; }
.bw-therapist-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; }
.bw-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .2px; color: var(--emerald);
  background: var(--mint); border: 1px solid rgba(29, 78, 137, 0.12);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.bw-therapist-avail { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sage, #647793); font-weight: 600; }
.bw-therapist-avail svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--emerald); opacity: .8; }
.bw-therapist-card .bw-card-tick { bottom: auto; top: 50%; transform: translateY(-50%); right: 16px; width: 24px; height: 24px; }
@media (max-width: 640px) {
  .bw-therapists { grid-template-columns: 1fr; gap: 9px; }
  .bw-therapist-card { gap: 12px; padding: 12px 14px 12px 16px; min-height: 0; border-radius: 14px; }
  .bw-therapist-info { gap: 3px; }
  .bw-therapist-avatar { width: 44px; height: 44px; font-size: 17px; }
  .bw-therapist-avatar svg { width: 20px; height: 20px; }
  .bw-therapist-card .bw-card-name { font-size: 16px; }
  .bw-therapist-role { font-size: 12px; }
  .bw-tag { font-size: 10.5px; padding: 2px 8px; }
  .bw-therapist-avail { font-size: 12px; }
}

/* Step 1 stage B — length picker for the chosen therapy */
/* "Change therapy" now lives in the nav row, styled like Continue (.btn.btn-primary)
   — it sits on the left (left chevron) with Continue pushed to the right. */
.bw-duration-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bw-duration-head strong { font-size: 18px; color: var(--emerald-dark); font-weight: 800; font-family: Georgia, "Times New Roman", serif; }
.bw-duration-sub { font-size: 13px; color: var(--muted); }

/* Single-screen service menu ("Choose your service"): the full menu styling is
   defined further below (after the base length-card rules) so the menu-specific
   "navy header band" look wins cleanly by source order. */

/* Compact length cards — duration + price only (service name is in the heading). */
.bw-duration-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.bw-length-card { align-items: flex-start; gap: 3px; padding: 16px 16px 15px; min-height: 78px; justify-content: center; }
.bw-length-dur { font-size: 19px; font-weight: 800; color: var(--emerald-dark); line-height: 1.1; padding-right: 26px; }
.bw-length-price { font-size: 15px; font-weight: 700; color: var(--emerald); }
/* Service-mode card (nails etc.): show the service NAME, not a bare duration */
.bw-length-name { font-size: 16px; font-weight: 800; color: var(--emerald-dark); line-height: 1.2; padding-right: 26px; }
.bw-length-meta { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.bw-length-badge {
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #8a6a22; background: rgba(216, 170, 75, 0.16); border: 1px solid rgba(216, 170, 75, 0.42);
  padding: 2px 7px; border-radius: 999px;
}
.bw-length-card.active { background: color-mix(in srgb, var(--mint) 55%, #fff); }
.bw-length-card .bw-card-tick { top: 10px; right: 12px; bottom: auto; }
.bw-length-card.active .bw-length-badge { display: none; } /* tick replaces badge corner when selected */

/* ============================================================
   STEP 1 · Service-selection menu — "Navy header band"
   Each category card wears a deep navy->emerald header bar: a white
   Georgia serif title (the #1 fix — instantly scannable), a gold
   underline accent, a gold-on-navy credential pill for the optional
   RMT note, and a gold-ringed icon tile that pops on the band. The
   card body stays light with crisp 2-per-row duration chips.
   Placed AFTER the base .bw-duration-grid / .bw-length-card rules so
   the menu-specific look wins cleanly by source order + specificity.
   ============================================================ */

/* ---- Responsive grid: 1 col phone · 2 cols >=700 · 3 cols >=1024 ---- */
.bw-service-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 4px;
  align-items: stretch;   /* cards sharing a row match the tallest one's height */
  min-width: 0;
}
@media (min-width: 700px) {
  .bw-service-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  /* Cards sit side by side here — give every navy band the SAME height so the
     titles and the chip grids below them line up across each row. The floor is
     set to the tallest case (RMT: a title line PLUS the credential pill row) so
     1-line titles, wrapped 2-line titles and the pill card all settle equal. */
  .bw-svc-group-head { min-height: 104px; }
}
@media (min-width: 1024px) {
  .bw-service-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* ---- One category card: light body, navy band on top ---- */
.bw-svc-group {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;                 /* clip the navy band to the rounded corners */
  box-shadow:
    0 1px 2px rgba(8, 20, 40, 0.05),
    0 14px 32px rgba(29, 78, 137, 0.08);
  transition: box-shadow .25s ease, transform .2s ease, border-color .2s ease;
}
.bw-svc-group[hidden] { display: none !important; }
/* Menu-booked category (nails/spa): the card is a LINK to the Spa & Nails page. */
a.bw-svc-group--link { text-decoration: none; color: inherit; cursor: pointer; }
.bw-svc-linkbody { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.bw-svc-linkdesc { color: var(--muted); font-size: 14px; line-height: 1.5; }
.bw-svc-linkgo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-weight: 800; font-size: 14px; color: var(--emerald); }
.bw-svc-linkgo svg, .bw-svc-linkgo i { width: 16px; height: 16px; }
a.bw-svc-group--link:hover .bw-svc-linkgo { gap: 9px; }
.bw-svc-group:hover {
  border-color: color-mix(in srgb, var(--emerald) 35%, var(--line));
  box-shadow:
    0 2px 4px rgba(8, 20, 40, 0.06),
    0 20px 42px rgba(29, 78, 137, 0.14);
  transform: translateY(-2px);
}

/* ---- THE NAVY HEADER BAND (the #1 fix: title reads instantly) ---- */
.bw-svc-group-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* icon | title — title shrinks & wraps beside the icon, never drops below it */
  align-items: center;
  align-content: center;
  column-gap: 12px;
  row-gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--emerald-dark) 0%, var(--emerald) 100%);
  border-bottom: 2px solid var(--gold);
}
/* soft gold hairline just above the bottom gold border, for depth */
.bw-svc-group-head::before {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(216, 170, 75, 0) 0%,
    rgba(216, 170, 75, 0.55) 18%,
    rgba(216, 170, 75, 0.55) 82%,
    rgba(216, 170, 75, 0) 100%);
}

/* ---- Icon tile: pops on the navy band (gold ring, soft glow) ---- */
.bw-svc-ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background:
    radial-gradient(120% 120% at 30% 25%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.04) 55%,
      rgba(255, 255, 255, 0) 100%),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(216, 170, 75, 0.55),
    0 4px 12px rgba(8, 20, 40, 0.28);
  transition: transform .2s ease, box-shadow .25s ease;
}
.bw-svc-group:hover .bw-svc-ico {
  transform: scale(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(216, 170, 75, 0.85),
    0 6px 16px rgba(8, 20, 40, 0.34);
}
.bw-svc-ico i,
.bw-svc-ico svg { width: 21px; height: 21px; }

/* ---- TITLE: white Georgia serif on navy — prominent & scannable ---- */
.bw-svc-group-title {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;          /* long names wrap, never clip/overflow */
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* wrap to at most 2 lines beside the icon */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .2px;
  color: var(--white);
  text-shadow: 0 1px 1px rgba(8, 20, 40, 0.35);
}

/* ---- Optional NOTE: gold-on-navy credential pill (RMT only) ---- */
.bw-svc-group-note {
  grid-column: 2;                   /* sits just under the title, aligned to it */
  justify-self: start;
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(216, 170, 75, 0.14);
  border: 1px solid rgba(216, 170, 75, 0.55);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- CARD BODY — crisp light duration chips, 2 per row ---- */
.bw-svc-group .bw-svc-durations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 16px 16px 18px;
  min-width: 0;
  flex: 1 1 auto;          /* fill the card when it is stretched to a taller neighbour */
  align-content: start;    /* keep tiles packed at the top; extra height = clean bottom space */
}
.bw-svc-group .bw-svc-durations[hidden] { display: none !important; }

/* ---- Duration chip ---- */
.bw-svc-group .bw-length-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
  min-height: 56px;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color .15s ease, background .15s ease,
              box-shadow .2s ease, transform .15s ease;
}
.bw-svc-group .bw-length-card[hidden] { display: none !important; }

.bw-svc-group .bw-length-dur {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--emerald-dark);
  padding: 0;                       /* override global .bw-length-dur padding-right */
}
.bw-svc-group .bw-length-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--emerald);
}

/* ---- Hover / keyboard-focus state (clear, accessible) ---- */
.bw-svc-group .bw-length-card:hover {
  border-color: var(--emerald);
  background: var(--white);
  box-shadow: 0 6px 16px rgba(29, 78, 137, 0.12);
  transform: translateY(-1px);
}
.bw-svc-group .bw-length-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--emerald);
}

/* ---- Selected chip: filled navy with gold ring + tick ----
   Higher specificity + explicit resets beat the global
   .bw-card.active{box-shadow:0 0 0 3px var(--mint); padding-bottom:14px} */
.bw-svc-group .bw-length-card.active,
.bw-svc-group .bw-length-card.active:hover {
  border-color: var(--emerald);
  background: linear-gradient(180deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  box-shadow:
    0 0 0 1px var(--gold),
    0 8px 20px rgba(29, 78, 137, 0.22);
  padding: 9px 12px;                /* cancel global active padding-bottom bump */
  transform: none;
}
.bw-svc-group .bw-length-card.active .bw-length-dur { color: var(--white); }
.bw-svc-group .bw-length-card.active .bw-length-price { color: var(--gold); }

/* ---- Tick: reset the global bottom-anchored disc -> top-right gold ---- */
.bw-svc-group .bw-length-card .bw-card-tick {
  top: 6px;
  right: 6px;
  bottom: auto;                     /* override global bottom:10px */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--emerald-dark);
  box-shadow: 0 1px 4px rgba(8, 20, 40, 0.3);
}
.bw-svc-group .bw-length-card .bw-card-tick i,
.bw-svc-group .bw-length-card .bw-card-tick svg { width: 12px; height: 12px; }

/* ============================================================
   Name-picked category (nails): WIDE card + compact tiles
   A category whose services have distinct names (Manicure, Pedicure,
   Gel…) is chosen BY NAME, so its tiles carry a name + "duration · price".
   The card spans TWO menu columns and its tiles flow 2–3 per row, so a
   long menu stays short and wide instead of running down the page.
   ============================================================ */
@media (min-width: 700px) {
  .bw-service-menu > .bw-svc-group--wide { grid-column: span 2; }
}
/* Tiles auto-flow as many per row as fit; left-aligned so names read cleanly. */
.bw-svc-group .bw-svc-durations.bw-svc-list {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.bw-svc-group .bw-svc-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  text-align: left;
  min-width: 0;
  min-height: 64px;
  padding: 11px 34px 11px 13px;     /* right room for the tick */
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color .15s ease, background .15s ease,
              box-shadow .2s ease, transform .15s ease;
}
.bw-svc-group .bw-svc-item[hidden] { display: none !important; }
.bw-svc-item-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--emerald-dark);
}
.bw-svc-item-meta {
  font-size: 13px;
  font-weight: 700;
  color: var(--emerald);
}
.bw-svc-item-meta .bw-svc-item-meta-dur { color: var(--muted); font-weight: 600; }

/* hover / keyboard focus */
.bw-svc-group .bw-svc-item:hover {
  border-color: var(--emerald);
  background: var(--white);
  box-shadow: 0 6px 16px rgba(29, 78, 137, 0.12);
  transform: translateY(-1px);
}
.bw-svc-group .bw-svc-item:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--emerald);
}

/* selected: filled navy w/ gold ring (matches the duration chips) */
.bw-svc-group .bw-svc-item.active,
.bw-svc-group .bw-svc-item.active:hover {
  border-color: var(--emerald);
  background: linear-gradient(180deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 20px rgba(29, 78, 137, 0.22);
  padding: 11px 34px 11px 13px;     /* cancel global .bw-card.active padding bump */
  transform: none;
}
.bw-svc-group .bw-svc-item.active .bw-svc-item-name { color: var(--white); }
.bw-svc-group .bw-svc-item.active .bw-svc-item-meta { color: var(--gold); }

/* tick — gold disc, top-right (matches the duration chips) */
.bw-svc-group .bw-svc-item .bw-card-tick {
  top: 8px;
  right: 8px;
  bottom: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--emerald-dark);
  box-shadow: 0 1px 4px rgba(8, 20, 40, 0.3);
}
.bw-svc-group .bw-svc-item .bw-card-tick i,
.bw-svc-group .bw-svc-item .bw-card-tick svg { width: 12px; height: 12px; }

/* small "Most popular"-style badge */
.bw-svc-item-badge {
  position: absolute;
  top: -8px; left: 12px;
  font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--emerald-dark); background: var(--gold);
  padding: 2px 7px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(8, 20, 40, 0.18);
}

/* ---- Phones: titles still prominent, chips >=44px, no overflow ---- */
@media (max-width: 680px) {
  .bw-svc-group-head { padding: 14px 16px 15px; gap: 10px; }
  .bw-svc-group-head::before { left: 16px; right: 16px; }
  .bw-svc-ico { width: 38px; height: 38px; border-radius: 11px; }
  .bw-svc-ico i, .bw-svc-ico svg { width: 19px; height: 19px; }
  .bw-svc-group-title { font-size: 18.5px; }   /* still big & scannable */
  .bw-svc-group .bw-svc-durations { padding: 14px; gap: 9px; }
}
@media (max-width: 390px) {
  .bw-svc-group-head { padding: 13px 14px 14px; gap: 9px 10px; }
  .bw-svc-group-head::before { left: 14px; right: 14px; }
  .bw-svc-group-title { font-size: 17.5px; }   /* still big; grid keeps it beside the icon, pill tucks underneath */
  .bw-svc-group .bw-svc-durations { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px 12px 14px; gap: 8px; }
  .bw-svc-group .bw-length-card { min-height: 48px; padding: 8px; }
  .bw-svc-group .bw-length-card.active,
  .bw-svc-group .bw-length-card.active:hover { padding: 8px; }
  .bw-svc-group .bw-length-dur { font-size: 14.5px; }
  .bw-svc-group .bw-length-price { font-size: 12.5px; }
}

/* ---- Reduced-motion: honour the user's OS preference ---- */
@media (prefers-reduced-motion: reduce) {
  .bw-svc-group,
  .bw-svc-ico,
  .bw-svc-group .bw-length-card { transition: none; }
  .bw-svc-group:hover,
  .bw-svc-group:hover .bw-svc-ico,
  .bw-svc-group .bw-length-card:hover { transform: none; }
}

/* Price ($75) sits on the SAME row as the date label so the time cards start
   high — their top lines up close to the calendar box on the left, instead of
   being pushed ~78px down by a separate price line above the header. */
.bw-slots-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 800; color: var(--emerald-dark); margin: 0 0 10px; }
.bw-slots-head .bw-slots-when { min-width: 0; }
.bw-slots-price { font-weight: 700; white-space: nowrap; }
.bw-slots-price strong { font-size: 17px; color: var(--emerald-dark); }

/* Date & time */
.bw-datetime { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.cal-selected { margin: 12px 0 0; color: var(--muted); font-weight: 600; }
.cal-selected.has-value { color: var(--emerald-dark); }
.bw-times { min-width: 0; }
/* Each time-of-day is its own CARD so the three periods read as distinct,
   instantly-scannable blocks: a sunrise / sun / moon icon + heading on top,
   the chips inside. */
.bw-slot-group { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px 14px; margin-bottom: 13px; box-shadow: 0 2px 9px rgba(8, 20, 40, 0.04); }
.bw-slot-label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--emerald-dark); margin: 0 0 11px; }
.bw-slot-label::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.bw-slot-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--mint); color: var(--emerald); flex: 0 0 auto; }
.bw-slot-ico i, .bw-slot-ico svg { width: 13px; height: 13px; }
/* Uniform grid — every period shows the same equal-width columns (no more
   ragged flex-wrap where Morning went 1-per-row and Afternoon 2-per-row). */
.bw-slot-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 8px; }
.bw-slot-row .slot, .time-slots .slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 50px; min-width: 0;
  border: 1.5px solid var(--line); background: var(--white); color: var(--emerald-dark);
  font: inherit; padding: 7px 6px; border-radius: 12px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .15s, background .15s, box-shadow .2s, transform .12s;
}
.slot-t { font-weight: 800; font-size: 14px; line-height: 1.12; color: var(--emerald-dark); white-space: nowrap; }
.slot-e { font-size: 11px; font-weight: 600; line-height: 1.1; color: var(--muted); white-space: nowrap; }
.bw-slot-row .slot:hover { border-color: var(--emerald); background: var(--white); box-shadow: 0 5px 14px rgba(29, 78, 137, .12); transform: translateY(-1px); }
.bw-slot-row .slot:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--emerald); }
.bw-slot-row .slot.active, .time-slots .slot.active {
  background: linear-gradient(180deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  border-color: var(--emerald); color: #fff;
  box-shadow: 0 0 0 1px var(--gold), 0 8px 18px rgba(29, 78, 137, .22);
}
.bw-slot-row .slot.active .slot-t { color: #fff; }
.bw-slot-row .slot.active .slot-e { color: #f0c869; } /* brighter gold — clears WCAG AA on the navy gradient */
@media (prefers-reduced-motion: reduce) {
  .bw-slot-row .slot { transition: none; }
  .bw-slot-row .slot:hover { transform: none; }
}
.bw-noslots { display: flex; gap: 8px; align-items: flex-start; }
.bw-noslots svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--gold); }
.booking-price { margin: 0 0 12px; font-size: 17px; color: var(--emerald-dark); }

/* Review */
.bw-review-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bw-review-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.bw-review-list li:last-child { border-bottom: 0; }
.bw-review-list span { color: var(--muted); }
.bw-review-list strong { color: var(--emerald-dark); text-align: right; }
.bw-request-note { display: flex; gap: 9px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; background: var(--mint); border-radius: 10px; font-size: 14px; line-height: 1.5; }
.bw-request-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--emerald); }

/* Nav buttons */
.bw-nav { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.bw-nav .bw-next, .bw-nav .bw-submit { margin-left: auto; }
/* Step 1 (service) has no Back button — center the lone Continue button. */
.bw-nav--center { justify-content: center; }
.bw-nav--center .bw-next { margin-left: 0; }
.bw-back svg, .bw-next svg, .bw-submit svg, .bw-change-therapy svg { width: 18px; height: 18px; }
.booking-error { color: #b3261e; background: #fdecea; border-radius: 9px; padding: 10px 13px; margin: 16px 0 0; font-weight: 600; }

/* Summary panel */
.bw-summary { background: color-mix(in srgb, var(--emerald) 5%, #fff); border-left: 1px solid var(--line); padding: 24px 22px; }
.bw-summary h4 { margin: 0 0 14px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--emerald-dark); display: flex; align-items: center; gap: 8px; }
.bw-summary h4 svg { width: 17px; height: 17px; color: var(--gold); }
.bw-summary-list { margin: 0 0 16px; display: grid; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; }
.bw-summary-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.bw-summary-list > div:last-child { border-bottom: 0; }
.bw-summary-list dt { color: var(--muted); font-size: 13px; margin: 0; }
.bw-summary-list dd { margin: 0; font-weight: 700; color: var(--emerald-dark); text-align: right; font-size: 13.5px; max-width: 60%; }
.bw-summary-list dd.bw-unset { color: #98a4b0; font-weight: 500; font-style: italic; }
.bw-summary-price dd { color: var(--emerald); font-size: 16px; }
.bw-summary-price dd.bw-unset { color: #98a4b0; font-size: 13.5px; }
.bw-trust { display: grid; gap: 9px; font-size: 13px; color: var(--muted); }
.bw-trust p { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.bw-trust svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--emerald); }
.bw-trust a { color: var(--emerald-dark); font-weight: 700; }
.bw-trust-note { color: var(--sage); }

/* Tablet / mobile */
@media (max-width: 900px) {
  .bw-body { grid-template-columns: 1fr; }
  /* Compact running-total summary on top, collapsed by default (JS collapses it). */
  .bw-summary { order: -1; border-left: 0; border-top: 0; border-bottom: 1px solid var(--line); padding: 15px 16px; }
  .bw-summary[open] { padding-bottom: 18px; }
}
@media (max-width: 640px) {
  .booking-section-head { margin-bottom: 18px; }
  .bw-main { padding: 16px 14px; }
  .bw-summary { padding: 16px 14px; }
  .bw-datetime { grid-template-columns: 1fr; gap: 16px; }
  .bw-cards { grid-template-columns: 1fr; }
  /* duration labels are short — keep two per row on phones (easier to scan/tap) */
  .bw-duration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* stack two-column form rows so inputs never overflow on a phone */
  .form-row.two { grid-template-columns: 1fr; }
  .bw-step-label { display: none; }            /* compact step dots on small phones */
  .bw-step-ind { flex: 0 0 auto; padding: 4px; }
  .bw-step-ind.active .bw-step-label { display: inline; }
  .bw-step-title { font-size: 18px; margin-bottom: 14px; }
  .bw-nav { flex-wrap: wrap; }
  .bw-nav .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   Booking · customer details fields, validation, choice pills,
   consents, collapsible summary, success actions, mobile sticky nav
   ============================================================ */
.bw-field { margin: 0 0 14px; min-width: 0; }
.bw-field > label,
.bw-field-label { display: block; font-weight: 700; font-size: 14px; color: var(--emerald-dark); margin: 0 0 6px; }
.bw-req { color: #8a6a22; font-weight: 800; } /* darker than --gold to clear WCAG AA 4.5:1 on white */
.bw-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; }
.bw-field input,
.bw-field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 14px;
  background: var(--white); transition: border-color .15s, box-shadow .15s;
}
.bw-field input:focus,
.bw-field textarea:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px var(--mint); }
.bw-field input.bw-invalid { border-color: #c8362b; box-shadow: 0 0 0 3px rgba(200, 54, 43, 0.12); }
.bw-field-err { margin: 6px 0 0; color: #b3261e; font-size: 13px; font-weight: 600; display: flex; gap: 5px; }
.bw-field-err::before { content: "⚠"; }

/* Segmented choice pills (preferred contact, first visit) */
.bw-choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bw-choice { position: relative; flex: 1 1 auto; min-width: 84px; cursor: pointer; }
.bw-choice input { position: absolute; opacity: 0; pointer-events: none; }
.bw-choice > span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 11px;
  font-weight: 700; font-size: 14px; color: var(--emerald-dark); background: var(--white);
  transition: border-color .15s, background .15s, box-shadow .15s; min-height: 44px;
}
.bw-choice > span svg { width: 16px; height: 16px; color: var(--gold); }
.bw-choice:hover > span { border-color: var(--emerald); }
.bw-choice input:checked + span { border-color: var(--emerald); background: var(--mint); box-shadow: inset 0 0 0 1px var(--emerald); }
.bw-choice input:checked + span svg { color: var(--emerald); }
.bw-choice input:focus-visible + span { box-shadow: 0 0 0 3px var(--mint); }

/* Policy acknowledgement checkboxes */
.bw-consents { display: grid; gap: 10px; margin: 6px 0 2px; padding: 14px 16px; background: color-mix(in srgb, var(--emerald) 4%, #fff); border: 1px solid var(--line); border-radius: 12px; }
.bw-check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.bw-check input { flex: 0 0 auto; width: 19px; height: 19px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--emerald); cursor: pointer; }
.bw-check span { display: block; } /* box top-aligns to the first text line; margin-top centres it optically */
.bw-check strong { color: var(--emerald-dark); }
/* Tappable cancellation & deposit policy disclosure, right under the consent boxes */
.bw-policy { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.bw-policy summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--emerald-dark); user-select: none; }
.bw-policy summary::-webkit-details-marker { display: none; }
.bw-policy-link { text-decoration: underline; text-underline-offset: 2px; }
.bw-policy-chev { transition: transform .18s ease; font-size: 12px; }
.bw-policy[open] .bw-policy-chev { transform: rotate(180deg); }
.bw-policy p { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* Collapsible summary (details): always open on desktop, collapsible on phones */
.bw-summary > summary { list-style: none; }
.bw-summary > summary::-webkit-details-marker { display: none; }
.bw-summary-head { display: flex; align-items: center; gap: 10px; }
.bw-summary-title { margin: 0; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--emerald-dark); display: flex; align-items: center; gap: 8px; }
.bw-summary-title svg { width: 17px; height: 17px; color: var(--gold); }
.bw-summary-peek { display: none; margin-left: auto; font-weight: 800; color: var(--emerald); font-size: 13.5px; }
.bw-summary-body { margin-top: 14px; }
@media (min-width: 901px) {
  .bw-summary > .bw-summary-body { display: block; }
  .bw-summary-head { cursor: default; pointer-events: none; }
}
@media (max-width: 900px) {
  .bw-summary-head { cursor: pointer; }
  .bw-summary-peek { display: inline; }
  .bw-summary-head::after {
    content: ""; display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; margin-left: 4px;
    border-right: 2px solid var(--emerald-dark); border-bottom: 2px solid var(--emerald-dark);
    transform: rotate(45deg); transition: transform .2s; opacity: .55;
  }
  .bw-summary[open] .bw-summary-head::after { transform: rotate(-135deg); }
  .bw-summary[open] .bw-summary-peek { display: none; }
}

/* Success-screen extras */
.booking-confirm-sub { color: var(--muted); margin: 2px auto 14px; max-width: 440px; line-height: 1.5; }
.booking-confirm-when { display: inline-flex; align-items: center; gap: 8px; }
.booking-confirm-when svg { width: 18px; height: 18px; color: var(--emerald); }
.booking-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.booking-confirm-actions .btn { min-height: 46px; }

/* Bigger tap targets on phones */
@media (max-width: 640px) {
  .bw-slot-row .slot, .time-slots .slot { min-height: 52px; padding: 8px 6px; }
  .cal-day { min-height: 40px; }
  .bw-choice > span { padding-left: 8px; padding-right: 8px; }
  /* Sticky action bar so Continue is always within thumb reach. No negative
     side margins (they pushed Continue ~16px off-screen); stays within the
     card padding so nothing is clipped. */
  .bw-nav {
    /* Inline (NOT pinned) on phones. A sticky bottom bar here collided with the
       fixed mobile action bar (z-95) and the Help bubble (bottom:84px); each step
       is short enough that the Continue/Submit button is reached by scrolling. */
    flex-wrap: nowrap; gap: 10px;
    margin: 18px 0 0; padding: 14px 0 2px;
    border-top: 1px solid var(--line);
  }
  .bw-nav .btn { min-height: 50px; }
  .bw-nav .bw-back, .bw-nav .bw-change-therapy { flex: 0 0 auto; }
  .bw-nav .bw-next, .bw-nav .bw-submit { flex: 1 1 auto; margin-left: auto; }
}

/* Contact page: booking + message form */
.contact-subhead { display: flex; align-items: center; gap: 10px; font-size: 20px; color: var(--emerald-dark); margin: 0 0 16px; }
.contact-subhead svg { width: 22px; height: 22px; color: var(--gold); }
.contact-subhead-msg { margin-top: 40px; }
.contact-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 22px; align-items: start; }
/* let grid cells shrink (long emails/addresses must not blow out the layout) */
.contact-grid > * { min-width: 0; }
.contact-info-card, .contact-info-card a, .contact-info-card p { overflow-wrap: anywhere; word-break: break-word; }
.contact-grid > * { min-width: 0; }
.contact-msg-form {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 26px 28px; display: grid; gap: 6px;
}
.contact-msg-form label { font-weight: 700; color: var(--emerald-dark); font-size: 14px; margin-top: 6px; }
.contact-msg-form .btn { margin-top: 12px; }
.contact-msg-status { margin: 6px 0 0; font-weight: 600; }
.contact-msg-status.is-error { color: #b3261e; }
.contact-info-card {
  background: linear-gradient(165deg, var(--emerald), var(--emerald-dark));
  color: #fff; border-radius: 16px; padding: 26px 26px; box-shadow: var(--shadow);
}
.contact-info-card h4 { margin: 0 0 14px; color: #fff; display: flex; align-items: center; gap: 9px; font-size: 17px; }
.contact-info-card h4 svg { width: 20px; height: 20px; color: var(--gold); }
.contact-info-card p { margin: 0 0 13px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.55; color: rgba(255,255,255,0.92); }
.contact-info-card p svg { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
.contact-info-card a { color: #fff; }
.booking-note.light { background: rgba(255,255,255,0.12); margin-top: 8px; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-msg-form { padding: 20px 18px; }
}

.brand-icon {
  display: inline-flex;
  align-items: center;
}

.brand-icon svg {
  display: block;
}

.form-fineprint {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* Inline booking calendar — fills the form width with compact rows */
.cal {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--white);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cal-head strong {
  color: var(--emerald-dark);
  font-size: 16px;
}

.cal-nav {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--emerald-dark);
  flex: 0 0 auto;
}

.cal-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.cal-nav svg {
  width: 18px;
  height: 18px;
}

.cal-dow,
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dow {
  margin-bottom: 4px;
}

.cal-dow span {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  padding: 4px 0;
}

.cal-days button {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}

.cal-days button:hover:not([disabled]) {
  background: var(--mint);
}

.cal-days .cal-day.selected {
  background: var(--emerald);
  color: #fff;
}

.cal-days button[disabled] {
  color: #9aa8a2;
  cursor: not-allowed;
}

.cal-selected {
  margin: 2px 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}

.cal-times {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.cal-times[hidden] {
  display: none;
}

/* Wizard slots wrapper — stack the period groups full-width; each group's
   .bw-slot-row grid lays out the chips. (The chip look itself is defined once,
   up top, by the shared ".bw-slot-row .slot, .time-slots .slot" block.) */
.time-slots {
  display: block;
}

.cal-selected.has-value {
  color: var(--emerald-dark);
}

/* Native booking widget */
.cal-hint {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

.booking-price {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--emerald-dark);
}

.price-badge {
  display: inline-block;
  background: var(--gold);
  color: #1a1205;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
}

.price-was {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 14px;
  margin-left: 4px;
}

.booking-error {
  background: #fdecec;
  color: #a02020;
  border: 1px solid #f3c0c0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
  margin: 4px 0 0;
}

.booking-confirm-card {
  text-align: center;
  padding: 26px 28px 30px;
}
@media (max-width: 560px) {
  .booking-confirm-card { padding: 22px 18px 26px; }
  .booking-confirm-actions { flex-direction: column; }
  .booking-confirm-actions .btn { width: 100%; }
}

.booking-confirm-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--emerald);
  margin-bottom: 4px;
}

.booking-confirm-icon svg {
  width: 34px;
  height: 34px;
}

.booking-confirm-card h3 {
  margin: 6px 0;
  font-size: 24px;
}

.booking-confirm-when {
  font-weight: 800;
  color: var(--emerald-dark);
  margin: 0 0 14px;
}

.booking-confirm-list {
  list-style: none;
  margin: 0 auto 16px;
  padding: 0;
  max-width: 340px;
  text-align: left;
}

.booking-confirm-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.booking-confirm-list li span {
  color: var(--muted);
}

/* Share + QR */
.share-card {
  max-width: 720px;
  margin: 0 auto;
}

.share-panel {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
}

.share-qr {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  line-height: 0;
  cursor: pointer;
  display: inline-flex;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.share-qr:hover,
.share-qr:focus-visible {
  border-color: rgba(179, 138, 62, 0.6);
  box-shadow: 0 14px 28px rgba(54, 43, 69, 0.14);
  transform: translateY(-2px);
}

.share-qr img:not(.qr-logo) {
  width: 188px;
  height: 188px;
}

/* QR with the brand mark in the centre (QR uses ecc=H so it stays scannable). */
.qr-frame { position: relative; display: inline-block; line-height: 0; }
.qr-frame .qr-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 25%; height: 25%; object-fit: contain;
  background: #fff; border-radius: 20%; padding: 4px;
  box-shadow: 0 0 0 4px #fff, 0 3px 10px rgba(8, 20, 40, 0.22);
}

.share-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  width: 100%;
}

.share-actions .btn {
  width: 100%;
}

.share-url {
  word-break: break-all;
  margin: 0;
}

.footer .share-url {
  color: #b9c8c3;
}

/* Share modal */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.share-modal[hidden] {
  display: none;
}

.share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 36, 31, 0.55);
  backdrop-filter: blur(2px);
}

.share-modal-box {
  position: relative;
  background: var(--white);
  border-radius: 14px;
  padding: 26px;
  width: min(440px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.share-modal-box h3 {
  text-align: center;
  margin-bottom: 18px;
}

.share-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--emerald-dark);
}

@media (max-width: 1024px) {
  .nav-actions .menu-toggle {
    display: inline-flex;
    width: 48px;
    height: 48px;
    padding: 0;
  }

  .nav-links {
    position: absolute;
    left: 22px;
    right: 22px;
    top: calc(100% + 8px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 12px;
    box-shadow: var(--shadow);
    max-height: calc(100svh - 132px);
    overflow-y: auto;
    gap: 4px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    /* Inline anchors paint vertical padding without occupying space — block
       makes each row really 17px taller top & bottom instead of overlapping. */
    display: block;
    padding: 17px 16px;
    font-size: 17px;
  }

  .nav-actions .btn-primary {
    display: none;
  }

  .grid.three,
  .grid.four,
  .split,
  .stat-row,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 15px;
    line-height: 1.5;
  }

  /* Denser mobile type scale — intro/lead text was filling the screen. */
  .lead {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Bring the eyebrow / section-head label down a notch for a denser scale. */
  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.4px;
  }

  .section-head {
    margin-bottom: 24px;
  }

  .top-strip .wrap {
    justify-content: center;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .top-strip .wrap span:first-child {
    display: none;
  }

  .top-strip .wrap,
  .nav-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .brand {
    min-width: 0;
  }

  .brand-logo-img {
    width: 46px;
    height: 46px;
  }

  .brand-name {
    font-size: 16px;
  }

  .brand-sub {
    font-size: 12px;
  }

  .hero {
    min-height: 54svh;
  }

  .page-hero.hero,
  body[data-page="home"] .page-hero.hero {
    min-height: 54svh;
  }

  .hero .inner,
  .page-hero .inner,
  .section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero h1,
  .page-hero h1 {
    margin: 8px 0 11px;
    font-size: clamp(22px, 5.8vw, 26px);
    line-height: 1.1;
    text-wrap: balance;
  }

  .hero p,
  .page-hero p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .hero .inner,
  .page-hero .inner {
    padding-top: 46px;
    padding-bottom: 28px;
  }

  .announcement-bar {
    padding: 5px 12px;
    font-size: 13px;
    line-height: 1.25;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .hero-actions .btn {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
  }

  .quick-nav {
    padding-left: 16px;
    padding-right: 16px;
  }

  .quick-nav-section {
    /* Clear the full mobile header height (logo/menu ~46-48px + 18px top/bottom
       padding + border) so the sticky sub-bar doesn't tuck behind it. */
    top: 85px;
  }

  section[id] {
    scroll-margin-top: 128px;
  }

  h2 {
    font-size: clamp(20px, 5vw, 23px);
    line-height: 1.18;
    margin-bottom: 9px;
    text-wrap: balance;
  }

  h3 {
    font-size: 16.5px;
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .split,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Stat cards: keep 2-up (not 4 tall full-width blocks) + smaller number. */
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
  .stat { padding: 10px 12px; }
  .stat strong { font-size: 18px; }

  /* Two-up gallery on phones — 16 photos in 1 column was an endless scroll. */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .split img {
    min-height: 280px;
  }

  .booking-info,
  .booking-form-panel {
    padding: 26px 20px;
  }

  .form-row.two {
    grid-template-columns: 1fr;
  }

  .bk-time-field select,
  .bk-time-field input {
    max-width: none;
  }

  .section {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .card-body {
    padding: 16px;
  }

  .card img,
  .gallery-grid img {
    height: 132px;
  }

  /* Keep service-card images square on mobile too (overrides the 132px above). */
  .service-card img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .footer {
    margin-top: 0;
    padding: 34px 16px 0;
  }

  .footer-grid {
    gap: 26px;
    padding-bottom: 28px;
  }

  .footer-logo {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
  }

  .footer-logo img {
    width: 54px;
    height: 54px;
    border-radius: 10px;
  }

  .footer-logo strong {
    font-size: 16px;
    line-height: 1.3;
  }

  .footer-logo small {
    font-size: 14px;
    line-height: 1.45;
  }

  .footer-line {
    gap: 10px;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.5;
  }

  .footer-line svg {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }

  .footer-col {
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer h3 {
    margin-bottom: 11px;
    font-size: 15px;
    letter-spacing: .02em;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }

  .footer-links a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    font-size: 14.5px;
  }

  .footer-hours {
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.55;
  }

  .footer-book,
  .footer-share-btn {
    width: 100%;
    max-width: none;
    min-height: 54px;
  }

  .footer-share {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 12px;
  }

  .footer-share .small {
    display: none;
  }

  .footer-qr {
    display: none;
  }

  .footer-bottom {
    padding: 18px 0 calc(24px + env(safe-area-inset-bottom));
  }

  .footer-bottom .wrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
  }

  .footer-tags {
    display: block;
  }

  .share-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }

  .share-qr {
    padding: 8px;
  }

  .share-qr img {
    width: 124px;
    height: 124px;
  }

  /* Compact 2-up grid so the share buttons stop eating the whole screen. */
  .share-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .share-actions .btn {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13.5px;
    gap: 6px;
  }

  /* The native "Share…" button is the primary action — give it the full width. */
  .share-actions .share-native {
    grid-column: 1 / -1;
  }

  .share-url {
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  .table-wrap {
    display: none;
  }

  .price-mobile-list {
    display: grid;
    gap: 8px;
    margin: 10px 0 22px;
  }

  .price-mobile-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;   /* treatment wider than the price */
    gap: 7px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
  }

  .price-mobile-row div {
    border-radius: 7px;
    background: var(--paper);
    padding: 6px 9px;
  }

  .price-mobile-row span {
    display: block;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
  }

  .price-mobile-row strong {
    display: block;
    color: var(--emerald-dark);
    font-size: 14.5px;
    line-height: 1.25;
    margin-top: 1px;
  }

  /* ---- FAQ page: denser phone layout (scoped to faq only) ---------------
     The FAQ hero is just a page header, so shrink it; tighten the injected
     accordion so more questions fit per screen. Desktop + other pages keep
     their values because every rule here is data-page="faq" scoped. */
  body[data-page="faq"] .page-hero.hero {
    min-height: 38svh;
  }

  body[data-page="faq"] .page-hero .inner {
    padding-top: 30px;
    padding-bottom: 24px;
  }

  body[data-page="faq"] .page-hero h1 {
    font-size: clamp(23px, 6vw, 27px);
    margin: 6px 0 0;
  }

  /* Section wrapping the accordion: trim dead space top/bottom. */
  body[data-page="faq"] .faq-help-section {
    padding-top: 28px;
    padding-bottom: 32px;
  }

  /* Smaller, tighter section heading. */
  body[data-page="faq"] .faq-help-section .faq-help-head {
    margin-bottom: 14px;
  }

  body[data-page="faq"] .faq-help-head h2 {
    font-size: clamp(20px, 5.2vw, 23px);
    line-height: 1.2;
    margin-bottom: 6px;
  }

  /* Cards closer together + leaner summary (kept >=44px tap target). */
  body[data-page="faq"] .faq-help-list {
    gap: 8px;
  }

  body[data-page="faq"] .faq-item {
    margin-bottom: 0;
  }

  body[data-page="faq"] .faq-item summary {
    padding: 13px 16px;
    line-height: 1.35;
  }

  body[data-page="faq"] .faq-item p {
    padding: 0 16px 14px;
  }
}

/* ============================================================
   Mobile bottom action bar — phones only (Call · Book · Directions · Home)
   ============================================================ */
.mobile-bar {
  display: none;
}

@media (max-width: 680px) {
  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: var(--white, #fff);
    border-top: 1px solid var(--line, #dbe5e1);
    box-shadow: 0 -6px 22px rgba(8, 20, 40, 0.14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-bar-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 50px;
    padding: 6px 2px;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
    color: var(--emerald-dark, #0b2038);
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1px;
    line-height: 1.1;
  }
  .mobile-bar-item span { white-space: nowrap; }

  .mobile-bar-item:active {
    background: rgba(11, 32, 56, 0.08);
  }

  .mobile-bar-item i,
  .mobile-bar-item svg {
    width: 20px;
    height: 20px;
  }

  /* Highlight the Book action as the main call-to-action — slim and elegant,
     a subtle navy gradient with a soft gold-tinted lift instead of a chunky block. */
  .mobile-bar-cta {
    color: var(--white, #fff);
    background: linear-gradient(135deg, var(--emerald, #1d4e89), var(--emerald-dark, #0b2038));
    border-radius: 12px;
    margin: 5px 4px;
    flex: 1.12 1 0;
    box-shadow: 0 4px 12px rgba(29, 78, 137, 0.28);
  }

  .mobile-bar-cta i,
  .mobile-bar-cta svg {
    color: var(--gold, #d8aa4b);
  }

  /* Stop page content (and the footer) from hiding behind the fixed bar. */
  body {
    padding-bottom: 68px;
  }
}

/* ============================================================
   Customer FAQ / Help — floating widget (every page) + FAQ-page block
   Brand: deep navy, soft gold, warm off-white. Sits ABOVE the mobile bar.
   ============================================================ */
.emf-faq-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--gold, #d8aa4b);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--emerald, #1d4e89), var(--emerald-dark, #0b2038));
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(8, 20, 40, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.emf-faq-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(8, 20, 40, 0.34); }
.emf-faq-fab:focus-visible { outline: 3px solid var(--gold, #d8aa4b); outline-offset: 2px; }
.emf-faq-fab i, .emf-faq-fab svg { width: 22px; height: 22px; color: var(--gold, #d8aa4b); }
.emf-faq-fab-label { line-height: 1; }
body.emf-faq-open .emf-faq-fab { opacity: 0; pointer-events: none; }

.emf-faq-panel { position: fixed; inset: 0; z-index: 150; }
.emf-faq-panel[hidden] { display: none; }
.emf-faq-backdrop { position: absolute; inset: 0; background: transparent; }

.emf-faq-card {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: min(384px, calc(100vw - 32px));
  max-height: min(76vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--paper, #f6f9fd);
  border: 1px solid var(--line, #dce3ea);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 20, 40, 0.34);
  animation: emfFaqIn 0.2s ease;
}
@keyframes emfFaqIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.emf-faq-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, var(--emerald, #1d4e89), var(--emerald-dark, #0b2038));
  color: #fff;
}
.emf-faq-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.emf-faq-head-text strong { font-size: 17px; color: var(--gold, #d8aa4b); letter-spacing: 0.2px; }
.emf-faq-intro { font-size: 13px; color: rgba(255, 255, 255, 0.85); line-height: 1.4; }
.emf-faq-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}
.emf-faq-close:hover { background: rgba(255, 255, 255, 0.18); }
.emf-faq-close i, .emf-faq-close svg { width: 18px; height: 18px; }

.emf-faq-searchwrap { position: relative; padding: 12px 14px 8px; }
.emf-faq-searchwrap::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23647793' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.75;
}
.emf-faq-search {
  width: 100%;
  padding: 11px 12px 11px 38px;
  border: 1px solid var(--line, #dce3ea);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  min-height: 44px;
}
.emf-faq-search:focus { outline: none; border-color: var(--emerald, #1d4e89); box-shadow: 0 0 0 3px rgba(29, 78, 137, 0.14); }

.emf-faq-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 14px 8px; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; }
/* flex:0 0 auto stops the flex column from crushing rows to fit — without it the
   questions get squished under their own height and overflow:hidden clips the text
   to a thin band (reads as "faded"). Items keep natural height; the list scrolls. */
.emf-faq-item { flex: 0 0 auto; border: 1px solid var(--line, #dce3ea); border-radius: 10px; background: #fff; overflow: hidden; }
.emf-faq-item[hidden] { display: none; }
.emf-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--emerald-dark, #0b2038);
}
.emf-faq-item summary::-webkit-details-marker { display: none; }
.emf-faq-item summary::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gold, #d8aa4b);
  border-bottom: 2px solid var(--gold, #d8aa4b);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.emf-faq-item[open] summary::after { transform: rotate(-135deg); }
.emf-faq-item summary:hover { background: color-mix(in srgb, var(--emerald, #1d4e89) 6%, #fff); }
.emf-faq-a { padding: 0 14px 14px; color: var(--muted, #64706b); font-size: 14px; line-height: 1.55; }

.emf-faq-empty { padding: 14px; margin: 0 14px 8px; color: var(--muted, #64706b); font-size: 14px; text-align: center; }

.emf-faq-actions { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line, #dce3ea); background: #fff; }
.emf-faq-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  min-height: 44px;
  cursor: pointer;
}
.emf-faq-btn i, .emf-faq-btn svg { width: 18px; height: 18px; }
.emf-faq-btn.primary { background: var(--emerald, #1d4e89); color: #fff; border: 1px solid var(--emerald, #1d4e89); }
.emf-faq-btn.primary:hover { background: var(--emerald-dark, #0b2038); }
.emf-faq-btn.ghost { background: #fff; color: var(--emerald-dark, #0b2038); border: 1px solid var(--line, #dce3ea); }
.emf-faq-btn.ghost:hover { border-color: var(--emerald, #1d4e89); }

/* FAQ-page block (crawlable accordion rendered into faq.html) */
.faq-help-section .faq-help-head { margin-bottom: 18px; }
.faq-help-list { display: grid; gap: 12px; max-width: 820px; }
.faq-help-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Phones: lift the button above the fixed mobile action bar; sheet from bottom */
@media (max-width: 680px) {
  /* Compact Help bubble, lifted above the fixed bottom action bar. */
  .emf-faq-fab { right: 14px; bottom: 84px; padding: 9px 14px 9px 11px; font-size: 13px; gap: 6px; }
  /* On the booking pages the bubble floats over the time-slot grid (covering a
     tappable slot), so hide it there on phones — the wizard owns the screen. */
  body.has-booking-wizard .emf-faq-fab { display: none; }
  .emf-faq-fab i, .emf-faq-fab svg { width: 18px; height: 18px; }
  .emf-faq-backdrop { background: rgba(7, 20, 40, 0.5); backdrop-filter: blur(2px); }
  .emf-faq-card {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 84vh;
    border-radius: 18px 18px 0 0;
    animation: emfSheetIn 0.24s ease;
  }
  @keyframes emfSheetIn { from { transform: translateY(100%); } to { transform: none; } }
  body.emf-faq-open { overflow: hidden; }
}

/* ===== Unified service menu + real category filter ========================= */
/* Filtering hides cards with this dedicated class (display:none wins via
   !important) — it does NOT depend on the [hidden] attribute, so the old
   "[hidden] overridden by display:grid" filter regression cannot return. */
.smenu-hide { display: none !important; }

/* Category filter chips. Wrap on every width (never a one-row horizontal
   overflow), full label text, clear selected state, 44px tap targets. */
.smenu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.smenu-chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.smenu-chip:hover { border-color: var(--emerald); }
.smenu-chip:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.smenu-chip.active {
  background: var(--emerald);
  border-color: var(--emerald);
  color: #fff;
}

/* Service cards: 2 columns on phones, 1 column only on very narrow screens,
   3 columns on tablet/desktop. minmax(0,1fr) stops content from forcing a
   column wider than the viewport (no horizontal scroll). */
.smenu-grid {
  display: grid;
  grid-template-columns: 1fr;       /* phones: ONE card per row (full width) */
  gap: 14px;
  align-items: start;
}
@media (min-width: 560px) {
  .smenu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 760px) {
  .smenu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
/* On a phone the card is full-width, so lay the prices in TWO columns — keeps
   each card short instead of a tall single-column list (no long scrolling). */
@media (max-width: 559px) {
  .smenu-prices { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
}

.smenu-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(8, 20, 40, 0.05);
}
.smenu-card-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.smenu-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--mint);
  color: var(--emerald);
}
.smenu-ico i { width: 20px; height: 20px; }
.smenu-card-titles { min-width: 0; }
.smenu-card-name { margin: 0; font-size: 17px; line-height: 1.25; }
.smenu-card-note { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.smenu-card-from {
  display: inline-block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--emerald);
}
.smenu-prices {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.smenu-price-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.smenu-dur { color: var(--ink); }
.smenu-amt { font-weight: 700; color: var(--emerald-dark); white-space: nowrap; }
.smenu-amt-call { font-weight: 600; font-size: 12.5px; color: var(--muted); }
.smenu-book { margin-top: auto; width: 100%; }
.smenu-foot {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.smenu-foot i { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

/* Booking: confirmation email-failure notice + lead-time hint. */
.booking-confirm-warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  margin: 8px auto 0;
  max-width: 460px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7e6;
  border: 1px solid #f0d28a;
  color: #7a5b12;
  font-size: 14px;
  line-height: 1.5;
}
.booking-confirm-warning i { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.booking-confirm-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  margin: 8px auto 0;
  max-width: 460px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--mint, #eef5ef);
  border: 1px solid #d8e6da;
  color: #2f5d43;
  font-size: 14px;
  line-height: 1.5;
}
.booking-confirm-note i, .booking-confirm-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--emerald, #1f7a48); }
.bw-lead-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.bw-lead-note i { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

/* Optional therapist selector, folded into the Date & Time step (collapsed by
   default so the calendar stays the focus — therapist is an optional choice). */
/* Therapist step — revealed BELOW the times once a date+time is chosen, showing
   only the therapists who actually work that slot. */
.bw-dt-therapist { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.bw-dt-therapist[hidden] { display: none; }
.bw-dt-therapist-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--emerald-dark);
}
.bw-dt-therapist-head i, .bw-dt-therapist-head svg { width: 18px; height: 18px; color: var(--emerald); flex: 0 0 auto; }
.bw-dt-therapist-head .bw-opt { font-weight: 500; color: var(--muted); font-size: 13.5px; }
.bw-dt-therapist .bw-therapists { padding: 0; margin: 0; }

/* Booking waitlist (shown when a date has no open times) */
.bw-waitlist { margin-top: 14px; padding: 16px; border: 1px solid var(--line, #dce3ea); border-radius: 14px; background: #fff; }
.bw-wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bw-wl-f { display: grid; gap: 4px; font-size: 14px; font-weight: 600; color: var(--emerald-dark, #0b2038); }
.bw-wl-f input, .bw-wl-f select { padding: 10px 12px; border: 1px solid var(--line, #dce3ea); border-radius: 10px; font: inherit; font-weight: 400; }
.bw-wl-join { margin-top: 12px; min-height: 46px; padding: 11px 18px; border: 0; border-radius: 999px; background: var(--emerald, #1d4e89); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.bw-wl-join:disabled { opacity: .6; cursor: default; }
.bw-wl-msg { margin: 12px 0 0; font-weight: 600; }
.bw-wl-msg.ok { color: #14733f; }
.bw-wl-msg.err { color: #b23b3b; }
@media (max-width: 560px) { .bw-wl-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Accessibility pass (AODA / WCAG 2.1 AA) — additive only.
   Nothing here changes the default (mouse/touch) look: focus rings show
   only on keyboard focus (:focus-visible), the skip link is hidden until
   focused, and motion is reduced only for users who ask for it.
   ===================================================================== */

/* 1) Skip-to-content link — visually hidden until a keyboard user tabs to it. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  background: var(--emerald-dark, #0b2038);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--gold, #d8aa4b);
  outline-offset: 2px;
}
/* The <main> is only a focus *target* for the skip link; it is not an
   interactive control, so don't paint a focus ring around the whole content. */
main#main:focus,
main#main:focus-visible {
  outline: none;
}

/* 2) Visible keyboard focus on interactive elements that have only :hover today.
   Uses :focus-visible so it never shows on mouse/touch — desktop & mobile look
   unchanged. Covers the booking wizard cards, time slots, calendar days/nav,
   the mobile bottom bar, the service-menu book buttons and the FAQ accordion. */
.bw-card:focus-visible,
.bw-therapy-card:focus-visible,
.time-slots .slot:focus-visible,
.bw-slot-row .slot:focus-visible,
.cal-day:focus-visible,
.cal-days button:focus-visible,
.smenu-book:focus-visible,
.bw-wl-join:focus-visible,
.faq-item summary:focus-visible,
.emf-faq-item summary:focus-visible,
.share-modal-close:focus-visible,
.mobile-bar-item:focus-visible {
  outline: 3px solid var(--gold, #d8aa4b);
  outline-offset: 2px;
}
/* Calendar prev/next sit on a light surface — keep the ring inset so it isn't clipped. */
.cal-nav:focus-visible {
  outline: 3px solid var(--emerald, #1d4e89);
  outline-offset: 2px;
}
/* Selected radio-cards already show a coloured border; the focus ring sits on top. */
.bw-card.active:focus-visible,
.bw-therapy-card.active:focus-visible {
  outline-offset: 3px;
}

/* 3) Respect "Reduce motion": switch off scroll-smoothing, transitions and the
   slide/fade keyframes for users who enable the OS setting. Layout is untouched. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Checklist styling for service-feature + promotion benefit lists ====== */
/* Scoped to the Services and Promotions pages so the benefit bullets read as a
   polished green checklist (✓) instead of plain dots. Other pages are untouched. */
body[data-page="services"] .section .card ul,
body[data-page="promotions"] .section .card ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
body[data-page="services"] .section .card ul li,
body[data-page="promotions"] .section .card ul li {
  position: relative;
  padding-left: 27px;
  line-height: 1.5;
}
body[data-page="services"] .section .card ul li::before,
body[data-page="promotions"] .section .card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  color: var(--emerald);
  font-weight: 800;
}

/* ===== Featured: Thai Oil Massage section — larger & more prominent ===== */
#thai-massage {
  padding: 84px 22px;
  background: linear-gradient(180deg, #f3f8f6 0%, var(--white) 72%);
  border-top: 4px solid var(--gold);
}
#thai-massage > .wrap { max-width: 1240px; }
/* Editorial measure: a narrower column reads far better than full-width copy. */
#thai-massage .section-head { max-width: 760px; margin-bottom: 34px; }
/* Refined gold eyebrow with a short rule accent — restrained, premium-spa. */
#thai-massage .eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  letter-spacing: 2.4px;
  font-weight: 800;
}
#thai-massage .eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  margin-right: 12px;
  background: var(--gold);
  border-radius: 2px;
}
/* Elegant Georgia serif headline (matches the booking-wizard titles), composed at
   46px instead of a 60px billboard. */
#thai-massage .section-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.3px;
}
#thai-massage .section-head p { font-size: 18px; line-height: 1.75; color: var(--muted); max-width: 680px; }
#thai-massage .grid.two { gap: 28px; }
#thai-massage .card { border-radius: 14px; box-shadow: 0 16px 40px rgba(8, 20, 40, 0.10); }
#thai-massage .card-body { padding: 32px 30px; }
#thai-massage .card-body h3 { font-size: 25px; margin-bottom: 14px; }
#thai-massage .card-body p,
#thai-massage .card-body li { font-size: 17.5px; line-height: 1.7; }
#thai-massage .card-body ul { margin: 0; padding-left: 1.3em; }
#thai-massage .card-body li { margin-bottom: 7px; }

@media (max-width: 640px) {
  #thai-massage { padding: 40px 18px; }
  #thai-massage .section-head { margin-bottom: 18px; }
  #thai-massage .eyebrow { font-size: 12.5px; letter-spacing: 1.4px; }
  /* Refined, not shouty: a ~28px serif headline wraps to two clean lines instead
     of a 38px wall that breaks the " · " separators onto their own lines. */
  #thai-massage .section-head h2 {
    font-size: clamp(25px, 6.6vw, 30px);
    line-height: 1.14;
    letter-spacing: -0.2px;
    text-wrap: balance;
  }
  #thai-massage .section-head p { font-size: 15.5px; line-height: 1.62; }
  #thai-massage .card-body { padding: 20px 18px; }
  #thai-massage .card-body h3 { font-size: 19px; }
  #thai-massage .card-body p,
  #thai-massage .card-body li { font-size: 14.5px; line-height: 1.6; }
}

/* ===== Therapy-detail sections (RMT · Osteopathy · Acupuncture) share the
   featured Thai section's editorial treatment — serif headlines, gold rule-accent
   eyebrows, a comfortable reading measure — so the whole services page reads as
   one composed, premium page, just a step down in scale from the Thai feature. ===== */
#rmt-massage .section-head,
#osteopathy .section-head,
#acupuncture .section-head { max-width: 760px; }

#rmt-massage .eyebrow,
#osteopathy .eyebrow,
#acupuncture .eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  letter-spacing: 2.2px;
  font-weight: 800;
}
#rmt-massage .eyebrow::before,
#osteopathy .eyebrow::before,
#acupuncture .eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  margin-right: 11px;
  background: var(--gold);
  border-radius: 2px;
}
#rmt-massage .section-head h2,
#osteopathy .section-head h2,
#acupuncture .section-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(27px, 3vw, 35px);
  line-height: 1.16;
  letter-spacing: -0.2px;
  text-wrap: balance;
}
#rmt-massage .section-head > p,
#osteopathy .section-head > p,
#acupuncture .section-head > p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 660px;
}

@media (max-width: 640px) {
  #rmt-massage .section-head h2,
  #osteopathy .section-head h2,
  #acupuncture .section-head h2 { font-size: clamp(22px, 5.6vw, 26px); line-height: 1.18; }
  #rmt-massage .section-head > p,
  #osteopathy .section-head > p,
  #acupuncture .section-head > p { font-size: 15px; line-height: 1.62; }
  #rmt-massage .eyebrow,
  #osteopathy .eyebrow,
  #acupuncture .eyebrow { font-size: 12px; letter-spacing: 1.6px; }
}

/* ===== Desktop: magazine split for the therapy-detail headers — the headline
   sits on the LEFT, the intro copy on the RIGHT, so the row reads edge-to-edge
   instead of leaving a big empty void to the right of a narrow column. ===== */
@media (min-width: 900px) {
  #thai-massage .section-head,
  #rmt-massage .section-head,
  #osteopathy .section-head,
  #acupuncture .section-head {
    max-width: none;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: 64px;
    align-items: center;
  }
  /* left column: eyebrow stacked directly above its headline */
  #thai-massage .section-head > .eyebrow,
  #rmt-massage .section-head > .eyebrow,
  #osteopathy .section-head > .eyebrow,
  #acupuncture .section-head > .eyebrow { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 4px; }
  #thai-massage .section-head > h2,
  #rmt-massage .section-head > h2,
  #osteopathy .section-head > h2,
  #acupuncture .section-head > h2 { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
  /* right column: the intro, vertically centred against the headline block */
  #thai-massage .section-head > p,
  #rmt-massage .section-head > p,
  #osteopathy .section-head > p,
  #acupuncture .section-head > p {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    max-width: none;
    margin: 0;
  }
}

/* ===========================================================
   PHONE COMPACTION (≤560px) — appended last so it wins by source
   order. Goal: fit more real content per screen and a tighter,
   more professional feel on common phones (360–430px wide, which
   previously fell *between* breakpoints and got the roomy layout).
   Rules: never shrink a tap target below ~44px, never put body
   text below 14px, and leave desktop (>560px) completely alone.
   =========================================================== */
@media (max-width: 560px) {
  /* -- Hero: stop eating the whole first screen; reach content sooner -- */
  .hero,
  body[data-page="home"] .page-hero.hero { min-height: 46svh; }
  /* Interior page heroes (services, spa, contact…) are a compact banner, not a
     full screen — capped so the real content starts almost immediately. Content
     can still push it taller when a hero has buttons (min-height is a floor). */
  .page-hero.hero { min-height: clamp(200px, 32svh, 300px); }
  .hero .inner,
  .page-hero .inner { padding-top: 28px; padding-bottom: 22px; }

  /* -- Section rhythm: less dead vertical space between blocks -- */
  .section { padding-top: 34px; padding-bottom: 34px; }
  .section-head { margin-bottom: 20px; }

  /* -- Buttons: one consistent, comfortable height — not chunky.
        46px keeps a solid tap target while trimming the 50–55px feel. -- */
  .btn { min-height: 46px; padding: 11px 16px; font-size: 15px; }
  .bw-nav .btn { min-height: 46px; }

  /* ---------- Booking wizard · service menu ---------- */
  .bw-service-menu { gap: 12px; }
  /* shorter navy header band (was ~75px → ~58px): smaller icon + tighter pad */
  .bw-svc-group-head { padding: 11px 14px 12px; gap: 9px 11px; }
  .bw-svc-group-head::before { left: 14px; right: 14px; }
  .bw-svc-ico { width: 36px; height: 36px; border-radius: 10px; }
  .bw-svc-ico i,
  .bw-svc-ico svg { width: 18px; height: 18px; }
  .bw-svc-group-title { font-size: 17px; }
  /* tighter 2-up duration chips */
  .bw-svc-group .bw-svc-durations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 11px 11px 12px;
    gap: 8px;
  }
  .bw-svc-group .bw-length-card,
  .bw-svc-group .bw-length-card.active,
  .bw-svc-group .bw-length-card.active:hover { min-height: 46px; padding: 7px 10px; }
  .bw-svc-group .bw-length-dur { font-size: 14.5px; }
  .bw-svc-group .bw-length-price { font-size: 12.5px; }

  /* ---------- Booking wizard · steps + titles ---------- */
  .bw-steps { padding: 8px 12px; }
  .bw-step-title { font-size: 17px; margin-bottom: 11px; }

  /* ---------- Booking wizard · date & time slots ---------- */
  .bw-slot-group { padding: 10px 11px 11px; margin-bottom: 10px; }
  .bw-slot-label { margin-bottom: 9px; }
  .bw-slot-row { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; }
  .bw-slot-row .slot,
  .time-slots .slot { min-height: 48px; padding: 7px 6px; }

  /* ---------- Booking wizard · summary card ---------- */
  .bw-summary { padding: 16px 16px; }
  .bw-summary-list { padding: 2px 12px; }
  .bw-summary-list > div { padding: 7px 0; }

  /* ---------- Booking wizard · nav row spacing ---------- */
  .bw-nav { margin-top: 16px; padding-top: 12px; }
}

/* =====================================================================
   PWA — "Install app / Add to Home Screen" prompt (pwa.js)
   Bottom-LEFT so it never collides with the bottom-right help widget.
   ===================================================================== */
.pwa-install {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(340px, calc(100vw - 32px));
  margin: 0;
  padding: 11px 12px 11px 13px;
  border: 1px solid rgba(191, 148, 66, 0.55);
  border-radius: 16px;
  background: linear-gradient(180deg, #123458, #0b2038);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(11, 32, 56, 0.42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.pwa-install.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.pwa-install:hover { border-color: rgba(233, 200, 119, 0.85); }
.pwa-install:focus-visible { outline: 2px solid #e9c877; outline-offset: 2px; }
.pwa-install__icon {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(233, 200, 119, 0.16);
  color: #e9c877;
}
.pwa-install__icon svg { width: 22px; height: 22px; }
.pwa-install__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pwa-install__text b { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.pwa-install__text small { font-size: 11.5px; color: rgba(234, 241, 248, 0.78); }
.pwa-install__close {
  flex: 0 0 auto; margin-left: 2px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 17px; line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.15s, color 0.15s;
}
.pwa-install__close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Instructions sheet (iOS + generic) */
.pwa-sheet {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; place-items: end center;
  padding: 0;
  background: rgba(7, 18, 32, 0);
  transition: background 0.22s ease;
}
.pwa-sheet.is-open { background: rgba(7, 18, 32, 0.55); }
@supports (backdrop-filter: blur(2px)) {
  .pwa-sheet.is-open { backdrop-filter: blur(2px); }
}
.pwa-sheet__card {
  position: relative;
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 22px 22px 26px;
  background: #fff;
  color: var(--emerald-dark, #0b2038);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 50px rgba(11, 32, 56, 0.3);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.pwa-sheet.is-open .pwa-sheet__card { transform: translateY(0); }
@media (min-width: 620px) {
  .pwa-sheet { place-items: center; padding: 24px; }
  .pwa-sheet__card { border-radius: 20px; transform: translateY(16px) scale(0.98); }
  .pwa-sheet.is-open .pwa-sheet__card { transform: translateY(0) scale(1); }
}
.pwa-sheet__x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: rgba(11, 32, 56, 0.06); color: inherit;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.pwa-sheet__x:hover { background: rgba(11, 32, 56, 0.12); }
.pwa-sheet__card h3 { margin: 4px 40px 6px 0; font-size: 1.18rem; }
.pwa-sheet__card > p { margin: 0 0 16px; color: var(--muted, #64706b); line-height: 1.5; }
.pwa-sheet__steps { list-style: none; margin: 0; padding: 0; counter-reset: pstep; }
.pwa-sheet__steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; line-height: 1.4;
  border-top: 1px solid var(--line, #dce3ea);
}
.pwa-sheet__steps li:first-child { border-top: 0; }
.pwa-sheet__steps b { color: var(--emerald-dark, #0b2038); }
.pwa-sheet__ic {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold, #bf9442) 14%, #fff);
  color: var(--gold, #bf9442);
}
.pwa-sheet__ic svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .pwa-install, .pwa-sheet, .pwa-sheet__card { transition: none; }
}

/* --- Notice band: "under new ownership" announcement ------------------------
   A deep-navy, gold-trimmed handover card: the old name in serif italic
   passing to the new brand (gold-sheened), hairline gold rules, address in a
   gold-outlined chip. Deliberately static — the promo capsule above already
   carries the page's motion; stillness here reads as dignity. */
.notice-band {
  background:
    radial-gradient(ellipse 90% 130% at 50% -30%, rgba(238, 194, 92, 0.16), transparent 55%),
    linear-gradient(180deg, #0d2440 0%, #0b2038 60%, #091a2e 100%);
  border-top: 1px solid rgba(238, 194, 92, 0.35);
  border-bottom: 1px solid rgba(238, 194, 92, 0.35);
  padding: 64px 22px 58px;
}
.notice-band-inner {
  max-width: 780px;
  text-align: center;
}
.nb-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 26px;
  color: #eec25c;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.nb-rule {
  flex: 0 0 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 194, 92, 0.7));
}
.nb-rule:last-child {
  background: linear-gradient(270deg, transparent, rgba(238, 194, 92, 0.7));
}
.nb-title {
  margin: 0;
  line-height: 1.25;
}
.nb-old {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px);
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.02em;
}
.nb-isnow {
  display: block;
  margin: 10px auto 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(238, 194, 92, 0.85);
}
.nb-new {
  display: block;
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: 0.2px;
  color: #ffffff; /* fallback when background-clip:text is unsupported */
  background: linear-gradient(115deg, #ffffff 0%, #ffe9a6 32%, #eec25c 52%, #ffffff 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nb-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 22px;
  color: #eec25c;
  font-size: 15px;
}
.nb-divider span {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 194, 92, 0.65));
}
.nb-divider span:last-child {
  background: linear-gradient(270deg, transparent, rgba(238, 194, 92, 0.65));
}
.nb-text {
  margin: 0 auto;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 17.5px;
  line-height: 1.7;
}
.nb-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px auto 0;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(238, 194, 92, 0.4);
  background: rgba(238, 194, 92, 0.08);
  color: #ffe9a6;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nb-address i,
.nb-address svg {
  width: 15px;
  height: 15px;
}
@media (max-width: 560px) {
  .notice-band {
    padding: 46px 18px 42px;
  }
  .nb-eyebrow {
    gap: 10px;
    letter-spacing: 0.18em;
    margin-bottom: 20px;
  }
  .nb-rule {
    flex-basis: 28px;
  }
  .nb-text {
    font-size: 15.5px;
  }
  .nb-address {
    font-size: 13.5px;
    padding: 9px 18px;
  }
}

/* ============================================================================
   Touch targets and minimum text size — 2026-08-30
   ----------------------------------------------------------------------------
   Measured on the live site across 53 phones / 3 engines: 15 controls were
   under the 44x44 minimum that both Apple and Google publish, and five labels
   rendered below 12px. Our clientele skews older, so both of those cost real
   bookings — the phone number was the worst of them at 103x18.

   Everything here works by giving the control a real min-height rather than by
   padding out an invisible ::after. An earlier pass used the pseudo-element
   trick; it was dropped because an auditor measures the element's own box and
   cannot see a pseudo-element, so the fix was invisible to exactly the check
   that found the problem. Rows do get taller — for a clinic whose main
   conversion is the phone number, that is the right outcome, not a compromise.

   This block lives at the end of the file on purpose: it must win over the
   media-query rules further up, which share its specificity.
   ========================================================================= */

/* ---- Contact links: real 44px targets ------------------------------------ */
/* Every tel:/mailto: link on the site sits in a flex row or on its own line
   (top bar, footer contact lines, help dialog) — never mid-sentence — so these
   can become properly sized boxes rather than a pseudo-element hit area. That
   matters: an automated audit measures the element's own box and cannot see a
   ::after, and more to the point the phone number is this business's main
   conversion. inline-flex keeps them inline if one ever does land in a
   sentence; only the line height would grow. The mobile bar is already 50px+
   and lays its own items out, so it is excluded. */
a[href^="tel:"]:not(.mobile-bar-item),
a[href^="mailto:"]:not(.mobile-bar-item) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---- Footer navigation: real 44px rows ----------------------------------- */
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---- Buttons that were a few pixels short -------------------------------- */
/* "Read more" sits on its own line inside .section-head (a block), so giving it
   a real height moves nothing around it. */
.read-more-btn {
  min-height: 44px;
}
/* The floating help button measured 42px tall — one padding step short. */
.emf-faq-fab {
  min-height: 44px;
}
/* The spa price list: 19 rows that add a service to the cart, each 40px tall.
   They are already flex, so a min-height is all they need. */
.spa-menu__row {
  min-height: 44px;
}

/* ---- Mobile quick-action bar --------------------------------------------- */
/* Labels were 10px. At 12px the longest one ("Directions") no longer fits in an
   equal fifth of a 320px screen, so the items are sized to their content
   instead of forced equal — verified at 320px: every item stays >=44px wide and
   the bar no longer overflows. */
.mobile-bar-item {
  font-size: 12px;
  letter-spacing: 0;
  flex: 1 1 auto;
  padding-left: 3px;
  padding-right: 3px;
}

/* ---- Nothing user-facing below 12px -------------------------------------- */
/* Badges and note pills were 9-11.5px. They carry real words customers need to
   read ("INSURANCE RECEIPT", "Package"), not decoration, so they go to 12px. */
.bw-therapy-note,
.bw-tag,
.bw-length-badge,
.bw-svc-group-note,
.bw-svc-item-badge,
.bw-slot-label,
.slot-e,
.price-mobile-row span,
.pwa-install__text small {
  font-size: 12px;
}

/* Appointy booking — shown when settings.bookingProvider is "appointy". The
   default is the card below, which sends the customer to Appointy's own page;
   the iframe styles after it only apply when settings.appointyEmbed is true. */
.appointy-cta {
  margin: 0 0 34px;
  padding: 26px 22px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* Temporary outage notice above the Book button — amber so it reads as a
   warning without looking like an error page. Remove when settings.bookingNotice
   is cleared; the rule can stay, it simply renders nothing. */
.appointy-cta__notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  margin: 0 auto 18px;
  max-width: 52ch;
  padding: 12px 15px;
  background: #fff8e6;
  border: 1px solid #e8c877;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #6b4e0f;
}

.appointy-cta__notice svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #b8860b;
}

.appointy-cta__notice a {
  color: #6b4e0f;
  font-weight: 700;
  white-space: nowrap;
}

.appointy-cta__lead {
  margin: 0 auto 18px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.appointy-cta__btn {
  font-size: 17px;
  padding: 14px 30px;
}

.appointy-cta__alt {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.appointy-cta__alt a {
  color: var(--emerald-dark);
  font-weight: 600;
}

/* The iframe is the clinic's Appointy location; we cannot size it to its content
   (cross-origin), so the height is fixed generously and it scrolls internally. */
.appointy-embed {
  margin: 0 0 34px;
}

.appointy-fallback {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 15px;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.appointy-fallback svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--emerald);
}

.appointy-fallback a {
  color: var(--emerald-dark);
  font-weight: 600;
}

.appointy-frame {
  display: block;
  width: 100%;
  height: 1020px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

@media (max-width: 760px) {
  .appointy-frame {
    height: 1180px;
    border-radius: 10px;
  }
}