/* ============================================================
   AAIG — shared styles + animation system
   Edit once; every page uses it.
   ============================================================ */

html { scroll-behavior: smooth; }

/* ---------- Hero image slider (home) ----------------------- */
.hero-slider { overflow: hidden; }
.hero-slider .hs-track { display: flex; height: 100%; }
.hero-slider .hs-slide { flex: 0 0 auto; height: 100%; }
.hero-slider .hs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Hero image caption (home) ---------------------- */
.hero-caption { position: absolute; left: 0; bottom: 1%; z-index: 5; max-width: min(92%, 32rem); pointer-events: auto; cursor: pointer; text-decoration: none; }
.hero-caption-inner {
  margin: 0 0 1.1rem 1.1rem;
  padding: .8rem 1.05rem .9rem;
  background: rgba(9, 0, 60, .72);
  border-left: 3px solid #0066CC;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: opacity .45s ease, transform .45s ease;
}
.hero-caption.is-changing .hero-caption-inner { opacity: 0; transform: translateY(8px); }
.hero-caption.is-hidden { display: none; }
.hero-caption-eyebrow {
  display: block; margin-bottom: .3rem;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #7FB2ED;
}
.hero-caption-text { display: block; color: #fff; font-weight: 600; font-size: 15px; line-height: 1.4; }
.hero-caption:hover .hero-caption-inner { transform: translateY(-2px); border-left-color: #58c8ff; box-shadow: 0 10px 26px rgba(0, 0, 0, .32); }
.hero-caption-eyebrow::after { content: " \2197"; font-weight: 900; }
@media (max-width: 640px) {
  .hero-caption-inner { margin: 0 0 .7rem .7rem; padding: .6rem .8rem .65rem; }
  .hero-caption-text { font-size: 13px; }
}

/* ---------- Hero slider — manual dot navigation --------------- */
.hs-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hs-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.hs-dot:hover { background: rgba(255, 255, 255, .8); }
.hs-dot.is-active { background: #fff; transform: scale(1.3); }
@media (max-width: 640px) {
  .hs-dots { bottom: 10px; gap: 6px; }
  .hs-dot { width: 6px; height: 6px; }
}

/* Play / pause control — hidden during autoplay, revealed on manual navigation */
.hs-playpause {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 7;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 44, 116, .28);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 6px 18px rgba(0, 44, 116, .18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hs-playpause.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.hs-playpause:hover { background: rgba(0, 102, 204, .5); }
.hs-playpause svg { width: 17px; height: 17px; }
@media (max-width: 640px) {
  .hs-playpause { right: 10px; bottom: 8px; width: 34px; height: 34px; }
}

:root {
  --navy: #002C74;
  --indigo: #09003C;
  --accent: #0066CC;
  --gray: #5A5F6A;
  --surface: #F5F7FA;
  --white: #FFFFFF;
  --ease: cubic-bezier(.16, 1, .3, 1);   /* expo-out: smooth, premium */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: var(--surface);
  color: var(--gray);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--navy);
  letter-spacing: -0.025em;
}

/* ---------- Scroll reveal ----------------------------------- */
/* Everything is visible by default (no-JS safe). The .js class is
   added by an inline script only when JS runs, which is what arms
   the hidden-then-reveal behaviour. */

html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
html.js .reveal.in { opacity: 1; transform: none; }

/* directional variants */
html.js .reveal.from-left  { transform: translateX(-40px); }
html.js .reveal.from-right { transform: translateX(40px); }
html.js .reveal.zoom       { transform: scale(.94); }
html.js .reveal.in.from-left,
html.js .reveal.in.from-right,
html.js .reveal.in.zoom    { transform: none; }

/* delay steps */
html.js .reveal.d1 { transition-delay: .08s; }
html.js .reveal.d2 { transition-delay: .16s; }
html.js .reveal.d3 { transition-delay: .24s; }
html.js .reveal.d4 { transition-delay: .32s; }
html.js .reveal.d5 { transition-delay: .40s; }

/* staggered children — the parent gets .r-stagger */
html.js .r-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
html.js .r-stagger.in > * { opacity: 1; transform: none; }
html.js .r-stagger.in > *:nth-child(1) { transition-delay: .05s; }
html.js .r-stagger.in > *:nth-child(2) { transition-delay: .12s; }
html.js .r-stagger.in > *:nth-child(3) { transition-delay: .19s; }
html.js .r-stagger.in > *:nth-child(4) { transition-delay: .26s; }
html.js .r-stagger.in > *:nth-child(5) { transition-delay: .33s; }
html.js .r-stagger.in > *:nth-child(6) { transition-delay: .40s; }
html.js .r-stagger.in > *:nth-child(7) { transition-delay: .47s; }
html.js .r-stagger.in > *:nth-child(8) { transition-delay: .54s; }
html.js .r-stagger.in > *:nth-child(9) { transition-delay: .61s; }
html.js .r-stagger.in > *:nth-child(10) { transition-delay: .68s; }
html.js .r-stagger.in > *:nth-child(11) { transition-delay: .75s; }
html.js .r-stagger.in > *:nth-child(12) { transition-delay: .82s; }

/* ---------- Hero entrance ---------------------------------- */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.js .hero-el { opacity: 0; animation: heroUp 1s var(--ease) forwards; }
html.js .hero-el.h1 { animation-delay: .10s; }
html.js .hero-el.h2 { animation-delay: .28s; }
html.js .hero-el.h3 { animation-delay: .46s; }
html.js .hero-el.h4 { animation-delay: .62s; }

/* accent bar grows out */
@keyframes barGrow { from { width: 0; } to { width: 6rem; } }
html.js .bar-grow { animation: barGrow 1s var(--ease) .6s both; }

/* ---------- Sticky header elevation ------------------------ */
/* Freeze the header at the top of the page while scrolling. */
#site-header { position: sticky; top: 0; z-index: 50; }
#site-header header {
  transition: box-shadow .35s var(--ease-soft), background-color .35s var(--ease-soft);
}
#site-header header.scrolled {
  box-shadow: 0 10px 30px -12px rgba(0, 44, 116, .22);
  background-color: #fff;
}

/* dropdown menus glide in */
#site-header .group .absolute {
  transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft), visibility .25s;
  transform: translate(-50%, 8px);
}
#site-header .group:hover .absolute {
  transform: translate(-50%, 0);
}

/* ---------- Hover lift for cards --------------------------- */
.lift { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.lift:hover { transform: translateY(-8px); box-shadow: 0 24px 40px -20px rgba(0, 44, 116, .28); }

/* ---------- Our Values cards --------------------------------- */
.ov-number {
  display: block;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: rgba(0, 102, 204, .32);
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.ov-card {
  position: relative;
  background: #fff;
  box-shadow: 0 2px 10px -4px rgba(0, 44, 116, .10);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.ov-card:hover {
  background: rgba(0, 102, 204, .04);
  box-shadow: 0 20px 36px -18px rgba(0, 44, 116, .18);
  transform: scale(1.035);
}
.ov-card:hover .ov-number { color: var(--accent); transform: translateY(-4px); }
.lift:hover .ov-number { color: var(--accent); }
.ov-card h3 { transition: color .35s var(--ease); }
.ov-card:hover h3 { color: var(--accent); }
.ov-bar {
  display: block;
  width: 40%;
  height: 2px;
  margin: 1.25rem auto 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.ov-card:hover .ov-bar { opacity: 1; }
@media (max-width: 640px) {
  .ov-card:hover { transform: none; }
}

/* ---------- CTA button ------------------------------------- */
.btn-primary { position: relative; overflow: hidden; transition: background-color .3s, transform .3s var(--ease), box-shadow .3s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(0, 102, 204, .55); }
.btn-primary::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease-soft);
}
.btn-primary:hover::after { left: 140%; }

/* ---------- Count-up stat ---------------------------------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .r-stagger > *,
  html.js .hero-el { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  html.js .bar-grow { animation: none !important; width: 6rem; }
  .lift:hover, .btn-primary:hover { transform: none; }
}

/* ---------- Page-load splash (every page) ------------------ */
#page-loader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  transition: opacity .6s ease, visibility .6s ease;
}
#page-loader.hide { opacity: 0; visibility: hidden; }
#page-loader .pl-logo { width: min(320px, 60vw); height: auto; animation: plPulse 1.4s ease-in-out infinite; }
@keyframes plPulse { 0%, 100% { opacity: .5; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.02); } }

/* ---------- Refreshment: content fades in after the splash - */
@keyframes contentFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html.js body.page-ready main { animation: contentFade .6s var(--ease) both; }

/* ---------- Refreshment: animated top-nav underline -------- */
#site-header nav > a,
#site-header nav .group > a { position: relative; }
#site-header nav > a::after,
#site-header nav .group > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; margin: 0 auto;
  width: 0; height: 2px; background: var(--accent);
  transition: width .3s var(--ease-soft);
}
#site-header nav > a:hover::after,
#site-header nav .group:hover > a::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  #page-loader .pl-logo { animation: none; opacity: 1; }
  html.js body.page-ready main { animation: none; }
  #site-header nav > a::after, #site-header nav .group > a::after { transition: none; }
}