:root {
    --deck-blue: #2468f2;
    --deck-cyan: #4be1ff;
    --deck-ink: #0c1731;
    --deck-muted: #64718a;
    /* Shared with the Hero's lower edge: later chapters never fall into navy. */
    --deck-surface-blue: #126acc;
    --deck-surface-blue-deep: #0755bd;
    --deck-surface-ice: #f4f9ff;
    --deck-on-blue-muted: #edf7ff;
    --deck-on-blue-accent: #b9eaff;
    --deck-shell: 1400px;
}

html,
body.site-page-home {
    height: auto;
}

body.site-page-home {
    overflow-y: auto;
    background: var(--deck-surface-blue-deep);
}

body.site-page-home.is-menu-open {
    overflow-y: hidden;
}

/* Use local script-appropriate fonts; no external font requests. */
body.site-page-home:is(.site-locale-de, .site-locale-fr, .site-locale-it, .site-locale-ru, .site-locale-pt, .site-locale-es) {
    font-family: Arial, "Segoe UI", sans-serif;
}

body.site-page-home.site-locale-ja {
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    line-break: strict;
}

body.site-page-home.site-locale-ko {
    font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.hero-cn { text-wrap: balance; }

.site-page-home:not(.site-locale-zh-CN):not(.site-locale-zh-Hant) .hero-cn {
    letter-spacing: .01em;
}

.site-page-home:not(.site-locale-zh-CN):not(.site-locale-zh-Hant) .hero-origin p {
    max-width: 300px;
    font-size: 13px;
    letter-spacing: .06em;
}

.site-page-home:not(.site-locale-zh-CN):not(.site-locale-zh-Hant) .deck-copy h2,
.site-page-home:not(.site-locale-zh-CN):not(.site-locale-zh-Hant) .deck-heading h2 {
    font-size: clamp(34px, 3.4vw, 49px);
}

/* Header visuals are shared with About in site-glass.css. */

.home-deck {
    width: 100%;
}

.deck-slide {
    position: relative;
    min-height: 0;
    height: auto;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 96px 54px;
    scroll-margin-top: 80px;
}

.deck-shell {
    position: relative;
    z-index: 3;
    width: min(100%, var(--deck-shell));
    margin: 0 auto;
}

.deck-kicker {
    margin: 0 0 18px;
    color: #4471db;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
    line-height: 1.5;
}

.deck-kicker b {
    display: inline-flex;
    width: 31px;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: #fff;
    border-radius: 10px;
    background: var(--deck-blue);
    font-size: 10px;
    letter-spacing: 0;
}

.deck-heading h2,
.deck-copy h2 {
    margin: 0;
    color: var(--deck-ink);
    font-size: clamp(38px, 4.15vw, 60px);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.14;
}

.deck-heading > p:last-child,
.deck-lead {
    color: var(--deck-muted);
    font-size: 15px;
    line-height: 2;
}

.deck-heading > p:last-child {
    max-width: 580px;
    margin: 21px 0 0;
}

.deck-button {
    min-width: 148px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 25px;
    font-size: 13px;
    transition: transform .25s ease, color .25s ease, background .25s ease, border-color .25s ease;
}

.deck-button:hover {
    transform: translateY(-3px);
}

.deck-button span {
    font-family: Arial, sans-serif;
    font-size: 18px;
}

.deck-button.is-primary {
    color: #071128;
    background: var(--deck-cyan);
    box-shadow: 0 12px 35px rgba(75, 225, 255, .2);
}

.deck-button.is-ghost {
    color: rgba(255, 255, 255, .82);
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .03);
}

.hero-slide {
    height: 100vh;
    height: 100svh;
    min-height: 680px;
    scroll-margin-top: 0;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
    background:
        radial-gradient(ellipse at 50% 76%, #288ff0 0%, transparent 57%),
        radial-gradient(ellipse at 84% 12%, rgba(71, 170, 255, .38), transparent 54%),
        linear-gradient(125deg, #0755bd 0%, #0868d9 48%, #0752bb 100%);
}

.hero-canvas,
.hero-atmosphere {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-canvas { z-index: 1; }

.hero-atmosphere {
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 88%, rgba(94, 217, 255, .36), transparent 48%),
        linear-gradient(115deg, transparent 20%, rgba(131, 210, 255, .06) 40%, transparent 60%);
}

.hero-slide::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: clamp(120px, 20svh, 210px);
    pointer-events: none;
    background: linear-gradient(0deg, var(--deck-surface-blue), rgba(18, 106, 204, 0));
}

.hero-copy {
    position: absolute;
    z-index: 5;
    /* Leave a distinct pause below the 80px navigation, independent of title size. */
    top: clamp(164px, 19svh, 220px);
    left: 50%;
    width: calc(100% - 80px);
    max-width: 1200px;
    text-align: center;
    transform: translateX(-50%);
}

.hero-copy h1 {
    margin: 0;
    color: #fff;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    font-weight: 600;
}
.hero-origin{line-height:1.2;}
.hero-title-intro {
    display: block;
    margin-bottom: 10px;
    color: #b9e2ff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .16em;
}

.hero-title-main {
    display: block;
    margin: 0 auto;
    font-size: 50px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.hero-cn {
    max-width: 800px;
    margin: 20px auto 0;
    color: #e0f2ff;
    font-size: clamp(17px, 1.25vw, 20px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .08em;
}

.hero-footer {
    position: absolute;
    z-index: 5;
    right: 54px;
    bottom: 38px;
    left: 54px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    pointer-events: none;
}

.hero-origin > span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #c3e8ff;
    font: 12px/1.5 Arial, sans-serif;
    letter-spacing: .12em;
}

.hero-origin i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #96f1ff;
    box-shadow: 0 0 12px #7dedff;
}

.hero-origin p {
    margin: 9px 0 0;
    color: #fff;
    font-size: 16px;
    letter-spacing: .14em;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    pointer-events: auto;
}

.hero-actions .deck-button {
    min-width: 138px;
    height: 46px;
    border-radius: 24px;
    font-size: 13px;
}

.hero-actions .is-primary {
    color: #0959ba;
    background:rgba(239, 250, 255, 0.58);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 6px 24px rgba(0, 69, 166, .12);
}

.hero-actions .is-ghost {
    color: #fff;
    border-color: rgba(201, 236, 255, .55);
    background: rgba(14, 104, 211, .35);
    backdrop-filter: blur(8px);
}

.hero-actions .is-primary:hover { background: #fff; }
.hero-actions .is-ghost:hover { background: rgba(89, 171, 246, .35); }

.deck-scroll-cue {
    position: absolute;
    z-index: 6;
    bottom: 23px;
    left: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    color: #c3e5ff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .17em;
    transform: translateX(-50%);
}

.deck-scroll-cue i {
    position: relative;
    width: 20px;
    height: 31px;
    border: 1px solid rgba(255, 255, 255, .33);
    border-radius: 12px;
}

.deck-scroll-cue i::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 8px;
    width: 2px;
    height: 6px;
    border-radius: 2px;
    background: var(--deck-cyan);
    animation: deckScrollCue 1.7s ease-in-out infinite;
}

.overview-slide {
    --overview-arrival-y: clamp(640px, 59vw, 900px);
    display: block;
    /* A hidden/auto overflow ancestor would trap position: sticky. Decorative
       gradients already stay inside the section; only the photo clips itself. */
    overflow: visible;
    padding: calc(var(--overview-arrival-y) * .72) 54px 104px;
    color: #123553;
    background: var(--deck-surface-ice);
}

.overview-haze {
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--overview-arrival-y) * .82);
    pointer-events: none;
    /* Fade across 48% of a large ellipse (about 408px at 1440px), not a thin rim.
       The wide radius keeps a sweeping arc, with the same Hero blue along the seam. */
    background: radial-gradient(ellipse 105vw var(--overview-arrival-y) at 50% calc(var(--overview-arrival-y) * -.2),
        var(--deck-surface-blue) 0%, var(--deck-surface-blue) 52%, #2a82d6 60%, #64a8e5 70%, #a2ccee 80%, #d7eafb 90%, var(--deck-surface-ice) 100%);
}

.brand-wall::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--overview-departure-y) * .82);
    pointer-events: none;
    /* Let the outgoing light disperse gradually across a matching broad arc. */
    background: radial-gradient(ellipse 105vw var(--overview-departure-y) at 50% calc(var(--overview-departure-y) * -.2),
        var(--deck-surface-ice) 0%, var(--deck-surface-ice) 52%, #d7eafb 60%, #a2ccee 70%, #64a8e5 80%, #2a82d6 90%, var(--deck-surface-blue) 100%);
}

.overview-shell {
    width: min(100%, 1260px);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(70px, 9vw, 150px);
}

.overview-anchor { position: sticky; top: clamp(104px, 12vh, 136px); min-width: 0; }
.overview-flow { min-width: 0; }
.overview-heading { margin-top: 36px; }

.overview-eyebrow {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 20px;
    color: #527599;
    font: 12px/1.5 Arial, sans-serif;
    letter-spacing: .17em;
}

.overview-eyebrow span { color: #2680d9; letter-spacing: .05em; }

.overview-heading h2 {
    margin: 0;
    font-size: clamp(40px, 4.4vw, 64px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.overview-heading h2 > span { display: block; }
.overview-heading h2 > span:last-child { color: #257ed3; }
.site-locale-en .overview-heading h2 { font-size: clamp(40px, 4vw, 58px); line-height: 1.13; letter-spacing: -.055em; }

.overview-story > p {
    margin: 0;
    color: #214460;
    font-size: clamp(22px, 1.9vw, 29px);
    line-height: 1.7;
    letter-spacing: -.025em;
}
.overview-story > p + p { margin-top: 28px; color: #526d83; }
.site-locale-en .overview-story > p { line-height: 1.5; }

.overview-link {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    min-height: 46px;
    margin-top: 34px;
    color: #164f82;
    font-size: 14px;
    padding: 0 20px;
    border: 1px solid #aecbe5;
    border-radius: 24px;
}

.overview-link > span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    font-size: 20px;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.overview-link:hover { color: #fff; background: #176bc0; border-color: #176bc0; }
.overview-link:focus-visible { outline: 2px solid #176bc0; outline-offset: 6px; border-radius: 3px; }

.overview-media {
    position: relative;
    min-width: 0;
    width:80%;
    aspect-ratio: 8 / 5;
    margin: 0;
    overflow: hidden;
    border-radius: 3px;
    background: #e0eefb;
}

.overview-media-placeholder,
.overview-media-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.overview-media-image { object-fit: cover; }
.overview-media-placeholder {
    overflow: hidden;
    background: radial-gradient(ellipse at 20% 10%, #f5faff, transparent 65%), linear-gradient(120deg, #d2e7f9, #bdd9ee 65%, #dfedf8);
}
.overview-media-placeholder i {
    position: absolute;
    top: -44%;
    right: -5%;
    width: 68%;
    height: 150%;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    box-shadow: -30px 20px 55px rgba(246, 252, 255, .7), inset 12px -12px 45px rgba(255, 255, 255, .5);
    transform: rotate(-35deg);
}
.overview-media-placeholder i + i { top: -70%; right: -30%; width: 80%; height: 210%; box-shadow: none; }
.overview-media::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(235, 246, 255, .42));
}
.overview-media-label {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    color: #526e84;
    font-size: 12px;
    letter-spacing: .06em;
}

.overview-media figcaption { position: absolute; z-index: 1; right: 20px; bottom: 20px; left: 20px; color: #173e60; }
.overview-media figcaption > span { display: block; font: 12px/1.5 Arial, sans-serif; letter-spacing: .1em; }
.overview-media.has-image::after { inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(5, 34, 60, .72) 75%, rgba(5, 34, 60, .84)); }
.overview-media.has-image figcaption { color: #fff; }

.overview-stats {
    margin: clamp(80px, 10vh, 120px) 0 0;
}

.overview-stats > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    min-width: 0;
    min-height: 252px;
    padding: 34px 0 42px;
    border-top: 1px solid #cbdce9;
}

.overview-stats dt { display: flex; align-items: baseline; gap: 24px; color: #526c83; font-size: 15px; line-height: 1.6; }
.overview-stats dt > span { color: #397cb4; font: 12px/1.6 Arial, sans-serif; letter-spacing: .05em; }
.overview-stats dd {
    display: flex;
    align-items: flex-start;
    margin: 0;
    color: #176fc0;
    font: 400 clamp(76px, 7.8vw, 112px)/1.08 Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.055em;
}
.overview-stats sup { margin: .12em 0 0 9px; color: #398fce; font-size: .42em; line-height: 1; letter-spacing: 0; }
.overview-number { position: relative; display: inline-block; }
/* The final text always occupies the same space and remains accessible. Reels
   are a decorative overlay, removed after playback (also when reducing motion). */
.overview-number.is-rolling { color: transparent; }
.overview-number-reels { position: absolute; inset: 0; display: flex; overflow: hidden; color: #176fc0; pointer-events: none; }
.overview-number-digit { display: block; flex: 1 1 0; min-width: 0; height: 1.08em; overflow: hidden; }
.overview-number-track { display: block; }
.overview-number-track > span { display: block; height: 1.08em; line-height: 1.08; }
.overview-number.is-rolling .overview-number-track { will-change: transform; }

@media (max-width: 1000px) {
    .overview-slide { padding-right: 32px; padding-left: 32px; }
    .overview-shell { gap: 48px; }
    .overview-heading h2, .site-locale-en .overview-heading h2 { font-size: 40px; }
}

@media (min-width: 901px) and (max-height: 740px) {
    .overview-anchor { top: 100px; }
    .overview-media { width: min(65%, 280px); }
    .overview-heading { margin-top: 28px; }
    .overview-heading h2, .site-locale-en .overview-heading h2 { font-size: 42px; }
}

@media (max-width: 900px) {
    .overview-shell { grid-template-columns: minmax(0, 1fr); gap: 42px; }
    .overview-anchor { position: static; }
    .overview-media { width: min(72%, 360px); }
    .overview-story { max-width: 620px; }
    .overview-story > p { font-size: 22px; }
    .overview-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; margin-top: 48px; }
    .overview-stats > div { min-height: 180px; padding: 26px 0; gap: 18px; }
    .overview-stats dt { gap: 12px; }
    .overview-stats dd { font-size: clamp(52px,8vw,76px); }
}

@media (max-height: 600px) {
    .overview-anchor { position: static; }
}

@media (max-width: 760px) {
    .deck-slide.overview-slide {
        --overview-arrival-y: clamp(480px, 128vw, 560px);
        padding: calc(var(--overview-arrival-y) * .72) 22px 72px;
    }
    .overview-shell { gap: 32px; }
    .overview-heading { margin-top: 28px; }
    .overview-eyebrow { margin-bottom: 18px; }
    .overview-heading h2 { font-size: clamp(35px, 7.8vw, 52px); }
    .site-locale-en .overview-heading h2 { font-size: clamp(38px, 8.5vw, 56px); }
    .overview-story > p { font-size: 19px; line-height: 1.85; }
    .overview-story > p + p { margin-top: 20px; }
    .overview-link { margin-top: 22px; }
    .overview-media { width: min(100%, 320px); }
    .overview-media-label { top: 18px; left: 18px; }
    .overview-media figcaption { right: 18px; bottom: 18px; left: 18px; }
    .overview-stats { margin-top: 36px; gap: 0 20px; }
    .overview-stats > div { min-height: 152px; justify-content: space-between; gap: 16px; padding: 22px 0; }
    .overview-stats dt { gap: 8px; font-size: 14px; }
    .overview-stats dt > span { display: none; }
    .overview-stats dd { font-size: clamp(46px, 12vw, 68px); }
    .overview-stats sup { margin-left: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .overview-number.is-rolling { color: #176fc0; }
    .overview-number-reels { display: none; }
}

/* Brand wall continues the overview's pale surface. Its long outgoing arc is
   the original overview gradient, moved here rather than duplicated at the seam. */
.deck-slide.brand-wall {
    --overview-departure-y: clamp(420px, 33vw, 560px);
    display: block;
    padding: 48px 54px calc(var(--overview-departure-y) * .82);
    background: var(--deck-surface-ice);
    color: #173e60;
    isolation: isolate;
}
.brand-wall-shell { width: min(100%, 1260px); }
.brand-wall-atmosphere { position: absolute; inset: 0 0 20%; overflow: hidden; pointer-events: none; mask-image: linear-gradient(180deg,transparent,#000 12%,#000 70%,transparent); -webkit-mask-image: linear-gradient(180deg,transparent,#000 12%,#000 70%,transparent); }
.brand-wall-atmosphere::before {
    content: ""; position: absolute; inset: 18% -15% 0;
    background: radial-gradient(ellipse at 25% 42%, rgba(179, 215, 255, .42), transparent 48%),
        radial-gradient(ellipse at 77% 64%, rgba(136, 211, 237, .24), transparent 46%);
}
.brand-wall-atmosphere i {
    position: absolute; width: 1100px; height: 600px; left: 50%; top: 32%;
    border: 1px solid rgba(53, 130, 199, .075); border-radius: 50%; transform: translateX(-50%) rotate(-16deg);
}
.brand-wall-atmosphere i + i { width: 1400px; height: 720px; top: 27%; transform: translateX(-50%) rotate(12deg); }
.brand-wall-heading { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; }
.brand-wall-kicker { margin: 0 0 22px; color: #4177a5; font: 12px/1.6 Arial, sans-serif; letter-spacing: .2em; }
.brand-wall-heading h2 { margin: 0; font-size: clamp(40px, 4.2vw, 60px); font-weight: 500; line-height: 1.32; letter-spacing: -.05em; }
.brand-wall-heading h2 > span { display: block; }
.brand-wall-heading h2 > span + span { color: #257ed3; }
.site-locale-en .brand-wall-heading h2 { line-height: 1.14; letter-spacing: -.045em; }
.brand-wall-intro { margin: 24px auto 0; max-width: 540px; color: #56768e; font-size: 16px; line-height: 1.8; }
.brand-wall-stage {
    margin-top: 42px;
    transform: perspective(1400px) rotateX(var(--brand-tilt-x, 0deg)) rotateY(var(--brand-tilt-y, 0deg));
    transition: transform .5s ease-out;
}
.brand-wall-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.brand-wall-column { display: grid; gap: 24px; min-width: 0; transform: translate3d(0, var(--brand-shift, 0px), 0); transition: transform .35s ease-out; }
.brand-wall-column:nth-child(1) { padding-top: 80px; }
.brand-wall-column:nth-child(2) { padding-top: 0; }
.brand-wall-column:nth-child(3) { padding-top: 116px; }
.brand-wall-column:nth-child(4) { padding-top: 46px; }
.brand-wall-item, .brand-wall-reveal { min-width: 0; }
.brand-wall-card {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-width: 0; height: clamp(128px, 10.6vw, 152px); padding: 14px 22px;
    border: 1px solid rgba(42, 83, 124, .13); border-radius: 4px;
    background: rgba(255, 255, 255, .16);
    box-shadow: none;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
/* Monochrome marks share one quiet surface; no alternating white tiles or recoloring. */
.brand-wall-card.has-logo::after {
    content: ""; position: absolute; bottom: 12px; left: calc(50% - 14px);
    width: 28px; height: 1px; background: #397ebc; pointer-events: none;
    opacity: 0; transform: scaleX(.4); transition: opacity .3s ease, transform .3s ease;
}
.brand-wall-slot { position: absolute; top: 14px; left: 17px; color: #62849f; font: 12px/1 Arial, sans-serif; letter-spacing: .08em; }
.brand-wall-placeholder { display: grid; justify-items: center; gap: 10px; min-width: 0; color: #4b789d; text-align: center; }
.brand-wall-placeholder strong { max-width: 100%; overflow-wrap: anywhere; font: 500 clamp(16px, 1.65vw, 23px)/1.25 Arial, "Microsoft YaHei", sans-serif; letter-spacing: .1em; }
.brand-wall-placeholder-note { color: #648399; font-size: 12px; letter-spacing: .08em; line-height: 1.5; }
.brand-wall-placeholder-mark { position: relative; width: 27px; height: 18px; margin-bottom: 3px; }
.brand-wall-placeholder-mark::before, .brand-wall-placeholder-mark::after { content: ""; position: absolute; width: 17px; height: 17px; border: 1px solid #8bb4d4; border-radius: 50%; left: 0; top: 0; }
.brand-wall-placeholder-mark::after { left: 10px; }
.brand-wall-column:nth-child(even) .brand-wall-placeholder-mark::before,
.brand-wall-column:nth-child(even) .brand-wall-placeholder-mark::after { border-radius: 3px; transform: rotate(45deg) scale(.8); }
.brand-wall-logo { display: block; width: 100%; height: 100%; max-width: 224px; max-height: 114px; object-fit: contain; transition: transform .35s ease; }
.brand-wall-footnote { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 84px 0 0; color: #56768e; font-size: 12px; line-height: 1.7; text-align: center; }
.brand-wall-footnote > span { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: #74aada; }
@media (hover: hover) and (pointer: fine) {
    .brand-wall-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .58); border-color: rgba(42, 108, 172, .32); }
    .brand-wall-card:hover .brand-wall-logo { transform: scale(1.025); }
    .brand-wall-card.has-logo:hover::after { opacity: .7; transform: scaleX(1); }
}
@media (max-width: 1000px) {
    .deck-slide.brand-wall { padding-right: 32px; padding-left: 32px; }
    .brand-wall-grid, .brand-wall-column { gap: 18px; }
    .brand-wall-card { padding: 14px 16px; }
}
@media (max-width: 760px) {
    .deck-slide.brand-wall { --overview-departure-y: 340px; padding: 36px 22px calc(var(--overview-departure-y) * .82); }
    .brand-wall-heading h2 { font-size: clamp(32px, 8vw, 46px); }
    .brand-wall-kicker { margin-bottom: 18px; }
    .brand-wall-intro { margin-top: 20px; font-size: 14px; }
    .brand-wall-stage { margin-top: 32px; transform: none; }
    .brand-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .brand-wall-column { display: contents; }
    .brand-wall-card { height: 104px; padding: 12px; }
    .brand-wall-slot { top: 12px; left: 12px; }
    .brand-wall-placeholder { gap: 8px; }
    .brand-wall-placeholder-mark { display: none; }
    .brand-wall-placeholder strong { font-size: 16px; letter-spacing: .03em; }
    .brand-wall-placeholder-note { font-size: 12px; letter-spacing: 0; }
    .brand-wall-logo { max-height: 78px; }
    .brand-wall-footnote { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-wall-stage, .brand-wall-column, .brand-wall-card, .brand-wall-card:hover { transform: none; transition: none; }
    .brand-wall-logo, .brand-wall-card:hover .brand-wall-logo,
    .brand-wall-card.has-logo::after, .brand-wall-card.has-logo:hover::after { transform: none; transition: none; }
}

.ecosystem-slide {
    --ecosystem-exit: clamp(300px, 26vw, 400px);
    padding-bottom: calc(var(--ecosystem-exit) * .82 + 72px);
    color: #f3f8ff;
    background: linear-gradient(180deg, var(--deck-surface-blue), #0961c4 46%, var(--deck-surface-blue-deep));
    isolation: isolate;
}
.ecosystem-slide::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 80px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, var(--deck-surface-blue), rgba(18, 106, 204, 0));
}
.ecosystem-slide::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: calc(var(--ecosystem-exit) * .82);
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(ellipse 105vw var(--ecosystem-exit) at 50% calc(var(--ecosystem-exit) * -.2),
        rgba(7, 85, 189, 0) 52%, #2c78ce 60%, #6a9fdf 70%, #a5c7ee 80%, #d2e5f9 90%, var(--deck-surface-ice) 100%);
}
.ecosystem-atmosphere {
    position: absolute;
    inset: 0 -10%;
    pointer-events: none;
    background: radial-gradient(ellipse at 70% 33%, rgba(97, 202, 255, .06), transparent 53%);
    transform: translateY(var(--ecosystem-depth, 0px));
}
.ecosystem-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
    align-items: end;
    gap: clamp(36px, 6vw, 100px);
    scroll-margin-top: 104px;
}
.ecosystem-kicker { margin: 0 0 26px; color: var(--deck-on-blue-muted); font: 12px/1.5 Arial, sans-serif; letter-spacing: .18em; }
.ecosystem-kicker span { margin-right: 16px; color: var(--deck-on-blue-muted); }
.ecosystem-heading h2 { margin: 0; font-size: clamp(42px, 4.6vw, 68px); font-weight: 500; letter-spacing: -.04em; line-height: 1.23; }
.ecosystem-heading h2 span { display: block; }
.ecosystem-heading h2 span + span { color: var(--deck-on-blue-accent); }
.ecosystem-intro > p { margin: 0; color: var(--deck-on-blue-muted); font-size: 16px; line-height: 1.95; }
.ecosystem-pillars { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 0; margin: 26px 0 3px; list-style: none; }
.ecosystem-pillars li { color: var(--deck-on-blue-muted); font: 12px/1.5 Arial, sans-serif; letter-spacing: .1em; }
.ecosystem-pillars li + li::before { content: "/"; margin-right: 22px; color: #73abdb; }
.ecosystem-flow { --ecosystem-progress: 1; --timeline-height: clamp(185px, 19vw, 260px); position: relative; display: grid; margin-top: 76px; }
.ecosystem-map { position: relative; grid-area: 1 / 1; height: var(--timeline-height); pointer-events: none; }
.ecosystem-route { display: block; width: 100%; height: 100%; overflow: visible; }
.ecosystem-route path { vector-effect: non-scaling-stroke; }
.ecosystem-route-base { stroke: rgba(159, 210, 248, .14); stroke-width: 1; }
.ecosystem-route-light {
    stroke: url(#ecosystemRouteColor);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--ecosystem-progress));
    filter: drop-shadow(0 0 5px rgba(108, 199, 255, .35));
}
.ecosystem-marker { position: absolute; left: var(--milestone-x); top: calc(var(--timeline-height) * var(--milestone-y)); width: 12px; height: 12px; transform: translate(-50%, -50%); }
/* Each caption and its dot share the same point on M0 234 C400 234 800 22 1200 22. */
.marker-2006, .ecosystem-steps li:nth-child(1) { --milestone-x: 8.3333%; --milestone-y: .88395655; }
.marker-2011, .ecosystem-steps li:nth-child(2) { --milestone-x: 25%; --milestone-y: .77259615; }
.marker-2016, .ecosystem-steps li:nth-child(3) { --milestone-x: 41.6667%; --milestone-y: .59328704; }
.marker-2018, .ecosystem-steps li:nth-child(4) { --milestone-x: 58.3333%; --milestone-y: .39132835; }
.marker-2020, .ecosystem-steps li:nth-child(5) { --milestone-x: 75%; --milestone-y: .21201923; }
.marker-now, .ecosystem-steps li:nth-child(6) { --milestone-x: 91.6667%; --milestone-y: .10065883; }
.ecosystem-marker span { position: absolute; bottom: 30px; left: 50%; color: #d1ecff; font: 300 30px/1 Arial, sans-serif; letter-spacing: -.035em; white-space: nowrap; transform: translateX(-50%); }
.ecosystem-marker i { display: block; width: 12px; height: 12px; border: 3px solid #b9eaff; border-radius: 50%; background: #f2fbff; box-shadow: 0 0 0 6px rgba(133, 216, 255, .07), 0 0 20px rgba(106, 202, 255, .45); transition: background .35s, box-shadow .35s; }
.ecosystem-slide.is-motion .ecosystem-marker:not(.is-passed) i { border-color: #8dbde9; background: var(--deck-surface-blue-deep); box-shadow: none; }
.ecosystem-steps { position: relative; display: grid; grid-area: 1 / 1; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 0; list-style: none; padding: 0; margin: 0; }
.ecosystem-steps li { position: relative; min-width: 0; margin-top: calc(var(--timeline-height) * var(--milestone-y) + 28px); padding: 0 14px; text-align: center; }
.ecosystem-step-date { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; color: #a5deff; font: 22px/1.3 Arial, sans-serif; }
.ecosystem-steps h3 { margin: 0 0 12px; color: #f4f9ff; font-size: 21px; font-weight: 500; letter-spacing: -.025em; line-height: 1.45; }
.ecosystem-steps p { max-width: 180px; margin: 0 auto; color: var(--deck-on-blue-muted); font-size: 16px; line-height: 1.85; }
.ecosystem-steps h3, .ecosystem-steps p { overflow-wrap: anywhere; hyphens: auto; }
.ecosystem-slide:not(.is-in-view) .ecosystem-marker i,
.ecosystem-slide:not(.is-in-view) .ecosystem-steps li::before { transition: none; }
@media (max-width: 1120px) {
    .ecosystem-heading { gap: 36px; }
    .ecosystem-heading h2 { font-size: clamp(38px, 4.6vw, 52px); }
    .ecosystem-heading { grid-template-columns: 1fr; gap: 28px; scroll-margin-top: 92px; }
    .ecosystem-intro { max-width: 600px; }
    .ecosystem-flow { display: block; margin-top: 42px; }
    .ecosystem-map { display: none; }
    .ecosystem-steps { display: block; padding-left: 34px; }
    .ecosystem-steps::before { content: ""; position: absolute; top: 32px; bottom: 18px; left: 5px; width: 1px; background: linear-gradient(180deg, rgba(148, 215, 255, .35), rgba(148, 215, 255, .12) 85%, transparent); }
    .ecosystem-steps li { margin-top: 0; padding: 20px 0 34px; text-align: left; }
    .ecosystem-steps li:last-child { padding-bottom: 0; }
    .ecosystem-step-date { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 30px; font-weight: 300; letter-spacing: -.03em; }
    .ecosystem-steps li::before { content: ""; position: absolute; left: -34px; top: 34px; width: 11px; height: 11px; border: 3px solid #b9eaff; border-radius: 50%; background: #f2fbff; box-shadow: 0 0 0 5px rgba(133, 216, 255, .07), 0 0 16px rgba(106, 202, 255, .35); transition: background .3s, box-shadow .3s; }
    .ecosystem-slide.is-motion .ecosystem-steps li:not(.is-passed)::before { border-color: #8dbde9; background: var(--deck-surface-blue-deep); box-shadow: none; }
    .ecosystem-steps h3 { margin: 10px 0; font-size: 24px; }
    .ecosystem-steps p { max-width: 620px; margin: 0; }
}
@media (max-width: 760px) {
    .deck-slide.ecosystem-slide { --ecosystem-exit: 280px; padding: 72px 22px calc(var(--ecosystem-exit) * .82 + 52px); }
    .ecosystem-heading h2 { font-size: clamp(34px, 9vw, 48px); }
    .ecosystem-kicker { margin-bottom: 22px; letter-spacing: .12em; }
    .ecosystem-kicker span { margin-right: 10px; }
    .ecosystem-pillars { gap: 12px; }
    .ecosystem-pillars li { letter-spacing: .06em; }
    .ecosystem-pillars li + li::before { margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ecosystem-atmosphere { transform: none; }
    .ecosystem-marker i, .ecosystem-steps li::before { transition: none; }
}


/* Honor masonry: natural image proportions, fine translucent borders. */
.deck-slide.honors-slide {
    --honors-exit: clamp(320px, 28vw, 440px);
    padding-top: clamp(28px, 4vw, 64px);
    padding-bottom: calc(var(--honors-exit) * .82 + 64px);
    color: #173657;
    background: linear-gradient(180deg, var(--deck-surface-ice), #eef6ff 32%, #f8fbff 68%, var(--deck-surface-ice));
    isolation: isolate;
}
.honors-slide::after {
    content: ""; position: absolute; inset: auto 0 0;
    height: calc(var(--honors-exit) * .82); pointer-events: none;
    background: radial-gradient(ellipse 105vw var(--honors-exit) at 50% calc(var(--honors-exit) * -.2),
        rgba(244,249,255,0) 52%, #d7eafb 60%, #a2ccee 70%, #64a8e5 80%, #2a82d6 90%, var(--deck-surface-blue) 100%);
}
.honors-atmosphere {
    position: absolute; inset: 120px -20% 20%; pointer-events: none;
    background: radial-gradient(ellipse at 70% 34%, rgba(145,194,248,.2), transparent 55%),
        radial-gradient(ellipse at 24% 70%, rgba(189,222,255,.24), transparent 46%);
    mask-image: linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
    -webkit-mask-image: linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
}
.honors-shell { max-width: 1160px; }
.honors-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 104px; }
.honors-heading { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); align-items: end; gap: 70px; }
.honors-kicker { display: flex; gap: 22px; margin: 0 0 26px; color: #456b91; font: 12px/1.6 Arial,sans-serif; letter-spacing: .16em; }
.honors-kicker > span { color: #376cad; letter-spacing: .02em; white-space: nowrap; }
.honors-heading h2 { margin: 0; font-size: clamp(36px,4.2vw,60px); font-weight: 500; line-height: 1.28; letter-spacing: -.05em; }
.honors-heading h2 > span { display: block; }
.honors-heading h2 > span:last-child { color: #3473b3; }
.honors-intro { padding-bottom: 5px; }
.honors-intro p { margin: 16px 0 0; max-width: 340px; color: #58728e; font-size: 16px; line-height: 1.95; }
.honors-intro .honors-label { margin-top: 0; color: #1a406a; font-size: 19px; font-weight: 500; letter-spacing: .08em; }
.honors-gallery {
    position: relative; column-count: 3; column-gap: 28px;
    --honor-row-gap: 36px; box-sizing: border-box;
    margin: 54px 0 0; padding: 16px 0 20px; list-style: none;
}
.honors-item { display: inline-block; vertical-align: top; width: 100%; min-width: 0; margin-bottom: var(--honor-row-gap); break-inside: avoid; }
.honors-gallery.is-masonry .honors-item { position: absolute; margin-bottom: 0; }
.honors-drift { transform: translateY(var(--honor-shift,0px)); }
.honors-card { margin: 0; }
.honors-frame {
    --honor-inset: 8px;
    position: relative; display: block; width: 100%; padding: var(--honor-inset);
    box-sizing: border-box; border: 1px solid rgba(69,111,155,.24); border-radius: 6px;
    background: linear-gradient(145deg,rgba(255,255,255,.45),rgba(230,240,251,.18));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 12px 30px -26px rgba(32,71,118,.18);
}
.honors-frame img {
    display: block; width: 100%; height: auto;
    object-fit: contain; opacity: 1; filter: none; cursor: default;
}
.honors-frame.has-image { isolation: isolate; }
.honors-frame.has-image::after {
    content: ""; position: absolute; inset: var(--honor-inset); z-index: 1;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(117,200,255,.06) 0%, rgba(63,145,233,.12) 48%, rgba(17,85,179,.28) 100%);
    opacity: 1; transition: opacity .45s ease;
}
@media (hover: hover) and (pointer: fine) {
    .honors-item:hover .honors-frame.has-image::after { opacity: 0; }
}
.honors-frame.is-placeholder { display: grid; aspect-ratio: 4 / 3; }
.honors-placeholder {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    gap: 12px; min-width: 0; min-height: 0; padding: 22px 10px;
    background: radial-gradient(ellipse at 50% 35%,#fff,#eef5fd 85%);
    box-shadow: inset 0 0 0 1px rgba(125,161,197,.2); text-align: center;
}
.honors-placeholder strong { color: #42678d; font: 500 15px/1.3 Arial,sans-serif; letter-spacing: .2em; }
.honors-placeholder > span:last-child { color: #5c7690; font-size: 12px; line-height: 1.6; }
.honors-placeholder-orbit { position: relative; display: block; width: 44px; height: 44px; margin-bottom: 4px; border: 1px solid #b9cfe4; border-radius: 50%; }
.honors-placeholder-orbit::before { content: ""; position: absolute; inset: 8px; border: 1px solid #c8dbee; transform: rotate(45deg); }
.honors-placeholder-orbit i { position: absolute; width: 5px; height: 5px; right: 3px; top: 4px; border-radius: 50%; background: #5995cc; box-shadow: 0 0 0 4px #e9f3fd; }
.honors-footnote { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 0; color: #627c97; font-size: 12px; line-height: 1.7; text-align: center; }
.honors-footnote > span { width: 4px; height: 4px; flex-shrink: 0; border-radius: 50%; background: #699bd0; }
.honors-toggle { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 44px; padding: 0 22px; margin: 30px auto 0; color: #164f82; background: transparent; border: 1px solid #aecbe5; border-radius: 24px; font: inherit; font-size: 14px; cursor: pointer; scroll-margin-top: 92px; }
.honors-slide.is-compact-honors:not(.is-expanded) .honors-item:nth-child(n+7) { display: none; }
.honors-toggle[hidden] { display: none; }
.honors-toggle i { font: normal 20px/1 Arial,sans-serif; }
.honors-toggle:hover { background: #e0effc; }
.honors-toggle:focus-visible { outline: 2px solid #176bc0; outline-offset: 5px; }
@media (max-width:1120px) {
    .honors-anchor { scroll-margin-top: 92px; }
    .honors-heading { gap: 38px; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
    .honors-gallery { column-count: 2; column-gap: 26px; }
}
@media (max-width:760px) {
    .deck-slide.honors-slide { --honors-exit: 300px; padding-top: 26px; padding-bottom: calc(var(--honors-exit) * .82 + 40px); }
    .honors-heading { grid-template-columns: minmax(0,1fr); gap: 25px; }
    .honors-kicker { gap: 16px; margin-bottom: 20px; letter-spacing: .12em; }
    .honors-heading h2 { font-size: clamp(32px,6vw,42px); }
    .honors-intro p { max-width: 480px; font-size: 15px; line-height: 1.85; margin-top: 10px; }
    .honors-intro .honors-label { font-size: 17px; }
    .honors-gallery { margin-top: 30px; column-gap: 22px; }
    .honors-drift { transform: none; }
}
@media (max-width:600px) {
    .honors-gallery { column-count: 1; width: min(100%,400px); margin-right: auto; margin-left: auto; padding-bottom: 0; --honor-row-gap: 34px; }
    .honors-footnote { margin-top: 32px; }
}
@media (prefers-reduced-motion:reduce) {
    .honors-drift { transform: none; }
    .honors-frame img,.honors-frame.has-image::after { transition: none; }
}


/* Final chapter: city connections, a calm map and useful contact information. */
.deck-slide.connect-slide {
    display: block; padding-top: 36px; padding-bottom: 24px; color: #edf7ff;
    background: linear-gradient(180deg, var(--deck-surface-blue), #0b61c5 48%, var(--deck-surface-blue-deep));
    isolation: isolate;
}
.connect-atmosphere {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 73% 24%,rgba(97,202,255,.06),transparent 58%);
    mask-image: linear-gradient(180deg,transparent,#000 22%,#000 80%,transparent);
    -webkit-mask-image: linear-gradient(180deg,transparent,#000 22%,#000 80%,transparent);
}
.connect-opening { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr); gap: 24px; align-items: center; min-height: 360px; }
.connect-heading { position: relative; z-index: 2; }
.connect-kicker { display: flex; gap: 22px; margin: 0 0 26px; color: var(--deck-on-blue-muted); font: 12px/1.6 Arial,sans-serif; letter-spacing: .16em; }
.connect-kicker > span { color: var(--deck-on-blue-muted); white-space: nowrap; letter-spacing: .02em; }
.connect-heading h2 { margin: 0; font-size: clamp(40px,4.4vw,64px); line-height: 1.26; font-weight: 500; letter-spacing: -.045em; }
.connect-heading h2 > span { display: block; }
.connect-heading h2 > span:last-child { color: var(--deck-on-blue-accent); }
.site-locale-en .connect-heading h2 { font-size: clamp(38px,3.9vw,56px); }
.connect-intro { max-width: 390px; margin: 25px 0 0; color: var(--deck-on-blue-muted); font-size: 16px; line-height: 1.9; }
.connect-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 46px; padding: 0 22px; margin-top: 30px; border: 1px solid transparent; border-radius: 24px; background: #edf7ff; color: #153a61; font-size: 14px; }
.connect-cta > span { font-size: 23px; transition: transform .25s ease; }
.connect-cta:hover { color: #0b3159; background: #cbeaff; }
.connect-cta:hover > span { transform: translate(2px,-2px); }
.connect-map { position: relative; min-width: 0; margin: 0; }
.connect-map-surface { position: relative; aspect-ratio: 1200 / 640; }
.connect-map-land, .connect-map-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.connect-map-land { object-fit: contain; }
.connect-map-routes { overflow: visible; pointer-events: none; }
.connect-route-base { stroke: rgba(91,171,247,.13); stroke-width: 1; }
.connect-route-light { stroke: url(#connectRouteColor); stroke-width: 1.7; }
.connect-route-light path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--connect-progress,1)); }
.connect-city-link { stroke: #b5ecff; stroke-width: 1.5; }
.connect-map-leader { stroke: #73b9ee; stroke-width: 1; opacity: .62; }
.connect-map-pin { fill: #dcf7ff; stroke: #97d9ff; stroke-width: 1; }
.connect-map-pin .connect-pin-halo { fill: rgba(65,161,255,.08); stroke: rgba(114,202,255,.45); transform-box: fill-box; transform-origin: center; }
.connect-map-pin.pin-shenzhen { fill: #a0efff; }
.connect-map-label { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 6px 10px; color: #fff; line-height: 1.45; border-left: 1px solid rgba(185,234,255,.55); border-radius: 2px; background: rgba(7,85,189,.82); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.connect-map-label.is-chongqing { top: 17%; left: 58%; }
.connect-map-label.is-shenzhen { top: 62%; left: 79%; transform: translateX(-50%); }
.connect-map-label > span { font-size: 16px; }
.connect-map-label > small { font-size: 12px; color: var(--deck-on-blue-muted); white-space: nowrap; }
.connect-map-label:hover > span { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.connect-directory { --connect-column-space: clamp(24px,2.6vw,38px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) minmax(0,.85fr); gap: 0; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(165,206,246,.22); }
.connect-office { display: flex; flex-direction: column; min-width: 0; padding-right: var(--connect-column-space); scroll-margin-top: 110px; border-radius: 2px; }
.connect-office + .connect-office { padding-left: var(--connect-column-space); border-left: 1px solid rgba(165,206,246,.17); }
.connect-office:target { outline: 1px solid rgba(128,202,255,.55); outline-offset: 13px; }
.connect-office-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.connect-office-code { color: var(--deck-on-blue-accent); font: 400 32px/1 Arial,sans-serif; letter-spacing: -.03em; }
.connect-office-heading p { margin: 0 0 5px; color: var(--deck-on-blue-muted); font-size: 12px; line-height: 1.5; }
.connect-office-heading h3 { margin: 0; font-size: 25px; font-weight: 500; line-height: 1.25; }
.connect-office-index { align-self: flex-start; margin-left: auto; color: var(--deck-on-blue-muted); font: 12px/1.6 Arial,sans-serif; }
.connect-office address { flex: 1; margin: 0; color: var(--deck-on-blue-muted); font-size: 15px; font-style: normal; line-height: 1.85; overflow-wrap: anywhere; }
.connect-office-phone { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 24px 0 0; }
.connect-office-phone > span { color: var(--deck-on-blue-muted); font-size: 12px; line-height: 1.6; }
.connect-office-phone > a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: #edf7ff; font: 400 clamp(20px,1.7vw,24px)/1.4 Arial,sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.connect-office-phone > a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.connect-copy { display: inline-flex; align-items: center; align-self: flex-start; justify-content: space-between; gap: 20px; min-height: 44px; padding: 0; margin-top: 8px; border: 0; border-bottom: 1px solid rgba(185,234,255,.4); border-radius: 0; background: transparent; color: var(--deck-on-blue-muted); font: inherit; font-size: 13px; cursor: pointer; }
.connect-copy[hidden] { display: none; }
.connect-copy:hover { color: #fff; border-color: #b8e4ff; }
.connect-copy > span { font-size: 19px; }
.connect-channels { display: flex; flex-direction: column; min-width: 0; padding-left: var(--connect-column-space); border-left: 1px solid rgba(165,206,246,.17); }
.connect-channel-kicker { margin: 0 0 20px; color: var(--deck-on-blue-muted); font-size: 14px; line-height: 1.5; }
.connect-channels dl { margin: 0; }
.connect-channels dl > div + div { margin-top: 22px; }
.connect-channels dt { color: var(--deck-on-blue-muted); font: 12px/1.6 Arial,sans-serif; letter-spacing: .08em; }
.connect-channels dd { margin: 0; }
.connect-channels dd a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; color: #edf7ff; font-size: clamp(17px,1.65vw,21px); line-height: 1.5; overflow-wrap: anywhere; }
.connect-channels dd a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.connect-channels dd a > span { color: #96caff; font-size: 16px; }
.connect-more { display: inline-flex; align-items: center; align-self: flex-start; gap: 20px; min-height: 44px; margin-top: auto; padding-top: 18px; color: var(--deck-on-blue-muted); font-size: 13px; }
.connect-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(165,206,246,.17); color: var(--deck-on-blue-muted); font-size: 12px; line-height: 1.75; }
.connect-footer p { flex: 1 1 300px; margin: 0; }
.connect-footer a { color: inherit; }
.connect-footer a:hover { color: #edf7ff; }
.connect-top { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; }
.connect-top > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(158,204,248,.28); border-radius: 50%; font-size: 18px; color: #c1e5ff; }
.connect-slide a:focus-visible, .connect-copy:focus-visible { outline: 2px solid #9fdcff; outline-offset: 5px; border-radius: 2px; }
.connect-feedback { position: fixed; z-index: 30; bottom: 24px; left: 50%; max-width: calc(100% - 44px); width: max-content; margin: 0; padding: 12px 20px; border: 1px solid rgba(169,209,246,.5); border-radius: 8px; background: #e5f3ff; color: #1f4568; box-shadow: 0 8px 30px rgba(1,15,35,.25); font-size: 14px; line-height: 1.6; opacity: 0; transform: translateX(-50%); pointer-events: none; }
.connect-feedback:not(:empty) { opacity: 1; }
.connect-clipboard { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
@media (max-width:1120px) {
    .connect-office { scroll-margin-top: 94px; }
    .connect-heading h2, .site-locale-en .connect-heading h2 { font-size: 44px; }
    .connect-directory { row-gap: 28px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .connect-office + .connect-office { padding-right: 0; }
    .connect-channels { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 28px; padding: 26px 0 0; border-left: 0; border-top: 1px solid rgba(165,206,246,.17); }
    .connect-channel-kicker { grid-column: 1 / -1; margin-bottom: 14px; }
    .connect-channels dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
    .connect-channels dl > div + div { margin-top: 0; }
    .connect-more { align-self: end; margin-top: 0; padding-top: 0; }
    .connect-map-label > span { font-size: 14px; }
}
@media (max-width:1000px) {
    .connect-opening { grid-template-columns: minmax(0,1fr); min-height: 0; gap: 30px; }
    .connect-heading { max-width: 580px; }
    .connect-heading h2, .site-locale-en .connect-heading h2 { font-size: 52px; }
    .connect-intro { max-width: 520px; }
    .connect-map { width: min(100%,760px); margin: 0 auto; }
    .connect-map-label > span { font-size: 16px; }
    .connect-directory { margin-top: 42px; }
}
@media (max-width:760px) {
    .deck-slide.connect-slide { padding: 30px 22px 24px; }
    .connect-kicker { margin-bottom: 22px; gap: 16px; letter-spacing: .12em; }
    .connect-heading h2, .site-locale-en .connect-heading h2 { font-size: clamp(36px,8.3vw,48px); }
    .connect-intro { margin-top: 20px; font-size: 15px; line-height: 1.9; }
    .connect-cta { margin-top: 24px; }
    .connect-map-land { filter: brightness(1.1); }
    .connect-directory { grid-template-columns: minmax(0,1fr); gap: 30px; margin-top: 34px; padding-top: 30px; }
    .connect-office { padding-right: 0; }
    .connect-office + .connect-office { padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(165,206,246,.17); }
    .connect-office-heading { margin-bottom: 16px; }
    .connect-office address { font-size: 15px; }
    .connect-office-phone { margin-top: 18px; }
    .connect-channels { display: block; }
    .connect-channels dl { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .connect-channels dd a { min-height: 44px; font-size: 19px; }
    .connect-more { margin-top: 16px; }
    .connect-footer { gap: 10px 20px; margin-top: 30px; padding-top: 22px; }
    .connect-top { margin-left: auto; }
    .connect-map-label > span { font-size: 14px; }
    .connect-map-label.is-chongqing { left: 52%; top: 11%; }
    .connect-map-label.is-shenzhen { left: 79%; top: 64%; }
}
@media (prefers-reduced-motion:reduce) {
    .connect-cta > span { transition: none; }
}

@keyframes deckScrollCue {
    0% { opacity: 0; transform: translateY(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateY(11px); }
}


@media (max-width: 1120px) {
    .deck-slide { scroll-margin-top: 68px; }
    .hero-slide { scroll-margin-top: 0; }

}

@media (max-width: 1000px) {
    .hero-footer { justify-content: center; }
    .hero-origin,
    .hero-slide .deck-scroll-cue { display: none; }
}

@media (max-width: 760px) {
    .deck-slide {
        padding: 72px 22px;
    }

    .hero-slide {
        height: 100vh;
        height: 100svh;
        min-height: 640px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .hero-copy {
        top: clamp(136px, 18svh, 164px);
        width: calc(100% - 32px);
    }

    .hero-title-intro {
        margin-bottom: 16px;
        font-size: 16px;
        letter-spacing: .14em;
    }

    .hero-title-main {
        font-size: clamp(28px, 7vw, 38px);
        line-height: 1.2;
        letter-spacing: -.015em;
    }

    .hero-cn {
        max-width: 460px;
        margin-top: 18px;
        font-size: 16px;
        letter-spacing: .04em;
        line-height: 1.6;
    }

    .hero-footer {
        right: 18px;
        bottom: 30px;
        left: 18px;
        justify-content: center;
    }

    .hero-origin,
    .hero-slide .deck-scroll-cue { display: none; }

    .hero-actions .deck-button { min-width: 138px; }

    .deck-heading h2,
    .deck-copy h2 {
        font-size: 36px;
    }



}

/* Keep the headline breathing room without pushing the globe too far below
   the fold on short desktop/laptop viewports. */
@media (min-width: 761px) and (max-height: 740px) {
    .hero-copy { top: 144px; }
}

@media (max-width: 440px) {
    .hero-actions { width: min(100%, 340px); }
    .hero-actions .deck-button {
        flex: 1;
        min-width: 0;
        gap: 8px;
        padding: 0 10px;
        white-space: nowrap;
    }

}

@media (prefers-reduced-motion: reduce) {
    .deck-scroll-cue i::after {
        animation: none !important;
    }
}