/* Delviom — NASA SEWP VI (vehicle detail page).
   Layered on top of main.css + index1.css + capabilities.css + solution.css, so
   the banner, section rhythm, proof icons, wave tiles and closing CTA are the
   same components the Cybersecurity, DevSecOps and Business Intelligence pages
   use. This file carries only what is unique to the SEWP page. */

/* ===================== Hero ===================== */
.sewp-hero-sub {
   margin-top: 10px;
   color: #fff;
   font-size: clamp(1.05rem, 1.7vw, 1.5rem);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -0.01em;
}

.page-banner-copy>.page-banner-lead+.page-banner-lead {
   margin-top: 14px;
}

.sewp-hero-note {
   margin-top: clamp(18px, 2.2vw, 24px);
   color: var(--gold);
   font-size: clamp(0.98rem, 1.2vw, 1.08rem);
   font-weight: 700;
   line-height: 1.6;
}

/* The SEWP contract-holder mark is artwork, not a photo — show it whole on a
   light card instead of cropping it like the inner-page banner images. */
.page-banner-media--logo {
   display: grid;
   place-items: center;
   padding: clamp(22px, 2.6vw, 34px);
   border-radius: 22px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.14);
   box-shadow: 0 26px 60px rgba(3, 12, 26, 0.42);
}

.page-banner-media--logo img {
   width: 100%;
   max-width: 100%;
   height: auto;
   border-radius: 12px;
   box-shadow: none;
   object-fit: contain;
}

/* solution.css only spaces p+p, so copy following a heading in the left column
   needs its own gap. */
.solution-split h2+p {
   margin-top: clamp(14px, 1.6vw, 18px);
}

/* ===================== Accessibility =====================
   The heading sits on its own above the two columns rather than inside the
   left one, so the copy and the contact details start on the same line. */
.sewp-access>h2 {
   margin-bottom: clamp(22px, 2.6vw, 32px);
   color: var(--navy);
   font-size: clamp(1.5rem, 2.4vw, 2rem);
   font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1.2;
}

/* ===================== Inline link CTA ===================== */
/* The same uppercase micro-CTA the insight cards use, so a link inside a
   section reads as an action without becoming another button. */
.sewp-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: clamp(18px, 2vw, 24px);
   color: var(--teal-deep);
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   transition: color .18s ease, gap .18s ease;
}

.sewp-link svg {
   width: 15px;
   height: 15px;
   flex: none;
}

.sewp-link:hover {
   color: var(--navy);
   gap: 12px;
}

/* ===================== Awarded categories ===================== */
/* Wave-gradient tiles, the same art and treatment as .capability-card. */
.sewp-groups {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(18px, 2.2vw, 28px);
}

.sewp-group {
   position: relative;
   display: flex;
   flex-direction: column;
   isolation: isolate;
   min-height: 360px;
   overflow: hidden;
   padding: clamp(18px, 1.6vw, 26px);
   border-radius: 20px;
   color: #fff;
   background-color: var(--navy-deep);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   transition: transform .22s ease;
}

.sewp-group::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(180deg, rgba(6, 16, 32, 0) 12%, rgba(6, 16, 32, 0.78) 78%);
}

.sewp-group:hover {
   transform: translateY(-4px);
}

.sewp-group-icon {
   display: inline-grid;
   place-items: center;
   width: 46px;
   height: 46px;
   color: #fff;
}

.sewp-group-icon svg {
   width: 38px;
   height: 38px;
}

.sewp-group-body {
   margin-top: auto;
}

.sewp-group-kicker {
   margin-bottom: 10px;
   color: rgba(255, 255, 255, 0.82);
   font-size: 0.72rem;
   font-weight: 800;
   letter-spacing: 0.16em;
   text-transform: uppercase;
}

.sewp-group h3 {
   color: #fff;
   font-size: clamp(1.2rem, 1.6vw, 1.4rem);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.01em;
}

.sewp-group p {
   margin-top: 10px;
   color: rgba(255, 255, 255, 0.88);
   font-size: 0.92rem;
   line-height: 1.55;
}

/* Each category carries its own contract number, split off by a hairline */
.sewp-group-contract {
   margin-top: 16px;
   padding-top: 14px;
   border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.sewp-group-contract span {
   display: block;
   color: rgba(255, 255, 255, 0.72);
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

.sewp-group-contract strong {
   display: block;
   margin-top: 6px;
   color: var(--gold);
   font-size: 1.05rem;
   font-weight: 700;
   letter-spacing: 0.02em;
}

/* ===================== Contract details ===================== */
/* Borderless columns divided by hairlines, matching .tech-partner-card. */
.sewp-facts-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0 clamp(28px, 4vw, 64px);
}

.sewp-fact {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 6px 18px;
   padding: 14px 0;
   border-bottom: 1px solid var(--line);
}

.sewp-fact dt {
   color: var(--navy);
   font-size: 0.88rem;
   font-weight: 700;
   line-height: 1.5;
}

.sewp-fact dd {
   color: var(--text);
   font-size: 0.9rem;
   line-height: 1.5;
}

.sewp-fact a {
   color: var(--teal-deep);
   font-weight: 600;
}

.sewp-fact a:hover {
   color: var(--navy);
}

/* ===================== Notice pair ===================== */
/* Two borderless columns, icon over heading — the .capability-proof-card
   treatment, sized for a longer block of copy. */
.sewp-notice-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(28px, 4vw, 64px);
   align-items: start;
}

.sewp-notice h2 {
   margin-top: 4px;
   color: var(--navy);
   font-size: clamp(1.2rem, 1.8vw, 1.45rem);
   font-weight: 700;
   line-height: 1.25;
   letter-spacing: -0.01em;
}

.sewp-notice h3 {
   margin-top: 14px;
   color: var(--teal-deep);
   font-size: 0.98rem;
   font-weight: 700;
}

.sewp-notice p {
   margin-top: 14px;
   color: var(--text);
   font-size: 0.94rem;
   line-height: 1.8;
}

/* ===================== Coming Soon callout ===================== */
.sewp-soon {
   display: flex;
   gap: 14px;
   margin-top: clamp(18px, 2vw, 24px);
   padding: clamp(16px, 1.8vw, 22px);
   border-left: 3px solid var(--gold);
   border-radius: 0 12px 12px 0;
   background: rgba(247, 191, 90, 0.10);
}

.sewp-soon-icon {
   display: grid;
   place-items: center;
   width: 26px;
   height: 26px;
   flex: none;
   color: var(--gold-deep);
}

.sewp-soon-icon svg {
   width: 22px;
   height: 22px;
}

.sewp-soon p {
   margin-top: 0;
   font-size: 0.92rem;
}

.sewp-soon-title {
   margin-bottom: 6px;
   color: var(--navy);
   font-size: 0.88rem;
   font-weight: 700;
   letter-spacing: 0.02em;
}

/* ===================== Lists ===================== */
.sewp-list {
   display: grid;
   gap: 11px;
   margin-top: 14px;
   padding: 0;
   list-style: none;
}

.sewp-list li {
   position: relative;
   padding-left: 26px;
   color: var(--text);
   font-size: 0.92rem;
   line-height: 1.75;
}

.sewp-list li::before {
   content: "";
   position: absolute;
   left: 2px;
   top: 10px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--teal-deep);
}

.sewp-resource-list {
   display: grid;
   gap: 0;
   margin-top: 14px;
   padding: 0;
   list-style: none;
}

.sewp-resource-list li {
   padding: 13px 0;
   border-bottom: 1px solid var(--line);
   font-size: 0.94rem;
}

.sewp-resource-list a {
   color: var(--teal-deep);
   font-weight: 600;
}

.sewp-resource-list a:hover {
   color: var(--navy);
}

/* ===================== Contacts ===================== */
/* Contacts sit in the right-hand column, so they start at the top of it — no
   rule needed to divide them from copy above. */
.sewp-contact-pair {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(18px, 2.4vw, 30px);
}

.sewp-contact-role {
   color: var(--teal-deep);
   font-size: 0.74rem;
   font-weight: 800;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

.sewp-contact-name {
   margin-top: 8px;
   color: var(--navy);
   font-size: 1rem;
   font-weight: 700;
}

.sewp-contact-line {
   margin-top: 4px;
   color: var(--text);
   font-size: 0.9rem;
   line-height: 1.6;
}

.sewp-contact-line a {
   color: var(--teal-deep);
   font-weight: 600;
}

.sewp-contact-line a:hover {
   color: var(--navy);
}

/* ===================== Detail lists ===================== */
.sewp-detail-list {
   display: grid;
   gap: 0;
   margin-top: 16px;
}

.sewp-detail {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
   gap: 4px 16px;
   padding: 11px 0;
   border-bottom: 1px solid var(--line);
}

.sewp-detail dt {
   color: var(--navy);
   font-size: 0.88rem;
   font-weight: 700;
   line-height: 1.5;
}

.sewp-detail dd {
   color: var(--text);
   font-size: 0.9rem;
   line-height: 1.5;
}

.sewp-detail a {
   color: var(--teal-deep);
   font-weight: 600;
}

.sewp-detail a:hover {
   color: var(--navy);
}

/* ===================== Actions ===================== */
.sewp-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 14px;
   margin-top: clamp(22px, 2.6vw, 30px);
}

.sewp-actions .btn-pill {
   height: 54px;
   padding: 0 30px;
   border-radius: 999px;
   background: var(--gold);
   border: 1px solid var(--gold);
   color: var(--navy-deep);
   font-weight: 600;
   font-size: 0.94rem;
   text-transform: none;
   letter-spacing: 0.01em;
}

.sewp-actions .btn-split:hover .btn-pill {
   background: var(--gold-deep);
   border-color: var(--gold-deep);
   color: var(--navy-deep);
}

/* ===================== Responsive ===================== */
@media (max-width: 1000px) {

   .sewp-groups,
   .sewp-notice-grid,
   .sewp-facts-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 760px) {
   .sewp-contact-pair {
      grid-template-columns: 1fr;
   }

   .sewp-fact,
   .sewp-detail {
      grid-template-columns: 1fr;
      gap: 3px;
   }
}