/* =========================================================
   DCSMV — Design tokens
   Civic / editorial aesthetic
   Display: Libre Franklin (newsroom + civic weight)
   Body:    Public Sans (USWDS — government readability)
   ========================================================= */

:root {
  /* Navy scale (primary) */
  --navy-950: #060f24;
  --navy-900: #0a1733;
  --navy-800: #0e2148;
  --navy-700: #14305f;
  --navy-600: #1c4080;
  --navy-500: #2a5599;
  --navy-400: #4a73b3;
  --navy-300: #7d9bca;
  --navy-200: #b8c8e0;
  --navy-100: #e1e8f2;

  /* Neutrals — warm whites / cool grays */
  --white: #ffffff;
  --off-white: #faf9f5;     /* warm cream — paper feel */
  --paper: #f4f2eb;
  --ink-900: #1a1d2b;
  --ink-700: #3a3f54;
  --ink-500: #6b7185;
  --ink-300: #b6bac6;

  /* Accent system — three-role token set, swappable as a palette.
     The client-facing AccentPicker widget rewrites these three at :root
     to retint the whole site. Default palette: Federal Blue.
       --accent-main:    buttons, eyebrows, dividers, footer stripe, CTAs
       --accent-hover:   :hover/:active variants (darker)
       --accent-on-dark: lighter tint for accent text on navy backgrounds */
  --accent-main: #3a7fc2;
  --accent-hover: #2a629c;
  --accent-on-dark: #a8cef0;
  /* RGB triplets for rgba() usages (shadows, halos, alpha-tinted gradients).
     The picker rewrites these alongside the hex tokens above. */
  --accent-main-rgb: 58, 127, 194;
  --accent-on-dark-rgb: 168, 206, 240;

  /* Legacy red aliases. The codebase still references var(--red) and
     var(--red-dark) in many places; aliasing them to the accent tokens
     keeps every existing usage themed by the picker with no churn. */
  --red: var(--accent-main);
  --red-dark: var(--accent-hover);
  --red-light: var(--accent-on-dark);
  --slate: #4a5b7c;
  --dusty: #8ca5c0;
  --gold: #c8a45e;           /* used very sparingly */

  /* Type */
  --font-display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radii — civic / editorial = restrained, mostly square */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10, 23, 51, 0.06), 0 1px 1px rgba(10, 23, 51, 0.04);
  --shadow-md: 0 4px 16px rgba(10, 23, 51, 0.08), 0 2px 4px rgba(10, 23, 51, 0.04);
  --shadow-lg: 0 20px 40px rgba(10, 23, 51, 0.14), 0 4px 8px rgba(10, 23, 51, 0.06);

  /* Layout */
  --max-w: 1240px;
  --max-w-text: 760px;

  /* Header height (used to offset hash anchors) */
  --header-h: 72px;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* ----- Skip link (a11y) ----- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 10px 16px;
  background: var(--navy-900);
  color: var(--white);
  font-weight: 600;
  z-index: 1000;
  border-radius: var(--r-md);
}
.skip-link:focus { left: 12px; outline: 2px solid var(--white); outline-offset: 2px; }

/* ----- Typography ----- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.018em;
  color: var(--navy-900);
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 700; }
h4 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-700);
  max-width: 640px;
}

.kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  color: var(--red);
}

/* ----- Container ----- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-5); }
.container-narrow { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 var(--s-5); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.btn-primary { background: var(--accent-main); color: var(--white); border-color: var(--accent-main); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 6px 18px rgba(10, 23, 51, 0.25); }

.btn-navy { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.btn-navy:hover { background: var(--navy-800); border-color: var(--navy-800); }

.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }

.btn-outline { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn-outline:hover { background: var(--navy-900); color: var(--white); }

.btn-lg { padding: 18px 30px; font-size: 17px; min-height: 56px; }
.btn-sm { padding: 10px 16px; font-size: 14px; min-height: 38px; }

.btn .arrow {
  transition: transform .2s ease;
  display: inline-block;
}
.btn:hover .arrow { transform: translateX(3px); }

/* ----- Section ----- */
section { padding: clamp(64px, 8vw, 112px) 0; }
section.section-tight { padding: clamp(48px, 6vw, 80px) 0; }

/* ----- Patterns ----- */
.flag-stripes {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0) 0 14px,
    rgba(255,255,255,0.04) 14px 28px
  );
}
.flag-stripes-strong {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0) 0 18px,
    rgba(255,255,255,0.07) 18px 36px
  );
}
.stars-bg {
  background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1.6px);
  background-size: 32px 32px;
  background-position: 0 0;
}

/* ----- Star divider ----- */
.star-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto;
  color: var(--red);
}
.star-divider .rule {
  flex: 0 0 60px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* ----- Cards ----- */
.card {
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--navy-300); }

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ----- Image placeholder (default aesthetic) ----- */
.img-placeholder {
  background:
    repeating-linear-gradient(135deg,
      rgba(20, 48, 95, 0.07) 0 8px,
      rgba(20, 48, 95, 0.03) 8px 16px),
    var(--paper);
  border: 1px solid var(--ink-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  text-transform: uppercase;
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
}
.img-placeholder.dark {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.06) 0 8px,
      rgba(255,255,255,0.02) 8px 16px),
    var(--navy-800);
  color: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.12);
}

/* ----- Sparkle heading (hero text on every page) ----- */
.hero-sparkle-wrap {
  /* Block on its own line but sized to the heading itself so the canvas
     tracks the glyph area instead of the full container width. */
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: visible;
}
.hero-sparkle-heading {
  position: relative;
  margin: 0 0 28px;
}
.hero-sparkle-back,
.hero-sparkle-front {
  display: block;
}
/* Front layer is the silver gradient + clip:text, sitting over the back. */
.hero-sparkle-front {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    #8a8aa0 0%,
    #c0c0d0 20%,
    #f8f8ff 40%,
    #ffffff 50%,
    #f8f8ff 60%,
    #c0c0d0 80%,
    #8a8aa0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.3);
  animation: hero-shimmer 4s linear infinite;
  /* The back layer already carries the two-tone glow as text-shadow.
     Strip any inherited shadow off the front so the gradient stays clean. */
  text-shadow: none;
}
.sparkle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
@keyframes hero-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sparkle-front {
    animation: none;
    background-position: center;
  }
}

/* ----- Video background scaffold ----- */
.video-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
/* Saturate flag footage so colors remain vibrant without a dark overlay. */
.hero .video-bg video,
.hero .video-bg .v-image,
.page-hero .video-bg video,
.page-hero .video-bg .v-image {
  filter: saturate(1.35) contrast(1.05);
}
.video-bg .v-fallback,
.video-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-bg .v-fallback { z-index: 1; }
.video-bg .v-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
}
.video-bg .v-fallback.behind-image { z-index: 1; opacity: 0.45; }
.video-bg video { z-index: 2; opacity: 0; transition: opacity 1s ease; }
.video-bg.video-ready video { opacity: 1; }
.video-bg .v-overlay {
  position: absolute; inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(6, 15, 36, 0.55) 0%, rgba(6, 15, 36, 0.78) 100%);
}

/* "Video" simulator — animated gradient over flag-stripe pattern.
   Stands in for client-provided footage during prototype. */
.v-sim-flag {
  background:
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  position: relative;
}
.v-sim-flag::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    repeating-linear-gradient(8deg,
      rgba(255,255,255,0.05) 0 22px,
      rgba(255,255,255,0) 22px 44px,
      rgba(176,17,28,0.10) 44px 66px,
      rgba(255,255,255,0) 66px 88px);
  filter: blur(0.5px);
  animation: flagWave 22s ease-in-out infinite;
  transform-origin: center;
}
.v-sim-flag::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 30% 30%, rgba(255,255,255,0.10), transparent 60%);
}
@keyframes flagWave {
  0%, 100% { transform: translate(0, 0) skewY(-1deg); }
  50% { transform: translate(-2%, -1%) skewY(1deg); }
}

.v-sim-water {
  background: linear-gradient(180deg, #0c2247 0%, #0a1f44 50%, #060f24 100%);
  position: relative;
}
.v-sim-water::before {
  content: "";
  position: absolute; inset: -10%;
  background:
    radial-gradient(60% 30% at 20% 30%, rgba(140, 165, 192, 0.18), transparent 60%),
    radial-gradient(50% 40% at 80% 70%, rgba(74, 115, 179, 0.18), transparent 60%),
    radial-gradient(40% 30% at 50% 50%, rgba(255,255,255,0.06), transparent 60%);
  animation: waterDrift 30s ease-in-out infinite;
}
.v-sim-water::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  opacity: 0.6;
  animation: waterShimmer 4s linear infinite;
}
@keyframes waterDrift {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(2%, -1%); }
}
@keyframes waterShimmer {
  from { background-position: 0 0; }
  to { background-position: 0 8px; }
}

.v-sim-fireworks {
  background: radial-gradient(120% 80% at 50% 100%, #14305f 0%, #0a1733 50%, #060f24 100%);
  position: relative;
  overflow: hidden;
}
.v-sim-fireworks::before,
.v-sim-fireworks::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.9),
    0 0 20px 8px rgba(176,17,28,0.6),
    0 0 40px 16px rgba(176,17,28,0.25);
  top: 30%; left: 30%;
  animation: firework 4s ease-out infinite;
  opacity: 0;
}
.v-sim-fireworks::after {
  top: 50%; left: 70%;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.9),
    0 0 20px 8px rgba(140, 175, 230, 0.6),
    0 0 40px 16px rgba(140, 175, 230, 0.25);
  animation-delay: 2s;
}
@keyframes firework {
  0% { transform: scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  60% { transform: scale(2.4); opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .v-sim-flag::before,
  .v-sim-water::before,
  .v-sim-water::after,
  .v-sim-fireworks::before,
  .v-sim-fireworks::after { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ----- Utilities ----- */
.text-center { text-align: center; }
.muted { color: var(--ink-500); }
.on-dark { color: var(--white); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .eyebrow { color: var(--accent-on-dark); }
.on-dark .lede { color: rgba(255,255,255,0.84); }

.divider {
  height: 1px;
  background: var(--ink-300);
  width: 100%;
}
.red-rule {
  width: 56px; height: 4px;
  background: var(--red);
  margin: 0 0 var(--s-5);
}

/* Focus ring */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Form */
input[type="text"], input[type="email"], textarea, select {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--ink-300);
  border-radius: var(--r-md);
  background: var(--white);
  width: 100%;
  color: var(--ink-900);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(20, 48, 95, 0.15);
}
label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* Mobile tweaks */
@media (max-width: 720px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
}