/* A&N Overseas desktop About Details: use the approved, user-supplied visual
   as the actual surface, not a newly approximated set of gradients/layouts.
   All navigation and flag cloth motion are separate live DOM elements.
   The founder's original website portrait is layered over the reference.
   Restricted to the About Details laptop viewport; no mobile changes. */
@media (min-width:801px){
 html body.an-about-details-mode.an-reference-pixel-view #app>.an2-story{
   width:calc(100% - 20px)!important;max-width:1600px!important;
   padding:1px 0 65px!important;margin:0 auto!important;
   height:auto!important;overflow:visible!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-topline{
   min-height:34px!important;padding:2px 8px 6px!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero{
   position:relative!important;isolation:isolate!important;
   display:block!important;width:100%!important;
   height:auto!important;aspect-ratio:716 / 292;min-height:0!important;
   max-height:none!important;margin:0!important;padding:0!important;
   border:none!important;border-radius:0!important;overflow:hidden!important;
   background:#080c13 url('assets/an-about-approved-reference-hero-20261108.webp?v=hires-q90-v2') center center / 100% 100% no-repeat!important;
   box-shadow:none!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero::before,
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero::after{
   content:none!important;display:none!important;
 }
 /* Approved reference already prints the logo, all quotation typography,
    airport route heading, globe, button artwork and lower slogan. */
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero :is(
   .an2-founder-brand,.an2-founder-quote,.an2-exact-world-title,
   .an2-exact-globe,.an2-exact-plane,.an2-exact-slogan,
   .an2-exact-name,.an2-exact-role,.an2-exact-flagband){
   visibility:hidden!important;opacity:0!important;
   pointer-events:none!important;
 }
 /* The approved reference's portrait was covered in the background asset.
    Restore the ORIGINAL real founder PNG, unchanged, at matching scale. */
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero .an2-exact-towers{
   position:absolute!important;display:block!important;
   z-index:3!important;top:0!important;right:0!important;left:auto!important;
   bottom:auto!important;width:21.3%!important;height:69%!important;border-top-right-radius:2vw;
   background:
    linear-gradient(90deg,#120d18 0%,transparent 63%),
    linear-gradient(0deg,#110d16 0%,transparent 22%),
    url('assets/malaysia-skyline-clean.jpg') 69% 43% / auto 128% no-repeat!important;
   opacity:.68!important;
   -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 35%)!important;
   mask-image:linear-gradient(90deg,transparent 0%,black 35%)!important;
   pointer-events:none!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero .an2-founder-person{
   display:block!important;visibility:visible!important;opacity:1!important;
   position:absolute!important;z-index:9!important;
   top:1.3%!important;left:auto!important;right:1.1%!important;bottom:auto!important;
   width:21.8%!important;height:68%!important;min-height:0!important;max-height:none!important;
   margin:0!important;padding:0!important;overflow:hidden!important;
   filter:none!important;pointer-events:none!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero .an2-founder-person img{
   display:block!important;visibility:visible!important;opacity:1!important;
   position:absolute!important;top:auto!important;left:auto!important;
   right:0!important;bottom:4.5%!important;
   height:97%!important;width:100%!important;max-width:none!important;max-height:none!important;
   object-fit:contain!important;object-position:center bottom!important;
   filter:drop-shadow(0 5px 7px #0007)!important;transform:none!important;
   clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero .an2-founder-person figcaption{
   display:none!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero .an2-founder-person::after{
   content:"CEO & HEAD OF MARKETING";position:absolute;inset:auto 0 0;
   color:#fff;text-align:center;font-size:clamp(7px,.95vw,13px);
   font-weight:800;line-height:1.15;letter-spacing:.035em;text-shadow:0 1px 4px #000;
 }
 /* Actual links overlap precisely with the five printed cards. Their visible
    artwork is from the approved image, but the controls stay keyboard/clickable. */
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero>.an2-nav{
   display:grid!important;position:absolute!important;z-index:20!important;
   top:58.5%!important;left:.9%!important;right:17.7%!important;
   width:auto!important;height:12.15%!important;min-height:0!important;
   grid-template-columns:repeat(5,minmax(0,1fr))!important;
   padding:0!important;margin:0!important;gap:.45%!important;
   background:transparent!important;border:0!important;box-shadow:none!important;
   overflow:visible!important;backdrop-filter:none!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero>.an2-nav a{
   display:flex!important;position:relative!important;align-items:center!important;
   justify-content:center!important;width:100%!important;height:100%!important;
   padding:0!important;margin:0!important;min-height:0!important;
   color:transparent!important;background:transparent!important;
   border:1px solid transparent!important;border-radius:13px!important;
   box-shadow:none!important;transform:none!important;cursor:pointer!important;
   white-space:normal!important;text-decoration:none!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero>.an2-nav a *{
   opacity:0!important;visibility:hidden!important;pointer-events:none!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero>.an2-nav a:hover{
   border-color:#ffd19b99!important;box-shadow:0 0 15px #ff8d236b!important;
   background:rgba(255,135,15,.045)!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an2-exact-hero>.an2-nav a:focus-visible{
   outline:3px solid #ffe0ae!important;outline-offset:2px!important;
 }
 /* All countries visible, including the flags on the approved mobile artwork.
    Two compact fixed rows retain the reference's golden flagpole treatment. */
 html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flags{
   display:grid!important;position:absolute!important;z-index:12!important;
   top:74.1%!important;bottom:auto!important;left:1.2%!important;right:1.2%!important;
   width:auto!important;height:17.9%!important;min-height:0!important;
   grid-template-columns:repeat(20,minmax(0,1fr))!important;
   grid-template-rows:repeat(2,minmax(0,1fr))!important;
   column-gap:1px!important;row-gap:0!important;
   margin:0!important;padding:0!important;overflow:visible!important;
   background:transparent!important;pointer-events:none!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag{
   position:relative!important;display:flex!important;align-items:flex-start!important;
   justify-content:center!important;width:100%!important;height:100%!important;
   padding:5px 2px 0 7px!important;margin:0!important;overflow:visible!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag::before{
   content:""!important;display:block!important;position:absolute!important;
   top:3px!important;bottom:0!important;left:5px!important;width:2px!important;
   background:linear-gradient(90deg,#845010,#ffd68a,#83400c)!important;
   box-shadow:0 0 2px #f7b54e85!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag::after{
   content:""!important;display:block!important;position:absolute!important;
   top:0!important;left:3px!important;width:6px!important;height:6px!important;
   border-radius:50%!important;
   background:radial-gradient(circle at 34% 26%,#fff0b4,#d49223 72%)!important;
   box-shadow:0 0 3px #ffcc73!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth{
   display:block!important;position:relative!important;
   width:calc(100% - 5px)!important;height:clamp(12px,2.2vw,30px)!important;
   max-height:65%!important;flex:none!important;transform-origin:left center!important;
   transform-style:preserve-3d!important;filter:drop-shadow(1px 3px 2px #0009)!important;
   -webkit-backface-visibility:visible!important;backface-visibility:visible!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth img{
   display:block!important;width:100%!important;height:100%!important;
   max-width:100%!important;max-height:100%!important;object-fit:fill!important;
   border:0!important;border-radius:0!important;
   clip-path:polygon(0 0,100% 2%,97% 28%,100% 54%,96% 80%,100% 98%,0 100%);
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth::after{
   content:"";position:absolute;inset:0;pointer-events:none;
   background:linear-gradient(95deg,#0008,transparent 28%,#fff6 46%,transparent 66%,#0005);
   mix-blend-mode:soft-light;background-size:210% 100%;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-fallback{
   display:none!important;font-size:24px;line-height:1;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag.is-fallback .an-reference-flag-cloth img{
   display:none!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag.is-fallback .an-reference-flag-fallback{
   display:inline!important;
 }
 @keyframes an-reference-cloth-wave{
   0%,100%{transform:perspective(160px) rotateY(-11deg) skewY(-2deg) scaleX(.96)}
   25%{transform:perspective(160px) rotateY(12deg) skewY(1.8deg) scaleX(1.03)}
   53%{transform:perspective(160px) rotateY(-8deg) skewY(-1.3deg) scaleX(.98)}
   77%{transform:perspective(160px) rotateY(8deg) skewY(1.1deg) scaleX(1.01)}
 }
 @keyframes an-reference-cloth-ripple{
   0%,100%{clip-path:polygon(0 0,25% 4%,50% 8%,75% 5%,100% 0,100% 92%,75% 98%,50% 100%,25% 96%,0 94%)}
   33%{clip-path:polygon(0 0,25% 0,50% 4%,75% 10%,100% 12%,100% 100%,75% 100%,50% 96%,25% 92%,0 94%)}
   67%{clip-path:polygon(0 0,25% 8%,50% 9%,75% 3%,100% 1%,100% 90%,75% 95%,50% 100%,25% 100%,0 94%)}
 }
 @keyframes an-reference-cloth-shine{
   0%,100%{background-position:0% center}50%{background-position:100% center}
 }
 @media(prefers-reduced-motion:no-preference){
  html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth{
    animation:an-reference-cloth-wave 3.2s ease-in-out infinite!important;
    animation-delay:calc(var(--an-flag-order) * -.14s)!important;
  }
  html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth img{
    animation:an-reference-cloth-ripple 1.8s ease-in-out infinite;
    animation-delay:calc(var(--an-flag-order) * -.14s);
  }
  html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth::after{
    animation:an-reference-cloth-shine 3.2s ease-in-out infinite!important;
    animation-delay:calc(var(--an-flag-order) * -.14s)!important;
  }
 }
 @media(prefers-reduced-motion:reduce){
  html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth,
  html body.an-about-details-mode.an-reference-pixel-view #app .an-reference-flag-cloth::after{
    animation:none!important;transform:none!important;
  }
 }
}

@media (min-width:801px){
 html body.an-about-details-mode.an-reference-pixel-view #app #an2-story .an2-exact-hero .an2-exact-towers{
   right:0!important;width:24.5%!important;height:69%!important;opacity:1!important;
   background:
    radial-gradient(ellipse at 54% 46%,#fff0bdaf 0%,#ffac4778 27%,#e85c0d3d 53%,transparent 72%),
    radial-gradient(ellipse at 96% 87%,#f16411b0 0%,transparent 58%),
    linear-gradient(0deg,#180805 0%,transparent 35%),
    linear-gradient(90deg,#351405 0%,#8d360bcd 18%,#7d30064a 44%,#46180830 100%),
    url('assets/malaysia-skyline-clean.jpg') 68% 42% / auto 112% no-repeat!important;
   -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%), linear-gradient(34deg,transparent 0%,transparent 10%,#000 23%)!important;
   mask-image:linear-gradient(90deg,transparent 0%,#000 10%), linear-gradient(34deg,transparent 0%,transparent 10%,#000 23%)!important;
   mask-composite:intersect!important;
   border-top-right-radius:1.65vw;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app #an2-story .an2-exact-hero .an2-founder-person{
   top:.7%!important;right:1.1%!important;width:20.4%!important;height:68.5%!important;overflow:hidden!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app #an2-story .an2-exact-hero .an2-founder-person img{
   right:-8%!important;bottom:3%!important;width:124%!important;height:150%!important;
   object-position:center bottom!important;clip-path:inset(0 0 7% 0)!important;
   transform:none!important;filter:drop-shadow(-2px 0 3px #ffe0a2) drop-shadow(0 0 13px #ff8a1dc9)!important;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app #an2-story .an2-exact-hero .an2-founder-person::before{
   content:"NUSRAT NASRIN";position:absolute;z-index:1;left:22%;right:3%;bottom:0;
   padding:.25em .15em 1.35em;text-align:center;border:1px solid #ffad56;box-shadow:inset 0 0 9px #ed680b60;border-radius:9px;
   background:#140a04;color:#fff;font-size:clamp(9px,1.2vw,16px);font-weight:850;letter-spacing:.06em;line-height:1.15;
 }
 html body.an-about-details-mode.an-reference-pixel-view #app #an2-story .an2-exact-hero .an2-founder-person::after{
   z-index:2;left:22%;right:3%;bottom:.4em;color:#ffc675;
   font-size:clamp(6px,.74vw,11px);white-space:nowrap;
 }
}