/* ─── Reset & Base ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* DSA Official Brand Colors (sampled from logo) */
      --brand-blue:  #002864;  /* DSA navy blue (sampled from logo) — AAA on white (12.6:1) */
      --brand-gray:  #8C8D8F;  /* DSA swoosh gray */

      --navy:        #0B1A2F;
      --navy-mid:    #122540;
      --navy-light:  #1A3357;
      --blue:        #1B4B9C;  /* updated to exact DSA brand blue */
      --blue-bright: #2060B8;  /* darker hover state to maintain contrast */
      --accent:      #1EAED4;
      --white:       #FFFFFF;
      --off-white:   #F4F6F9;
      --gray-100:    #EDF0F4;
      --gray-400:    #8A9BB0;
      --gray-600:    #4A5E78;
      --text:        #0D1D33;
      --text-light:  #617490;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: var(--text);
      background: var(--white);
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      line-height: 1.2;
    }

    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }

    .container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* ─── Nav ───────────────────────────────────────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      background: rgba(11, 26, 47, 0.94);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      transition: background 0.3s;
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
      padding: 0 40px;
      max-width: 1440px;
      margin: 0 auto;
    }

    .nav-logo {
      display: flex;
      align-items: center;
    }

    /* DSA official logo SVG — white version for dark nav */
    .dsa-logo-nav {
      height: 42px;
      width: auto;
      display: block;
    }

    /* Footer logo — slightly larger */
    .dsa-logo-footer {
      height: 52px;
      width: auto;
      display: block;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
    }

    .nav-links a {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.78);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: white; }

    /* Current-page indicator — set at runtime by JS/dsa-chrome.js */
    .nav-links a.active { color: white; }

    .nav-cta {
      background: var(--blue);
      color: white !important;
      padding: 10px 22px;
      border-radius: 4px;
      font-weight: 600 !important;
      transition: background 0.2s !important;
    }

    .nav-cta:hover { background: var(--blue-bright) !important; }

    /* WatchPost wordmark used in-nav in place of the plain text link.
       Base height (13.2px) matches the nav text's cap-height at 14px Inter;
       +2px nudge added per request for a touch more visual weight.
       flex-shrink: 0 on the logo and its <li> keeps it locked at this
       size as the window narrows -- without it, the flex row compresses
       the image's width while its CSS height stays fixed, squashing the
       wordmark -- rather than letting it distort. It holds its size all
       the way down to the 820px breakpoint, where the row switches to
       the hamburger menu instead of continuing to compress. */
    .nav-watchpost-logo { height: 16.2px; width: auto; display: block; flex-shrink: 0; }
    .nav-links li:has(.nav-watchpost-logo) { flex-shrink: 0; }

    /* ─── Hero ──────────────────────────────────────────────── */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      background: var(--navy);
      overflow: hidden;
    }

    /* Animated geometric grid overlay — uses DSA brand blue (#1B4B9C) */
    .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(27, 75, 156, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 75, 156, 0.13) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.4) 70%, transparent 100%);
    }

    /* Gradient glow — tinted to brand palette */
    .hero-glow {
      position: absolute;
      top: -10%;
      right: -5%;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(30,174,212,0.16) 0%, rgba(27,75,156,0.10) 40%, transparent 70%);
      pointer-events: none;
    }

    .hero-glow-2 {
      position: absolute;
      bottom: 10%;
      left: -5%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(27,75,156,0.14) 0%, transparent 60%);
      pointer-events: none;
    }


    /* ─── Photographic Hero Background ─────────────────────── */
    /* Public-domain DoD imagery via DVIDS (dvidshub.net)       */

    .hero-bg-slides {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

    .hero-bg-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      animation: slide-fade 48s linear infinite;
    }
    .hero-bg-slide:nth-child(1) { animation-delay: -1.44s; }
    .hero-bg-slide:nth-child(2) { animation-delay:  8s; }
    .hero-bg-slide:nth-child(3) { animation-delay: 16s; }
    .hero-bg-slide:nth-child(4) { animation-delay: 24s; }
    .hero-bg-slide:nth-child(5) { animation-delay: 32s; }
    .hero-bg-slide:nth-child(6) { animation-delay: 40s; }

    @keyframes slide-fade {
      0%   { opacity: 0; }
      3%   { opacity: 1; }
      15%  { opacity: 1; }
      18%  { opacity: 0; }
      100% { opacity: 0; }
    }

    .slide-img {
      position: absolute;
      inset: -8%;
      background-size: cover;
      background-position: center;
    }

    /* Ken Burns — alternating zoom / pan directions per slide */
    .hero-bg-slide:nth-child(1) .slide-img { animation: kb-zi 16s ease-in-out alternate infinite; }
    .hero-bg-slide:nth-child(2) .slide-img { animation: kb-pl 16s ease-in-out alternate infinite; }
    .hero-bg-slide:nth-child(3) .slide-img { animation: kb-zo 16s ease-in-out alternate infinite; }
    .hero-bg-slide:nth-child(4) .slide-img { animation: kb-pr 16s ease-in-out alternate infinite; }
    .hero-bg-slide:nth-child(5) .slide-img { animation: kb-up 16s ease-in-out alternate infinite; }
    .hero-bg-slide:nth-child(6) .slide-img { animation: kb-pl 16s ease-in-out alternate infinite; }

    @keyframes kb-zi { from { transform: scale(1.00); } to { transform: scale(1.10); } }
    @keyframes kb-zo { from { transform: scale(1.10); } to { transform: scale(1.00); } }
    @keyframes kb-pl { from { transform: scale(1.07) translateX(0);   } to { transform: scale(1.07) translateX(-3%); } }
    @keyframes kb-pr { from { transform: scale(1.07) translateX(-3%); } to { transform: scale(1.07) translateX(0);   } }
    @keyframes kb-up { from { transform: scale(1.05) translateY(0);   } to { transform: scale(1.10) translateY(-2%); } }

    /* Cinematic overlay — left side darker for text legibility,
       right side lighter so imagery bleeds through the stats panel */
    .hero-bg-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(to right,
          rgba(11,26,47,0.92) 0%,
          rgba(11,26,47,0.80) 40%,
          rgba(11,26,47,0.58) 65%,
          rgba(11,26,47,0.42) 100%),
        linear-gradient(to bottom,
          rgba(11,26,47,0.35) 0%,
          transparent 18%,
          transparent 78%,
          rgba(11,26,47,0.55) 100%);
      pointer-events: none;
    }

    /* Grid overlay — lighter, sits above photo at z-index 2 */
    .hero-grid {
      z-index: 2 !important;
      opacity: 0.28 !important;
      animation: none !important;
    }

    /* Slide attribution badge */
    .hero-credit {
      position: absolute;
      bottom: 12px;
      right: 16px;
      z-index: 3;
      font-size: 9px;
      color: rgba(255,255,255,0.35);
      letter-spacing: 0.04em;
      pointer-events: none;
    }

    /* Reduced motion — freeze on first slide, no Ken Burns */
    @media (prefers-reduced-motion: reduce) {
      .hero-bg-slide { animation: none; opacity: 0; }
      .hero-bg-slide:nth-child(1) { opacity: 1; }
      .slide-img { animation: none !important; }
    }


    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 1280px;
      margin: 0 auto;
      padding: 120px 40px 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      width: 100%;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
      margin-bottom: 24px;
    }

    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 24px;
      height: 2px;
      background: var(--accent);
    }

    .hero h1 {
      font-size: clamp(38px, 5vw, 64px);
      font-weight: 800;
      color: white;
      line-height: 1.08;
      margin-bottom: 24px;
      letter-spacing: -0.02em;
    }

    .hero h1 .highlight {
      color: var(--accent);
    }

    .hero-sub {
      font-size: 18px;
      line-height: 1.7;
      color: rgba(255,255,255,0.65);
      margin-bottom: 40px;
      max-width: 520px;
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--blue);
      color: white;
      padding: 15px 30px;
      border-radius: 4px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: background 0.2s, transform 0.15s;
    }

    .btn-primary:hover { background: var(--blue-bright); transform: translateY(-1px); }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1.5px solid rgba(255,255,255,0.35);
      color: white;
      padding: 15px 30px;
      border-radius: 4px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: border-color 0.2s, background 0.2s;
    }

    .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.06); }

    /* Hero right panel — stats card */
    .hero-panel {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      padding: 40px;
      backdrop-filter: blur(8px);
    }

    .hero-panel-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
      margin-bottom: 28px;
    }

    .hero-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }

    .hero-stat {
      border-left: 2px solid var(--blue);
      padding-left: 16px;
    }

    .hero-stat-num {
      font-family: 'Montserrat', sans-serif;
      font-size: 36px;
      font-weight: 800;
      color: white;
      line-height: 1;
      margin-bottom: 6px;
    }

    .hero-stat-num span { color: var(--accent); font-size: 22px; }

    .hero-stat-label {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      line-height: 1.4;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 32px;
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(27,95,173,0.25);
      border: 1px solid rgba(27,95,173,0.4);
      color: rgba(255,255,255,0.8);
      padding: 6px 14px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 500;
    }

    .hero-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* Scroll indicator */
    .hero-scroll {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,0.35);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .scroll-mouse {
      width: 22px;
      height: 36px;
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 11px;
      position: relative;
    }

    .scroll-wheel {
      width: 3px;
      height: 8px;
      background: var(--accent);
      border-radius: 2px;
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      animation: scroll-pulse 2s ease-in-out infinite;
    }

    @keyframes scroll-pulse {
      0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
      50% { opacity: 0.3; transform: translateX(-50%) translateY(6px); }
    }

    /* ─── Markets Strip ─────────────────────────────────────── */
    .markets-strip {
      background: var(--navy-mid);
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .markets-strip-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 40px;
      display: flex;
      align-items: stretch;
    }

    .market-tab {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 22px 24px;
      border-right: 1px solid rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.55);
      font-size: 13px;
      font-weight: 500;
      cursor: default;
      transition: background 0.2s, color 0.2s;
      letter-spacing: 0.01em;
    }

    .market-tab:first-child { border-left: 1px solid rgba(255,255,255,0.06); }
    .market-tab:hover { background: rgba(255,255,255,0.04); color: white; }

    .market-tab svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      opacity: 0.6;
    }

    .market-tab:hover svg { opacity: 1; }

    /* ─── Sticky in-page section nav (scrollspy) ────────────────
       Promoted from capabilities.html's original page-local styles.
       Shared by capabilities.html (Mission Support / Enterprise IT /
       Data Science / CIP) and who-we-serve.html (Department of War /
       Intelligence Community / Federal Civilian / Critical
       Infrastructure). The active-state JS lives in
       JS/dsa_interactive.js. */
    .v2-capnav {
      position: sticky; top: 72px; z-index: 900;
      background: rgba(255,255,255,0.96);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--gray-100);
    }
    .v2-capnav-inner {
      display: flex; gap: 6px; overflow-x: auto;
      padding: 10px 0; scrollbar-width: none;
    }
    .v2-capnav-inner::-webkit-scrollbar { display: none; }
    .v2-capnav a {
      display: inline-flex; align-items: center; gap: 9px;
      min-height: 44px; padding: 8px 18px; border-radius: 6px;
      font-size: 13px; font-weight: 600; color: var(--gray-600);
      white-space: nowrap; transition: background 0.2s, color 0.2s;
    }
    .v2-capnav a .n { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
    .v2-capnav a:hover { background: var(--off-white); color: var(--text); }
    .v2-capnav a.active { background: var(--navy); color: white; }
    .v2-capnav a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

    /* Scroll offset so anchor/scrollspy navigation via .v2-capnav
       doesn't land content under the sticky bar + fixed site nav.
       capabilities.html's own sections get this via the .v2-cap class
       already defined on that page; who-we-serve.html's sections use
       varied section classes (section / section-dark / etc.), so it's
       scoped here by ID instead. */
    #defense, #intelligence, #federal-civilian, #critical-infrastructure {
      scroll-margin-top: 150px;
    }

    @media (prefers-reduced-motion: reduce) {
      .v2-capnav a { transition: none; }
    }

    /* ─── Intro Section ─────────────────────────────────────── */
    .intro {
      background: var(--white);
      padding: 100px 0;
    }

    .intro-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: center;
    }

    .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--blue);
      margin-bottom: 20px;
    }

    .section-eyebrow::before {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      background: var(--blue);
    }

    .intro h2 {
      font-size: clamp(28px, 3.5vw, 44px);
      color: var(--text);
      margin-bottom: 24px;
      letter-spacing: -0.02em;
    }

    .intro p {
      font-size: 16px;
      color: var(--text-light);
      line-height: 1.8;
      margin-bottom: 16px;
    }

    .intro p:last-of-type { margin-bottom: 36px; }

    .link-arrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--blue);
      font-weight: 600;
      font-size: 15px;
      transition: gap 0.2s;
    }

    .link-arrow:hover { gap: 12px; }

    .link-arrow::after {
      content: '→';
      font-size: 16px;
    }

    .intro-values {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .value-card {
      background: var(--off-white);
      border-radius: 8px;
      padding: 28px 24px;
      border-left: 3px solid var(--blue);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .value-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(27,95,173,0.1);
    }

    .value-card h4 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }

    .value-card p {
      font-size: 13px;
      color: var(--text-light);
      line-height: 1.6;
      margin: 0;
    }

    /* ─── Capabilities Grid ──────────────────────────────────── */
    .capabilities {
      background: var(--off-white);
      padding: 100px 0;
    }

    .section-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 64px;
      padding: 0 40px;
    }

    .section-header h2 {
      font-size: clamp(28px, 3.5vw, 44px);
      color: var(--text);
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .section-header p {
      font-size: 17px;
      color: var(--text-light);
      line-height: 1.7;
    }

    .cap-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .cap-card {
      background: white;
      border: 1px solid var(--gray-100);
      padding: 40px 32px;
      transition: background 0.25s, border-color 0.25s, transform 0.25s;
      cursor: default;
      position: relative;
      overflow: hidden;
    }

    .cap-card::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: var(--blue);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s;
    }

    .cap-card:hover::before { transform: scaleX(1); }

    .cap-card:hover {
      background: var(--navy);
      border-color: var(--navy);
      transform: translateY(-4px);
      z-index: 2;
    }

    .cap-card:hover .cap-icon { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.15); }
    .cap-card:hover .cap-icon svg { stroke: white; }
    .cap-card:hover .cap-title { color: white; }
    .cap-card:hover .cap-desc { color: rgba(255,255,255,0.6); }
    .cap-card:hover .cap-link { color: var(--accent); }

    /* Capabilities page markup variants */
    .cap-card:hover .cap-card-icon { background: var(--navy); border-radius: 10px; }
    .cap-card:hover .cap-card-icon svg { stroke: white; }
    .cap-card:hover h3 { color: white; }
    .cap-card:hover p { color: rgba(255,255,255,0.6); }
    .cap-card:hover .link-arrow { color: var(--accent); }

    .cap-card h3,
    .cap-card p,
    .cap-card .link-arrow,
    .cap-card .cap-card-icon { transition: color 0.25s, background 0.25s; }
    .cap-card .cap-card-icon svg { transition: stroke 0.25s; }

    .cap-icon {
      width: 52px;
      height: 52px;
      background: var(--off-white);
      border: 1px solid var(--gray-100);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      transition: background 0.25s, border-color 0.25s;
    }

    .cap-icon svg {
      width: 24px;
      height: 24px;
      stroke: var(--blue);
      stroke-width: 1.75;
      fill: none;
      transition: stroke 0.25s;
    }

    .cap-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 12px;
      transition: color 0.25s;
    }

    .cap-desc {
      font-size: 14px;
      color: var(--text-light);
      line-height: 1.7;
      margin-bottom: 24px;
      transition: color 0.25s;
    }

    .cap-link {
      font-size: 13px;
      font-weight: 600;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color 0.25s;
    }

    /* ─── Proof Banner ──────────────────────────────────────── */
    .proof {
      background: var(--navy);
      padding: 80px 0;
      position: relative;
      overflow: hidden;
    }

    .proof::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(27, 75, 156, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 75, 156, 0.08) 1px, transparent 1px);
      background-size: 48px 48px;
    }

    .proof-inner {
      position: relative;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .proof-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 52px;
    }

    .proof-header h2 {
      font-size: clamp(24px, 3vw, 38px);
      color: white;
      letter-spacing: -0.02em;
      max-width: 480px;
    }

    .proof-header a {
      color: var(--accent);
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      white-space: nowrap;
      margin-bottom: 4px;
    }

    .proof-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }

    .proof-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      padding: 36px 32px;
      transition: background 0.2s;
    }

    .proof-card:hover { background: rgba(255,255,255,0.08); }

    .proof-market {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
      margin-bottom: 14px;
    }

    .proof-card h3 {
      font-size: 18px;
      color: white;
      font-weight: 700;
      margin-bottom: 12px;
      line-height: 1.3;
    }

    .proof-card p {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
      line-height: 1.7;
      margin-bottom: 20px;
    }

    .proof-link {
      font-size: 13px;
      font-weight: 600;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* ─── Differentiators ───────────────────────────────────── */
    .why {
      background: white;
      padding: 100px 0;
    }

    .why-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .why-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 80px;
      align-items: start;
      margin-top: 60px;
    }

    .why-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .why-item {
      display: flex;
      gap: 20px;
      padding: 28px 0;
      border-bottom: 1px solid var(--gray-100);
      align-items: flex-start;
    }

    .why-item:first-child { border-top: 1px solid var(--gray-100); }

    .why-num {
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      font-weight: 800;
      color: var(--blue);
      width: 28px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .why-content h3 {
      font-size: 18px;
      color: var(--text);
      margin-bottom: 8px;
    }

    .why-content p {
      font-size: 14px;
      color: var(--text-light);
      line-height: 1.7;
    }

    .why-highlight {
      background: var(--navy);
      border-radius: 12px;
      padding: 52px 44px;
      position: sticky;
      top: 100px;
    }

    .why-highlight-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
      margin-bottom: 24px;
    }

    .why-highlight h3 {
      font-size: 28px;
      color: white;
      line-height: 1.3;
      margin-bottom: 20px;
    }

    .why-highlight p {
      font-size: 15px;
      color: rgba(255,255,255,0.6);
      line-height: 1.8;
      margin-bottom: 36px;
    }

    .vet-badge {
      display: flex;
      align-items: center;
      gap: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 18px 20px;
      margin-bottom: 16px;
    }

    .vet-badge-icon {
      width: 40px;
      height: 40px;
      background: var(--blue);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .vet-badge-icon svg {
      width: 22px;
      height: 22px;
      fill: white;
    }

    .vet-badge-text {
      font-size: 13px;
      color: rgba(255,255,255,0.7);
      line-height: 1.5;
    }

    .vet-badge-text strong {
      display: block;
      color: white;
      font-size: 14px;
      margin-bottom: 2px;
    }

    /* ─── News Bar ──────────────────────────────────────────── */
    .news {
      background: var(--off-white);
      padding: 80px 0;
    }

    .news-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .news-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40px;
    }

    .news-header h2 {
      font-size: 28px;
      color: var(--text);
    }

    .news-header a {
      font-size: 14px;
      font-weight: 600;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    .news-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .news-card {
      display: block; /* cards may render as <a> elements (see dsa-news.js) */
      background: white;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--gray-100);
      transition: box-shadow 0.2s, transform 0.2s;
    }

    .news-card:hover {
      box-shadow: 0 12px 40px rgba(11,26,47,0.1);
      transform: translateY(-3px);
    }

    .news-tag-bar {
      height: 3px;
      background: var(--blue);
    }

    .news-body {
      padding: 28px 28px 24px;
    }

    .news-date {
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 10px;
    }

    .news-card h3 {
      font-size: 16px;
      color: var(--text);
      line-height: 1.4;
      margin-bottom: 12px;
    }

    .news-card p {
      font-size: 13px;
      color: var(--text-light);
      line-height: 1.7;
      margin-bottom: 20px;
    }

    /* ─── Careers CTA ────────────────────────────────────────── */
    .careers {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
      padding: 100px 0;
      position: relative;
      overflow: hidden;
    }

    .careers::before {
      content: '';
      position: absolute;
      top: 50%;
      right: -10%;
      transform: translateY(-50%);
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(30,174,212,0.12) 0%, transparent 60%);
      pointer-events: none;
    }

    .careers-inner {
      position: relative;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 60px;
      align-items: center;
    }

    .careers h2 {
      font-size: clamp(28px, 3.5vw, 46px);
      color: white;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .careers p {
      font-size: 17px;
      color: rgba(255,255,255,0.6);
      line-height: 1.7;
      max-width: 560px;
    }

    .careers-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex-shrink: 0;
    }

    /* ─── Locations / Contact ────────────────────────────────── */
    .locations {
      background: white;
      padding: 80px 0;
    }

    .locations-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .loc-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 48px;
    }

    .loc-card {
      padding: 24px;
      border: 1px solid var(--gray-100);
      border-radius: 8px;
    }

    .loc-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--blue);
      margin-bottom: 10px;
    }

    .loc-card h4 {
      font-size: 15px;
      color: var(--text);
      margin-bottom: 6px;
    }

    .loc-card p {
      font-size: 13px;
      color: var(--text-light);
      line-height: 1.6;
    }

    /* ─── Footer ─────────────────────────────────────────────── */
    footer {
      background: var(--navy);
      padding: 64px 0 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    .footer-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 48px;
    }

    .footer-brand p {
      font-size: 14px;
      color: rgba(255,255,255,0.45);
      line-height: 1.7;
      margin-top: 20px;
      max-width: 280px;
    }

    .footer-col h5 {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.35);
      margin-bottom: 18px;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-col a {
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      transition: color 0.2s;
    }

    .footer-col a:hover { color: white; }

    .footer-bottom {
      margin-top: 48px;
      padding: 20px 40px;
      border-top: 1px solid rgba(255,255,255,0.06);
      max-width: 1440px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .footer-bottom p {
      font-size: 13px;
      color: rgba(255,255,255,0.3);
    }

    .footer-socials {
      display: flex;
      gap: 16px;
    }

    .footer-social-link {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.4);
      font-size: 14px;
      transition: border-color 0.2s, color 0.2s;
    }

    .footer-social-link:hover { border-color: rgba(255,255,255,0.4); color: white; }

    /* ─── DSA Logo — light background variant ───────────────── */
    /* Used when logo appears on white/light surfaces (future pages) */
    .dsa-logo-light .dsa-letters { fill: var(--brand-blue); }
    .dsa-logo-light .dsa-tagline { fill: #5F6368; }

    /* ─── Responsive ─────────────────────────────────────────── */
    @media (max-width: 1100px) {
      .cap-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
    }

    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr; padding: 100px 24px 60px; gap: 48px; }
      .hero-panel { display: none; }
      .intro-inner { grid-template-columns: 1fr; gap: 48px; }
      .why-grid { grid-template-columns: 1fr; }
      .why-highlight { position: static; }
      .proof-grid { grid-template-columns: 1fr; }
      .news-row { grid-template-columns: 1fr; }
      .careers-inner { grid-template-columns: 1fr; }
      .loc-grid { grid-template-columns: 1fr 1fr; }
      .markets-strip-inner { flex-wrap: wrap; }
      .market-tab { min-width: 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
    }

    @media (max-width: 640px) {
      /* .nav-links no longer hidden here — mobile menu handled by
         .nav-toggle / nav.nav-open rules at the end of this file */
      .hero h1 { font-size: 34px; }
      .cap-grid { grid-template-columns: 1fr; }
      .hero-stats { grid-template-columns: 1fr 1fr; }
      .intro-values { grid-template-columns: 1fr; }
      .loc-grid { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr 1fr; }
      .proof-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    }

/* ─── Inner Page Shared Styles ──────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #0B1A2F 0%, #1A3357 100%);
  padding: 140px 0 72px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(27,75,156,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(27,75,156,0.10) 1px, transparent 1px);
  background-size: 60px 60px;
}
.page-hero-glow {
  position: absolute; top: -20%; right: -5%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(30,174,212,0.14) 0%, rgba(27,75,156,0.08) 40%, transparent 70%);
  pointer-events: none;
}
.page-hero-content { position: relative; z-index: 1; }
.page-hero-label {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: #1EAED4; margin-bottom: 16px;
}
.page-hero-content h1 {
  font-size: clamp(34px, 5vw, 64px); font-weight: 800; color: white;
  letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 20px; max-width: 700px;
}
.page-hero-content p { font-size: 18px; color: rgba(255,255,255,0.65); line-height: 1.7; max-width: 560px; }
.section { padding: 80px 0; }
.section-alt { background: #F4F6F9; padding: 80px 0; }
.section-dark { background: #0B1A2F; padding: 80px 0; }
.section-tint-blue { background: #EAF1FC; padding: 80px 0; }

/* WatchPost sub-navigation (Services / Events / Outcomes / Resources) —
   sticky secondary nav shown on watchpost.html and every page nested
   under it, so visitors can jump between the four WatchPost sections
   from anywhere in the product. Dark background + cyan active-state
   underline deliberately mirror the site's primary <nav> so this reads
   as navigation, not a content divider — replaces the old #F4F6F9
   "Quick Links" strip, which was too easy to mistake for a footnote. */
.wp-subnav { position: sticky; top: 72px; z-index: 950; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.wp-subnav-inner { display: flex; justify-content: center; flex-wrap: wrap; }
.wp-subnav-link { padding: 16px 30px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.62); text-decoration: none; border-right: 1px solid rgba(255,255,255,0.08); position: relative; transition: color 0.2s; }
.wp-subnav-link:last-child { border-right: none; }
.wp-subnav-link:hover { color: #FFFFFF; }
.wp-subnav-link.active { color: var(--accent); }
.wp-subnav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }
@media (max-width: 640px) {
  .wp-subnav-link { padding: 13px 16px; font-size: 11px; }
}

/* Cap blocks (detail view for each capability) */
.cap-block { padding: 80px 0; border-bottom: 1px solid #EDF0F4; }
.cap-block:last-child { border-bottom: none; }
.cap-block-inner { display: grid; grid-template-columns: 340px 1fr; gap: 80px; align-items: start; }
.cap-block-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #1EAED4; margin-bottom: 12px; }
.cap-block h2 { font-size: clamp(26px, 3vw, 38px); color: #0D1D33; margin-bottom: 20px; letter-spacing: -0.02em; }
.cap-block-lead { font-size: 17px; color: #0D1D33; line-height: 1.7; margin-bottom: 16px; }
.cap-block p { font-size: 15px; color: #617490; line-height: 1.8; margin-bottom: 12px; }
.cap-block-bullets { list-style: none; margin: 20px 0; }
.cap-block-bullets li { font-size: 14px; color: #617490; padding: 7px 0 7px 20px; position: relative; border-bottom: 1px solid #EDF0F4; line-height: 1.5; }
.cap-block-bullets li::before { content: '→'; position: absolute; left: 0; color: #1EAED4; font-size: 12px; }

/* WatchPost section */
/* Lightened from a solid #122540 panel to white on 2026-07-17 — it sat
   directly under the equally-dark .page-hero with only a thin quick-links
   strip between them, reading as one long dark block at the top of the
   page. White here breaks that up and lets the card grid read as content
   cards with brand-blue accents instead of pale text floating on navy. */
.watchpost-section { background: white; padding: 100px 0; position: relative; overflow: hidden; }
.watchpost-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #1EAED4; margin-bottom: 8px; }
.watchpost-section .watchpost-eyebrow { color: var(--blue); }
.watchpost-section .section-header h2 { color: var(--text); }
.watchpost-section .section-header p { color: var(--gray-600); }
.watchpost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 52px; background: var(--gray-100); border: 1px solid var(--gray-100); }
.watchpost-card { background: white; border: none; padding: 32px 28px; transition: background 0.2s, box-shadow 0.2s; position: relative; }
.watchpost-card:hover { background: var(--off-white); box-shadow: inset 0 0 0 1px var(--gray-100); z-index: 1; }
.watchpost-card-icon { width: 44px; height: 44px; background: rgba(30,174,212,0.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 20px; }
.watchpost-card h3 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; line-height: 1.3; }
.watchpost-card p { font-size: 13px; color: var(--gray-600); line-height: 1.7; margin: 0; }

/* Case studies */
.case-studies { padding: 80px 0; background: #F4F6F9; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.case-card { background: white; border-radius: 8px; padding: 36px 32px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-top: 3px solid #1EAED4; display: flex; flex-direction: column; gap: 20px; }
.case-stat { font-size: 42px; font-weight: 800; font-family: 'Montserrat', sans-serif; color: #002864; line-height: 1; }
.case-stat-label { font-size: 13px; color: #617490; margin-top: 4px; font-weight: 500; }
.case-quote { font-size: 14px; color: #617490; line-height: 1.75; font-style: italic; flex: 1; }
.case-attribution { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #0D1D33; }
.case-org { font-size: 12px; color: #617490; font-weight: 400; }

/* Clients */
.clients-section { padding: 60px 0; border-top: 1px solid #EDF0F4; }
.clients-group { margin-bottom: 28px; }
.clients-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8A9BB0; margin-bottom: 12px; }
.clients-list { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; }
.clients-list li { font-size: 14px; color: #617490; font-weight: 500; }

/* ─── Trusted Sectors + CIP Video ─────────────────────────── */
/* Tinted (rather than plain white) so the light stretch in the middle of
   watchpost.html — quick-links strip, solutions grid, case studies, this
   section, Security-First Architecture — doesn't read as one flat block;
   this gives it a faint blue cast between two off-white neighbors. */
.trusted-section { padding: 90px 0; border-top: 1px solid var(--gray-100); background: #EAF1FC; }
.trusted-section .watchpost-eyebrow { color: var(--blue); }
.trusted-layout { display: grid; grid-template-columns: 6fr 6fr; gap: 48px; align-items: start; margin-top: 48px; }

.trusted-video { position: sticky; top: 100px; }
.video-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: var(--navy);
  box-shadow: 0 12px 40px rgba(11,26,47,0.18);
}
/* Trigger button fills the frame only while the poster/play-button
   facade is showing; the click handler replaces it with a plain
   <iframe> (not another button), so the embedded player's own
   controls never end up nested inside a <button> that could swallow
   clicks meant for them — same fix applied to careers.html's video. */
.video-trigger {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; border: 0; padding: 0; margin: 0; appearance: none; cursor: pointer;
}
.video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.video-trigger:hover img, .video-trigger:focus-visible img { transform: scale(1.04); }
.video-trigger:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(11,26,47,0.55); border: 2px solid rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.video-trigger:hover .video-play-btn, .video-trigger:focus-visible .video-play-btn { background: var(--accent); transform: translate(-50%, -50%) scale(1.08); }
.video-play-btn svg { width: 22px; height: 22px; fill: white; margin-left: 2px; }
.video-caption { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 16px 18px; background: var(--off-white); border-radius: 10px; border-left: 3px solid var(--accent); }
.video-caption-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: white; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.video-caption-name { font-size: 14px; font-weight: 700; color: var(--text); }
.video-caption-title { font-size: 12.5px; color: var(--text-light); margin-top: 2px; }

.trusted-stats { display: flex; margin-top: 20px; background: var(--off-white); border: 1px solid var(--gray-100); border-radius: 10px; overflow: hidden; }
.trusted-stat { flex: 1; padding: 18px 16px; text-align: center; }
.trusted-stat + .trusted-stat { border-left: 1px solid var(--gray-100); }
.trusted-stat-num { font-size: 26px; font-weight: 800; font-family: 'Montserrat', sans-serif; color: var(--blue); line-height: 1; }
.trusted-stat-label { font-size: 12px; color: var(--text-light); margin-top: 6px; font-weight: 500; line-height: 1.4; }
.trusted-more-wrap { text-align: center; margin-top: 18px; }

.trusted-sectors { display: grid; grid-template-columns: 1fr; gap: 16px; }
.sector-card { background: white; border: 1px solid var(--gray-100); border-top: 3px solid var(--blue); border-radius: 12px; padding: 20px 24px 22px; box-shadow: 0 2px 14px rgba(11,26,47,0.05); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.sector-card:hover { border-color: rgba(30,174,212,0.4); border-top-color: var(--blue); box-shadow: 0 10px 28px rgba(11,26,47,0.1); transform: translateY(-2px); }
.sector-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.sector-card-media { width: 60px; height: 60px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, #EAF1FC 0%, #F4F8FE 60%, #FFFFFF 100%); box-shadow: inset 0 0 0 1px rgba(27,75,156,0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sector-card-media svg { width: 30px; height: 30px; color: var(--blue); flex-shrink: 0; }
.sector-card:hover .sector-card-media { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(27,75,156,0.18); }
.sector-card-header h3 { font-size: 16px; color: var(--text); margin-bottom: 2px; }
.sector-count { font-size: 12px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: 0.06em; }
.sector-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.sector-chips li { font-size: 13px; font-weight: 500; color: var(--gray-600); background: var(--off-white); border: 1px solid var(--gray-100); border-radius: 20px; padding: 7px 14px; }

@media (prefers-reduced-motion: reduce) {
  .video-frame img, .video-play-btn, .sector-card, .sector-card-media { transition: none !important; }
}

/* About page */
.about-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.about-two-col h2 { font-size: clamp(26px, 3vw, 38px); color: #0D1D33; margin-bottom: 20px; letter-spacing: -0.02em; }
.about-two-col p { font-size: 16px; color: #617490; line-height: 1.8; margin-bottom: 16px; }

.security-intro { margin-bottom: 40px; }
.security-intro h2 { font-size: clamp(26px, 3vw, 38px); color: var(--text); margin-bottom: 16px; letter-spacing: -0.02em; }
.security-intro p { font-size: 16px; color: var(--text-light); line-height: 1.8; max-width: 800px; margin-bottom: 12px; }

.arch-highlight-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 14px; }

.security-features { background: var(--navy); border-radius: 12px; padding: 40px; }
.security-features-lead { margin-bottom: 28px; }
.security-features-lead h3 { font-size: clamp(24px, 2.6vw, 30px); color: white; line-height: 1.3; margin-bottom: 12px; letter-spacing: -0.01em; }
.security-features-lead p { font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.8; max-width: 640px; }
.security-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.security-features-grid .vet-badge { margin-bottom: 0; align-items: flex-start; }
.fundamentals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.fundamental-card { background: white; border-radius: 8px; padding: 24px 20px; border-left: 3px solid #1EAED4; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.fundamental-num { font-size: 11px; font-weight: 700; color: #1EAED4; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.fundamental-card h4 { font-size: 14px; font-weight: 700; color: #0D1D33; line-height: 1.4; }

/* Careers page */
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.benefit-card { background: white; border-radius: 8px; padding: 28px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-top: 3px solid #1B4B9C; }
.benefit-icon { font-size: 28px; margin-bottom: 16px; line-height: 1; }
.benefit-card h3 { font-size: 15px; font-weight: 700; color: #0D1D33; margin-bottom: 8px; }
.benefit-card p { font-size: 13px; color: #617490; line-height: 1.6; margin: 0; }
.culture-fundamentals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; }
.culture-card { background: #F4F6F9; border-radius: 8px; padding: 28px 24px; border-left: 3px solid #1B4B9C; }
.culture-card .fund-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #1EAED4; margin-bottom: 8px; }
.culture-card h4 { font-size: 15px; font-weight: 700; color: #0D1D33; margin-bottom: 8px; }
.culture-card p { font-size: 13px; color: #617490; line-height: 1.6; margin: 0; }

/* Contact page */
.office-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.office-card { background: white; border-radius: 8px; padding: 36px 32px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-top: 3px solid #002864; }
.office-card h3 { font-size: 18px; font-weight: 700; color: #0D1D33; margin-bottom: 16px; }
.office-card address { font-style: normal; font-size: 15px; color: #617490; line-height: 1.8; margin-bottom: 16px; }
.office-card .phone { font-size: 15px; font-weight: 600; color: #1B4B9C; }
.contact-form-wrap { background: white; border-radius: 12px; padding: 48px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #0D1D33; margin-bottom: 6px; letter-spacing: 0.02em; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid #D8DEE8; border-radius: 6px; font-size: 15px; font-family: 'Inter', sans-serif; color: #0D1D33; background: #F4F6F9; transition: border-color 0.2s, box-shadow 0.2s; outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #1B4B9C; box-shadow: 0 0 0 3px rgba(27,75,156,0.08); background: white; }
.form-group textarea { resize: vertical; min-height: 120px; }
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-info h2 { font-size: clamp(26px, 3vw, 38px); color: #0D1D33; letter-spacing: -0.02em; margin-bottom: 20px; }
.contact-info p { font-size: 16px; color: #617490; line-height: 1.8; margin-bottom: 32px; }

/* Inner page responsive */
@media (max-width: 900px) {
  .cap-block-inner { grid-template-columns: 1fr; gap: 40px; }
  .watchpost-grid { grid-template-columns: 1fr 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .about-two-col { grid-template-columns: 1fr; gap: 40px; }
  .security-features-grid { grid-template-columns: 1fr; }
  .fundamentals-grid { grid-template-columns: 1fr 1fr; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .culture-fundamentals { grid-template-columns: 1fr; }
  .office-grid { grid-template-columns: 1fr; }
  .contact-split { grid-template-columns: 1fr; gap: 48px; }
  .trusted-layout { grid-template-columns: 1fr; gap: 40px; }
  .trusted-video { position: static; }
}
@media (max-width: 640px) {
  .watchpost-grid { grid-template-columns: 1fr; }
  .fundamentals-grid { grid-template-columns: 1fr; }
  .trusted-stats { flex-direction: column; }
  .trusted-stat + .trusted-stat { border-left: 0; border-top: 1px solid var(--gray-100); }
  .benefit-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 28px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   Tier 1 Interactive Enhancements
   Paired with JS/dsa_interactive.js — see that file for behavior.
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile navigation (hamburger) ─────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}

nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(11, 26, 47, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 8px 28px 24px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  }

  nav.nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-links li { width: 100%; }

  .nav-links a {
    display: block;
    padding: 15px 4px;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .nav-links .nav-cta {
    margin-top: 16px;
    text-align: center;
    border-bottom: none;
    border-radius: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
  .nav-toggle span { transition: none; }
}

/* ── Scroll-triggered reveals ──────────────────────────────── */
/* .js-reveal is added by JS only — content is fully visible without it */
.js-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Hero background video ─────────────────────────────────── */
/* Invisible until it actually plays; slideshow remains the fallback.
   The video renders in the SAME 8%-overscanned box as .slide-img
   (inset: -8%) — if it rendered exact-fit while the slides render
   oversized for the Ken Burns effect, the crossfade between them
   would show the imagery jumping to a different scale/position. */
.hero-video {
  position: absolute;
  left: -8%;
  top: -8%;
  z-index: 0;
  width: 116%;
  height: 116%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero.video-playing .hero-video { opacity: 1; }
.hero.video-playing .hero-bg-slides { opacity: 0; transition: opacity 1.2s ease; }

/* Once the video owns the hero, freeze the hidden slideshow so its
   Ken Burns zoom isn't still compositing (and moving) underneath */
.hero.video-playing .hero-bg-slide,
.hero.video-playing .slide-img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* ── Card imagery + richer hover states ────────────────────── */
/* Proof cards — full-bleed image header inside 36/32 padding */
.proof-media {
  margin: -36px -32px 24px;
  height: 170px;
  overflow: hidden;
}

.proof-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transform: scale(1.02);
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.proof-card { transition: background 0.2s, transform 0.25s, border-color 0.25s; }

.proof-card:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 174, 212, 0.35);
}

.proof-card:hover .proof-media img { transform: scale(1.08); opacity: 1; }

.proof-link { transition: gap 0.2s; }
.proof-card:hover .proof-link { gap: 10px; }

/* News cards — image header */
.news-media {
  height: 170px;
  overflow: hidden;
}

.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-media img { transform: scale(1.06); }

/* Arrow-shift on capability links; lift on location cards */
.cap-link { transition: color 0.25s, gap 0.2s; }
.cap-card:hover .cap-link { gap: 10px; }

.loc-card { transition: transform 0.2s, box-shadow 0.2s; }
.loc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(11, 26, 47, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .proof-card, .proof-media img, .news-media img, .loc-card { transition: none; }
  .proof-card:hover, .loc-card:hover { transform: none; }
  .proof-card:hover .proof-media img, .news-card:hover .news-media img { transform: none; }
}

/* ── Employee-owner testimonial carousel (Careers) ─────────── */
.eo-carousel {
  max-width: 820px;
  margin: 48px auto 0;
  position: relative;
  background: white;
  border-radius: 12px;
  border-top: 3px solid var(--blue);
  padding: 44px 52px 36px;
  box-shadow: 0 4px 24px rgba(11, 26, 47, 0.07);
}

.eo-slide { display: none; margin: 0; }
.eo-slide.is-active { display: block; animation: eo-fade 0.5s ease; }

@keyframes eo-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.eo-slide blockquote {
  font-size: 19px;
  line-height: 1.75;
  color: var(--text);
  font-style: italic;
  margin: 0 0 24px;
}

.eo-slide figcaption strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
}

.eo-slide figcaption span {
  font-size: 13px;
  color: var(--text-light);
}

.eo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-100);
}

.eo-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #D8DEE8;
  border-radius: 50%;
  color: var(--blue);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.eo-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}

.eo-dots { display: flex; gap: 8px; }

.eo-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #D8DEE8;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.eo-dot.is-active {
  background: var(--blue);
  transform: scale(1.3);
}

@media (max-width: 640px) {
  .eo-carousel { padding: 28px 24px; }
  .eo-slide blockquote { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .eo-slide.is-active { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Nav dropdown — "Who We Are" submenu (injected by dsa_interactive.js)
   ═══════════════════════════════════════════════════════════════ */
.nav-drop { position: relative; }

.nav-drop > a::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
}

.nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 190px;
  background: rgba(11, 26, 47, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.nav-drop:hover .nav-sub,
.nav-drop:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-sub a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.nav-sub a:hover { background: rgba(255,255,255,0.07); }

@media (max-width: 820px) {
  .nav-drop > a::after { display: none; }
  .nav-sub {
    position: static;
    transform: none;
    background: transparent;
    border: none;
    backdrop-filter: none;
    padding: 0 0 0 18px;
    min-width: 0;
    /* opacity/visibility intentionally NOT reset here. The collapsed
       .nav-links panel hides itself with opacity:0; visibility:hidden,
       and opacity:0 alone doesn't stop an element from being clicked —
       only visibility:hidden does. .nav-sub must keep inheriting that
       hidden visibility while the menu is closed, or these submenu
       links (Our History / The DSA Way / Our Leadership Team / Latest
       News / Who We Serve) sit invisibly on top of the page, fully
       clickable, on every page at this width, all the time — which is
       exactly what was sending taps elsewhere on openings.html. They
       become visible below, once nav.nav-open confirms the menu is
       actually open. */
  }
  .nav-sub a { padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }

  nav.nav-open .nav-sub {
    opacity: 1;
    visibility: visible;
  }

  /* The desktop hover rule below has higher specificity than the reset
     above and isn't width-scoped, so without this override, hovering
     the trigger link at mobile widths re-applies translateX(-50%) and
     shoves the (already-visible, statically-positioned) submenu off
     the left edge of the screen. */
  .nav-drop:hover .nav-sub,
  .nav-drop:focus-within .nav-sub {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) { .nav-sub { transition: none; } }

/* ═══════════════════════════════════════════════════════════════
   Partners page
   ═══════════════════════════════════════════════════════════════ */
/* Stat strip under hero — numbers animate via the shared counter JS */
.partner-stats {
  background: var(--navy-mid);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 44px 0;
}

.partner-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.p-stat { border-left: 2px solid var(--blue); padding-left: 18px; }

.p-stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
  margin-top: 6px;
}

/* Value bento grid — two featured differentiators + six supporting */
.vb-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.vb-card {
  grid-column: span 2;
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  padding: 32px 28px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.vb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(11, 26, 47, 0.10);
  border-color: rgba(30, 174, 212, 0.35);
}

.vb-featured {
  grid-column: span 3;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}

.vb-featured::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(30,174,212,0.16) 0%, transparent 65%);
  pointer-events: none;
}

.vb-icon {
  width: 48px;
  height: 48px;
  background: var(--off-white);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.vb-icon svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; }

.vb-featured .vb-icon { background: rgba(30,174,212,0.12); border-color: rgba(255,255,255,0.12); }
.vb-featured .vb-icon svg { stroke: var(--accent); }

.vb-kicker {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 10px;
}

.vb-card h3 { font-size: 17px; color: var(--text); margin-bottom: 10px; line-height: 1.3; }
.vb-card p { font-size: 14px; color: var(--text-light); line-height: 1.7; margin: 0; }

.vb-featured h3 { font-size: 21px; color: white; }
.vb-featured p { color: rgba(255,255,255,0.62); font-size: 15px; }

@media (max-width: 1100px) {
  .vb-featured { grid-column: span 6; }
  .vb-card { grid-column: span 3; }
}

@media (max-width: 640px) {
  .vb-card, .vb-featured { grid-column: span 6; }
  .partner-stats-inner { grid-template-columns: 1fr 1fr; }
}

/* Contract vehicle filter + grid */
.vehicle-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 36px 0 28px;
}

.vehicle-filter {
  padding: 9px 18px;
  min-height: 40px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  color: rgba(255,255,255,0.7);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.vehicle-filter:hover { border-color: var(--accent); color: white; }

.vehicle-filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy);
}

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.vehicle-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 26px;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.vehicle-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(30,174,212,0.4);
  transform: translateY(-2px);
}

.vehicle-card.is-hidden { display: none; }

.vehicle-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.vehicle-name { font-size: 15px; font-weight: 700; color: white; margin-bottom: 6px; }
.vehicle-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.55; }
.vehicle-award {
  margin-top: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* Contract vehicle cards become interactive toggles, expanding into a
   full-width detail panel with scope, facts, links, and contact info.
   Promoted from partners.html's original test-page markup; shared by
   partners.html and who-we-serve.html's Acquisition section. */
.vehicle-card[data-vehicle] {
  cursor: pointer;
  position: relative;
  padding-right: 54px;
}
.vehicle-card[data-vehicle]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Plus / close indicator */
.vc-toggle {
  position: absolute;
  top: 24px;
  right: 22px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  transition: border-color 0.25s, background 0.25s, transform 0.35s ease;
}
.vc-toggle::before,
.vc-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255,255,255,0.65);
  transition: background 0.25s;
}
.vc-toggle::before { width: 12px; height: 1.5px; transform: translate(-50%,-50%); }
.vc-toggle::after  { width: 1.5px; height: 12px; transform: translate(-50%,-50%); }
.vehicle-card:hover .vc-toggle { border-color: var(--accent); }
.vehicle-card.is-open .vc-toggle {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(45deg);
}
.vehicle-card.is-open .vc-toggle::before,
.vehicle-card.is-open .vc-toggle::after { background: var(--navy); }

.vehicle-card.is-open {
  background: rgba(30,174,212,0.09);
  border-color: rgba(30,174,212,0.55);
  transform: none;
}

/* Full-width detail panel injected into the grid */
.vehicle-detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
}
.vehicle-detail.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.vehicle-detail-inner { overflow: hidden; min-height: 0; }

/* Light gray panel (matches the gray sections used site-wide) so the
   detail view stands out against the dark section */
.vd-box {
  position: relative;
  background: #F4F6F9;
  border: 1px solid rgba(30,174,212,0.5);
  border-radius: 12px;
  padding: 32px 36px 26px;
  margin: 2px 0 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.vd-box .vehicle-tag { color: #1B4B9C; }

.vd-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid #D8DEE8;
  border-radius: 50%;
  color: #4A5E78;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.vd-close:hover { border-color: var(--accent); color: #0D1D33; }

.vd-head { margin-bottom: 18px; padding-right: 48px; }
.vd-head h3 {
  color: #0D1D33;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

.vd-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}

.vd-scope {
  font-size: 14.5px;
  line-height: 1.7;
  color: #4A5E78;
}

.vd-chip-label, .vd-facts h4 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1B4B9C;
  margin: 22px 0 10px;
}
.vd-facts h4 { margin-top: 0; }

.vd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-chip {
  font-size: 12px;
  font-weight: 600;
  color: #4A5E78;
  background: white;
  border: 1px solid #D8DEE8;
  border-radius: 100px;
  padding: 5px 13px;
  line-height: 1.4;
}

.vd-facts {
  background: white;
  border: 1px solid #EDF0F4;
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: 0 2px 14px rgba(11,26,47,0.05);
}
.vd-facts dl { margin: 0; }
.vd-fact-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #EDF0F4;
}
.vd-fact-row:last-child { border-bottom: none; }
.vd-fact-row dt {
  font-size: 12px;
  color: #8A9BB0;
  white-space: nowrap;
}
.vd-fact-row dd {
  font-size: 12.5px;
  font-weight: 600;
  color: #0D1D33;
  text-align: right;
  margin: 0;
}
.vd-fact-row dd.is-empty { color: #B6C2D2; font-weight: 400; }

.vd-links { margin-top: 16px; }
.vd-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1B4B9C;
  text-decoration: none;
  margin-right: 18px;
}
.vd-links a:hover { text-decoration: underline; }

.vd-note {
  margin-top: 20px;
  font-size: 13px;
  color: #6B7E96;
  font-style: italic;
}

.vd-contact {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #D8DEE8;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  font-size: 13px;
  color: #4A5E78;
}
.vd-contact a { color: #1B4B9C; text-decoration: none; font-weight: 600; }
.vd-contact a:hover { text-decoration: underline; }
.vd-contact-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A9BB0;
}

@media (max-width: 760px) {
  .vd-cols { grid-template-columns: 1fr; gap: 26px; }
  .vd-box { padding: 26px 22px 22px; }
}

/* Light-theme variant of the component above, used on who-we-serve.html's
   Acquisition section (a light "section" background) so it reads as a
   distinct market/audience context from partners.html's dark, cyan-accent
   treatment. Blue is this page's accent for general market segments; cyan
   is reserved for the Intelligence Community section. Scope everything to
   #acquisition-vehicles so partners.html is unaffected. */
#acquisition-vehicles .vehicle-filter {
  border-color: #D8DEE8;
  color: #4A5E78;
}
#acquisition-vehicles .vehicle-filter:hover { border-color: #1B4B9C; color: #0D1D33; }
#acquisition-vehicles .vehicle-filter.is-active {
  background: #1B4B9C;
  border-color: #1B4B9C;
  color: white;
}
#acquisition-vehicles .vehicle-card {
  background: white;
  border: 1px solid #E4E8EF;
}
#acquisition-vehicles .vehicle-card:hover {
  background: #F4F6F9;
  border-color: rgba(27,75,156,0.35);
}
#acquisition-vehicles .vc-toggle { border-color: #D8DEE8; }
#acquisition-vehicles .vehicle-card:hover .vc-toggle { border-color: #1B4B9C; }
#acquisition-vehicles .vc-toggle::before,
#acquisition-vehicles .vc-toggle::after { background: #8A9BB0; }
#acquisition-vehicles .vehicle-card.is-open {
  background: rgba(27,75,156,0.06);
  border-color: rgba(27,75,156,0.45);
}
#acquisition-vehicles .vehicle-card.is-open .vc-toggle {
  background: #1B4B9C;
  border-color: #1B4B9C;
}
#acquisition-vehicles .vehicle-card.is-open .vc-toggle::before,
#acquisition-vehicles .vehicle-card.is-open .vc-toggle::after { background: white; }
#acquisition-vehicles .vehicle-tag { color: #1B4B9C; }
#acquisition-vehicles .vehicle-name { color: #0D1D33; }
#acquisition-vehicles .vehicle-desc { color: #617490; }
#acquisition-vehicles .vehicle-award { color: #8A9BB0; }
#acquisition-vehicles .vd-box { border-color: rgba(27,75,156,0.35); }

/* ═══════════════════════════════════════════════════════════════
   Leadership page — photo-forward, warm, editorial
   ═══════════════════════════════════════════════════════════════ */
.lead-hero {
  background: linear-gradient(135deg, #0B1A2F 0%, #1A3357 100%);
  padding: 150px 0 72px;
  position: relative;
  overflow: hidden;
}

.lead-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(27,75,156,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(27,75,156,0.10) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.lead-hero .container { position: relative; z-index: 1; }

.lead-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 20px;
}

.lead-hero-eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--accent); }

.lead-hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: white;
  line-height: 1.05;
  max-width: 980px;
  margin-bottom: 22px;
}

.lead-hero p { font-size: 18px; color: rgba(255,255,255,0.65); line-height: 1.75; max-width: 820px; }

/* Overlapping portrait cluster */
.avatar-cluster { display: flex; margin-top: 36px; }

.avatar-cluster img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 4px 14px rgba(11,26,47,0.14);
  margin-left: -14px;
}

.avatar-cluster img:first-child { margin-left: 0; }

.avatar-cluster-note {
  align-self: center;
  margin-left: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
}

/* On the navy leadership hero, the cluster note needs light text
   (the About-page teaser reuses the cluster on a light background) */
.lead-hero .avatar-cluster-note { color: rgba(255,255,255,0.65); }
.lead-hero .avatar-cluster img { border-color: rgba(255,255,255,0.85); }

/* Flipped org chart — leadership framed as the base holding everything up,
   not the peak. Widest/lightest tier at top (the mission), narrowest/darkest
   tier at bottom (leadership). */
.flip-org {
  list-style: none;
  margin: 48px auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.flip-tier {
  width: 100%;
  border-radius: 14px;
  padding: 26px 36px;
  text-align: center;
  transition: transform 0.2s;
}

.flip-tier-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.flip-tier p { font-size: 14.5px; line-height: 1.7; max-width: 620px; margin: 0 auto; }

.flip-tier-1 { width: 100%; background: #D9E7F9; border-left: 5px solid var(--blue); }
.flip-tier-1 .flip-tier-label { color: var(--blue); }
.flip-tier-1 p { color: var(--gray-600); }

.flip-tier-2 { width: 84%; background: #AECDF2; border-left: 5px solid var(--navy-light); }
.flip-tier-2 .flip-tier-label { color: var(--navy-light); }
.flip-tier-2 p { color: var(--navy-light); }

.flip-tier-3 { width: 66%; background: #C9DAF0; }
.flip-tier-3 .flip-tier-label { color: var(--navy-light); }
.flip-tier-3 p { color: var(--navy-light); }

.flip-tier-4 { width: 46%; background: var(--navy); padding: 30px 36px; }
.flip-tier-4 .flip-tier-label { color: var(--accent); }
.flip-tier-4 p { color: rgba(255,255,255,0.75); }

@media (max-width: 700px) {
  .flip-tier-1, .flip-tier-2, .flip-tier-3, .flip-tier-4 { width: 100%; }
}

/* Leader cards */
.leader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
  margin-top: 52px;
}

.leader-card {
  background: white;
  border-radius: 18px;
  padding: 32px 22px 26px;
  text-align: center;
  border: 1px solid var(--gray-100);
  box-shadow: 0 2px 10px rgba(11,26,47,0.04);
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}

.leader-card:hover,
.leader-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(11,26,47,0.12);
}

.leader-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto 18px;
  box-shadow: 0 0 0 4px rgba(11,26,47,0.05), 0 10px 22px rgba(11,26,47,0.12);
  transition: box-shadow 0.25s;
}

.leader-card:hover .leader-photo { box-shadow: 0 0 0 4px rgba(30,174,212,0.45), 0 14px 28px rgba(11,26,47,0.16); }

.board-band .leader-photo { box-shadow: 0 0 0 4px rgba(255,255,255,0.08), 0 10px 22px rgba(0,0,0,0.35); }
.board-band .leader-card:hover .leader-photo { box-shadow: 0 0 0 4px rgba(30,174,212,0.55), 0 14px 28px rgba(0,0,0,0.4); }

.leader-card h3 { font-size: 17px; color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em; }

.leader-role {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.45;
  min-height: 35px;
  margin-bottom: 16px;
}

.leader-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid var(--gray-100);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, gap 0.2s;
}

.leader-more::after { content: '→'; }

.leader-card:hover .leader-more,
.leader-more:focus {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
  gap: 9px;
}

/* Board band */
.board-band { background: var(--navy); padding: 88px 0; }
.board-band .section-eyebrow { color: var(--accent); }
.board-band .section-eyebrow::before { background: var(--accent); }
.board-band h2 { color: white; }
.board-band .board-intro { color: rgba(255,255,255,0.6); font-size: 16px; line-height: 1.75; max-width: 560px; margin-top: 14px; }

.board-band .leader-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-width: 820px; }

.board-band .leader-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  box-shadow: none;
}

.board-band .leader-card h3 { color: white; }
.board-band .leader-role { color: rgba(255,255,255,0.55); }
.board-band .leader-more { border-color: rgba(255,255,255,0.22); color: var(--accent); }
.board-band .leader-card:hover .leader-more { background: var(--accent); border-color: var(--accent); color: var(--navy); }

/* Bio dialogs */
.leader-dialog {
  border: none;
  border-radius: 20px;
  padding: 0;
  max-width: 700px;
  width: calc(100% - 40px);
  box-shadow: 0 30px 80px rgba(11,26,47,0.35);
  overflow: hidden; /* keep scrolling content inside the rounded corners */
  /* The global `* { margin: 0 }` reset kills the browser's native dialog
     centering (which relies on margin: auto) — restore it explicitly */
  margin: auto;
}

.leader-dialog .dlg-close { z-index: 2; }

.leader-dialog::backdrop {
  background: rgba(11, 26, 47, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dlg-inner { max-height: 82vh; overflow-y: auto; padding: 44px 48px 40px; }

.dlg-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-100);
}

.dlg-head img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(30,174,212,0.25);
}

.dlg-head h3 { font-size: 24px; color: var(--text); letter-spacing: -0.02em; margin-bottom: 4px; }

.dlg-role {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  line-height: 1.5;
}

.dlg-body p { font-size: 15px; color: var(--gray-600); line-height: 1.8; margin-bottom: 15px; }
.dlg-body p:last-child { margin-bottom: 0; }
.dlg-body ul { margin: 0 0 15px 20px; }
.dlg-body li { font-size: 15px; color: var(--gray-600); line-height: 1.8; }

.dlg-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  border: 1px solid var(--gray-100);
  border-radius: 50%;
  color: var(--gray-600);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.dlg-close:hover { background: var(--navy); color: white; }

@media (max-width: 640px) {
  .dlg-inner { padding: 30px 24px; }
  .dlg-head { flex-direction: column; text-align: center; gap: 14px; }
  .lead-hero { padding: 120px 0 56px; }
}

/* ═══════════════════════════════════════════════════════════════
   The DSA Way page — 36 Fundamentals grid
   ═══════════════════════════════════════════════════════════════ */
.fund36-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}

.fundamental-card.fund36 { padding: 26px 24px; }

.fund36 h4 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0D1D33;
  line-height: 1.45;
  margin-bottom: 8px;
}

.fund36 p {
  font-size: 13.5px;
  color: #617490;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) { .fund36-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fund36-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   About page — History timeline
   A vertical zigzag rail. Marker color runs navy → accent across
   the seven decades; the accent line fills in behind it as the
   visitor scrolls (see JS/dsa_interactive.js, module 8).
   ═══════════════════════════════════════════════════════════════ */
.history-rail {
  position: relative;
  max-width: 980px;
  margin: 64px auto 0;
}

.history-track,
.history-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
}

.history-track { background: var(--gray-100); z-index: 0; }

.history-progress {
  background: linear-gradient(to bottom, var(--navy), var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  z-index: 1;
}

.history-stop {
  position: relative;
  display: flex;
  z-index: 2;
  margin-bottom: 56px;
}

.history-stop--left { justify-content: flex-start; }
.history-stop--right { justify-content: flex-end; }

.history-stop-marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 6px var(--off-white);
  z-index: 3;
}

.history-stop-card {
  width: calc(50% - 70px);
  background: white;
  border-radius: 14px;
  padding: 30px 32px;
  box-shadow: 0 4px 16px rgba(11,26,47,0.07);
  position: relative;
  overflow: hidden;
}

.history-stop--left .history-stop-card { margin-right: auto; }
.history-stop--right .history-stop-card { margin-left: auto; }

.history-ghost-year {
  position: absolute;
  top: -8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.02em;
  z-index: 0;
  pointer-events: none;
}

.history-stop--left .history-ghost-year { left: 8px; }
.history-stop--right .history-ghost-year { right: 8px; }

.history-milestones {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.history-milestones li {
  font-size: 14.5px;
  color: var(--gray-600);
  line-height: 1.7;
  padding-left: 18px;
  position: relative;
  margin-bottom: 14px;
}

.history-milestones li:last-child { margin-bottom: 0; }

.history-milestones li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.history-milestones strong { color: var(--text); font-weight: 700; }

.history-today {
  position: relative;
  text-align: center;
}

.history-today-marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 0 0 6px var(--off-white);
  z-index: 3;
}

.history-today p {
  padding-top: 96px;
  margin: 0 auto;
  max-width: 480px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.6;
}

@media (max-width: 760px) {
  .history-track, .history-progress { left: 30px; margin-left: 0; }
  .history-stop--left, .history-stop--right { justify-content: flex-start; padding-left: 64px; }
  .history-stop--left .history-stop-card,
  .history-stop--right .history-stop-card { width: 100%; margin-left: 0; margin-right: 0; }
  .history-stop-marker { left: 30px; width: 56px; height: 56px; font-size: 10px; }
  .history-ghost-year { font-size: 56px; }
  .history-stop--left .history-ghost-year,
  .history-stop--right .history-ghost-year { left: auto; right: 10px; }
  .history-today { text-align: left; padding-left: 64px; }
  .history-today-marker { left: 30px; width: 56px; height: 56px; }
  .history-today p { padding-top: 76px; margin-left: 0; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   About page — History timeline, HORIZONTAL variant
   Comparison layout for about-history-horizontal.html. Cards hang
   below a single horizontal rail instead of zigzagging vertically;
   an accent bar fills the rail left-to-right as the strip scrolls.
   Reuses .history-milestones for list styling (layout-agnostic).
   ═══════════════════════════════════════════════════════════════ */
.histh-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 56px;
}

.histh-arrow {
  width: 46px;
  height: 46px;
  font-size: 18px;
  flex-shrink: 0;
}

.histh-viewport { flex: 1; min-width: 0; overflow: hidden; }

.histh-scroller {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 40px 4px 8px;
}

.histh-scroller::-webkit-scrollbar { display: none; }

.histh-scroller { cursor: grab; }
.histh-scroller.is-dragging { cursor: grabbing; user-select: none; }
.histh-scroller.is-dragging .histh-item { pointer-events: none; }
.histh-scroller.is-autoplaying { scroll-snap-type: none; }

.histh-line {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  position: relative;
  border-top: 3px solid var(--gray-100);
}

.histh-line-progress {
  position: absolute;
  top: -3px;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(to right, var(--navy), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
}

.histh-item {
  flex: 0 0 300px;
  scroll-snap-align: start;
  position: relative;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
}

.histh-marker {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 6px var(--off-white);
  z-index: 2;
}

.histh-marker-today {
  background: var(--accent);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.histh-card {
  flex: 1;
  background: white;
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 4px 16px rgba(11,26,47,0.07);
  position: relative;
  overflow: hidden;
}

.histh-card-today {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.histh-card-today p { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.6; margin: 0; }

.histh-ghost {
  position: absolute;
  top: -6px;
  right: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  z-index: 0;
  pointer-events: none;
}

.histh-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.histh-pill {
  padding: 8px 16px;
  min-height: 36px;
  border-radius: 100px;
  border: 1px solid var(--gray-100);
  background: white;
  color: var(--blue);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.histh-pill:hover { border-color: var(--blue); }

.histh-pill.is-active { background: var(--blue); border-color: var(--blue); color: white; }

@media (max-width: 640px) {
  .histh-item { flex-basis: 82vw; }
  .histh-arrow { display: none; }
}