/* Chloe v7 — grouped typography and a dedicated mobile composition. */
:root { --reading-width: 62ch; }
.wrap { max-width: 1200px; padding-inline: 48px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; padding-block: 42px 64px; }
.hero-copy { padding-bottom: 16px; }
.hero h1 { font-size: clamp(48px, 4.6vw, 64px); line-height: 1.12; letter-spacing: -.035em; margin-bottom: 24px; }
.hero-text { max-width: 47ch; font-size: 16px; line-height: 1.8; margin-bottom: 26px; }
.hero .overline { margin-bottom: 22px; }
.hero-photo { width: 100%; max-width: 460px; justify-self: end; }
.hero-arch { aspect-ratio: 931 / 1237; }
.hero-arch > img { object-position: 50% 50%; }
.hero-photo figcaption { display: grid; justify-content: start; align-items: start; gap: 4px; margin: 20px 4px 0; text-align: left; }
.hero-photo figcaption > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 14px; font-size: 30px; line-height: 1.25; }
.hero-photo figcaption b { display: inline; margin: 0; font-size: 13px; line-height: 1.6; }
.hero-photo figcaption small { display: block; margin: 0; max-width: none; text-align: left; font-size: 12px; line-height: 1.6; letter-spacing: 0; }
.section { padding-block: 84px; }
.about { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; }
.about-heading h2 { font-size: 52px; margin-bottom: 20px; }
.about-copy p { max-width: var(--reading-width); font-size: 16px; line-height: 1.8; }
.about-copy .about-lead { font-size: 27px; line-height: 1.5; }
.section-heading { display: block; max-width: 800px; margin-bottom: 34px; }
.section-heading h2 { max-width: 26ch; font-size: 48px; }
.section-heading > p { max-width: var(--reading-width); margin: 16px 0 0; font-size: 15px; line-height: 1.8; }
.section-heading .overline { margin-bottom: 16px; }
.clinic-gallery { gap: 30px 24px; }
.gallery-caption { padding-top: 12px; }
.contact-section { gap: 48px; padding-top: 12px; padding-bottom: 84px; }
.faq-section { gap: 48px; padding-top: 0; padding-bottom: 84px; }
.booking-heading h2 { font-size: 50px; }
.booking-heading p:not(.overline) { max-width: var(--reading-width); }
.hero-photo img, .photo-frame img { image-rendering: auto; }
@media (min-width: 1450px) { .hero-grid { gap: 48px; } .hero h1 { font-size: 64px; } }
@media (max-width: 1040px) {
  .wrap { padding-inline: 32px; }
  .hero-grid { gap: 32px; }
  .hero h1 { font-size: clamp(42px, 5.2vw, 54px); }
  .hero-text { font-size: 15px; }
  .hero-photo figcaption > span { font-size: 28px; gap: 4px 10px; }
  .about { gap: 32px; }
  .about-heading h2 { font-size: 46px; }
  .contact-section, .faq-section { gap: 32px; }
}
@media (max-width: 700px) {
  .wrap { padding-inline: 24px; }
  .section { padding-block: 60px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 28px 36px; }
  .hero h1 { font-size: clamp(42px, 11.8vw, 58px); line-height: 1.13; margin-bottom: 30px; }
  .hero .overline { margin-bottom: 17px; }
  .hero-photo { width: calc(100% - 20px); max-width: 440px; justify-self: center; margin: 0 8px 28px 12px; }
  .hero-photo figcaption { margin: 16px 2px 0; gap: 4px; }
  .hero-photo figcaption > span { font-size: 28px; gap: 4px 12px; }
  .hero-photo figcaption b { font-size: 12px; }
  .hero-photo figcaption small { font-size: 12px; max-width: none; }
  .hero-text { font-size: 15px; line-height: 1.8; max-width: none; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .about-heading h2 { font-size: 43px; margin-bottom: 16px; }
  .about-copy p { font-size: 15px; }
  .about-copy .about-lead { font-size: 25px; }
  .section-heading { margin-bottom: 28px; }
  .section-heading h2 { font-size: 39px; margin-bottom: 0; }
  .section-heading > p { font-size: 14px; margin-top: 16px; }
  .clinic-gallery { gap: 26px; }
  .booking-heading h2 { font-size: 42px; }
  .contact-section { padding-top: 0; padding-bottom: 60px; }
  .faq-section { padding-top: 0; padding-bottom: 60px; }
}
@media (max-width: 380px) {
  .wrap { padding-inline: 20px; }
  .hero h1 { font-size: 42px; }
  .hero-photo figcaption > span { font-size: 26px; }
  .hero-photo figcaption b { font-size: 11px; }
  .section-heading h2 { font-size: 36px; }
}

/* A single continuous background keeps mobile copy out of the desktop wave.
   Stacked step cards give every heading and paragraph the full reading width. */
@media (max-width: 700px) {
  .hero { background: var(--paper); }
  .hero .brand-wave { display: none; }
  .hero-grid { align-items: start; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 46px); line-height: 1.15; text-wrap: wrap; }
  .hero-photo { width: 100%; max-width: 440px; margin: 0 0 28px; }
  .hero-photo figcaption { margin-inline: 0; }
  .hero-text { margin-bottom: 24px; text-wrap: pretty; }
  .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .button { width: 100%; justify-content: space-between; padding-inline: 22px; }
  .hero-actions .plain-link { align-self: flex-start; }
  .hero-address { align-items: flex-start; gap: 8px; line-height: 1.6; }
  .hero-address svg { flex-shrink: 0; margin-top: 1px; }
  .visit-steps { gap: 16px; }
  .visit-steps article { display: block; padding: 24px; }
  .visit-steps article > div { min-width: 0; }
  .visit-steps .step-number { width: 36px; height: 36px; margin: 0 0 16px; font-size: 17px; }
  .visit-steps h3 { margin-bottom: 12px; font-size: 25px; line-height: 1.3; text-wrap: pretty; }
  .visit-steps p { font-size: 14px; line-height: 1.75; text-wrap: pretty; }
}
@media (max-width: 380px) {
  .visit-steps article { padding: 20px; }
  .visit-steps h3 { font-size: 23px; }
}