@font-face {
  font-family: "Instrument Sans";
  src: url("assets/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root { color-scheme: dark; --paper: #292a2b; --ink: #f0f0ed; --muted: #b3b5b6; --line: #454748; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Instrument Sans", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #c1c3c4; outline-offset: 6px; }
.skip-link { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 12px; background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.header { max-width: none; margin: auto; background: #242526; color: #f4f3f0; border-bottom: 1px solid #454647; min-height: 104px; padding: 22px max(32px, calc((100% - 1136px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font-size: 24px; font-weight: 600; letter-spacing: -.8px; }
.brand img { object-fit: contain; }
.brand-domain { color: #b9bbbc; font-weight: 400; }
.header-label { color: #b9bbbc; font-size: 10px; font-weight: 500; letter-spacing: 1.7px; }
main { max-width: 1080px; margin: auto; border-inline: 1px solid var(--line); }
.hero { position: relative; padding: 100px 42px 90px; text-align: center; background: radial-gradient(ellipse at 50% 0%, #e3e3e0 0%, transparent 64%); }
.hero::before, .hero::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--line)); pointer-events: none; }
.hero::before { left: 22px; }
.hero::after { right: 22px; }
.hero-inner { position: relative; }
.eyebrow { margin: 0 0 27px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 2.1px; }
h1 { margin: 0; font-size: clamp(52px, 7vw, 84px); line-height: 1.03; font-weight: 500; letter-spacing: -.065em; }
.intro { margin: 26px 0 30px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.button { display: inline-flex; gap: 24px; align-items: center; min-height: 48px; padding: 13px 23px; color: #f4f3f0; background: var(--ink); border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 500; transition: background .18s; }
.button:hover { background: #484a4c; }
.button span { font-size: 18px; }
.organizations { border-top: 1px solid var(--line); padding: 37px 24px 55px; text-align: center; scroll-margin-top: 24px; }
h2 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.4px; }
h2 span { color: var(--muted); font-weight: 400; }
.section-intro { margin: 10px 0 26px; color: var(--muted); font-size: 12px; }
.organization-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.organization { height: 218px; padding: 17px 5px; display: flex; flex-direction: column; align-items: center; text-decoration: none; border-radius: 4px; }
.organization-live { transition: background .18s; }
.organization-live:hover { background: #37393b; }
.mark { height: 94px; display: flex; align-items: center; justify-content: center; }
.mark img { display: block; width: auto; height: auto; max-width: 88px; max-height: 76px; object-fit: contain; flex-shrink: 0; }
.mark img[src$=".svg"] { width: 88px; }
/* Follow each seal's outer edge without clipping its lettering or internal whites. */
.mark img[src$="whmo-seal.jpg"] { clip-path: ellipse(49.5% 49.3% at 49.9% 50%); }
.mark img[src$="disa.jpg"] { clip-path: ellipse(37.7% 45.1% at 49.9% 50.2%); }
.mark img[src$="jsoc.jpg"] { clip-path: ellipse(45.2% 45.5% at 50.4% 49.6%); }
.mark img[src$="marines.png"] { filter: none; }
.mark img[src$="space-force.svg"] { filter: invert(1); }
.mark img[src$="agency-darpa.png"] { filter: brightness(0) invert(1); }
.mark img[src$="agency-dcsa.png"],
.mark img[src$="agency-mda.png"],
.mark img[src$="nga.png"] { clip-path: circle(50%); }
.org-name { min-height: 42px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; line-height: 1.4; }
.status { margin-top: 12px; color: #b3b5b6; font-size: 10px; }
.live-status { color: var(--ink); font-weight: 600; }
.live-status span { margin-left: 6px; }
footer { max-width: 1080px; margin: auto; padding: 23px 24px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
@media (max-width: 760px) {
  .header { min-height: 88px; padding: 18px 24px; }
  .header-label { display: none; }
  main { margin-inline: 16px; }
  .hero { padding: 76px 26px 66px; }
  .hero::before { left: 10px; } .hero::after { right: 10px; }
  .intro { font-size: 15px; }
  .organization-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .organizations { padding: 30px 12px 36px; }
  footer { margin-inline: 16px; padding-inline: 8px; }
}
@media (max-width: 390px) {
  .organization-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro br { display: none; }
  h2 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Hero entrance; the logo strip also supports native horizontal scrolling. */
.hero-inner > * { animation: hero-enter .7s cubic-bezier(.22, 1, .36, 1) both; }
.hero-inner .eyebrow { animation-delay: .05s; }
.hero-inner h1 { animation-delay: .15s; }
.hero-inner .intro { animation-delay: .25s; }
.hero-inner .button { animation-delay: .35s; }
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.logo-window { overflow-x: auto; overflow-y: hidden; padding: 8px 0; scrollbar-width: thin; scrollbar-color: var(--muted) var(--line); }
.logo-track { display: flex; width: max-content; background: var(--paper); }
.logo-track .organization-list { display: flex; flex: 0 0 auto; gap: 0; }
.logo-track .organization-list > li { width: 192px; padding: 0 8px; }
.logo-track .organization-copy { display: none; }
.scroll-enhanced .organization-copy { display: flex; }
.scroll-enhanced .logo-window { scrollbar-width: none; }
.scroll-enhanced .logo-window::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-inner > * { animation: none; }
}

/* The linked film fills the hero; a dark scrim keeps the copy readable. */
.hero-video { isolation: isolate; overflow: hidden; container-type: inline-size; background: #1c1d1e; color: #f4f3f0; }
.hero-video::before { inset: 0; width: auto; z-index: -1; background: linear-gradient(180deg, rgb(12 12 12 / .38), rgb(12 12 12 / .61) 55%, rgb(12 12 12 / .46)); }
.hero-video::after { display: none; }
.hero-media { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-poster { width: 100%; height: 100%; object-fit: cover; }
.hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.hero-video .eyebrow, .hero-video .intro { color: #eeefed; }
.hero-video .intro { font-style: italic; }
/* Soft dark-gray halo so the copy lifts off the film. */
.hero-video h1 { text-shadow: 0 0 22px rgb(38 40 42 / .55), 0 0 64px rgb(28 30 32 / .6); }
.hero-video .intro { text-shadow: 0 0 14px rgb(38 40 42 / .7), 0 0 36px rgb(28 30 32 / .5); }
.typed-cursor { box-shadow: 0 0 14px rgb(38 40 42 / .7); }
.hero-video .button { background: #e4e4e0; color: #242526; }
.hero-video .button:hover { background: #dededb; }
/* Hover: the button lifts a touch, fills dark gray with white text, and the arrow eases down. */
.hero .button .button-label { font-size: inherit; }
.hero .button .button-arrow { display: inline-block; }
.hero-video .button:is(:hover, :focus-visible) { background: #4a4c4e; color: #f4f3f0; }
@media (prefers-reduced-motion: no-preference) {
  .hero .button { transition: background .25s, color .25s, translate .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; }
  .hero .button:is(:hover, :focus-visible) { translate: 0 -2px; box-shadow: 0 10px 28px -12px rgb(0 0 0 / .6); }
  .hero .button:active { translate: 0 1px; box-shadow: none; }
  .hero .button .button-arrow { animation: explore-cue 2.4s cubic-bezier(.25, 1, .5, 1) 1s 2; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
  .hero .button:is(:hover, :focus-visible) .button-arrow { animation: none; transform: translateY(3px); }
  @keyframes explore-cue {
    0%, 45%, 100% { transform: translateY(0); }
    22% { transform: translateY(4px); }
  }
}

/* Typed headline: one line, sized to the hero; the ghost copy reserves the final width. */
.hero-video h1 { font-size: min(120px, 9.2cqi); white-space: nowrap; }
.typed { position: relative; display: inline-block; }
.typed-ghost { visibility: hidden; }
.typed-live { position: absolute; top: 0; left: 0; }
.typed-cursor { display: inline-block; width: .055em; height: .74em; margin-left: .07em; vertical-align: -.02em; background: currentColor; border-radius: 1px; }
/* Solid while typing; then six blinks and a fade-out. */
.typed-done .typed-live .typed-cursor { animation: cursor-blink 1.06s steps(1) 6, cursor-out .5s ease 6.36s forwards; }
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes cursor-out { to { opacity: 0; } }
.js .hero-inner:not(.typing, .typed-done) .typed-live { visibility: hidden; animation: typed-fallback 0s 3s forwards; }
@keyframes typed-fallback { to { visibility: visible; } }
.js .hero-inner.typing h1 { animation: none; }
.js .hero-inner.typing:not(.typed-done) :is(.intro, .button) { opacity: 0; animation: none; }
.js .hero-inner.typed-done :is(.intro, .button) { animation: hero-enter .7s cubic-bezier(.22, 1, .36, 1) both; }
.js .hero-inner.typed-done .button { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) { .typed-live .typed-cursor { animation: none; } }
.hero-video a:focus-visible { outline-color: #f4f3f0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hero-film { display: none; } }

.hero-controls { width: 100%; flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 0 24px 16px; }
.hero-controls:has(.sound-toggle[hidden]) { display: none; }
.sound-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 116px; height: 44px; padding: 0 16px; color: #f4f3f0; background: rgb(12 12 12 / .45); border: 1px solid rgb(250 251 249 / .5); border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; }
.sound-toggle[hidden] { display: none; }
.sound-toggle:hover { background: rgb(12 12 12 / .75); }
.sound-toggle:focus-visible { outline: 3px solid #f4f3f0; outline-offset: 4px; }
.sound-toggle .sound-on, .sound-toggle[aria-pressed="true"] .sound-off { display: none; }
.sound-toggle[aria-pressed="true"] .sound-on { display: block; }

.header a:focus-visible { outline-color: #d5d5d2; }

/* Fill the initial viewport while accounting for the masthead. */
:root { --header-height: 72px; }
.header { height: var(--header-height); }
.hero { min-height: calc(100svh - var(--header-height)); display: flex; align-items: center; justify-content: center; }
.hero-inner { width: 100%; }
@media (max-width: 760px) { :root { --header-height: 64px; } }

/* The organization strip sits over the bottom of the same video. */
.hero { flex-direction: column; justify-content: flex-start; padding: 0; }
.hero-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(80px + 34svh) 28px 56px; }
.hero .organizations { width: 100%; flex: 0 0 auto; padding: 12px 24px 8px; position: relative; isolation: isolate; background: transparent; border-top: 0; scroll-margin-top: 0; }
.hero .logo-track { background: transparent; }
.hero .organization { height: 138px; padding-block: 6px; }
.hero .mark { height: 84px; }
.hero .org-name { min-height: 36px; font-size: 11px; }
.hero .organization-live:hover { background: rgb(240 240 237 / .09); }
@media (max-width: 760px) {
  .hero-inner { padding: calc(76px + 26svh) 24px 40px; }
  .hero .organizations { padding-inline: 8px; }
  .hero .logo-track .organization-list > li { width: 160px; }
  .hero .button { min-height: 40px; padding: 9px 18px; gap: 14px; font-size: 12px; }
  .hero .button .button-arrow { font-size: 15px; }
}

/* Let the video show through soft header and footer fades. */
.header { position: fixed; inset: 0 0 auto; z-index: 10; isolation: isolate; background: transparent; border-bottom: 0; }
main { max-width: none; border-inline: 0; margin: 0; }
.hero { min-height: 100svh; padding-top: var(--header-height); }
.hero .org-name { text-shadow: 0 1px 8px rgb(0 0 0 / .8); }

/* Extend the tint beyond each band for a continuous, borderless fade. */
.header::before { content: ""; position: absolute; inset: 0 0 -64px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(18 19 20 / .98) 0%, rgb(23 24 25 / .9) 34%, rgb(29 30 31 / .65) 62%, rgb(29 30 31 / .27) 83%, transparent 100%); }
.hero .organizations::before { content: ""; position: absolute; inset: -72px 0 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgb(29 30 31 / .22) 16%, rgb(29 30 31 / .5) 34%, rgb(23 24 25 / .79) 66%, rgb(18 19 20 / .93) 100%); }

/* Compact masthead; soften the film's letterboxed edges without extra zoom. */
.header { min-height: 0; padding-block: 12px; }
.brand { font-size: 21px; gap: 12px; }
.brand img { width: 44px; height: 44px; }
.hero-poster, .hero-film { mask-image: linear-gradient(180deg, transparent 0%, transparent 11%, black 22%, black 78%, transparent 89%, transparent 100%); }
@media (max-width: 760px) {
  .header { padding-block: 10px; }
  .brand img { width: 40px; height: 40px; }
}

/* Search and a simple directory below the video. */
.header-search { display: flex; align-items: center; width: min(320px, 48%); height: 40px; background: rgb(240 240 237 / .07); border: 1px solid rgb(240 240 237 / .3); border-radius: 3px; }
.header-search:focus-within { border-color: #f0f0ed; }
.header-search input { min-width: 0; width: 100%; padding: 10px 12px; border: 0; outline: 0; background: transparent; color: #f0f0ed; font: inherit; font-size: 12px; }
.header-search input::placeholder { color: #c1c3c4; }
.header-search button { display: grid; place-items: center; flex: 0 0 40px; height: 40px; background: transparent; border: 0; color: #f0f0ed; cursor: pointer; }
.header-search button:focus-visible { outline: 2px solid #f0f0ed; outline-offset: 2px; }
.directory { min-height: 100svh; max-width: 1080px; margin: auto; padding: 76px 32px 88px; scroll-margin-top: calc(var(--header-height) + 16px); }
.directory-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.directory-heading .eyebrow { margin-bottom: 12px; font-size: 10px; }
.directory h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -1.5px; line-height: 1.1; }
.directory h2:focus { outline: none; }
.directory-count { color: var(--muted); font-size: 12px; margin: 0 0 4px; white-space: nowrap; }
.directory-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.directory-item { border-bottom: 1px solid var(--line); }
.directory-link { display: flex; align-items: center; gap: 24px; min-height: 116px; padding: 20px 16px; text-decoration: none; transition: background .18s; }
.directory-link:hover { background: #323435; }
.directory-link .mark { flex: 0 0 76px; height: 70px; }
.directory-link .mark img { max-width: 64px; max-height: 62px; }
.directory-copy { flex: 1; min-width: 0; }
.directory-copy h3 { margin: 0 0 8px; font-size: 17px; font-weight: 500; }
.directory-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.directory-arrow { color: #b3b5b6; font-size: 23px; }
.search-summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: -8px 0 24px; font-size: 13px; }
.search-summary span { overflow-wrap: anywhere; }
.search-summary button { flex-shrink: 0; min-height: 44px; padding: 8px 0; border: 0; color: var(--ink); background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.search-summary button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.directory-empty { padding: 28px 0; color: var(--muted); line-height: 1.6; }
.directory [hidden] { display: none; }
@media (max-width: 600px) {
  .header { gap: 12px; padding-inline: 16px; }
  .brand { gap: 8px; font-size: 18px; }
  .header-search { width: 48%; }
  .header-search input { padding-inline: 8px; font-size: 11px; }
  .header-search button { flex-basis: 32px; }
  .directory { padding: 48px 20px; }
  .directory-link { gap: 14px; padding-inline: 0; }
  .directory-link .mark { flex-basis: 52px; }
  .directory-link .mark img { max-width: 48px; max-height: 48px; }
  .directory-copy h3 { font-size: 15px; }
  .directory-copy p { font-size: 12px; }
}

.directory .directory-search { width: 100%; height: 48px; margin: 0 0 28px; }
.directory-search input { padding: 12px 14px; font-size: 13px; }
.directory-search button { flex-basis: 48px; height: 46px; }