/* ================================================================
   FORGE — Commercial redesign layer
   Sits on top of styles.css + pages.css. Re-messages the site around
   the commercial track (one-stop capability + scalability) while
   keeping the dark + green identity. Federal stays as a secondary
   entry point.
   ================================================================ */

/* ── Wide content container ──
   styles.css caps .wide at 1640px, which feels narrow on large monitors
   for the long-form public pages (security, capabilities, signup intros,
   etc.). The pre-Phase-3 versions of those pages each set
   :root { --wide: 2400px } in an inline <style> block and then used
   max-width: var(--wide) on their sections. Phase 3 dropped those
   per-page overrides; restore the wider feel globally here so every page
   loading commercial.css gets it (matches the old known-good value). */
.wide { max-width: 2400px; }

/* ── Nav: solid black, logo wordmark, commercial-first ── */
/* NOTE: the topnav background/blur values below are overridden by an
   inline !important rule in header.php that enforces solid black per
   the FORGE design system. Kept here for parity with the design source
   but won't actually take effect — that's intentional. */
.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8,8,8,0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--hairline);
}
.topnav--scrolled { background: rgba(6,6,6,0.94); }
/* forge-motion.css fades the nav in from opacity:0 with fill `both`. Keep a
   subtle slide but never let the nav get stuck invisible — animate transform
   only, opacity stays 1. */
.topnav { animation: navSlideIn 0.8s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes navSlideIn { from { transform: translateY(-8px); } to { transform: none; } }
.topnav__brand { display: flex; align-items: center; gap: 10px; }
.fg-mark {
  width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent); color: var(--black);
  font-family: var(--sans); font-weight: 800; font-size: 14px;
  letter-spacing: -0.06em; border-radius: 3px;
}
/* Image variant of the brand mark — strips the green tile background and
   renders the favicon directly. Used in header.php / footer.php so the
   actual FORGE logo shows up, not the prototype's CSS-built letter tile. */
.fg-mark--img {
  width: 32px; height: 32px; flex-shrink: 0;
  object-fit: contain; display: block;
  background: transparent; border: 0; border-radius: 0;
}
.fg-word {
  font-family: var(--sans); font-weight: 800; font-size: 19px;
  letter-spacing: 0.16em; color: var(--text); padding-right: 0.16em;
}
.fg-word em { font-style: normal; color: inherit; }
.topnav__link--active {
  color: var(--text);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 7px;
}
.nav-quiet {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.nav-quiet:hover { color: var(--accent); }
.topnav__link { white-space: nowrap; }

/* Collapse the desktop nav into the drawer below 1024px. The base drawer in
   styles.css only triggers at ≤900px, but 5 center links + 2 quiet links + the
   CTA overflow between 901–1024px and clip the "POST A JOB" button. Mirror the
   drawer mechanics here at 1024px, anchored to this layout's 72px nav height. */
@media (max-width: 1024px) {
  .topnav__links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-quiet, .nav-sep { display: none; }

  #nav-toggle:checked ~ #mainNav::before {
    content: '';
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 98;
  }
  #nav-toggle:checked ~ #mainNav .topnav__links {
    display: flex;
    position: fixed;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--black);
    border-bottom: 1px solid var(--hairline-bright);
    padding: 10px 0 22px;
    z-index: 99;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  #nav-toggle:checked ~ #mainNav .topnav__links li { width: 100%; }
  #nav-toggle:checked ~ #mainNav .topnav__link {
    display: block;
    padding: 16px 28px;
    font-size: 15px;
    font-family: var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--hairline-dim);
    border-left: none;
    padding-bottom: 16px;
  }
  #nav-toggle:checked ~ #mainNav .topnav__link--active,
  #nav-toggle:checked ~ #mainNav .topnav__link:hover {
    background: rgba(139,186,60,0.08);
    color: var(--accent);
  }
  #nav-toggle:checked ~ #mainNav .topnav__links li:last-child .topnav__link { border-bottom: none; }
  #nav-toggle:checked ~ #mainNav .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #nav-toggle:checked ~ #mainNav .nav-hamburger span:nth-child(2) { opacity: 0; }
  #nav-toggle:checked ~ #mainNav .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
.nav-sep { width: 1px; height: 16px; background: var(--hairline-bright); }

/* ── Hero ── */
.c-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(72px + 40px) clamp(20px, 4vw, 48px) 72px;
  overflow: hidden;
}
.c-hero::before {
  content: '';
  position: absolute;
  top: -12%;
  right: -6%;
  width: 68vw;
  height: 110vh;
  background: radial-gradient(ellipse at 58% 42%,
    rgba(139,186,60,0.20) 0%,
    rgba(80,120,30,0.12) 32%,
    rgba(30,50,10,0.05) 56%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.c-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 76px 76px;
  pointer-events: none;
  z-index: 0;
}
.c-hero__top { position: relative; z-index: 2; }
.c-hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 28px;
}
.c-hero__eyebrow-dot {
  width: 9px; height: 9px; background: var(--accent); flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
.c-hero__headline {
  font-size: clamp(44px, 6.6vw, 92px);
  font-weight: 800; line-height: 0.96; letter-spacing: -0.045em;
  max-width: 15ch;
}
.c-hero__headline em { font-style: normal; color: var(--accent); }
/* Lines are manually broken via <span class="hl-line">, so the headline must
   be wide enough to never clip a line (hl-line uses overflow:hidden for the
   reveal, which would otherwise cut off the last word). */
.c-hero__headline { max-width: none; }
.c-hero__bottom {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 48px; flex-wrap: wrap;
}
.c-hero__sub { font-size: 16px; color: var(--text-2); line-height: 1.65; max-width: 460px; }
.c-hero__actions { display: flex; gap: 12px; flex-shrink: 0; align-items: center; flex-wrap: wrap; }

/* ── Capability strip (badge strip, commercial values) ── */
.cap-strip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cap-strip__items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.cap-strip__item {
  padding: 24px clamp(20px, 2.4vw, 32px);
  border-right: 1px solid var(--hairline);
}
.cap-strip__item:last-child { border-right: none; }
.cap-strip__cat {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-3); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 6px;
}
.cap-strip__val {
  font-family: var(--mono); font-size: 13px;
  font-weight: 700; color: var(--text); letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Section label (§) ── */
.c-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.c-label::before { content: '§'; }

/* ── Capabilities grid — the one-stop-shop value prop ── */
.cap-section { padding: clamp(64px, 9vw, 120px) 0; border-bottom: 1px solid var(--hairline); }
.cap-head {
  display: grid; grid-template-columns: 1fr 440px; gap: 64px;
  align-items: end; margin-bottom: 56px;
}
.cap-head h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; margin-top: 22px; }
.cap-head h2 em { font-style: normal; color: var(--accent); }
.cap-head p { font-size: 15px; color: var(--text-2); line-height: 1.7; }
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.cap-card {
  background: var(--off-black);
  padding: 36px 32px 32px;
  position: relative;
  transition: background 0.18s ease;
  min-height: 230px;
  display: flex;
  flex-direction: column;
}
.cap-card:hover { background: var(--surface); }
.cap-card__id {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  letter-spacing: 0.14em; margin-bottom: 26px;
}
.cap-card__title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.cap-card__desc { font-size: 13.5px; color: var(--text-2); line-height: 1.65; margin-bottom: 20px; }
.cap-card__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.cap-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
  border: 1px solid var(--hairline-bright); padding: 4px 8px;
}

/* ── Track / two-track section ── */
.track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.track-col { background: var(--off-black); padding: 40px; }
.track-col--featured { background: rgba(139,186,60,0.045); }
.track-col__tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.track-col__tag .dot { width: 6px; height: 6px; }
.track-col h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.022em; margin-bottom: 14px; }
.track-col > p { font-size: 14px; color: var(--text-2); line-height: 1.7; margin-bottom: 20px; }
.track-list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; }
.track-list li { font-size: 13px; color: var(--text-2); padding-left: 20px; position: relative; line-height: 1.55; }
.track-list li::before { content: '+'; position: absolute; left: 0; font-family: var(--mono); color: var(--accent); }

/* ── Generic editorial section helpers reused across pages ── */
.c-mission { padding: clamp(56px, 8vw, 110px) 0; border-bottom: 1px solid var(--hairline); }
.c-mission__grid { display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: start; }
.c-mission__text { font-size: clamp(24px, 2.7vw, 36px); font-weight: 700; line-height: 1.28; letter-spacing: -0.025em; }
.c-mission__text .bright { color: var(--text); }
.c-mission__text .dim { color: var(--text-3); }

/* ── Stat row ── */
.c-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); }
.c-stat { padding: 44px 44px 44px 0; border-right: 1px solid var(--hairline); margin-left: 44px; }
.c-stat:first-child { margin-left: 0; padding-left: 0; }
.c-stat:last-child { border-right: none; }
.c-stat__num { font-size: clamp(48px, 6.5vw, 96px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 12px; }
.c-stat__num sup { font-size: 0.36em; vertical-align: super; color: var(--text-3); font-weight: 400; }
.c-stat__lbl { font-family: var(--mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.55; }

/* ── CTA ── */
.c-cta { position: relative; padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 48px); overflow: hidden; }
.c-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 72% 50%, rgba(139,186,60,0.18) 0%, rgba(40,60,12,0.10) 42%, transparent 72%);
  pointer-events: none;
}
.c-cta__inner { position: relative; z-index: 1; }
.c-cta__eyebrow { font-family: var(--mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 24px; }
.c-cta__h { font-size: clamp(40px, 5.4vw, 76px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; margin-bottom: 20px; }
.c-cta__h em { font-style: normal; color: var(--accent); }
.c-cta__sub { font-size: 16px; color: var(--text-2); max-width: 480px; line-height: 1.65; margin-bottom: 40px; }
.c-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Hero line reveal: the forge-motion clip-mask assumes single-word lines and
   clips trailing words on our multi-word lines. Override to a rise+fade (no
   overflow clip) while keeping the staggered timing + accent glow. */
.hero-headline .hl-line { overflow: visible; padding: 0; }
.hero-headline .hl-inner {
  transform: translateY(0.5em);
  opacity: 0;
  white-space: nowrap;
  transition: transform 0.95s cubic-bezier(0.22,1,0.36,1),
              opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              text-shadow 1.2s ease-out 1.7s;
}
.hero-headline.is-in .hl-inner { transform: none; opacity: 1; }

/* arrow helper */
.arr { display: inline-flex; align-items: center; }

/* The proper motion layer (forge-motion.css/js) now handles entrances via
   .reveal / .hero-* classes. Keep the page wrapper itself always visible. */
.fade-in { opacity: 1; animation: none; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .cap-head { grid-template-columns: 1fr; gap: 24px; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .track-grid { grid-template-columns: 1fr; }
  .c-stats { grid-template-columns: repeat(2, 1fr); }
  .cap-strip__items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .c-hero { min-height: auto; padding: 112px 20px 48px; justify-content: flex-start; }
  .c-hero__bottom { flex-direction: column; align-items: flex-start; gap: 28px; margin-top: 32px; }
  .c-hero__sub { max-width: 100%; }
  .c-hero__actions .btn { width: 100%; justify-content: center; }
  .c-mission__grid { grid-template-columns: 1fr; gap: 20px; }
  .cap-grid { grid-template-columns: 1fr; }
  .cap-strip__items { grid-template-columns: repeat(2, 1fr); }
  .c-stats { grid-template-columns: 1fr 1fr; }
  .c-stat { padding: 28px 16px 28px 0; margin-left: 20px; }
  .c-stat__num { font-size: clamp(40px, 12vw, 64px); }
  .track-col { padding: 32px 24px; }
}
@media (max-width: 480px) {
  .c-stats { grid-template-columns: 1fr; }
  .cap-strip__items { grid-template-columns: 1fr; }
}