/* ==========================================================================
   ASIA-PACIFIC PRESENCE PAGE
   A cinematic, map-led composition: full-bleed globe hero, a flagship
   spotlight for Australia, a stacked country ledger for the regional
   network, a second globe moment, and a vertical growth timeline.
   ========================================================================== */

/* ------------------------------- Hero ------------------------------- */
.apac-hero{
  position:relative;
  min-height:94vh;
  display:flex; align-items:flex-end;
  background:radial-gradient(ellipse 100% 60% at 50% 0%, #0E1730 0%, var(--navy-900) 65%);
  color:#fff;
  overflow:hidden;
  padding-top:calc(var(--section-pad-y) + 4rem);
}
.apac-hero-canvas{
  position:absolute; inset:0; z-index:0;
}
.apac-hero-canvas canvas{ position:absolute; inset:0; width:100%; height:100%; }
.apac-hero-canvas::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,11,26,.15) 0%, rgba(8,11,26,.35) 55%, var(--navy-900) 96%);
}
.apac-hero-inner{
  position:relative; z-index:2;
  padding-block:var(--space-9) var(--space-8);
  width:100%;
}
.apac-hero-inner h1{
  font-size:var(--fs-hero);
  max-width:17ch;
  margin-top:1.5rem;
}
.apac-hero-inner p{
  margin-top:1.75rem;
  color:rgba(255,255,255,.68);
  font-size:var(--fs-body-lg);
  max-width:52ch;
}
.region-chips{
  display:flex; flex-wrap:wrap; gap:.65rem;
  margin-top:2.5rem;
}
.region-chip{
  display:flex; align-items:center; gap:.55rem;
  border:1px solid var(--line-on-dark);
  border-radius:var(--radius-pill);
  padding:.55rem 1rem .55rem .65rem;
  font-size:.85rem;
  background:var(--surface-on-dark);
}
.region-chip.is-flagship{ border-color:var(--sky-500); background:rgba(79,184,234,.12); }
.region-chip .flag{ font-size:1.1rem; line-height:1; }

/* ---------------------------- Positioning ---------------------------- */
.apac-position{ background:var(--white); padding-block:var(--section-pad-y-lg); }
.apac-position-inner{
  max-width:58ch; margin-inline:auto; text-align:center;
}
.apac-position-inner .eyebrow{ justify-content:center; margin-bottom:1.75rem; }
.apac-position-inner h2{
  font-family:var(--font-display); font-size:var(--fs-display-lg);
  margin-bottom:1.75rem;
}
.apac-position-inner p{ font-size:var(--fs-body-lg); color:var(--ink-soft); }
.apac-position-inner p + p{ margin-top:1.25rem; }

/* ---------------------------- Flagship spotlight ---------------------------- */
.apac-flagship{ background:var(--navy-900); color:#fff; padding-block:var(--section-pad-y-lg); }
.flagship-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:center;
}
.flagship-copy .status-tag{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sky-400); display:inline-flex; align-items:center; gap:.6rem;
}
.flagship-copy .status-tag::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--sky-500); }
.flagship-copy h2{
  font-family:var(--font-display); font-size:var(--fs-display-lg);
  margin:1.25rem 0 1.5rem; max-width:14ch;
}
.flagship-copy p{ color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); max-width:44ch; }
.flagship-copy .flagship-meaning{
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line-on-dark);
  font-size:.95rem; color:rgba(255,255,255,.78);
}
.flagship-copy .flagship-meaning b{ display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sky-400); margin-bottom:.5rem; font-weight:500; }
.flagship-photos{ display:grid; grid-template-columns:1.2fr 1fr; gap:1rem; }
.flagship-photos .fp-img{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.flagship-photos .fp-img:first-child{ aspect-ratio:3/4; }
.flagship-photos .fp-img:last-child{ aspect-ratio:3/5; margin-top:2rem; }
.flagship-photos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:960px){
  .flagship-grid{ grid-template-columns:1fr; }
  .flagship-photos{ order:-1; }
}

/* ---------------------------- Region ledger ---------------------------- */
.apac-regions{ background:var(--paper); }
.regions-head{ margin-bottom:var(--space-8); }
.regions-head h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); max-width:20ch; }
.regions-head p{ color:var(--ink-soft); margin-top:1rem; max-width:56ch; font-size:var(--fs-body-lg); }
.region-ledger{ border-top:1px solid var(--line-on-light); }
.region-row{
  display:grid; grid-template-columns:64px 200px 1.3fr 1fr; gap:var(--space-6);
  padding-block:var(--space-7);
  border-bottom:1px solid var(--line-on-light);
  align-items:start;
  transition:background .4s var(--ease-out), box-shadow .4s var(--ease-premium);
  box-shadow:inset 3px 0 0 0 transparent;
}
.region-row:hover{ background:var(--white); box-shadow:inset 3px 0 0 0 var(--sky-500); }
.region-row .flag{ font-size:2rem; line-height:1; }
.region-row .region-name{ display:flex; flex-direction:column; gap:.5rem; }
.region-row .region-name h3{ font-family:var(--font-display); font-size:1.35rem; }
.region-row .region-name .tag{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sky-600); display:inline-flex; align-items:center; gap:.5rem; width:fit-content;
}
.region-row .region-name .tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sky-500); }
.region-row .region-copy{ color:var(--ink-soft); font-size:.98rem; }
.region-row .region-meaning{ font-size:.9rem; color:var(--ink); }
.region-row .region-meaning b{ display:block; font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sky-600); margin-bottom:.4rem; font-weight:500; }
@media (max-width:860px){
  .region-row{ grid-template-columns:48px 1fr; }
  .region-row .region-copy, .region-row .region-meaning{ grid-column:1/-1; }
}

/* ---------------------------- Globe scene ---------------------------- */
.apac-globe-scene{
  position:relative; background:var(--navy-900); color:#fff;
  min-height:88vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center;
}
.globe-scene-canvas{ position:absolute; inset:0; }
.globe-scene-canvas canvas{ position:absolute; inset:0; width:100%; height:100%; }
.globe-scene-copy{ position:relative; z-index:2; max-width:42ch; margin-inline:auto; }
.globe-scene-copy .eyebrow{ justify-content:center; margin-bottom:1.5rem; }
.globe-scene-copy h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); }
.globe-scene-copy p{ margin-top:1.25rem; color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); }

/* ---------------------------- Growth timeline ---------------------------- */
.apac-timeline{ background:var(--navy-800); color:#fff; }
.timeline-head{ margin-bottom:var(--space-8); max-width:44ch; }
.timeline-head h2{ font-family:var(--font-display); font-size:var(--fs-display-md); margin-top:1rem; }
.timeline-rail{ position:relative; padding-left:2.5rem; }
.timeline-rail::before{ content:''; position:absolute; left:5px; top:.5rem; bottom:.5rem; width:1px; background:var(--line-on-dark); }
.timeline-item{ position:relative; padding-bottom:var(--space-8); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left:-2.5rem; top:.35rem; width:11px; height:11px; border-radius:50%;
  background:var(--navy-800); border:2px solid var(--sky-500);
}
.timeline-item .idx{ font-family:var(--font-mono); font-size:.75rem; color:var(--sky-400); letter-spacing:.1em; }
.timeline-item h3{ font-family:var(--font-display); font-size:1.3rem; margin:.6rem 0 .5rem; }
.timeline-item p{ color:rgba(255,255,255,.62); max-width:52ch; font-size:.98rem; }

/* ---------------------------- CTA ---------------------------- */
.apac-cta{
  position:relative; background:var(--navy-900); color:#fff;
  padding-block:var(--section-pad-y-lg); text-align:center; overflow:hidden;
}
.apac-cta h2{ font-family:var(--font-display); font-size:var(--fs-display-xl); max-width:18ch; margin-inline:auto; }
.apac-cta p{ margin:1.5rem auto 0; max-width:48ch; color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); }
.apac-cta .cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; }