/* Shared utilities and reusable global components. */
.container {
  width: 100%;
  max-width: calc(var(--layout-wide) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.section { padding-block: var(--section-space); }
.site-header, .site-footer { padding-block: var(--space-4); }
/* All submenu links remain visible and keyboard accessible without JavaScript. */
.primary-menu, .primary-menu .sub-menu { padding-inline-start: var(--space-5); }
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 100000;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  overflow: visible;
  clip-path: none;
  white-space: normal;
  color: var(--color-text-primary);
  background: var(--color-background-primary);
}

/* Global button foundation. */
button, .button, input[type="submit"], input[type="button"], input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--button-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: var(--border-width) solid var(--color-action-primary);
  border-radius: var(--radius-control);
  background: var(--color-action-primary);
  color: var(--color-action-text);
  font-family: var(--font-body);
  font-size: var(--font-size-button);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.button:visited { color: var(--color-action-text); }
:is(button, .button, input[type="submit"], input[type="button"], input[type="reset"]):not(:where(.button--text, .button--secondary, .button--card)):is(:hover, :active) {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  text-decoration: underline;
}
.button.button--primary:is(:hover, :active) { text-decoration: none; }
.button--secondary { background: transparent; color: var(--color-action-primary); }
.button--secondary:visited { color: var(--color-action-primary); }
.button--secondary:is(:hover, :active) { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-action-text); }
.button--text, .button--text:visited {
  min-height: 0;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: var(--border-width) solid var(--color-accent-plum);
  background: transparent;
  color: var(--color-action-primary);
}
.button--text:is(:hover, :active) { background: transparent; color: var(--color-action-primary); border-color: var(--color-accent-plum); text-decoration: none; }
.button__chevron { width: 1rem; height: 1rem; flex: 0 0 1rem; transform: scaleX(-1); }
/* The exact exported glyph faces left; its Figma instance reflects it horizontally. */

/* Milestone 1B — component values read from Figma. No fixed content heights. */
[hidden] { display: none !important; }
.component-section { padding: var(--section-space) var(--page-gutter); }
.component-section > *, .component-hero > *, .footer-grid > * { min-width: 0; }
.component-heading em { display: block; }
.component-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--component-gap); }
.component-actions .button { max-width: 100%; }
.component-actions > .button--text { align-self: center; }
.component-image { width: 100%; height: 100%; object-fit: cover; }
.media-placeholder { display: grid; place-items: center; width: 100%; height: 100%; padding: var(--space-5); background: var(--color-background-tint); font-size: var(--font-size-navigation); }
.button--small { min-height: 42px; padding: 14px 20px; }
.button:disabled { opacity: .6; cursor: not-allowed; }
.button--inverse.button--text { color: var(--color-action-text); border-color: var(--color-action-text); }
.button--inverse .button__chevron { filter: brightness(0) invert(1); }
.button--card { padding: 0; min-height: 24px; background: transparent; border: 0; color: var(--color-action-primary); font-size: .5625rem; font-weight: 400; letter-spacing: .1em; gap: 7px; }
.button--card:visited, .button--card:is(:hover,:active) { color: var(--color-action-primary); background: transparent; }
.button--card .button__chevron { width: 8px; height: 8px; flex-basis: 8px; }
.site-header { display: flex; align-items: center; gap: var(--component-gap); min-height: 92px; padding: 0 68px; background: var(--color-background-secondary); border-bottom: 1px solid color-mix(in srgb, var(--color-action-primary) 15%, transparent); }
.site-branding { display: inline-flex; flex-shrink: 0; color: var(--color-text-primary); text-decoration: none; line-height: normal; }
.site-branding__logo { display: block; width: 150px; height: auto; }
.site-header .site-branding { margin-block: 8px; }
.site-header .site-branding__logo { width: 130px; }
.site-footer .site-branding__logo { width: 176px; }
.site-header nav { display: flex; align-items: center; flex: 1; gap: var(--component-gap); min-width: 0; }
.primary-menu { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex: 1; list-style: none; gap: var(--component-gap); padding: 0; margin: 0; }
.primary-menu a { display: inline-block; padding-block: 8px; font-size: var(--font-size-navigation); line-height: normal; text-transform: uppercase; text-decoration: none; }
.primary-menu a:is(:hover,:focus-visible) { text-decoration: underline; }
/* Native menu classes and the existing fallback current-page attribute share one state. */
.primary-menu :is(.current-menu-item, .current_page_item) > a:not([href*="#"]),
.primary-menu a[aria-current="page"]:not([href*="#"]) {
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent-plum);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.primary-menu .sub-menu { list-style: none; padding: 0; margin: 0; } /* Native nested links stay exposed. */
.menu-toggle { width: 44px; height: 44px; min-height: 44px; padding: 10px; gap: 6px; flex-direction: column; border: 0; background: transparent; }
.menu-toggle:is(:hover,:active) { background: transparent; }
.menu-toggle__line { width: 24px; height: 1.5px; background: var(--color-action-primary); }
.menu-toggle[aria-expanded="true"] .menu-toggle__line { height: 3px; }
.component-hero { display: grid; grid-template-columns: minmax(0,750fr) minmax(0,690fr); background: var(--color-background-secondary); }
.component-hero__copy { padding: 90px 5.5556vw 55px var(--page-gutter); }
.component-hero .eyebrow { margin: 0 0 16px; }
.component-hero .component-heading { width: calc(100% + 45px); font-size: var(--font-size-h1); line-height: var(--line-height-h1); letter-spacing: var(--tracking-h1); margin-bottom: 34px; }
.component-hero .lead { max-width: 524px; margin-bottom: var(--component-gap); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 28px; margin: 58px 0 0; }
.hero-trust > div { display: flex; flex-direction: column-reverse; gap: 3px; }
.hero-trust dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; line-height: normal; }
.hero-trust dd { margin: 0; font-family: var(--font-heading); font-size: 17px; color: var(--color-text-primary); line-height: normal; }
.component-hero__media { background: var(--color-background-tint); position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr) 55px; grid-template-rows: auto; min-height: 720px; }
.hero-picture { grid-column: 2; grid-row: 1; margin-block: 45px; min-height: 630px; }
.hero-picture .component-image { object-position: center; }
.hero-icon { position: absolute; top: 59px; right: 27px; width: 56px; height: 56px; z-index: 1; }
.hero-caption { grid-column: 1 / 3; grid-row: 1; align-self: end; position: relative; width: 225px; max-width: 100%; margin: 45px 0 127px -48px; padding: 26px 28px; background: var(--color-background-primary); color: var(--color-text-primary); font-family: var(--font-heading); font-size: 13px; line-height: 1.5; box-shadow: 0 18px 60px rgba(32,42,35,.13); }
.hero-caption::before { content: ''; display: block; width: 35px; height: 1px; background: var(--color-accent-plum); margin-bottom: 12px; }
.component-approach { display: grid; grid-template-columns: minmax(0,530fr) minmax(0,536fr); gap: var(--layout-column-gap); align-items: start; }
.component-approach .eyebrow { margin-bottom: 16px; }
.approach-copy { display: flex; flex-direction: column; align-items: start; gap: 20px; }
.approach-copy p { margin: 0; }
.component-meet { display: grid; grid-template-columns: minmax(0,549fr) minmax(0,517fr); gap: var(--layout-column-gap); align-items: center; padding-block: var(--section-space-large); }
.meet-collage { display: grid; grid-template-columns: 61.93% 22.04% 16.03%; grid-template-rows: 56.97% 43.03%; aspect-ratio: 549 / 660; }
.meet-primary { grid-column: 1/3; grid-row: 1/3; height: 86.06%; }
.meet-secondary { grid-column: 2/4; grid-row: 2; align-self: stretch; border: 9px solid var(--color-background-primary); z-index: 1; }
.meet-copy .eyebrow, .visit-copy .eyebrow { margin-bottom: 28px; }
.meet-copy .component-heading, .visit-copy .component-heading { margin-bottom: 28px; }
.meet-copy .body-editorial, .visit-copy .body-editorial { margin-bottom: 16px; }
.credentials { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 9px; }
.credentials li { display: flex; align-items: center; gap: var(--space-2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; line-height: normal; }
.credentials img { flex: 0 0 7px; width: 7px; height: 8px; }
.component-visit { display: grid; grid-template-columns: minmax(0,452fr) minmax(0,614fr); gap: var(--layout-column-gap); align-items: start; padding-block: var(--section-space-large); background: var(--color-background-secondary); }
.visit-copy address { font-style: normal; }
.visit-copy .component-actions { margin-top: 32px; }
.visit-media { display: grid; grid-template-columns: minmax(0,1fr); }
.visit-picture { grid-area: 1/1; aspect-ratio: 614 / 560; }
.visit-hours { grid-area: 1/1; align-self: end; justify-self: start; position: relative; margin: 0 0 40px -55px; width: 225px; min-height: 214px; max-width: 100%; padding: 25px 30px; background: var(--color-background-dark); }
.small-heading { font: 400 10px/normal var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-dark-heading); }
.visit-hours .small-heading { margin-bottom: 15px; }
.visit-hours dl { margin: 0; }
.visit-hours dl > div + div { margin-top: 15px; }
.visit-hours dt { color: var(--color-action-text); font: 400 17px/normal var(--font-heading); }
.visit-hours dd { color: var(--color-hours-value); font: 400 15px/normal var(--font-heading); margin: 11px 0 0; }
.treatment-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--color-border-subtle); background: var(--color-background-treatments); }
.treatment-card { padding: 34px 28px 38px; display: flex; flex-direction: column; align-items: start; min-width: 0; }
.treatment-card + .treatment-card { border-left: 1px solid var(--color-border-subtle); }
.treatment-card:is(:hover,:focus-within) { background: var(--color-background-primary); }
.treatment-card:is(:hover,:focus-within) .button:not(:disabled) { text-decoration: underline; }
.treatment-card__number { font: 400 15px/normal var(--font-heading); color: var(--color-accent-plum); margin-bottom: 35px; }
.treatment-card h3 { margin-bottom: 14px; }
.treatment-card .supporting { flex: 1; margin-bottom: var(--space-5); }
.site-footer { padding: 70px 7vw 30px; background: var(--color-background-footer); color: var(--color-background-secondary); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; }
.site-footer .site-branding, .site-footer a { color: inherit; }
.footer-statement { font: 400 17px/1.5 var(--font-heading); max-width: 280px; margin: 16px 0 0; }
.footer-grid .small-heading { min-height: 24px; margin-bottom: 16px; }
.footer-grid p, .footer-grid address, .footer-grid li { font-size: 12px; line-height: normal; }
.footer-grid .footer-statement { font-size: 17px; line-height: 1.5; }
.footer-grid address { display: grid; gap: 16px; font-style: normal; }
.footer-grid address span { line-height: 2; }
.footer-grid ul { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.footer-grid p { margin-bottom: 16px; }
.footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 25px; border-top: 1px solid color-mix(in srgb,var(--color-action-text) 15%,transparent); padding-top: 15px; color: var(--color-text-footer-muted); font-size: 10px; }
.footer-legal p { margin: 0; }
.footer-legal nav { font-size: 0.875rem; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }

/* Homepage additions: exact page-03 section values, consuming the shared system. */
.primary-menu .menu-label { display: inline-block; padding-block: 8px; font-size: var(--font-size-navigation); line-height: normal; text-transform: uppercase; color: var(--color-text-secondary); }
.site-announcement { min-height: 34px; padding: 6px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-background-dark); color: var(--color-action-text); }
.site-announcement p { margin: 0; font-size: 10px; line-height: normal; letter-spacing: .15em; text-align: center; }
.site-announcement img { flex: 0 0 4px; width: 4px; height: 4px; }
.hero-trust > div + div { border-left: 1px solid var(--color-border-subtle); padding-left: 28px; }
.hero-trust dt { color: var(--color-text-primary); }
.hero-caption { color: var(--color-text-secondary); }
.component-treatments { padding: var(--section-space) 5.972222vw; background: var(--color-background-treatments); }
.treatments-heading { display: grid; grid-template-columns: minmax(0,745fr) minmax(0,375fr); gap: 80px; max-width: 1200px; align-items: end; margin-bottom: 62px; }
.treatments-heading .eyebrow { margin-bottom: 12px; }
.treatments-heading .component-heading { margin-bottom: 0; }
.treatments-heading .component-heading em { margin-top: 12px; }
.treatments-heading > p { margin-bottom: 0; line-height: 1.5; }
.component-treatments > .component-actions { justify-content: center; margin-top: var(--space-7); }
.component-testimonial { display: flex; flex-direction: column; align-items: center; padding: 110px 12.5vw; background: var(--color-background-testimonial); color: var(--color-action-text); text-align: center; }
.testimonial-mark { color: var(--color-testimonial-mark); font: 400 95px/.4 var(--font-heading); margin-bottom: 30px; }
.component-testimonial figure { margin: 0; max-width: 984px; }
.component-testimonial blockquote { margin: 0; font: 400 48px/1.25 var(--font-heading); }
.component-testimonial blockquote p { margin: 0; }
.component-testimonial figcaption { margin-top: var(--space-5); font-size: 10px; line-height: normal; letter-spacing: .14em; }
.testimonial-dots { display: flex; gap: 8px; margin-top: 38px; }
.testimonial-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--color-testimonial-dot); }
.testimonial-dots span:first-child { width: 20px; background: var(--color-action-text); }
.component-booking { padding: 105px var(--page-gutter); background: var(--color-background-dark); text-align: center; color: var(--color-action-text); }
.component-booking .eyebrow { margin-bottom: 20px; color: var(--color-booking-eyebrow); }
.component-booking .component-heading { color: var(--color-action-text); margin-bottom: 26px; }
.component-booking .component-heading em { color: var(--color-booking-emphasis); }
.component-booking .body-editorial { max-width: 650px; margin: 0 auto 32px; line-height: 1.5; }
.component-booking .component-actions { justify-content: center; gap: 32px; }
.button--inverse.button--primary { background: var(--color-action-text); color: var(--color-action-primary); }
.button--inverse.button--primary:is(:hover,:active) { background: var(--color-background-secondary); }
/* Pending destinations use real disabled buttons; retain their approved variant colours. */
.button:disabled { opacity: 1; }
.button:disabled:hover { text-decoration: none; }
.button--inverse.button--primary:disabled:is(:hover,:active) { background: var(--color-action-text); }

/* Testimonial enhancement reserves the tallest quote's natural height. */
.testimonial-slides { width: 100%; max-width: 984px; }
.testimonial-slides .testimonial-slide + .testimonial-slide { margin-top: var(--space-6); }
.is-slider .testimonial-slides { display: grid; }
.is-slider .testimonial-slides .testimonial-slide { grid-area: 1 / 1; width: 100%; margin: 0; opacity: 0; visibility: hidden; transition: opacity 350ms ease, visibility 0s linear 350ms; }
.is-slider .testimonial-slides .testimonial-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.testimonial-controls { display: flex; flex-direction: column; align-items: center; margin-top: 25px; gap: 8px; }
.testimonial-controls .testimonial-dots { margin: 0; gap: 0; }
.testimonial-controls button { background: transparent; border: 0; color: var(--color-action-text); min-height: 32px; padding: 0; box-shadow: none; transform: none; }
.testimonial-controls button:is(:hover, :active) { background: transparent; border: 0; color: var(--color-action-text); }
.testimonial-controls .testimonial-dot { width: 32px; }
.testimonial-controls .testimonial-dot span { width: 6px; height: 6px; background: var(--color-testimonial-dot); }
.testimonial-controls .testimonial-dot[aria-current="true"] span { width: 20px; background: var(--color-action-text); }
.testimonial-controls .testimonial-playback { width: 32px; height: 32px; }
.testimonial-playback svg { width: 12px; height: 12px; fill: currentColor; }
.testimonial-playback .testimonial-play-icon { display: none; }
.testimonial-playback[data-user-paused="true"] .testimonial-pause-icon { display: none; }
.testimonial-playback[data-user-paused="true"] .testimonial-play-icon { display: block; }
@media (prefers-reduced-motion: reduce) {
 .is-slider .testimonial-slides .testimonial-slide { transition: none; }
}

/* About page — Figma 05 About. Shared colours, type families and heading states remain canonical. */
.about-page .component-heading { margin-bottom: 0; }
.about-story h2 em, .care-principles h2 em, .editorial-media h2 em { display: inline; }
.about-intro { padding: 112px var(--page-gutter) 104px; overflow: clip; }
.about-intro-inner { position: relative; }
.about-intro-copy { max-width: 980px; position: relative; z-index: 1; }
.about-intro .eyebrow { margin-bottom: var(--space-6); }
.about-intro-row { display: grid; grid-template-columns: 310fr 550fr; gap: 70px; max-width: 930px; margin-top: var(--space-6); padding-top: var(--space-3); }
.about-intro-rule { margin-top: 14px; height: 1px; background: var(--color-accent-plum); opacity: .72; }
.about-intro-lead { font: 400 23px/1.52 var(--font-heading); color: #40443f; margin: 0 0 38px; }
.about-intro .component-actions { gap: 16px; }
.about-mark { position: absolute; width: 254px; height: 254px; right: -21px; top: -38px; }
.about-flourish { position: absolute; width: 128px; height: 1px; right: -71px; top: -7px; transform: rotate(-59deg); transform-origin: left center; }
.about-signature { position: absolute; right: 0; bottom: -4px; margin: 0; font: italic 500 22px/normal var(--font-heading); color: var(--color-accent-plum); }
.about-story { display: grid; grid-template-columns: 442fr 610fr; gap: 10.9722vw; padding: 128px var(--page-gutter); background: var(--color-background-secondary); }
.about-story-aside .eyebrow { margin-bottom: 23px; }
.about-story blockquote { max-width: 390px; margin: 0; padding: 6px 0 0 28px; border-left: var(--border-width) solid var(--color-accent-plum); font: 400 31px/1.23 var(--font-heading); color: var(--color-accent-plum); }
.about-body { font: 400 var(--font-size-editorial)/1.72 var(--font-body); color: #454943; }
.about-story-copy .about-body { margin-top: 28px; }
.about-paragraph { margin: 0; }
.about-paragraph + .about-paragraph { margin-top: var(--space-5); }
.care-principles { padding: var(--section-space) 5.9722vw; background: var(--color-background-treatments); }
.care-principles-heading { display: grid; grid-template-columns: 752fr 426fr; gap: 6.25vw; align-items: end; margin-bottom: 62px; }
.care-principles .eyebrow { margin-bottom: 23px; }
.care-principles-intro { margin: 0; font-size: var(--font-size-supporting); line-height: 1.75; color: #454943; }
.care-principles-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: var(--border-width) solid var(--color-border-subtle); }
.care-principles-grid li { padding: 34px 34px 40px; }
.care-principles-grid li + li { border-left: var(--border-width) solid var(--color-border-subtle); }
.care-principle-number { display: block; margin-bottom: 46px; font: 400 var(--font-size-editorial)/normal var(--font-heading); color: var(--color-accent-plum); }
.care-principles-grid h3 { font-size: 31px; line-height: 1.05; margin-bottom: 16px; }
.care-principles-grid p { font-size: 15px; line-height: 1.7; color: #454943; margin: 0; }
.editorial-media { display: grid; gap: var(--layout-column-gap); align-items: center; padding: 132px var(--page-gutter); }
.editorial-media--collage { grid-template-columns: 544fr 522fr; }
.editorial-copy .eyebrow { margin-bottom: 23px; }
.editorial-copy .about-body { margin-top: 28px; }
.editorial-copy .about-paragraph + .about-paragraph { margin-top: 16px; }
.editorial-media--collage .about-body { line-height: 1.7; }
.editorial-copy blockquote { font: 400 27px/1.34 var(--font-heading); color: var(--color-accent-plum); padding: 0; margin: 34px 0 0; }
.editorial-copy .credentials { margin: 36px 0 0; gap: 9px; }
.editorial-collage { position: relative; aspect-ratio: 544 / 650; }
.editorial-collage-primary { position: absolute; inset: 0 auto auto 0; width: 75.9191%; height: 88%; border: var(--border-width) solid var(--color-border-subtle); }
.editorial-collage-secondary { position: absolute; left: 57.9044%; top: 56%; width: 42.0956%; height: 44%; border: 10px solid var(--color-background-primary); }
.editorial-media .component-image { width: 100%; height: 100%; object-fit: cover; }
.editorial-collage-secondary .component-image { object-position: 92.33% center; }
.editorial-media--setting { grid-template-columns: 437fr 629fr; padding-block: 122px; background: var(--color-background-secondary); }
.editorial-copy .component-actions { margin-top: 32px; }
.editorial-setting-media { position: relative; aspect-ratio: 629 / 560; }
.editorial-setting-media > .component-image { object-position: right center; }
.editorial-appointments { position: absolute; left: -52px; bottom: 90px; width: 250px; padding: 25px 30px; background: var(--color-background-primary); }
.editorial-appointments > p { font-size: 10px; line-height: normal; letter-spacing: .14em; color: var(--color-accent-plum); margin: 0 0 26px; }
.editorial-appointments dl { margin: 0; font-family: var(--font-heading); }
.editorial-appointments dl > div { display: flex; gap: 11px; align-items: baseline; }
.editorial-appointments dl > div + div { margin-top: 26px; }
.editorial-appointments dt { font-size: 17px; line-height: normal; }
.editorial-appointments dd { margin: 0; font-size: 15px; line-height: normal; }
.about-story > *, .editorial-media > *, .care-principles-heading > *, .about-intro-row > * { min-width: 0; }

/* Treatments — Figma 04. Native content, shared tokens and discrete heading sizes. */
.button--inverse.button--secondary, .button--inverse.button--secondary:visited { color: var(--color-action-text); border-color: var(--color-action-text); }
.button--inverse.button--secondary:is(:hover, :active) { background: var(--color-action-primary); color: var(--color-action-text); border-color: var(--color-action-primary); }
.treatment-intro { display: grid; grid-template-columns: 709fr 401fr; gap: 6.9444vw; align-items: end; padding: 108px var(--page-gutter) 96px; }
.treatment-intro .eyebrow { margin-bottom: var(--space-5); }
.treatment-intro .component-heading, .treatment-group .component-heading, .treatment-guide .component-heading { margin: 0; }
.treatment-intro-side { padding-bottom: 10px; }
.treatment-intro-side > p { font: 400 22px/1.45 var(--font-heading); color: #4b4e49; margin: 0 0 28px; }
.treatment-category-nav { background: var(--color-background-dark); padding-inline: var(--page-gutter); }
.treatment-category-nav ul { display: flex; list-style: none; padding: 0; margin: 0; }
.treatment-category-nav li { flex: 1; min-width: 0; }
.treatment-category-nav a, .treatment-category-nav a:visited { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--color-action-text); padding: 25px 18px; border-right: 1px solid rgb(255 255 255 / .18); text-decoration: none; }
.treatment-category-nav li:first-child a { border-left: 1px solid rgb(255 255 255 / .18); }
.treatment-category-nav a:hover { text-decoration: underline; }
.treatment-category-nav a:focus-visible { outline-offset: -6px; }
.treatment-category-nav a span:first-child { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.treatment-category-nav a span:last-child { font: 500 17px/normal var(--font-heading); color: #d7c3cd; }
.treatment-group { padding: 112px var(--page-gutter); scroll-margin-top: var(--space-5); }
.treatment-group--face-head { background: var(--color-background-secondary); }
.treatment-group--reflexology { background: var(--color-background-treatments); }
.treatment-group-heading { display: grid; grid-template-columns: 367fr 763fr; gap: 5.5556vw; align-items: end; padding-bottom: 42px; border-bottom: var(--border-width) solid var(--color-border-subtle); }
.treatment-group-number { font: 500 20px/normal var(--font-heading); color: var(--color-accent-plum); margin: 0 0 18px; }
.treatment-group-heading .eyebrow { margin-bottom: var(--space-5); }
.treatment-group .component-heading em, .treatment-guide .component-heading em { display: inline; }
.treatment-group-intro { margin: 0; max-width: 563px; justify-self: end; font-size: var(--font-size-supporting); line-height: 1.7; color: #4b4e49; }
.treatment-group--face-head .treatment-group-intro { max-width: none; }
.treatment-list { list-style: none; padding: 0; margin: 0; border-bottom: var(--border-width) solid var(--color-border-subtle); }
.treatment-list-item { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 70px; padding-block: 34px; }
.treatment-list-item + .treatment-list-item { border-top: 1px solid rgb(169 181 161 / .62); }
.treatment-list-copy h3 { font-size: 27px; line-height: 1.05; margin: 0 0 var(--space-3); }
.treatment-description { font-size: 15px; line-height: 1.7; color: #4b4e49; }
.treatment-description > :first-child { margin-top: 0; }
.treatment-description > :last-child { margin-bottom: 0; }
.treatment-options { margin: 0; padding-top: 5px; }
.treatment-options > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: baseline; }
.treatment-options dt { font: 400 12px/1.5 var(--font-body); color: #5d625c; }
.treatment-options dd { font: 500 20px/normal var(--font-heading); color: var(--color-text-primary); text-align: right; margin: 0; }
.treatment-options--pairs { display: none; }
.treatment-guide { display: grid; grid-template-columns: 500fr 611fr; gap: 6.9444vw; align-items: center; padding: 82px var(--page-gutter); background: var(--color-background-testimonial); }
.treatment-guide .eyebrow { color: #eadde4; margin-bottom: var(--space-5); }
.treatment-guide .component-heading { color: var(--color-action-text); }
.treatment-guide .component-heading em { color: #f0dfe7; }
.treatment-guide-copy { margin: 0 0 14px; max-width: 570px; font-size: 17px; line-height: 1.7; color: #f7eef3; }
.treatment-intro > *, .treatment-group-heading > *, .treatment-guide > * { min-width: 0; }

/* Visit page — Figma 1:8. Variants preserve the existing Homepage Visit bridge. */
.component-visit--hero { grid-template-columns: minmax(0,580fr) minmax(0,530fr); gap: 6.9444vw; align-items: center; padding-block: 104px 100px; }
.component-visit--hero .eyebrow { margin-bottom: var(--space-5); }
.component-visit--hero .component-heading { margin-bottom: 32px; }
.component-visit--hero .body-editorial { font-size: 22px; line-height: 1.45; margin: 0; color: #4b4e47; }
.component-visit--hero .visit-picture { aspect-ratio: 530 / 555; position: relative; overflow: hidden; }
.component-visit--hero .visit-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% top; }
.component-visit--hero .visit-media { position: relative; }
.visit-appointments { bottom: 26px; }
.visit-appointments dl > div { flex-wrap: wrap; row-gap: var(--space-1); }
.visit-appointments dt, .visit-appointments dd { white-space: nowrap; }
.component-visit--hero .component-actions { gap: 16px; }
.component-visit--arrival { grid-template-columns: minmax(0,490fr) minmax(0,576fr); align-items: center; padding-block: 122px; background: var(--color-background-treatments); }
.component-visit--arrival .eyebrow { margin-bottom: var(--space-6); }
.component-visit--arrival .component-heading { margin-bottom: var(--space-6); }
.component-visit--arrival .body-editorial { line-height: 1.72; margin: 0 0 var(--space-6); color: #484c47; }
.component-visit--arrival .visit-picture { aspect-ratio: 576 / 590; overflow: hidden; position: relative; }
.component-visit--arrival .visit-picture img { position: absolute; width: 136.51%; max-width: none; height: 100%; left: -24.64%; object-fit: fill; }
.visit-steps { list-style: none; padding: 0; margin: 0; border-top: var(--border-width) solid var(--color-border-subtle); }
.visit-steps li { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: var(--space-4); padding-block: var(--space-4); border-bottom: var(--border-width) solid var(--color-border-subtle); }
.visit-steps span { color: var(--color-accent-plum); font: 500 17px/normal var(--font-heading); }
.visit-steps p { margin: 0; font-size: 15px; line-height: 1.55; }
.visit-details { padding: 120px var(--page-gutter); }
.visit-details-heading { display: grid; grid-template-columns: minmax(0,672fr) minmax(0,448fr); gap: 6.25vw; align-items: end; margin-bottom: 58px; }
.visit-details-heading .eyebrow, .visit-access .eyebrow { margin-bottom: var(--space-5); }
.visit-details-heading .component-heading, .visit-access .component-heading { margin: 0; }
.visit-details-heading > p { font-size: 16px; line-height: 1.72; color: #484c47; margin: 0; }
.visit-info-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: var(--border-width) solid var(--color-border-subtle); }
.visit-info { padding: 36px 32px 40px; }
.visit-info + .visit-info { border-left: var(--border-width) solid var(--color-border-subtle); }
.visit-info-number { display: block; font: 500 18px/normal var(--font-heading); color: var(--color-accent-plum); margin-bottom: 42px; }
.visit-info h3 { line-height: 1.08; margin: 0 0 14px; }
.visit-info address, .visit-info p, .visit-info dl { font-style: normal; font-size: 15px; line-height: 1.55; margin: 0; }
.visit-info dd { margin: 0; }
.visit-info dl > div + div { margin-top: 16px; }
.visit-info .component-actions { margin-top: 14px; }
.visit-access { padding: 112px var(--page-gutter); display: grid; grid-template-columns: minmax(0,400fr) minmax(0,666fr); gap: var(--layout-column-gap); }
.visit-access .component-heading { font-size: 48px; line-height: 1; }
.visit-access-intro { font: 400 var(--font-size-editorial)/1.72 var(--font-heading); max-width: 590px; color: #484c47; margin: 0 0 var(--space-5); }
.visit-access-list { list-style: none; padding: 0; margin: 0; border-top: var(--border-width) solid var(--color-border-subtle); }
.visit-access-list li { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 18px; padding-block: 22px; }
.visit-access-list li + li { border-top: var(--border-width) solid var(--color-border-subtle); }
.visit-access-list img { margin: 4px 3.5px 0; }
.visit-access-list h3 { font: 700 11px/normal var(--font-body); letter-spacing: .08em; color: var(--color-text-secondary); margin: 0 0 7px; }
.visit-access-list p { font-size: 14px; line-height: 1.55; margin: 0; }
.visit-contact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--layout-column-gap); padding: 112px var(--page-gutter); background: var(--color-background-secondary); scroll-margin-top: var(--space-5); }
.visit-contact-card { border-top: var(--border-width) solid var(--color-accent-plum); padding-top: 28px; }
.visit-contact-card .eyebrow { margin-bottom: 16px; }
.visit-contact-card h2 { font-size: 34px; line-height: 1.08; letter-spacing: 0; margin-bottom: var(--space-5); }
.visit-contact-card > p:not(.eyebrow) { font-size: 16px; line-height: 1.72; max-width: 500px; color: #484c47; }
.visit-contact-lines { display: flex; flex-direction: column; align-items: start; gap: 14px; font: 500 21px/normal var(--font-heading); }
.visit-contact-lines a { max-width: 100%; }
.visit-contact-card address { margin-top: var(--space-5); font-style: normal; font-size: 13px; line-height: 1.55; color: #686d67; }
.component-visit--hero > *, .component-visit--arrival > *, .visit-contact > *, .visit-access > * { min-width: 0; }

/* FAQ disclosures: page-scoped layout with native keyboard and open state. */
.faq-intro { display: grid; grid-template-columns: minmax(0,589fr) minmax(0,501fr); align-items: end; gap: 8.3333vw; padding: 112px var(--page-gutter) 100px; }
.faq-intro .eyebrow { margin-bottom: 23px; }
.faq-intro-copy { font-size: 18px; line-height: 1.65; color: #555956; margin: 0; }
.faq-category-nav { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 44px var(--page-gutter); border-block: 1px solid var(--color-background-tint); }
.faq-category-nav > p { margin: 0; font-family: var(--font-heading); font-size: 24px; }
.faq-category-nav ul { display: flex; flex-wrap: wrap; gap: 20px 26px; padding: 0; margin: 0; list-style: none; }
.faq-category-nav a { display: inline-block; padding-block: 5px; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-decoration-color: var(--color-accent-plum); text-underline-offset: 6px; }
.faq-group { display: grid; grid-template-columns: minmax(0,330fr) minmax(0,784fr); gap: 6.6667vw; padding: 108px var(--page-gutter) 116px; scroll-margin-top: 24px; }
.faq-group:nth-of-type(odd) { background: var(--color-background-secondary); }
.faq-side .eyebrow { margin-bottom: 24px; }
#faq-booking .faq-side .eyebrow { margin-bottom: 58px; }
.faq-side .component-heading { font-size: 47px; line-height: 1; letter-spacing: -.03em; margin-bottom: 15px; }
.faq-side .component-heading em { display: inline; }
.faq-group-intro { max-width: 290px; font-size: 14px; line-height: 1.7; color: #656964; margin: 0; }
.faq-side .component-actions { margin-top: 28px; }
.faq-group-content { min-width: 0; }
.faq-group-content > .component-actions { margin-top: 32px; }
.faq-list { padding: 0; margin: 0; list-style: none; }
.faq-row { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 24px; }
.faq-number { padding-top: 30px; font-size: 9px; font-weight: 600; letter-spacing: .12em; color: var(--color-accent-plum); }
.faq-item { min-width: 0; background: var(--color-background-primary); border-block: 1px solid var(--color-border-subtle); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-question { font-family: var(--font-heading); font-size: 22px; font-weight: 500; line-height: 1.3; }
.faq-indicator { position: relative; flex: 0 0 20px; }
.faq-indicator img { display: block; width: 20px; height: 20px; }
.faq-indicator .faq-plus { position: absolute; inset: 0; transform: rotate(90deg); }
.faq-item[open] .faq-plus { display: none; }
.faq-item[open] .faq-minus { display: block; }
.faq-answer { padding: 0 40px 28px 0; font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.75; color: #5c615d; }
.faq-answer p { margin: 0; }

/* Calm, compact recovery layout using the shared controls and typography. */
.not-found { background: var(--color-background-secondary); }
.not-found__inner { max-width: var(--layout-content); margin-inline: auto; }
.not-found h1 { max-width: 15ch; font-size: clamp(2.625rem, 5vw, 4.25rem); line-height: 1.05; }
.not-found .body-editorial { max-width: var(--layout-lead); }
.not-found .component-actions { margin-top: var(--space-6); }