/* Figma Foundations 23:140: composition shifts at 900px / 520px.
 * Sizes checked against approved 768px and 390px specimens on page 03.
 * Interpolation between documented sizes is deferred rather than invented. */
@media (max-width: 900px) {
  :root { --font-size-h1: 3.875rem; --font-size-h2: 2.625rem; --page-gutter: var(--page-gutter-mobile); --section-space: var(--section-space-mobile); }
}
@media (max-width: 520px) {
  :root { --font-size-h1: 3.625rem; --line-height-h1: 0.9; --font-size-h2: 2.75rem; --line-height-h2: 0.98; }
  /* Lead retains the locked 20px Foundations style. */
}
/* Respect the visitor’s reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Measured Homepage instances; accepted 900px/520px breakpoints. */
@media (max-width: 900px) {
 /* Avoid an expanded-menu first paint; no-JS navigation stays visible. */
 .js .site-header #primary-navigation:not([data-navigation-ready]) { display: none; }
 .site-header { flex-wrap: wrap; min-height: 76px; padding: 0 22px; gap: 0; justify-content: space-between; }
 .menu-toggle { margin-block: 16px; }
 .site-header nav { flex: 1 0 100%; flex-direction: column; align-items: stretch; padding: 26px; background: var(--color-background-primary); gap: 20px; }
 .primary-menu { flex-direction: column; align-items: stretch; gap: 8px; }
 .primary-menu a, .primary-menu .menu-label { min-height: 24px; letter-spacing: .04em; }
 .site-header nav > .button { align-self: start; }
 .component-hero, .component-approach, .component-meet, .component-visit { grid-template-columns: minmax(0,1fr); }
 .component-hero__copy { padding: 82px 48px 60px; }
 .component-hero .lead { max-width: none; }
 .component-hero .component-heading { width: auto; }
 .component-hero__media { min-height: 0; grid-template-columns: 48px minmax(0,1fr) 48px; grid-template-rows: auto; }
 .hero-picture { margin-block: 48px; min-height: 0; aspect-ratio: 672/620; }
 .hero-caption { grid-column: 2; grid-row: 1; align-self: end; width: 238px; margin: 48px 30px 78px; padding: 34px 32px; font-size: 15px; line-height: 1.45; }
 .hero-caption::before { width: 40px; margin-bottom: 18px; }
 .hero-icon { width: 48px; height: 48px; top: 75px; right: 24px; }
 .component-approach { padding: 120px 20px; gap: 36px; }
 .component-approach .eyebrow { margin-bottom: 20px; }
 .approach-copy .component-actions { margin-top: 8px; }
 .component-treatments { padding: 120px 20px; }
 .treatments-heading { grid-template-columns: minmax(0,1fr); gap: 24px; margin-bottom: 56px; }
 .treatments-heading .eyebrow { margin-bottom: 20px; }
 .treatments-heading .component-heading em { margin-top: 0; }
 .component-treatments > .component-actions { margin-top: 42px; }
 .treatment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .treatment-card:nth-child(odd) { border-left: 0; }
 .treatment-card:nth-child(n+3) { border-top: 1px solid var(--color-border-subtle); }
 .component-meet, .component-visit { padding: 130px 20px; gap: 60px; }
 .meet-copy .eyebrow, .visit-copy .eyebrow { margin-bottom: 20px; }
 .meet-collage { max-width: none; width: 100%; aspect-ratio: 728/547; grid-template-columns: 15.65934% 38.18681% 11.26374% 19.23077% 15.65934%; grid-template-rows: 49.36015% 50.63985%; }
 .meet-primary { grid-column: 2/4; height: 80.43876%; }
 .meet-secondary { grid-column: 3/5; border-width: 16px; }
 .component-testimonial { padding-inline: 60px; }
 .visit-media { width: 100%; }
 .visit-picture { aspect-ratio: 728/520; }
 .visit-hours { width: 150px; min-height: 187px; margin: 0 24px 24px; padding: 25px; }
 .visit-hours .small-heading { margin-bottom: 23px; }
 .visit-hours dl > div + div { margin-top: 20px; }
 .visit-hours dd { margin-top: 2px; }
 .component-booking { padding-inline: 20px; }
 .component-booking .body-editorial { max-width: 560px; }
 .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; }
}
@media (max-width: 520px) {
 .site-announcement { min-height: 30px; padding-inline: 14px; justify-content: center; }
 .site-announcement p { font-size: 7px; letter-spacing: .12em; }
 .site-announcement img { display: none; }
 .component-hero__copy { padding: 64px 20px 48px; }
 .component-hero .component-heading { margin-bottom: 26px; }
 .component-hero .component-actions { flex-direction: column; align-items: stretch; gap: 12px; }
 .component-hero__media { grid-template-columns: 18px minmax(0,1fr) 18px; }
 .hero-picture { margin-block: 18px; aspect-ratio: 354/490; }
 .hero-caption { width: auto; margin: 18px 16px 34px; padding: 24px; }
 .hero-icon { width: 16px; height: 16px; top: 37px; right: 10px; }
 .hero-trust { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; margin-top: 42px; }
 .hero-trust > div { gap: 5px; }
 .hero-trust > div + div { border-left: 0; padding-left: 0; }
 .hero-trust > div:nth-child(3) { grid-column: 1/-1; border-top: 1px solid var(--color-border-subtle); padding-top: 20px; }
 .component-approach, .component-treatments, .component-meet, .component-visit { padding: 80px 18px; }
 .treatments-heading { margin-bottom: 40px; }
 .component-treatments > .component-actions { margin-top: 40px; }
 .treatment-grid { grid-template-columns: minmax(0,1fr); }
 .treatment-card + .treatment-card { border-left: 0; border-top: 1px solid var(--color-border-subtle); }
 .component-meet, .component-visit { gap: 48px; }
 .meet-collage { aspect-ratio: 354/460; grid-template-columns: 1.41243% 46.89266% 40.67797% 9.32203% 1.69491%; grid-template-rows: 54.56522% 45.43478%; }
 .meet-primary { height: 82.6087%; }
 .meet-secondary { border-width: 6px; }
 .component-testimonial { padding-inline: 24px; }
 .component-testimonial blockquote { font-size: 28px; }
 .visit-picture { aspect-ratio: 354/450; }
 .visit-hours { width: calc(100% - 28px); margin: 0 14px 14px; }
 .component-booking { padding: 80px 18px; }
 .component-booking .component-actions { flex-direction: column; align-items: stretch; gap: 12px; }
 .site-footer { padding: 56px 18px 32px; }
 .footer-grid { grid-template-columns: minmax(0,1fr); }
 .footer-legal { flex-direction: column; gap: 12px; margin-top: 36px; padding-top: 20px; }
}

/* Keep the signature clear of the CTA row before the stacked About layout. */
@media (min-width: 901px) and (max-width: 1200px) {
 .about-signature { position: static; margin-top: var(--space-6); text-align: right; }
}

/* About compositions follow the existing discrete 900px / 520px states. */
@media (max-width: 900px) {
 .about-page h2 em { display: block; }
 .about-intro { padding: 88px 20px; }
 .about-intro .eyebrow { margin-bottom: 28px; }
 .about-intro-row { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; padding: 0; }
 .about-intro-rule { width: 70px; margin: 0; }
 .about-intro-lead { margin-bottom: 32px; }
 .about-mark, .about-flourish { display: none; }
 .about-signature { position: static; margin-top: var(--space-6); text-align: right; font-size: 20px; }
 .about-story { grid-template-columns: minmax(0, 1fr); padding: 90px 20px; gap: 56px; }
 .about-story-aside .eyebrow { margin-bottom: var(--space-5); }
 .about-story blockquote { max-width: none; font-size: 29px; padding-top: 0; }
 .about-story .about-body { max-width: 620px; }
 .care-principles { padding: 90px 20px; }
 .care-principles-heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-bottom: 50px; }
 .care-principles .eyebrow { margin-bottom: var(--space-4); }
 .care-principles-grid { grid-template-columns: minmax(0, 1fr); }
 .care-principles-grid li { padding: 40px 0; }
 .care-principles-grid li + li { border-left: 0; border-top: var(--border-width) solid var(--color-border-subtle); }
 .care-principle-number { margin-bottom: 44px; }
 .care-principles-grid h3 { font-size: 27px; margin-bottom: var(--space-3); }
 .editorial-media { grid-template-columns: minmax(0, 1fr); padding: 90px 20px; gap: 60px; }
 .editorial-copy .eyebrow { margin-bottom: var(--space-4); }
 .editorial-copy .about-body { margin-top: var(--space-5); }
 .editorial-copy blockquote { margin-top: 28px; font-size: 26px; }
 .editorial-copy .credentials { margin-top: 28px; gap: 13px; }
 .editorial-collage { aspect-ratio: 728 / 580; }
 .editorial-collage-primary { left: 12.7747%; width: 57.6923%; height: 86.2069%; border: 0; }
 .editorial-collage-secondary { left: 56.044%; top: 55.8621%; width: 31.044%; height: 44.1379%; border-width: 8px; }
 .editorial-setting-media { aspect-ratio: 728 / 500; }
 .editorial-appointments { left: 22px; bottom: 24px; padding: 25px; }
 .editorial-appointments > p { margin-bottom: 8px; }
 .editorial-appointments dl > div + div { margin-top: 8px; }
}
@media (max-width: 520px) {
 .about-intro { padding: 68px 18px; }
 .about-intro-row { margin-top: 34px; }
 .about-intro-rule { width: 56px; }
 .about-intro-lead { font-size: 21px; margin-bottom: 26px; }
 .about-intro .component-actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
 .about-signature { display: none; }
 .about-story, .care-principles, .editorial-media { padding: 80px 18px; }
 .about-story, .editorial-media { gap: var(--space-7); }
 .about-story blockquote { font-size: 27px; }
 .care-principles-heading { margin-bottom: 40px; }
 .care-principles-grid li { padding-block: 32px; }
 .editorial-copy blockquote { font-size: 24px; }
 .editorial-collage { aspect-ratio: 354 / 430; }
 .editorial-collage-primary { left: 3.1073%; width: 84.7458%; height: 81.3953%; }
 .editorial-collage-secondary { left: 51.1299%; top: 56.7442%; width: 45.7627%; height: 42.3256%; border-width: 6px; }
 .editorial-setting-media { aspect-ratio: 354 / 410; }
 .editorial-appointments { left: 14px; bottom: 14px; width: calc(100% - 28px); }
}

/* Treatments: tablet stacks copy; mobile pairs each duration with its price. */
@media (max-width: 900px) {
 .treatment-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 80px 20px 56px; }
 .treatment-intro .eyebrow { margin-bottom: var(--space-4); }
 .treatment-intro-side { padding: 0; }
 .treatment-intro-side > p { font-size: var(--font-size-lead); line-height: normal; }
 .treatment-category-nav { padding-inline: 20px; }
 .treatment-category-nav a { padding: 22px 14px; }
 .treatment-group { padding: 90px 20px; }
 .treatment-group-heading { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 40px; }
 .treatment-group-number { font-size: var(--font-size-editorial); margin-bottom: 14px; }
 .treatment-group-heading .eyebrow { margin-bottom: 16px; }
 .treatment-group .component-heading em, .treatment-guide .component-heading em { display: block; }
 .treatment-group-intro { justify-self: start; max-width: none; font-size: 15px; }
 .treatment-list-item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 28px; }
 .treatment-list-copy h3 { margin-bottom: var(--space-2); line-height: normal; }
 .treatment-description, .treatment-group-intro, .treatment-guide-copy { line-height: normal; }
 .treatment-options { padding: 0; }
 .treatment-options--compact > div { display: flex; gap: var(--space-5); }
 .treatment-guide { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 72px 20px; }
 .treatment-guide .eyebrow { margin-bottom: var(--space-4); }
 .treatment-guide-copy { max-width: none; font-size: 15px; margin-bottom: var(--space-6); }
}
@media (max-width: 520px) {
 .treatment-intro { padding: 64px 18px 48px; }
 .treatment-intro-side > p { font-size: var(--font-size-editorial); }
 .treatment-category-nav { padding: 0; overflow-x: auto; }
 .treatment-category-nav ul { width: max-content; min-width: 100%; }
 .treatment-category-nav li { flex: 0 0 auto; }
 .treatment-category-nav a { padding: 20px 18px; }
 .treatment-group { padding: 72px 18px; }
 .treatment-group-heading { gap: 16px; padding-bottom: 32px; }
 .treatment-group-number { margin-bottom: var(--space-3); }
 .treatment-group-heading .eyebrow { margin-bottom: 14px; }
 .treatment-list-item { padding-block: var(--space-5); gap: var(--space-4); }
 .treatment-list-copy h3 { margin-bottom: 6px; }
 .treatment-options--compact { display: none; }
 .treatment-options--pairs { display: block; }
 .treatment-options--pairs > div + div { margin-top: 6px; }
 .treatment-guide { padding: 56px 18px; gap: var(--space-5); }
 .treatment-guide-copy { margin-bottom: 26px; }
}

/* Keep compact treatment values intact without changing mobile price pairs. */
@media (min-width: 901px) {
 .treatment-list-item { grid-template-columns: minmax(0, 1fr) 320px; }
 .treatment-options--compact > div { grid-template-columns: minmax(0, 1fr) max-content; }
}
@media (min-width: 521px) {
 .treatment-options--compact dt, .treatment-options--compact dd { white-space: nowrap; }
}

/* Visit keeps the accepted discrete shared heading sizes and breakpoints. */
@media (max-width: 900px) {
 .component-visit--hero { grid-template-columns: minmax(0,1fr); padding: 80px 20px 64px; gap: 40px; }
 .component-visit--hero .eyebrow { margin-bottom: var(--space-4); }
 .component-visit--hero .component-heading { margin-bottom: var(--space-5); }
 .component-visit--hero .body-editorial { font-size: var(--font-size-lead); line-height: normal; }
 .component-visit--hero .component-actions { margin-top: 28px; }
 .component-visit--hero .visit-picture { aspect-ratio: 728 / 480; }
 .visit-appointments { left: 24px; bottom: 14px; width: 181px; padding: 22px 24px; }
 .visit-appointments > p { margin-bottom: 26px; }
 .visit-appointments dl > div + div { margin-top: 26px; }
 .component-visit--arrival { grid-template-columns: minmax(0,1fr); padding: 90px 20px; gap: 44px; }
 .component-visit--arrival .eyebrow { margin-bottom: 16px; }
 .component-visit--arrival .component-heading { margin-bottom: 18px; }
 .component-visit--arrival .body-editorial { font-size: 16px; line-height: normal; margin-bottom: 36px; }
 .component-visit--arrival .visit-picture { width: min(100%,520px); justify-self: center; aspect-ratio: 520 / 360; }
 .component-visit--arrival .visit-picture img { width: 100%; height: 108.383%; top: -4.215%; left: 0; }
 .visit-details { padding: 90px 20px; }
 .visit-details-heading { grid-template-columns: minmax(0,1fr); gap: 18px; margin-bottom: 44px; }
 .visit-details-heading .eyebrow, .visit-access .eyebrow { margin-bottom: 16px; }
 .visit-details-heading > p { font-size: 15px; line-height: normal; }
 .visit-info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 48px; border: 0; }
 .visit-info { padding: 0; }
 .visit-info + .visit-info { border: 0; }
 .visit-info:last-child { grid-column: 1 / -1; }
 .visit-info-number { margin-bottom: 46px; }
 .visit-info h3 { font-size: 24px; line-height: normal; margin-bottom: 40px; }
 .visit-info address, .visit-info p, .visit-info dl { line-height: normal; }
 .visit-info .component-actions { margin-top: 42px; }
 .visit-access { grid-template-columns: minmax(0,1fr); padding: 90px 20px; gap: 32px; }
 .visit-access .component-heading { font-size: 32px; line-height: normal; }
 .visit-access-intro { max-width: none; font-size: 16px; line-height: normal; margin-bottom: 32px; }
 .visit-contact { padding: 90px 20px; gap: 40px; }
 .visit-contact-card h2 { font-size: 28px; line-height: normal; }
 .visit-contact-card > p:not(.eyebrow) { line-height: 1.5; }
}
@media (max-width: 520px) {
 .component-visit--hero { padding: 64px 18px 48px; gap: 32px; }
 .component-visit--hero .body-editorial { font-size: var(--font-size-editorial); }
 .component-visit--hero .component-actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
 .component-visit--hero .visit-picture { aspect-ratio: 354 / 400; }
 .visit-appointments { left: 16px; bottom: 6px; width: 181px; }
 .component-visit--arrival, .visit-details, .visit-access, .visit-contact { padding: 72px 18px; }
 .component-visit--arrival { gap: 36px; }
 .component-visit--arrival .body-editorial { font-size: 15px; margin-bottom: 28px; }
 .component-visit--arrival .visit-picture { width: calc(100% - 12px); aspect-ratio: 342 / 260; }
 .component-visit--arrival .visit-picture img { width: 101.318%; height: 100%; top: 0; left: -.038%; }
 .visit-details-heading { margin-bottom: 40px; }
 .visit-info-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
 .visit-info { border-top: var(--border-width) solid var(--color-border-subtle); padding-top: 36px; }
 .visit-info + .visit-info { border-top: var(--border-width) solid var(--color-border-subtle); margin-top: 36px; }
 .visit-access { gap: 28px; }
 .visit-access .component-heading { font-size: 34px; }
 .visit-access-intro { font-size: 15px; margin-bottom: 28px; }
 .visit-contact { grid-template-columns: minmax(0,1fr); }
 .visit-contact-card h2 { font-size: 26px; }
}

@media (max-width: 900px) {
 .faq-intro { grid-template-columns: minmax(0,1fr); padding: 90px 20px; gap: 32px; }
 .faq-category-nav { flex-direction: column; align-items: flex-start; padding: 36px 20px; gap: 20px; }
 .faq-group { grid-template-columns: minmax(0,1fr); padding: 90px 20px; gap: 48px; }
 .faq-side .component-heading { font-size: 30px; line-height: normal; }
 .faq-side .eyebrow, #faq-booking .faq-side .eyebrow { margin-bottom: 16px; }
 .faq-group-intro { max-width: none; line-height: 1.5; }
}
@media (max-width: 520px) {
 .faq-intro { padding: 72px 18px; gap: 28px; }
 .faq-intro-copy { font-size: 16px; line-height: 1.5625; }
 .faq-category-nav { padding: 32px 18px; gap: 18px; }
 .faq-category-nav > p { font-size: 20px; }
 .faq-category-nav ul { gap: 18px 24px; }
 .faq-group { padding: 72px 18px; gap: 40px; }
 .faq-side .component-heading { font-size: 32px; }
 .faq-side .eyebrow, #faq-booking .faq-side .eyebrow { margin-bottom: 14px; }
}

/* Keep the desktop hero descender clear of the following italic line. */
@media (min-width: 901px) {
 .home .component-hero .component-heading > em { margin-top: .1em; }
}