/* Latest customer reference: restrained ivory/charcoal/brick-red editorial system.
   Kept separate from the legacy stylesheet so that each public-page change is reviewable. */
:root {
  --canvas: #f8f7f4;
  --paper: #fffefa;
  --pale: #f4efe7;
  --ink: #292725;
  --navy: #292725;
  --muted: #655f57;
  --line: #e4ded4;
  --red: #a83b32;
  --yellow: #d9b56c;
  --surface-radius: 4px;
  --control-radius: 3px;
  --shadow: 0 12px 28px rgba(42, 35, 27, .055);
}
body { background: var(--canvas); color: var(--ink); }
.site-shell .button { border-radius: 3px; box-shadow: none; }
.site-shell .button:not(:disabled):hover { transform: none; box-shadow: none; }
.site-shell .button.primary { border-color: var(--red); background: var(--red); color: #fff; }
.site-shell .button.primary:hover { border-color: #8e3028; background: #8e3028; }
.site-shell .button.light, .site-shell .button.ghost { border-color: #d9d0c5; color: #342f2a; background: #fffdfa; }
.site-shell .button.light:hover, .site-shell .button.ghost:hover { border-color: var(--red); color: var(--red); background: #fffdfa; }
.site-shell .eyebrow { color: #8d7158; letter-spacing: .14em; }
.site-shell .eyebrow::before { background: #bf8c46; }

/* Keep every administration tab visible on laptop/desktop widths, including
   the longest bilingual labels. Small screens retain the touch-scroll row. */
@media (min-width: 901px) {
  .admin-tabs {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
  }
  .admin-tabs button {
    min-width: 0; white-space: normal; overflow-wrap: anywhere;
    text-align: center; line-height: 1.28;
  }
}

/* Editorial homepage: three consistent-width sections, supplied founder photo first. */
.page-main.wide:has(> .founder-hero) { width: 100%; max-width: none; padding: 0 0 74px; }
.founder-hero, .home-video-feature, .method-preview {
  width: min(1330px, calc(100% - 64px)); max-width: 1330px;
  height: 536px; min-height: 536px; margin: 0 auto; overflow: hidden;
  padding: 0; gap: 0; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--surface-radius);
  background: var(--paper); box-shadow: none;
}
.founder-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.founder-hero-copy { justify-content: center; padding: 40px clamp(24px, 3vw, 44px); }
.founder-hero-kicker { color: #806b56; font-size: 12px; letter-spacing: .14em; }
.founder-hero-kicker::before { width: 29px; height: 2px; border-radius: 0; background: #bb8b4d; }
.founder-hero h1 { margin: 25px 0 16px; line-height: 1.13; }
.founder-hero-name { display: block; margin-bottom: 26px; color: #242320; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: clamp(24px, 2.15vw, 31px); font-weight: 700; }
.founder-hero-headline { display: block; color: #2b2825; font-size: clamp(36px, 3.65vw, 54px); letter-spacing: -.035em; }
.founder-hero-headline .founder-headline-first, .founder-hero-headline .founder-headline-second { display: block; }
.founder-hero-headline .founder-headline-first { color: #292725; }
.founder-hero-headline .founder-headline-second { color: var(--red); }
.founder-hero-headline .cms-language-second { margin-top: 12px; font-size: .45em; letter-spacing: 0; }
.founder-hero-headline .cms-language-second .founder-headline-first,
.founder-hero-headline .cms-language-second .founder-headline-second { display: inline; color: #66594e; }
.founder-hero-role { color: #332e29; font-size: 14px; font-weight: 700; }
.founder-hero-intro { max-width: 61ch; color: #5d564e; font-size: 15px; line-height: 1.78; }
.founder-hero-coverage { max-width: 59ch; margin: 8px 0 20px; padding: 9px 0 9px 13px; border-left: 2px solid #bd935c; background: transparent; color: #50483e; font-size: 13px; }
.founder-hero-coverage-mark { color: var(--red); }
.founder-hero-actions { margin: 0; }
.founder-hero-actions .button { min-height: 44px; padding: 9px 20px; border-radius: 3px; font-size: 14px; }
.founder-hero-media { position: relative; height: 536px; min-height: 0; padding: 0; overflow: hidden; background: #e4d9c9; }
.founder-hero-media img,
.founder-hero-media.founder-hero-media-poster img {
  display: block; width: 100%; height: 536px; max-width: none; max-height: none;
  min-height: 0; border-radius: 0; object-fit: cover; object-position: 27% center;
  box-shadow: none;
}
.founder-hero-media-default img { object-position: 35% center; }
.founder-photo-caption, .founder-hero-media-poster .founder-photo-caption {
  display: block; position: absolute; right: 5%; bottom: 20px; left: 5%;
  padding: 13px 17px; border: 0; border-left: 2px solid var(--red);
  background: rgba(255, 253, 248, .96); color: #282522; box-shadow: 0 4px 16px rgba(37, 29, 20, .07);
}
.founder-photo-caption strong { font-size: 16px; font-weight: 700; }
.founder-photo-caption small { font-size: 11px; }
.founder-caption-mark { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #9c7858; font: italic 26px Georgia, serif; letter-spacing: -.1em; }
.home-video-feature { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.home-video-copy { padding: 40px clamp(24px, 3vw, 44px); }
.home-video-copy h2, .method-preview .method-copy h2 { color: #292725; font-size: clamp(32px, 3.1vw, 46px); }
.home-video-copy p, .method-preview .method-copy p { color: #5e564d; font-size: 15px; }
.home-video-quote { max-width: 54ch; margin: 18px 0 22px; padding: 7px 0 7px 14px; border-left: 2px solid #bd935c; color: #6d5843; font-size: 14px; font-style: normal; line-height: 1.7; overflow-wrap: anywhere; }
.home-video-player, .home-video-placeholder { min-height: 0; height: 100%; }
.home-video-player video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.home-video-credits { position: absolute; z-index: 2; right: 10px; bottom: 52px; display: grid; gap: 3px; max-width: min(390px,calc(100% - 20px)); pointer-events: none; }
.home-video-credits .site-image-credit { display: block; padding: 4px 7px; border-radius: 3px; background: rgba(255,253,247,.94); color: #514535; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.home-video-placeholder::after { background: rgba(29, 27, 24, .38); }
.method-preview { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.method-preview .tower-mini { min-height: 0; height: 100%; border: 0; border-radius: 0; background: var(--pale); }
.method-preview .method-copy { padding: 40px clamp(24px, 3vw, 44px); }
.method-preview .tower-layer { border-radius: 2px; box-shadow: none; }
.method-preview .principle b { border-radius: 2px; background: #f2e4c7; color: #654c27; }

/* Keep the public ICP notice in the homepage footer's central position.
   Guangdong displays the subject filing number; the notice links to MIIT. */
.site-shell .site-footer .footer-bottom:has([data-icp-filing]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.site-shell .site-footer .footer-bottom [data-icp-filing] {
  justify-self: center;
  font-size: 12px;
}

/* The customer footer uses the same centered content width as the editorial pages.
   Keep genuine side whitespace on desktop and give small screens their own rhythm. */
.site-shell .site-footer .footer-grid,
.site-shell .site-footer .footer-bottom {
  box-sizing: border-box;
  width: min(1540px, 82%);
  max-width: none;
  margin-inline: auto;
}
.site-shell .site-footer .footer-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(170px, .7fr) minmax(235px, .9fr);
  gap: clamp(30px, 4vw, 72px);
  padding: 34px 0 29px;
}
.site-shell .site-footer .footer-brand p {
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.75;
}
.site-shell .site-footer .footer-col h3 { margin-bottom: 12px; font-size: 14px; }
.site-shell .site-footer .footer-col a,
.site-shell .site-footer .footer-col p { margin: 6px 0; font-size: 13px; line-height: 1.55; }
.site-shell .site-footer .footer-bottom {
  gap: 12px;
  padding: 15px 0 23px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .site-shell .site-footer .footer-grid,
  .site-shell .site-footer .footer-bottom { width: calc(100% - 48px); }
  .site-shell .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 30px;
    padding: 29px 0 24px;
  }
  .site-shell .site-footer .footer-brand { grid-column: 1 / -1; }
  .site-shell .site-footer .footer-col { min-width: 0; }
  .site-shell .site-footer .footer-col a,
  .site-shell .site-footer .footer-col p { overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
  .site-shell .site-footer .footer-grid,
  .site-shell .site-footer .footer-bottom { width: calc(100% - 32px); }
  .site-shell .site-footer .footer-grid { gap: 22px 18px; padding: 27px 0 21px; }
  .site-shell .site-footer .footer-brand p { max-width: 34ch; }
  .site-shell .site-footer .footer-col h3 { font-size: 13px; line-height: 1.4; }
  .site-shell .site-footer .footer-col a,
  .site-shell .site-footer .footer-col p { font-size: 12px; line-height: 1.55; }
  .site-shell .site-footer .footer-bottom {
    display: grid;
    justify-content: start;
    gap: 5px;
    padding: 14px 0 22px;
    font-size: 11px;
  }
  .site-shell .site-footer .footer-bottom > * { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 900px) {
  .page-main.wide:has(> .founder-hero) { padding-bottom: 42px; }
  .founder-hero, .home-video-feature, .method-preview { width: min(100% - 38px, 760px); height: auto; min-height: 0; }
  .founder-hero, .home-video-feature, .method-preview { display: grid; grid-template-columns: 1fr; }
  .founder-hero-copy { padding: 35px 24px; }
  .founder-hero-media { height: 360px; min-height: 0; }
  .founder-hero-media img, .founder-hero-media.founder-hero-media-poster img { height: 360px; min-height: 0; object-position: 24% center; }
  .founder-hero-media-default img { object-position: 35% center; }
  .home-video-copy, .method-preview .method-copy { padding: 35px 24px; }
  .home-video-player, .home-video-placeholder { min-height: 330px; }
  .home-video-player video { max-height: none; }
  .method-preview .tower-mini { min-height: 360px; }
}
@media (max-width: 640px) {
  .founder-hero, .home-video-feature, .method-preview { width: calc(100% - 30px); margin-top: 16px; }
  .founder-hero-copy { padding: 29px 17px 27px; }
  .founder-hero h1 { margin: 20px 0 15px; }
  .founder-hero-name { margin-bottom: 18px; font-size: 24px; }
  .founder-hero-headline { font-size: clamp(29px, 8.1vw, 40px); }
  .founder-hero-intro { font-size: 14px; }
  .founder-hero-media { height: 300px; min-height: 0; }
  .founder-hero-media img, .founder-hero-media.founder-hero-media-poster img { width: 100%; height: 300px; min-height: 0; object-position: 24% center; }
  .founder-hero-media-default img { object-position: 35% center; }
  .founder-photo-caption { right: 10px; bottom: 10px; left: 10px; padding: 8px 11px; }
  .founder-photo-caption strong { font-size: 12px; }
  .founder-photo-caption small { font-size: 9px; }
  .founder-caption-mark { right: 10px; font-size: 18px; }
  .home-video-copy, .method-preview .method-copy { padding: 30px 17px; }
  .home-video-player, .home-video-placeholder { min-height: 240px; }
  .method-preview .tower-mini { min-height: 300px; }
}

/* Main surfaces share the same restrained corner radius as the three home
   sections; controls and small tiles retain their tighter radius. */
.site-shell :is(
  .about-page .section-index, .about-page .content-panel,
  .services-hero, .services-index, .service-detail, .services-end,
  .method-details, .contact-grid > *, .future-hero, .gate-card
) { border-radius: var(--surface-radius); }
.site-shell :is(.future-item,.tower-step,.method-detail,.service-card) { border-radius: var(--surface-radius); box-shadow: none; }
.site-shell :is(.contact-grid,.gate-card) :is(input,select,textarea) { border-radius: var(--control-radius); }

/* The fifth step is dark, so its bilingual caption needs a light foreground. */
.site-shell .tower-step:nth-child(5) .cms-language-second { color: #f5e9db; }
.site-shell .method-preview .tower-layer:nth-of-type(5) .cms-language-second { color: #f5e9db; }

/* Keep the supplied image filling its column while longer translated or
   administrator-edited copy makes the editorial row grow naturally. */
@media (min-width: 901px) {
  .page-main.wide:has(> .founder-hero) {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    row-gap: 18px;
    padding-top: 24px;
  }
  .page-main.wide:has(> .founder-hero) > :is(.founder-hero, .home-video-feature, .method-preview) {
    height: auto;
    min-height: 560px;
    margin-top: 0;
  }
  .site-shell .founder-hero,
  .site-shell .home-video-feature,
  .site-shell .method-preview { height: auto; min-height: 560px; }
  .site-shell .founder-hero-media { height: auto; min-height: 536px; }
  .site-shell :is(.founder-hero-copy,.home-video-copy,.method-copy,.tower-mini,.home-video-player) { min-width: 0; }
  .site-shell .founder-hero-media img,
  .site-shell .founder-hero-media.founder-hero-media-poster img {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
}

/* Long German titles must wrap instead of being clipped by the page artwork. */
.site-shell .future-hero :is(h1, p) { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .site-shell .future-items-courses .future-item::after {
    inset: 0;
    clip-path: none;
    opacity: .14;
  }
  .site-shell .future-item :is(strong, span) { max-width: 100%; overflow-wrap: anywhere; }
}

/* Two footer columns leave too little room for an email address on phones. */
@media (max-width: 420px) {
  .site-shell .site-footer .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .site-shell .site-footer .footer-brand { grid-column: auto; }
}