/* About HEHI. Tokens from style.css. */
.ab-hero{position:relative;overflow:hidden;background:var(--navy);color:var(--white);isolation:isolate}
.ab-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--ab-photo) center/cover no-repeat;opacity:.22;filter:grayscale(.35)}
.ab-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(21,42,62,.97) 0%,rgba(21,42,62,.88) 45%,rgba(28,60,89,.55) 100%),linear-gradient(180deg,transparent 60%,rgba(10,26,42,.45))}
.ab-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:40px;min-height:min(92svh,860px);padding-block:clamp(132px,15vw,176px) clamp(64px,8vw,104px)}
.ab-crumb{color:#9FBAD0}
.ab-crumb a:hover{color:var(--white)}
.ab-title{margin:22px 0 0;font-size:clamp(42px,6vw,86px);line-height:1.06;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
html[lang^="zh"] .ab-title{font-size:clamp(30px,4.3vw,62px);letter-spacing:-.02em;line-height:1.16}
.ab-lead{margin:26px 0 0;max-width:33em;font-size:clamp(17px,1.5vw,20px);line-height:1.75;color:#C3D4E2}
.ab-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn-ghost-light{border-color:rgba(255,255,255,.4);color:var(--white);background:transparent}
.btn-ghost-light:hover{border-color:var(--white);background:rgba(255,255,255,.06)}
.ab-mark-wrap{margin:0;display:flex;flex-direction:column;align-items:center;gap:24px}
.ab-mark-wrap figcaption{max-width:22em;padding-left:16px;border-left:2px solid var(--red);font-size:15px;line-height:1.7;color:#C3D4E2}

/* The crane. Without JS or with reduced motion it is the static mark. The intro below is
   pure CSS; then about.js takes over with real pendulum physics (class .is-live). */
.ab-crane{width:min(380px,100%);height:auto;overflow:visible;filter:drop-shadow(0 30px 60px rgba(4,14,26,.45));-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ab-gate rect,.ab-cable{fill:var(--white)}
.ab-ground{stroke:rgba(255,255,255,.28);stroke-width:.5;stroke-dasharray:1.4 1.4}
.ab-shadow{fill:#000;opacity:.34;transform-box:fill-box;transform-origin:50% 50%}
.ab-leg{transform-box:fill-box;transform-origin:50% 100%}
.ab-beam{transform-box:fill-box;transform-origin:50% 50%}
.ab-cable{transform-box:fill-box;transform-origin:50% 0}
.ab-box{transform-box:fill-box;transform-origin:50% 0}
.ab-load{transform-box:view-box;transform-origin:50px 47px}
@media (prefers-reduced-motion:no-preference){
  .ab-hero::before{animation:ab-zoom 26s cubic-bezier(.2,.6,.2,1) both}
  .ab-hero-copy > *{animation:ab-up .9s cubic-bezier(.2,.8,.2,1) both}
  .ab-hero-copy > :nth-child(2){animation-delay:.08s}
  .ab-hero-copy > :nth-child(3){animation-delay:.16s}
  .ab-hero-copy > :nth-child(4){animation-delay:.24s}
  .ab-ground{animation:ab-fade .8s .1s both}
  .ab-leg{animation:ab-leg .9s .15s cubic-bezier(.2,.8,.2,1) both}
  .ab-leg-r{animation-delay:.3s}
  .ab-beam{animation:ab-beam .7s .8s cubic-bezier(.2,.8,.2,1) both}
  .ab-cable{animation:ab-cable 3s .4s both}
  .ab-box{animation:ab-hoist 3s .4s both}
  .ab-shadow{animation:ab-lift-shadow 3s .4s both,ab-shade 5.5s 3.4s ease-in-out infinite}
  .ab-load{animation:ab-sway 5.5s 3.4s ease-in-out infinite}
  .ab-mark-wrap figcaption{animation:ab-up .9s 2.9s cubic-bezier(.2,.8,.2,1) both}
  .ab-crane.is-live .ab-load,.ab-crane.is-live .ab-shadow,.ab-crane.is-live .ab-cable,.ab-crane.is-live .ab-box{animation:none}
}
@keyframes ab-zoom{from{transform:scale(1.08)}}
@keyframes ab-up{from{opacity:0;transform:translateY(18px)}}
@keyframes ab-fade{from{opacity:0}}
@keyframes ab-leg{from{transform:scaleY(0)}}
@keyframes ab-beam{from{transform:scaleX(0)}}
/* Cable and box share keyframe stops and easing, so the cable always ends at the box. */
@keyframes ab-cable{
  0%{transform:scaleY(0)}
  35%{transform:scaleY(0);animation-timing-function:cubic-bezier(.3,0,.2,1)}
  52%{transform:scaleY(2.4444)}
  58%{transform:scaleY(2.4444);animation-timing-function:cubic-bezier(.45,0,.25,1)}
  92%{transform:scaleY(.9333);animation-timing-function:ease-out}
  100%{transform:none}
}
@keyframes ab-hoist{
  0%{opacity:0;transform:translateY(13px)}
  12%{opacity:1;transform:translateY(13px)}
  58%{transform:translateY(13px);animation-timing-function:cubic-bezier(.45,0,.25,1)}
  92%{transform:translateY(-.6px);animation-timing-function:ease-out}
  100%{transform:none}
}
@keyframes ab-lift-shadow{
  0%{opacity:0;transform:scaleX(1.55)}
  12%{opacity:.6;transform:scaleX(1.55)}
  58%{opacity:.6;transform:scaleX(1.55);animation-timing-function:cubic-bezier(.45,0,.25,1)}
  100%{opacity:.34;transform:none}
}
@keyframes ab-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes ab-shade{0%,100%{transform:translateX(-1.2px) scaleX(.94)}50%{transform:translateX(1.2px) scaleX(.94)}}

.ab-eyebrow{margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.ab-h2{margin:14px 0 0;font-size:clamp(30px,3.8vw,52px);line-height:1.15;font-weight:600;letter-spacing:-.025em;color:var(--navy-ink);text-wrap:balance}
.ab-h2-wide{max-width:20em}
.ab-sec{padding-block:clamp(72px,9vw,128px)}

/* commitments */
.ab-promises{background:var(--white);border-bottom:1px solid var(--line)}
.ab-promises .wrap{padding-block:44px 52px}
.ab-promises ul{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ab-promises li{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:2px solid var(--navy-ink)}
.ab-promises b{font-size:clamp(34px,4vw,56px);line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--navy-ink);font-variant-numeric:tabular-nums}
.ab-promises .ab-count{display:inline-block;text-align:left}
.ab-promises span:not(.ab-count){font-size:15px;line-height:1.55;color:var(--muted)}

/* story */
.ab-story-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:start}
.ab-story-h{position:sticky;top:calc(110px + var(--hehi-admin-bar-offset))}
.ab-story-b > p{margin:0 0 24px;font-size:18px;line-height:1.85;color:var(--ink-2)}
.ab-story-b > p.ab-first{font-size:clamp(20px,1.9vw,24px);line-height:1.7;color:var(--ink)}
.ab-quote{margin:40px 0 0;padding:clamp(26px,3.4vw,40px);border-radius:24px;background:var(--bg);position:relative}
.ab-quote::before{content:"“";position:absolute;top:-6px;left:22px;font-size:110px;line-height:1;color:var(--red);font-family:Georgia,serif}
.ab-quote blockquote{margin:0}
.ab-quote blockquote p{margin:18px 0 0;font-size:clamp(20px,2vw,26px);line-height:1.55;font-weight:500;letter-spacing:-.01em;color:var(--navy-ink)}
.ab-quote figcaption{display:flex;align-items:center;gap:14px;margin-top:24px}
.ab-quote img,.ab-ini{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.ab-ini{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:var(--white);font-weight:600}
.ab-quote figcaption b{display:block;font-weight:600}
.ab-quote figcaption small{font-size:13px;color:var(--muted)}

/* mission & vision */
.ab-mv-sec{padding-top:0}
.ab-mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ab-mv-card{padding:clamp(28px,4vw,52px);border-radius:28px;background:var(--bg);display:flex;flex-direction:column;gap:22px;min-height:300px;justify-content:space-between}
.ab-mv-t{margin:0;font-size:clamp(24px,2.6vw,36px);line-height:1.35;font-weight:600;letter-spacing:-.02em;color:var(--navy-ink);text-wrap:balance}
html[lang^="zh"] .ab-mv-t{text-wrap:pretty}
.ab-mv-dark{background:var(--navy);background:linear-gradient(150deg,var(--navy) 0%,var(--navy-ink) 100%)}
.ab-mv-dark .ab-mv-t{color:var(--white)}
.ab-mv-dark .ab-eyebrow{color:#FF8A8F}

/* values */
.ab-values{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px)}
.ab-values li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 12px;padding:28px 0;border-top:1px solid var(--line)}
.ab-num{grid-row:span 2;font-family:var(--f-mono);font-size:14px;color:var(--red);padding-top:4px}
.ab-values b{font-size:20px;font-weight:600;color:var(--navy-ink);letter-spacing:-.01em}
.ab-values p{margin:0;font-size:16px;line-height:1.75;color:var(--muted)}

/* what we do */
.ab-do-sec{background:var(--bg)}
.ab-do{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.ab-do-card{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:22px;background:var(--white);border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .2s ease,transform .25s ease,box-shadow .25s ease}
a.ab-do-card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,13,16,.06)}
.ab-do-ic{width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#EDF1F5;color:var(--navy);margin-bottom:8px}
.ab-do-card b{font-size:19px;font-weight:600;color:var(--navy-ink)}
.ab-do-card > span:not(.ab-do-ic){font-size:15px;line-height:1.65;color:var(--muted);flex:1}
.ab-do-card em{font-style:normal;font-size:14px;font-weight:500;color:var(--red);margin-top:6px}

/* roadmap */
.ab-road-note{margin:14px 0 0;color:var(--muted);font-size:15px}
.ab-road{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.ab-road-item{position:relative;display:flex;flex-direction:column;gap:8px;padding:34px 22px 0 0}
.ab-road-item::before{content:"";position:absolute;top:8px;left:0;right:0;height:2px;background:var(--line)}
.ab-road-item.done::before,.ab-road-item.now::before{background:var(--navy)}
.ab-road-item.now::before{background:linear-gradient(90deg,var(--navy) 0 50%,var(--line) 50%)}
.ab-road-item.now:has(+ .now)::before{background:var(--navy)}
.ab-road-dot{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--white);border:2px solid var(--line-2)}
.done .ab-road-dot{background:var(--navy);border-color:var(--navy)}
.now .ab-road-dot{background:var(--red);border-color:var(--red);box-shadow:0 0 0 6px var(--red-soft);animation:ab-pulse 2.4s ease-in-out infinite}
@keyframes ab-pulse{0%,100%{box-shadow:0 0 0 6px var(--red-soft)}50%{box-shadow:0 0 0 11px rgba(210,35,42,.06)}}
@media (prefers-reduced-motion:reduce){.now .ab-road-dot{animation:none}}
.ab-road-anim .ab-road-item::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.4,0,.2,1) calc(var(--i,0) * .22s + .15s)}
.ab-road-anim .ab-road-dot{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--i,0) * .22s)}
.ab-road-anim.is-drawn .ab-road-item::before,.ab-road-anim.is-drawn .ab-road-dot{transform:none}
.ab-road-when{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.ab-road-when em{font-style:normal;font-family:var(--f-cn);font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--red-soft);color:#8E1A1F}
.ab-road-item b{font-size:18px;font-weight:600;color:var(--navy-ink);line-height:1.35}
.ab-road-item p{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.ab-road-item.next b{color:var(--ink-2)}

/* call to action */
.ab-cta{background:var(--navy);background:linear-gradient(160deg,var(--navy) 0%,var(--navy-ink) 100%);color:var(--white)}
.ab-cta-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;padding-block:clamp(72px,9vw,120px)}
.ab-cta-t{margin:0;font-size:clamp(32px,4.4vw,60px);line-height:1.1;font-weight:600;letter-spacing:-.03em}
.ab-cta p{margin:18px 0 0;max-width:32em;font-size:18px;line-height:1.7;color:#C3D4E2}
.ab-cta .person{margin-top:0;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);max-width:none}
.ab-cta .person-dark .person-role{color:#9FBAD0}
.ab-cta .person-dark .person-note{color:#C9D7E3}
.ab-cta .btn-ghost{border-color:rgba(255,255,255,.3)}

/* fine print: the page's own text */
.ab-fine{background:var(--white)}
.ab-fine-b{max-width:780px;margin:22px 0 0}
.ab-fine-b .page-intro{font-size:18px}
.ab-fine-b h2{font-size:20px}

@media (max-width:1100px){
  .ab-do{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-road{grid-template-columns:minmax(0,1fr);gap:0;margin-top:40px}
  .ab-road-item{padding:0 0 30px 40px}
  .ab-road-item::before{top:18px;bottom:0;left:8px;right:auto;width:2px;height:auto}
  .ab-road-item.now::before{background:linear-gradient(180deg,var(--navy) 0 50%,var(--line) 50%)}
  .ab-road-item.now:has(+ .now)::before{background:var(--navy)}
  .ab-road-item:last-child::before{display:none}
  .ab-road-anim .ab-road-item::before{transform:scaleY(0);transform-origin:50% 0}
}
@media (max-width:960px){
  .ab-hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:48px;padding-block:120px 64px}
  html[lang^="zh"] .ab-title{font-size:min(8vw,52px)}
  .ab-mark-wrap{flex-direction:row;align-items:center;gap:22px}
  .ab-crane{width:140px;flex:none}
  .ab-story-grid,.ab-mv,.ab-cta-grid{grid-template-columns:minmax(0,1fr)}
  .ab-story-h{position:static}
  .ab-promises ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-values{grid-template-columns:minmax(0,1fr)}
  .ab-mv-card{min-height:0}
}
@media (max-width:560px){
  .ab-do{grid-template-columns:minmax(0,1fr)}
  .ab-btns .btn{flex:1 1 100%}
  .ab-mark-wrap{flex-direction:column;align-items:flex-start}
  .ab-crane{width:120px}
}