/* ============================================================================
   WILSARK LLC — design tokens
   The single source of colour, type, spacing and shape. Nothing in a page file
   hardcodes a hex value; every surface reads from here.
   Palette: federal navy + campaign gold. Chosen to read as a government
   contractor's site, not a startup's — weight and restraint over decoration.
   ========================================================================== */

:root{
  /* --- surfaces, darkest to lightest --- */
  --navy:      #081a36;   /* page ground */
  --navy-2:    #0c2547;   /* alternating band */
  --card:      #0f2952;   /* raised panel */
  --steel:     #173a63;   /* inset chip / icon well */
  --line:      #21406c;   /* every border */

  /* --- text, brightest to dimmest --- */
  --ink:       #f2f6fd;   /* headings, primary */
  --body:      #c9d6ef;   /* paragraphs */
  --muted:     #9db2d6;   /* labels, captions, legal */

  /* --- accent: campaign gold. Used sparingly; it marks ACTION and RANK. --- */
  --gold:      #d0aa52;
  --gold-lift: #e6c877;
  --gold-deep: #8a6d29;

  /* --- type --- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-body: 16.5px;
  --lh-body: 1.62;

  /* --- shape + rhythm --- */
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;
  --max: 1120px;
  --pad-x: 24px;
  --band: 66px;           /* vertical padding of a full section */
}

/* The site commits to one dark federal look in both themes. A contracting
   officer opening it in light mode must see the same document, not a washed
   inversion of it — so the ground is painted explicitly rather than inherited. */

*{ box-sizing:border-box }
html:focus-within{ scroll-behavior:smooth }

body{
  margin:0;
  background:var(--navy);
  color:var(--body);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:var(--ink); text-decoration:none }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad-x) }

/* --- rule of rank: gold bar across the top --- */
.topbar{ height:4px; background:linear-gradient(90deg,var(--gold),var(--gold-deep) 60%,var(--gold)) }

/* --- buttons --- */
.btn{
  display:inline-block; cursor:pointer;
  background:linear-gradient(180deg,var(--gold-lift),var(--gold));
  color:#10203c; font-weight:700; font-size:15px;
  padding:14px 28px; border:1px solid var(--gold); border-radius:var(--r-sm);
  transition:filter .15s, transform .15s;
}
.btn:hover{ filter:brightness(1.06); transform:translateY(-1px) }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line) }

.eyebrow{
  color:var(--gold-lift); font-weight:700; font-size:12.5px;
  letter-spacing:.15em; text-transform:uppercase;
}

/* --- header --- */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(8,26,54,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; gap:18px; height:68px }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.06em; font-size:18px }
.logo{
  width:36px; height:36px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold-lift),var(--gold-deep));
  display:grid; place-items:center; color:#10203c; font-weight:900; font-size:17px;
}
.nav .links{ margin-left:auto; display:flex; gap:26px }
.nav .links a{ color:var(--muted); font-size:14.5px; font-weight:600 }
.nav .links a:hover{ color:var(--ink) }
@media(max-width:920px){ .nav .links{ display:none } }

/* --- sections --- */
section.block{ padding:var(--band) 0 }
.alt{ background:var(--navy-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
h2{ font-size:clamp(25px,3.2vw,34px); margin:.2em 0 .5em; font-weight:800; letter-spacing:-.01em; color:var(--ink) }
h3{ margin:.1em 0 .45em; font-size:19px; color:var(--ink) }
.sub{ color:var(--body); max-width:720px; font-size:16.5px }
.note{ color:var(--muted); font-size:13.5px; margin-top:18px }

/* --- grid + cards --- */
.grid{ display:grid; gap:18px; margin-top:34px }
.g2{ grid-template-columns:repeat(2,1fr) }
.g3{ grid-template-columns:repeat(3,1fr) }
@media(max-width:840px){ .g2,.g3{ grid-template-columns:1fr } }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:26px }
.card p{ color:var(--body); margin:0; font-size:15px }
.step{ display:flex; gap:14px; align-items:flex-start }
.step .n{
  flex:0 0 36px; height:36px; border-radius:var(--r-sm);
  background:var(--steel); border:1px solid var(--line);
  display:grid; place-items:center; font-weight:800; color:var(--gold-lift);
}

/* --- check list --- */
ul.check{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:11px }
ul.check li{ color:var(--body); padding-left:27px; position:relative; font-size:15px }
ul.check li:before{ content:"✓"; position:absolute; left:0; color:var(--gold-lift); font-weight:800 }

/* --- badges --- */
.badges{
  background:linear-gradient(180deg,var(--navy-2),#0a2143);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.badgeRow{ display:flex; flex-wrap:wrap; gap:12px; padding:22px 0; justify-content:center }
.badge{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  padding:12px 18px; font-weight:700; color:var(--ink); font-size:14.5px;
}
.badge .ic{
  width:26px; height:26px; border-radius:7px; flex:0 0 auto;
  background:var(--steel); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--gold-lift); font-size:14px;
}
.badge.star{ border-color:var(--gold) }
.badge.star .ic{ background:var(--gold); color:#10203c }

/* --- the identifier block a contracting officer actually reads --- */
.idBlock{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; margin-top:30px;
}
.idBlock div{ background:var(--card); padding:20px 22px }
.idBlock .k{
  display:block; margin-bottom:6px; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.idBlock .v{ font-size:17px; font-weight:700; color:var(--ink); font-family:var(--mono); word-break:break-all }
@media(max-width:840px){ .idBlock{ grid-template-columns:1fr 1fr } }
@media(max-width:460px){ .idBlock{ grid-template-columns:1fr } }

/* --- NAICS chips --- */
.naics{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }
.naics span{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 14px; font-size:14px; color:var(--ink);
}
.naics span b{ color:var(--gold-lift); font-family:var(--mono); margin-right:8px }

/* --- contact --- */
.contact{
  background:linear-gradient(180deg,var(--navy-2),#0a2143);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:36px; margin-top:10px;
  display:flex; gap:28px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.cField{ display:flex; flex-direction:column; gap:8px; min-width:230px }
.cField .lbl{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.cField .val{ font-size:16px; color:var(--ink); font-weight:600 }
.cField .val a:hover{ color:var(--gold-lift) }

/* --- footer --- */
footer{ border-top:1px solid var(--line); color:var(--muted); font-size:13.5px; padding:32px 0 46px }
footer .fr{ display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; align-items:center }
footer a{ color:var(--muted) }
footer a:hover{ color:var(--gold-lift) }

/* --- accessibility --- */
.skip{ position:absolute; left:-999px }
.skip:focus{
  left:12px; top:12px; z-index:50;
  background:var(--gold); color:#10203c; padding:8px 14px; border-radius:6px;
}
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  html:focus-within{ scroll-behavior:auto }
}