/* ==========================================================================
   Viara Med Spa & Wellness — Components
   Buttons · Header/Nav · Footer · Cards · Forms · Dialog · Accordion
   Carousel · Compare slider · Booking wizard · Calendar · Misc
   ========================================================================== */

/* ==========================================================================
   1. Buttons & links
   ========================================================================== */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .85em 1.6em;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(255,255,255,.22), transparent 55%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); color: var(--btn-fg); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; pointer-events: none; box-shadow: none; transform: none;
}

/* Primary buttons carry a soft rose-into-peach gradient — warmer than a flat
   fill, and it makes the main call to action the friendliest thing on screen. */
.btn--primary {
  --btn-bg: linear-gradient(135deg,
              var(--accent) 0%,
              color-mix(in oklab, var(--accent) 74%, var(--secondary)) 100%);
  --btn-fg: var(--accent-ink);
  box-shadow: 0 8px 20px -10px color-mix(in oklab, var(--accent) 55%, transparent);
}
.btn--primary:hover {
  --btn-bg: linear-gradient(135deg,
              var(--accent-hover) 0%,
              color-mix(in oklab, var(--accent-hover) 70%, var(--secondary)) 100%);
}

.btn--dark { --btn-bg: var(--surface-invert); --btn-fg: var(--text-invert); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
}
.btn--outline:hover {
  --btn-bd: var(--accent);
  --btn-fg: var(--accent);
  box-shadow: var(--shadow-sm);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  padding-inline: 1.1em;
}
.btn--ghost:hover { --btn-bg: var(--accent-tint); --btn-fg: var(--accent); box-shadow: none; }

.btn--light { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border); }
.btn--light:hover { --btn-fg: var(--accent); }

.btn--sm { padding: .62em 1.15em; font-size: var(--step--2); }
.btn--lg { padding: 1.05em 2.1em; font-size: var(--step-0); }
.btn--block { width: 100%; }
.btn--icon { padding: .7em; aspect-ratio: 1; border-radius: 50%; }

.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* Text link with animated underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.link-arrow__t {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-med) var(--ease-out);
  padding-bottom: 2px;
}
.link-arrow:hover .link-arrow__t { background-size: 100% 1px; }
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--t-med) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   2. Chips, badges, pills
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .34em .8em;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
}
/* Peach is far too light to be legible on its own tint, so the label is mixed
   heavily toward the ink. Verified at 4.5:1 in both themes — if you retune the
   mix, re-check it. */
.badge--clay {
  background: var(--secondary-tint);
  color: color-mix(in oklab, var(--secondary) 42%, var(--text));
}
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }
/* Honey is a light hue, so the label has to be pulled well toward the ink to
   stay legible on its own translucent tint. Verified at 4.5:1 in both themes. */
.badge--gold {
  background: color-mix(in oklab, var(--hairline) 22%, transparent);
  color: color-mix(in oklab, var(--hairline) 38%, var(--text));
}
.badge--new { background: var(--success-tint); color: var(--success); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .55em 1.05em;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 500;
  transition: color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}
.chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.chip__count {
  font-size: .78em;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. Site header & navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out);
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
  background: color-mix(in oklab, var(--bg) 94%, transparent);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Announcement strip above the header */
.announce {
  background: var(--surface-invert);
  color: var(--text-invert);
  font-size: var(--step--2);
  letter-spacing: .04em;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 2.4rem;
  text-align: center;
}
.announce a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.announce__close {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  padding: .3rem;
  color: inherit;
  opacity: .6;
  line-height: 0;
}
.announce__close:hover { opacity: 1; }
.announce__close svg { width: 1rem; height: 1rem; }
.announce { position: relative; }
@media (max-width: 40rem) {
  .announce__inner { padding-right: 1.5rem; font-size: var(--step--2); }
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--text);
  flex: none;
}
.brand__mark {
  width: 2.4rem; height: 2.4rem;
  flex: none;
  color: var(--accent);
  transition: transform var(--t-slow) var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: .01em;
}
.brand__tag {
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: .28rem;
}

/* Desktop nav */
.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: .2rem; }
}
.nav__link {
  position: relative;
  display: inline-block;
  padding: .55rem .85rem;
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: .28rem;
  width: 0; height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width var(--t-med) var(--ease-out);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { width: calc(100% - 1.7rem); }
.nav__link[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav__link[aria-current="page"]::after { width: calc(100% - 1.7rem); }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* Theme toggle */
.theme-toggle {
  position: relative;
  width: 2.5rem; height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  background: var(--surface);
  transition: color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); transform: rotate(18deg); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* Hamburger */
.nav-toggle {
  width: 2.6rem; height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
}
@media (min-width: 62rem) { .nav-toggle { display: none; } }
.nav-toggle__box { display: grid; gap: 5px; width: 1.15rem; }
.nav-toggle__box i {
  display: block; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast) linear;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.nav-scrim {
  position: fixed; inset: 0;
  z-index: 110;
  background: rgba(20, 18, 16, .5);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out);
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 120;
  width: min(23rem, 88vw);
  height: 100svh;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
  visibility: hidden;
}
.nav-drawer.is-open { transform: none; visibility: visible; }
@media (min-width: 62rem) { .nav-drawer, .nav-scrim { display: none; } }

.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.nav-drawer__close { padding: .5rem; color: var(--text-muted); line-height: 0; }
.nav-drawer__close:hover { color: var(--accent); }
.nav-drawer__close svg { width: 1.4rem; height: 1.4rem; }

.nav-drawer__list { display: grid; gap: .15rem; list-style: none; padding: 0; margin: 0; }
.nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .95rem .25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-decoration: none;
  transition: color var(--t-med) var(--ease-out), padding-left var(--t-med) var(--ease-out);
}
.nav-drawer__link:hover { color: var(--accent); padding-left: .6rem; }
.nav-drawer__link[aria-current="page"] { color: var(--accent); }
.nav-drawer__link span { font-family: var(--font-mono); font-size: .62rem; color: var(--text-muted); }

.nav-drawer__foot { margin-top: auto; display: grid; gap: var(--sp-3); }
.nav-drawer__meta { font-size: var(--step--1); color: var(--text-muted); }
.nav-drawer__meta a { color: var(--text); text-decoration: none; }
.nav-drawer__meta a:hover { color: var(--accent); }

/* ==========================================================================
   4. Footer
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--surface-invert);
  color: var(--text-invert);
  padding-block: var(--sp-8) var(--sp-5);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.site-footer h2, .site-footer h3, .site-footer h4 { color: var(--text-invert); }
.site-footer a { color: color-mix(in oklab, var(--text-invert) 78%, transparent); text-decoration: none; }
.site-footer a:hover { color: var(--text-invert); }

.footer-grid {
  display: grid;
  gap: var(--sp-7) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
@media (min-width: 62rem) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--text-invert) 55%, transparent);
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .7rem; font-size: var(--step--1); }
.footer-col .brand { color: var(--text-invert); }
.footer-col .brand__tag { color: color-mix(in oklab, var(--text-invert) 55%, transparent); }
.footer-col p { color: color-mix(in oklab, var(--text-invert) 72%, transparent); font-size: var(--step--1); }

.footer-hours { display: grid; gap: .55rem; font-size: var(--step--1); }
.footer-hours div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.footer-hours dt { color: color-mix(in oklab, var(--text-invert) 62%, transparent); }
.footer-hours dd { margin: 0; font-variant-numeric: tabular-nums; }

.socials { display: flex; gap: .5rem; }
.social {
  width: 2.35rem; height: 2.35rem;
  display: grid; place-items: center;
  border: 1px solid color-mix(in oklab, var(--text-invert) 20%, transparent);
  border-radius: 50%;
  transition: color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}
.social:hover {
  background: var(--text-invert);
  color: var(--surface-invert) !important;
  transform: translateY(-3px);
  border-color: transparent;
}
.social svg { width: 1.05rem; height: 1.05rem; }

.footer-legal {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid color-mix(in oklab, var(--text-invert) 12%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--step--2);
  color: color-mix(in oklab, var(--text-invert) 58%, transparent);
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ==========================================================================
   5. Cards
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}
.card--flat { background: transparent; border-color: transparent; padding: 0; }
.card--tint { background: var(--bg-tint); }
.card--pad-lg { padding: clamp(var(--sp-5), 3vw, var(--sp-7)); }

.card__icon {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-wash);
  color: var(--accent);
  flex: none;
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }
.card__title { font-size: var(--step-2); }
.card__body { color: var(--text-muted); font-size: var(--step--1); line-height: 1.65; }
.card__foot { margin-top: auto; padding-top: var(--sp-3); }

/* Service card */
.service-card {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--accent) 42%, var(--border));
}
.service-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--grad-blush);
}
.service-card__media img, .service-card__media svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.service-card:hover .service-card__media img,
.service-card:hover .service-card__media svg { transform: scale(1.05); }
.service-card__flag {
  position: absolute; top: .7rem; left: .7rem;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  backdrop-filter: blur(6px);
}
.service-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.service-card__name { font-size: var(--step-2); line-height: 1.25; }
.service-card__price {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.service-card__price small { display: block; font-family: var(--font-body); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); text-align: right; }
.service-card__desc { color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; }
.service-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--step--2); color: var(--text-muted);
}
.service-card__meta span { display: inline-flex; align-items: center; gap: .35em; }
.service-card__meta svg { width: .95em; height: .95em; opacity: .7; }
.service-card__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Price list row (compact menu style) */
.menu-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px dashed var(--border);
  align-items: baseline;
}
.menu-row:last-child { border-bottom: 0; }
.menu-row__name { font-family: var(--font-display); font-size: var(--step-1); }
.menu-row__price { font-family: var(--font-display); font-size: var(--step-1); color: var(--accent); font-variant-numeric: tabular-nums; }
.menu-row__desc { grid-column: 1 / -1; font-size: var(--step--1); color: var(--text-muted); max-width: 62ch; }

/* Testimonial */
.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  height: 100%;
}
/* Stars convey a rating, so they need 3:1 as non-text content. Brand gold
   only reaches 2.7:1 on a light surface — use the text-safe gold. */
.quote-card__stars { display: flex; gap: .15rem; color: var(--accent); }
.quote-card__stars svg { width: 1rem; height: 1rem; }
.quote-card__text {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.5;
  font-style: italic;
  color: var(--text);
  max-width: none;
}
.quote-card__who { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.avatar {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.05rem;
  flex: none;
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
}
.quote-card__name { font-weight: 600; font-size: var(--step--1); }
.quote-card__role { font-size: var(--step--2); color: var(--text-muted); }

/* Plan / membership card */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(var(--sp-5), 2.6vw, var(--sp-6));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  background: linear-gradient(180deg, var(--accent-wash), var(--surface) 40%);
}
.plan__flag {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-ink);
  padding: .3rem .9rem; border-radius: var(--r-pill);
  font-size: var(--step--2); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.plan__name { font-size: var(--step-3); }
.plan__price { display: flex; align-items: baseline; gap: .3rem; }
.plan__amount { font-family: var(--font-display); font-size: var(--step-6); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.plan__per { font-size: var(--step--1); color: var(--text-muted); }
.plan__save { font-size: var(--step--2); color: var(--success); font-weight: 600; }
.plan__list { list-style: none; padding: 0; display: grid; gap: .7rem; font-size: var(--step--1); }
.plan__list li { display: flex; gap: .6rem; align-items: flex-start; color: var(--text-soft); }
.plan__list svg { width: 1.05em; height: 1.05em; margin-top: .35em; color: var(--accent); flex: none; }

/* Stat */
.stat { display: grid; gap: .25rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* Numbered process step */
.step-card { display: grid; gap: var(--sp-3); position: relative; padding-top: var(--sp-4); }
.step-card__num {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1;
  color: color-mix(in oklab, var(--accent) 38%, transparent);
}
.step-card h3 { font-size: var(--step-2); }
.step-card p { font-size: var(--step--1); color: var(--text-muted); }

/* Callout / note */
.note {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  font-size: var(--step--1);
  color: var(--text-soft);
}
.note svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--accent); margin-top: .15rem; }
.note--warn { background: var(--warning-tint); border-left-color: var(--warning); }
.note--warn svg { color: var(--warning); }
.note p { max-width: none; }

/* ==========================================================================
   6. Hero & decorative background
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 7vw, 7rem);
  overflow: clip;
}
.hero__grid {
  display: grid;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: center;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}
.hero__title { font-size: var(--step-7); }
.hero__title .script { display: block; }
.hero__lede { font-size: var(--step-1); color: var(--text-soft); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-6); }

.hero__art {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
  background: var(--grad-blush);
}
@media (max-width: 40rem) { .hero__art { aspect-ratio: 4 / 4.2; } }
.hero__art > img, .hero__art > svg { width: 100%; height: 100%; object-fit: cover; }

/* Floating info card over the hero art */
.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: .85rem 1.1rem;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  animation: float-y 6s var(--ease-in-out) infinite;
}
.float-card--tl { top: 8%; left: -1.25rem; }
.float-card--br { bottom: 7%; right: -1.25rem; animation-delay: -3s; }
@media (max-width: 40rem) {
  .float-card--tl { left: .5rem; top: .75rem; }
  .float-card--br { right: .5rem; bottom: .75rem; }
  .float-card { padding: .6rem .8rem; font-size: .8rem; }
}
.float-card__k { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; color: var(--accent); }
.float-card__l { font-size: var(--step--2); color: var(--text-muted); line-height: 1.3; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .float-card { animation: none; } }

/* Soft ambient blobs */
.bg-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-decor::before, .bg-decor::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.bg-decor::before {
  width: 32rem; height: 32rem;
  top: -12rem; right: -8rem;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 34%, transparent), transparent 68%);
}
.bg-decor::after {
  width: 26rem; height: 26rem;
  bottom: -10rem; left: -7rem;
  background: radial-gradient(circle, color-mix(in oklab, var(--secondary) 32%, transparent), transparent 68%);
}

/* Botanical watermark */
.leaf-watermark {
  position: absolute;
  z-index: 0;
  width: clamp(12rem, 24vw, 22rem);
  color: var(--accent);
  opacity: .07;
  pointer-events: none;
}

/* ==========================================================================
   7. Marquee / trust ticker
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-4);
  border-block: 1px solid var(--border);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-7);
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee__item svg { width: 1rem; height: 1rem; color: var(--hairline); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ==========================================================================
   8. Forms
   ========================================================================== */

.form { display: grid; gap: var(--sp-5); }
.form-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.field { display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }

.label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.label .req { color: var(--danger); }
.hint { font-size: var(--step--2); color: var(--text-muted); }

.input, .textarea, .select {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--step-0);
  transition: border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: .75; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-muted); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6760' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 1.1rem;
}
:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a49c93' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .textarea,
.field[data-invalid="true"] .select {
  border-color: var(--danger);
  background: var(--danger-tint);
}
.field-error {
  display: none;
  font-size: var(--step--2);
  color: var(--danger);
  font-weight: 500;
}
.field[data-invalid="true"] .field-error { display: block; }

/* Checkbox / radio */
.check {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--text-soft);
  cursor: pointer;
}
.check input {
  appearance: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: .2rem;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
  display: grid; place-content: center;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.check input[type="radio"] { border-radius: 50%; }
.check input::before {
  content: "";
  width: .6rem; height: .6rem;
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease-spring);
  background: var(--accent-ink);
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 0, 39% 66%);
}
.check input[type="radio"]::before { clip-path: none; border-radius: 50%; width: .5rem; height: .5rem; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { box-shadow: var(--ring); }

/* Selectable option tile (radio-as-card) */
.opt {
  position: relative;
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}
.opt:hover { border-color: var(--accent); background: var(--accent-wash); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__dot {
  width: 1.15rem; height: 1.15rem;
  margin-top: .18rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  flex: none;
  display: grid; place-content: center;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.opt__dot::after {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent-ink); transform: scale(0);
  transition: transform var(--t-fast) var(--ease-spring);
}
.opt__title { font-weight: 600; font-size: var(--step--1); }
.opt__sub { font-size: var(--step--2); color: var(--text-muted); }
.opt__price { margin-left: auto; font-family: var(--font-display); font-size: var(--step-1); color: var(--accent); white-space: nowrap; }
.opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.opt:has(input:checked) .opt__dot { background: var(--accent); border-color: var(--accent); }
.opt:has(input:checked) .opt__dot::after { transform: scale(1); }
.opt:has(input:focus-visible) { box-shadow: var(--ring); }

/* Honeypot */
.hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Form status message */
.form-status {
  display: none;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--step--1);
}
.form-status.is-shown { display: flex; }
.form-status--ok { background: var(--success-tint); color: var(--success); }
.form-status--err { background: var(--danger-tint); color: var(--danger); }
.form-status svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* ==========================================================================
   9. Native dialog
   ========================================================================== */

dialog.modal {
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(86svh, 50rem);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
dialog.modal::backdrop {
  background: rgba(20, 18, 16, .55);
  backdrop-filter: blur(4px);
}
dialog.modal[open] { animation: modal-in var(--t-med) var(--ease-out); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.modal__body { padding: var(--sp-5); overflow-y: auto; max-height: 58svh; display: grid; gap: var(--sp-4); }
.modal__foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg-tint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: flex-end;
}
.modal__close { padding: .4rem; color: var(--text-muted); line-height: 0; flex: none; }
.modal__close:hover { color: var(--accent); }
.modal__close svg { width: 1.35rem; height: 1.35rem; }

/* ==========================================================================
   10. Accordion (<details>)
   ========================================================================== */

.acc { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.acc + .acc { margin-top: var(--sp-3); }
.acc[open] { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-sm); }
.acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  list-style: none;
  transition: color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out);
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__summary:hover { color: var(--accent); background: var(--accent-wash); }
.acc__summary::after {
  content: "";
  width: .7rem; height: .7rem;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-med) var(--ease-out);
  opacity: .6;
}
.acc[open] > .acc__summary { color: var(--accent); }
.acc[open] > .acc__summary::after { transform: rotate(-135deg) translateY(-2px); }
.acc__content { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); font-size: var(--step--1); line-height: 1.7; }
.acc__content > * + * { margin-top: var(--sp-3); }

/* ==========================================================================
   11. Testimonial carousel
   ========================================================================== */

.carousel { position: relative; }
.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: var(--sp-5); }
.carousel__slide {
  flex: 0 0 min(100%, 30rem);
  scroll-snap-align: center;
}
@media (min-width: 62rem) { .carousel__slide { flex-basis: min(46%, 32rem); } }

.carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.carousel__btn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
  transition: color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}
.carousel__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.carousel__btn svg { width: 1.05rem; height: 1.05rem; }
.carousel__dots { display: flex; gap: .45rem; }
.carousel__dot {
  width: .5rem; height: .5rem;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  transition: color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out),
              width var(--t-med) var(--ease-out);
}
.carousel__dot.is-active { width: 1.6rem; background: var(--accent); }

/* ==========================================================================
   12. Before / after compare slider
   ========================================================================== */

.compare {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
  background: var(--surface-2);
}
.compare__layer { position: absolute; inset: 0; }
.compare__layer > img, .compare__layer > svg { width: 100%; height: 100%; object-fit: cover; }
.compare__layer--after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
  transform: translateX(-1px);
  pointer-events: none;
}
.compare__knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.85rem; height: 2.85rem;
  border-radius: 50%;
  background: #fff;
  color: #2c2925;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.compare__knob svg { width: 1.25rem; height: 1.25rem; }
.compare__tag {
  position: absolute;
  bottom: .85rem;
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(20,18,16,.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.compare__tag--l { left: .85rem; }
.compare__tag--r { right: .85rem; }
.compare__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.compare:focus-within .compare__knob { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 55%, transparent); }

/* ==========================================================================
   13. Booking wizard
   ========================================================================== */

.wizard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.wizard__head { padding: var(--sp-5); border-bottom: 1px solid var(--border); background: var(--bg-tint); }
.wizard__body { padding: clamp(var(--sp-5), 3vw, var(--sp-6)); }
.wizard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) clamp(var(--sp-5), 3vw, var(--sp-6));
  border-top: 1px solid var(--border);
  background: var(--bg-tint);
}
.wizard__step { display: none; }
.wizard__step.is-active { display: grid; gap: var(--sp-5); animation: step-in var(--t-med) var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Progress stepper */
.stepper { display: flex; align-items: flex-start; gap: 0; list-style: none; padding: 0; margin: 0; }
.stepper__item { flex: 1; display: grid; gap: .5rem; justify-items: center; text-align: center; position: relative; }
.stepper__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: .85rem; left: 50%;
  width: 100%; height: 2px;
  background: var(--border);
  z-index: 0;
}
.stepper__item.is-done:not(:last-child)::after { background: var(--accent); }
.stepper__dot {
  position: relative;
  z-index: 1;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}
.stepper__label {
  font-size: var(--step--2);
  color: var(--text-muted);
  letter-spacing: .04em;
}
@media (max-width: 34rem) { .stepper__label { display: none; } }
.stepper__item.is-active .stepper__dot { border-color: var(--accent); color: var(--accent); box-shadow: var(--ring); }
.stepper__item.is-active .stepper__label { color: var(--accent); font-weight: 600; }
.stepper__item.is-done .stepper__dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.stepper__item.is-done .stepper__dot span { display: none; }
.stepper__item.is-done .stepper__dot::after {
  content: "";
  width: .5rem; height: .5rem;
  background: currentColor;
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 0, 39% 66%);
}

/* Calendar */
.cal { display: grid; gap: var(--sp-4); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cal__month { font-family: var(--font-display); font-size: var(--step-2); }
.cal__nav { display: flex; gap: .4rem; }
.cal__navbtn {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}
.cal__navbtn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.cal__navbtn[disabled] { opacity: .35; cursor: not-allowed; }
.cal__navbtn svg { width: 1rem; height: 1rem; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.cal__dow {
  text-align: center;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: .4rem;
}
.cal__day {
  aspect-ratio: 1;
  min-height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--bg-tint);
  color: var(--text);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.cal__day:hover:not([disabled]) { background: var(--accent-tint); color: var(--accent); transform: scale(1.06); }
.cal__day[disabled] { background: transparent; color: var(--text-muted); opacity: .35; cursor: not-allowed; }
.cal__day.is-empty { background: transparent; border: 0; pointer-events: none; }
.cal__day.is-today { border-color: var(--border-strong); font-weight: 700; }
.cal__day.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow: var(--shadow-glow);
}

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .5rem; }
.slot {
  padding: .65rem .4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}
.slot:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.slot[disabled] { opacity: .34; cursor: not-allowed; text-decoration: line-through; }
.slot.is-selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* Booking summary rail */
.summary {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.summary__rows { display: grid; gap: .75rem; font-size: var(--step--1); }
.summary__row { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
.summary__row dt { color: var(--text-muted); flex: none; }
.summary__row dd { margin: 0; text-align: right; font-weight: 500; }
.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-strong);
}
.summary__total dt { font-weight: 600; }
.summary__total dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.summary__empty { color: var(--text-muted); font-size: var(--step--1); font-style: italic; }

/* Confirmation */
.confirm-hero { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; padding-block: var(--sp-5); }
.confirm-hero__ring {
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--success-tint);
  color: var(--success);
  animation: pop var(--t-slow) var(--ease-spring);
}
.confirm-hero__ring svg { width: 2.1rem; height: 2.1rem; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ==========================================================================
   14. Gallery
   ========================================================================== */

.gallery {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.gallery__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--grad-blush);
  border: 1px solid var(--border);
}
.gallery__item:nth-child(3n+1) { grid-row: span 1; }
.gallery__item > img, .gallery__item > svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.gallery__item:hover > img, .gallery__item:hover > svg { transform: scale(1.07); }
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,18,16,.42), transparent 55%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}
.gallery__item:hover::after { opacity: 1; }
.gallery__cap {
  position: absolute;
  bottom: .7rem; left: .8rem; right: .8rem;
  z-index: 1;
  color: #fff;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(6px);
  transition: color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: none; }

/* ==========================================================================
   15. Page header (interior pages) & breadcrumb
   ========================================================================== */

.page-head {
  position: relative;
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem) clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  background: var(--grad-warm);
  border-bottom: 1px solid var(--border);
  overflow: clip;
}
.page-head__inner { display: grid; gap: var(--sp-4); position: relative; z-index: 1; }
.page-head h1 { font-size: var(--step-6); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--step--2); color: var(--text-muted); list-style: none; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li:not(:last-child)::after { content: "/"; opacity: .5; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--text); }

/* ==========================================================================
   16. Toolbar (filter/sort)
   ========================================================================== */

.toolbar {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.toolbar__filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.search-field { position: relative; flex: 1 1 14rem; min-width: 0; }
.search-field .input { padding-left: 2.6rem; }
.search-field svg {
  position: absolute; left: .9rem; top: 50%;
  transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem;
  color: var(--text-muted);
  pointer-events: none;
}
.toolbar__meta { font-size: var(--step--2); color: var(--text-muted); margin-left: auto; }

.empty-state {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--text-muted);
}
.empty-state svg { width: 2.5rem; height: 2.5rem; opacity: .5; }

/* ==========================================================================
   16b. Comparison table
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.table th, .table td {
  padding: var(--sp-4) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-tint);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
}
.table thead th:first-child {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.table__sub {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-top: .15rem;
}
.table tbody th {
  font-weight: 500;
  color: var(--text-soft);
  font-size: var(--step--1);
}
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--accent-wash); }
.table td { color: var(--text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   17. CTA band
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: clip;
  background: var(--grad-accent);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(var(--sp-6), 4vw, var(--sp-9)) clamp(var(--sp-5), 4vw, var(--sp-8));
  box-shadow: var(--shadow-lg);
}
.cta-band h2, .cta-band p { color: #fff; }
.cta-band p { color: #fff; }  /* full white: needed for 4.5:1 on the rose gradient */
.cta-band .btn--light { --btn-bg: #fff; --btn-fg: #2c2925; --btn-bd: transparent; }
.cta-band .btn--outline { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.5); }
.cta-band .btn--outline:hover { --btn-bd: #fff; --btn-fg: #fff; }
.cta-band__deco {
  position: absolute;
  right: -3rem; bottom: -5rem;
  width: 22rem;
  color: #fff;
  opacity: .12;
  pointer-events: none;
}

/* ==========================================================================
   18. Toast
   ========================================================================== */

.toast-host {
  position: fixed;
  z-index: 300;
  bottom: var(--sp-5);
  right: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  max-width: min(24rem, calc(100vw - 2rem));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--step--1);
  animation: toast-in var(--t-med) var(--ease-out);
}
.toast.is-leaving { animation: toast-out var(--t-med) var(--ease-out) forwards; }
.toast svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--accent); margin-top: .1rem; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ==========================================================================
   19. Misc: back-to-top, scroll progress, sticky mobile CTA
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--accent), var(--hairline));
  pointer-events: none;
}

.to-top {
  position: fixed;
  z-index: 90;
  right: var(--sp-5);
  bottom: var(--sp-5);
  width: 2.85rem; height: 2.85rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              opacity var(--t-med) var(--ease-out);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.to-top svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 48rem) { .to-top { bottom: calc(var(--sp-5) + 3.6rem); } }

/* Sticky "Book" bar on small screens */
.mobile-cta {
  position: fixed;
  z-index: 95;
  inset-inline: 0; bottom: 0;
  display: flex;
  gap: .6rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.mobile-cta .btn { flex: 1; }
@media (min-width: 48rem) { .mobile-cta { display: none; } }

/* ==========================================================================
   20. Warmth layer
   The softening details — this is where the site stops feeling like a clinic
   waiting room and starts feeling like somewhere you would happily sit down.
   ========================================================================== */

/* A sunrise-tinted section band: blush drifting into peach */
.section--sunrise {
  background: var(--grad-sunrise);
  position: relative;
}

/* Featured cards get a faint gradient wash and a rose edge */
.card--warm {
  background: linear-gradient(180deg, var(--accent-wash) 0%, var(--surface) 42%);
  border-color: color-mix(in oklab, var(--accent) 26%, var(--border));
}

/* Soft blush halo behind an element */
.haloed { position: relative; isolation: isolate; }
.haloed::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -8%;
  background: var(--glow-blush);
  filter: blur(18px);
  pointer-events: none;
}

/* Hand-drawn underline for a word or two of emphasis */
.squiggle { position: relative; white-space: nowrap; }
.squiggle::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.18em;
  height: 0.34em;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c26-5 52-6.5 78-4.5s52 6 118 1.5' fill='none' stroke='%23e0896b' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: .85;
  pointer-events: none;
}

/* Warm welcome note — a friendly aside from a practitioner */
.welcome {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: clamp(var(--sp-5), 3.4vw, var(--sp-7));
  padding-left: clamp(var(--sp-6), 4vw, var(--sp-8));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
@media (min-width: 48rem) {
  .welcome { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); }
}
.welcome::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--grad-accent);
}
.welcome__portrait {
  width: clamp(5.5rem, 14vw, 8.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-glow);
  background: var(--grad-blush);
}
.welcome__portrait > svg,
.welcome__portrait > img { width: 100%; height: 100%; object-fit: cover; }

.welcome__quote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.5;
  color: var(--text);
  max-width: 54ch;
}
.welcome__sig {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--accent);
}
.welcome__role {
  font-size: var(--step--2);
  color: var(--text-muted);
  letter-spacing: .04em;
}

/* ==========================================================================
   21. Treatment finder
   ========================================================================== */

.finder {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  background: linear-gradient(165deg, var(--accent-wash) 0%, var(--surface) 55%);
  box-shadow: var(--shadow-md);
}
.finder__inner {
  position: relative;
  z-index: 1;
  padding: clamp(var(--sp-5), 3.4vw, var(--sp-8));
}

.finder__head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.finder__progress { display: flex; gap: .35rem; margin-bottom: var(--sp-2); }
.finder__pip {
  height: 4px;
  flex: 1;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  transition: background-color var(--t-med) var(--ease-out);
}
.finder__pip.is-done { background: var(--accent); }
.finder__pip.is-active {
  background: linear-gradient(90deg,
    var(--accent) 50%,
    color-mix(in oklab, var(--accent) 18%, transparent) 50%);
}

.finder__q {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
}
.finder__hint { font-size: var(--step--1); color: var(--text-muted); }

.finder__options {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* A big, soft, obviously tappable answer tile */
.answer {
  display: grid;
  gap: .5rem;
  padding: var(--sp-5) var(--sp-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out);
}
.answer:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: var(--shadow-md);
}
.answer:active { transform: translateY(-1px) scale(.99); }
.answer__icon {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--accent);
}
.answer__icon svg { width: 1.35rem; height: 1.35rem; }
.answer__label { font-weight: 600; font-size: var(--step-0); }
.answer__sub { font-size: var(--step--2); color: var(--text-muted); line-height: 1.5; }

.finder__step { animation: step-in var(--t-med) var(--ease-out); }

/* Result */
.finder__result { display: grid; gap: var(--sp-5); }
.finder__match {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 42rem) {
  .finder__match { grid-template-columns: 12rem minmax(0, 1fr); align-items: center; }
}
.finder__match-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--grad-blush);
}
.finder__match-media > svg { width: 100%; height: 100%; }
.finder__why {
  font-size: var(--step--1);
  color: var(--text-soft);
  background: var(--accent-wash);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.finder__why p { max-width: none; }
.finder__alts { display: grid; gap: var(--sp-2); }
.finder__alt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  font-size: var(--step--1);
  transition: border-color var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.finder__alt:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  transform: translateX(3px);
  color: var(--text);
}
.finder__alt b {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
}
.finder__alt span {
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Petals drifting behind the finder */
.finder__petals {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.finder__petal {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 60% 40% 55% 45%;
  background: color-mix(in oklab, var(--secondary) 60%, transparent);
  opacity: 0;
  animation: drift 16s linear infinite;
}
@keyframes drift {
  0%   { transform: translate(0, -12%) rotate(0deg); opacity: 0; }
  10%  { opacity: .5; }
  85%  { opacity: .35; }
  100% { transform: translate(30px, 900%) rotate(240deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .finder__petal { animation: none; opacity: .22; }
}

/* ==========================================================================
   22. Editorial layer
   The previous rhythm was centred-heading → three-column grid, over and over,
   which is exactly what reads as "template". This layer replaces it: numbered
   section markers, deliberately asymmetric headers, oversized display type,
   and full-bleed horizontal rails.
   ========================================================================== */

/* ---- Section header: number left, heading offset, meta far right -------- */

.chapter {
  display: grid;
  gap: var(--sp-4);
  align-items: end;
  margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-8));
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 52rem) {
  .chapter {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-6);
  }
}
.chapter__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--accent) 55%, transparent);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.chapter__title { font-size: var(--step-5); line-height: 1.04; }
.chapter__title em {
  font-style: italic;
  color: var(--accent);
}
.chapter__lede { color: var(--text-muted); font-size: var(--step-0); max-width: 46ch; }
.chapter__aside {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (min-width: 52rem) { .chapter__aside { text-align: right; } }

/* ---- Editorial hero ---------------------------------------------------- */

.hero--editorial {
  padding-block: clamp(2.5rem, 2rem + 4vw, 5rem) clamp(3rem, 2rem + 6vw, 6rem);
}
.hero--editorial .hero__grid { align-items: end; }
@media (min-width: 64rem) {
  .hero--editorial .hero__grid { grid-template-columns: 1.15fr .85fr; }
}
.hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero__kicker b { color: var(--accent); font-weight: 600; }

/* Display type big enough to be a design decision rather than a default */
.hero__display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 1.4rem + 8.5vw, 7.5rem);
  line-height: .92;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.hero__display em {
  font-style: italic;
  color: var(--accent);
  display: block;
  padding-left: clamp(1rem, 6vw, 5rem);
}

/* ---- Category rail (home) ---------------------------------------------- */

.cat-list { display: grid; gap: 0; border-top: 1px solid var(--border); }

.cat-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  padding: clamp(var(--sp-4), 2.4vw, var(--sp-6)) var(--sp-2);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background-color var(--t-med) var(--ease-out),
              padding-left var(--t-med) var(--ease-out),
              color var(--t-med) var(--ease-out);
}
.cat-card:hover {
  background: var(--accent-wash);
  padding-left: var(--sp-5);
  color: var(--text);
}
.cat-card__num {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--accent);
  letter-spacing: .1em;
}
.cat-card__body { display: grid; gap: .25rem; min-width: 0; }
.cat-card__label {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.1;
}
.cat-card__blurb {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 52ch;
}
.cat-card__meta {
  display: grid;
  gap: .15rem;
  text-align: right;
  font-size: var(--step--2);
  color: var(--text-muted);
  white-space: nowrap;
}
.cat-card__from { color: var(--accent); font-weight: 600; }
.cat-card > svg {
  width: 1.1rem; height: 1.1rem;
  color: var(--accent);
  transition: transform var(--t-med) var(--ease-out);
}
.cat-card:hover > svg { transform: translateX(5px); }
@media (max-width: 40rem) {
  .cat-card { grid-template-columns: auto minmax(0, 1fr); }
  .cat-card__meta { grid-column: 2; text-align: left; }
  .cat-card > svg { display: none; }
}

/* ---- The menu (services page) ------------------------------------------ */

.menu { display: grid; gap: clamp(var(--sp-7), 5vw, var(--sp-9)); }

.menu-group__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--text);
}
.menu-group__num {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--accent);
  letter-spacing: .1em;
}
.menu-group__title { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.05; }
.menu-group__blurb { font-size: var(--step--1); color: var(--text-muted); max-width: 60ch; }
.menu-group__count {
  font-family: var(--font-display);
  font-size: var(--step-3);
  /* This is the treatment count — real information, so it has to clear 3:1 as
     large text. At the 45% mix it originally used it measured 2:1. */
  color: color-mix(in oklab, var(--accent) 82%, transparent);
  font-variant-numeric: tabular-nums;
}
.menu-group__rows { display: grid; }

/* A price row that expands its detail on hover/focus-within */
.menu-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: var(--sp-4);
  border-bottom: 1px dashed var(--border);
  transition: background-color var(--t-med) var(--ease-out);
}
.menu-row:hover { background: var(--accent-wash); }
.menu-row__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}
.menu-row__price--soft {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--text-muted);
  font-weight: 500;
}
.menu-row__desc { grid-column: 1 / -1; display: grid; gap: var(--sp-2); }
.menu-row__desc p { font-size: var(--step--1); color: var(--text-muted); max-width: 68ch; }
.menu-row__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--step--2);
}
.menu-row__len {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: var(--text-muted);
}
.menu-row__len svg { width: .95em; height: .95em; }
.menu-row__book,
.menu-row__more {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
}
.menu-row__book svg { width: .95em; height: .95em; transition: transform var(--t-med) var(--ease-out); }
.menu-row__book:hover svg { transform: translateX(3px); }
.menu-row__more { color: var(--text-muted); text-decoration: underline; text-underline-offset: .2em; }
.menu-row__more:hover { color: var(--accent); }

/* ---- Sticky jump rail -------------------------------------------------- */

.menu-layout { display: grid; gap: var(--sp-6); }
@media (min-width: 64rem) {
  .menu-layout { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
}
.rail { position: sticky; top: calc(var(--header-h) + var(--sp-5)); display: none; }
@media (min-width: 64rem) { .rail { display: block; } }
.rail__title {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.rail__list { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.rail__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: .5rem 0;
  border-left: 2px solid var(--border);
  padding-left: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              padding-left var(--t-med) var(--ease-out);
}
.rail__link:hover { color: var(--text); border-left-color: var(--border-strong); padding-left: calc(var(--sp-3) + 3px); }
.rail__link.is-current {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.rail__count { font-size: var(--step--2); opacity: .6; font-variant-numeric: tabular-nums; }

/* ---- Card price variant for "at consultation" -------------------------- */

.service-card__price--soft {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
  text-align: right;
}
.service-card__price--soft small { margin-top: .2rem; }

/* ---- Full-bleed horizontal rail ---------------------------------------- */

.bleed-rail {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.bleed-rail::-webkit-scrollbar { display: none; }
.bleed-rail__track { display: flex; gap: var(--sp-4); width: max-content; padding-bottom: var(--sp-2); }
.bleed-rail__track > * { flex: 0 0 min(78vw, 22rem); scroll-snap-align: start; }

/* ---- Square booking notice --------------------------------------------- */

.square-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--step--2);
  color: var(--text-muted);
  width: fit-content;
}
.square-note svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; }

/* ---- Placeholder marker for content awaiting real data ----------------- */

.needs-content {
  padding: var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--warning-tint);
  color: color-mix(in oklab, var(--warning) 80%, var(--text));
  font-size: var(--step--1);
}
.needs-content strong { display: block; margin-bottom: .25rem; }

/* Wordmark: the "by Vicky" half sits in italic display at a smaller size */
.brand__name em {
  font-style: italic;
  font-size: .82em;
  opacity: .82;
}
.chapter__aside .link-arrow { font-size: var(--step--2); }

/* Group wrapper: scroll-margin so rail jumps clear the sticky header */
.menu-group { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.cat-card__count { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   23. Luxe layer
   Her own positioning is "Luxury Med Spa & Aesthetics", so the site needs a
   register the cream-and-blush palette alone could not reach. Deep plum-black
   grounds, champagne hairlines, blush kept as the accent.

   This is applied to whole sections via .lux rather than replacing the light
   theme — a page that alternates between deep and light reads far more
   expensive than one that is uniformly either.
   ========================================================================== */

.lux {
  /* Sampled from her rebrand artwork — see tokens.css */
  --lux-ink: #0f0d0b;
  --lux-ink-2: #17140f;
  --lux-champagne: #be9560;
  --lux-gold-light: #ddb87f;
  --lux-cream: #f8efe4;

  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(190, 149, 96, .26), transparent 62%),
    radial-gradient(90% 80% at 8% 92%, rgba(190, 149, 96, .14), transparent 60%),
    linear-gradient(168deg, var(--lux-ink-2) 0%, var(--lux-ink) 62%, #0e0809 100%);
  color: var(--lux-cream);
  overflow: clip;
}

/* Fine champagne rule top and bottom — the cheapest signal of "expensive" */
.lux::before,
.lux::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(190, 149, 96, .55) 22%, rgba(190, 149, 96, .55) 78%, transparent);
  pointer-events: none;
}
.lux::before { top: 0; }
.lux::after { bottom: 0; }

/* Text inside a lux block */
.lux h1, .lux h2, .lux h3, .lux h4 { color: #fffdfa; }
.lux p, .lux .lede { color: rgba(248, 239, 228, .80); }
.lux .lede { color: rgba(248, 239, 228, .86); }
.lux .eyebrow { color: var(--lux-champagne); }
.lux .chapter { border-bottom-color: rgba(190, 149, 96, .22); }
.lux .chapter__num {
  -webkit-text-stroke: 1px rgba(190, 149, 96, .55);
  color: transparent;
}
.lux .chapter__title em { color: var(--lux-gold-light); }
.lux .chapter__lede, .lux .chapter__aside { color: rgba(248, 239, 228, .62); }
.lux .stat__num { color: var(--lux-champagne); }
.lux .stat__label { color: rgba(248, 239, 228, .60); }
.lux .hero__kicker {
  border-bottom-color: rgba(190, 149, 96, .22);
  color: rgba(248, 239, 228, .62);
}
.lux .hero__kicker b { color: var(--lux-champagne); }
.lux .hero__display em { color: var(--lux-gold-light); }
.lux .square-note {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(190, 149, 96, .26);
  color: rgba(248, 239, 228, .78);
}
.lux .square-note svg { color: var(--lux-champagne); }

/* Buttons on a dark ground */
.lux .btn--primary {
  --btn-bg: linear-gradient(135deg, #ddb87f 0%, #be9560 100%);
  --btn-fg: #0f0d0b;
  box-shadow: 0 10px 26px -12px rgba(190, 149, 96, .5);
}
.lux .btn--primary:hover {
  --btn-bg: linear-gradient(135deg, #ecd0a4 0%, #d0a86e 100%);
}
.lux .btn--outline {
  --btn-fg: #f8efe4;
  --btn-bd: rgba(248, 239, 228, .34);
}
.lux .btn--outline:hover {
  --btn-fg: var(--lux-champagne);
  --btn-bd: var(--lux-champagne);
}

/* Cards on a dark ground: glass rather than white blocks */
.lux .card,
.lux .service-card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(248, 239, 228, .13);
  backdrop-filter: blur(6px);
}
.lux .card:hover,
.lux .service-card:hover {
  border-color: rgba(190, 149, 96, .45);
  background: rgba(255, 255, 255, .07);
}
.lux .card__title, .lux .service-card__name { color: #fffdfa; }
.lux .card__body, .lux .service-card__desc,
.lux .service-card__meta { color: rgba(248, 239, 228, .68); }
.lux .card__icon {
  background: rgba(190, 149, 96, .14);
  color: var(--lux-champagne);
}
.lux .service-card__price { color: var(--lux-champagne); }
.lux .service-card__price small { color: rgba(248, 239, 228, .55); }
.lux .service-card__price--soft { color: rgba(248, 239, 228, .72); }
.lux .badge {
  background: rgba(190, 149, 96, .16);
  color: var(--lux-champagne);
}
.lux .badge--gold {
  background: rgba(190, 149, 96, .16);
  color: var(--lux-champagne);
}
.lux .badge--outline {
  border-color: rgba(248, 239, 228, .3);
  color: rgba(248, 239, 228, .72);
}

/* The category index on a dark ground */
.lux .cat-list { border-top-color: rgba(248, 239, 228, .14); }
.lux .cat-card {
  border-bottom-color: rgba(248, 239, 228, .14);
  color: #f8efe4;
}
.lux .cat-card:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.lux .cat-card__num { color: var(--lux-champagne); }
.lux .cat-card__label { color: #fffdfa; }
.lux .cat-card__blurb { color: rgba(248, 239, 228, .62); }
.lux .cat-card__meta { color: rgba(248, 239, 228, .55); }
.lux .cat-card__from { color: var(--lux-champagne); }
.lux .cat-card > svg { color: var(--lux-champagne); }

/* Decorative blobs are too heavy on a dark ground */
.lux .bg-decor { display: none; }

/* Champagne wordmark treatment for the hero lockup */
.lux .brand__name em { color: var(--lux-gold-light); opacity: 1; }

/* A restrained gold-rule divider usable inside lux blocks */
.rule-gold {
  height: 1px;
  border: 0;
  margin-block: var(--sp-6);
  background: linear-gradient(90deg, transparent, rgba(190, 149, 96, .5), transparent);
}

/* ==========================================================================
   24. Script accents
   Echoes the gold script in Vicky's logo. Accent words only — Parisienne is
   unreadable as body text and must never be used for it.
   ========================================================================== */

.script,
.hero__display em,
.chapter__title em,
.brand__name em,
.welcome__sig,
.finder__q .squiggle {
  font-family: var(--font-script);
  font-style: normal;          /* the face is already slanted */
  font-weight: 400;
}

/* Script faces sit optically small next to a serif at the same px size, and
   their ascenders/descenders need more room. Compensate. */
.hero__display em {
  font-size: 1.14em;
  line-height: 1.18;
  padding-bottom: .06em;
}
.chapter__title em { font-size: 1.1em; line-height: 1.2; }
.brand__name em { font-size: .95em; opacity: 1; }
.script { font-size: 1.08em; }

/* Parisienne has no italic or bold; stop the browser synthesising them. */
.script, .hero__display em, .chapter__title em,
.brand__name em, .welcome__sig, .finder__q .squiggle {
  font-synthesis: none;
}


/* ==========================================================================
   25. Gilt type
   The VIARA wordmark is metallic, not flat gold — a gradient sweep with a
   highlight and a shadow. Painting that onto live text keeps it selectable and
   translatable, unlike shipping the wordmark as an image.
   ========================================================================== */

.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Fallback for the rare engine without background-clip:text — without this
     the text would render fully transparent and vanish. */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text { background: none; color: var(--gold); -webkit-text-fill-color: currentColor; }
}

/* The lockup: VIARA over MED SPA & WELLNESS, both letterspaced like the logo */
.brand__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
}
.brand__tag {
  letter-spacing: .2em;
  font-size: .55rem;
}
.site-header .brand__mark { width: 2.6rem; height: 2.6rem; }
.site-footer .brand__mark { width: 3.2rem; height: 3.2rem; }

/* Gilt hairline, echoing the ring */
.gilt-rule {
  height: 1px;
  border: 0;
  background: var(--grad-gold);
  opacity: .55;
  margin-block: var(--sp-6);
}

/* "Formerly Viara Med Spa & Wellness" — continuity for existing clients */
.formerly {
  font-family: var(--font-script);
  font-size: var(--step-0);
  color: var(--gold);
  letter-spacing: .01em;
}
.formerly::before {
  content: "Formerly";
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .15rem;
}

/* ==========================================================================
   25. Results — her own client photography
   The single most persuasive thing on the site, so it gets real estate rather
   than a thumbnail strip. Media keeps its natural ratio and the grid starts
   its items at the top, so nothing is destructively cropped to line up.
   ========================================================================== */

.results {
  display: grid;
  gap: clamp(var(--sp-5), 3.5vw, var(--sp-7));
  align-items: start;
}
@media (min-width: 52rem) {
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.result {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}
.result__title { font-size: var(--step-3); line-height: 1.15; }
.result__note {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 46ch;
}
.result__cta { margin-top: .15rem; }
.result__body { display: grid; gap: .5rem; }

/* Two frames the camera did not hold still between — labelled, side by side.
   Squared off so the crop lands on the brows rather than the hairline. */
.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.ba-pair__half { position: relative; margin: 0; }
.ba-pair__half img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}
.ba-pair__half:first-child img { border-start-end-radius: var(--r-xs); border-end-end-radius: var(--r-xs); }
.ba-pair__half:last-child  img { border-start-start-radius: var(--r-xs); border-end-start-radius: var(--r-xs); }
.ba-pair__half figcaption {
  position: absolute;
  bottom: .6rem;
  left: .6rem;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(20, 18, 16, .62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Already composed as a before/after by the camera. */
.ba-single img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* The compare slider ships at 3/2, which is exactly how the pairs are cut. */
.result .compare { width: 100%; }

/* ==========================================================================
   26. Studio intro — the practitioner, on the home page
   ========================================================================== */

.studio-intro {
  display: grid;
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
  align-items: center;
}
@media (min-width: 56rem) {
  .studio-intro { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
}
.studio-intro__portrait {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-2);
}
.studio-intro__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.studio-intro__sig {
  font-family: var(--font-script);
  font-size: var(--step-4);
  color: var(--accent);
  line-height: 1.1;
}

/* ==========================================================================
   27. Cinematic layer
   A luxury med spa has to look expensive above the fold or nothing below it
   gets read. This layer does four things the editorial layout could not:
   a full-height hero, chapter headers that read as headers, a results section
   with a lead item, and about 25% less vertical padding between sections
   (--section-y caps at 5.5rem rather than 7.5rem) — at 13,000px the page was
   scroll fatigue rather than generosity.
   ========================================================================== */

:root {
  --section-y: clamp(3rem, 1.5rem + 4.5vw, 5.5rem);
}

/* ---- Hero -----------------------------------------------------------------
   The photo is a tall portrait panel bleeding off the right edge rather than a
   full-bleed background. Deliberate: every usable frame she has sent is
   vertical and 640-1000px wide, and stretching one across a 1440px viewport
   would be visibly soft. At this size the panel renders close to 1:1. Swap it
   for a full-bleed background the day a landscape shot arrives.
   -------------------------------------------------------------------------- */

.hero-cinema {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(86svh, 800px);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  overflow: clip;
}
.hero-cinema__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(var(--sp-4), 2vw, var(--sp-5));
  max-width: 40rem;
  justify-items: start;
}

.hero-cinema__panel {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-end: 0;
  width: clamp(20rem, 42vw, 40rem);
  overflow: hidden;
}
.hero-cinema__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
/* Feather the panel into the ground on its inner edge, so it reads as one
   composition rather than a photo pasted onto a dark rectangle. */
.hero-cinema__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--lux-ink, #0f0d0b) 0%,
    color-mix(in oklab, var(--lux-ink, #0f0d0b) 72%, transparent) 22%,
    color-mix(in oklab, var(--lux-ink, #0f0d0b) 18%, transparent) 48%,
    transparent 72%
  );
}
@media (max-width: 60rem) {
  .hero-cinema { min-height: 0; }
  .hero-cinema__panel {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    margin-top: var(--sp-6);
  }
  .hero-cinema__panel::after {
    background: linear-gradient(
      180deg,
      transparent 45%,
      color-mix(in oklab, var(--lux-ink, #0f0d0b) 55%, transparent) 100%
    );
  }
  .hero-cinema__inner { max-width: none; }
}

.hero-cinema__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--lux-cream, #f8efe4) 74%, transparent);
}
.hero-cinema__kicker b { color: var(--lux-gold-light, #ddb87f); font-weight: 600; }
.hero-cinema__kicker span { display: inline-flex; align-items: center; gap: var(--sp-4); }
.hero-cinema__kicker span + span::before {
  content: "";
  width: 1px;
  height: 1rem;
  background: color-mix(in oklab, var(--lux-champagne, #be9560) 45%, transparent);
}

/* One controlled display size. The previous hero ran three lines of 96px type
   plus a script face at nearly the same size, which ate 600px of the fold. */
.hero-cinema__title {
  font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hero-cinema__title em {
  display: block;
  font-family: var(--font-script);
  font-style: normal;
  font-size: .8em;
  line-height: 1.15;
  color: var(--lux-gold-light, #ddb87f);
  margin-top: .06em;
}
.hero-cinema__lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: color-mix(in oklab, var(--lux-cream, #f8efe4) 84%, transparent);
  max-width: 34ch;
}
.hero-cinema__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Stat chips, inside the frame. The old float cards sat at left:-1.25rem on a
   container with overflow:hidden, so both of them were sliced in half. */
.hero-cinema__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid color-mix(in oklab, var(--lux-champagne, #be9560) 30%, transparent);
  width: 100%;
}
.hero-cinema__stat { display: grid; gap: .15rem; }
.hero-cinema__stat b {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  font-weight: 400;
  color: var(--lux-gold-light, #ddb87f);
}
.hero-cinema__stat span {
  font-size: var(--step--2);
  letter-spacing: .04em;
  color: color-mix(in oklab, var(--lux-cream, #f8efe4) 64%, transparent);
}

/* ---- Chapter headers ------------------------------------------------------
   Was a bare grid with align-items:end, which dropped the ghost numeral in
   beside the lede and read as a layout bug. Now: a hairline meta row, then the
   title, then the lede.
   -------------------------------------------------------------------------- */

.chapter {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.chapter__num {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--step--2);
  line-height: 1;
  letter-spacing: .18em;
  color: var(--accent);
  -webkit-text-stroke: 0;
  order: -2;
}
.chapter__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 42%, transparent), transparent);
}
.chapter__aside {
  order: -1;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}
.chapter__title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }

/* ---- Results --------------------------------------------------------------
   The first entry gets the room: figure one side, copy the other. The rest sit
   in a row beneath it at a matched height.
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
  .results--editorial { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .results--editorial > .result:first-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(var(--sp-6), 4vw, var(--sp-8));
    align-items: center;
    margin-bottom: var(--sp-4);
  }
  .results--editorial > .result:first-child .result__title { font-size: var(--step-5); }
  .results--editorial > .result:first-child .result__note { font-size: var(--step-0); }

  /* Square every non-lead figure so the row is not ragged. */
  .results--editorial > .result:not(:first-child) .ba-single img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .results--editorial > .result:not(:first-child) .ba-pair__half img {
    aspect-ratio: 1 / 2;
  }
}

/* ---- Full-bleed statement band -------------------------------------------- */

.band {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(19rem, 38vw, 27rem);
  padding-block: var(--sp-8);
  padding-inline: var(--sp-5);
  overflow: clip;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15,13,11,.84), rgba(15,13,11,.66) 45%, rgba(15,13,11,.9));
}
.band__inner { max-width: 40rem; text-align: center; }
.band__quote {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1rem + 2.1vw, 2.75rem);
  line-height: 1.22;
  color: #f8efe4;
  text-wrap: balance;
}
.band__quote em { font-style: normal; color: #ddb87f; }
.band__by {
  margin-top: var(--sp-5);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(248, 239, 228, .72);
}

/* ---- Header over the hero -------------------------------------------------
   The hero is a dark band; a cream header bar sitting on top of it cut the
   composition in half. On pages that open with .hero-cinema the header floats
   transparent over the photo until the first scroll, then resolves to the
   normal bar. Only the untucked state is restyled, so .is-stuck keeps every
   contrast guarantee the light and dark themes already ship with.
   -------------------------------------------------------------------------- */

body:has(.hero-cinema) .site-header:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body:has(.hero-cinema) .site-header:not(.is-stuck) .nav__link,
body:has(.hero-cinema) .site-header:not(.is-stuck) .brand__name,
body:has(.hero-cinema) .site-header:not(.is-stuck) .theme-toggle,
body:has(.hero-cinema) .site-header:not(.is-stuck) .nav-toggle {
  color: #f4ead9;
}
body:has(.hero-cinema) .site-header:not(.is-stuck) .brand__tag {
  color: rgba(244, 234, 217, .72);
}
body:has(.hero-cinema) .site-header:not(.is-stuck) .nav__link[aria-current="page"] {
  color: #e6c78e;
}
body:has(.hero-cinema) .site-header:not(.is-stuck) .theme-toggle,
body:has(.hero-cinema) .site-header:not(.is-stuck) .nav-toggle {
  border-color: rgba(244, 234, 217, .28);
}
body:has(.hero-cinema) .site-header:not(.is-stuck) .nav-toggle__box i {
  background: #f4ead9;
}
/* Pull the hero up under the now-transparent header. */
body:has(.hero-cinema) .hero-cinema {
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem));
}

/* ---- Featured treatments --------------------------------------------------
   .grid--3 is an auto-fit grid, so at 1440px it resolved to four columns and
   left an orphan on the second row. This section wants exactly three.
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
  [data-render="featured-services"].grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Keep every card in a row the same height, with the actions pinned to the
   bottom, so the grid reads as a grid and not as a pile. */
.service-card { display: flex; flex-direction: column; }
.service-card__desc { flex: 1 0 auto; }
.service-card__actions { margin-top: auto; }

/* ---- Chapter header, corrected ---------------------------------------------
   The aside carried an explicit grid-row:1 while the numeral auto-placed, so
   the numeral was pushed into row 2 and the aside floated above it. Place both
   explicitly on row 1 and let the title and lede span the full width.
   -------------------------------------------------------------------------- */

.chapter {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-5);
  row-gap: var(--sp-4);
}
.chapter__num  { grid-row: 1; grid-column: 1; align-self: center; }
.chapter__aside {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  justify-self: end;
  margin-top: 0;
}
.chapter > .stack-3,
.chapter > .chapter__title,
.chapter > .chapter__lede { grid-column: 1 / -1; }

/* ---- Tone ------------------------------------------------------------------
   Two colour problems the photography exposed.

   The generated SVG illustrations were drawn against the original blush
   palette. Beside real photographs they read as clip-art, and the pink fights
   the cream-and-gold the brand actually landed on. Pulling the saturation down
   turns them into warm neutral texture that sits behind the photos instead of
   competing with them.

   The LED band photo is near-neon magenta, which is accurate to the room but
   the loudest thing on the page. Damped so the type carries it.
   -------------------------------------------------------------------------- */

[data-art] > svg { filter: saturate(.42) contrast(1.02); }
.band__media img { filter: saturate(.55) contrast(1.06) brightness(.92); }

/* ---- Hero, small screens ---------------------------------------------------
   The panel is first in source order so that on desktop it paints behind the
   copy. Stacked, that put a photo above the headline and pushed the offer
   below the fold — so reverse them here and let the words lead.
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  body:has(.hero-cinema) .hero-cinema {
    padding-top: calc(var(--header-h) + var(--sp-5));
    padding-bottom: 0;
  }
  .hero-cinema > .shell { order: 1; }
  .hero-cinema__panel {
    order: 2;
    margin-top: var(--sp-7);
    margin-bottom: 0;
    aspect-ratio: 3 / 2;
  }
  .hero-cinema__stats { gap: var(--sp-4) var(--sp-5); }
  .hero-cinema__stat b { font-size: var(--step-3); }
}

/* ==========================================================================
   28. Structural rework
   The page was twelve stacked full-width sections all built to the same
   template: chapter header on top, block underneath, repeat. Correct, and
   monotonous — by the third one you stop reading the headers.

   This layer introduces three different section shapes so the page has a
   rhythm instead of a metronome:

     .sticky-rail     two columns, the heading sticks while the content scrolls past
     .mosaic   an asymmetric photo grid, tile sizes driven by CATEGORIES
     .overlap  image breaking the container with a card overlapping it

   Each one is a plain CSS Grid that degrades to a single column, so none of
   it depends on JavaScript.
   ========================================================================== */

/* ---- Sticky side-rail ------------------------------------------------------ */

.sticky-rail { display: grid; gap: var(--sp-6); }

@media (min-width: 64rem) {
  .sticky-rail {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: clamp(var(--sp-7), 6vw, 6rem);
    align-items: start;
  }
  .sticky-rail__aside {
    position: sticky;
    /* Clear the sticky header, plus a little breathing room. */
    top: calc(var(--header-h) + var(--sp-6));
  }
}

.sticky-rail__aside { display: grid; gap: var(--sp-4); align-content: start; }
.sticky-rail__num {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--step--2);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.sticky-rail__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 45%, transparent), transparent);
}
.sticky-rail__title {
  font-size: clamp(2rem, 1.1rem + 2.8vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.015em;
}
.sticky-rail__title em {
  display: block;
  font-family: var(--font-script);
  font-style: normal;
  color: var(--accent);
  font-size: .92em;
}
.sticky-rail__lede { color: var(--text-muted); font-size: var(--step-0); max-width: 34ch; }
.sticky-rail__foot {
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sticky-rail__body { display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); min-width: 0; }

/* Results inside a rail stack vertically and get the full column width. */
.results--stack { grid-template-columns: minmax(0, 1fr); }
.results--stack > .result { grid-column: auto; }
@media (min-width: 64rem) {
  .results--stack > .result:first-child { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
  .results--stack > .result:first-child .result__title { font-size: var(--step-4); }
  .results--stack > .result .ba-single img,
  .results--stack > .result .ba-pair__half img { aspect-ratio: auto; }
  .results--stack > .result .ba-pair__half img { aspect-ratio: 1 / 1; }
}

/* ---- Category mosaic ------------------------------------------------------- */

.mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(9rem, auto);
  gap: var(--sp-3);
}
@media (min-width: 48rem) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
}

.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: clamp(var(--sp-4), 2vw, var(--sp-5));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  min-height: 9rem;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--text); }

@media (min-width: 48rem) {
  .tile--xl { grid-column: span 2; grid-row: span 2; }
  .tile--lg { grid-column: span 2; }
}
@media (max-width: 47.99rem) {
  .tile--xl { grid-column: span 2; min-height: 15rem; }
  .tile--lg { grid-column: span 2; }
}

/* Photo tiles invert: image behind, scrim over it, light type on top. */
.tile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.tile--photo { border-color: transparent; }
.tile--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15,13,11,.12) 0%, rgba(15,13,11,.52) 52%, rgba(15,13,11,.86) 100%);
}
.tile--photo:hover .tile__img { transform: scale(1.045); }
.tile--photo,
.tile--photo:hover { color: #f8efe4; }
.tile--photo .tile__blurb { color: rgba(248,239,228,.82); }
.tile--photo .tile__meta { color: rgba(248,239,228,.72); border-top-color: rgba(248,239,228,.25); }
.tile--photo .tile__from { color: var(--gold-light); }

.tile__body { display: grid; gap: .3rem; }
.tile__label {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
}
.tile--xl .tile__label { font-size: clamp(1.8rem, 1rem + 2vw, 2.75rem); }
.tile--lg .tile__label { font-size: var(--step-3); }
.tile__blurb {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 42ch;
}
/* Only the two largest tiles have room for a blurb without crowding. */
.tile--sm .tile__blurb { display: none; }
.tile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--step--2);
  letter-spacing: .04em;
  color: var(--text-muted);
}
.tile__from { color: var(--accent); font-weight: 600; }

/* ---- Overlap block --------------------------------------------------------- */

.overlap { position: relative; display: grid; gap: var(--sp-5); }

@media (min-width: 64rem) {
  .overlap {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
  .overlap__media {
    grid-area: 1 / 1 / 2 / 2;
    /* Break the shell on the left so the photo runs to the viewport edge. */
    margin-inline-start: calc(50% - 50vw);
    border-start-end-radius: var(--r-xl);
    border-end-end-radius: var(--r-xl);
    overflow: hidden;
  }
  .overlap__card {
    grid-area: 1 / 2 / 2 / 3;
    /* Pull the card back over the image. */
    margin-inline-start: clamp(-7rem, -5vw, -3rem);
    z-index: 2;
  }
}
.overlap__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}
.overlap__card {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(var(--sp-5), 3.5vw, var(--sp-8));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 63.99rem) {
  .overlap__media { border-radius: var(--r-lg); overflow: hidden; }
  .overlap__card { margin-top: calc(var(--sp-6) * -1); margin-inline: var(--sp-3); }
}

/* ---- Rework corrections ----------------------------------------------------
   1. `.rail` was already taken by the services-page jump rail, whose base rule
      is `display:none` until the desktop breakpoint. The section layout is
      `.sticky-rail` so the two stop fighting — the collision was also where
      the uppercase came from, since the jump rail's `.rail__title` is an
      eyebrow.
   2. The aside column was too narrow for display type and broke the heading
      over five lines.
   3. Inside `.lux`, plain tiles were rendering as white cards on near-black.
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
  .sticky-rail { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}
.sticky-rail__title {
  font-size: clamp(1.75rem, 1.05rem + 1.9vw, 2.6rem);
  text-wrap: balance;
}
.sticky-rail__title em { font-size: 1em; }

/* Tiles on the deep ground: a lifted pane rather than a white sticker. */
.lux .tile:not(.tile--photo) {
  background: color-mix(in oklab, var(--lux-cream) 7%, transparent);
  border-color: color-mix(in oklab, var(--lux-champagne) 28%, transparent);
  color: var(--lux-cream);
}
.lux .tile:not(.tile--photo):hover {
  background: color-mix(in oklab, var(--lux-cream) 11%, transparent);
  color: var(--lux-cream);
}
.lux .tile:not(.tile--photo) .tile__blurb { color: color-mix(in oklab, var(--lux-cream) 68%, transparent); }
.lux .tile:not(.tile--photo) .tile__meta {
  color: color-mix(in oklab, var(--lux-cream) 62%, transparent);
  border-top-color: color-mix(in oklab, var(--lux-champagne) 26%, transparent);
}
.lux .tile:not(.tile--photo) .tile__from { color: var(--lux-gold-light); }

/* The LED photography is near-neon out of the camera and was the loudest thing
   on the page at tile size. Damped so the mosaic holds together as one grid
   rather than one magenta rectangle and ten quiet ones. */
.tile__img { filter: saturate(.68) contrast(1.04) brightness(.93); }

/* The card was centred against a taller image, leaving the bottom-right of the
   composition empty. Stretch both to the same row height and centre the card's
   contents instead of the card itself. */
@media (min-width: 64rem) {
  .overlap { align-items: stretch; }
  .overlap__media { aspect-ratio: 5 / 4; }
  .overlap__media img { aspect-ratio: auto; height: 100%; }
  .overlap__card { align-content: center; }
}

/* ==========================================================================
   29. Motion
   The page was compositionally finished and still felt dead: nothing moved,
   and nothing answered the pointer. Paired with motion.js.

   Rules kept throughout: only `transform` and `opacity` animate, so nothing
   here triggers layout; every effect has a `prefers-reduced-motion` off
   switch; and no content depends on an animation completing to be readable.
   ========================================================================== */

/* ---- Kinetic headings ------------------------------------------------------ */

.kin .kin__w {
  display: inline-block;
  overflow: hidden;
  /* The descenders on the script face get clipped by an exact-height mask. */
  padding-block: .12em;
  margin-block: -.12em;
  vertical-align: bottom;
}
.kin .kin__i {
  display: inline-block;
  transform: translateY(115%) rotate(2deg);
  opacity: 0;
  transition:
    transform 1.05s cubic-bezier(.16, 1, .3, 1),
    opacity .7s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.kin.is-in .kin__i { transform: none; opacity: 1; }

/* ---- Richer scroll reveal --------------------------------------------------
   `.reveal` was a plain opacity fade, which reads as a page that has not
   finished loading rather than one that is arriving. */

.reveal {
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    transform .95s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
}
.reveal.is-visible { transform: none; }
.reveal--scale { transform: translate3d(0, 26px, 0) scale(.965); }
.reveal--scale.is-visible { transform: none; }
.reveal--right { transform: translate3d(34px, 0, 0); }
.reveal--right.is-visible { transform: none; }

/* ---- Parallax -------------------------------------------------------------
   The moving layer is oversized so its edges never travel into frame. */

[data-parallax] { will-change: transform; }
.hero-cinema__panel [data-parallax],
.band__media [data-parallax] {
  position: absolute;
  inset: -14% 0;
  width: 100%;
  height: 128%;
}

/* ---- Pointer response ------------------------------------------------------
   --px / --py are written by motion.js as -0.5 … 0.5 from the card centre. */

.tile, .service-card, .result { --px: 0; --py: 0; }

.tile {
  transition:
    transform .5s cubic-bezier(.16, 1, .3, 1),
    box-shadow .5s cubic-bezier(.16, 1, .3, 1),
    background-color .4s var(--ease-out);
}
.tile:hover {
  transform: translate3d(calc(var(--px) * 9px), calc(-4px + var(--py) * 6px), 0);
}
.tile--photo:hover .tile__img {
  transform: scale(1.07) translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0);
}
.tile__img { transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .4s var(--ease-out); }
.tile--photo:hover .tile__img { filter: saturate(.85) contrast(1.04) brightness(1); }

/* The label lifts slightly so the tile feels like it has depth, not just a
   hover colour. */
.tile__body, .tile__meta { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.tile:hover .tile__body { transform: translateY(-3px); }

.service-card {
  transition:
    transform .5s cubic-bezier(.16, 1, .3, 1),
    box-shadow .5s cubic-bezier(.16, 1, .3, 1),
    border-color .4s var(--ease-out);
}
.service-card:hover {
  transform: translate3d(calc(var(--px) * 5px), -5px, 0);
  box-shadow: var(--shadow-lg);
}

/* ---- Header retracts on the way down --------------------------------------- */

.site-header {
  transition:
    transform .45s cubic-bezier(.16, 1, .3, 1),
    border-color var(--t-med) var(--ease-out),
    background-color var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
}
.site-header.is-hidden { transform: translateY(-102%); }

/* ---- Buttons and links answer back ----------------------------------------- */

.btn {
  transition:
    transform .35s cubic-bezier(.16, 1, .3, 1),
    box-shadow .35s var(--ease-out),
    background-color .3s var(--ease-out),
    border-color .3s var(--ease-out),
    color .3s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .08s; }

.btn svg, .link-arrow svg, .link-arrow .i {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.btn:hover svg, .link-arrow:hover svg, .link-arrow:hover .i { transform: translateX(4px); }

/* An underline that draws in from the left rather than switching on. */
.link-arrow__t {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .45s cubic-bezier(.16, 1, .3, 1);
}
.link-arrow:hover .link-arrow__t { background-size: 100% 1px; }

/* ---- Section rules draw themselves ----------------------------------------- */

.chapter__num::after,
.sticky-rail__num::after {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) .15s;
}
.chapter:has(.is-in) .chapter__num::after,
.sticky-rail__aside.is-visible .sticky-rail__num::after { transform: scaleX(1); }

/* ---- The compare slider looks grabbable ------------------------------------ */

.compare__knob {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .3s var(--ease-out);
}
.compare:hover .compare__knob { transform: translate(-50%, -50%) scale(1.12); }
.compare:active .compare__knob { transform: translate(-50%, -50%) scale(.96); }

/* ==========================================================================
   Reduced motion: strip all of it, keep every state readable.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kin .kin__i,
  .reveal,
  .reveal--scale,
  .reveal--right {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .kin .kin__w { overflow: visible; }
  [data-parallax] { transform: none !important; }
  .site-header.is-hidden { transform: none; }
  .tile:hover, .service-card:hover, .btn:hover { transform: none; }
  .tile--photo:hover .tile__img { transform: none; }
  .chapter__num::after,
  .sticky-rail__num::after { transform: scaleX(1); transition: none; }
  .link-arrow__t { transition: none; }
}

/* The reveal mask is `overflow: hidden`, which clips both axes — and script
   faces overhang their advance width on every side. Parisienne's lowercase
   "p" lost the entry stroke on its left and read as an "n". Pad the mask out
   and cancel it with an equal negative margin: the glyphs get room and nothing
   moves. The serif needs a fraction of what the script does. */
.kin .kin__w {
  padding-block: .2em .22em;
  margin-block: -.2em -.22em;
  padding-inline: .1em;
  margin-inline: -.1em;
}
.kin em .kin__w {
  padding-block: .42em .46em;
  margin-block: -.42em -.46em;
  padding-inline: .3em;
  margin-inline: -.3em;
}