/* 2026-11-08 About Details targeted visual repair. */
html body.an-about-details-mode #app .an2-story{--orange:#ff7900;--gold:#e9a900;--ink:#fff}
html body.an-about-details-mode #app .an2-story :is(.an2-nav a,.an2-service,.an2-chapter,.an2-cta a,.an2-founder-brand,.an2-founder-quote){border-color:rgba(255,119,0,.78)!important}
html body.an-about-details-mode #app .an2-story :is(.an2-nav a,.an2-cta a){box-shadow:inset 0 1px rgba(255,181,60,.32),0 0 14px rgba(255,103,0,.22)!important}
html body.an-about-details-mode #app .an2-story :is(.an2-story-highlight,.an2-story-highlight strong){color:#ff7900!important}
@media(min-width:801px){
html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero .an2-exact-towers{
 background:radial-gradient(ellipse at 38% 53%,rgba(255,103,0,.52),transparent 69%),linear-gradient(90deg,rgba(255,105,0,.23),transparent 80%),url('assets/malaysia-skyline-clean.jpg') 69% 43% / auto 128% no-repeat!important;
 opacity:1!important;mask-image:linear-gradient(90deg,transparent,black 36%),linear-gradient(0deg,transparent,black 18%)!important;mask-composite:intersect!important;
}
html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero .an2-founder-person{
 background:radial-gradient(ellipse at 50% 61%,rgba(255,108,0,.27),transparent 75%)!important;
}
html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero .an2-founder-person img{
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 88%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 13%,#000 96%)!important;
 mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 88%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 13%,#000 96%)!important;
 mask-composite:intersect!important;
}
html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth{
 animation:none!important;transform:none!important;perspective:none!important;
}
html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth img{
 clip-path:polygon(0 0,24% 1%,50% 5%,76% 1%,100% 6%,98% 30%,100% 55%,96% 79%,100% 96%,74% 99%,50% 94%,25% 100%,0 100%)!important;
 transform-origin:left center!important;
 animation:an-real-fabric 2.45s ease-in-out infinite!important;
 animation-delay:calc(var(--an-flag-order) * -.097s)!important;
}
html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth::after{
 background:repeating-linear-gradient(105deg,transparent 0%,rgba(0,0,0,.25) 19%,rgba(255,255,255,.36) 35%,transparent 54%,rgba(0,0,0,.16) 69%,transparent 85%)!important;
 background-size:250% 100%!important;mix-blend-mode:soft-light!important;
 animation:an-fabric-light 2.45s linear infinite!important;
 animation-delay:calc(var(--an-flag-order) * -.097s)!important;
}
@keyframes an-real-fabric{
 0%,100%{transform:scaleX(.96) skewY(-3deg);clip-path:polygon(0 0,24% 3%,50% 0,75% 6%,100% 1%,97% 26%,100% 52%,96% 78%,100% 100%,75% 95%,50% 100%,24% 96%,0 100%)}
 25%{transform:scaleX(1.02) skewY(2deg);clip-path:polygon(0 0,24% 0,50% 7%,75% 1%,100% 8%,96% 29%,100% 48%,98% 75%,100% 96%,75% 100%,50% 94%,24% 100%,0 100%)}
 50%{transform:scaleX(.95) skewY(-1deg);clip-path:polygon(0 0,24% 6%,50% 1%,75% 7%,100% 0,98% 26%,100% 55%,95% 77%,100% 100%,75% 94%,50% 100%,24% 95%,0 100%)}
 75%{transform:scaleX(1.02) skewY(2deg);clip-path:polygon(0 0,24% 0,50% 5%,75% 0,100% 7%,96% 28%,100% 50%,98% 79%,100% 96%,75% 100%,50% 95%,24% 100%,0 100%)}
}
@keyframes an-fabric-light{from{background-position:0 0}to{background-position:250% 0}}
}
@media(max-width:800px){
html body.an-about-details-mode #app .an2-topline{margin-top:0!important;padding-top:0!important;padding-bottom:2px!important;min-height:0!important}
html body.an-about-details-mode #app .an2-story{padding-top:0!important}
html :is(body.an-about-details-mode #app, body #app .an-about-mobile-opening) .an2-founder-hero{padding-top:3px!important}
html :is(body.an-about-details-mode #app, body #app .an-about-mobile-opening) .an2-founder-hero>.an2-founder-brand{min-height:84px!important;padding:4px 7px!important;margin-bottom:3px!important}
html :is(body.an-about-details-mode #app, body #app .an-about-mobile-opening) .an2-founder-hero>.an2-founder-brand>.an2-graduate-globe{height:85px!important;width:99px!important}
html :is(body.an-about-details-mode #app, body #app .an-about-mobile-opening) .an2-globe-world{font-size:79px!important;animation:an-globe-turn 9s linear infinite!important;transform-origin:center!important}
html :is(body.an-about-details-mode #app, body #app .an-about-mobile-opening) .an2-globe-cap{font-size:65px!important;top:-13%!important;left:50%!important;animation:none!important;transform:translateX(-50%)!important;filter:sepia(1) saturate(4) hue-rotate(345deg) brightness(.85) drop-shadow(0 3px 3px #000a)!important}
html :is(body.an-about-details-mode #app, body #app .an-about-mobile-opening) .an2-approved-reference-hero{margin-top:0!important}
@keyframes an-globe-turn{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
}
@media(prefers-reduced-motion:reduce){html body.an-about-details-mode #app .an-reference-flag-cloth img,html body.an-about-details-mode #app .an-reference-flag-cloth::after,html :is(body.an-about-details-mode #app, body #app .an-about-mobile-opening) .an2-globe-world{animation:none!important}}

/* About Details chapter cards and accents. */
#app #an2-origins .an2-origin-aside {align-self:start}
#app #an2-origins .an2-origin-aside img {height:clamp(170px,17vw,225px)}
#app #an2-story .an2-card-icon {display:block;width:clamp(36px,3.5vw,46px);height:auto;aspect-ratio:1;color:#ff7900;flex:none}
#app #an2-story .an2-service-num .an2-card-icon {margin-top:8px}
#app #an2-trust .an2-trust-grid article>b {display:flex;align-items:center;justify-content:space-between;gap:8px}
#app #an2-future .an2-future-grid article {text-align:center;background:radial-gradient(ellipse at 50% 0%,var(--an2-card-tone),#151518 84%)!important}
#app #an2-future .an2-future-grid article:nth-child(1) {--an2-card-tone:#392922}
#app #an2-future .an2-future-grid article:nth-child(2) {--an2-card-tone:#282d39}
#app #an2-future .an2-future-grid article:nth-child(3) {--an2-card-tone:#30352c}
#app #an2-future .an2-future-grid p {color:#fff!important;text-align:center;font-size:clamp(13px,1.12vw,16px);line-height:1.65}
#app #an2-future .an2-future-graphic {display:block;width:clamp(76px,7vw,102px);height:auto;margin:0 auto 13px}
#app #an2-future .an2-graphic-halo {fill:#100d126b;stroke:#ffad6259;stroke-width:1}
#app #an2-future :is(.an2-graphic-outline,.an2-graphic-accent) {fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#app #an2-future .an2-graphic-outline {stroke:#fff}
#app #an2-future .an2-graphic-accent {stroke:#ffae68}
#app #an2-future .an2-future-note {color:#ff7900!important}
#app #an2-future .an2-future-grid h3 {margin:0 0 9px;font-size:clamp(16px,1.45vw,21px);text-align:center}
#app #an2-story :is(#an2-trust,#an2-future) h3>.an2-card-accent {color:#ff7900!important;font:inherit;letter-spacing:inherit}
#app #an2-story :is(#an2-trust,#an2-future) h3>.an2-card-white {color:#fff!important;font:inherit;letter-spacing:inherit}
#app #an2-story .an2-closing>img {max-width:140px;height:auto;object-fit:contain}

@media(min-width:801px){
 html body.an-about-details-mode.an-reference-pixel-view #app #an2-story .an2-exact-hero .an2-exact-towers {
   background:
     linear-gradient(90deg,#0a0b10 0%,#120d12 13%,#20130fdb 26%,transparent 54%),
     radial-gradient(ellipse at 62% 37%,#ffe3b7dc 0%,#ffc16bb5 24%,#ff8a3766 49%,transparent 75%),
     linear-gradient(0deg,#1c0e0b 0%,transparent 40%),
     linear-gradient(90deg,#23130d 0%,#a7471a7a 46%,#b3532466 100%),
     url('assets/malaysia-skyline-clean.jpg') 68% 42% / auto 112% no-repeat!important;
 }
}

/* The mobile About globe uses the same horizontal rotation as Read More. */
@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  #app .an-about-banner .an-banner-earth {
    animation: an-globe-turn 9s linear infinite;
  }
}