/* ============================================
   Shared Component Styles
   ============================================ */

/* --- CTA Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.875rem 2rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  transition: all var(--duration-base) var(--ease-out);
  min-height: 48px;
  cursor: pointer;
}

.btn--primary {
  background: var(--text-primary);
  color: var(--bg-primary);
  border: 1px solid var(--text-primary);
}

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

.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
}

.btn--outline:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

.btn--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
}

.btn--glass:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* --- Site Header --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-lg) var(--container-padding);
  transition: background var(--duration-base) var(--ease-out);
}

.site-header.scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
}

.site-header__brand {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 0 1 auto;
}

.site-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.5;
  max-width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Last crumb (often a long service slug) ellipsizes instead of wrapping */
.site-header__breadcrumb-current {
  display: inline-block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

@media (max-width: 767px) {
  .site-header__breadcrumb-current { max-width: 14ch; }
}

.site-header__breadcrumb a {
  color: var(--text-secondary);
  transition: opacity var(--duration-base) var(--ease-out);
}

.site-header__breadcrumb a:hover {
  opacity: 0.7;
}

.site-header__breadcrumb-sep {
  font-size: 0.5rem;
  margin-inline: 2px;
}

.site-header__logo {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

.site-header__nav {
  display: none;
  gap: var(--space-xl);
}

.site-header__nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-header__nav a:hover,
.site-header__nav a.active {
  color: var(--text-primary);
}

@media (min-width: 1024px) {
  .site-header__nav {
    display: flex;
    align-items: center;
  }
}

/* --- Patient Portal CTA (last nav item) ---
   Refined pill anchored to the brand tokens so it auto-themes:
   clinic (dark surfaces) → ivory pill outline, wellness (ivory) →
   dark pill outline. Olive accent dot signals the action is distinct
   from the rest of the nav. */
.portal-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text-primary) 35%, transparent);
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

/* Olive presence dot — quietly signals "secure account action" */
.portal-cta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--olive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--olive) 18%, transparent);
  flex-shrink: 0;
  transition: box-shadow var(--duration-base) var(--ease-out);
}

.portal-cta__icon {
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity var(--duration-base) var(--ease-out);
}

.portal-cta__label {
  display: inline-block;
}

.portal-cta:hover,
.portal-cta:focus-visible {
  color: var(--bg-primary);
  background: var(--text-primary);
  border-color: var(--text-primary);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text-primary) 22%, transparent);
  transform: translateY(-1px);
}

.portal-cta:hover::before,
.portal-cta:focus-visible::before {
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--olive) 35%, transparent);
}

.portal-cta:hover .portal-cta__icon,
.portal-cta:focus-visible .portal-cta__icon {
  opacity: 1;
}

/* Site header nav: don't apply the generic nav link styles to this CTA */
.site-header__nav .portal-cta {
  text-transform: uppercase;
  margin-left: var(--space-sm);
}

.site-header__nav .portal-cta:hover {
  /* Override generic .site-header__nav a:hover color rule */
  color: var(--bg-primary);
}

/* Mobile variant: full-width pill, larger touch target.
   Sizes scale with the mobile-menu's viewport-aware rhythm so the pill
   stays legible at iPhone SE and proportional on tall phones. */
.portal-cta--mobile {
  width: min(320px, 80%);
  justify-content: center;
  padding: clamp(10px, 1.6vh, 14px) 24px;
  font-size: clamp(0.75rem, 1.6vh, 0.875rem);
  letter-spacing: 0.08em;
  margin-top: clamp(8px, 1.2vh, 16px);
}

/* When the pill leads the menu, parent padding already handles the
   top breathing room — kill the margin-top and add a slightly bigger
   gap below so the "action" feels distinct from the page list. */
.portal-cta--mobile-top {
  margin-top: 0;
  margin-bottom: clamp(8px, 1.4vh, 18px);
}

/* --- Brand Switch Dock (wall tab with concave curves) --- */
.brand-switch-dock {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Concave curves — organic inset where tab meets wall */
.brand-switch-dock__curve {
  width: 16px;
  height: 16px;
  overflow: hidden;
  position: relative;
}

.brand-switch-dock__curve::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.brand-switch-dock__curve--top::after {
  bottom: 0;
  left: 0;
}

.brand-switch-dock__curve--bottom::after {
  top: 0;
  left: 0;
}

/* Curve colors per brand — must match the FAB background */
[data-brand="clinic"] .brand-switch-dock__curve--top::after {
  box-shadow: -8px 8px 0 0 rgba(241, 235, 223, 0.94);
}
[data-brand="clinic"] .brand-switch-dock__curve--bottom::after {
  box-shadow: -8px -8px 0 0 rgba(241, 235, 223, 0.94);
}
[data-brand="wellness"] .brand-switch-dock__curve--top::after {
  box-shadow: -8px 8px 0 0 rgba(58, 69, 52, 0.92);
}
[data-brand="wellness"] .brand-switch-dock__curve--bottom::after {
  box-shadow: -8px -8px 0 0 rgba(58, 69, 52, 0.92);
}

/* The tab itself */
.brand-switch-fab {
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding-left: 10px;
  padding-right: 4px;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  width: 62px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s var(--ease-out),
              padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-switch-fab__arrow {
  flex-shrink: 0;
  opacity: 0.4;
  margin-right: 4px;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.brand-switch-fab__logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform 0.3s var(--ease-out);
}

.brand-switch-fab__label {
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  padding-left: 8px;
  padding-right: 20px;
  transition: opacity 0.25s var(--ease-out);
  pointer-events: none;
}

/* Hover: slides out from the wall */
.brand-switch-dock:hover .brand-switch-fab {
  width: 270px;
  padding-left: 16px;
}

.brand-switch-dock:hover .brand-switch-fab__arrow {
  opacity: 0;
  transform: translateX(-4px);
}

.brand-switch-dock:hover .brand-switch-fab__logo {
  transform: scale(1.08);
}

.brand-switch-dock:hover .brand-switch-fab__label {
  opacity: 1;
}

/* On clinic pages: tab previews Wellness (ivory/warm) */
[data-brand="clinic"] .brand-switch-fab {
  background: rgba(241, 235, 223, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(193, 194, 176, 0.3);
  border-left: none;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}

[data-brand="clinic"] .brand-switch-fab__arrow {
  color: var(--dark);
}

[data-brand="clinic"] .brand-switch-fab__label {
  color: var(--dark);
}

[data-brand="clinic"] .brand-switch-dock:hover .brand-switch-fab {
  background: #f1ebdf;
  box-shadow: 6px 0 36px rgba(0, 0, 0, 0.25);
}

/* On wellness pages: tab previews Clinic (dark/premium) */
[data-brand="wellness"] .brand-switch-fab {
  background: rgba(58, 69, 52, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(91, 97, 83, 0.3);
  border-left: none;
  box-shadow: 4px 0 24px rgba(58, 69, 52, 0.1);
}

[data-brand="wellness"] .brand-switch-fab__arrow {
  color: var(--ivory);
}

[data-brand="wellness"] .brand-switch-fab__label {
  color: var(--ivory);
}

[data-brand="wellness"] .brand-switch-dock:hover .brand-switch-fab {
  background: #3a4534;
  box-shadow: 6px 0 36px rgba(58, 69, 52, 0.25);
}

/* Hide dock on mobile, show bar instead */
@media (max-width: 768px) {
  .brand-switch-dock {
    display: none;
  }
}

/* --- Mobile Bottom Bar --- */
.brand-switch-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  text-decoration: none;
  transition: transform 0.3s var(--ease-out);
}

.brand-switch-bar__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-switch-bar__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* On clinic pages: bar previews Wellness */
[data-brand="clinic"] .brand-switch-bar {
  background: rgba(241, 235, 223, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(193, 194, 176, 0.3);
}

[data-brand="clinic"] .brand-switch-bar__label {
  color: var(--dark);
}

/* On wellness pages: bar previews Clinic */
[data-brand="wellness"] .brand-switch-bar {
  background: rgba(58, 69, 52, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(91, 97, 83, 0.3);
}

[data-brand="wellness"] .brand-switch-bar__label {
  color: var(--ivory);
}

@media (max-width: 768px) {
  .brand-switch-bar {
    display: flex;
  }
}

/* --- Brand Switch Pill (mobile menu only) --- */
.brand-switch-pill--mobile {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full);
  margin-top: var(--space-xl);
  transition: all var(--duration-base) var(--ease-out);
}

[data-brand="clinic"] .brand-switch-pill--mobile {
  color: var(--ivory);
  background: rgba(241, 235, 223, 0.1);
  border: 1px solid rgba(241, 235, 223, 0.25);
}

[data-brand="wellness"] .brand-switch-pill--mobile {
  color: var(--dark);
  background: rgba(58, 69, 52, 0.08);
  border: 1px solid rgba(58, 69, 52, 0.2);
}

/* --- Hamburger Menu Toggle --- */
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: all var(--duration-base) var(--ease-in-out);
  border-radius: 1px;
}

.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}

/* --- Mobile Menu Overlay ---
   Scrollable column anchored from the top so the 11+ items fit on any
   viewport. Font size and gap scale with viewport height so small phones
   (iPhone SE ~667px tall) still see the whole menu without clipping. */
.mobile-menu {
  --mobile-menu-pad-bottom: clamp(140px, 26vh, 260px);
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: clamp(0.5rem, 1.6vh, 1rem);
  padding: clamp(140px, 22vh, 220px) var(--space-lg) var(--mobile-menu-pad-bottom);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 3.4vh, 1.625rem);
  line-height: 1.15;
  color: var(--text-primary);
}

/* Quiet "Back to Hara" link sits below the brand switch */
.mobile-menu__back {
  font-family: var(--font-body) !important;
  font-size: clamp(0.75rem, 1.5vh, 0.875rem) !important;
  opacity: 0.6;
  margin-top: clamp(4px, 0.8vh, 12px);
}

/* --- Footer --- */
.site-footer {
  padding: var(--space-4xl) var(--container-padding) var(--space-2xl);
  border-top: 1px solid var(--glass-border);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.site-footer__brand {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-xl);
}

.site-footer__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .site-footer__menu {
    align-items: flex-end;
  }
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.site-footer__links a {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Socials wrapper mirrors the payments wrapper: label + icons inline on
   desktop, wrapping to stacked on mobile. */
.site-footer__socials {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
}

.site-footer__socials-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
}

.site-footer__socials-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--text-secondary);
  transition: color 200ms ease, transform 200ms ease;
}

.site-footer__socials-list a:hover {
  color: var(--text-primary);
  transform: translateY(-1px);
}

.site-footer__socials-list svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

.site-footer__bottom {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--glass-border);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.site-footer__payments {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
}

.site-footer__payments-label {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.site-footer__payments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Pills: uniform-height capsules that enforce container-level alignment.
   Each pill holds a single centered ::before with the full-color SVG
   as a background-image. Per-theme filter lightens logos on clinic's
   dark bg and darkens them on wellness's ivory bg so they pop against
   each background while staying brand-colored. */
.site-footer__payments-list li {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background-color: transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.site-footer__payments-list li::before {
  content: "";
  display: block;
  width: var(--logo-w);
  height: var(--logo-h);
  background-image: var(--logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: filter 200ms ease, transform 200ms ease;
}

/* Logos sit on an ivory surface in both themes — wellness uses the page
   bg directly, clinic uses ivory pills (below) — so both share the same
   "on light" filter treatment. Hover removes the filter to reveal pure
   brand color. */
.site-footer__payments-list li::before {
  filter: brightness(0.88) saturate(1.08);
}

/* Clinic pills: near-solid ivory cards. Giving the logos their own ivory
   surface (rather than fighting the dark forest bg) lets the full-color
   brand marks read cleanly — same treatment context as wellness, which
   is why wellness already looked right. */
[data-brand="clinic"] .site-footer__payments-list li {
  background-color: rgba(241, 235, 223, 0.92);
  border-color: rgba(241, 235, 223, 0.25);
}

[data-brand="clinic"] .site-footer__payments-list li:hover {
  background-color: var(--ivory);
  border-color: rgba(241, 235, 223, 0.5);
}

.site-footer__payments-list li:hover {
  background-color: var(--glass-bg);
  border-color: var(--text-secondary);
}

.site-footer__payments-list li:hover::before {
  filter: none;
}

/* Per-logo inner-logo sizing. Pill height (28px) is uniform; only the
   logo inside varies. Widths = height × (viewBox w / viewBox h). */
.site-footer__payments-list li[data-payment="visa"] {
  --logo: url('../assets/images/logo-visa.svg');
  --logo-w: 37px; --logo-h: 12px;   /* viewBox 1000x324 */
}
.site-footer__payments-list li[data-payment="mastercard"] {
  --logo: url('../assets/images/logo-mastercard.svg');
  --logo-w: 21px; --logo-h: 16px;   /* viewBox 999x776 */
}
.site-footer__payments-list li[data-payment="gcash"] {
  --logo: url('../assets/images/logo-gcash.svg');
  --logo-w: 51px; --logo-h: 12px;   /* viewBox 1792x422 */
}
.site-footer__payments-list li[data-payment="maya"] {
  --logo: url('../assets/images/logo-maya.svg');
  --logo-w: 48px; --logo-h: 14px;   /* viewBox 148x43 — bumped size */
}
/* Maya and QR Ph sit a hair high in their viewBoxes; nudge down to
   match optical center. Hover duplicates the transform so there's no jump. */
.site-footer__payments-list li[data-payment="maya"]::before,
.site-footer__payments-list li[data-payment="maya"]:hover::before {
  transform: translateY(2px);
}
.site-footer__payments-list li[data-payment="billease"] {
  --logo: url('../assets/images/logo-billease.svg');
  --logo-w: 54px; --logo-h: 12px;   /* viewBox 674x150 */
}
.site-footer__payments-list li[data-payment="qrph"] {
  --logo: url('../assets/images/logo-qrph.svg');
  --logo-w: 55px; --logo-h: 13px;   /* viewBox 3000x710 */
}
.site-footer__payments-list li[data-payment="qrph"]::before,
.site-footer__payments-list li[data-payment="qrph"]:hover::before {
  transform: translateY(1px);
}

/* Mobile-specific footer adjustments.
   Padding-bottom handled in responsive.css (needed to override a safe-area
   rule there that sits later in the cascade). */
@media (max-width: 767px) {
  /* Tight cohesion: brand + address + links read as one block. The small
     inner gap makes links feel attached to the address above them. */
  .site-footer__inner {
    gap: var(--space-sm);
  }

  /* Clear separation between the links row and the socials row */
  .site-footer__menu {
    gap: var(--space-2xl);
  }

  /* Center socials, keep links left-aligned */
  .site-footer__socials {
    align-self: center;
  }

  /* Bottom section on mobile: payments → HR → copy.
     The HR was the border-top on __bottom; move it onto __copy instead. */
  .site-footer__bottom {
    border-top: none;
    padding-top: 0;
    margin-top: var(--space-2xl);
    gap: var(--space-xl);
  }

  .site-footer__copy {
    order: 2;
    width: 100%;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--glass-border);
    text-align: center;
  }

  /* Uniform 3-per-row pill grid. Fixed 100px columns make every pill the
     same size; pills fill their cell and logos stay centered. */
  .site-footer__payments-list {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: var(--space-sm);
    justify-content: center;
  }

  .site-footer__payments-list li {
    width: 100%;
    padding: 0;
  }
}

/* --- Hero Section --- */
.hero {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5xl) var(--container-padding);
  position: relative;
}

.hero__content {
  max-width: 700px;
}

.hero__tagline {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-lg);
}

.hero__title {
  margin-bottom: var(--space-xl);
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
  max-width: 540px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* --- Service Card --- */
.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  min-height: 180px;
  cursor: pointer;
}

.service-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.service-card__excerpt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
          line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--space-sm);
}

.service-card__arrow {
  align-self: flex-end;
  font-size: var(--text-lg);
  opacity: 0;
  transform: translateX(-8px);
  transition: all var(--duration-base) var(--ease-out);
}

.service-card:hover .service-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* --- Service Card with Image (Genshin-style notch) --- */
.service-card--has-image {
  position: relative;
  padding-top: calc(var(--space-xl) + 64px);
  margin-top: 64px;
  overflow: visible;
}

/* The notch: a semi-circle cut into the top edge */
.service-card__notch {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 70px;
  background: var(--bg-primary);
  border-radius: 0 0 9999px 9999px;
  border: 1px solid var(--glass-border);
  border-top: none;
  box-shadow:
    0 -2px 0 0 var(--bg-primary),
    inset 0 -8px 16px -8px rgba(58, 69, 52, 0.12);
  z-index: 2;
}

/* Immortal shimmer — smooth opacity crossfade between olive and gold */
@keyframes immortalPulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

@keyframes immortalShadow {
  0%, 100% {
    box-shadow:
      0 4px 24px rgba(136, 146, 109, 0.3),
      0 0 12px 2px rgba(136, 146, 109, 0.15);
  }
  50% {
    box-shadow:
      0 4px 28px rgba(180, 160, 90, 0.3),
      0 0 14px 3px rgba(180, 160, 90, 0.15);
  }
}

/* Outer glow ring behind the circle */
.service-card__circle {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--olive) 0%,
    var(--stone) 50%,
    var(--olive) 100%
  );
  padding: 3px;
  z-index: 3;
  box-shadow:
    0 4px 24px rgba(136, 146, 109, 0.3),
    0 0 12px 2px rgba(136, 146, 109, 0.15);
  animation: immortalShadow 6s ease-in-out infinite;
  transition: transform var(--duration-base) var(--ease-out);
}

/* Gold gradient layer — fades in/out over the olive base */
.service-card__circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    #8a8b5e 0%,
    #c4b078 50%,
    #8a8b5e 100%
  );
  opacity: 0;
  animation: immortalPulse 6s ease-in-out infinite;
  z-index: -1;
}

.service-card--has-image:hover .service-card__circle {
  transform: translateX(-50%) scale(1.06);
}

.service-card--has-image:hover .service-card__circle,
.service-card--has-image:hover .service-card__circle::before {
  animation-duration: 4s;
}

.service-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  filter: saturate(0.6) contrast(1.05) brightness(0.95);
  transition: filter var(--duration-slow) var(--ease-out);
}

/* Theme tint overlay on the image */
.service-card__circle::after {
  content: '';
  position: absolute;
  inset: 3px; /* inside the ring */
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.15;
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--duration-slow) var(--ease-out);
}

/* On hover, reveal more of the original image */
.service-card--has-image:hover .service-card__image {
  filter: saturate(0.85) contrast(1.02) brightness(1);
}

.service-card--has-image:hover .service-card__circle::after {
  opacity: 0.08;
}

/* --- Section Header --- */
.section-header {
  margin-bottom: var(--space-3xl);
}

.section-header__label {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-md);
}

.section-header__title {
  margin-bottom: var(--space-md);
}

.section-header__desc {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* --- Hero with Organic Image --- */
.hero--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding-top: 140px;
  padding-bottom: var(--space-3xl);
  min-height: 80vh;
}

@media (min-width: 768px) {
  .hero--split {
    grid-template-columns: 1fr 1fr;
  }
}

.hero--split .hero__content {
  max-width: none;
  padding-right: var(--space-xl);
}

.hero__image-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__image-organic {
  width: 100%;
  max-width: 480px;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

/* Doctors hero — premium editorial photo (transparent cutout) */
.hero__image-wrap--doctors {
  justify-content: flex-start;
  position: relative;
}

.hero__image-doctors {
  width: 130%;
  max-width: none;
  object-fit: cover;
  position: relative;
  z-index: 2;
  margin-left: -30%;
  filter:
    drop-shadow(0 4px 8px rgba(20, 25, 18, 0.45))
    drop-shadow(0 18px 30px rgba(20, 25, 18, 0.32))
    drop-shadow(0 40px 80px rgba(58, 69, 52, 0.25));
}

/* Wellness — warm taupe shadows, tuned for ivory background (no green to avoid gloom) */
[data-brand="wellness"] .hero__image-doctors {
  filter:
    drop-shadow(0 4px 8px rgba(88, 70, 50, 0.3))
    drop-shadow(0 18px 30px rgba(88, 70, 50, 0.22))
    drop-shadow(0 40px 80px rgba(120, 95, 65, 0.18));
}

/* Accent pattern — fade transparent on the left so the right (behind figures) is the noticeable part */
.hero--doctors-premium .hero__accent-pattern {
  mask-image: linear-gradient(to right, transparent 0%, transparent 20%, black 60%, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 20%, black 60%, black 100%);
}

/* Contact hero — full-bleed editorial bg + two scattered polaroids */
.hero--contact {
  min-height: 84vh;
  padding: var(--space-5xl) var(--container-padding);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Background photo — blurred, slow Ken Burns. Negative inset hides the blur edges. */
.hero__contact-bg {
  position: absolute;
  inset: -24px;
  z-index: 0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  filter: blur(6px);
  animation: contactKenBurns 55s ease-in-out infinite alternate;
  transform-origin: center;
  will-change: transform;
}

/* Warm radial scrim — pulls focus to the polaroid stack */
.hero__contact-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 80% at 60% 50%, rgba(20, 25, 18, 0.30) 0%, rgba(20, 25, 18, 0.65) 100%);
}

[data-brand="wellness"] .hero__contact-scrim {
  background:
    radial-gradient(ellipse 75% 80% at 60% 50%, rgba(241, 235, 223, 0.45) 0%, rgba(241, 235, 223, 0.78) 100%);
}

/* Foreground content grid — text left, polaroid stage right */
.hero__contact-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(var(--space-2xl), 6vw, var(--space-5xl));
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.hero__contact-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Polaroid stage — anchors the two absolutely-positioned polaroids */
.hero__contact-polaroids {
  position: relative;
  width: 100%;
  height: clamp(460px, 52vw, 640px);
}

/* Polaroid — iconic frame: thicker caption strip at bottom, off-white paper */
.polaroid {
  position: absolute;
  margin: 0;
  background: #fbf7ee;
  padding: 20px 20px 80px 20px;
  width: 68%;
  box-shadow:
    0 4px 12px rgba(20, 25, 18, 0.22),
    0 22px 50px rgba(20, 25, 18, 0.32);
}

.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.polaroid__caption {
  position: absolute;
  bottom: 14px;
  left: 20px;
  right: 20px;
  text-align: center;
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-weight: 500;
  font-size: clamp(1.3rem, 1.7vw, 1.7rem);
  line-height: 1.15;
  color: #2c2c2c;
  margin: 0;
}

/* Back polaroid — top-left, tilted counter-clockwise */
.polaroid--back {
  top: 10%;
  left: 0;
  transform: rotate(-5deg);
  z-index: 1;
}

/* Front polaroid — lower-right, tilted clockwise, overlaps the back */
.polaroid--front {
  top: 32%;
  right: 0;
  transform: rotate(5.5deg);
  z-index: 2;
}

/* Wellness — warm taupe shadow (no green to avoid gloom on ivory page bg) */
[data-brand="wellness"] .polaroid {
  box-shadow:
    0 4px 12px rgba(88, 70, 50, 0.20),
    0 22px 50px rgba(120, 95, 65, 0.28);
}

/* Film grain on top of everything — analog texture ties the layers together */
.hero__contact-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 200px 200px;
  background-repeat: repeat;
}

@keyframes contactKenBurns {
  from { transform: scale(1.02) translate(-1%, 0); }
  to   { transform: scale(1.08) translate(2%, 1%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__contact-bg { animation: none; }
}

@media (max-width: 900px) {
  .hero--contact {
    min-height: auto;
    /* Clear the fixed site-header (~70px) plus generous breathing room */
    padding-top: calc(var(--space-5xl) + 24px);
    padding-bottom: var(--space-3xl);
  }
  .hero__contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }
  .hero__contact-polaroids {
    order: -1;
    height: clamp(380px, 85vw, 500px);
  }
  .polaroid {
    width: 72%;
    padding: 14px 14px 60px 14px;
  }
  .polaroid--back {
    top: 10%;
    left: 0;
    transform: rotate(-4deg);
  }
  .polaroid--front {
    top: 40%;
    right: 0;
    transform: rotate(4.5deg);
  }
  .polaroid__caption {
    bottom: 10px;
    left: 14px;
    right: 14px;
    font-size: clamp(1.05rem, 4.2vw, 1.4rem);
  }
}

/* Home hero — transparent image, floating premium feel */
.hero--home {
  min-height: 85vh;
}

.hero__image-home {
  width: 140%;
  max-width: none;
  object-fit: contain;
  position: relative;
  z-index: 2;
  margin-left: -30%;
  margin-right: -10%;
  filter: drop-shadow(0 12px 32px rgba(58, 69, 52, 0.15));
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Wellness home hero — portrait figure spans both hero and marquee as a backdrop */
[data-brand="wellness"] .hero--home {
  align-items: start;
  padding-top: 160px;
}

[data-brand="wellness"] .hero--home .hero__content {
  position: relative;
  z-index: 4;
}

[data-brand="wellness"] .hero--home .hero__accent-pattern {
  z-index: 0;
}

/* Drop image-wrap as the containing block — let the image position against the whole hero */
[data-brand="wellness"] .hero--home .hero__image-wrap {
  position: static;
}

[data-brand="wellness"] .hero--home .hero__image-home {
  position: absolute;
  top: 60px;
  right: 1%;
  bottom: auto;
  width: 55%;
  max-width: 1300px;
  height: auto;
  margin: 0;
  z-index: 1;
  pointer-events: none;
  /* Editorial polish: subtle contrast + warm desaturation lifts a non-studio shot */
  filter:
    contrast(1.06)
    saturate(0.88)
    brightness(1.02)
    sepia(0.05)
    drop-shadow(0 14px 36px rgba(88, 70, 50, 0.22))
    drop-shadow(0 4px 10px rgba(88, 70, 50, 0.18));
  mask-image: none;
  -webkit-mask-image: none;
}

/* Kill the seam — marquee bg goes transparent so the figure reads as a continuous backdrop */
[data-brand="wellness"] .marquee-asi {
  background: transparent;
  position: relative;
  z-index: 2;
}

/* ============================================
   Wellness home — biometric overlay
   Editorial diagnostic readouts around the figure
   ============================================ */

/* Ambient radar polygon behind figure — slow drift, subtle but present */
.hero-wellness-radar {
  position: absolute;
  top: 80px;
  right: 6%;
  width: 46%;
  max-width: 1050px;
  aspect-ratio: 1;
  height: auto;
  z-index: 0;
  opacity: 0.12;
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.4;
  pointer-events: none;
  animation: heroRadarRotate 90s linear infinite;
  transform-origin: center;
}

@keyframes heroRadarRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Foreground overlay — leader lines + callouts on top of figure */
.hero-wellness-overlay {
  position: absolute;
  top: 60px;
  right: 1%;
  width: 55%;
  max-width: 1300px;
  aspect-ratio: 799 / 1200;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-body);
  color: var(--text-primary);
}

.hero-wellness-overlay__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.leader-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  opacity: 0.85;
  animation: leaderDraw 0.45s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}

.leader-line--hrv    { animation-delay: 0.10s; }
.leader-line--mass   { animation-delay: 0.20s; }
.leader-line--bioage { animation-delay: 0.30s; }

.leader-anchor-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: anchorRingPulse 2s ease-out infinite;
}

.leader-anchor-dot {
  fill: var(--accent);
  opacity: 0;
  animation: anchorDotIn 0.3s ease-out forwards;
}

.leader-anchor--hrv.leader-anchor-ring    { animation-delay: 0.55s; }
.leader-anchor--hrv.leader-anchor-dot     { animation-delay: 0.55s; }
.leader-anchor--mass.leader-anchor-ring   { animation-delay: 0.65s; }
.leader-anchor--mass.leader-anchor-dot    { animation-delay: 0.65s; }
.leader-anchor--bioage.leader-anchor-ring { animation-delay: 0.75s; }
.leader-anchor--bioage.leader-anchor-dot  { animation-delay: 0.75s; }

@keyframes leaderDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes anchorRingPulse {
  0%   { opacity: 0.9; transform: scale(0.5); }
  60%  { opacity: 0;   transform: scale(2.2); }
  100% { opacity: 0;   transform: scale(2.2); }
}

@keyframes anchorDotIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* HUD callouts — rounded premium rectangles with corner brackets, snappy pop-in */
.data-callout {
  position: absolute;
  z-index: 3;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  background: rgba(245, 240, 228, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(136, 146, 109, 0.35);
  border-radius: 10px;
  padding: 11px 14px;
  opacity: 0;
  transform: scale(0.85);
  animation: calloutPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  box-shadow: 0 6px 22px rgba(58, 69, 52, 0.08);
}

/* Corner brackets — HUD targeting reticle aesthetic */
.data-callout::before,
.data-callout::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
  pointer-events: none;
}

.data-callout::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 4px;
}

.data-callout::after {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 4px;
}

@keyframes calloutPop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.data-callout__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 6px;
}

.data-callout__value {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.data-callout__unit {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.data-callout__tag {
  margin: 8px 0 0;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

/* HRV — clear of hero title, left of upper torso */
.data-callout--hrv {
  left: 4%;
  top: 24%;
  width: 165px;
  animation-delay: 0.40s;
}

.data-callout__sparkline {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: 8px;
  overflow: visible;
}

.data-callout__sparkline polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: sparkDraw 3s ease-out 0.6s infinite;
}

@keyframes sparkDraw {
  0%      { stroke-dashoffset: 240; opacity: 0; }
  10%     { stroke-dashoffset: 240; opacity: 1; }
  55%     { stroke-dashoffset: 0;   opacity: 1; }
  90%     { stroke-dashoffset: 0;   opacity: 1; }
  100%    { stroke-dashoffset: 0;   opacity: 0; }
}

/* Lean Mass — left of the up-thigh (visible front leg), with bar */
.data-callout--mass {
  left: 0%;
  top: 44%;
  width: 175px;
  animation-delay: 0.55s;
}

.data-callout__bar {
  position: relative;
  height: 2px;
  margin-top: 10px;
  background: rgba(136, 146, 109, 0.18);
}

.data-callout__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  animation: barFill 0.7s cubic-bezier(0.5, 0, 0.2, 1) 0.7s forwards;
}

@keyframes barFill {
  to { width: 38%; }
}

/* Bio Age — to the right of the head, leader line points at temple */
.data-callout--bioage {
  left: 70%;
  top: 9%;
  animation-delay: 0.70s;
}

.data-callout__bignum {
  font-family: var(--font-display);
  margin: 4px 0 0;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.data-callout__bignum-strike {
  font-size: 22px;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  color: var(--text-secondary);
  opacity: 0.55;
}

.data-callout__bignum-now {
  font-size: 44px;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
}

/* Hide overlay below large desktop — readouts get cramped against the hero text */
@media (max-width: 1365px) {
  .hero-wellness-overlay,
  .hero-wellness-radar {
    display: none;
  }
}

/* Respect reduced motion — keep the layout but skip animations */
@media (prefers-reduced-motion: reduce) {
  .hero-wellness-radar,
  .leader-line,
  .leader-anchor-ring,
  .leader-anchor-dot,
  .data-callout,
  .data-callout__sparkline polyline,
  .data-callout__bar-fill {
    animation: none;
  }
  .leader-line { stroke-dashoffset: 0; }
  .leader-anchor-ring { opacity: 0.6; }
  .leader-anchor-dot { opacity: 1; }
  .data-callout { opacity: 1; transform: none; }
  .data-callout__sparkline polyline { stroke-dashoffset: 0; opacity: 1; }
  .data-callout__bar-fill { width: 38%; }
}

/* Services hero — oversized image style */
.hero--services .hero__image-organic {
  width: 160%;
  max-width: none;
  margin-right: -20%;
  margin-top: -5%;
  margin-left: -45%;
  transform: scale(1.15);
}

/* ============================================
   Services hero — Hara emblem halo
   Big luminous brand mark behind the floating bottles,
   with twin orbital rings. No gradients (per playbook);
   the luminous feel comes from layered drop-shadows.
   ============================================ */

.hero--constellation .hero__content,
.hero--constellation .hero__image-wrap {
  position: relative;
  z-index: 2;
}

/* Desktop only: align hero text with the header logo (which sits inside
   the centered container at max-width 1200px). The translation is the
   exact distance from the hero's padding-left edge to the container's
   inner edge: (viewport - container_max) / 2, clamped so it stays sane
   on extreme viewports. Image column gets a softer leftward nudge to
   balance the composition. The mobile breakpoint below resets both. */
@media (min-width: 768px) {
  .hero--constellation .hero__content {
    transform: translateX(clamp(0px, calc((100vw - 2 * var(--container-padding) - 1200px) / 2), 320px));
  }
  .hero--constellation .hero__image-wrap {
    transform: translateX(clamp(-180px, -10vw, 0px));
  }
}

.elixir-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(135%, 860px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.elixir-halo__mark {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  translate: 0 -4%;
  -webkit-mask: url("../assets/images/ICON%20WHITE.png") center / contain no-repeat;
          mask: url("../assets/images/ICON%20WHITE.png") center / contain no-repeat;
  animation: haloBreath 9s ease-in-out infinite;
  will-change: opacity, scale;
}

[data-brand="clinic"] .elixir-halo__mark {
  background-color: var(--ivory);
  filter:
    drop-shadow(0 0 30px rgba(232, 226, 210, 0.07))
    drop-shadow(0 0 80px rgba(136, 146, 109, 0.06));
}

[data-brand="wellness"] .elixir-halo__mark {
  background-color: var(--olive);
  filter:
    drop-shadow(0 0 32px rgba(168, 142, 110, 0.08))
    drop-shadow(0 0 90px rgba(140, 116, 88, 0.05));
}

@keyframes haloBreath {
  0%, 100% { scale: 1;    opacity: var(--halo-opacity, 0.05); }
  50%      { scale: 1.03; opacity: calc(var(--halo-opacity, 0.05) + 0.005); }
}

[data-brand="clinic"] .elixir-halo__mark  { --halo-opacity: 0.022; }
[data-brand="wellness"] .elixir-halo__mark { --halo-opacity: 0.045; }

/* Twin orbital rings — dashed, slow counter-rotation, brand-tinted */
.elixir-halo__orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  transform-origin: center;
  will-change: transform;
}

.elixir-halo__orbit circle {
  fill: none;
  stroke: inherit;
  vector-effect: non-scaling-stroke;
}

.elixir-halo__orbit--outer {
  stroke-width: 0.3;
  stroke-dasharray: 0.6 5.2;
  opacity: 0.12;
  animation: haloSpin 120s linear infinite;
}

.elixir-halo__orbit--inner {
  stroke-width: 0.4;
  stroke-dasharray: 0.3 7;
  opacity: 0.08;
  animation: haloSpin 80s linear infinite reverse;
}

[data-brand="clinic"] .elixir-halo__orbit--outer { opacity: 0.10; }
[data-brand="clinic"] .elixir-halo__orbit--inner { opacity: 0.06; }

[data-brand="wellness"] .elixir-halo__orbit--outer {
  stroke: rgba(140, 116, 88, 0.9);
  opacity: 0.10;
}
[data-brand="wellness"] .elixir-halo__orbit--inner {
  stroke: rgba(140, 116, 88, 0.9);
  opacity: 0.06;
}

@keyframes haloSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 767px) {
  .elixir-halo {
    width: min(125%, 540px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .elixir-halo__mark,
  .elixir-halo__orbit {
    animation: none;
  }
}

/* ============================================
   Elixir Constellation — services hero
   Floating bottle composition with mana glow
   ============================================ */

.elixir-constellation {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  pointer-events: none;
}

.elixir-slot {
  position: absolute;
  width: 22%;
  max-width: 200px;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  /* baseline transform — translate to anchor at slot center, scale per-slot */
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  animation: elixirBob var(--dur, 4.5s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}

.elixir-slot__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 1;
  transition: opacity 0.35s ease;
  /* Mana glow — drop-shadow follows the bottle silhouette (no gradients per playbook) */
  filter:
    drop-shadow(0 0 26px rgba(136, 146, 109, 0.55))
    drop-shadow(0 0 48px rgba(136, 146, 109, 0.22))
    drop-shadow(0 8px 22px rgba(58, 69, 52, 0.18));
}

.elixir-slot__img.is-fading {
  opacity: 0;
}

/* Clinic — slightly more luminous since glow pops harder on dark bg */
[data-brand="clinic"] .elixir-slot__img {
  filter:
    drop-shadow(0 0 28px rgba(136, 146, 109, 0.7))
    drop-shadow(0 0 60px rgba(136, 146, 109, 0.32))
    drop-shadow(0 10px 26px rgba(0, 0, 0, 0.35));
}

@keyframes elixirBob {
  0%, 100% {
    transform: translate(-50%, -50%) scale(var(--scale, 1)) rotate(0deg);
  }
  50% {
    transform: translate(-50%, calc(-50% - var(--lift, 14px))) scale(var(--scale, 1)) rotate(var(--sway, 1.5deg));
  }
}

/* Mobile — fewer bottles, less motion, contained */
@media (max-width: 767px) {
  .elixir-constellation {
    min-height: 360px;
  }

  /* Hide the upper-outlier slots — keep the central + two lower for a clean triangle */
  .elixir-slot[data-slot="1"],
  .elixir-slot[data-slot="2"] {
    display: none;
  }

  /* Bring remaining slots tighter into the visible area */
  .elixir-slot[data-slot="0"] { left: 50% !important; top: 30% !important; }
  .elixir-slot[data-slot="3"] { left: 24% !important; top: 75% !important; }
  .elixir-slot[data-slot="4"] { left: 76% !important; top: 75% !important; }

  .elixir-slot {
    width: 30%;
    max-width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elixir-slot {
    animation: none;
  }
}

/* ============================================
   Space Tour Hero — about page
   Flashlight cursor + interactive hot-spots
   ============================================ */

.space-tour {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 640px;
  max-height: 980px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-primary);
}

.space-tour__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.space-tour__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Wash layer — covers the image, masked by cursor.
   Wellness (ivory brand) uses an ivory wash so cursor reveals warm colors (reverse flashlight).
   Clinic (dark brand) uses a dark dim so cursor reveals brightness (regular flashlight). */
.space-tour__dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle 300px at var(--fx, -1000px) var(--fy, -1000px),
    transparent 0%, transparent 22%, rgba(0,0,0,0.6) 55%, black 78%);
  mask-image: radial-gradient(circle 300px at var(--fx, -1000px) var(--fy, -1000px),
    transparent 0%, transparent 22%, rgba(0,0,0,0.6) 55%, black 78%);
  transition: background-color 0.3s ease;
}

[data-brand-tour="wellness"] .space-tour__dim {
  background-color: rgba(241, 235, 223, 0.86);
}

[data-brand-tour="clinic"] .space-tour__dim {
  background-color: rgba(20, 25, 18, 0.72);
}

/* Wellness photo gets a slight desaturation so it harmonizes with the ivory wash */
[data-brand-tour="wellness"] .space-tour__img {
  filter: contrast(1.05) saturate(1.05);
}

/* Touch — no flashlight, no dim */
.space-tour.is-touch .space-tour__dim {
  display: none;
}

/* Hot-spot button — sits ABOVE both dim and overlay text */
.space-tour__hotspot {
  position: absolute;
  z-index: 6;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Reveal hot-spots when user hovers the section */
.space-tour:hover .space-tour__hotspot,
.space-tour.is-touch .space-tour__hotspot {
  opacity: 1;
}

/* Soft light halo around each dot — visible while hovering, brightens dim area */
.space-tour__hotspot::before {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background-color: rgba(241, 235, 223, 0.22);
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.5s ease, background-color 0.3s ease;
}

.space-tour:hover .space-tour__hotspot::before,
.space-tour.is-touch .space-tour__hotspot::before {
  opacity: 1;
}

.space-tour__hotspot.is-near::before {
  background-color: rgba(241, 235, 223, 0.4);
  inset: -34px;
}

.space-tour__hotspot-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--olive);
  box-shadow:
    0 0 14px rgba(136, 146, 109, 0.85),
    0 0 0 3px rgba(241, 235, 223, 0.92),
    0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.space-tour__hotspot-pulse {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--olive);
  opacity: 0;
  pointer-events: none;
}

/* Pulse only animates while user is engaged with the picture */
.space-tour:hover .space-tour__hotspot-pulse,
.space-tour.is-touch .space-tour__hotspot-pulse {
  animation: spaceTourPulse 2.0s ease-out infinite;
}

.space-tour__hotspot.is-hint .space-tour__hotspot-pulse {
  animation-duration: 1.4s;
}

/* Cursor close to a dot — pulse speeds up, dot brightens */
.space-tour__hotspot.is-near .space-tour__hotspot-pulse {
  animation-duration: 0.9s;
}

.space-tour__hotspot.is-near .space-tour__hotspot-dot {
  transform: scale(1.18);
  box-shadow:
    0 0 20px rgba(136, 146, 109, 1),
    0 0 0 4px rgba(241, 235, 223, 0.95),
    0 6px 16px rgba(0, 0, 0, 0.35);
}

.space-tour__hotspot:hover .space-tour__hotspot-dot,
.space-tour__hotspot.is-active .space-tour__hotspot-dot {
  transform: scale(1.3);
}

@keyframes spaceTourPulse {
  0%   { opacity: 0.7; transform: scale(0.5); }
  100% { opacity: 0;   transform: scale(3.4); }
}

/* Popover — premium editorial card, top-most layer */
.space-tour__popover {
  position: absolute;
  z-index: 7;
  width: 240px;
  margin-top: 34px;
  margin-left: -120px;
  background: rgba(241, 235, 223, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(136, 146, 109, 0.4);
  border-radius: 10px;
  padding: 14px 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.95);
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.space-tour__popover.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Same corner-bracket detail as the wellness HUD callouts */
.space-tour__popover::before,
.space-tour__popover::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--olive);
  pointer-events: none;
}

.space-tour__popover::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 4px;
}

.space-tour__popover::after {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 4px;
}

.space-tour__popover-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 5px;
}

.space-tour__popover-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--dark);
  margin: 0;
}

/* Foreground copy, overlay on bottom-left, sits above dim but below hot-spots */
.space-tour__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3xl) var(--container-padding);
  /* Brand-aware bottom fade for headline legibility (survives flashlight reveal) */
}

[data-brand-tour="clinic"] .space-tour__overlay {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 45%,
    rgba(0, 0, 0, 0.55) 100%);
}

[data-brand-tour="wellness"] .space-tour__overlay {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 50%,
    rgba(241, 235, 223, 0.7) 100%);
}

.space-tour__copy {
  pointer-events: auto;
  max-width: 560px;
}

.space-tour__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}

.space-tour__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-lg);
}

.space-tour__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.55;
  margin: 0 0 var(--space-xl);
  max-width: 500px;
}

/* Clinic on dark dim: ivory text */
[data-brand-tour="clinic"] .space-tour__copy { color: var(--ivory); }
[data-brand-tour="clinic"] .space-tour__eyebrow { color: rgba(241, 235, 223, 0.78); }
[data-brand-tour="clinic"] .space-tour__title { color: var(--ivory); }
[data-brand-tour="clinic"] .space-tour__subtitle { color: rgba(241, 235, 223, 0.88); }

/* Wellness on ivory wash: dark brand text */
[data-brand-tour="wellness"] .space-tour__copy { color: var(--dark); }
[data-brand-tour="wellness"] .space-tour__eyebrow { color: var(--olive); }
[data-brand-tour="wellness"] .space-tour__title { color: var(--dark); }
[data-brand-tour="wellness"] .space-tour__subtitle { color: rgba(58, 69, 52, 0.88); }

/* Hint indicator — auto-fades after first interaction or 8s */
.space-tour__hint {
  position: absolute;
  bottom: var(--space-2xl);
  right: var(--space-3xl);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.space-tour__hint.is-dismissed {
  opacity: 0;
}

.space-tour__hint-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--olive);
  box-shadow: 0 0 0 0 rgba(136, 146, 109, 0.7);
  animation: spaceTourHintPulse 1.8s ease-out infinite;
}

@keyframes spaceTourHintPulse {
  0%   { box-shadow: 0 0 0 0 rgba(136, 146, 109, 0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(136, 146, 109, 0); }
  100% { box-shadow: 0 0 0 0 rgba(136, 146, 109, 0); }
}

.space-tour__hint-text {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

[data-brand-tour="clinic"] .space-tour__hint-text {
  color: rgba(241, 235, 223, 0.88);
}

[data-brand-tour="wellness"] .space-tour__hint-text {
  color: var(--olive);
}

/* Mobile */
@media (max-width: 767px) {
  .space-tour {
    height: auto;
    min-height: 520px;
    perspective: none;
  }
  .space-tour__stage {
    transform: none !important;
  }
  .space-tour__hotspot {
    width: 28px;
    height: 28px;
    margin-left: -14px;
    margin-top: -14px;
  }
  .space-tour__popover {
    width: 200px;
    margin-left: -100px;
    padding: 12px 14px;
  }
  .space-tour__title {
    font-size: var(--text-3xl);
  }
  .space-tour__hint {
    right: var(--space-lg);
    bottom: var(--space-lg);
  }
  .space-tour__hint-text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-tour__stage { transition: none; }
  .space-tour__hotspot-pulse,
  .space-tour__hint-pulse { animation: none; }
}

/* --- Service Detail Hero Circle (right side of split hero) --- */
.hero__image-wrap--circle {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* SVG pattern radiating behind the circle */
.hero__image-wrap--circle .hero__accent-pattern {
  position: absolute;
  width: 250%;
  height: 250%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.06;
  mask-image: radial-gradient(ellipse 45% 50% at 50% 50%, black 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 45% 50% at 50% 50%, black 0%, transparent 65%);
}


.hero-circle {
  position: relative;
  z-index: 1;
}

.hero-circle__ring {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--olive) 0%,
    var(--stone) 50%,
    var(--olive) 100%
  );
  padding: 4px;
  box-shadow:
    0 8px 40px rgba(136, 146, 109, 0.3),
    0 0 20px 4px rgba(136, 146, 109, 0.12);
  animation: heroCircleGlow 6s ease-in-out infinite;
  position: relative;
}

/* Gold shimmer layer */
.hero-circle__ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    #8a8b5e 0%,
    #c4b078 50%,
    #8a8b5e 100%
  );
  opacity: 0;
  animation: immortalPulse 6s ease-in-out infinite;
  z-index: -1;
}

/* Theme tint overlay */
.hero-circle__ring::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.12;
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 1;
}

.hero-circle__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  filter: saturate(0.6) contrast(1.05) brightness(0.95);
}

@keyframes heroCircleGlow {
  0%, 100% {
    box-shadow:
      0 8px 40px rgba(136, 146, 109, 0.3),
      0 0 20px 4px rgba(136, 146, 109, 0.12);
  }
  50% {
    box-shadow:
      0 8px 48px rgba(180, 160, 90, 0.3),
      0 0 24px 6px rgba(180, 160, 90, 0.12);
  }
}

@media (max-width: 767px) {
  .hero__image-wrap--circle {
    margin-top: var(--space-xl);
  }

  .hero-circle__ring {
    width: 200px;
    height: 200px;
  }


  .hero__image-wrap--circle .hero__accent-pattern {
    opacity: 0.04;
  }
}

/* Luxury accent pattern tile behind hero content */
.hero__accent-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 120%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.045;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 90% 90% at 60% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 60% 50%, black 0%, transparent 75%);
}

@media (max-width: 767px) {
  .hero__image-organic {
    max-width: 320px;
    margin-inline: auto;
  }

  .hero--services .hero__image-organic {
    width: 140%;
    max-width: none;
    margin-left: -20%;
    margin-right: -20%;
    transform: none;
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  }

  .hero__image-doctors {
    width: 100%;
    margin-left: 0;
    margin-inline: auto;
    filter:
      drop-shadow(0 3px 6px rgba(20, 25, 18, 0.4))
      drop-shadow(0 12px 20px rgba(20, 25, 18, 0.28))
      drop-shadow(0 24px 48px rgba(58, 69, 52, 0.22));
  }

  [data-brand="wellness"] .hero__image-doctors {
    filter:
      drop-shadow(0 3px 6px rgba(88, 70, 50, 0.26))
      drop-shadow(0 12px 20px rgba(88, 70, 50, 0.2))
      drop-shadow(0 24px 48px rgba(120, 95, 65, 0.16));
  }

  .hero__image-home {
    width: 140%;
    max-width: none;
    margin-left: -20%;
    margin-right: -20%;
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
                linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
                        linear-gradient(to bottom, black 60%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: destination-in;
  }

  /* Wellness home portrait — contained, centered, marquee transparent so figure carries through */
  [data-brand="wellness"] .hero--home .hero__image-home {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: 70%;
    max-width: 280px;
    margin-inline: auto;
    margin-top: var(--space-lg);
    margin-bottom: calc(var(--space-2xl) * -1);
    display: block;
    z-index: 1;
    pointer-events: none;
    mask-image: none;
    -webkit-mask-image: none;
    filter:
      contrast(1.06)
      saturate(0.88)
      brightness(1.02)
      sepia(0.05)
      drop-shadow(0 10px 24px rgba(88, 70, 50, 0.22))
      drop-shadow(0 3px 8px rgba(88, 70, 50, 0.18));
  }

  [data-brand="wellness"] .hero--home {
    padding-top: 110px;
  }

  .hero--home {
    min-height: auto;
  }

  .hero--split {
    padding-top: 100px;
    min-height: auto;
    padding-bottom: var(--space-3xl);
  }

  .hero__accent-pattern {
    width: 100%;
    opacity: 0.03;
  }
}

/* Page transition wrapper */
.page-transition {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.page-transition.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Booking Redirect Modal
   ============================================ */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(58, 69, 52, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.booking-modal--visible {
  opacity: 1;
}

.booking-modal__accent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 70%);
}

.booking-modal__card {
  position: relative;
  z-index: 2;
  background: var(--ivory);
  border: 1px solid var(--stone);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-3xl) var(--space-2xl);
  max-width: 420px;
  width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  box-shadow: 0 24px 80px rgba(58, 69, 52, 0.2);
  transform: translateY(16px);
  transition: transform var(--duration-base) var(--ease-out);
}

.booking-modal--visible .booking-modal__card {
  transform: translateY(0);
}

.booking-modal__icon {
  color: var(--olive);
  margin-bottom: var(--space-sm);
}

.booking-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--dark);
  letter-spacing: 0.02em;
}

.booking-modal__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gray);
  line-height: 1.6;
  max-width: 320px;
}

.booking-modal__progress {
  width: 100%;
  height: 2px;
  background: var(--stone);
  border-radius: var(--radius-full);
  margin-top: var(--space-md);
  overflow: hidden;
}

.booking-modal__progress-bar {
  height: 100%;
  width: 0;
  background: var(--olive);
  border-radius: var(--radius-full);
  animation: booking-progress 4s linear forwards;
}

@keyframes booking-progress {
  from { width: 0; }
  to { width: 100%; }
}

.booking-modal__hint {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--gray);
  letter-spacing: 0.05em;
}

/* ---- Chooser variant (new vs returning patient) ---- */

.booking-modal__card--chooser {
  max-width: 560px;
  padding: var(--space-3xl) var(--space-2xl) var(--space-xl);
  gap: var(--space-sm);
}

.booking-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--gray);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 220ms var(--ease-out), background 220ms var(--ease-out), color 220ms var(--ease-out);
}

.booking-modal__close:hover,
.booking-modal__close:focus-visible {
  opacity: 1;
  background: rgba(58, 69, 52, 0.06);
  color: var(--dark);
  outline: none;
}

.booking-modal__close svg {
  width: 12px;
  height: 12px;
}

/* Hara mark on the chooser card */
.booking-modal__mark {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(136, 146, 109, 0.10);
  border: 1px solid rgba(136, 146, 109, 0.22);
  margin-bottom: var(--space-xs);
}

.booking-modal__mark img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Two-tile choice row */
.booking-modal__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  width: 100%;
  margin-top: var(--space-md);
}

.booking-modal__choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  background: rgba(241, 235, 223, 0.55);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: var(--dark);
  transition:
    transform 240ms var(--ease-out),
    border-color 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out),
    background 240ms var(--ease-out);
  font-family: inherit;
}

.booking-modal__choice:hover,
.booking-modal__choice:focus-visible {
  transform: translateY(-3px);
  border-color: var(--olive);
  background: var(--ivory);
  box-shadow: 0 14px 36px rgba(58, 69, 52, 0.14);
  outline: none;
}

.booking-modal__choice:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(58, 69, 52, 0.10);
}

.booking-modal__choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(136, 146, 109, 0.10);
  color: var(--olive);
  margin-bottom: var(--space-xs);
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out);
}

.booking-modal__choice-icon svg {
  width: 30px;
  height: 30px;
}

.booking-modal__choice:hover .booking-modal__choice-icon,
.booking-modal__choice:focus-visible .booking-modal__choice-icon {
  background: var(--olive);
  color: var(--ivory);
}

.booking-modal__choice-label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
  color: var(--dark);
}

.booking-modal__choice-desc {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--gray);
  line-height: 1.5;
  max-width: 22ch;
}

/* Tighten the chooser layout on narrow viewports so it stays elegant. */
@media (max-width: 540px) {
  .booking-modal__card--chooser {
    padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  }
  .booking-modal__choices {
    grid-template-columns: 1fr;
  }
  .booking-modal__choice {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-md);
    padding: var(--space-lg);
  }
  .booking-modal__choice-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .booking-modal__choice-icon svg {
    width: 24px;
    height: 24px;
  }
  .booking-modal__choice-desc {
    max-width: none;
  }
}

/* ============================================
   Smart Service Search
   ============================================ */
.service-search {
  padding-bottom: 0;
}

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  max-width: 640px;
  margin-inline: auto;
}

.search-bar__icon {
  flex-shrink: 0;
  color: var(--text-secondary);
  opacity: 0.5;
}

.search-bar__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.search-bar__input::placeholder {
  color: var(--text-secondary);
  opacity: 0.5;
}

.search-bar__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.search-bar__clear:hover {
  background: var(--glass-border);
}

/* Category filter pills */
.search-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  max-width: 800px;
  margin-inline: auto;
}

.search-pill {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.search-pill:hover {
  background: var(--glass-bg);
  color: var(--text-primary);
}

.search-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ivory);
}

[data-brand="clinic"] .search-pill.active {
  color: var(--ivory);
}

/* Search results */
.search-results {
  margin-top: var(--space-2xl);
}

.search-results__grid {
  animation: searchFadeIn var(--duration-base) var(--ease-out);
}

@keyframes searchFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Best match highlight */
.service-card--best-match {
  border-color: var(--olive);
  box-shadow:
    0 0 0 1px var(--olive),
    0 8px 32px rgba(136, 146, 109, 0.15);
  position: relative;
}

.service-card--best-match:hover {
  box-shadow:
    0 0 0 1px var(--olive),
    0 16px 48px rgba(136, 146, 109, 0.2);
}

.service-card__badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--olive);
  color: var(--ivory);
}

/* Search highlight in text */
.search-highlight {
  background: rgba(136, 146, 109, 0.2);
  color: inherit;
  border-radius: 2px;
  padding-inline: 2px;
}

/* Empty state */
.search-empty {
  max-width: 500px;
  margin-inline: auto;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .search-pills {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-sm);
    scrollbar-width: none;
  }

  .search-pills::-webkit-scrollbar {
    display: none;
  }

  .search-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .search-bar {
    padding: var(--space-sm) var(--space-lg);
  }
}

/* ============================================
   Contact Page
   ============================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-xl);
  align-items: stretch;
}

.contact-card {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
}

.contact-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-xl);
}

.contact-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--glass-border);
}

.contact-card__row:first-of-type {
  padding-top: 0;
}

.contact-card__row:last-of-type {
  border-bottom: none;
}

.contact-card__row-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.contact-card__row-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.contact-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.7;
}

.contact-card__value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.4;
}

a.contact-card__value:hover {
  text-decoration: underline;
}

.contact-map-card {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  min-height: 380px;
}

.contact-map-wrap {
  flex: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.contact-map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact-directions-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out);
  align-self: flex-start;
}

.contact-directions-link:hover {
  background: var(--glass-bg);
}

@media (max-width: 720px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-map-card {
    min-height: 300px;
  }
}

/* ============================================
   Cross-Brand CTA
   ============================================ */

.cross-brand-cta {
  padding-block: var(--space-3xl);
}

.cross-brand-cta__card {
  max-width: 700px;
  margin-inline: auto;
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
}

.cross-brand-cta__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-md);
}

.cross-brand-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.cross-brand-cta__text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 540px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
}

/* On clinic pages: Wellness teaser looks ivory/warm — must beat .glass-card override */
[data-brand="clinic"] .cross-brand-cta .cross-brand-cta__card {
  background: var(--ivory);
  border-color: rgba(193, 194, 176, 0.3);
  box-shadow: 0 8px 32px rgba(241, 235, 223, 0.1);
}

[data-brand="clinic"] .cross-brand-cta .cross-brand-cta__card:hover {
  background: var(--ivory);
}

[data-brand="clinic"] .cross-brand-cta__label {
  color: var(--olive);
}

[data-brand="clinic"] .cross-brand-cta__title {
  color: var(--dark);
}

[data-brand="clinic"] .cross-brand-cta__text {
  color: var(--gray);
}

[data-brand="clinic"] .cross-brand-cta .btn--outline {
  color: var(--dark);
  border-color: var(--dark);
}

[data-brand="clinic"] .cross-brand-cta .btn--outline:hover {
  background: var(--dark);
  color: var(--ivory);
}

/* On wellness pages: Clinic teaser looks dark/premium — must beat .glass-card override */
[data-brand="wellness"] .cross-brand-cta .cross-brand-cta__card {
  background: var(--dark);
  border-color: rgba(91, 97, 83, 0.3);
  box-shadow: 0 8px 32px rgba(58, 69, 52, 0.15);
}

[data-brand="wellness"] .cross-brand-cta .cross-brand-cta__card:hover {
  background: var(--dark);
}

[data-brand="wellness"] .cross-brand-cta__label {
  color: var(--olive);
}

[data-brand="wellness"] .cross-brand-cta__title {
  color: var(--ivory);
}

[data-brand="wellness"] .cross-brand-cta__text {
  color: var(--stone);
}

[data-brand="wellness"] .cross-brand-cta .btn--outline {
  color: var(--ivory);
  border-color: var(--ivory);
}

[data-brand="wellness"] .cross-brand-cta .btn--outline:hover {
  background: var(--ivory);
  color: var(--dark);
}

@media (max-width: 720px) {
  .cross-brand-cta__card {
    padding: var(--space-2xl) var(--space-lg);
  }

  .cross-brand-cta__title {
    font-size: var(--text-xl);
  }
}

/* --- Service Detail Blocks (authored via Services Manager) --- */
.service-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.service-block--heading {
  margin: 0;
}

.service-block--paragraph {
  line-height: 1.65;
}

.service-block--list {
  margin: 0;
  padding-left: 1.5rem;
  line-height: 1.6;
}

.service-block--list li + li {
  margin-top: var(--space-xs);
}

.service-block--image {
  margin: 0;
}

.service-block--image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

.service-block__caption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  opacity: 0.7;
  text-align: center;
}

.service-block--callout {
  padding: var(--space-lg);
  border-left: 3px solid currentColor;
}

.service-block--callout-warning {
  color: var(--olive, #6b7a4a);
}

.service-block__callout-title {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.service-block--cta {
  display: flex;
  justify-content: flex-start;
}

.service-block--divider {
  border: none;
  border-top: 1px solid var(--glass-border);
  margin: var(--space-md) 0;
}

/* --- Service detail hero halo (big Hara icon backdrop) --- */
/* Mirrors the elixir-halo mark from the services list page but without
   orbits or constellation slots — just the breathing icon behind the
   circular service image. */
.hara-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(280%, 820px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Service detail hero: text aligns with the centered header logo, circle
   grows bigger, halo bleeds into the About section below. The About
   section sits later in the DOM so its content paints on top of the
   halo; we just nudge it with z-index so any positioned children stay
   above. Extra top padding pushes the whole hero composition (text +
   circle + halo) down so it doesn't crowd the sticky header. */
@media (min-width: 768px) {
  .hero--service-detail {
    padding-top: calc(var(--space-5xl) + var(--space-xl));
  }
  .hero--service-detail .hero__content {
    transform: translateX(clamp(0px, calc((100vw - 2 * var(--container-padding) - 1200px) / 2 - 40px), 280px));
    /* Title and copy must always read above the image when they overlap. */
    position: relative;
    z-index: 3;
  }
  .hero--service-detail .hero-circle__ring {
    width: 360px;
    height: 360px;
  }
  .hero--service-detail .hero__image-wrap {
    transform: translateX(clamp(-50px, -3vw, 0px));
    position: relative;
    z-index: 1;
  }
}

/* Lift the About-section content above the halo's overflow so the
   "About this service" heading and paragraphs always read clearly when
   they share vertical space with the halo. */
.hero--service-detail + .section {
  position: relative;
  z-index: 2;
  background: transparent;
}
.hero--service-detail + .section > .container {
  position: relative;
  z-index: 2;
}

.hara-halo__mark {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../assets/images/ICON%20WHITE.png") center / contain no-repeat;
          mask: url("../assets/images/ICON%20WHITE.png") center / contain no-repeat;
  background-color: var(--ivory);
  opacity: var(--hara-halo-opacity, 0.05);
  animation: haraHaloBreath 9s ease-in-out infinite;
  will-change: opacity, transform;
}

[data-brand="clinic"] .hara-halo__mark {
  background-color: var(--ivory);
  --hara-halo-opacity: 0.04;
  filter:
    drop-shadow(0 0 30px rgba(232, 226, 210, 0.07))
    drop-shadow(0 0 80px rgba(136, 146, 109, 0.06));
}

[data-brand="wellness"] .hara-halo__mark {
  background-color: var(--olive);
  --hara-halo-opacity: 0.08;
  filter:
    drop-shadow(0 0 32px rgba(168, 142, 110, 0.08))
    drop-shadow(0 0 90px rgba(140, 116, 88, 0.05));
}

@keyframes haraHaloBreath {
  0%, 100% { transform: scale(1);    opacity: var(--hara-halo-opacity, 0.05); }
  50%      { transform: scale(1.03); opacity: calc(var(--hara-halo-opacity, 0.05) + 0.005); }
}

@media (max-width: 767px) {
  .hara-halo {
    width: min(170%, 440px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hara-halo__mark { animation: none; }
}

/* The hero-circle should sit above the halo backdrop. */
.hero__image-wrap--circle .hero-circle {
  position: relative;
  z-index: 1;
}

/* ============================================
   Editorial section backdrop
   Vogue/spread treatment for the "Why Hara" / "Hara Difference" sections.
   A photograph bleeds in from one bottom corner with a diagonal radial
   mask, so the photo is unmistakably present but the cards/headline area
   stays clean. Brand-tinted via mix-blend-mode so it integrates with the
   palette. Hairline rule + magazine-style caption complete the spread.
   ============================================ */

.section--editorial {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The photograph itself, painted as a pseudo-element so no extra DOM. */
.section--editorial::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--editorial-img);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--editorial-mask);
          mask-image: var(--editorial-mask);
  mix-blend-mode: var(--editorial-blend, multiply);
  opacity: var(--editorial-opacity, 0.55);
  filter: var(--editorial-filter, saturate(0.92) contrast(1.04));
  transform: scale(var(--editorial-zoom, 1));
  transform-origin: center bottom;
  z-index: -1;
  pointer-events: none;
}

/* Right-anchored photograph (clinic). Mask is wide and slow-fading so the
   photo reads clearly across most of the section. */
.section--editorial--right {
  --editorial-mask: radial-gradient(
    ellipse 145% 120% at 100% 100%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.95) 35%,
    rgba(0, 0, 0, 0.75) 55%,
    rgba(0, 0, 0, 0.4) 75%,
    transparent 95%
  );
}

/* Left-anchored photograph (wellness, mirrored for asymmetry across pages) */
.section--editorial--left {
  --editorial-mask: radial-gradient(
    ellipse 145% 120% at 0% 100%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.95) 35%,
    rgba(0, 0, 0, 0.75) 55%,
    rgba(0, 0, 0, 0.4) 75%,
    transparent 95%
  );
}

/* Brand-specific image, tone, and zoom. Clinic shows the photo nearly as
   shot (just a touch of saturation pull-back) at a tighter crop. Wellness
   uses a heavy duotone treatment: the photograph is desaturated and tinted
   into the ivory/stone/olive palette via background-blend-mode, so the
   image reads as a textural recolor rather than a literal photograph and
   the headline pops cleanly off it. */
[data-brand="clinic"] .section--editorial {
  --editorial-img: url("../assets/images/why-hara-clinic.jpg");
  --editorial-blend: normal;
  --editorial-opacity: 0.92;
}
[data-brand="wellness"] .section--editorial {
  --editorial-img: url("../assets/images/why-hara-wellness.jpg");
  --editorial-blend: normal;
  --editorial-opacity: 0.85;
}

/* Subtle paper grain, layered above the photo but below content. */
.section-editorial__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 240px 240px;
  background-repeat: repeat;
}

/* Magazine-style caption tucked in the corner opposite the photo's anchor */
.section-editorial__caption {
  position: absolute;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.55;
  pointer-events: none;
  white-space: nowrap;
}
.section--editorial--right .section-editorial__caption {
  bottom: var(--space-lg);
  left: var(--space-2xl);
}
.section--editorial--left .section-editorial__caption {
  bottom: var(--space-lg);
  right: var(--space-2xl);
}

/* Hairline accent rule next to the eyebrow label, magazine-style */
.section--editorial .section-header__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.section-header__rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.45;
}

/* The cards keep their glass treatment but get a touch more presence so
   they sit cleanly over the photograph without competing. */
.section--editorial .glass-card {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Mobile: drop the editorial framing complexity, keep image as a quieter
   bottom-bleed and hide the caption (no room for it on narrow screens). */
@media (max-width: 767px) {
  .section--editorial::before {
    opacity: calc(var(--editorial-opacity, 0.5) * 0.7);
  }
  .section--editorial--right,
  .section--editorial--left {
    --editorial-mask: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.55) 25%,
      rgba(0, 0, 0, 0.15) 55%,
      transparent 80%
    );
  }
  .section-editorial__caption { display: none; }
}