/* Strategies page specific styles – minimal and complementary to base.css */
.page-hero {
  padding: var(--space-64) 0 var(--space-40);
  background:
    radial-gradient(80% 80% at 10% 0%, rgba(0,229,255,0.10), transparent 60%),
    radial-gradient(70% 70% at 90% 0%, rgba(255,159,26,0.10), transparent 60%),
    linear-gradient(180deg, var(--color-background), var(--color-surface));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.page-hero .hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-24);
  align-items: center;
}
.page-hero .hero-content p { color: var(--color-text-muted); max-width: 60ch; }
.page-hero .hero-cta { margin-top: var(--space-16); display: flex; gap: var(--space-12); flex-wrap: wrap; }
.page-hero .hero-media { box-shadow: var(--shadow-lg); }

@media (max-width: 900px) {
  .page-hero .hero-inner { grid-template-columns: 1fr; }
}

.anchor-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(18,25,35,0.85);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.anchor-nav .anchor-list {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-12) 0;
  overflow-x: auto;
}
.anchor-nav .anchor-list a {
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.anchor-nav .anchor-list a.is-active { border-color: rgba(0,229,255,0.5); box-shadow: var(--shadow-glow-primary); }

.section { padding: var(--space-56) 0; }
.section.alt { background: var(--color-surface); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.section-header p { color: var(--color-text-muted); }

.strategy-grid { gap: var(--space-24); align-items: start; }

.map-media, .meta-media { margin-top: var(--space-16); }

.section-cta { margin-top: var(--space-16); display: flex; gap: var(--space-12); flex-wrap: wrap; }

.final-cta { text-align: center; }
.final-cta p { margin-inline: auto; max-width: 60ch; color: var(--color-text-muted); }

/* Utility: ensure grid fallback on small screens */
@media (max-width: 800px) {
  .grid-4.strategy-grid { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .grid-4.strategy-grid { grid-template-columns: 1fr; }
  .grid-3.strategy-grid { display: grid; grid-template-columns: 1fr; }
  .grid-2.strategy-grid { display: grid; grid-template-columns: 1fr; }
}