/* ---------- Module page ---------- */
.mod-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 65%);
}
.mod-hero-bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.mod-hero-bg video,
.mod-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* matches the homepage grade */
  filter: brightness(0.84) saturate(0.8) contrast(1.04);
}
.mod-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(10,17,48,0.88) 0%,
      rgba(10,17,48,0.80) 30%,
      rgba(10,17,48,0.56) 56%,
      rgba(10,17,48,0.12) 78%,
      rgba(10,17,48,0.18) 100%),
    linear-gradient(to top, rgba(10,17,48,0.72) 0%, transparent 32%),
    linear-gradient(to bottom, rgba(10,17,48,0.74) 0%, transparent 24%),
    linear-gradient(rgba(20,34,93,0.14), rgba(20,34,93,0.14));
}
.mod-hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1320px; margin: 0 auto;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px 0 92px;
  color: var(--cream);
}
.mod-hero-for {
  display: block;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.mod-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin-bottom: 18px;
  color: transparent;
  background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 58%, #CFF2E0 80%, var(--green) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  width: fit-content;
}
.mod-hero p {
  font-size: 18.5px; line-height: 1.6;
  color: rgba(250,250,250,0.92);
  max-width: 56ch;
  margin-bottom: 32px;
}

/* ---------- Module showcase: the UI, held back behind the copy ---------- */
.showcase { background: var(--cream); padding: 76px 48px 0; }
.showcase-panel {
  position: relative;
  overflow: hidden;
  max-width: 1320px; margin: 0 auto;
  min-height: 440px;
  display: flex;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 65%);
}
.showcase-bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.showcase-bg img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  /* graded toward brand navy first so the interface reads as texture, not a screenshot */
  filter: brightness(0.9) saturate(0.38) contrast(1.02);
}
.showcase-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(10,17,48,0.95) 0%,
      rgba(10,17,48,0.90) 32%,
      rgba(10,17,48,0.72) 58%,
      rgba(10,17,48,0.58) 100%),
    linear-gradient(to bottom, rgba(10,17,48,0.45) 0%, rgba(10,17,48,0) 30%, rgba(10,17,48,0.62) 100%),
    linear-gradient(rgba(20,34,93,0.14), rgba(20,34,93,0.14));
}
.showcase-inner {
  position: relative; z-index: 1;
  width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 48px;
  color: var(--cream);
}
.showcase-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 500; font-style: italic;
  letter-spacing: -0.015em; line-height: 1.1;
  margin-bottom: 16px;
  max-width: 18ch;
}
.showcase-inner p {
  font-size: 17.5px; line-height: 1.62;
  color: rgba(250,250,250,0.9);
  max-width: 54ch;
}

/* ---------- Capabilities: collapsible detail rows ---------- */
.caps { background: var(--cream); padding: 76px 48px 0; }
.caps-inner {
  max-width: 1320px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: 56px;
}
.caps-label {
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #2C7C55;
  padding-top: 22px;
}
.caps-label span {
  display: block;
  margin-top: 12px;
  font-size: 16.5px; font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0; text-transform: none;
  color: #7A85A3;
}
.cap { border-top: 1px solid #E4E9F2; }
.cap:last-of-type { border-bottom: 1px solid #E4E9F2; }
.cap summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 23px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 18.5px; font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 160ms ease;
}
.cap summary::-webkit-details-marker { display: none; }
.cap summary:hover { color: #2C7C55; }
.cap summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.cap summary svg {
  flex: 0 0 auto;
  color: #98A1B8;
  transition: transform 200ms ease, color 160ms ease;
}
.cap[open] summary { color: var(--navy-800); }
.cap[open] summary svg { transform: rotate(180deg); color: var(--green); }
.cap p {
  padding: 0 44px 26px 2px;
  font-size: 16.5px; line-height: 1.62;
  color: #4A5578;
  max-width: 66ch;
}

@media (max-width: 900px) {
  .showcase { padding: 56px 20px 0; }
  .showcase-panel { min-height: 340px; }
  .showcase-inner { padding: 40px 26px; }
  .showcase-bg::after {
    background:
      linear-gradient(to bottom, rgba(10,17,48,0.93) 0%, rgba(10,17,48,0.88) 100%),
      linear-gradient(rgba(20,34,93,0.14), rgba(20,34,93,0.14));
  }
  .caps { padding: 56px 20px 0; }
  .caps-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cap summary, .cap summary svg { transition: none; }
}

/* ---------- Pilot ribbon ---------- */
.ribbon { background: var(--cream); padding: 44px 48px 44px; }
.ribbon-inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 44px;
  padding: 32px 42px;
  border-radius: 16px;
  background: linear-gradient(120deg, var(--navy-800) 0%, var(--navy-950) 100%);
  color: var(--cream);
}
.ribbon-tag {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
  padding-right: 44px;
  border-right: 1px solid rgba(250,250,250,0.22);
}
.ribbon-inner p {
  flex: 1 1 auto;
  font-size: 15.5px; line-height: 1.55;
  color: rgba(250,250,250,0.9);
}
.ribbon-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 2px solid rgba(89,205,144,0.9);
  padding-bottom: 3px;
  transition: color 180ms ease, border-color 180ms ease;
}
.ribbon-cta:hover { color: var(--green); border-color: var(--green); }

@media (max-width: 900px) {
  .ribbon { padding: 34px 20px 34px; }
  .ribbon-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 24px; }
  .ribbon-tag { padding-right: 0; border-right: 0; }
}

/* assessment heroes are static navy, no footage behind them */
.as-hero .mod-hero-bg img { object-position: 50% 56%; }
.as-hero { background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 65%); }
.as-hero .mod-hero-inner { padding-bottom: 92px; }

.lifecycle + .assess { padding-top: 44px; }

.as-hero + .assess { padding-top: 56px; }

/* assessment CTA: copy left, button on the right */
.as-hero + .assess .assess-inner,
.platform + .assess .assess-inner,
.band + .assess .assess-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  text-align: left;
}
.as-hero + .assess .assess-inner > div,
.platform + .assess .assess-inner > div,
.band + .assess .assess-inner > div { flex: 1 1 auto; }
.as-hero + .assess .assess-inner h2,
.platform + .assess .assess-inner h2,
.band + .assess .assess-inner h2 { margin-bottom: 12px; }
.as-hero + .assess .assess-inner p,
.platform + .assess .assess-inner p,
.band + .assess .assess-inner p { margin-bottom: 0; max-width: 62ch; }
.as-hero + .assess .assess-inner .btn,
.platform + .assess .assess-inner .btn,
.band + .assess .assess-inner .btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  .as-hero + .assess .assess-inner,
  .platform + .assess .assess-inner,
  .band + .assess .assess-inner { flex-direction: column; align-items: flex-start; gap: 26px; }
}