/* English copy needs natural wrapping within the existing page grids. */
html[lang="en"] .ed-hero h1 { text-wrap: balance; font-size: clamp(42px, 4.4vw, 72px); }
/* Rebalance translated display headings as complete English sentences. Chinese
   source breaks are clause-based and can leave a short third line in English. */
html[lang="en"] main :is(h1, h2) { text-wrap: balance; }
html[lang="en"] .about-hero #about-hero-title > span,
html[lang="en"] .about-story #who-title > .mp-title-phrase { display: inline; }
html[lang="en"] .about-hero #about-hero-title > span + span::before,
html[lang="en"] .about-story #who-title > .mp-title-phrase + .mp-title-phrase::before { content: " "; }
html[lang="en"] .ed-hero-copy { min-width: 0; }
html[lang="en"] .ed-actions { flex-wrap: wrap; gap: 20px; }
html[lang="en"] .site-language-switch { flex: 0 0 auto; font-size: 14px; white-space: nowrap; }
html[lang="en"] .ed-hero { height: auto; min-height: 800px; padding-bottom: 200px; }
/* English topic labels are longer than the Chinese ones: keep the topic strip on one row and let it scroll sideways instead of stacking into a second row. */
html[lang="en"] .ed-article-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
html[lang="en"] .ed-article-tabs::-webkit-scrollbar { display: none; }
html[lang="en"] .ed-article-tabs [role="tab"] { flex: 0 0 auto; }
/* English deliverable lists are much longer than the Chinese ones, which would wrap the rotating case caption to two or three lines and push the button down whenever the next case appears. In the two-column layout the caption therefore stays on one line and scrolls sideways; the soft edge shadow marks the overflow and disappears once the list is fully scrolled. */
html[lang="en"] .ed-case-caption p {
  min-height: 1.6em;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to left, #fff, #fff), linear-gradient(to right, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)), linear-gradient(to left, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
html[lang="en"] .ed-case-caption p::-webkit-scrollbar { display: none; }
/* English labels need a second line in these compact cards; the Chinese originals fit on one line. */
html[lang="en"] .baike-reference-card__source { min-height: 58px; }
html[lang="en"] .baike-reference-card__source span,
html[lang="en"] .un-logo-card > span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
html[lang="en"] .un-logo-card > span { line-height: 1.35; }
@media (min-width: 981px) {
  /* English display copy needs slightly smaller type than the compact Chinese
     source. Group the adjustment by existing page template so headings keep
     their hierarchy while returning to the intended one- or two-line rhythm. */
  html[lang="en"] #about-hero-title { font-size: clamp(44px, 3.3vw, 56px) !important; }
  html[lang="en"] #who-title { font-size: clamp(32px, 2.2vw, 35px) !important; }
  html[lang="en"] #contact-hero-title { font-size: clamp(46px, 3.55vw, 56px) !important; }
  html[lang="en"] #inquiry-title,
  html[lang="en"] #ed-work-title { font-size: clamp(40px, 3vw, 48px) !important; }

  html[lang="en"] :is(.search-service-page, .marketing-service-page) main :is(h1[id], h2[id]) { font-size: clamp(30px, 2.1vw, 33px) !important; }
  html[lang="en"] :is(.search-service-page, .marketing-service-page) main :is(#search-service-hero-title, #marketing-hero-title) { font-size: clamp(44px, 3.35vw, 52px) !important; }
  html[lang="en"] .marketing-service-page main #qa-examples-title { font-size: clamp(42px, 3vw, 47px) !important; }
  html[lang="en"] .marketing-service-page main #marketing-deliverables-title { font-size: clamp(26px, 1.8vw, 28px) !important; }
  html[lang="en"] .marketing-service-page main #marketing-problem-title { font-size: clamp(28px, 1.95vw, 30px) !important; }

  html[lang="en"] :is(.registration-guide, [data-site-section="financial"]) main :is(h1[id], h2[id]) { font-size: clamp(29px, 2.05vw, 32px) !important; }
  html[lang="en"] :is(.registration-guide, [data-site-section="financial"]) main :is(#registration-title, #reg-hero-title) { font-size: clamp(44px, 3.35vw, 52px) !important; }

  html[lang="en"] :is(.app-tutorial-page, .authorized-video-page, .ceo-biography-page, .company-promo-page) main :is(h1[id], h2[id]) { font-size: clamp(31px, 2.3vw, 36px) !important; }
  html[lang="en"] :is(.large-event-page, .scale-film-page) main :is(h1[id], h2[id]) { font-size: clamp(32px, 2.55vw, 40px) !important; }
  html[lang="en"] .company-promo-page main #cp-process-title { font-size: clamp(28px, 2vw, 31px) !important; }
  html[lang="en"] :is(.app-tutorial-page, .authorized-video-page, .ceo-biography-page, .company-promo-page, .large-event-page, .scale-film-page) main :is(#at-hero-title, #av-hero-title, #cb-hero-title, #cp-hero-title, #ev-hero-title, #sf-hero-title) { font-size: clamp(44px, 3.35vw, 52px) !important; }

  html[lang="en"] .whitepaper-page main :is(h1[id], h2[id]) { font-size: clamp(28px, 1.95vw, 31px) !important; }
  html[lang="en"] .whitepaper-page main #wp-hero-title { font-size: clamp(44px, 3.35vw, 52px) !important; }
  html[lang="en"] main [id^="aged-"] { font-size: clamp(40px, 3.35vw, 52px) !important; }

  html[lang="en"] body main :is(#search-service-hero-title, #marketing-hero-title, #registration-title, #reg-hero-title, #at-hero-title, #av-hero-title, #cb-hero-title, #cp-hero-title, #ev-hero-title, #sf-hero-title, #wp-hero-title) { font-size: clamp(40px, 2.95vw, 46px) !important; }
  html[lang="en"] body main :is(#search-service-hero-title, #marketing-hero-title, #at-hero-title, #av-hero-title, #cb-hero-title, #cp-hero-title, #ev-hero-title, #sf-hero-title) > span { display: inline !important; white-space: normal !important; }
  html[lang="en"] body main :is(#search-service-hero-title, #marketing-hero-title, #at-hero-title, #av-hero-title, #cb-hero-title, #cp-hero-title, #ev-hero-title, #sf-hero-title) > span::before { content: " "; }
  html[lang="en"] body main #marketing-hero-title > .marketing-hero__headline-accent::after { content: " "; }

  html[lang="en"] body.search-service-page main#main h1#search-service-hero-title,
  html[lang="en"] body.marketing-service-page main#main h1#marketing-hero-title,
  html[lang="en"] body.reg-editorial-page main#main h1#reg-hero-title,
  html[lang="en"] body.app-tutorial-page main#main h1#at-hero-title,
  html[lang="en"] body.authorized-video-page main#main h1#av-hero-title,
  html[lang="en"] body.ceo-biography-page main#main h1#cb-hero-title,
  html[lang="en"] body.company-promo-page main#main h1#cp-hero-title,
  html[lang="en"] body.large-event-page main#main h1#ev-hero-title,
  html[lang="en"] body.scale-film-page main#main h1#sf-hero-title { font-size: clamp(40px, 2.95vw, 46px) !important; }
  html[lang="en"] body.us-news-page main#main :is(#un-editorial-title, #un-message-title) { font-size: clamp(34px, 2.55vw, 40px) !important; }
}
/* The shared fixed-height service hero leaves the About introduction floating
   in a large empty canvas on wide screens. Keep this page's original editorial
   sequence: introduction first, then the full-width project image. */
@media (min-width: 681px) {
  html[lang="en"] body[data-site-section="about"] main#main .about-hero {
    height: auto;
    min-height: 0;
    max-height: none;
    margin-bottom: clamp(64px, 6vw, 96px);
  }
  html[lang="en"] body[data-site-section="about"] main#main .about-hero-copy {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    align-items: start;
    gap: 6%;
    width: 90%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: clamp(64px, 7vw, 90px) 0 clamp(46px, 4.5vw, 64px);
  }
  html[lang="en"] body[data-site-section="about"] main#main .about-hero-details {
    max-width: 430px;
  }
  html[lang="en"] body[data-site-section="about"] main#main .service-hero-summary {
    text-wrap: balance;
  }
  html[lang="en"] body[data-site-section="about"] main#main .service-hero-summary + p {
    text-wrap: pretty;
  }
}
@media (min-width: 681px) and (max-width: 1000px) {
  html[lang="en"] body[data-site-section="about"] main#main .about-hero-copy {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 60px;
  }
}
@media (max-width: 980px) {
  html[lang="en"] .ed-hero h1 { font-size: clamp(38px, 6vw, 56px); }
}
@media (max-width: 640px) {
  /* The stacked layout gives the caption the full width, so it wraps and simply reserves the tallest English case. */
  html[lang="en"] .ed-case-caption p { white-space: normal; overflow: visible; background-image: none; min-height: 4.8em; }
  html[lang="en"] .ed-hero { min-height: 0; padding-bottom: 0; }
  html[lang="en"] .ed-hero h1 { font-size: clamp(36px, 9vw, 48px); }
  html[lang="en"] .cn-hero--architectural .us-editorial-hero-actions { flex-wrap: wrap; row-gap: 12px; }
  html[lang="en"] .at-hero h1 .at-hero-title-line { display: inline; white-space: normal; }
  html[lang="en"] .at-hero h1 .at-hero-title-line + .at-hero-title-line::before { content: " "; }
}