/* ============================================================
   CHINA TECH IMMERSION PROGRAMME — overview page (china-immersion.html)
   Mirrors the "Go Beyond The China You Know" deck: navy canvas,
   Space Grotesk headings with the red full-stop, teal eyebrows,
   grey copy, numbered 01–04 rules and circular photography.
   Sections alternate navy / white like the rest of the site; the
   .ci-section--light block below re-colours everything for white.
   All selectors are prefixed .ci-.
   Circles are the one intentional exception to the sharp-corner rule.
   ============================================================ */

.ci-page { background: var(--navy); color: #fff; }
.ci-section:not(.ci-section--light) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Tech Corridor wordmark (replaces the Transfong logo on this site) ----
   The wordmark is 8:1, so it runs at a smaller height than the corporate logo's 36px. */
.ci-page .nav-logo-img { height: 20.4px; }
/* No Chinese version of this site: hide the shared nav's EN|中文 switch (script.js still expects the element, so it stays in the DOM). */
.ci-page .lang-toggle { display: none; }
.ci-page .footer-logo-img { height: 22.1px; }
@media (max-width: 720px) {
    .ci-page .nav-logo-img { height: 16.2px; }
    .ci-page .nav-logo { margin-right: 12px; }
}

/* ---- layout primitives --------------------------------------------- */
.ci-section {
    position: relative;
    padding: 112px 0;
    overflow: hidden;
    background: var(--navy);
}

.ci-wrap {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
}

.ci-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 72px;
    align-items: center;
}
.ci-split--top { align-items: start; margin-bottom: 0; }
.ci-split--middle { align-items: center; } /* photo cluster and list share a centre line */

/* subtle "network" texture used on alternating sections (deck background) */
.ci-section--dots::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.10) 1.2px, transparent 1.3px),
        radial-gradient(rgba(0, 177, 176, 0.10) 1.2px, transparent 1.3px);
    background-size: 34px 34px, 34px 34px;
    background-position: 0 0, 17px 17px;
    mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
    pointer-events: none;
}


/* ---- type ----------------------------------------------------------- */
.ci-eyebrow {
    font-family: var(--font-subtitle);
    font-weight: 700;
    font-size: 22px;
    color: var(--teal);
    margin-bottom: 18px;
}
.ci-h1 {
    /* Sized so "Go Beyond The" fits the copy column: three fixed lines as on the deck's title slide */
    font-size: clamp(40px, 5.9vw, 76px);
    line-height: 1.02;
    white-space: nowrap;
    color: #fff;
    margin-bottom: 28px;
}
/* The red full stop. styles.css draws it as a "." glyph in Arial Rounded, which sits ~0.014em lower
   than Space Grotesk's letters and stretches the line box. Here it is a geometric circle instead:
   same visual size as that glyph (0.18em), bottom edge on the baseline plus the letters' own round
   overshoot (0.014em), and no effect on line height. Works inline and as a flex item (.ci-to). */
.ci-page .title-red-dot {
    display: inline-block;
    overflow: hidden;            /* baseline = bottom edge of the box */
    color: transparent;          /* the "." glyph itself is hidden; the box is the dot */
    font-size: 1em;
    line-height: 0;
    width: 0.18em; height: 0.18em;
    border-radius: 50%;
    background: var(--red);
    vertical-align: baseline;
    position: relative; top: 0.014em;
    margin-left: 0.06em;
}
.ci-h2 {
    font-size: clamp(36px, 4.8vw, 64px);
    line-height: 1.06;
    color: #fff;
    margin-bottom: 18px;
}
.ci-sub {
    font-family: var(--font-subtitle);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.5;
    color: var(--teal);
    max-width: 760px;
    margin-bottom: 56px;
}
.ci-split .ci-sub { margin-bottom: 0; }
.ci-split--top .ci-sub { margin-bottom: 48px; } /* air above the 01–02 stack */
.ci-lead {
    font-size: 21px;
    line-height: 1.6;
    color: var(--navy-30);
    max-width: 560px;
}
.ci-note {
    margin-top: 72px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.62);
}

/* small red dot used as a separator / bullet */
.ci-dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--red);
    vertical-align: middle;
    margin: 0 10px;
    position: relative; top: -4px;
}
.ci-dot--xs { width: 7px; height: 7px; margin: 0 6px; top: -3px; }
/* "Itinerary • 1": centred on the cap height, so the dot sits on the same line as the I and the number */
.ci-route-n .ci-dot--xs, .ci-eyebrow .ci-dot--xs { top: -0.09em; }

/* ---- circles -------------------------------------------------------- */
.ci-circles {
    position: relative;
    justify-self: end;
    width: min(100%, 540px);
    aspect-ratio: 1 / 1;
}
.ci-circle {
    position: relative;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #06246f;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.ci-circle img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ci-circle--xl { width: 100%; }
.ci-circle--lg { width: 88%; }
.ci-circle--md { width: 280px; height: 280px; }
.ci-circle--sm { width: 42%; }
.ci-circle--route { width: 300px; height: 300px; margin: 0 auto 36px; }
.ci-circle--portrait { width: 220px; height: 220px; }
.ci-circle--xl, .ci-circle--lg, .ci-circle--sm { aspect-ratio: 1 / 1; }

.ci-circle--overlap {
    position: absolute;
    right: -4%;
    bottom: -6%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

/* placeholder circle — obvious, labelled, swap for the real photo later */
.ci-circle--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(0, 177, 176, 0.45), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(103, 121, 189, 0.55), transparent 55%),
        #0b2c7a;
    border: 1px dashed rgba(255, 255, 255, 0.35);
}
.ci-circle--ph .material-symbols-outlined {
    font-size: clamp(44px, 6vw, 76px);
    color: rgba(255, 255, 255, 0.55);
}
.ci-circle--ph::after {
    content: attr(data-ph);
    position: absolute;
    left: 0; right: 0; bottom: 14%;
    text-align: center;
    font-family: var(--font-subtitle);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    padding: 0 18%;
}

/* ---- hero ----------------------------------------------------------- */
.ci-hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 160px 0 128px;
}
/* ---- background layers (parallax) ---------------------------------------
   Each photo section has one absolutely positioned layer behind its content.
   The layer is taller than the section (overflows 34% top and bottom) and
   immersion.js slides it a little as the page scrolls, so the background moves
   slower than the content — the circles and copy scroll normally.
   Without JS or with reduced motion it simply shows the middle of the image. */
.ci-hero-bg, .ci-bg {
    position: absolute;
    left: 0; right: 0;
    top: -34%; bottom: -34%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    will-change: transform;
}
.ci-hero-bg { background-image: url('pictures/immersion/hero-bg.webp?v=80c1f517'); }
.ci-hero-bg--capital { background-image: url('pictures/immersion/hero-bg-capital.webp?v=80c1f517'); } /* itinerary 1: Beijing CBD, supplied navy-tinted */
.ci-hero-bg--southwest { background-image: url('pictures/immersion/hero-bg-southwest.webp?v=80c1f517'); }
.ci-hero-bg--zhejiang { background-image: url('pictures/immersion/hero-bg-zhejiang.webp?v=80c1f517'); } /* itinerary 4: Ningbo skyline, tinted from the deck photo */ /* itinerary 3: Chengdu Tianfu towers, tinted from the deck photo */
.ci-bg--itineraries { background-image: url('pictures/immersion/itineraries-bg.webp?v=80c1f517'); }
.ci-bg--track { background-image: url('pictures/immersion/track-bg.webp?v=80c1f517'); }
.ci-hero .ci-wrap { width: 100%; }

/* ---- numbered 01–04 list (USP + track record) ------------------------ */
.ci-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 72px;
}
.ci-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.ci-item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
/* single-column stack (USP points 01–02 beside the circles): one rule between items */
.ci-list--stack { grid-template-columns: 1fr; margin-bottom: 16px; }
.ci-list--stack .ci-item { border-bottom: 0; } /* the full-width rule above 03–04 closes the stack */
.ci-num {
    font-family: var(--font-subtitle);
    font-weight: 700;
    font-size: 22px;
    color: var(--red);
    line-height: 28.8px; /* = h3 24px × 1.2, so the number sits on the title's line */
}
.ci-item h3 {
    font-size: 24px;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.ci-item p {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

/* ---- itineraries ----------------------------------------------------- */
.ci-routes {
    display: grid;
    grid-template-columns: 1fr 14px 1fr 14px 1fr;
    column-gap: 36px;
    row-gap: 88px;
    align-items: start;
}
.ci-dot--between {
    margin: 0;
    top: 0;
    width: 14px; height: 14px;
    align-self: start;
    margin-top: 143px;         /* centre of the 300px circle */
    justify-self: center;
}
.ci-route {
    display: block;
    text-align: center;
    color: inherit;
    text-decoration: none;
    transition: transform var(--duration-normal) var(--ease-out);
}
.ci-route:hover { transform: translateY(-6px); }
/* D1 — a thin teal ring draws around the circle while the photo eases in.
   The figure's overflow is released so the ring can sit outside it; the photo keeps its own circle clip. */
.ci-circle--route { overflow: visible; }
.ci-circle--route img { border-radius: 50%; }
.ci-ring {
    position: absolute;
    inset: -9px;
    width: calc(100% + 18px); height: calc(100% + 18px);
    transform: rotate(-90deg);
    pointer-events: none;
}
.ci-ring circle {
    fill: none;
    stroke: var(--red);
    stroke-width: 2;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ci-route:hover .ci-ring circle { stroke-dashoffset: 0; }
.ci-route:hover .ci-circle--route img { transform: scale(1.06); }
.ci-route-n {
    font-family: var(--font-subtitle);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    margin-bottom: 8px;
}
.ci-route-soon { font-family: var(--font-subtitle); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin: 10px 0 0; }
.ci-route-title {
    font-size: clamp(17px, 1.72vw, 22px);
    line-height: 1.2;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.ci-route-region {
    font-family: var(--font-subtitle);
    font-weight: 700;
    font-size: 22px;
    color: var(--teal);
    margin-bottom: 8px;
}
.ci-route-cities {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.66);
    margin: 0;
}

/* ---- what one trip can deliver -------------------------------------- */
.ci-deliver {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px 56px;
}
.ci-deliver-item { display: flex; flex-direction: column; }
.ci-deliver-visual {
    position: relative;
    width: 280px;
    margin-bottom: 36px;
}
.ci-to {
    position: absolute;
    top: 0;
    left: 70%;
    display: flex;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
    font-size: 40px;
    line-height: 1;
    color: #fff;
    margin: 0;
    transform: translateY(14px);
}
.ci-to-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 73px; height: 73px;
    margin-right: 14px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1em; /* same size as Learn / Grow / Explore */
}
.ci-stats {
    list-style: none;
    margin: 0; padding: 0;
}
.ci-stats li {
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.74);
    padding: 7px 0;
    white-space: nowrap;
}
.ci-stats b {
    font-family: var(--font-subtitle);
    font-weight: 700;
    color: #fff;
    margin-right: 8px;
}
.ci-stats-note { color: rgba(255, 255, 255, 0.6); }
.ci-footnote {
    margin-top: 56px;
    text-align: right;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
}

/* ---- testimonials ---------------------------------------------------- */
.ci-quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    margin-top: 48px;
}
.ci-quote {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ci-portrait-wrap {
    position: relative;
    width: 220px;
    margin-bottom: 40px;
}
.ci-flag {
    position: absolute;
    right: -4px; bottom: -4px;
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 42px; line-height: 1;
    background: var(--navy);
    overflow: hidden;
}
.ci-flag img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.ci-qmark { display: block; height: 12px; margin-bottom: 14px; position: relative; width: 36px; }
.ci-qmark::before, .ci-qmark::after {
    content: '';
    position: absolute;
    top: 0;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--red);
}
.ci-qmark::before { left: 0; }
.ci-qmark::after  { left: 18px; }
.ci-quote p {
    font-size: 20px;
    line-height: 1.6;
    color: #fff;
    margin: 0 0 32px;
    flex: 1;
}
.ci-quote footer strong {
    display: block;
    font-family: var(--font-subtitle);
    font-weight: 700;
    font-size: 22px;
    color: var(--teal);
    margin-bottom: 6px;
}
.ci-quote footer span {
    display: block;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.66);
}

/* ---- CTA -------------------------------------------------------------- */
.ci-cta { padding-bottom: 144px; }
.ci-cta .ci-lead { margin-bottom: 64px; }
.ci-register {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 36px;
}
.ci-qr {
    width: 120px; height: 120px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ci-qr .material-symbols-outlined { font-size: 96px; color: var(--navy); }
.ci-lead-link { color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.ci-lead-link:hover { color: #fff; }
.ci-qr img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; box-sizing: border-box; }
.ci-register-text {
    font-family: var(--font-subtitle);
    font-weight: 700;
    font-size: 24px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    min-width: 420px;
    transition: color var(--duration-normal) var(--ease-out);
}
.ci-register:hover .ci-register-text { color: var(--teal); }
.ci-contact {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
.ci-contact a { color: var(--red); font-weight: 700; }

/* ---- track record: big red figures (slide 6 redesign) ------------------ */
.ci-split--track { align-items: center; gap: 96px; }
.ci-sub-strong { font-weight: 700; color: var(--teal); }
.ci-track-stats { display: flex; flex-direction: column; gap: 56px; }
.ci-track-row { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 72px; }
.ci-track-row .ci-track-desc { grid-column: 1 / -1; }
.ci-track-figure {
    display: flex; align-items: baseline; gap: 18px; flex-wrap: nowrap;
    margin: 0 0 10px;
    color: #fff;
}
.ci-track-figure b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(56px, 6vw, 84px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--teal);
}
.ci-track-figure > span {
    font-family: var(--font-subtitle);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    white-space: nowrap;
}
.ci-track-desc {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    max-width: 560px;
}
.ci-section--light .ci-track-figure { color: var(--navy); }
.ci-section--light .ci-track-desc { color: var(--text-secondary); }

/* ---- reveal + animations ------------------------------------------------
   immersion.js adds body.ci-anim only when IntersectionObserver exists and the
   visitor has not asked for reduced motion; observed elements get .ci-in when
   they scroll into view. Everything below is therefore off for reduced motion.
   Letters refer to the options chosen from animation-demo.html. */
.ci-anim .ci-copy, .ci-anim .ci-circles, .ci-anim .ci-route, .ci-anim .ci-deliver-item,
.ci-anim .ci-quote, .ci-anim .ci-track-stat, .ci-anim .ci-wrap > .ci-h2, .ci-anim .ci-wrap > .ci-sub {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ci-anim .ci-in, .ci-anim .ci-wrap > .ci-in { opacity: 1; transform: none; } /* second selector outranks the .ci-wrap > .ci-h2 rule above */

/* B — the red full stop pops in a beat after its title (or the block it sits in) has revealed */
.ci-anim .title-red-dot { transform: scale(0); transform-origin: 50% 50%; }
.ci-anim .ci-in .title-red-dot { animation: ciPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards; }
@keyframes ciPop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* C — list points: the rule lines wipe in from the left, then number and text rise (delays set per item in immersion.js) */
.ci-anim .ci-item { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ci-anim .ci-item.ci-in { clip-path: inset(0 0 0 0); }
.ci-anim .ci-item > .ci-num, .ci-anim .ci-item > div {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ci-anim .ci-item.ci-in > .ci-num, .ci-anim .ci-item.ci-in > div { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
    /* A — hero and Join: the big photo slowly breathes, the small hero circle floats */
    .ci-hero .ci-circle--xl img, .ci-cta .ci-circle--xl img {
        animation: ciDrift 16s ease-in-out infinite alternate;
        transform-origin: 60% 40%;
    }
    .ci-hero .ci-circle--overlap { animation: ciFloat 7s ease-in-out infinite; }
    @keyframes ciDrift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-2%, 1.5%); } }
    @keyframes ciFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

    /* H — every round photo eases in on hover (the drifting hero/Join photos keep their drift instead) */
    .ci-circle img { transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
    .ci-circle:hover img { transform: scale(1.06); }
    .ci-flag { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .ci-portrait-wrap:hover .ci-flag { transform: scale(1.15); }
}

/* ---- light (white) sections — colours re-mapped for a white background ---- */
.ci-section--light { background: var(--white); color: var(--navy); }
.ci-section--light .ci-sub { color: var(--text-secondary); } /* explanation lines use the light-section body colour */
.ci-section--light .ci-h1,
.ci-section--light .ci-h2,
.ci-section--light .ci-item h3,
.ci-section--light .ci-route-title,
.ci-section--light .ci-route-n,
.ci-section--light .ci-to,
.ci-section--light .ci-quote p { color: var(--navy); }
.ci-section--light .ci-lead,
.ci-section--light .ci-item p,
.ci-section--light .ci-route-cities,
.ci-section--light .ci-stats li,
.ci-section--light .ci-quote footer span,
.ci-section--light .ci-contact { color: var(--text-secondary); }
.ci-section--light .ci-note,
.ci-section--light .ci-stats-note,
.ci-section--light .ci-footnote { color: var(--text-light); }
.ci-section--light .ci-stats b { color: var(--navy); }
.ci-section--light .ci-item { border-top-color: rgba(1, 27, 100, 0.16); }
.ci-section--light .ci-item:nth-last-child(-n+2) { border-bottom-color: rgba(1, 27, 100, 0.16); }
.ci-section--light .ci-circle { box-shadow: 0 24px 60px rgba(1, 27, 100, 0.18); }
.ci-section--light .ci-circle--overlap { box-shadow: 0 24px 60px rgba(1, 27, 100, 0.22); }
.ci-section--light .ci-flag { background: var(--white); box-shadow: 0 6px 18px rgba(1, 27, 100, 0.15); }
.ci-section--light .ci-circle--ph {
    background:
        radial-gradient(circle at 30% 25%, rgba(0, 177, 176, 0.22), transparent 55%),
        radial-gradient(circle at 75% 80%, rgba(103, 121, 189, 0.28), transparent 55%),
        var(--navy-05);
    border: 1px dashed rgba(1, 27, 100, 0.35);
}
.ci-section--light .ci-circle--ph .material-symbols-outlined { color: rgba(1, 27, 100, 0.45); }
.ci-section--light .ci-circle--ph::after { color: rgba(1, 27, 100, 0.55); }
.ci-section--light .ci-register-text { border-color: rgba(1, 27, 100, 0.35); color: var(--navy); }
/* CTA on the site's light-grey section tint (--bg-section) so it separates from the navy footer */
.ci-section--light.ci-cta { background: var(--bg-section); }
.ci-section--light.ci-cta .ci-lead { color: var(--text-secondary); }
.ci-section--light.ci-cta .ci-lead-link { color: var(--teal); }
.ci-section--light.ci-cta .ci-lead-link:hover { color: var(--navy); }
.ci-section--light.ci-cta .ci-qr { box-shadow: 0 0 0 1px var(--navy-20), 0 10px 30px rgba(1, 27, 100, 0.12); }
.ci-section--light.ci-cta .ci-register:hover .ci-register-text { color: var(--teal); }
.ci-section--light.ci-cta .ci-circle { box-shadow: 0 30px 80px rgba(1, 27, 100, 0.22); }

/* ---- itinerary pages (.it-) ------------------------------------------------
   Components used only on itinerary-N.html. Same tokens, same navy/white rhythm;
   backgrounds alternate hero (navy) -> learn (white) -> companies (navy) ->
   expo (white) -> culture (navy) -> programme (white) -> join (light grey). */

/* hero: dotted map with the region ringed (left), copy over photos (right) — as on the deck's title slide */
.ci-hero.it-hero { padding: 150px 0 88px; min-height: 0; }
.it-hero .ci-h1 { white-space: nowrap; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.1; margin-bottom: 14px; } /* spans ~42% of the viewport, as on the slide */
.it-hero .ci-h1 .ci-dot { width: 0.2em; height: 0.2em; margin: 0 0 0 0.12em; top: -0.1em; } /* the red bullet after the first title line */
.it-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: 48px; align-items: stretch; }
.it-hero-right { display: flex; flex-direction: column; gap: 14px; } /* photo sits close under the intro text */
.it-hero-right .ci-circles { width: min(100%, 480px); align-self: flex-start; }
.it-hero .it-cities { font-size: 28px; margin-bottom: 16px; }
.it-hero .ci-lead { margin: 0; font-size: 20px; }

/* Zoomed map, as on the deck: .it-map is a window of fixed height whose left edge is the edge of the
   page (it extends across the page margin: 40px of wrap padding plus half of whatever is wider than the
   1240px wrap). The full map sits inside at the window's height, anchored to the right, so the east coast
   stays put and wider screens simply reveal more of the west. Markers use full-map percentages. */
.it-map {
    position: relative;
    align-self: stretch;                 /* exactly as tall as the copy + photos column */
    width: calc(100% + 40px + max(0px, (100vw - 1240px) / 2));
    margin-left: calc(-40px - max(0px, (100vw - 1240px) / 2));
    overflow: hidden;
    --label-x: 54%; --label-y: 52%;
}
/* the map fills the window's full height (as on the slide) and is anchored right, so the window shows its eastern part */
.it-map-inner { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 1.383; }
.it-map-img { display: block; height: 100%; width: auto; }
.it-map-pin, .it-map-ring, .it-map-line { position: absolute; }
.it-map-pin {
    left: var(--pin-x); top: var(--pin-y);
    width: 18px; height: 18px; border-radius: 50%; background: var(--red);
    transform: translate(-50%, -50%);
}
.it-map-ring {
    left: var(--pin-x); top: var(--pin-y);
    width: 12%; aspect-ratio: 1 / 1; border-radius: 50%;
    border: 4px solid var(--red); opacity: 0.6;
    transform: translate(-50%, -50%);
}
.it-map-line { background: var(--red); opacity: 0.6; }
/* elbow connector: up from the date block, then right to the ring's edge (ring radius = 6% of width) */
.it-map-line-v { left: var(--label-x); top: var(--pin-y); width: 4px; height: calc(var(--label-y) - var(--pin-y)); transform: translateX(-2px); }
.it-map-line-h { left: var(--label-x); top: var(--pin-y); height: 4px; width: calc(var(--pin-x) - var(--label-x) - 6%); transform: translateY(-2px); }
.it-map .it-date { position: absolute; left: calc(var(--label-x) - 2px); top: var(--label-y); margin: 0; }
/* variant for regions near the window's left edge (Southwest): the date block sits up and to the right of the ring,
   the connector rises from the ring's top to the block's mid-height, then runs right to the block — as on deck 3 */
.it-map--label-right .it-map-line-v { left: var(--pin-x); top: var(--label-y); height: calc(var(--pin-y) - var(--label-y) - 8.3%); transform: translateX(-2px); }
.it-map--label-right .it-map-line-h { left: var(--pin-x); top: var(--label-y); width: calc(var(--label-x) - var(--pin-x)); transform: translateY(-2px); }
/* variant for regions low on the map (Yangtze Delta): the date block sits up and to the left of the ring; the connector
   drops from the block's bottom edge to the ring's level, then runs right to the ring — as on deck 2 */
.it-map--label-above .it-map-line-v { left: var(--label-x); top: var(--label-y); height: calc(var(--pin-y) - var(--label-y)); transform: translateX(-2px); }
.it-map--label-above .it-date { left: calc(var(--label-x) - 2px); top: var(--label-y); transform: translateY(-100%); }
/* no dates on the deck (itinerary 4): ring and pin only */
.it-map--no-label .it-map-line, .it-map--no-label .it-date { display: none; }
.it-map--label-right .it-date { left: var(--label-x); top: var(--label-y); transform: translateY(-50%); }
.it-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-subtitle); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--navy-30); text-decoration: none; margin-bottom: 20px;
    transition: color var(--duration-normal) var(--ease-out);
}
.it-back:hover { color: #fff; }
.it-back .material-symbols-outlined { font-size: 18px; }
.it-cities { font-family: var(--font-subtitle); font-weight: 700; font-size: 24px; color: var(--teal); margin: 0 0 22px; }
.it-date {
    display: inline-block;
    background: var(--red); color: #fff;
    font-family: var(--font-subtitle); font-weight: 700; font-size: 22px; line-height: 1.35; letter-spacing: 0.02em; text-transform: uppercase;
    padding: 12px 22px 14px;
}
.it-date small { display: block; font-size: 11px; letter-spacing: 0.16em; font-weight: 700; opacity: 0.85; margin-bottom: 3px; }

/* photo pairs on the left of a list (Learn, Expo) run 10% smaller than the overview's 540px pairs */
#it-learn .ci-circles, #it-expo .ci-circles, #it-expo2 .ci-circles { width: min(100%, 486px); }

/* a stacked list with nothing below it closes with its own rule line */
.ci-list--closed { margin-bottom: 0; }
.ci-list--closed .ci-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.ci-section--light .ci-list--closed .ci-item:last-child { border-bottom-color: rgba(1, 27, 100, 0.16); }
/* heading directly followed by a photo + list split */
.ci-wrap > .ci-h2 + .ci-split--top { margin-top: 48px; }
.it-cluster .ci-circle { aspect-ratio: 1 / 1; }

/* "Coming soon" tag on placeholder itinerary pages */
.it-soon { margin: 0 0 18px; }
.it-soon-tag { display: inline-block; font-family: var(--font-subtitle); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--red); padding: 7px 12px; }

/* two-tone section titles: "Technology Innovation • What You'll Learn" — sized to stay on one line */
.ci-h2.it-h2 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 20px; }
.it-teal { color: var(--teal); }
.ci-section--light .it-teal { color: var(--teal); }

/* company flip cards: twelve cards, four per row (three rows). Logo + name + one phrase on the front,
   the one-sentence intro with figures on the back. Hover flips on desktop, tap on touch,
   Enter/Space on the keyboard (see immersion.js) — same pattern as transfong.com's fellowship cards. */
.it-cards-hint { display: none; font-size: 14px; color: rgba(255, 255, 255, 0.6); margin: -36px 0 32px; }
@media (hover: none) { .it-cards-hint { display: block; } }
.it-cardrow { margin-bottom: 20px; } /* rows are revealed one after another; the gap matches the grid gap so they read as one grid */
.it-cardrow:last-child { margin-bottom: 0; }
.it-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.it-card { perspective: 1200px; cursor: pointer; height: 236px; }
.it-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.it-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s var(--ease-out); }
.it-card.flipped .it-card-inner { transform: rotateY(180deg); }
@media (hover: hover) { .it-card:hover .it-card-inner { transform: rotateY(180deg); } }
.it-card-front, .it-card-back {
    position: absolute; inset: 0;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    padding: 20px 22px 18px; overflow: hidden;
}
.it-card-front {
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--border-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.it-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.it-card-logo { height: 56px; max-width: 190px; display: flex; align-items: center; }
.it-card-logo img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.it-card-corner { font-size: 20px; color: var(--teal); opacity: 0.45; transition: opacity var(--duration-fast) var(--ease-out), transform 0.5s var(--ease-out); }
.it-card:hover .it-card-corner { opacity: 1; transform: rotate(180deg); }
.it-card-front h4 { font-family: var(--font-subtitle); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--navy); margin: 0 0 5px; }
.it-card-tag { font-family: var(--font-subtitle); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); }
.it-card-front p { font-family: var(--font-subtitle); font-weight: 700; font-size: 13px; line-height: 1.45; color: var(--teal); margin: auto 0 0; }
.it-card-back {
    transform: rotateY(180deg);
    background: #04246F; border: 1px solid rgba(0, 177, 176, 0.55);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.it-card-back { display: flex; flex-direction: column; }
.it-card-back h4 { font-family: var(--font-subtitle); font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--teal); margin: 0 0 8px; }
.it-card-back p { font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); margin: 0; }
.it-card-stat { display: flex; align-items: baseline; gap: 8px; margin-top: auto !important; padding-top: 8px; border-top: 1px solid rgba(0, 177, 176, 0.35); }
.it-card-stat b { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; color: var(--teal); white-space: nowrap; }
.it-card-stat span { font-size: 11.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }

/* logo on a white circle (expo) */
.it-logo { background: #fff; }
.it-logo img { object-fit: contain; padding: 6%; box-sizing: border-box; background: #fff; }

/* round red date badge on a photo (expo) */
.it-badge {
    position: absolute; top: 4%; left: -4%;
    width: 112px; height: 112px; border-radius: 50%;
    background: var(--red); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--font-subtitle); font-weight: 700; font-size: 20px; line-height: 1.15; text-align: center;
    z-index: 2;
}

/* three-circle cluster (culture) */
/* measured from the deck's culture slide: big circle 67% wide on the left, two 50% circles stacked on the
   right, red dot between them; Shougang behind, Zhengding over it, Baiyangdian in front */
.it-cluster { position: relative; width: min(100%, 504px); aspect-ratio: 700 / 770; justify-self: start; } /* left edge on the title's left edge */
.it-cluster .ci-circle { position: absolute; }
.it-cluster .it-c1 { width: 67%; left: 0; top: 20%; z-index: 2; }     /* Zhengding (big) */
.it-cluster .it-c2 { width: 50%; right: 0; top: 0; z-index: 1; }      /* Shougang (top right) */
.it-cluster .it-c3 { width: 50%; right: 0; bottom: 0; z-index: 3; }   /* Baiyangdian (bottom right) */
.it-cluster .ci-dot { position: absolute; left: 74.6%; top: 50.3%; width: 16px; height: 16px; margin: 0; transform: translate(-50%, -50%); z-index: 4; }

/* programme tables */
.it-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.it-table-wrap { background: var(--bg-section); padding: 28px 32px 12px; }
.it-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.it-table th {
    text-align: left; font-family: var(--font-subtitle); font-weight: 700; font-size: 17px; color: var(--red);
    padding: 0 16px 12px 0; border-bottom: 1px solid var(--red);
}
.it-table td { vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(255, 0, 6, 0.55); color: var(--text-secondary); }
.it-table tr:last-child td { border-bottom: 0; }
.it-table td:first-child { font-family: var(--font-subtitle); font-weight: 700; color: var(--navy); white-space: nowrap; width: 72px; }
.it-table td:nth-child(2) { width: 130px; }
.it-table td:last-child { padding-right: 0; }

/* previous / next itinerary */
.it-nav { display: flex; justify-content: space-between; gap: 24px; padding: 40px 0 0; border-top: 1px solid var(--navy-20); margin-top: 56px; }
.it-nav a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--navy); max-width: 46%; }
.it-nav a:last-child { text-align: right; align-items: flex-end; }
.it-nav small { font-family: var(--font-subtitle); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.it-nav strong { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; transition: color var(--duration-normal) var(--ease-out); }
.it-nav a:hover strong { color: var(--red); }

/* reveal for itinerary components */
.ci-anim .it-cardrow, .ci-anim .it-table-wrap, .ci-anim .it-cluster, .ci-anim .it-map {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* this block sits after the generic .ci-anim .ci-in rule, so the revealed state must be restated here */
.ci-anim .it-cardrow.ci-in, .ci-anim .it-table-wrap.ci-in, .ci-anim .it-cluster.ci-in, .ci-anim .it-map.ci-in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
    .it-cards { grid-template-columns: 1fr 1fr; }
    .it-tables { grid-template-columns: 1fr; }
    .it-hero-grid { grid-template-columns: 1fr; gap: 56px; }
    .it-map { align-self: auto; height: min(520px, 90vw); width: calc(100% + 80px); margin-left: -40px; }
    .it-hero .ci-h1 { white-space: normal; }
    .it-hero-right .ci-circles { align-self: flex-start; }
}
@media (max-width: 720px) {
    .it-cards { gap: 16px; }
    .it-cardrow { margin-bottom: 16px; }
    .it-card { height: 250px; }
    .it-table-wrap { padding: 20px 18px 6px; }
    .it-table { font-size: 15px; }
    .it-table td:nth-child(2) { width: 96px; }
    .it-badge { width: 88px; height: 88px; font-size: 16px; }
    .it-map { width: calc(100% + 44px); margin-left: -22px; }
    .it-nav { flex-direction: column; }
    .it-nav a, .it-nav a:last-child { max-width: none; text-align: left; align-items: flex-start; }
}

/* ---- overview <-> itinerary page transition ------------------------------
   Cross-document View Transitions: the clicked itinerary circle travels and grows
   into the itinerary page's hero circle, and shrinks back on return, while the rest
   of the page cross-fades. immersion.js names the two matching elements per
   navigation. Browsers without the API simply load the page as usual. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; }
::view-transition-group(route-photo) {
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
    .ci-split { grid-template-columns: 1fr; gap: 56px; }
    .ci-split--top { margin-bottom: 64px; } /* circles stack above the 03–04 row: keep the overhang clear of it */
    .ci-list--stack { margin-bottom: 0; }
    .ci-list--stack .ci-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
    .ci-section--light .ci-list--stack .ci-item:last-child { border-bottom-color: rgba(1, 27, 100, 0.16); }
    .ci-circles { justify-self: start; width: min(100%, 460px); }
    .ci-hero { min-height: auto; padding: 140px 0 112px; }
    .ci-routes { grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
    .ci-dot--between { display: none; }
    .ci-circle--route { width: 240px; height: 240px; }
    .ci-deliver { grid-template-columns: 1fr; gap: 72px; }
    .ci-deliver-item { flex-direction: row; align-items: center; gap: 48px; }
    .ci-deliver-visual { margin-bottom: 0; flex-shrink: 0; }
    .ci-quotes { grid-template-columns: 1fr; gap: 64px; }
    .ci-split--track { gap: 56px; }
}

@media (max-width: 720px) {
    .ci-section { padding: 80px 0; }
    .ci-wrap { padding: 0 22px; }
    .ci-list { grid-template-columns: 1fr; }
    .ci-item:nth-last-child(-n+2) { border-bottom: 0; }
    .ci-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
    .ci-routes { grid-template-columns: 1fr; row-gap: 64px; }
    .ci-circle--route { width: min(72vw, 280px); height: min(72vw, 280px); }
    .ci-deliver-item { flex-direction: column; align-items: flex-start; gap: 28px; }
    .ci-deliver-visual { width: min(72vw, 260px); margin-bottom: 72px; }
    .ci-circle--md { width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .ci-to { left: 50%; top: 100%; transform: translate(-50%, 14px); font-size: 34px; }
    .ci-to-badge { width: 60px; height: 60px; margin-right: 10px; }
    .ci-stats li { white-space: normal; } /* single column here, so rows need not align */
    .ci-register { flex-direction: column; align-items: flex-start; gap: 18px; }
    .ci-register-text { min-width: 0; width: 100%; font-size: 20px; }
    .ci-footnote { text-align: left; }
    .ci-eyebrow { font-size: 18px; }
    .ci-sub, .ci-lead { font-size: 18px; }
    .ci-track-row { grid-template-columns: 1fr; row-gap: 40px; }
    .ci-track-stats { gap: 40px; }
    .ci-track-figure > span { font-size: 22px; }
}

@media (max-width: 560px) {
    .it-cards { grid-template-columns: 1fr; }
    .it-card { height: 210px; }
}