/* ============================================================
   PRIVATEER IT — Brand System
   Black • Brand Blue (#0075C1) • Steel/Silver • Sky
   ============================================================ */

:root{
  --abyss:#060b14;          /* deep background */
  --hull:#0b1626;           /* panel background */
  --hull-2:#11203a;         /* raised panel */
  --steel:#1d2f49;          /* borders */
  --silver:#9fb3c8;         /* muted text */
  --fog:#c9d6e4;            /* secondary text */
  --white:#eef4fb;
  --brand:#0075c1;          /* logo blue */
  --brand-bright:#2ea3e8;   /* sky highlight */
  --brand-deep:#004e85;
  --gold:#d8a13a;           /* compass / accent */
  --good:#3ecf8e;

  --maxw:1200px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 30px 60px -20px rgba(0,0,0,.65);
  --shadow-blue:0 20px 50px -15px rgba(0,117,193,.45);

  --ff-head:"Space Grotesk",-apple-system,Segoe UI,sans-serif;
  --ff-body:"Inter",-apple-system,Segoe UI,sans-serif;
  --ff-quote:"Cormorant Garamond",Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-body);
  background:var(--abyss);
  color:var(--fog);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--ff-head);color:var(--white);line-height:1.1;font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:1.35rem}
p{color:var(--fog)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--ff-head);font-size:.8rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brand-bright);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--brand-bright);display:inline-block}
.section{padding:110px 0}
.section-sm{padding:70px 0}
.lead{font-size:1.2rem;color:var(--silver);max-width:62ch}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-head);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:15px 30px;border-radius:50px;border:1px solid transparent;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
/* Gradient starts at the logo blue, not the sky highlight: white on --brand-bright
   is only 2.79:1, which fails WCAG AA on the site's primary call to action.
   --brand gives 4.87:1 and is the truer brand color anyway. */
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:var(--shadow-blue)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 26px 60px -12px rgba(0,117,193,.6)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--steel);color:var(--white)}
.btn-ghost:hover{border-color:var(--brand-bright);transform:translateY(-3px)}
.btn svg{width:16px;height:16px}

/* ---------- Top Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  background:rgba(6,11,20,.55);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s ease,padding .3s ease;
}
.nav.scrolled{background:rgba(6,11,20,.92);padding:10px 24px}
.nav-inner{max-width:var(--maxw);margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}
/* Header brand: the shield alone (assets/logo-mark.png, cut from the full logo by
   tools/nav-mark.ps1) with the company name set beside it as text. The full
   lockup's own wordmark is unreadable at 48px, so it is not used here. */
.brand{display:flex;align-items:center;gap:12px;font-family:var(--ff-head);font-weight:700;color:#fff;letter-spacing:.02em}
.brand img{height:48px;width:auto}
.brand span{font-size:1.15rem;line-height:1;white-space:nowrap}
.brand span b{color:var(--brand-bright)}
.nav-links{display:flex;align-items:center;gap:3px}
.nav-links a{
  font-family:var(--ff-head);font-size:.88rem;font-weight:500;color:var(--fog);
  padding:9px 13px;border-radius:8px;transition:color .2s,background .2s;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-links a.active{color:var(--brand-bright)}
.nav-cta{margin-left:8px}
/* "Home" is reachable via the logo on desktop; shown explicitly in the mobile menu */
.nav-home{display:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:#fff;transition:.3s}

/* Capabilities dropdown — a disclosure button, so it is keyboard operable */
.has-sub{position:relative;display:flex;align-items:center}
.nav-sub-toggle{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ff-head);font-size:.88rem;font-weight:500;color:var(--fog);
  background:none;border:0;cursor:pointer;padding:9px 13px;border-radius:8px;
  transition:color .2s,background .2s;
}
.nav-sub-toggle:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-sub-toggle.active{color:var(--brand-bright)}
.nav-sub-toggle svg{width:12px;height:12px;stroke:currentColor;fill:none;transition:transform .25s}
.nav-sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.sub-menu{
  position:absolute;top:calc(100% + 12px);left:0;min-width:296px;z-index:5;
  display:none;flex-direction:column;gap:2px;padding:10px;
  background:rgba(8,15,26,.98);backdrop-filter:blur(14px);
  border:1px solid var(--steel);border-radius:14px;box-shadow:var(--shadow);
}
.sub-menu.open{display:flex}
.sub-menu a{padding:10px 14px;font-size:.9rem;border-radius:8px;color:var(--fog);white-space:nowrap}
.sub-menu a:hover{background:rgba(46,163,232,.12);color:#fff}
.sub-menu a.all{color:var(--brand-bright);border-bottom:1px solid var(--steel);border-radius:8px 8px 0 0;padding-bottom:12px;margin-bottom:4px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-scene{position:absolute;inset:0;z-index:0}
.hero-grad{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(6,11,20,.4) 0%,rgba(6,11,20,.25) 45%,rgba(6,11,20,.85) 100%),
             linear-gradient(90deg,rgba(6,11,20,.85) 0%,rgba(6,11,20,.1) 60%);}
/* Top padding clears the fixed nav; bottom padding reserves the strip the scroll
   cue occupies (text + line + its 26px offset), so on a short viewport the last
   row of content never lands underneath the cue. */
.hero-content{position:relative;z-index:5;padding-top:90px;padding-bottom:120px}
.hero h1{margin-bottom:22px}
.hero h1 .accent{background:linear-gradient(120deg,var(--brand-bright),#7fd0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin-bottom:34px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-badges{display:flex;gap:26px;margin-top:46px;flex-wrap:wrap;align-items:center}
.hero-badges .pill{
  display:flex;align-items:center;gap:10px;font-family:var(--ff-head);font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--silver);
}
.hero-badges .pill b{color:var(--white);font-weight:600}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;color:var(--silver);
  font-family:var(--ff-head);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue .line{width:1px;height:46px;background:linear-gradient(var(--brand-bright),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* animated ocean + ship */
.ocean{position:absolute;bottom:0;left:0;right:0;height:42%;z-index:1}
.wave{position:absolute;bottom:0;left:0;width:200%;height:100%}
.ship{position:absolute;z-index:1;bottom:34%;left:50%;width:min(46vw,560px);transform:translateX(-30%);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));animation:sail 9s ease-in-out infinite}
@keyframes sail{0%,100%{transform:translateX(-30%) translateY(0) rotate(-1.2deg)}50%{transform:translateX(-30%) translateY(-14px) rotate(1.2deg)}}
.stars{position:absolute;inset:0;z-index:0}

/* ---------- Cards / Grid ---------- */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(160deg,var(--hull-2),var(--hull));
  border:1px solid var(--steel);border-radius:var(--radius);padding:34px;
  position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s;
}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgba(46,163,232,.08),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{transform:translateY(-6px);border-color:var(--brand);box-shadow:var(--shadow)}
.card:hover::after{opacity:1}
.card .ico{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(135deg,rgba(46,163,232,.18),rgba(0,78,133,.18));border:1px solid var(--steel)}
.card .ico svg{width:26px;height:26px;stroke:var(--brand-bright)}
.card h3{margin-bottom:10px}
.card p{font-size:.97rem;color:var(--silver)}
.card .more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--brand-bright);font-family:var(--ff-head);font-weight:600;font-size:.9rem}

/* ---------- Stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-family:var(--ff-head);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:700;color:#fff;line-height:1}
.stat .num b{background:linear-gradient(120deg,var(--brand-bright),#7fd0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-size:.85rem;color:var(--silver);margin-top:8px;letter-spacing:.04em}

/* ---------- Section header ---------- */
.sec-head{max-width:640px;margin-bottom:54px}
.sec-head.center{margin-inline:auto}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head h2{margin-bottom:16px}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.split.rev .visual{order:-1}
.visual{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--steel);background:var(--hull);min-height:340px}
.ck{list-style:none;margin-top:22px;display:grid;gap:14px}
/* The item is a block, not a flex row. A flex <li> turns every child — each
   <strong>, each run of text — into its own column, which shreds any sentence
   containing inline emphasis. The icon is taken out of flow instead. */
.ck li{position:relative;padding-left:34px;color:var(--fog)}
.ck li svg{position:absolute;left:0;top:3px;width:22px;height:22px;stroke:var(--good)}
.ck li strong{color:var(--white);font-weight:600}
/* Problem lists — a green success tick next to a customer's pain point reads as
   endorsing it, so challenge lists get a neutral alert marker instead. */
.ck.issues li svg{stroke:var(--gold)}

/* ---------- Quote ---------- */
.quote{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,var(--hull-2),var(--hull));border:1px solid var(--steel);
  padding:70px 56px;text-align:center;
}
.quote .mark{font-family:var(--ff-quote);font-size:6rem;color:var(--brand);line-height:.5;opacity:.4}
.quote blockquote{font-family:var(--ff-quote);font-size:clamp(1.6rem,3.4vw,2.5rem);color:var(--white);font-style:italic;font-weight:500;max-width:20ch;margin:10px auto 18px;line-height:1.25}
.quote cite{font-family:var(--ff-head);font-style:normal;color:var(--brand-bright);letter-spacing:.06em;font-size:.95rem}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.member{background:linear-gradient(160deg,var(--hull-2),var(--hull));border:1px solid var(--steel);border-radius:var(--radius);padding:30px;text-align:center;transition:.3s}
.member:hover{border-color:var(--brand);transform:translateY(-5px)}
.avatar{width:92px;height:92px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  font-family:var(--ff-head);font-weight:700;font-size:1.8rem;color:#fff;
  background:linear-gradient(135deg,var(--brand-deep),var(--brand-bright));border:2px solid rgba(255,255,255,.12);overflow:hidden}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.member h3{font-size:1.15rem;margin-bottom:4px}
.member .role{color:var(--brand-bright);font-family:var(--ff-head);font-size:.85rem;letter-spacing:.04em}
/* Clickable leadership cards */
a.avatar{cursor:pointer}
a.avatar:hover{border-color:var(--brand-bright)}
.member .more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:var(--brand-bright);font-family:var(--ff-head);font-weight:600;font-size:.88rem;transition:gap .2s}
.member:hover .more{gap:11px}
.member .more svg{width:15px;height:15px}
/* Leadership bio page */
.profile{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.profile .photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:20px;border:1px solid var(--steel);box-shadow:var(--shadow)}
.profile .bio .btn{margin-bottom:22px}
.profile .bio p{margin-bottom:16px}
.profile .bio p:last-child{margin-bottom:0}
@media(max-width:820px){
  .profile{grid-template-columns:1fr;gap:32px}
  .profile .photo{max-width:300px;margin:0 auto}
}

/* ---------- Overview / spec table ---------- */
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--steel);border-radius:var(--radius);overflow:hidden}
.spec div{padding:20px 26px;border-bottom:1px solid var(--steel)}
.spec .k{background:rgba(255,255,255,.02);font-family:var(--ff-head);color:var(--silver);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.spec .v{color:var(--white);font-weight:500}

/* ---------- Certs ---------- */
.certs{display:flex;gap:30px;flex-wrap:wrap;align-items:center;justify-content:center}
.cert{background:#fff;border-radius:14px;padding:18px 22px;display:grid;place-items:center;min-width:130px;min-height:120px;box-shadow:var(--shadow)}
.cert img{height:78px;width:auto}
.cert .txt{font-family:var(--ff-head);font-weight:700;color:var(--abyss);text-align:center;font-size:.95rem;letter-spacing:.03em}

/* ---------- CTA band ---------- */
.cta-band{position:relative;border-radius:24px;overflow:hidden;padding:74px 40px;text-align:center;
  background:linear-gradient(135deg,var(--brand-deep),#062138);border:1px solid var(--steel)}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px circle at 50% -10%,rgba(46,163,232,.35),transparent 60%)}
.cta-band > *{position:relative}
.cta-band h2{margin-bottom:14px}
.cta-band .lead{margin:0 auto 30px;color:var(--fog)}

/* ---------- Forms ---------- */
.form{display:grid;gap:18px}
.field label{display:block;font-family:var(--ff-head);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--silver);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;background:var(--hull);border:1px solid var(--steel);border-radius:10px;
  color:var(--white);font-family:var(--ff-body);font-size:1rem;transition:border .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand-bright);box-shadow:0 0 0 3px rgba(46,163,232,.15)}
.field textarea{min-height:140px;resize:vertical}
.field .hint{display:block;font-size:.8rem;color:var(--silver);margin-top:7px}
/* Native dropdowns render their option list with OS styling — set both so the
   list stays legible if the OS is in light mode. */
.field select option{background:var(--hull);color:var(--white)}
.form fieldset{border:1px solid var(--steel);border-radius:12px;padding:26px 24px;display:grid;gap:18px;
  background:rgba(255,255,255,.02)}
.form legend{font-family:var(--ff-head);font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-bright);padding:0 10px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.check{display:flex;gap:11px;align-items:flex-start}
.check input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--brand-bright)}
.check label{font-size:.92rem;color:var(--fog)}
@media(max-width:600px){.form .row2{grid-template-columns:1fr}}

/* contact info list */
.cinfo{display:grid;gap:22px}
.cinfo .row{display:flex;gap:16px;align-items:flex-start}
.cinfo .row .ico{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;background:rgba(46,163,232,.12);border:1px solid var(--steel)}
.cinfo .row .ico svg{width:22px;height:22px;stroke:var(--brand-bright)}
.cinfo .row h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--silver);margin-bottom:4px;font-family:var(--ff-head)}
.cinfo .row p,.cinfo .row a{color:var(--white)}

/* ---------- Page hero (interior) ---------- */
.phero{position:relative;padding:170px 0 70px;overflow:hidden;border-bottom:1px solid var(--steel)}
.phero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(800px circle at 80% -20%,rgba(0,117,193,.25),transparent 55%),
  linear-gradient(180deg,var(--hull),var(--abyss));z-index:-2}
.phero .compass-bg{position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:420px;opacity:.12;z-index:-1}
.phero .eyebrow{margin-bottom:18px}
.phero p{max-width:60ch;margin-top:16px}
.crumb{font-family:var(--ff-head);font-size:.82rem;color:var(--silver);margin-bottom:20px;letter-spacing:.04em}
.crumb a:hover{color:var(--brand-bright)}

/* ---------- News ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post{background:linear-gradient(160deg,var(--hull-2),var(--hull));border:1px solid var(--steel);border-radius:var(--radius);overflow:hidden;transition:.3s}
.post:hover{transform:translateY(-5px);border-color:var(--brand)}
.post .thumb{height:170px;background:linear-gradient(135deg,var(--brand-deep),var(--hull));display:grid;place-items:center}
.post .thumb svg{width:54px;height:54px;stroke:rgba(255,255,255,.35)}
.post .body{padding:26px}
.post .tag{display:inline-block;font-family:var(--ff-head);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-bright);margin-bottom:12px}
.post h3{font-size:1.15rem;margin-bottom:10px}
.post .date{font-size:.82rem;color:var(--silver);margin-top:14px}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(180deg,var(--abyss),#03070d);border-top:1px solid var(--steel);padding:70px 0 30px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1.1fr 1fr 1fr 1.15fr;gap:36px}
.footer .brand img{height:56px}
.footer p{font-size:.92rem;color:var(--silver);margin-top:16px;max-width:34ch}
.footer .creds{margin-top:20px;max-width:34ch}
.footer h3{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);margin-bottom:18px;font-family:var(--ff-head)}
.footer ul{list-style:none;display:grid;gap:11px}
.footer ul a{color:var(--silver);font-size:.93rem;transition:color .2s}
.footer ul a:hover{color:var(--brand-bright)}
.socials{display:flex;gap:12px;margin-top:6px}
.socials a{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--steel);transition:.2s}
.socials a:hover{border-color:var(--brand-bright);transform:translateY(-3px)}
.socials svg{width:18px;height:18px;fill:var(--fog)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:50px;padding-top:24px;border-top:1px solid var(--steel);color:var(--silver);font-size:.84rem}

/* ---------- Reveal animation ---------- */
/* Hidden state only applies when JS is available (html.js), so the page
   stays fully visible if JavaScript is disabled or fails to load. */
.reveal{transition:opacity .7s ease,transform .7s ease}
.js .reveal{opacity:0;transform:translateY(30px)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:44px}
}
@media(max-width:980px){
  .grid-3,.grid-4,.team,.news-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:36px}
  .split.rev .visual{order:0}
  .stats{grid-template-columns:repeat(2,1fr);gap:34px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .proof{grid-template-columns:1fr}
  .proof .p{border-right:0;border-bottom:1px solid var(--steel)}
  .proof .p:last-child{border-bottom:0}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:rgba(6,11,20,.98);padding:18px;gap:4px;border-bottom:1px solid var(--steel);max-height:calc(100vh - 80px);overflow-y:auto}
  .nav-links.open a{padding:14px}
  .nav-home{display:block}
  .burger{display:flex}
  /* Dropdown collapses into the stacked mobile menu instead of floating */
  .has-sub{display:block}
  .nav-sub-toggle{width:100%;justify-content:space-between;padding:14px}
  .sub-menu{position:static;min-width:0;margin:2px 0 6px;background:rgba(255,255,255,.03);
    box-shadow:none;border-radius:10px}
  .sub-menu a{white-space:normal;padding:12px 16px}
}
@media(max-width:600px){
  .section{padding:80px 0}
  /* .grid-2 belongs here too — it was the one grid that never collapsed, so
     two-column sections (contract-vehicles.html, software.html) overflowed the
     viewport on a phone instead of stacking. */
  .grid-2,.grid-3,.grid-4,.team,.news-grid,.spec,.footer-grid,.stats{grid-template-columns:1fr}
  .quote{padding:46px 26px}
  .ship{width:80vw;bottom:30%}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{justify-content:center}
  .creds .c{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--steel)}
  .creds .c:last-child{border-bottom:0}
}

/* ============================================================
   Federal acquisition components
   ============================================================ */

/* ---------- Credentials strip (home hero, contract vehicles, footer) ---------- */
.creds{
  display:flex;flex-wrap:wrap;align-items:stretch;
  border:1px solid var(--steel);border-radius:14px;
  background:linear-gradient(160deg,var(--hull-2),var(--hull));overflow:hidden;
}
.creds .c{
  display:flex;flex-direction:column;gap:3px;justify-content:center;
  padding:14px 22px;flex:1 1 auto;min-width:150px;
  border-right:1px solid var(--steel);
}
.creds .c:last-child{border-right:0}
.creds .c .k{font-family:var(--ff-head);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-bright)}
.creds .c .v{font-family:var(--ff-head);font-size:.95rem;font-weight:600;color:var(--white);letter-spacing:.01em}
.creds.compact .c{padding:10px 18px;min-width:auto}
.creds.compact .c .v{font-size:.86rem}

/* ---------- Proof-point strip ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--steel);
  border-radius:var(--radius);overflow:hidden}
.proof .p{padding:28px 30px;background:linear-gradient(160deg,var(--hull-2),var(--hull));
  border-right:1px solid var(--steel)}
.proof .p:last-child{border-right:0}
.proof .p .k{font-family:var(--ff-head);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.proof .p p{font-size:.95rem;color:var(--fog);margin:0}

/* ---------- Internal content placeholder ----------
   Marks copy that is waiting on approved company information.
   Every one of these MUST be removed before the site goes live —
   see CONTENT-TODO.md at the repo root for the full list. */
.needs-content{
  border:1px dashed var(--gold);border-left:4px solid var(--gold);border-radius:12px;
  background:rgba(216,161,58,.07);padding:20px 24px;margin:22px 0;
}
.needs-content .t{display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-family:var(--ff-head);font-weight:700;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.needs-content .t svg{width:16px;height:16px;stroke:var(--gold);fill:none}
.needs-content p{font-size:.92rem;color:var(--fog);margin-bottom:0}
.needs-content ul{margin:10px 0 0 20px;display:grid;gap:7px}
.needs-content li{font-size:.9rem;color:var(--silver)}

/* ---------- Inline advisory notice (handling warnings, disclaimers) ---------- */
.notice{display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--steel);border-left:3px solid var(--brand-bright);
  background:rgba(46,163,232,.07);border-radius:10px;padding:15px 18px}
.notice svg{width:18px;height:18px;flex:none;stroke:var(--brand-bright);fill:none;margin-top:3px}
.notice p{font-size:.86rem;color:var(--fog);margin:0}
.notice strong{color:var(--white)}

/* A field still waiting on approved company information.
   The doubled class raises specificity above container rules that set their own
   color (.post .date, .chip) so the gold always shows through. */
.tbd.tbd{color:var(--gold);font-style:italic}
.chip{font-family:var(--ff-head);font-size:.76rem;letter-spacing:.03em;color:var(--fog);
  border:1px solid var(--steel);background:rgba(255,255,255,.03);border-radius:50px;padding:5px 14px}

/* ---------- Award listing ----------
   One row per awarded contract or task order: vehicle, award number, how it was
   awarded (prime or subcontract), and a one-line summary. */
.awards{display:grid;gap:14px}
.award{background:linear-gradient(160deg,var(--hull-2),var(--hull));border:1px solid var(--steel);
  border-radius:var(--radius-sm);padding:22px 26px;transition:border-color .25s}
.award:hover{border-color:var(--brand)}
.award-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.award .vehicle{font-family:var(--ff-head);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-bright);margin-bottom:7px}
.award h3{font-size:1.06rem;margin:0;line-height:1.3}
.award .role{flex:none;font-family:var(--ff-head);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 13px;border-radius:50px;border:1px solid;white-space:nowrap}
.role-prime{color:var(--gold);border-color:rgba(216,161,58,.5);background:rgba(216,161,58,.1)}
.role-sub{color:var(--brand-bright);border-color:rgba(46,163,232,.45);background:rgba(46,163,232,.1)}
/* Neither confirmed yet — deliberately neutral so it cannot be read as either */
.role-other{color:var(--silver);border-color:var(--steel);background:rgba(255,255,255,.04)}
/* Legend above the listing */
.role-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:26px}
.role-key div{display:flex;align-items:center;gap:10px}
.role-key p{font-size:.86rem;color:var(--silver);margin:0}
.award-meta{display:flex;flex-wrap:wrap;gap:6px 26px;margin:14px 0 12px;padding-top:13px;
  border-top:1px solid var(--steel)}
.award-meta span{font-family:var(--ff-head);font-size:.82rem;color:var(--silver)}
.award-meta b{color:var(--white);font-weight:600;font-variant-numeric:tabular-nums}
.award p{font-size:.92rem;color:var(--fog);margin:0}
@media(max-width:600px){
  .award{padding:20px}
  .award-top{flex-direction:column-reverse;align-items:flex-start;gap:12px}
}

/* ---------- Data table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--steel);border-radius:var(--radius)}
.tbl{width:100%;border-collapse:collapse;min-width:560px}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--steel);font-size:.93rem}
.tbl thead th{background:var(--hull-2);font-family:var(--ff-head);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.tbl tbody tr:last-child td,.tbl tfoot tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:rgba(255,255,255,.02)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td.num{color:var(--white)}
.tbl tfoot td{background:rgba(255,255,255,.03);font-family:var(--ff-head);font-weight:600;color:var(--white)}

/* ---------- Capability cross-links ---------- */
.subnav{display:flex;flex-wrap:wrap;gap:10px}
.subnav a{font-family:var(--ff-head);font-size:.86rem;color:var(--fog);border:1px solid var(--steel);
  background:rgba(255,255,255,.03);border-radius:50px;padding:9px 18px;transition:.2s}
.subnav a:hover{border-color:var(--brand-bright);color:#fff;transform:translateY(-2px)}
.subnav a.on{border-color:var(--brand-bright);color:var(--brand-bright);background:rgba(46,163,232,.1)}

/* ---------- Long-form legal / policy prose ---------- */
.legal{max-width:78ch}
.legal h2{font-size:1.5rem;margin:46px 0 14px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.08rem;margin:28px 0 10px}
.legal p{margin-bottom:15px}
.legal ul,.legal ol{margin:0 0 18px 22px;display:grid;gap:9px}
.legal li{color:var(--fog)}
.legal a{color:var(--brand-bright);text-decoration:underline;text-underline-offset:3px}
.legal .updated{font-family:var(--ff-head);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--silver);padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--steel)}

/* ---------- Product logo lockup (software.html) ----------
   A fixed plate so two logos of different shapes still line up across the row.
   The default is for a transparent mark sitting on the plate. */
/* A fixed-height plate, so two logos of different shapes present at the same
   size and the cards below them stay on a common baseline. object-fit:contain
   means a replacement logo of any aspect ratio drops in without a CSS change. */
/* The plate carries the aspect ratio of the delivered Marquepoint artwork, so
   that mark fills it exactly with no letterbox seam, and every other product
   plate on the row is the same shape whatever its logo's proportions. */
.product-logo{display:flex;align-items:center;justify-content:center;
  aspect-ratio:760/349;margin-bottom:22px;padding:16px 24px;overflow:hidden;
  background:#02070f;border:1px solid var(--steel);border-radius:var(--radius-sm)}
.product-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
/* .plate is for a mark delivered as a finished rectangle carrying its own ground
   and texture — Marquepoint's. It runs edge to edge, so no join shows at all. */
.product-logo.plate{padding:0}
.product-logo.plate img{width:100%;height:100%;object-fit:cover}
/* --- Product section visuals (software.html) ---------------------------------
   Each product runs its mark above a screenshot of the product. The pair is one
   column so the mark sits at the top of the section, level with the heading,
   instead of floating in the middle of a tall grid cell. */
.split.top{align-items:start;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
@media(max-width:980px){ .split.top{grid-template-columns:1fr} }
.visual-stack{display:grid;gap:20px;align-content:start}

/* The mark keeps the aspect ratio of the delivered Marquepoint artwork. min-height
   is reset because .visual's 340px floor would otherwise letterbox the mark at
   narrow widths. */
.visual-stack .visual{min-height:0;aspect-ratio:760/349;max-width:100%;
  display:grid;place-items:center}
.visual-stack .visual img{width:100%;height:100%;object-fit:cover;display:block}

/* Product screenshots. They are dark UI on a dark page, so each carries a solid
   light border to read as a distinct object rather than blending into the
   background, and is shown uncropped at its own proportions. A plain click opens
   it full size in the lightbox below, because the detail is the point. */
.shot{margin:0}
.shot a{display:block;border-radius:var(--radius-sm);transition:transform .25s ease}
.shot a:hover{transform:translateY(-2px)}
.shot img{display:block;width:100%;height:auto;border:2px solid var(--silver);
  border-radius:var(--radius-sm);background:#02070f;box-shadow:var(--shadow)}
.shot a:hover img,.shot a:focus-visible img{border-color:var(--brand-bright)}
.shot figcaption{margin-top:10px;font-size:.85rem;color:var(--silver);letter-spacing:.02em}
.shot figcaption .hint{color:var(--brand-bright)}

/* Lightbox: one <dialog> per page, filled by app.js from the link that was
   clicked. Only the [open] state gets a display value — a bare display on the
   element would override the browser's hidden default and show it closed. */
body.lightbox-open{overflow:hidden}
/* margin:auto is what centers a modal <dialog> (the browser positions it fixed with
   inset 0 and lets the auto margins absorb the free space). The global * reset above
   zeroes margins, so it has to be restored here or the dialog sits top-left. */
.lightbox{margin:auto;border:0;padding:0;background:transparent;color:var(--fog);
  max-width:min(96vw,1800px);max-height:96vh;overflow:visible}
.lightbox[open]{display:grid;gap:12px;justify-items:center}
.lightbox::backdrop{background:rgba(2,6,12,.92)}
.lightbox img{display:block;max-width:min(96vw,1800px);max-height:80vh;width:auto;height:auto;
  border:2px solid var(--silver);border-radius:var(--radius-sm);background:#02070f}
.lightbox-cap{margin:0;text-align:center;font-size:.9rem;color:var(--fog);padding:0 12px}
.lightbox-close{justify-self:end;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--steel);background:var(--hull);
  color:#fff;cursor:pointer}
.lightbox-close svg{width:20px;height:20px;stroke:currentColor;fill:none}
.lightbox-close:hover{background:var(--hull-2);border-color:var(--brand-bright)}

/* ============================================================
   Cinematic video intro
   ============================================================ */
body.intro-lock{overflow:hidden}
/* When the intro will be skipped (already seen this session, or reduced-motion),
   hide it before first paint so it never flashes. Set via the head script. */
.intro-skip .intro{display:none!important}
/* The overlay is dismissed by script and its buttons do nothing without it, so
   it only exists when JS does — same gate as .reveal above. Otherwise a no-JS
   visitor lands behind a fixed layer they cannot clear. */
.intro{display:none}
.js .intro{position:fixed;inset:0;z-index:2000;background:#02060c;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:1;transition:opacity 1.1s ease}
.intro.hide{opacity:0;pointer-events:none}
.intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro .veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 30%,transparent 55%,rgba(2,6,12,.55) 100%),
             linear-gradient(180deg,rgba(2,6,12,.45) 0%,transparent 22%,transparent 70%,rgba(2,6,12,.75) 100%)}
.intro-brand{position:absolute;top:34px;left:0;right:0;z-index:4;display:flex;justify-content:center;
  animation:introFade 1.1s ease both .3s}
.intro-brand img{height:74px;width:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
.intro-tagline{position:absolute;left:0;right:0;bottom:40%;z-index:4;text-align:center;color:#eef4fb;
  font-family:var(--ff-head);font-size:clamp(1.3rem,3.4vw,2.4rem);font-weight:600;letter-spacing:-.01em;
  text-shadow:0 4px 30px rgba(0,0,0,.7);animation:introFade 1.2s ease both 1s;padding:0 20px}
.intro-tagline span{color:#7fd0ff}
.intro-controls{position:absolute;bottom:30px;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:14px;animation:introFade 1s ease both 1.4s}
.intro-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-head);font-weight:600;font-size:.86rem;
  letter-spacing:.04em;color:#eef4fb;background:rgba(8,16,28,.55);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:11px 20px;border-radius:50px;cursor:pointer;transition:.2s}
.intro-btn:hover{background:rgba(46,163,232,.28);border-color:#2ea3e8;transform:translateY(-2px)}
.intro-btn svg{width:16px;height:16px;stroke:currentColor;fill:none}
.intro-progress{position:absolute;left:0;bottom:0;height:3px;width:0;z-index:5;background:linear-gradient(90deg,#2ea3e8,#7fd0ff);transition:width .15s linear}
@keyframes introFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:600px){.intro-brand img{height:56px}.intro-controls{flex-wrap:wrap}}

/* ============================================================
   Accessibility & polish
   ============================================================ */

/* Available to screen readers, absent from the visual layout. Used where a heading
   is needed for correct document structure but would be redundant on screen. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip-to-content link — visually hidden until focused by keyboard */
.skip-link{position:fixed;top:10px;left:10px;z-index:3000;
  background:var(--brand);color:#fff;font-family:var(--ff-head);font-weight:600;
  padding:12px 20px;border-radius:10px;transform:translateY(-160%);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0);outline:2px solid #fff;outline-offset:2px}

/* Visible keyboard focus ring on all interactive elements */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--brand-bright);outline-offset:3px;border-radius:6px}
/* Don't show the ring for mouse users on cards/nav */
a:focus:not(:focus-visible){outline:none}

/* Anchor targets clear the fixed nav when jumped to */
[id]{scroll-margin-top:96px}

/* Active nav item gets an accent underline (works with aria-current) */
.nav-links a.active,.nav-links a[aria-current="page"]{position:relative;color:var(--brand-bright)}
.nav-links a.active::after,.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:16px;right:16px;bottom:3px;height:2px;
  background:linear-gradient(90deg,var(--brand-bright),transparent)}

/* Richer interior page heroes — faint starfield over the existing gradient */
.phero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 30%,rgba(207,227,247,.7),transparent),
    radial-gradient(1.2px 1.2px at 42% 18%,rgba(207,227,247,.5),transparent),
    radial-gradient(1.6px 1.6px at 67% 38%,rgba(207,227,247,.6),transparent),
    radial-gradient(1.1px 1.1px at 83% 22%,rgba(207,227,247,.45),transparent),
    radial-gradient(1.3px 1.3px at 91% 52%,rgba(207,227,247,.5),transparent),
    radial-gradient(1.2px 1.2px at 9% 60%,rgba(207,227,247,.4),transparent)}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .ship,.scroll-cue .line{animation:none!important}
  .scroll-cue .line{opacity:.6}
}