/* About Us — rebuilt 2 Oct 2026 to "About Us Revision (2/10/26)" and its wireframe (Copy Review (4),
   pp.57-62): photo hero · four captioned photos · Our purpose + At a glance · Our values · Our
   journey as a horizontal timeline (vertical on phones). The previous file (zig-zag timeline,
   video-reel hero) is in the 2 Oct zip backups. Headings on this page take the wireframe's navy. */
.about-story{--ab-ink:#26292C;--ab-text:#4B4F54;--ab-muted:#6E7276;--ab-blue:#005DA7;--ab-navy:#0D2F63;--ab-rule:#E1E9F3;color:var(--ab-text);background:#fff;overflow:clip;}
.about-story .ab-kicker{margin:0 0 12px;font:700 12px/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ab-blue);}

/* ── hero (6 Oct 2026): the office photograph runs full width and its left side is darkened to deep navy
   for the copy (Clayton: "左侧可以加工处理一下加深成遮幕放字体"). Before, the Leaders' Dialogue photo sat
   right of the copy and faded into a brand-blue ground. ── */
.about-story .ab-hero2{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(480px,40vw,600px);overflow:hidden;color:#fff;background:#071a33;}
.about-story .ab-hero2-media{position:absolute;inset:0;z-index:-2;}
.about-story .ab-hero2-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%;}
.about-story .ab-hero2::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,17,36,.92) 0%,rgba(5,17,36,.84) max(30%,420px),rgba(5,17,36,.38) max(50%,660px),rgba(5,17,36,.1) 78%);}
.about-story .ab-hero2-in{position:relative;z-index:1;width:100%;max-width:var(--maxw);padding-block:clamp(48px,6vw,80px);}
.about-story .ab-hero2-copy{max-width:520px;}
.about-story .ab-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:700 12px/1.4 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.86);}
.about-story .ab-eyebrow::before{content:"";width:32px;height:2px;background:currentColor;}
.about-story .ab-hero-h1{margin:0;font:700 clamp(48px,5.6vw,84px)/.98 var(--f-display);letter-spacing:-.045em;color:#fff;}
.about-story .ab-hero-lead{max-width:40ch;margin:22px 0 30px;font:400 clamp(16px,1.25vw,19px)/1.6 var(--f-body);color:rgba(255,255,255,.94);}
.about-story .ab-hero-btn{height:48px;padding:0 24px;border-radius:999px;background:#fff;color:var(--ab-blue);box-shadow:0 10px 26px -14px rgba(0,20,60,.8);}
.about-story .ab-hero-btn:hover{background:#eef5fc;color:var(--ab-blue);transform:translateY(-2px);}
.about-story .ab-hero-btn .arrow{color:var(--ab-blue);}
/* The photo runs up behind the header, as on Events and Insights (6 Oct 2026, "about us的hero像event insight
   那样cover header"). The page is pulled up by the bar's height and the hero padded by the same amount, so
   nothing below the bar moves; a darker band under the bar keeps its white contents legible (darker than
   Events' .66/.42: this photo's windows and ceiling lights sit under the bar; measured worst-pixel contrast
   6.3:1+ for the links, 5.5:1 for the phone logo). The bar's own
   treatment (clear, white logo and links until the page scrolls) is the shared rule in base.css. On the
   stacked layout (≤1000px) the photo box grows by the bar's height instead. */
#mainContent + .about-story:has(> .ab-hero2:first-child){margin-top:calc(-1 * (var(--header-h) + 1px));}
#mainContent + .about-story > .ab-hero2:first-child::before{content:"";position:absolute;z-index:1;inset:0 0 auto;height:calc(var(--header-h) + 80px);pointer-events:none;background:linear-gradient(180deg,rgba(6,19,36,.8) 0%,rgba(6,19,36,.55) 55%,rgba(6,19,36,0) 100%);}
@media(min-width:1001px){
  #mainContent + .about-story > .ab-hero2:first-child{padding-top:calc(var(--header-h) + 1px);min-height:calc(clamp(480px,40vw,600px) + var(--header-h) + 1px);}
}
@media(max-width:1000px){
  #mainContent + .about-story > .ab-hero2:first-child .ab-hero2-media{box-sizing:content-box;padding-top:calc(var(--header-h) + 1px);}
  #mainContent + .about-story > .ab-hero2:first-child .ab-hero2-media img{position:absolute;inset:0;}
}

/* ── four captioned photos ── */
.about-story .ab-strip{padding:clamp(18px,2vw,26px) 0 clamp(40px,4vw,56px);}
.about-story .ab-strip-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin:0;padding:0;list-style:none;}
.about-story .ab-strip-item{min-width:0;}
.about-story .ab-strip-item img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:10px;background:#eef3f8;}
.about-story .ab-strip-cap{display:flex;align-items:flex-start;gap:12px;margin:12px 0 0;}
.about-story .ab-strip-no{flex:none;font:700 18px/1.25 var(--f-display);color:var(--ab-ink);}
.about-story .ab-strip-t{display:block;font:700 15px/1.3 var(--f-display);color:var(--ab-ink);}
.about-story .ab-strip-d{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--ab-muted);}

/* ── Our purpose + At a glance (live figures; icons inline) ── */
.about-story .ab-purpose{padding:clamp(40px,5vw,64px) 0;background:#F3F7FC;}
.about-story .ab-purpose-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,64px);align-items:center;}
.about-story .ab-purpose-h{margin:0 0 14px;font:700 clamp(30px,3vw,44px)/1.08 var(--f-display);letter-spacing:-.03em;color:var(--ab-navy);}
.about-story .ab-purpose-p{max-width:52ch;margin:0;font-size:17px;line-height:1.65;color:var(--ab-text);}
.about-story .ab-glance{padding:22px clamp(18px,2vw,28px);border:1px solid var(--ab-rule);border-radius:14px;background:#fff;box-shadow:0 18px 40px -34px rgba(8,43,75,.55);}
.about-story .ab-glance .ab-kicker{margin-bottom:16px;}
.about-story .ab-glance-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;}
.about-story .ab-fig{display:flex;align-items:flex-start;gap:9px;min-width:0;padding:2px clamp(10px,1.1vw,16px);border-left:1px solid var(--ab-rule);}
.about-story .ab-fig:first-child{padding-left:0;border-left:0;}
.about-story .ab-fig-ic{flex:none;width:28px;height:28px;margin-top:2px;color:var(--ab-blue);}
.about-story .ab-fig-ic svg{display:block;width:100%;height:100%;}
.about-story .ab-fig-txt{min-width:0;}
.about-story .ab-fig-num{display:block;font:800 clamp(20px,1.7vw,26px)/1.05 var(--f-display);letter-spacing:-.02em;color:var(--ab-navy);white-space:nowrap;}
.about-story .ab-fig-suf{font-size:.62em;font-weight:700;letter-spacing:0;}
.about-story .ab-fig-lbl{display:block;margin-top:5px;font-size:13px;line-height:1.35;color:var(--ab-muted);}

/* ── Our values (new section). Glass icons are opaque on #F3F3F3: multiply plus a touch of
   brightness drops that ground into the white. ── */
.about-story .ab-values{padding:clamp(40px,4.5vw,60px) 0;border-bottom:1px solid var(--ab-rule);}
.about-story .ab-values-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-bottom:24px;}
.about-story .ab-values-head .ab-kicker{margin:0;}
.about-story .ab-values-intro{margin:0;font-size:15px;font-style:italic;line-height:1.5;color:var(--ab-muted);}
.about-story .ab-values-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;}
.about-story .ab-value{display:flex;align-items:flex-start;gap:14px;min-width:0;padding:4px clamp(12px,1.4vw,22px);border-left:1px solid var(--ab-rule);}
.about-story .ab-value:first-child{padding-left:0;border-left:0;}
.about-story .ab-value-ic{flex:none;width:56px;height:56px;}
.about-story .ab-value-ic img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.05);}
.about-story .ab-value-txt{min-width:0;}
.about-story .ab-value h3{margin:4px 0 6px;font:700 15.5px/1.3 var(--f-display);color:var(--ab-navy);}
.about-story .ab-value p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ab-text);}

/* ── Our journey: four eras a row on desktop (seven eras and the closing line = two rows), a rule
   with a node over each, the era range small over its title, the sentence, then the main photo
   full width and supporting photos below it with their captions. ── */
.about-story .ab-journey{--abj-gap:clamp(20px,2.2vw,32px);padding:clamp(56px,6vw,88px) 0;background:linear-gradient(180deg,#F6F9FD,#fff 42%);}
.about-story .ab-journey-head{max-width:760px;margin-bottom:clamp(36px,4vw,52px);}
.about-story .ab-journey-head .h2{margin:0 0 16px;color:var(--ab-navy);}
.about-story .ab-journey-intro{max-width:62ch;margin:0;font-size:17px;line-height:1.65;color:var(--ab-text);}
.about-story .abj{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(40px,4vw,56px) var(--abj-gap);margin:0;padding:0;list-style:none;}
.about-story .abj>li{position:relative;min-width:0;padding-top:30px;}
.about-story .abj>li::before{content:"";position:absolute;top:6px;left:0;right:calc(-1 * var(--abj-gap));height:2px;background:linear-gradient(90deg,#8DB8DF,#D3E4F2);}
.about-story .abj>li:nth-child(4n)::before{right:0;}
.about-story .abj-node{position:absolute;top:0;left:0;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--ab-blue);box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(0,93,167,.25);}
.about-story .abj-node--open{background:#fff;border:2px solid var(--ab-blue);}
.about-story .abj-range{margin:0 0 6px;font:700 15px/1.2 var(--f-display);letter-spacing:.01em;color:var(--ab-blue);}
.about-story .abj-title{margin:0 0 8px;font:700 19px/1.25 var(--f-display);letter-spacing:-.01em;color:var(--ab-navy);}
.about-story .abj-copy{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--ab-text);}
.about-story .abj-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;}
.about-story .abj-photo{min-width:0;margin:0;}
.about-story .abj-photo--main{grid-column:1 / -1;}
.about-story .abj-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:#EEF3F8;filter:saturate(.82) contrast(1.03);transition:filter .5s var(--ease,ease);}
.about-story .abj-photo--main img{aspect-ratio:16/10;}
.about-story .abj-era:hover .abj-photo img{filter:saturate(1) contrast(1.03);}
.about-story .abj-photo figcaption{margin-top:6px;font-size:12px;line-height:1.4;color:var(--ab-muted);}
.about-story .abj-cap-year{font-weight:700;color:var(--ab-blue);}
/* one supporting photo: a thumbnail beside its caption, so it neither fills the row nor leaves half of it empty */
.about-story .abj-media--2 .abj-photo:not(.abj-photo--main){grid-column:1 / -1;display:grid;grid-template-columns:44% minmax(0,1fr);gap:10px;align-items:center;}
.about-story .abj-media--2 .abj-photo:not(.abj-photo--main) figcaption{margin:0;}
.about-story .abj-end-t{margin:0 0 6px;font:700 19px/1.25 var(--f-display);color:var(--ab-navy);}
.about-story .abj-end-d{margin:0;font-size:15px;line-height:1.55;color:var(--ab-text);}

/* ── responsive ── */
@media(max-width:1180px){
  .about-story .ab-purpose-in{grid-template-columns:minmax(0,1fr);}
  .about-story .ab-values-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px;}
  .about-story .ab-value:nth-child(n){padding-left:clamp(12px,1.4vw,22px);border-left:1px solid var(--ab-rule);}
  .about-story .ab-value:nth-child(3n+1){padding-left:0;border-left:0;}
}
@media(max-width:1100px){
  .about-story .abj{grid-template-columns:repeat(2,minmax(0,1fr));}
  .about-story .abj>li:nth-child(n)::before{right:calc(-1 * var(--abj-gap));}
  .about-story .abj>li:nth-child(2n)::before{right:0;}
}
@media(max-width:1000px){
  .about-story .ab-strip-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
}
@media(max-width:1000px){
  /* the photo stacks above the copy: at tablet widths the speaker sat right under the lead (white
     text measured 1.5–4.3:1 on the photo's cyan screen from 768 to 1000px) */
  .about-story .ab-hero2{display:block;min-height:0;background:#071a33;}
  .about-story .ab-hero2::after{display:none;}
  .about-story .ab-hero2-media{position:relative;width:100%;height:auto;aspect-ratio:21/9;z-index:0;}
  .about-story .ab-hero2-media img{object-position:62% 50%;}
  .about-story .ab-hero2-in{padding-block:34px 44px;}
  .about-story .ab-eyebrow{margin-bottom:16px;}
  .about-story .ab-hero-lead{margin:16px 0 24px;}
}
@media(max-width:760px){
  .about-story .ab-hero2-media{aspect-ratio:16/10;}
  .about-story .ab-hero2-in{padding-block:30px 40px;}
  .about-story .ab-glance-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px;}
  .about-story .ab-fig:nth-child(3){padding-left:0;border-left:0;}
  .about-story .ab-values-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .about-story .ab-value:nth-child(n){padding-left:clamp(12px,3vw,20px);border-left:1px solid var(--ab-rule);}
  .about-story .ab-value:nth-child(2n+1){padding-left:0;border-left:0;}
  /* phones: the vertical timeline the copy asks to keep, rule down the left */
  .about-story .abj{grid-template-columns:minmax(0,1fr);gap:0;}
  .about-story .abj>li{padding:0 0 34px 32px;}
  .about-story .abj>li:nth-child(n)::before{top:16px;bottom:0;left:6px;right:auto;width:2px;height:auto;background:#C9DDEF;}
  .about-story .abj>li:last-child{padding-bottom:0;}
  .about-story .abj>li:last-child::before{display:none;}
  .about-story .abj-node{top:2px;}
}
@media(max-width:520px){
  .about-story .ab-strip-list{grid-template-columns:minmax(0,1fr);}
  .about-story .ab-values-list{grid-template-columns:minmax(0,1fr);row-gap:0;}
  .about-story .ab-value:nth-child(n){padding:16px 0;border-left:0;border-top:1px solid var(--ab-rule);}
  .about-story .ab-value:first-child{padding-top:0;border-top:0;}
}
@media(prefers-reduced-motion:reduce){.about-story .abj-photo img{transition:none;}}

/* ---- light hero (7 Oct 2026, the Figma Banners "About us" photograph) ----
   A pale photograph with the people on the right: dark type straight on the picture, a soft white wash on the
   copy side instead of the navy one, the bar over it clear with the blue logo and dark links (base.css keeps the
   white-logo rules for the dark version only). Buttons follow design-foundation.css (primary blue). */
.about-story .ab-hero2--light{background:#eef1f4;color:var(--ab-ink,#26292C);}
.about-story .ab-hero2--light::after{background:linear-gradient(90deg,rgba(246,248,250,.82) 0%,rgba(246,248,250,.55) 34%,rgba(246,248,250,0) 58%);}
#mainContent + .about-story > .ab-hero2--light:first-child::before{background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 100%);}
.about-story .ab-hero2--light .ab-hero2-media img{object-position:100% 50%;}
.about-story .ab-hero2--light .ab-eyebrow{color:#005DA7;}
.about-story .ab-hero2--light .ab-hero-h1{color:#26292C;}
.about-story .ab-hero2--light .ab-hero-lead{color:#4B4F54;}
.about-story .ab-hero2--light .ab-hero-btn{background:linear-gradient(180deg,#005DA7 0%,#004A8C 100%)!important;color:#fff!important;border-color:transparent!important;}
.about-story .ab-hero2--light .ab-hero-btn .arrow{color:#fff!important;}
body:has(#mainContent + .about-story > .ab-hero2--light:first-child):not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled){
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none;
}
@media (max-width:1000px){
  .about-story .ab-hero2--light{background:#eef1f4;}
  .about-story .ab-hero2--light .ab-hero2-media img{object-position:78% 50%;}
}
.about-story .ab-hero2--light .ab-hero-btn:hover{background:#004A8C!important;}