/* production.css — responsive + production layer for the static Outlove site.
   Loaded AFTER site.css / site-v2.css. Adds: a mobile nav, mobile stacking
   for every section, and a static compass hero on phones (the 280vh WebGL
   terrain hero is a desktop-only enhancement). Content is identical to the
   desktop build — only layout reflows. */

/* ---- Accessibility: visible keyboard focus + skip link ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ol-orange); outline-offset: 2px; border-radius: 2px;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ol-navy); color: #fff; padding: 12px 18px;
  border-radius: 0 0 8px 8px; font-family: var(--font-display); font-weight: 600;
  font-size: 14px; text-decoration: none; border: 0;
  transition: top 0.18s var(--ease-out, ease);
}
.skip-link:focus { top: 0; }

/* ---- Mobile nav toggle (hidden on desktop) ---- */
.nav-toggle {
  display: none; width: 42px; height: 42px; border: 0; background: transparent;
  cursor: pointer; padding: 0; position: relative; z-index: 60;
}
/* Keep the translucent paper bar once scrolled off the hero (prototype parity). */
.site .site-nav.scrolled { background: rgba(250, 249, 247, 0.9) !important; -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 9px; width: 24px; height: 2px;
  background: var(--ol-navy); transition: transform .3s var(--ease-out), opacity .2s;
}
.nav-toggle span { top: 20px; }
.nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; }
.site-nav[data-dark="true"] .nav-toggle span,
.site-nav[data-dark="true"] .nav-toggle span::before,
.site-nav[data-dark="true"] .nav-toggle span::after { background: #fff; }
.site-nav.open .nav-toggle span { background: transparent; }
.site-nav.open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.site-nav.open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================= */
@media (max-width: 1040px) {
  /* loosen the big desktop grids a touch before the full mobile collapse */
  .proof .support { grid-template-columns: repeat(2, 1fr); }
  .tiles.five { grid-template-columns: repeat(2, 1fr); }
  #services .svc-band { grid-template-columns: 240px 1fr; gap: 36px; }
  #services .svc-panel { width: 240px; }
}

/* Below 900px the desktop .site is hidden and the dedicated Summit Scroll
   build (.m-site, mobile-site.css) takes over — so no desktop-collapse rules
   are needed here. The 901–1040px tablet tweaks above still apply. */

/* ---- Static hero compass (no-JS friendly): gentle rocking needle ---- */
/* Keep the class (terrain3d fades .compass-decor on scroll) but override the
   floating-corner position so it sits in-flow, centered above the eyebrow. */
.eyebrow-crown .compass-decor { position: static; top: auto; right: auto; left: auto; bottom: auto; margin: 0; display: inline-flex; transform: translateY(-14px) scale(1.5); transform-origin: center bottom; }
.compass-decor { display: block; }
.compass-fallback .needle { transform-box: view-box; transform-origin: 32px 32px; animation: ol-compass-rock 4.4s ease-in-out infinite alternate; }
@keyframes ol-compass-rock { from { transform: rotate(8deg); } to { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .compass-fallback .needle { animation: none; } }