/* Shared brand theme for the static pages. Loaded after each page's inline
   <style>, so it re-skins the common nav, hero, buttons and CTA band. */
@font-face {
  font-family: 'Intro';
  src: url('/fonts/Intro.otf') format('opentype');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0020-0026, U+0028-002C, U+002E, U+0030-007E, U+00A0-00B6, U+00B8-2012, U+2015-2018, U+201A-FFFF;
}

:root {
  --ink: #0c2548;
  --body: #3d5a7d;
  --paper: #f2f6fb;
  --rule: #d5e2f0;
  --brand-600: #1d5cb0;
  --brand-700: #164a8f;
  --brand-800: #0f3a75;
  --brand-900: #0c2d5a;
  --sky-200: #cfe3f7;
  --sky-300: #a9cdf0;
  --display: 'Intro', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --band: radial-gradient(ellipse 70% 80% at 80% 0%, rgba(96,160,232,.55) 0%, transparent 65%),
          linear-gradient(165deg, var(--brand-600) 0%, var(--brand-800) 100%);
}

body { font-family: var(--sans) !important; background: var(--paper); color: var(--body); }
code, pre, kbd, .eyebrow, .oh-logo-sub { font-family: var(--mono) !important; }
h1, h2 { font-family: var(--display); font-weight: 400 !important; letter-spacing: .01em !important; color: var(--ink); }
h3, h4 { color: var(--ink); }
a { color: inherit; }

/* ── Nav ── */
.oh-announce { background: var(--brand-900) !important; }
.oh-announce a, .oh-announce a:hover { color: #fff !important; font-weight: 500; }
.oh-announce a > span:first-child { background: var(--sky-300) !important; }
.oh-nav {
  top: 40px !important;
  background: rgba(15, 58, 117, .94) !important;
  border-bottom: 0 !important;
  box-shadow: 0 8px 24px -12px rgba(12, 45, 90, .5) !important;
}
.oh-nav-inner { height: 72px !important; }
.oh-logo { gap: 12px !important; }
.oh-logo img { height: 40px !important; width: 40px !important; }
.oh-logo-name {
  font-family: var(--display) !important; font-weight: 400 !important;
  font-size: 22px !important; letter-spacing: .04em !important; color: #fff !important; line-height: 1;
}
.oh-logo-name span { color: var(--sky-300); }
.oh-logo-sub { display: none !important; }
.oh-nav-link, .oh-mobile-link { color: var(--sky-200) !important; }
.oh-nav-link:hover, .oh-mobile-link:hover { color: #fff !important; }
.oh-nav-link.active, .oh-mobile-link.active { color: #fff !important; }
.oh-nav-toggle { color: #fff !important; }
.oh-nav-demo, .oh-mobile-demo {
  background: transparent !important; border: 1px solid rgba(255,255,255,.55) !important;
  color: #fff !important; border-radius: 999px !important; box-shadow: none !important; opacity: 1 !important;
}
.oh-nav-demo:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }
.oh-mobile-menu { background: var(--brand-800) !important; border-top: 1px solid rgba(255,255,255,.15) !important; }

/* ── Bands (hero + closing CTA) ── */
.hero, .final-cta { background: var(--band) !important; color: var(--sky-200) !important; }
.hero h1, .hero h2, .hero h3, .final-cta h2, .final-cta h3 { color: #fff !important; }
.hero .sub, .hero p, .final-cta .sub { color: var(--sky-200) !important; }
.final-cta .supporting { color: var(--sky-300) !important; }
.hero .eyebrow, .final-cta .eyebrow { color: var(--sky-300) !important; }
.hero .eyebrow::before { background: var(--sky-300) !important; }
.hero a:not(.cta-btn) { color: #fff; }
.hero { padding-bottom: 72px !important; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem) !important; line-height: 1.08 !important; }

/* ── Eyebrows, links, accents on light ── */
.eyebrow { color: var(--brand-600) !important; }
.eyebrow::before { background: var(--brand-600) !important; }
.explore-link .t, .back-link { color: var(--brand-600) !important; }
.explore-link:hover, .cap-card:hover, .post-card:hover { border-color: rgba(29,92,176,.45) !important; }

/* ── Buttons ── */
.cta-btn, .cta-btn.flat {
  background: var(--brand-600) !important; color: #fff !important; border: 1px solid var(--brand-600) !important;
  border-radius: 999px !important; box-shadow: none !important; opacity: 1 !important; transform: none !important;
}
.cta-btn:hover, .cta-btn.flat:hover { background: var(--brand-700) !important; border-color: var(--brand-700) !important; }
.hero .cta-btn, .final-cta .cta-btn, .cta-box .cta-btn {
  background: #fff !important; color: var(--brand-800) !important; border-color: #fff !important;
}
.hero .cta-btn:hover, .final-cta .cta-btn:hover, .cta-box .cta-btn:hover { background: var(--sky-200) !important; border-color: var(--sky-200) !important; }

/* ── Cards pick up the soft blue shadow ── */
.cap-card, .scope-box, .explore-link, .step-grid, .post-card, .highlight-box, .stat-card, .framework-card, .fit-box, .outcome-card, .surface-card {
  border-color: var(--rule) !important;
}
.cta-box { background: var(--band) !important; border-color: transparent !important; }
.cta-box h3, .cta-box p { color: #fff !important; }