/* Reference: the fan of social photos in the supplied off-track video. */
.about-page{background:#f3f4eb;color:#111}
.about-page .cases-header{position:absolute;inset:0 0 auto;z-index:20;background:transparent;padding:18px 0}
.about-hero{min-height:100svh;box-sizing:border-box;padding:112px 20px 35px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;background:#f3f4eb}
.about-hero h1{font:800 clamp(30px,3.2vw,46px)/.98 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;letter-spacing:-.065em;text-align:center;margin:0;position:relative;z-index:10}
.about-hero h1 span,.about-hero h1 em{display:block}
.about-hero h1 em{font:400 1.04em/.98 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;letter-spacing:-.055em}
.social-fan{--card-width:clamp(130px,14vw,205px);--spread:clamp(52px,5.6vw,82px);position:relative;width:min(100%,1000px);height:calc(var(--card-width)*1.77 + 76px);margin-top:30px;isolation:isolate}
.social-card{--offset:calc(var(--i)*var(--spread));--angle:calc(var(--i)*7deg);position:absolute;top:0;left:50%;width:var(--card-width);height:calc(var(--card-width)*1.77);padding:0;border:0;border-radius:30px;overflow:hidden;background:#ddd;cursor:pointer;z-index:var(--z);transform:translateX(calc(-50% + var(--offset))) translateY(calc(var(--i)*var(--i)*5px)) rotate(var(--angle));transform-origin:50% 80%;transition:transform .65s cubic-bezier(.22,.8,.25,1),box-shadow .4s; -webkit-tap-highlight-color:transparent}
.social-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.social-fan.is-folded .social-card{transform:translateX(-50%) translateY(calc(var(--i)*var(--i)*1px)) rotate(0deg)}
.social-card.is-active{z-index:15;transform:translateX(calc(-50% + var(--offset))) translateY(calc(var(--i)*var(--i)*4px - 26px)) rotate(calc(var(--angle)*.4)) scale(1.06);box-shadow:0 14px 28px #1c261c16}
.social-card:focus-visible{outline:3px solid #c8302d;outline-offset:5px}
.about-social-caption{font:400 21px/1.4 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;margin:16px 0}
.about-social-links{display:flex;gap:24px;align-items:center;justify-content:center}
.about-social-links a{font:800 9px/1.4 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;color:#111;text-decoration:none}
.about-social-links a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.about-hero{padding:108px 12px 38px;min-height:100svh}.social-fan{--card-width:25vw;--spread:7vw;height:calc(44.25vw + 85px);margin-top:42px}.social-card{border-radius:19px;transform:translateX(calc(-50% + var(--offset))) translateY(calc(var(--i)*var(--i)*5px)) rotate(var(--angle))}.about-social-caption{font-size:18px}.about-social-links{gap:20px}.about-hero h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){.social-card{transition:none}}

/* Chinese copy keeps the two-line title and four evenly spaced values. */
.about-hero h1{font-family:"PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;font-weight:900;letter-spacing:.02em;line-height:1.2}
.about-hero h1 em{font-family:inherit;font-weight:900;font-style:normal;letter-spacing:.02em;line-height:1.2}
.about-social-caption{font-family:"PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;font-weight:600}
.about-social-links span{font:600 12px/1.6 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;letter-spacing:.06em}
@media(max-width:600px){.about-social-links{gap:16px}.about-social-links span{font-size:11px;letter-spacing:0}}

/* Same wording and chevrons as the home page, in the hero flow. */
.about-scroll.entrance-scroll{position:static;transform:none;opacity:1;visibility:visible;flex-shrink:0;margin-top:24px;color:#185fbd}
.about-scroll.entrance-scroll:focus-visible{outline-color:currentColor}
.about-page>.scroll-cue{display:none}