/* Relax & Cruz Spa. Shared styles for every page. */

:root {
  --plum: #872D68;
  --plum-ink: #3B0E2E;
  --plum-line: #A35C8A;
  --mauve-line: #C9A5BC;
  --leaf: #A8D080;
  --text: #5B4152;
  --on-plum: #F3E3EE;
  --tint: #F7F0F4;
  --tint-green: #F1F7EA;
  --rule: #E9D8E2;
  --white: #FFFFFF;

  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
  --body: 'Albert Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 28px);
  --section: clamp(72px, 9vw, 112px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--plum-ink);
  background: var(--white);
}

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

a { color: var(--plum); text-underline-offset: 3px; }
a:hover { color: var(--plum-ink); }

:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--plum); color: var(--white); padding: 12px 18px; border-radius: 10px;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.bg-tint { background: var(--tint); }
.bg-green { background: var(--tint-green); }
.bg-plum { background: var(--plum); color: var(--white); }

/* Type */
h1, h2, h3, .display { font-family: var(--display); font-weight: 500; margin: 0; }
.h1 { font-size: clamp(46px, 7.2vw, 108px); line-height: 0.96; letter-spacing: -0.02em; color: var(--plum); }
.h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.015em; color: var(--plum); }
.h3 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; color: var(--plum-ink); }
.bg-plum .h2 { color: var(--white); }
p { margin: 0; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--text); max-width: 540px; }
.muted { color: var(--text); }
.small { font-size: 15px; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }

/* Leaf shape from her logo, used on frames and panels */
.leaf-lg { border-radius: 0 200px 0 200px; }
.leaf-md { border-radius: 0 120px 0 120px; }
.leaf-sm { border-radius: 0 32px 0 32px; }
.leaf-rev { border-radius: 200px 0 200px 0; }
@media (max-width: 720px) {
  .leaf-lg, .leaf-rev { border-radius: 0 96px 0 96px; }
  .leaf-md { border-radius: 0 64px 0 64px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border-radius: 10px;
  font-family: var(--body); font-weight: 600; font-size: 17px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
}
.btn-plum { background: var(--plum); color: var(--white); }
.btn-plum:hover { background: var(--plum-ink); color: var(--white); }
.btn-outline { background: var(--white); color: var(--plum); border-color: var(--plum); }
.btn-outline:hover { background: var(--tint); color: var(--plum-ink); }
.btn-leaf { background: var(--leaf); color: var(--plum-ink); font-weight: 700; }
.btn-leaf:hover { background: #BADD99; color: var(--plum-ink); }
.btn-ghost { background: transparent; color: var(--white); border-color: #D9B2CB; }
.btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }

/* Photo placeholders. Replace each with an <img> before launch. */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 40px; background: var(--tint); border: 2px dashed var(--mauve-line);
  color: var(--text); font-size: 16px;
}
.photo { width: 100%; height: 100%; object-fit: cover; }

/* Header */
.site-header { position: relative; z-index: 20; background: var(--white); }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; padding-block: 18px; }
.brand img { height: 84px; width: auto; }
.nav { display: flex; align-items: center; gap: 8px 24px; }
.nav a { color: var(--plum-ink); text-decoration: none; font-size: 16px; font-weight: 500; white-space: nowrap; }
.nav a:hover { color: var(--plum); text-decoration: underline; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-phone { color: var(--plum-ink); text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; }
.header-actions .btn { min-height: 48px; padding: 0 22px; font-size: 16px; white-space: nowrap; }
.menu-toggle {
  display: none; width: 48px; height: 48px; border-radius: 10px;
  border: 2px solid var(--rule); background: var(--white); color: var(--plum);
  align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
/* The phone number lives in the mobile bar and the booking section; the header has room only for the two booking buttons. */
.header-phone { display: none; }
@media (max-width: 1180px) {
  .brand img { height: 60px; }
  .menu-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 16px;
  }
  .nav.is-open { display: flex; }
  .nav a { font-size: 19px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .nav a:last-child { border-bottom: 0; }
}
@media (max-width: 520px) {
  .header-actions .btn { display: none; }
}

/* Hero */
.hero { padding-top: clamp(16px, 3vw, 32px); padding-bottom: var(--section); }
.hero-grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; }
.hero-copy { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-media { flex: 1 1 340px; min-width: 0; }
.rating { display: flex; gap: 10px; align-items: center; font-size: 16px; color: var(--text); }
.hero-frame { position: relative; height: 560px; }
.hero-frame .ph, .hero-frame img, .hero-frame video { position: absolute; inset: 0; }
.hero-frame .ph { align-items: flex-start; padding-top: 18%; }
.offer-card {
  position: absolute; left: 20px; right: 20px; bottom: 20px; max-width: 340px;
  background: var(--plum); color: var(--white); padding: 26px 28px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.offer-card .price { font-family: var(--display); font-weight: 500; font-size: 68px; line-height: 1; }
.offer-card .what { font-size: 19px; font-weight: 600; line-height: 1.35; }
.offer-card .terms { font-size: 15px; color: var(--on-plum); }
.offer-card a { color: var(--white); }
@media (max-width: 720px) {
  .hero-frame { height: 440px; }
  .offer-card .price { font-size: 56px; }
}

/* Skin tone shade card */
.shades-block { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; }
.shades { display: flex; height: 190px; overflow: hidden; }
.shade { flex: 1 1 0; padding: 16px 20px; font-family: var(--display); font-size: clamp(24px, 3.6vw, 52px); line-height: 1; color: var(--plum-ink); }
.shade.on-dark { color: var(--white); }
.shades-caption { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; align-items: baseline; }
@media (max-width: 720px) {
  .shades { height: 96px; }
  .shade { padding: 10px; }
}

/* Laser explainer */
.split { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.split > * { flex: 1 1 420px; min-width: 0; }
.diagram { position: relative; height: 420px; overflow: hidden; background: #EBC9BC; }
.diagram > span { position: absolute; display: block; }
.d-air { left: 0; right: 0; top: 0; height: 22%; background: #4A1238; }
.d-skin { left: 0; right: 0; top: 22%; height: 16%; background: #6E4226; }
.d-label { color: var(--white); font-size: 14px; font-weight: 600; }
.d-label.dark { color: var(--plum-ink); }
.d-skin-label { left: 30%; top: 26%; }
@media (max-width: 720px) { .d-skin-label { left: 30%; top: 27%; font-size: 13px; } }
.d-beam-short { left: 18%; top: 0; width: 16px; height: 31%; background: #D79BC0; }
.d-heat { width: 60px; height: 60px; border-radius: 999px; }
.d-beam-long { left: 68%; top: 0; width: 16px; height: 76%; background: var(--leaf); }
.d-hair { left: calc(68% + 5px); top: 30%; width: 6px; height: 46%; background: #2B160E; border-radius: 3px; }
.d-bulb { left: calc(68% - 5px); top: calc(76% - 14px); width: 26px; height: 30px; border-radius: 50% 50% 45% 45%; background: #2B160E; }
.legend { display: flex; flex-direction: column; gap: 10px; font-size: 16px; color: var(--text); margin-top: 20px; }
.legend span { display: flex; gap: 12px; align-items: flex-start; }
.legend i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 5px; border-radius: 0 8px 0 8px; }

/* Services list */
.services { display: flex; flex-direction: column; margin-top: 40px; }
.service-row { display: flex; flex-wrap: wrap; gap: 12px 48px; padding-block: 36px; border-top: 1px solid var(--rule); }
.service-row:last-child { border-bottom: 1px solid var(--rule); }
.service-row h3 { flex: 1 1 380px; }
.service-row > div { flex: 1 1 440px; display: flex; flex-direction: column; gap: 10px; }

/* $499 offer */
.offer-grid { display: flex; flex-wrap: wrap; gap: 56px 80px; align-items: flex-start; }
.offer-grid > div { flex: 1 1 420px; min-width: 0; }
.offer-price { font-family: var(--display); font-weight: 500; font-size: clamp(104px, 13vw, 184px); line-height: 0.85; letter-spacing: -0.03em; }
.offer-title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; color: var(--white); }
.on-plum { color: var(--on-plum); }
.choice { display: flex; flex-direction: column; gap: 6px; }
.choice .lead { font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.1; }
.choice .areas { font-size: 19px; color: var(--on-plum); }
.or { font-family: var(--display); font-style: italic; font-size: 24px; color: var(--leaf); }

/* Price finder */
.finder { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; margin-top: 48px; }
.finder-list { flex: 1 1 280px; position: relative; margin: 0; padding: 0; list-style: none; }
.finder-list::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: 22px; width: 2px; background: var(--mauve-line); }
.finder-list li { position: relative; }
.area-btn {
  width: 100%; min-height: 48px; padding: 6px 0; border: 0; background: transparent;
  display: flex; gap: 18px; align-items: center; text-align: left;
  font-family: var(--body); font-size: 20px; font-weight: 500; color: var(--plum-ink); cursor: pointer;
}
.area-btn::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
  border: 2px solid var(--plum); background: var(--white);
}
.area-btn[aria-pressed="true"] { font-weight: 700; }
.area-btn[aria-pressed="true"]::before { background: var(--plum); }
.area-btn:hover { color: var(--plum); }
.finder-panel { flex: 2 1 520px; min-width: 0; background: var(--white); padding: clamp(28px, 5vw, 56px); display: flex; flex-direction: column; gap: 26px; }
.finder-panel .tier { font-size: 18px; font-weight: 600; color: var(--plum); }
.prices { display: flex; flex-wrap: wrap; gap: 20px 48px; }
.price-box { display: flex; flex-direction: column; gap: 2px; }
.price-box .label { font-size: 16px; color: var(--text); }
.price-box .amount { font-family: var(--display); font-size: 40px; line-height: 1.1; color: var(--plum); }
.price-box .extra { font-size: 15px; font-weight: 600; color: var(--plum-ink); }
.offer-note { background: var(--tint-green); padding: 18px 22px; font-size: 17px; }
.finder-cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.finder-cta .small { max-width: 320px; }

/* Reviews */
.quote { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.12; color: var(--plum); margin: 0; }

/* Before and after photos */
.results { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; }
.result { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.result img { display: block; width: 100%; height: auto; border-radius: 0 48px 0 48px; }
.result figcaption { font-size: 16px; color: var(--text); }

/* About Crystal */
.about-name { font-size: clamp(56px, 7.6vw, 116px); line-height: 0.92; letter-spacing: -0.02em; color: var(--plum); }
.about-frame { height: 540px; }
.creds { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.creds li { display: flex; gap: 14px; align-items: center; }
.creds li::before { content: ""; flex: 0 0 auto; width: 12px; height: 18px; border-radius: 0 12px 0 12px; background: var(--plum); }
@media (max-width: 720px) { .about-frame { height: 420px; } }

/* FAQ */
.faq { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.faq > h2 { flex: 1 1 320px; }
.faq-list { flex: 2 1 560px; min-width: 0; }
.faq-list details { border-top: 1px solid var(--rule); padding-block: 22px; }
.faq-list details:last-child { border-bottom: 1px solid var(--rule); }
.faq-list summary { font-family: var(--display); font-size: 26px; color: var(--plum-ink); cursor: pointer; min-height: 44px; }
.faq-list details p { margin-top: 12px; color: var(--text); }

/* Book and footer */
.book-grid { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.book-grid > div:first-child { flex: 1 1 520px; }
.book-grid > div:last-child { flex: 1 1 340px; display: flex; flex-wrap: wrap; gap: 32px 48px; }
.book-grid .info { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; }
.info-title { font-family: var(--display); font-size: 24px; }
.book-title { font-size: clamp(42px, 5.4vw, 80px); line-height: 0.98; letter-spacing: -0.02em; color: var(--white); }
.bg-plum a { color: var(--white); }
.site-footer { display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: space-between; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--plum-line); font-size: 15px; color: var(--on-plum); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer .legal { flex: 1 1 100%; }

/* Mobile call and book bar */
.mobile-bar { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: 88px; }
  .mobile-bar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--white); border-top: 1px solid var(--rule);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bar .btn { min-height: 52px; font-size: 16px; padding: 0 18px; }
  .mobile-bar .btn-plum { flex: 1 1 auto; }
}

/* Service pages */
.page-hero { padding-top: clamp(16px, 3vw, 32px); padding-bottom: var(--section); }
.page-hero .hero-frame { height: 520px; }
@media (max-width: 720px) { .page-hero .hero-frame { height: 380px; } }
.crumbs { font-size: 15px; color: var(--text); }
.crumbs a { color: var(--text); }
.facts { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--rule); }
.facts div { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; }
.facts dt { font-size: 15px; color: var(--text); }
.facts dd { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.15; color: var(--plum); }

.tone-key { display: flex; gap: 10px; margin-top: 12px; }
.tone-key > div { padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: var(--text); }
.tone-key > div:first-child { flex: 3 1 0; background: #F6E6EF; border-radius: 0 0 0 32px; }
.tone-key > div:last-child { flex: 3 1 0; background: var(--tint-green); border-radius: 0 32px 0 0; }
.tone-key strong { color: var(--plum-ink); font-size: 18px; }
@media (max-width: 720px) { .tone-key { flex-direction: column; } }

.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 48px; counter-reset: step; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.steps li { display: flex; flex-direction: column; gap: 10px; counter-increment: step; }
.steps li::before {
  content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 0 26px 0 26px; background: var(--plum); color: var(--white);
  font-family: var(--display); font-size: 26px;
}
.steps h3 { font-size: 26px; line-height: 1.15; color: var(--plum-ink); }
.steps p { color: var(--text); font-size: 17px; }

.table-scroll { margin-top: 40px; overflow-x: auto; background: var(--white); }
.price-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 17px; }
.price-table th, .price-table td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.price-table thead th { font-size: 15px; font-weight: 600; color: var(--text); }
.price-table tbody th { font-family: var(--display); font-weight: 500; font-size: 24px; color: var(--plum-ink); white-space: nowrap; }
.price-table td.areas { color: var(--text); max-width: 360px; }
.price-table td.num { font-family: var(--display); font-size: 24px; color: var(--plum); white-space: nowrap; }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.price-notes { display: flex; flex-wrap: wrap; gap: 20px 48px; margin-top: 28px; }
.price-notes > * { flex: 1 1 300px; }

.cross-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; }
.cross-links > * { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; padding: 28px; background: var(--tint); text-decoration: none; color: var(--plum-ink); }
.cross-links a:hover { background: #F0E3EB; color: var(--plum-ink); }
.cross-links strong { font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--plum); }
.cross-links span { color: var(--text); font-size: 17px; }
.nav a[aria-current="page"] { color: var(--plum); text-decoration: underline; }
.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; }
@media (max-width: 720px) {
  .price-table { min-width: 0; }
  .price-table thead { display: none; }
  .price-table tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; padding: 22px 20px; border-bottom: 1px solid var(--rule); }
  .price-table tbody tr:last-child { border-bottom: 0; }
  .price-table th, .price-table td { display: block; padding: 0; border: 0; }
  .price-table tbody th, .price-table td.areas { grid-column: 1 / -1; max-width: none; }
  .price-table td.areas { font-size: 16px; margin-bottom: 10px; }
  .price-table td.num { font-size: 22px; }
  .price-table td.num::before { content: attr(data-label); display: block; font-family: var(--body); font-size: 13px; color: var(--text); }
}

/* Side-by-side comparison cards */
.compare { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.compare > div { flex: 1 1 340px; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.compare > div:first-child { background: var(--white); border-radius: 0 0 0 48px; }
.compare > div:last-child { background: var(--plum); color: var(--white); border-radius: 0 48px 0 0; }
.compare h3 { font-size: 34px; line-height: 1.1; color: inherit; }
.compare dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.compare dt { font-size: 14px; font-weight: 600; opacity: .8; }
.compare dd { margin: 2px 0 0; font-size: 18px; }
.compare a { color: inherit; }
@media (min-width: 900px) { .cross-links { flex-wrap: nowrap; } }
@media (max-width: 899px) { .cross-links > * { flex-basis: 100%; } }

/* Service menu (facials, massage, shop) */
.menu { margin-top: 40px; display: flex; flex-direction: column; }
.menu-group + .menu-group { margin-top: 56px; }
.menu-group > h3 { font-size: clamp(26px, 2.6vw, 34px); color: var(--plum); margin-bottom: 8px; }
.menu-item { display: flex; flex-wrap: wrap; gap: 6px 40px; padding-block: 24px; border-top: 1px solid var(--rule); }
.menu-item:last-child { border-bottom: 1px solid var(--rule); }
.menu-item .name { flex: 1 1 260px; font-family: var(--display); font-size: 24px; line-height: 1.2; color: var(--plum-ink); }
.menu-item .desc { flex: 2 1 380px; color: var(--text); font-size: 17px; }
.menu-item .meta { flex: 0 0 auto; min-width: 140px; text-align: right; font-weight: 600; color: var(--plum); font-size: 17px; }
@media (max-width: 720px) { .menu-item .meta { text-align: left; } }
.map-frame { width: 100%; height: 420px; border: 0; display: block; }


/* ===== Laser hero video (scoped) ===== */
.hero-frame--video { height: 620px; }
.hero-frame--video video { object-position: 50% 32%; }
.offer-card--compact {
  left: auto; right: 0; bottom: 0; max-width: 300px;
  padding: 20px 24px 16px; gap: 4px;
}
.offer-card--compact .price { font-size: 52px; }
.offer-card--compact .what { font-size: 17px; }
.offer-card--compact .terms { display: none; }
@media (max-width: 720px) {
  .hero-frame--video { height: 460px; }
  .offer-card--compact .price { font-size: 44px; }
}

/* ===== Intro video in Crystal's portrait spot ===== */
.about-video { position: relative; display: block; }
@media (min-width: 721px) { .about-video { height: 660px; max-width: 440px; margin-inline: auto; } }
.about-video video { display: block; object-position: 50% 20%; }
.sound-btn {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(59, 14, 46, .78); color: var(--white);
  font: 600 15px/1 var(--body);
}
.sound-btn:hover { background: var(--plum); }
.sound-btn:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.intro-seek { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
@media (min-width: 721px) { .intro-seek { max-width: 440px; margin-inline: auto; } }
.intro-seek input { flex: 1; min-width: 0; height: 32px; margin: 0; accent-color: var(--plum); cursor: pointer; }
.intro-time { font: 600 14px/1 var(--body); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Cherry financing button (on plum booking section) ===== */
.cherry-note {
  display: inline-flex; align-items: center; align-self: flex-start;
  margin-top: 4px; padding: 11px 20px; border-radius: 999px;
  background: rgba(255,255,255,0.12); border: 1px solid #D9B2CB;
  color: var(--white); font-weight: 600; font-size: 15px;
  text-decoration: none; min-height: 44px;
}
.cherry-note:hover { background: rgba(255,255,255,0.22); color: var(--white); }

/* ===== LED light therapy clip beside its menu group ===== */
.menu-group--media { display: grid; gap: 24px; }
.menu-video { display: block; height: auto; max-width: 420px; aspect-ratio: 1 / 1; }
@media (min-width: 1100px) {
  .menu-group--media { grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; align-items: start; }
  .menu-video { aspect-ratio: 4 / 5; }
}

/* ===== Treatment videos in the results row ===== */
.result video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0 48px 0 48px; }
@media (min-width: 900px) { .results--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===== Four treatment videos in one row ===== */
@media (min-width: 600px) { .results--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .results--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* Laser deal popup (built in main.js) */
.promo {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(59, 14, 46, 0.65);
  opacity: 0; transition: opacity 0.3s ease;
}
.promo[hidden] { display: none; }
.promo.is-open { opacity: 1; }
.promo-card {
  position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: linear-gradient(160deg, var(--plum) 0%, var(--plum-ink) 100%); color: var(--white);
  border-radius: 22px; text-align: center;
  box-shadow: 0 30px 70px rgba(20, 4, 16, 0.5);
  transform: translateY(24px) scale(0.94); transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.promo.is-open .promo-card { transform: none; }
.promo-photo { position: relative; height: clamp(150px, 26vh, 210px); }
.promo-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; border-radius: 22px 22px 0 0; }
.promo-photo::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(59,14,46,0) 45%, rgba(135,45,104,0.95) 100%);
}
.promo-ribbon {
  position: absolute; top: 14px; left: 14px; z-index: 1; margin: 0;
  padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--plum);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.promo-badge {
  position: absolute; right: 18px; bottom: -34px; z-index: 2; margin: 0;
  width: 104px; height: 104px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--leaf); color: var(--plum-ink); border: 4px solid var(--white);
  font-weight: 800; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  transform: rotate(-10deg); box-shadow: 0 10px 24px rgba(20, 4, 16, 0.35);
  animation: promo-wiggle 3.2s ease-in-out 0.8s infinite;
}
.promo-badge span { font-family: var(--display); font-size: 40px; letter-spacing: -0.02em; text-transform: none; margin-bottom: 2px; }
@keyframes promo-wiggle {
  0%, 82%, 100% { transform: rotate(-10deg) scale(1); }
  88% { transform: rotate(-2deg) scale(1.08); }
  94% { transform: rotate(-14deg) scale(1.04); }
}
.promo-body { padding: 26px 28px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.promo-close {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(59, 14, 46, 0.55); color: var(--white);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.promo-close:hover { background: rgba(59, 14, 46, 0.8); }
.promo-title { font-size: clamp(28px, 7vw, 34px); line-height: 1.08; color: var(--white); padding-right: 70px; text-align: left; align-self: stretch; }
.promo-title em { display: block; font-style: italic; color: var(--leaf); }
.promo-text { margin: 2px 0 6px; font-size: 16px; line-height: 1.5; color: var(--on-plum); text-align: left; }
.promo-cta {
  width: 100%; min-height: 60px; gap: 10px;
  font-family: var(--display); font-style: italic; font-weight: 600; font-size: 25px; letter-spacing: 0.01em;
  animation: promo-glow 2.4s ease-in-out infinite;
}
.promo-cta .promo-arrow { font-family: var(--body); font-style: normal; font-size: 22px; transition: transform 0.2s ease; }
.promo-cta:hover .promo-arrow { transform: translateX(4px); }
@keyframes promo-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 208, 128, 0.55); }
  50% { box-shadow: 0 0 0 10px rgba(168, 208, 128, 0); }
}
.promo-how { margin: 0; font-size: 14px; color: var(--on-plum); }
.promo-links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.promo-link { color: var(--white); font-weight: 600; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.promo-link:hover { color: var(--on-plum); }
.promo-skip {
  border: 0; background: none; color: var(--on-plum); font: inherit; font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px;
}
.promo-fine { margin: 0; font-size: 12px; color: var(--on-plum); opacity: 0.8; }
.promo-tab {
  position: fixed; left: 20px; bottom: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px 0 16px; border: 2px solid var(--white); border-radius: 999px;
  background: var(--plum); color: var(--white);
  font-family: var(--body); font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 28px rgba(59, 14, 46, 0.35);
  animation: promo-tab-in 0.4s ease-out;
}
.promo-tab[hidden] { display: none; }
.promo-tab:hover { background: var(--plum-ink); }
.promo-tab-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); animation: promo-glow 2.4s ease-in-out infinite; }
@keyframes promo-tab-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 720px) {
  .promo-tab { left: 16px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .promo, .promo-card { transition: none; }
  .promo-badge, .promo-cta, .promo-tab, .promo-tab-dot { animation: none; }
}

/* ===== Readability and accessibility pass ===== */
/* Green buttons on plum keep their dark text (.bg-plum a was turning it white). */
.bg-plum .btn-leaf, .bg-plum .btn-leaf:hover { color: var(--plum-ink); }

/* Small text in the display font is hard to read, so these use the body font. */
.facts dd { font-family: var(--body); font-size: 21px; font-weight: 600; line-height: 1.35; }
.faq-list summary { font-family: var(--body); font-size: 21px; font-weight: 600; line-height: 1.4; padding-block: 6px; }
.menu-item .name { font-family: var(--body); font-size: 20px; font-weight: 600; }
.price-table tbody th { font-family: var(--body); font-size: 20px; font-weight: 600; }
.price-table td.num { font-family: var(--body); font-size: 21px; font-weight: 600; }
.steps h3 { font-family: var(--body); font-size: 21px; font-weight: 600; line-height: 1.3; }
.info-title { font-family: var(--body); font-size: 20px; font-weight: 600; }

/* Fine print, one step bigger */
.small, .crumbs, .facts dt, .offer-card .terms, .price-table thead th, .cherry-note, .intro-time { font-size: 16px; }
.site-footer { font-size: 16px; line-height: 1.6; }
.compare dt { font-size: 15px; opacity: 1; }
.legend, .result figcaption, .price-box .label, .tone-key > div { font-size: 17px; }
.price-box .extra { font-size: 16px; }
.d-label { font-size: 15px; }
@media (max-width: 720px) { .price-table td.num::before { font-size: 15px; } }

/* Bigger tap targets */
.site-footer nav { gap: 4px 20px; }
.site-footer nav a, .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
p a, li a, dd a, figcaption a { padding-block: 4px; }

/* Pause button on looping videos */
.result, .vid-wrap { position: relative; }
.vid-wrap { display: block; }
.vid-ctl {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 999px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(59, 14, 46, .72); color: var(--white);
}
.vid-ctl--right { left: auto; right: 14px; }
.vid-ctl:hover { background: var(--plum); }
.vid-ctl:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }

/* Phone-only "show more" folds */
.fold-btn { margin-top: 20px; }
@media (max-width: 720px) {
  [data-fold].is-folded, .is-folded-item { display: none !important; }
}
@media (min-width: 721px) { .fold-btn { display: none !important; } }

/* ===== Buttons: cut like the leaf in her logo ===== */
/* Pointed corners sit opposite each other, like the logo leaf. On hover the leaf turns
   (the points swap corners). Main actions are set in the Bodoni italic from the offer popup;
   secondary actions stay in Albert Sans so the two read as different weights of decision. */
.btn {
  --cut: 4px;
  --round: 20px;
  gap: 10px;
  border-width: 1.5px;
  border-radius: var(--cut) var(--round) var(--cut) var(--round);
  letter-spacing: 0.005em;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition:
    border-radius 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.25s ease, transform 0.15s ease;
}
.btn:hover { border-radius: var(--round) var(--cut) var(--round) var(--cut); }
.btn:active { transform: translateY(1px); }

/* Main actions: plum on white, green on plum */
.btn-plum, .btn-leaf {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: 20px; letter-spacing: 0.01em;
}
.btn-plum {
  background-color: var(--plum);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 22px -14px rgba(59, 14, 46, 0.75);
}
.btn-plum:hover {
  background-color: var(--plum-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 26px -14px rgba(59, 14, 46, 0.85);
}
.btn-leaf {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 22px -14px rgba(20, 4, 15, 0.8);
}
.btn-plum::after, .btn-leaf::after {
  content: "\2192";
  font-family: var(--body); font-style: normal; font-weight: 500; font-size: 18px; line-height: 1;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btn-plum:hover::after, .btn-leaf:hover::after { transform: translateX(4px); }

/* Secondary actions: a hairline that fills from the left */
/* (Repeats the colour and image on hover because the older hover rules use the background shorthand.) */
.btn-outline, .btn-outline:hover {
  background-color: var(--white);
  background-image: linear-gradient(var(--tint), var(--tint));
}
.btn-outline { border-color: var(--plum-line); }
.btn-outline:hover { background-size: 100% 100%; border-color: var(--plum); color: var(--plum-ink); }
.btn-ghost, .btn-ghost:hover {
  background-color: transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
}
.btn-ghost { border-color: rgba(217, 178, 203, 0.7); }
.btn-ghost:hover { background-size: 100% 100%; border-color: var(--white); }

/* Tight spots keep the shape but drop the arrow */
.header-actions .btn-plum, .mobile-bar .btn-plum { font-size: 18px; }
.header-actions .btn::after, .mobile-bar .btn::after, .promo-cta::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none; }
  .btn:hover { border-radius: var(--cut) var(--round) var(--cut) var(--round); }
}

/* ===== Header: the logo never shrinks ===== */
/* The logo, the seven links and both booking buttons don't fit on one desktop row,
   so on wide screens the links move to a second row and the logo gets its full width. */
.brand { flex-shrink: 0; }
.brand img { max-width: none; }
@media (min-width: 1181px) {
  .header-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand . actions" "nav nav nav";
    row-gap: 12px;
    padding-block: 18px 0;
  }
  .brand { grid-area: brand; }
  .brand img { height: 92px; }
  .header-actions { grid-area: actions; }
  .header-phone { display: inline; }
  .nav {
    grid-area: nav; justify-content: center; gap: 8px 40px;
    padding-block: 14px; border-top: 1px solid var(--rule);
  }
}

/* ===== Menu: names with a short hint, and a green leaf that glides between them ===== */
.nav a { display: flex; flex-direction: column; text-decoration: none; }
/* Same colour as the intro paragraph under the headline */
.nav a:hover, .nav a[aria-current="page"] { text-decoration: none; color: var(--text); }
.nav-name { font-weight: 700; color: var(--text); }
.nav-hint { font: italic 500 14px/1.25 var(--display); color: var(--text); }
/* On the green leaf the hint darkens so it stays easy to read */
.nav a:hover .nav-hint, .nav a.is-lit .nav-hint { color: var(--plum-ink); }
.nav-glider { display: none; }
@media (min-width: 1181px) {
  .header-bar .nav { position: relative; gap: 4px; padding-block: 8px 10px; }
  .nav a { position: relative; z-index: 1; align-items: center; gap: 1px; padding: 9px 18px 10px; }
  .nav-name { font-size: 17.5px; letter-spacing: 0.005em; }
  .nav-glider {
    display: block; position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0;
    background: var(--leaf); border-radius: 4px 20px 4px 20px; pointer-events: none; opacity: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 18px -12px rgba(59, 14, 46, 0.45);
    transition:
      transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
      height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-radius 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
      opacity 0.25s ease;
  }
  .nav-glider.is-on { opacity: 1; }
  .nav-glider.flip { border-radius: 20px 4px 20px 4px; }
  .nav-glider.no-anim { transition: none; }
}
@media (max-width: 1180px) {
  .nav a { gap: 2px; }
  .nav a[aria-current="page"] {
    background: var(--leaf); border-bottom-color: transparent;
    margin-inline: -14px; padding-inline: 14px; border-radius: 4px 18px 4px 18px;
  }
  .nav a[aria-current="page"] .nav-hint { color: var(--plum-ink); }
}
@media (prefers-reduced-motion: reduce) { .nav-glider { transition: opacity 0.2s ease; } }