/* ============================================================
   page-partners.css — Partners landing, v3 blueprint design.
   Sits on top of service.css. Ported from the proposal with the
   palette re-anchored to NAS navy, the orbit-chip diorama given the
   placement-wrapper fix (so counter-rotation can't override chip
   positioning), and the decorative marquee replaced by a real,
   navigable ecosystem grid wired to the live partner records.
   ============================================================ */

/* Palette anchors — service.css ships --c-navy / --c-blue but not the
   mid-navy step, so (like page-about / page-news) we declare it here.
   Without this the icon gradient var resolves empty and collapses. */
:root {
  --c-navy: #0E2A6B;
  --c-navy-2: #1C4DBD;
}

/* ========== HERO ========== */
.pa-hero .hero-grid { grid-template-columns: 1.05fr 1fr; align-items: center; }
/* Single row of 4, matching the case-studies / about / careers hero stats */
.pa-hero-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

.pa-diorama { position: relative; width: 100%; aspect-ratio: 1; }
.pa-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Orbit rings — each is a bare <g> with no transform attribute, so the
   rotate animation is free to own the transform channel. */
.pa-orbit { transform-box: fill-box; transform-origin: 260px 260px; }
.pa-orbit-1 { animation: paOrbitSpin 60s linear infinite; }
.pa-orbit-2 { animation: paOrbitSpin 90s linear infinite reverse; }
.pa-orbit-3 { animation: paOrbitSpin 120s linear infinite; }
@keyframes paOrbitSpin { to { transform: rotate(360deg); } }

.pa-amb {
  transform-box: fill-box;
  transform-origin: 260px 260px;
  animation: paAmb 3s ease-out infinite;
}
.pa-amb-2 { animation-delay: 1.5s; }
@keyframes paAmb {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Ring carriers rotate; the chips inside counter-rotate to stay upright. */
.pa-ring { transform-box: fill-box; transform-origin: 260px 260px; }
.pa-ring-1 { animation: paRingSpin 30s linear infinite; }
.pa-ring-2 { animation: paRingSpin 45s linear infinite reverse; }
@keyframes paRingSpin { to { transform: rotate(360deg); } }

/* Chip placement lives on an outer <g transform="translate()"> in the
   markup; this class only spins in place, so its transform keyframes
   never clobber the positioning transform. transform-origin:center of
   the chip's own fill-box keeps the label level as the ring turns. */
.pa-chip { transform-box: fill-box; transform-origin: center; animation: paChipCounter 30s linear infinite reverse; }
.pa-ring-2 .pa-chip { animation-duration: 45s; animation-direction: normal; }
@keyframes paChipCounter { to { transform: rotate(360deg); } }

.pa-pkt {
  transform-box: fill-box; transform-origin: center;
  animation: paPkt 6s linear infinite;
}
@keyframes paPkt {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}


/* ========== WHY grid ========== */
.pa-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.pa-why {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 26px 24px 22px;
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.pa-why::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(300px circle at 100% 0%, rgba(33, 88, 214, .12), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-out);
}
.pa-why:hover {
  transform: translateY(-4px);
  border-color: var(--c-navy-2);
  box-shadow: 0 24px 50px -28px rgba(14, 42, 107, .22);
}
.pa-why:hover::after { opacity: 1; }

.pa-why-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--c-navy), var(--c-navy-2));
  color: #fff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 18px -10px rgba(14, 42, 107, .6);
  position: relative;
  z-index: 1;
}
.pa-why-icon svg { width: 28px; height: 28px; }

.pa-why h3 { margin-bottom: 8px; font-size: 1.2rem; position: relative; z-index: 1; }
.pa-why p { color: var(--c-mute); font-size: .94rem; line-height: 1.55; position: relative; z-index: 1; }


/* ========== ECOSYSTEM grid — real, navigable partner records ========== */
.pa-eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 4vw, 44px);
}
.pa-eco {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 20px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pa-eco::after {
  content: "";
  position: absolute;
  top: -34px; right: -34px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(33, 88, 214, .08), transparent);
  pointer-events: none;
}

.pa-eco-logo {
  height: 34px;
  display: flex;
  align-items: center;
}
.pa-eco-logo img {
  max-height: 34px;
  max-width: 130px;
  object-fit: contain;
}
.pa-eco-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 1.18rem/1.15 'Space Grotesk', sans-serif;
  color: var(--c-navy);
  letter-spacing: -.01em;
}
.pa-eco-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--c-navy), var(--c-navy-2));
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .92rem;
  font-weight: 700;
}
.pa-eco-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.pa-eco-tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.pa-eco-tier--premier { color: var(--c-navy);   background: rgba(14, 42, 107, .1); }
.pa-eco-tier--gold    { color: var(--c-navy-2);  background: rgba(28, 77, 189, .1); }
.pa-eco-tier--silver  { color: var(--c-mute);    background: var(--c-bg-2); }
.pa-eco-tier--standard{ color: var(--c-mute);    background: var(--c-bg-2); }
.pa-eco-arrow {
  width: 26px; height: 26px;
  flex-shrink: 0;
  color: var(--c-navy-2);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.pa-eco:hover .pa-eco-arrow { opacity: 1; transform: translateX(0); }
[dir="rtl"] .pa-eco-arrow { transform: scaleX(-1) translateX(-6px); }
[dir="rtl"] .pa-eco:hover .pa-eco-arrow { transform: scaleX(-1) translateX(0); }


/* ========== PROCESS — meta line under each loop step ========== */
.pa-loop .loop-item { padding-bottom: 30px; }
.pa-step-meta {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  color: var(--c-navy-2);
  letter-spacing: .04em;
}


/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .pa-hero .hero-grid { grid-template-columns: 1fr; }
  .pa-diorama { max-width: 480px; margin: 0 auto; }
  .pa-hero-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pa-hero-meta { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-orbit, .pa-ring, .pa-chip, .pa-amb, .pa-pkt { animation: none !important; }
}