/* English copy is naturally longer than Chinese. Keep the original visual
   hierarchy while allowing each title to remain inside its own composition. */
html[lang="en"] :is(h1, h2, h3) {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Homepage — compact the display type and remove Chinese-only no-wrap rules. */
html[lang="en"] #mobile-home .hero h1 {
  max-width: 13ch;
  font-size: clamp(35px, 8.5vw, 46px);
  line-height: 1.08;
}

html[lang="en"] #mobile-home :is(.section h2, .care-copy h2, .parent-journey h2, .visit-cta h2) {
  font-size: clamp(28px, 7.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -.045em;
}

html[lang="en"] #mobile-home :is(.section h3, .method-feature h3, .branch-feature h3) {
  font-size: clamp(19px, 5.2vw, 27px);
  line-height: 1.18;
  white-space: normal;
}

html[lang="en"] #desktop-home .d-hero-copy h1 {
  max-width: 15ch;
  font-size: clamp(42px, 3.85vw, 57px);
  line-height: 1.07;
  letter-spacing: -.055em;
}

html[lang="en"] #desktop-home .d-hero-copy h1 :is(span, strong),
html[lang="en"] #desktop-home .d-copy-rail h2,
html[lang="en"] #desktop-home .d-method .d-copy-rail h2,
html[lang="en"] #desktop-home .d-holidays .d-copy-rail h2 span,
html[lang="en"] #desktop-home .d-parent-note h2 {
  white-space: normal;
}

html[lang="en"] #desktop-home .d-hero-copy h1 strong {
  width: 100%;
  max-width: 100%;
}

html[lang="en"] #desktop-home h2 {
  font-size: clamp(31px, 3.25vw, 50px);
  line-height: 1.1;
  letter-spacing: -.05em;
}

html[lang="en"] #desktop-home h3 {
  font-size: clamp(18px, 1.65vw, 27px);
  line-height: 1.18;
  letter-spacing: -.025em;
  white-space: normal;
}

html[lang="en"] .social-follow h2 {
  font-size: clamp(34px, 3.2vw, 50px);
  line-height: 1.08;
  white-space: normal;
}

/* Story — its Chinese lockups intentionally use no-wrap; English needs room. */
html[lang="en"] .story-cinematic h1 {
  width: auto;
  font-size: clamp(39px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

html[lang="en"] .story-cinematic .st-title-line {
  width: 100%;
  flex-wrap: wrap;
  row-gap: .13em;
  white-space: normal;
}

html[lang="en"] .story-cinematic :is(.st-journey h2, .st-school__copy h2, .st-results h2, .st-method__copy h2, .st-close h2) {
  font-size: clamp(32px, 3.55vw, 52px);
  line-height: 1.08;
  letter-spacing: -.05em;
  white-space: normal;
}

html[lang="en"] .story-cinematic :is(.st-method__copy h2 span, .st-method__copy h2 strong, .st-school--archive .st-school__copy h2, .st-school--archive .st-school__copy h2 em) {
  width: auto;
  white-space: normal;
}

/* The school-visit summary remains paired with the photo. English is authored
   as two short lines here, so it never runs beneath the gallery. */
html[lang="en"] .story-cinematic .st-school__summary {
  display: grid;
  gap: .13em;
  max-inline-size: 30ch;
}

html[lang="en"] .story-cinematic .st-school__summary span {
  display: block;
  white-space: nowrap;
}

/* Teacher page — the blue nameplate was designed for a short Chinese title. */
html[lang="en"] .training-record__intro h1 {
  white-space: normal;
  font-size: clamp(40px, 4.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

html[lang="en"] .training-record__story h2,
html[lang="en"] .teachers-page :is(.teachers-consult h2, .training-record__team-photo figcaption strong) {
  font-size: clamp(30px, 3.35vw, 50px);
  line-height: 1.12;
  white-space: normal;
}

/* Keep the two translated halves of the Educators closing promise visibly separate. */
.teachers-consult h2 > span {
  display: block;
}

html[lang="en"] .teachers-consult h2 {
  display: flex;
  flex-wrap: wrap;
  column-gap: .28em;
  row-gap: .14em;
}

html[lang="en"] .teachers-consult h2 > span {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 600px) {
  html[lang="en"] .teachers-consult h2 {
    display: grid;
    gap: .15em;
    font-size: clamp(26px, 7.3vw, 32px);
  }
}

@media (max-width: 767px) {
  html[lang="en"] .story-cinematic h1 {
    font-size: clamp(34px, 9.4vw, 43px);
  }

  html[lang="en"] .story-cinematic :is(.st-journey h2, .st-school__copy h2, .st-results h2, .st-method__copy h2, .st-close h2) {
    font-size: clamp(29px, 8vw, 38px);
  }

  html[lang="en"] .training-record__intro h1 {
    font-size: clamp(32px, 8vw, 39px);
  }
}

/* English keeps natural word boundaries. These safeguards prevent narrow
   cards and buttons from inheriting Chinese-only no-wrap sizing. */
html[lang="en"] :is(#mobile-home, #tablet-home, #desktop-home) :is(.button, .d-button, .header-cta, .news-link, .branch-grid a, .d-branch-card a, .visit-cta-actions a, .visit-cta-actions button) {
  min-height: 48px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

html[lang="en"] :is(#mobile-home, #tablet-home, #desktop-home) :is(.course-list span, .d-subject-group span, .d-value-tags li, .d-promise-list li, .branch-grid address, .d-branch-grid address) {
  overflow-wrap: break-word;
  white-space: normal;
  word-break: normal;
}

/* The quality-promise headline has two authored English lines. Apply this
   at every tablet/compact-desktop composition, including cloned layouts. */
@media (min-width: 768px) {
  html[lang="en"] .promise .section-heading {
    width: 100%;
    max-width: none !important;
  }

  html[lang="en"] .promise .section-heading h2 {
    max-width: none !important;
    font-size: clamp(31px, 3.4vw, 36px) !important;
  }

  html[lang="en"] .promise .section-heading h2 span {
    display: block;
    overflow-wrap: normal;
    white-space: nowrap !important;
  }
}

/* At phone widths, the English hero needs a slightly smaller display scale
   than the Chinese lockup so neither line clips at 375–430px. */
@media (max-width: 767px) {
  /* Keep the two authored English promise lines intact on a phone. The
     Chinese heading can be oversized; this longer English sentence needs a
     deliberately compact type scale to avoid a stray third "Make" line. */
  html[lang="en"] #mobile-home .promise .section-heading h2 {
    max-width: none !important;
    font-size: clamp(22px, 5.6vw, 25.5px) !important;
    letter-spacing: -.065em;
    line-height: 1.14;
  }

  html[lang="en"] #mobile-home .promise .section-heading h2 span {
    display: block;
    overflow-wrap: normal;
    white-space: nowrap !important;
  }

  html[lang="en"] #mobile-home .hero h1 {
    max-width: none;
    font-size: clamp(28px, 7.1vw, 33px) !important;
    line-height: 1.1 !important;
  }

  html[lang="en"] #mobile-home .hero h1 :is(span, em, strong) {
    margin-left: 0 !important;
  }

  /* The Chinese badge is intentionally large. Its English counterpart is a
     shorter one-line label so it remains a neat accent, not a second hero. */
  html[lang="en"] #mobile-home .promise .section-heading::before {
    margin-bottom: 17px;
    padding: .18em .24em .2em;
    font-size: clamp(27px, 6.8vw, 32px);
    letter-spacing: -.04em;
    line-height: 1.02;
    white-space: nowrap;
  }
}

/* Tablet uses the phone content composition, but has enough room for the
   two intentional English promise lines.  Do not let the Chinese 15ch title
   constraint split "Make" onto a third line. */
@media (min-width: 768px) and (max-width: 1100px) {
  html[lang="en"] #tablet-home .promise .section-heading,
  html[lang="en"] #tablet-home .promise .section-heading h2 {
    max-width: none;
  }

  html[lang="en"] #tablet-home .promise .section-heading h2 {
    font-size: clamp(31px, 3.4vw, 36px) !important;
  }

  html[lang="en"] #tablet-home .promise .section-heading h2 span {
    display: block;
    overflow-wrap: normal;
    white-space: nowrap !important;
  }
}

/* One consistent English display scale across every page. This sits last so
   decorative desktop lockups cannot grow beyond their original frame. */
html[lang="en"] :is(h1, h2) {
  font-size: clamp(26px, 2.8vw, 43px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.045em !important;
}

html[lang="en"] h1 {
  font-size: clamp(32px, 3.4vw, 50px) !important;
  line-height: 1.08 !important;
}

html[lang="en"] #mobile-home :is(h1, h2) :is(span, strong, em) {
  width: auto;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  white-space: normal !important;
}

html[lang="en"] #mobile-home .hero h1 :is(span, em) {
  display: block;
  inline-size: 100%;
}

@media (max-width: 767px) {
  html[lang="en"] :is(h1, h2) {
    font-size: clamp(25px, 7vw, 33px) !important;
    line-height: 1.14 !important;
  }

  html[lang="en"] h1 {
    font-size: clamp(30px, 8vw, 38px) !important;
    line-height: 1.1 !important;
  }
}

/* Keep the two authored English promise lines intact even when the source is
   the phone layout cloned for a tablet. This comes last to beat earlier
   Chinese-oriented span rules. */
@media (min-width: 768px) {
  html[lang="en"] :is(#mobile-home, #tablet-home) .promise .section-heading,
  html[lang="en"] :is(#mobile-home, #tablet-home) .promise .section-heading h2 {
    width: 100%;
    max-width: none !important;
  }

  html[lang="en"] :is(#mobile-home, #tablet-home) .promise .section-heading h2 {
    font-size: clamp(31px, 3.4vw, 36px) !important;
  }

  html[lang="en"] :is(#mobile-home, #tablet-home) .promise .section-heading h2 span {
    display: block;
    overflow-wrap: normal;
    white-space: nowrap !important;
  }
}