/* ==========================================================================
   Global styles for the company website.
   Admins: change colors here to rebrand the entire site at once.
   ========================================================================== */

:root {
  /* Brand palette: white / dark blue / black
     - --color-bg       deep navy-black (header, footer, hero)
     - --color-bg-alt   slightly lifted navy (dark cards on dark)
     - --color-accent   steel blue highlight (buttons, links)
  */
  --color-bg: #04080F;
  --color-bg-alt: #0d1d33;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f6fa;
  --color-text: #0b1a2b;
  --color-text-muted: #4a5768;
  --color-text-inverse: #ffffff;
  --color-accent: #1e4fa8;
  --color-accent-hover: #163d85;
  /* Tactical bright blue — used sparingly for primary "Request Demo" CTAs only */
  --color-tactical: #0091EA;
  --color-tactical-hover: #0077C2;
  --color-border: #dfe4ec;
  --max-width: 1180px;
  --radius: 6px;
  --shadow: 0 4px 20px rgba(11, 26, 43, 0.08);
  --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.5em; color: var(--color-text); font-family: var(--font-display); }
h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.625rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header / Navigation
   -------------------------------------------------------------------------- */
.top-bar {
  background: var(--color-bg);
  color: #fff;
  font-size: 0.85rem;
  position: sticky;
  top: 0;
  z-index: 60;
}
.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  min-height: 40px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.top-bar a { color: rgba(255,255,255,0.85); text-decoration: none; }
.top-bar a:hover { color: #fff; }
.top-bar .top-contact { opacity: 0.85; }
.top-bar .btn {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 94px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-text);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.logo img {
  height: 67px;
  width: auto;
  display: block;
}
.logo .wordmark { letter-spacing: 0.02em; color: #000; }
.logo .accent { color: #000; }
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--color-text);
  font-size: 1.5rem;
  cursor: pointer;
}
.nav-list {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav-list > li {
  position: relative;
}
.nav-list a {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  opacity: 0.8;
  transition: opacity 0.15s, color 0.15s;
}
.nav-list a:hover { opacity: 1; text-decoration: none; color: var(--color-accent); }
.nav-list a.active { opacity: 1; color: var(--color-accent); }

/* Dropdown menus */
.nav-list .has-dropdown {
  position: relative;
}
.nav-list .has-dropdown > a,
.nav-list .has-dropdown > .nav-parent {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  opacity: 0.8;
  transition: opacity 0.15s, color 0.15s;
}
.nav-list .has-dropdown > .nav-parent {
  user-select: none;
}
.nav-list .has-dropdown:hover > a,
.nav-list .has-dropdown:hover > .nav-parent {
  opacity: 1;
  color: var(--color-accent);
}
.nav-list .has-dropdown > a::after,
.nav-list .has-dropdown > .nav-parent::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  margin-top: 2px;
  opacity: 0.85;
  transition: transform 0.2s;
}
.nav-list .has-dropdown:hover > a::after,
.nav-list .has-dropdown:hover > .nav-parent::after {
  transform: rotate(180deg);
}
.nav-list .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 1000;
  list-style: none;
  display: block;
}
.nav-list .has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-list .dropdown-menu li {
  margin: 0;
}
.nav-list .dropdown-menu a {
  display: block;
  padding: 0.6rem 1.2rem;
  color: var(--color-text);
  font-size: 0.9rem;
  opacity: 1;
  white-space: nowrap;
}
.nav-list .dropdown-menu a:hover {
  background: rgba(30, 79, 168, 0.08);
  color: var(--color-accent);
}

/* Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none !important;
}
.btn-primary {
  background: var(--color-tactical);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 145, 234, 0.28);
}
.btn-primary:hover {
  background: var(--color-tactical-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 145, 234, 0.36);
}
.btn-nav {
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
  opacity: 1;
}
.btn-nav:hover {
  opacity: 1;
}
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-text-inverse);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-dark {
  background: var(--color-bg);
  color: #fff;
}
.btn-dark:hover { background: var(--color-bg-alt); }

/* Hero
   -------------------------------------------------------------------------- */
.hero {
  background-color: #04080F;
  color: var(--color-text-inverse);
  padding: 4rem 0 calc(15rem - 10px);
  position: relative;
  overflow: hidden;
  /* Gentle V-shape bottom edge — center dips ~40px below the sides */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
}
@media (max-width: 768px) {
  .hero {
    padding: 3rem 0 4.5rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 50% 100%, 0 calc(100% - 24px));
    min-height: 240px;
    margin-top: -60px;
  }
  .hero h1 {
    margin-left: 0 !important;
    margin-right: 0;
    max-width: 100%;
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.15;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .hero h1 .mobile-break {
    display: inline;
  }
  .hero .subtitle { text-align: center; margin-left: auto; margin-right: auto; }
  /* Ensure full coverage of slideshow images on mobile */
  .bg-slide,
  .bg-slide:nth-child(3) {
    background-size: cover;
    min-height: 240px;
  }
  .bg-slideshow {
    min-height: 240px;
  }
}
/* Video background (sits behind the gradient overlay) */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Image slideshow background (crossfading) */
.bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% calc(50% + 60px);
  background-repeat: no-repeat;
  opacity: 0;
  animation: bgSlideFade 30s infinite;
  will-change: opacity;
  filter: brightness(1.15) saturate(1.05);
}
/* Override any lazy-load plugin that toggles opacity on .lazyloaded /
   .lazyloading / .lazyload — keep base opacity 0 so the animation drives it. */
.bg-slideshow .bg-slide.lazyload,
.bg-slideshow .bg-slide.lazyloading,
.bg-slideshow .bg-slide.lazyloaded {
  opacity: 0;
  transition: none;
}
.bg-slide:nth-child(1) { animation-delay: 0s; }
.bg-slide:nth-child(2) { animation-delay: 6s; background-position: 50% calc(50% + 25px); }
.bg-slide:nth-child(3) { animation-delay: 12s; background-position: 50% calc(50% - 5px); }
.bg-slide:nth-child(4) { animation-delay: 18s; }
.bg-slide:nth-child(5) { animation-delay: 24s; }
@keyframes bgSlideFade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  20%  { opacity: 1; }
  23%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-slide { animation: none; }
  .bg-slide:nth-child(1) { opacity: 1; }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(4,8,15,0.05) 0%, rgba(4,8,15,0.18) 60%, rgba(4,8,15,0.32) 100%),
    linear-gradient(100deg, rgba(4,8,15,0.22) 0%, rgba(4,8,15,0.05) 55%, rgba(4,8,15,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero h1,
.hero .container h1 {
  color: #fff;
  max-width: 900px;
  margin-left: 0;
  font-family: "Oswald", "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  line-height: 1.0;
  letter-spacing: 0.005em;
  margin-bottom: 1.25rem;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 6px 24px rgba(0, 0, 0, 0.35);
}
.hero .subtitle {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  max-width: 640px;
  opacity: 0.85;
  margin-bottom: 2.25rem;
  line-height: 1.55;
}
.hero .eyebrow {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Sections
   -------------------------------------------------------------------------- */
section { padding: 5rem 0; }
.section-alt { background: var(--color-surface-alt); }
.section-dark { background: var(--color-bg); color: var(--color-text-inverse); }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.8); }

.section-title {
  text-align: center;
  margin-bottom: 3rem;
}
.section-title p {
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* Grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 2rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(11, 26, 43, 0.12);
  border-color: rgba(0, 145, 234, 0.35);
}
.card .icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(30,79,168,0.12);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--color-text-muted); margin: 0; }
.card-image {
  margin: -1.75rem -1.75rem 1.5rem -1.75rem;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Case study cards
   -------------------------------------------------------------------------- */

/* Case studies section */
.case-studies-section {
  padding: 3rem 0 4rem;
  background: #ffffff;
}

/* Horizontal case study card */
.case-study-horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  background: #f8f9fb;
  border-radius: 16px;
  padding: 3rem;
  margin-bottom: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.case-study-horizontal:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(11, 26, 43, 0.08);
}

/* Case content (text side) */
.case-content {
  position: relative;
  padding-right: 1rem;
}
.case-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(0, 145, 234, 0.1);
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}
.case-content h2 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.case-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* Arrow link */
.case-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-tactical);
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.case-link:hover {
  background: #1558a0;
  transform: scale(1.05);
}
.arrow-icon {
  width: 24px;
  height: 24px;
  color: #ffffff;
}

/* Case image */
.case-image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(11, 26, 43, 0.1);
}
.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.case-study-horizontal:hover .case-image img {
  transform: scale(1.03);
}

/* Responsive for tablets and below */
@media (max-width: 768px) {
  .case-study-horizontal {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem;
  }
  .case-content {
    padding-right: 0;
  }
  .case-image {
    order: -1;
  }
  .video-grid {
    gap: 1.5rem;
  }
}

/* Old case card styles - keeping for backward compatibility */
.case-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(11, 26, 43, 0.12);
  border-color: rgba(0, 145, 234, 0.35);
}
.case-card .case-banner {
  height: 220px;
  background: linear-gradient(135deg, #05101f, #1e4fa8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  opacity: 0.9;
}
.case-card .case-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-card .case-body { padding: 1.75rem; }
.case-card .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.case-card blockquote {
  border-left: 3px solid var(--color-accent);
  margin: 1rem 0 0;
  padding-left: 1rem;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.95rem;
}
.case-metric {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.5rem 0 1rem;
  padding: 0.6rem 0.9rem;
  background: linear-gradient(135deg, rgba(0,145,234,0.08), rgba(0,145,234,0.02));
  border-left: 3px solid var(--color-tactical);
  border-radius: 4px;
}
.case-metric-value {
  font-family: var(--font-mono);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--color-tactical);
  letter-spacing: -0.02em;
  line-height: 1;
}
.case-metric-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Video cards
   -------------------------------------------------------------------------- */
.video-grid {
  gap: 2.5rem;
}
.video-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(11, 26, 43, 0.1);
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  background: #000;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-card-body {
  padding: 1.5rem;
}
.video-card-body h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.video-card-body p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

/* Events grouped by month
   -------------------------------------------------------------------------- */
.events-by-month { display: flex; flex-direction: column; gap: 2.5rem; }
.event-month-label {
  font-size: 1.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text);
}
.event-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.event-card img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  display: block;
}
.event-card-body { padding: 1rem 1.25rem 1.25rem; }
.event-card .event-date {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.35rem;
}
.event-card .event-name {
  font-weight: 600;
  color: var(--color-text);
}

/* Partners marquee
   -------------------------------------------------------------------------- */
.partners { padding: 3rem 0; background: #fff; }
.partners-eyebrow {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
}
.partners-marquee {
  position: relative;
  overflow: hidden;
  /* Fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.partners-track {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  width: max-content;
  animation: partners-scroll 40s linear infinite;
}
.partners-marquee:hover .partners-track { animation-play-state: paused; }
.partner-logo {
  flex: 0 0 auto;
  height: 72px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.partner-logo:hover { filter: grayscale(0%); opacity: 1; }
/* Per-logo size tweaks — some source files have extra padding or
   thin strokes and need a size bump to match visual weight. */
.partner-logo[alt="L3Harris"],
.partner-logo[src*="L3Harris"] { height: 96px; max-width: 320px; }
.partner-logo[alt="General Dynamics"],
.partner-logo[src*="General_Dynamics"] { height: 96px; max-width: 320px; }
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}
/* Stats
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  text-align: center;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}
.stat-label { color: var(--color-text-muted); font-weight: 500; }

/* Compact variant for short stat sections */
.stats-compact { padding: 2rem 0; }
.stats-compact .section-title { margin-bottom: 1rem; }
.stats-compact .section-title p { margin-bottom: 0; }
.stats-compact .stat-value { font-size: 2rem; }

/* Contact section
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2.5rem;
  align-items: stretch;
}
.contact-info h3 { margin-bottom: 1rem; }
.contact-address {
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-text-muted);
}
.contact-list li { margin-bottom: 0.5rem; }
.contact-list strong { color: var(--color-text); margin-right: 0.25rem; }
.contact-map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  min-height: 320px;
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* CTA strip
   -------------------------------------------------------------------------- */
.cta-strip {
  background: linear-gradient(135deg, #05101f 0%, #1e4fa8 100%);
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}
.cta-strip h2 { color: #fff; margin-bottom: 0.5rem; }
.cta-strip p { opacity: 0.95; margin-bottom: 1.5rem; }
.cta-strip .btn-dark { background: #ffffff; color: #05101f; }
.cta-strip .btn-dark:hover { background: #e8edf5; color: #05101f; }

/* Forms
   -------------------------------------------------------------------------- */
.form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow);
  max-width: 720px;
  margin: 0 auto;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}
.form-group label .req { color: var(--color-accent); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(30,79,168,0.15);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-message {
  padding: 1rem;
  border-radius: var(--radius);
  background: #e8f5e9;
  color: #1b5e20;
  margin-top: 1rem;
  display: none;
}
.form-message.visible { display: block; }

/* FAQ / Support
   -------------------------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 0;
}
.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--color-accent);
  font-weight: 400;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin-top: 0.75rem; color: var(--color-text-muted); }

.support-grid .card {
  text-align: center;
}
.support-grid .card .icon { margin: 0 auto 1rem; }

/* Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: #030a14;
  color: rgba(255,255,255,0.7);
  padding: 3rem 0 1.5rem;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.site-footer h4 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { color: rgba(255,255,255,0.7); }
.site-footer a:hover { color: var(--color-accent); text-decoration: none; }
.footer-logo { color: #fff; }
.footer-logo img { height: 32px; }
.footer-logo .wordmark { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.7;
}
.social-links {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}
.social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.social-links a:hover {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-2px);
}
.social-links svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

/* Flip cards (Features page)
   -------------------------------------------------------------------------- */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
}
/* Locked 3-column matrix variant (Features page).
   Forces 3 columns on desktop regardless of card count, so a 3x3 grid
   reads as an intentional matrix instead of an auto-flowing list. */
.flip-grid.flip-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) {
  .flip-grid.flip-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .flip-grid.flip-grid--3 { grid-template-columns: 1fr; }
}
.flip-card {
  perspective: 1400px;
  min-height: 640px;
  cursor: pointer;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 18px rgba(5,16,31,0.05);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Hover lift + subtle orange border glow on the visible face only.
   We target the front face when not flipped, and the back face when flipped,
   so the lift is consistent regardless of card state. */
.flip-card:not(.flipped):hover .flip-face.front,
.flip-card.flipped:hover .flip-face.back {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(11, 26, 43, 0.12);
  border-color: rgba(0, 145, 234, 0.35);
}
/* Keep the back-face flipped 180deg while still allowing the lift transform */
.flip-card.flipped:hover .flip-face.back {
  transform: rotateY(180deg) translateY(-4px);
}
.flip-face.front {
  background: var(--color-surface);
  color: var(--color-text);
}
.flip-face.front .front-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.flip-face.front .icon {
  margin-bottom: 0;
}
.flip-face.front h3 { 
  margin-bottom: 0;
  flex: 1;
}
/* Optional preview image inside a flip card front face.
   "Easter Egg" Dribbble-inspired layout: image is the hero, fills the top
   of the card edge-to-edge, content panel sits clean underneath. */
.flip-card.has-image .flip-face.front {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.flip-face.front .front-image {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* Soft "studio" stage — subtle diagonal blend of the surface tones
     with a faint accent tint, so device screenshots float instead of
     sitting in a black box. Matches the rest of the card system. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,145,234,0.06), transparent 60%),
    linear-gradient(160deg, var(--color-surface-alt) 0%, #eef1f6 100%);
  border-top: 1px solid var(--color-border);
  min-height: 0;
  padding: 0.5rem;
}
/* Placeholder for cards without an image yet — quiet, light, with a soft
   diagonal hatch so it reads as "intentionally empty" not "broken". */
.flip-face.front .front-image.is-empty {
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-surface-alt) 0 12px,
      #eef1f6 12px 24px
    );
}
.flip-face.front .front-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
}
.flip-card.has-image:not(.flipped):hover .front-image img {
  transform: scale(1.04);
}
/* Content panel below the image */
.flip-face.front .front-body {
  flex: 0 0 auto;
  padding: 0.75rem 1.25rem 0.75rem 1rem;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}
.flip-card.has-image .flip-face.front .front-header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon  title"
    "hint  hint";
  align-items: center;
  column-gap: 0.65rem;
  row-gap: 0.35rem;
  margin-bottom: 0;
}
.flip-card.has-image .flip-face.front .icon {
  grid-area: icon;
}
.flip-card.has-image .flip-face.front h3 {
  grid-area: title;
}
/* Flat outline icon on image cards — less visual weight than the filled chip,
   so the screenshot stays the hero. */
.flip-card.has-image .flip-face.front .icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--color-border);
  font-size: 1rem;
}
.flip-card.has-image .flip-face.front .icon svg {
  width: 16px;
  height: 16px;
}
.flip-card.has-image .flip-face.front h3 {
  font-size: 1rem;
  flex: 1;
}
/* Softer hint — lowercase, lighter, smaller. The card itself signals
   interactivity; the hint is just a subtle reminder. Sits on its own row
   under the title via the grid above, so long titles never wrap into it. */
.flip-card.has-image .flip-hint {
  grid-area: hint;
  justify-self: end;
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.flip-card.has-image:not(.flipped):hover .flip-hint {
  color: var(--color-accent);
}
.flip-face.back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #05101f 0%, #0d1d33 60%, #1e4fa8 130%);
  color: #fff;
  padding: 1.4rem 1.4rem 1.2rem;
  overflow-y: auto;
}
.flip-face.back p + p { margin-top: 0.7rem; }
.flip-face .icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(30,79,168,0.12);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  overflow: hidden;
}
.flip-face .icon img,
.flip-face .icon .icon-mask {
  width: 70%;
  height: 70%;
  display: block;
  background-color: var(--color-accent);
  -webkit-mask: var(--icon-src) center/contain no-repeat;
          mask: var(--icon-src) center/contain no-repeat;
}
.flip-face .icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
  display: block;
}
.flip-face.back .icon svg { color: #fff; }
.flip-face.back .icon {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.flip-face.back p {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
.flip-hint {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.flip-face.back .flip-hint { color: rgba(255,255,255,0.85); }
.flip-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius); }


@media (max-width: 1132px) {
  .nav-toggle { display: block; }
  .top-bar .top-contact { display: none; }
  .nav-list {
    position: absolute;
    top: 94px;
    left: 0;
    right: 0;
    background: #ffffff;
    flex-direction: column;
    gap: 0;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 8px 20px rgba(5,16,31,0.08);
    display: none;
  }
  .nav-list.open { display: flex; }
  .nav-list li { width: 100%; padding: 0.6rem 0; }
  /* Mobile dropdown styles */
  .nav-list .dropdown-menu {
    position: static;
    margin-top: 0.5rem;
    margin-left: 1rem;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-accent);
    background: transparent;
    padding: 0.25rem 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .nav-list .has-dropdown.open .dropdown-menu {
    display: block;
  }
  .nav-list .dropdown-menu a {
    padding: 0.5rem 1rem;
  }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  section { padding: 3.5rem 0; }
  .hero { padding: 4rem 0 3.5rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Product showcase
   -------------------------------------------------------------------------- */
.product-showcase {
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
  padding: 3rem 0 7rem;
  overflow: hidden;
}
.product-showcase .section-title { margin-bottom: 3rem; }
.product-showcase .section-title p { max-width: 960px; }
.product-showcase .eyebrow-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-tactical);
  margin-bottom: 0.85rem;
}
.product-frame {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(11, 26, 43, 0.35),
    0 18px 36px -18px rgba(30, 79, 168, 0.25),
    0 0 0 1px rgba(11, 26, 43, 0.08);
  background: #0d1d33;
  transform: translateZ(0);
}
.product-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08), transparent 60%);
}
.product-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.product-frame--video {
  aspect-ratio: 16 / 9;
  background: #000;
}
.product-frame--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 768px) {
  .product-showcase { padding: 2rem 0 4.5rem; }
  .product-frame { border-radius: 8px; }
}

/* ---------- Manifesto band ---------- */
.manifesto {
  padding: 5rem 0 5.25rem;
  background: linear-gradient(135deg, #0b1a2b 0%, #1e4fa8 100%);
  color: #fff;
  text-align: center;
}
.manifesto-title {
  margin: 0 auto 1.5rem;
  color: #fff;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  line-height: 1.15;
}
.manifesto-quote {
  max-width: 880px;
  margin: 0 auto;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 500;
  line-height: 1.6;
  color: #e6ecf7;
}
.manifesto-quote strong {
  color: #fff;
  font-weight: 700;
}
@media (max-width: 540px) {
  .manifesto { padding: 3.25rem 0 3.5rem; }
}

/* ---------- Phases of Operation ---------- */
.phases { padding: 5rem 0 5.5rem; }
.phases-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.phase-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(11, 26, 43, 0.08);
  border-radius: 12px;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 6px 18px -12px rgba(11, 26, 43, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.phase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(11, 26, 43, 0.28);
}
.phase-num {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-tactical, #1e4fa8);
  margin-bottom: 0.85rem;
}
.phase-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.phase-card p {
  margin: 0;
  color: var(--color-text-muted, #4a5568);
  font-size: 0.95rem;
  line-height: 1.55;
}
@media (max-width: 960px) {
  .phases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .phases-grid { grid-template-columns: 1fr; }
  .phases { padding: 3.5rem 0 4rem; }
}

/* ---------- Flexible Deployment Options ---------- */
.deployment {
  padding: 5rem 0 5.5rem;
  background:
    linear-gradient(180deg, #08172a 0%, #0d2546 100%);
  color: #fff;
}
.deployment .section-title { margin-bottom: 3rem; }
.deployment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}
.deployment-col {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.75rem 1.5rem 1.5rem;
}
.deployment-col-title {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  min-height: 2.8em;
}
.deployment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.deployment-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.deployment-list strong {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.05rem;
}
.deployment-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  flex-shrink: 0;
}
.deployment-icon svg { width: 22px; height: 22px; }
.deployment-icon--cloud    { background: #cbd5e1; color: #1e293b; }
.deployment-icon--onprem   { background: #0091EA; color: #fff; }
.deployment-icon--tactical { background: #94a3b8; color: #0b1a2b; }
.deployment-icon--android  { background: #34a853; color: #fff; }
.deployment-icon--ios      { background: #94a3b8; color: #fff; }
.deployment-icon--browser  { background: #2f8be0; color: #fff; }
.deployment-icon--cell      { background: #2f8be0; color: #fff; }
.deployment-icon--firstnet  { background: #1e4fa8; color: #fff; }
.deployment-icon--satellite { background: #94a3b8; color: #0b1a2b; }
.deployment-icon--wifi      { background: #2f8be0; color: #fff; }

.deployment-secure {
  margin: 2.5rem auto 0;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}
.deployment-secure p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}
.deployment-secure strong { color: #fff; font-weight: 700; }
.deployment-secure-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(47, 139, 224, 0.25);
  color: #7cc1ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.deployment-secure-icon svg { width: 20px; height: 20px; }

@media (max-width: 960px) {
  .deployment-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .deployment-col-title { min-height: 0; }
}
@media (max-width: 540px) {
  .deployment { padding: 3.5rem 0 4rem; }
  .deployment-secure { flex-direction: column; text-align: center; border-radius: 16px; }
}

/* Home page — tech-background behind all post-hero sections
   -------------------------------------------------------------------------- */
body.page-home {
  background-color: #04080F;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    url('tech-background.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
/* Make the previously-white sections transparent so the body image shows through.
   Cards, frames, and dark sections keep their own backgrounds. */
.page-home .section-alt,
.page-home .product-showcase,
.page-home .manifesto,
.page-home .partners {
  background: transparent;
}
/* On the home page, the manifesto sits on the light tech-background,
   so flip its white text to dark for legibility. */
.page-home .manifesto,
.page-home .manifesto-title,
.page-home .manifesto-quote,
.page-home .manifesto-quote strong {
  color: var(--color-text);
}

/* Interior pages: reduce hero bottom padding since they have subtitle content */
body:not(.page-home) .hero {
  padding: 4rem 0 6rem;
}

/* Hero intro copy — sits between hero V-cut and Capabilities */
.hero-intro {
  padding: 2.5rem 0 1.5rem;
  position: relative;
}
.hero-intro .container {
  position: relative;
}
.hero-intro-text {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.55;
  color: #0b1a2b;
  max-width: 760px;
  margin: 0;
}
.hero-intro-text strong {
  font-weight: 700;
}
/* Phone mockup — anchored to hero-intro, lifted up so it overlaps hero bottom */
.hero-phone {
  position: absolute;
  right: 1.5rem;
  bottom: -1rem;
  /* Pull up so the phone overlaps the hero's V-cut */
  top: auto;
  transform: translate(120px, calc(-65% + 450px));
  width: clamp(180px, 22vw, 320px);
  height: auto;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 18px 36px rgba(4, 8, 15, 0.35));
}
@media (max-width: 900px) {
  .hero-phone {
    right: 1rem;
    width: clamp(140px, 28vw, 220px);
    transform: translate(120px, calc(-55% + 450px));
  }
}
@media (max-width: 640px) {
  .hero-intro { padding: 1.75rem 0 0.5rem; }
  .hero-phone { display: none; }
}

/* Common Operating Picture showcase
   -------------------------------------------------------------------------- */
.cop-showcase {
  display: grid;
  grid-template-columns: minmax(0, 3.2fr) minmax(220px, 1fr);
  gap: 2rem;
  align-items: stretch;
  margin: 2.5rem 0 1.25rem;
}
.cop-showcase__media {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.cop-showcase__media img {
  display: block;
  width: 100%;
  height: auto;
}
.cop-showcase__features {
  position: relative;
  padding: 15px 0 15px 1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
}
.cop-showcase__features::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 15px;
  width: 4px;
  background: var(--color-accent);
}
.cop-showcase__title {
  font-family: 'Oswald', 'Inter Tight', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  color: var(--color-text);
}
.cop-showcase__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Oswald', 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.cop-showcase__caption {
  margin: 0 0 1.5rem;
  text-align: justify;
  text-align-last: left;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
}
.cop-showcase__caption p { margin: 0 0 0.75rem; }
.cop-showcase__tagline {
  font-size: 1.15rem;
  font-style: italic;
  text-align: center;
}
@media (max-width: 820px) {
  .cop-showcase {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .cop-showcase__features {
    border-left: none;
    border-top: 4px solid var(--color-accent);
    padding-left: 15px;
    padding-top: 1rem;
  }
}

/* Case Studies category cards
   -------------------------------------------------------------------------- */
.case-category-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0 auto;
}
.case-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.75rem;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.case-category-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.case-category-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 32px rgba(11, 26, 43, 0.12);
  transform: translateY(-4px);
  text-decoration: none;
}
.case-category-card:hover::before {
  transform: scaleX(1);
}
.case-category-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 1rem;
  filter: grayscale(0.3);
  transition: filter 0.25s ease;
}
.case-category-card:hover .case-category-icon {
  filter: grayscale(0);
}
.case-category-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}
.case-category-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
  flex: 1;
}
.case-category-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent);
  transition: color 0.2s ease;
}
.case-category-card:hover .case-category-link {
  color: var(--color-accent-hover);
}
@media (max-width: 900px) {
  .case-category-cards {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* Contact page — form section with intro and form side by side
   -------------------------------------------------------------------------- */
.contact-form-section {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: start;
}
.contact-form-intro {
  position: sticky;
  top: 140px;
}
.contact-form-intro h2 {
  font-family: 'Oswald', 'Inter Tight', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  color: var(--color-text);
}
.contact-form-intro h3 {
  font-family: 'Lato', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
  color: var(--color-text);
}
.contact-form-intro p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.contact-form-wrapper {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.btn-wide {
  width: 100%;
  text-align: center;
}
@media (max-width: 900px) {
  .contact-form-section {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact-form-intro {
    position: static;
  }
}

/* Careers page — job listings
   -------------------------------------------------------------------------- */
.job-listings {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.job-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.job-card:hover {
  box-shadow: 0 6px 28px rgba(11, 26, 43, 0.12);
  border-color: var(--color-accent);
}
.job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.job-header h3 {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  color: var(--color-text);
}
.job-meta {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}
.job-description p {
  margin: 0 0 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.job-description p:last-child {
  margin-bottom: 0;
}
@media (max-width: 680px) {
  .job-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .job-header .btn {
    align-self: stretch;
  }
}

/* Case study article pages (SWAT, Emergency Mgmt, Large Scale)
   -------------------------------------------------------------------------- */
.case-article {
  padding: 4rem 0 5rem;
}
.case-article .container {
  max-width: 880px;
}
.case-article__header {
  margin-bottom: 2.5rem;
  text-align: center;
}
.case-article__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin: 0 0 1rem;
}
.case-article__header h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin: 0 0 1.25rem;
}
.case-article__lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
.case-article__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0 3rem;
  padding: 2rem 1.5rem;
  background: var(--color-surface-alt);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-accent);
}
.case-article__stats > div {
  text-align: center;
}
.case-article__stats .stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}
.case-article__stats .stat-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.case-article__body h3 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.4rem;
  color: var(--color-text);
}
.case-article__body p,
.case-article__body li {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
}
.case-article__list {
  padding-left: 1.25rem;
  margin: 0 0 1.5rem;
}
.case-article__list li {
  margin-bottom: 0.6rem;
}
.case-pullquote {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.15rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--color-text);
}
.case-pullquote cite {
  display: block;
  margin-top: 0.85rem;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.case-article__cta {
  margin: 3rem 0 2rem;
  padding: 2rem 1.75rem;
  background: linear-gradient(135deg, #05101f, #0d1d33);
  color: #fff;
  border-radius: var(--radius);
  text-align: center;
}
.case-article__cta h3 {
  color: #fff;
  margin: 0 0 0.5rem;
}
.case-article__cta p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.25rem;
}
.case-article__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
  font-weight: 600;
}
.case-article__nav a {
  color: var(--color-accent);
}
.case-article__back {
  color: var(--color-text-muted) !important;
}
@media (max-width: 680px) {
  .case-article__stats {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .case-article__nav {
    flex-direction: column;
    text-align: center;
  }
}

/* DNP case study (SWAT page) — static hero + 60/40 article layout
   -------------------------------------------------------------------------- */
.hero--dnp {
  padding: 0;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  /* Drop the V-shape clip used by the slideshow hero */
  clip-path: none;
}
.hero--dnp .hero--dnp__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: none;
}
/* No gradient overlay — hero images are pre-composed */
.hero--dnp::before {
  background-image: none;
}
.hero--dnp .container {
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.hero--dnp__eyebrow {
  color: #fff;
  max-width: 720px;
  margin: 0.85rem 0 0;
  font-family: "Oswald", "Inter Tight", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.35;
  opacity: 0.95;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.hero--dnp h1,
.hero--dnp .container h1 {
  max-width: 820px;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  line-height: 1.05;
  margin-bottom: 0;
}
/* Override .case-article .container's narrow max-width so the article
   column lines up with the header logo on the SWAT case study page. */
.case-article--dnp .container {
  max-width: var(--max-width);
}
.case-article__nav--end { justify-content: flex-end; }
@media (max-width: 768px) {
  .hero--dnp { min-height: 250px; margin-top: 0; }
  .hero--dnp .container { padding-top: 2.25rem; padding-bottom: 1.5rem; }
  .hero--dnp::before {
    background-image: linear-gradient(
      90deg,
      rgba(4, 8, 15, 0.85) 0%,
      rgba(4, 8, 15, 0.55) 60%,
      rgba(4, 8, 15, 0.30) 100%
    );
  }
}

.case-article--dnp { padding: 4rem 0 5rem; }
.dnp-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: 3.5rem;
  align-items: start;
}
.dnp-byline {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.dnp-byline__logo {
  height: 38px;
  width: auto;
  display: block;
}
.dnp-byline__meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.dnp-body p,
.dnp-body li {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 1.1rem;
}
.dnp-body h3 {
  font-family: "Oswald", "Inter Tight", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  margin: 2rem 0 0.9rem;
  color: var(--color-text);
}
.dnp-body a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}
.dnp-body a:hover { text-decoration: underline; }

.dnp-layout__aside {
  position: sticky;
  top: 6rem;
}
.dnp-quote {
  margin: 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--color-accent);
}
.dnp-quote blockquote {
  margin: 0 0 1.25rem;
  padding: 0;
  border: none;
}
.dnp-quote blockquote p {
  font-family: "Lato", "Inter", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
}
.dnp-quote__cite {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.dnp-quote__cite strong {
  color: var(--color-text);
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .dnp-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .dnp-layout__aside {
    position: static;
    order: -1; /* show the pull quote above the article on small screens */
  }
}

/* Mission cycle graphic on home page
   -------------------------------------------------------------------------- */
.mission-cycle-graphic {
  max-width: 650px;
  margin: 2rem auto 0;
  text-align: center;
}
.mission-cycle-graphic img {
  display: block;
  width: 100%;
  height: auto;
}

/* Checklist style for benefits
   -------------------------------------------------------------------------- */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.checklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.1rem;
}


/* Resource table (Academy)
   -------------------------------------------------------------------------- */
.resource-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.95rem;
}
.resource-table thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: #fff;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.resource-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.resource-table tbody tr:last-child td {
  border-bottom: none;
}
.resource-table tbody tr:hover {
  background: rgba(30, 79, 168, 0.08);
}
.resource-table .col-icon {
  width: 48px;
  text-align: center;
}
.resource-table .col-name {
  width: 30%;
  font-weight: 600;
}
.resource-table .col-name a {
  color: inherit;
  text-decoration: none;
}
.resource-table .col-name a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.resource-table .col-desc {
  color: var(--color-text-muted);
}
.resource-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
}
.resource-icon svg,
.resource-icon img {
  width: 28px;
  height: 28px;
}
.resource-icon.is-video {
  color: #c0392b;
}
.resource-icon.is-doc {
  color: #2c5282;
}
@media (max-width: 640px) {
  .resource-table thead {
    display: none;
  }
  .resource-table,
  .resource-table tbody,
  .resource-table tr,
  .resource-table td {
    display: block;
    width: 100%;
  }
  .resource-table tr {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
  }
  .resource-table tbody td {
    padding: 0.25rem 0;
    border: none;
  }
  .resource-table .col-icon {
    width: auto;
    text-align: left;
  }
}

/* APK Releases Page
   -------------------------------------------------------------------------- */
.apk-releases {
  padding: 4rem 0;
  background: var(--color-surface);
}

.apk-section {
  margin-bottom: 3rem;
}

.apk-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-border);
}

.apk-release {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
}

.apk-release:last-child {
  border-bottom: none;
}

.apk-version {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.apk-download-link {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.apk-download-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.apk-date {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.apk-description {
  color: var(--color-text);
  margin: 0;
  line-height: 1.6;
}

.google-play-badge {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.google-play-badge:hover,
.google-play-badge:focus-visible {
  opacity: 0.85;
  transform: translateY(-1px);
}

.google-play-badge img {
  display: block;
  height: 60px;
  width: auto;
}

/* APK Page Layout - 70/30 split */
.apk-layout {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2rem;
}

.apk-layout__main {
  min-width: 0; /* prevent grid blowout */
}

.apk-layout__aside {
  position: sticky;
  top: 6rem;
}

/* Store Badges Sidebar */
.store-badges {
  margin: 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--color-accent);
}

.store-badges__title {
  font-family: "Oswald", "Inter Tight", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.store-badges__subtitle {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0 0 1.75rem;
  line-height: 1.5;
}

.store-badge-link {
  display: block;
  margin-bottom: 1rem;
  line-height: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.store-badge-link:hover,
.store-badge-link:focus-visible {
  opacity: 0.85;
  transform: translateY(-1px);
}

.store-badge-link:last-child {
  margin-bottom: 0;
}

.store-badge {
  display: block;
  width: 100%;
  height: auto;
  max-width: 180px;
}

@media (max-width: 900px) {
  .apk-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .apk-layout__aside {
    position: static;
    order: -1; /* show badges above releases on mobile */
  }
}

@media (max-width: 640px) {
  .apk-version {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .apk-section-title {
    font-size: 1.25rem;
  }
}