/* ==========================================================================
   BlueShield — Reset, typography, utilities
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  scroll-behavior:auto; /* Lenis drives smooth scroll; avoid double-handling */
  -webkit-text-size-adjust:100%;
}
html.has-lenis{ scroll-behavior:auto; }

body{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--text);
  background:var(--ink-900);
  min-height:100svh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,picture,svg,video,canvas{ display:block; max-width:100%; height:auto; }
img{ font-style:italic; color:var(--text-low); }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
a{ color:inherit; text-decoration:none; }

ul,ol{ list-style:none; padding:0; }

table{ border-collapse:collapse; width:100%; }

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--text-hi);
  font-weight:700;
  text-wrap:balance;
}
h1{ font-size:clamp(2.75rem,6vw,4.75rem); line-height:1.02; font-weight:800; letter-spacing:-0.03em; }
h2{ font-size:clamp(2rem,4vw,3.25rem); line-height:1.06; font-weight:700; letter-spacing:-0.03em; }
h3{ font-size:clamp(1.375rem,2.2vw,1.875rem); line-height:1.2; font-weight:700; }
h4{ font-size:1.125rem; line-height:1.35; font-weight:600; }

p{ max-width:68ch; }
.lead{
  font-size:clamp(1.125rem,1.6vw,1.3125rem);
  line-height:1.6;
  color:var(--text-mid);
  max-width:56ch;
}
small,.text-small{ font-size:.875rem; line-height:1.55; }

.text-gradient{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.mono{
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
}

/* ---- Eyebrow (mono label + pulse dot) ---- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--accent-400);
  margin-bottom:var(--s-4);
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 0 rgba(34,211,238,.5);
  animation:pulse-dot 2.2s var(--ease-in-out) infinite;
  flex:none;
}
.eyebrow--sand{ color:var(--sand); }
.eyebrow--sand .dot{ background:var(--sand); box-shadow:0 0 0 0 rgba(227,190,133,.5); }

@keyframes pulse-dot{
  0%{ box-shadow:0 0 0 0 rgba(34,211,238,.55); }
  70%{ box-shadow:0 0 0 8px rgba(34,211,238,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,211,238,0); }
}

/* ---- Layout utilities ---- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-wide{
  width:100%;
  max-width:var(--container-wide);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:calc(var(--section-y) * .6); }
.band-ink900{ background:var(--ink-900); }
.band-ink800{ background:var(--ink-800); }
.band-paper{ background:var(--paper); color:var(--paper-ink); }
.band-paper h2,.band-paper h3,.band-paper h4{ color:var(--paper-ink); }
.band-paper p,.band-paper li{ color:#3C4A63; }

.grid{ display:grid; gap:var(--s-6); }
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-2{ gap:var(--s-2); } .gap-3{ gap:var(--s-3); } .gap-4{ gap:var(--s-4); } .gap-5{ gap:var(--s-5); }

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:fixed; top:-100px; left:var(--s-4);
  background:var(--accent-500); color:#fff;
  padding:var(--s-3) var(--s-5); border-radius:var(--r-sm);
  z-index:9999; transition:top var(--dur-fast) var(--ease-out);
  font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em;
}
.skip-link:focus{ top:var(--s-4); }

/* ---- Grid + noise overlays (hero / CTA bands only) ---- */
.overlay-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.06;
  pointer-events:none;
}
.overlay-glow{
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(600px 300px at 50% 100%, rgba(30,107,255,.28), transparent 70%);
}

/* ---- Focus ---- */
:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- Selection ---- */
::selection{ background:var(--accent-500); color:#fff; }

/* ---- Reduced motion fallback ---- */
.no-motion *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* Elements that start hidden for JS-driven reveal must show by default;
   JS adds .js-ready to <html> once motion is confirmed running. */
[data-reveal]{ opacity:1; transform:none; }
html.js-ready [data-reveal]{ opacity:0; transform:translateY(28px); }
html.js-ready.no-motion [data-reveal]{ opacity:1; transform:none; }

@media (max-width:1600px){
  html{ font-size:15.5px; }
}