/* Marketing UI Kit — page-level styles.
   Component-specific styles live next to each component as scoped objects.
*/

html, body { scroll-behavior: smooth; }

/* Sticky top nav */
.bs-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 56px);
  background: rgba(247, 251, 252, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-default) var(--ease-tide),
              border-color var(--dur-default) var(--ease-tide),
              backdrop-filter var(--dur-default) var(--ease-tide);
}
.bs-nav.scrolled { border-bottom-color: var(--border-hair); }
/* Over the home hero — float over the gradient, no own bg. */
.bs-nav.over-hero {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Body adopts gradient kick so nav floats over a continuous warm wash on home */
body:has(.bs-nav.over-hero) { background: transparent; }
.bs-nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.bs-nav__brand img { display: block; }
.bs-nav__wordmark {
  transition: color var(--dur-default) var(--ease-tide);
}
.bs-nav__links { display: flex; align-items: center; gap: 4px; }
.bs-nav__link {
  font: 500 14px var(--font-body);
  color: var(--fg-2);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  transition: color var(--dur-default) var(--ease-tide), background var(--dur-default) var(--ease-tide);
}
.bs-nav__link:hover { color: var(--fg-1); background: rgba(11, 39, 64, 0.05); }
.bs-nav__cta { margin-left: 12px; }
/* Slight type bump over hero for legibility on warm gradient */
.bs-nav.over-hero .bs-nav__link { color: var(--bs-midnight); }
.bs-nav.over-hero .bs-nav__link:hover { background: rgba(255,255,255,0.35); }

@media (max-width: 720px) {
  .bs-nav__links .bs-nav__link:not(:last-child) { display: none; }
}

/* Generic section wrapper */
.bs-section { padding: clamp(72px, 9vw, 128px) clamp(20px, 5vw, 56px); }
.bs-section__inner { max-width: 1280px; margin: 0 auto; }
.bs-section--sand { background: linear-gradient(180deg, rgba(242, 229, 200, 0.25) 0%, rgba(242, 229, 200, 0.5) 100%); }
.bs-section--ink { background: var(--bs-ocean-ink); color: #fff; }
.bs-section--ink .h1, .bs-section--ink .h2, .bs-section--ink .display-md { color: #fff; }
.bs-section--ink .body, .bs-section--ink .body-lg { color: rgba(255, 255, 255, 0.78); }
.bs-section--ink .eyebrow { color: var(--bs-sun); }

/* Reveal-on-scroll baseline.
   Hidden only when JS animation is wired up (body.js-reveal), so a no-JS
   or GSAP-fails-to-load page still shows everything. */
.reveal { transition: opacity 700ms var(--ease-tide), transform 700ms var(--ease-tide); }
body.js-reveal .reveal { opacity: 0; transform: translateY(24px); }
body.js-reveal .reveal.in-view { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Preview-only page jumper. Tucks bottom-right; clearly labelled.
   Hidden on print + small viewports. Not real production nav. */
.route-switcher {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 100;
  background: rgba(11, 39, 64, 0.92);
  border-radius: 16px;
  padding: 6px 6px 6px 12px;
  box-shadow: var(--shadow-3);
  font: 500 11px var(--font-mono);
  color: rgba(255,255,255,0.6);
  display: flex; align-items: center; gap: 8px;
}
.route-switcher::before {
  content: 'PREVIEW';
  letter-spacing: 0.12em;
}
.route-switcher__buttons { display: flex; gap: 2px; }
.route-switcher button {
  background: transparent;
  color: rgba(255,255,255,0.78);
  border: 0;
  padding: 6px 10px;
  border-radius: 10px;
  font: 600 11px var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.route-switcher button.active { background: var(--bs-ocean); color: #fff; }
.route-switcher button:hover:not(.active) { background: rgba(255,255,255,0.08); color: #fff; }
@media print, (max-width: 720px) {
  .route-switcher { display: none; }
}