/* A&N Overseas | About Details desktop layout and premium story polish | 2026-11-07
   Deliberately scoped to the full About Details route; mobile structure unchanged. */
@media (min-width:801px) {
  html:has(body.an-about-details-mode) {
    height:auto!important;overflow-x:clip!important;overflow-y:auto!important;
    scroll-padding-top:calc(var(--an-details-header-h,108px) + var(--an-details-ticker-h,28px) + 56px);
  }
  body.an-about-details-mode {
    height:auto!important;overflow-x:clip!important;overflow-y:visible!important;
  }
  /* Keep both site navigation and Latest Updates visible throughout this story. */
  body.an-about-details-mode > header.top {
    position:fixed!important;top:0!important;left:0!important;right:0!important;
    width:100%!important;z-index:2200!important;
  }
  body.an-about-details-mode > #an-global-ticker {
    position:fixed!important;top:var(--an-details-header-h,108px)!important;
    left:0!important;right:0!important;width:100%!important;z-index:2199!important;
  }
  body.an-about-details-mode #app {
    padding-top:calc(var(--an-details-header-h,108px) + var(--an-details-ticker-h,28px))!important;
    overflow:visible!important;height:auto!important;max-height:none!important;
  }
  body.an-about-details-mode #app > .an2-story {
    padding-top:5px!important;padding-bottom:60px!important;
    height:auto!important;max-height:none!important;overflow:visible!important;
  }
  body.an-about-details-mode #app .an2-topline {padding:1px 2px 6px!important;min-height:30px!important}
  body.an-about-details-mode #app .an2-topline a {padding:5px 12px!important}
  /* The opening story + all five jump buttons share the first laptop viewport. */
  body.an-about-details-mode #app .an2-founder-hero {
    height:var(--an-details-hero-h,410px)!important;min-height:0!important;
    max-height:none!important;gap:10px!important;overflow:hidden!important;
    grid-template-columns:minmax(165px,.54fr) minmax(0,1.46fr)!important;
  }
  body.an-about-details-mode #app .an2-founder-brand {
    height:100%!important;min-height:0!important;
    padding:10px 0 10px 15px!important;
  }
  body.an-about-details-mode #app .an2-founder-brand img {
    max-height:76px!important;width:min(100%,163px)!important;
  }
  body.an-about-details-mode #app .an2-founder-quote {
    height:calc(100% - 12px)!important;min-height:0!important;max-height:none!important;
    margin:6px 9px 6px 0!important;padding:8px 13px 0!important;
    overflow:hidden!important;display:flex!important;flex-direction:column!important;
  }
  body.an-about-details-mode #app .an2-quote-mark {
    font-size:34px!important;height:21px!important;line-height:1!important;
  }
  body.an-about-details-mode #app .an2-founder-quote blockquote {
    font-size:clamp(11.2px,.96vw,13.8px)!important;
    line-height:1.31!important;letter-spacing:0!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-quote-footer {
    margin-top:auto!important;margin-bottom:0!important;
    min-height:clamp(164px,25vh,214px)!important;
    grid-template-columns:minmax(0,1fr) clamp(180px,22vw,230px)!important;
    gap:5px!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-quote-sign {
    padding-top:4px!important;padding-bottom:6px!important;
    gap:3px!important;min-height:0!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-flags-journey {
    min-height:0!important;gap:3px!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-floating-flags {
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    gap:3px 5px!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-floating-flags .an2-flag-unit {
    min-height:18px!important;height:18px!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-floating-flags .an2-flag-unit--home {
    min-height:33px!important;height:33px!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-floating-flags .an2-flag {
    width:28px!important;height:18px!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-floating-flags .an2-flag-unit--home .an2-flag {
    width:52px!important;height:32px!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-founder-person {
    height:clamp(164px,25vh,214px)!important;
    width:clamp(180px,22vw,230px)!important;
    align-self:end!important;justify-self:end!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-founder-person img {
    width:clamp(270px,29vw,390px)!important;
    height:auto!important;right:-27px!important;
    bottom:-5px!important;top:auto!important;
  }
  body.an-about-details-mode #app .an2-nav {
    position:sticky!important;
    top:calc(var(--an-details-header-h,108px) + var(--an-details-ticker-h,28px))!important;
    z-index:1300!important;
    padding:7px 1px!important;gap:8px!important;
    background:rgba(8,11,16,.96)!important;
    border-bottom:1px solid rgba(255,154,52,.2);
  }
  body.an-about-details-mode #app .an2-nav a {padding:8px 13px!important;min-height:32px!important}
  body.an-about-details-mode #app :is(.an2-intro-section,.an2-story-chapter,.an2-platform,.an2-all-services,.an2-future) {
    scroll-margin-top:calc(var(--an-details-header-h,108px) + var(--an-details-ticker-h,28px) + 60px)!important;
  }
  /* Short laptop displays: preserve headline legibility without spilling past the nav. */
  body.an-about-details-mode.an-details-compact #app .an2-founder-quote blockquote {
    font-size:clamp(11px,.9vw,12.6px)!important;line-height:1.24!important;
  }
  body.an-about-details-mode.an-details-compact #app .an2-founder-quote .an2-quote-footer {
    min-height:156px!important;
  }
  body.an-about-details-mode.an-details-compact #app .an2-founder-quote .an2-founder-person {
    height:156px!important;
  }
  body.an-about-details-mode.an-details-compact #app .an2-founder-quote .an2-founder-person img {
    width:clamp(258px,25vw,335px)!important;
  }
  body.an-about-details-mode.an-details-compact #app .an2-founder-quote .an2-floating-flags {
    gap:2px 4px!important;
  }
}
/* Editorial hierarchy: orange/gold headings, calm white body text, refined borders. */
body.an-about-details-mode #app .an2-trust-grid article {
  border:1px solid rgba(249,153,67,.48)!important;
  border-top:3px solid #ff8d1c!important;
  background:linear-gradient(145deg,rgba(74,40,24,.68),rgba(18,20,27,.98))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.15),inset 0 1px rgba(255,208,140,.07)!important;
  transition:transform .18s ease,border-color .18s ease;
}
body.an-about-details-mode #app .an2-trust-grid article:hover {
  transform:translateY(-3px);border-color:#ffb260!important;
}
body.an-about-details-mode #app .an2-trust-grid article:nth-child(2) {border-top-color:#ffc66d!important}
body.an-about-details-mode #app .an2-trust-grid article:nth-child(3) {border-top-color:#f77a34!important}
body.an-about-details-mode #app .an2-trust-grid h3 {
  color:#ffab44!important;font-weight:850!important;letter-spacing:.1px!important;
}
body.an-about-details-mode #app .an2-trust-grid article:nth-child(2) h3 {color:#ffd28b!important}
body.an-about-details-mode #app .an2-trust-grid article:nth-child(3) h3 {color:#fff4e7!important}
body.an-about-details-mode #app .an2-trust-grid p {color:#ecdfd1!important;line-height:1.65!important}
body.an-about-details-mode #app .an2-service {
  border:1px solid rgba(255,162,66,.36)!important;
  border-top:2px solid rgba(255,151,32,.72)!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,#251a15,#111720 72%)!important;
  box-shadow:0 10px 25px rgba(0,0,0,.14)!important;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
body.an-about-details-mode #app .an2-service:hover {
  transform:translateY(-3px);border-color:#ff9e3c!important;
  box-shadow:0 14px 30px rgba(0,0,0,.26)!important;
}
body.an-about-details-mode #app .an2-service > div {
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important;
}
body.an-about-details-mode #app .an2-service h3 {
  color:#ffad56!important;font-weight:850!important;letter-spacing:.1px!important;
}
body.an-about-details-mode #app .an2-service:nth-child(3n+2) h3 {color:#ffe0a6!important}
body.an-about-details-mode #app .an2-service:nth-child(3n) h3 {color:#fff5e9!important}
body.an-about-details-mode #app .an2-service p {
  color:#e7d8ca!important;font-size:12.5px!important;line-height:1.65!important;
  margin-bottom:16px!important;
}
body.an-about-details-mode #app .an2-service a {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  margin-top:auto!important;padding:10px 15px!important;min-height:34px!important;
  border:1px solid #ffb15f!important;border-radius:10px!important;
  background:linear-gradient(110deg,#ffb03f,#f97707)!important;
  color:#1a1009!important;font-size:10px!important;line-height:1.25!important;
  font-weight:900!important;letter-spacing:.45px!important;text-decoration:none!important;
  box-shadow:0 5px 14px rgba(245,113,9,.22)!important;
}
body.an-about-details-mode #app .an2-service a:hover,
body.an-about-details-mode #app .an2-service a:focus-visible {
  background:linear-gradient(110deg,#ffd48a,#ff9b20)!important;
  border-color:#ffe2a6!important;box-shadow:0 7px 22px rgba(255,148,32,.3)!important;
}
/* Progressive cloth-like flag motion: staggered ripples plus moving light/shadow. */
@keyframes an-about-flag-undulate {
  0%,100% { transform:perspective(145px) rotateY(-11deg) skewY(-2deg) translateY(0) }
  24% { transform:perspective(145px) rotateY(11deg) skewY(2deg) translateY(-2px) }
  50% { transform:perspective(145px) rotateY(-6deg) skewY(-1.5deg) translateY(1px) }
  76% { transform:perspective(145px) rotateY(8deg) skewY(1deg) translateY(-1px) }
}
@keyframes an-about-flag-light {
  0%,100% {background-position:0% 50%;opacity:.42}
  50% {background-position:100% 50%;opacity:.69}
}
@media (prefers-reduced-motion:no-preference) {
  body.an-about-details-mode #app .an2-founder-quote .an2-floating-flags .an2-flag {
    position:relative!important;transform-style:preserve-3d!important;backface-visibility:visible!important;
    animation:an-about-flag-undulate 2.5s ease-in-out infinite!important;
    animation-delay:calc(var(--flag-index) * -0.18s)!important;
    will-change:transform!important;
  }
  body.an-about-details-mode #app .an2-founder-quote .an2-floating-flags .an2-flag::after {
    content:"";position:absolute;inset:0;pointer-events:none;
    border-radius:2px;background:linear-gradient(105deg,rgba(0,0,0,.4),transparent 33%,rgba(255,255,255,.45) 50%,transparent 64%,rgba(0,0,0,.23));
    background-size:230% 100%;mix-blend-mode:soft-light;
    animation:an-about-flag-light 2.5s ease-in-out infinite;
    animation-delay:calc(var(--flag-index) * -0.18s);
  }
}
@media (prefers-reduced-motion:reduce) {
  body.an-about-details-mode #app .an2-founder-quote .an2-floating-flags .an2-flag,
  body.an-about-details-mode #app .an2-founder-quote .an2-floating-flags .an2-flag::after {
    animation:none!important;
  }
}

/* Split colour titles with readable white description on dark card. */
body.an-about-details-mode #app .an2-service-grid .an2-service h3{color:#fff!important;font-weight:900!important}
body.an-about-details-mode #app .an2-service-grid .an2-service h3 .an2-title-accent{color:#ff7900!important}
body.an-about-details-mode #app .an2-service-grid .an2-service h3 .an2-title-rest{color:#fff!important}
body.an-about-details-mode #app .an2-service-grid .an2-service p{color:#fff!important;opacity:1!important}
body.an-about-details-mode #app .an2-service-grid .an2-service-num{color:#ff7900!important}