/* Delviom - NASA SEWP VI 'Ordering and Support' card styles.
   Moved out of the inline <style> block in the original sewp.html. */

/* =====================================================================
   Append to the END of css/sewp.css
   ===================================================================== */

/* ===================== Ordering & support ===================== */
/* Eight wave-gradient tiles on the same art and treatment as .sewp-group and
   .ainc-shift-card, run four-up so the ordering path (01-04) and the support
   contacts (05-08) read as two halves of one grid. */
.sewp-order-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: clamp(16px, 2vw, 24px);
}

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

/* Scrim behind the content, same technique as .sewp-group::after */
.sewp-order-card::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-order-card:hover {
   transform: translateY(-4px);
}

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

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

/* Copy anchors to the top of the tile, directly under the icon, so every
   "Step 01-08" label starts at the same height across a row. The auto margin
   pushes the action to the foot, lining the pills up across the row. */
.sewp-order-body {
   margin-bottom: auto;
}

.sewp-order-num {
   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-order-card h3 {
   color: #fff;
   font-size: clamp(1.08rem, 1.45vw, 1.28rem);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.01em;
}

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

.sewp-order-card p a {
   color: var(--gold);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 3px;
}

.sewp-order-card p a:hover {
   color: #fff;
}

/* ----- Contact rows inside a tile (NASA SEWP Customer Support) ----- */
.sewp-order-meta {
   display: grid;
   gap: 9px;
   margin-top: 14px;
   padding: 0;
   list-style: none;
}

.sewp-order-meta li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   color: rgba(255, 255, 255, 0.9);
   font-size: 0.82rem;
   line-height: 1.5;
}

.sewp-order-meta svg {
   width: 15px;
   height: 15px;
   flex: none;
   margin-top: 3px;
   color: var(--gold);
}

.sewp-order-meta a {
   color: #fff;
   font-weight: 600;
   word-break: break-word;
}

.sewp-order-meta a:hover {
   color: var(--gold);
}
/* ----- The NASA insignia is #0b3d91 on transparent, which disappears against
         the tile, so it sits on a white chip sized to the mark ----- */
.sewp-order-logo {
   display: flex;
   align-items: center;
   justify-content: center;
   width: fit-content;
   margin: 16px auto 0;
   /*padding: 9px 13px;*/
   border-radius: 12px;
   /*background: #fff;*/
}

.sewp-order-logo img {
   display: block;
   width: auto;
    height: 80px;
}
/* ----- Named contacts, split off by the same hairline as
         .sewp-group-contract rather than a second card border ----- */
.sewp-order-person {
   margin-top: 14px;
   padding-top: 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.sewp-order-person strong {
   display: block;
   color: #fff;
   font-size: 0.92rem;
   font-weight: 700;
   line-height: 1.3;
}

.sewp-order-person span {
   display: block;
   margin-top: 3px;
   color: rgba(255, 255, 255, 0.72);
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

.sewp-order-person a {
   display: block;
   margin-top: 4px;
   color: var(--gold);
   font-size: 0.82rem;
   font-weight: 600;
   word-break: break-word;
}

.sewp-order-person a:hover {
   color: #fff;
}

/* ----- One pill per tile, sized like .sewp-actions .btn-pill but reversed
         for the dark tile. The ordering guide is the section's single filled
         action so the row keeps one clear primary. ----- */
.sewp-order-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   min-height: 48px;
   margin-top: clamp(16px, 1.8vw, 20px);
   padding: 11px 18px;
   border: 1px solid rgba(255, 255, 255, 0.55);
   border-radius: 999px;
   color: #fff;
   font-size: 0.82rem;
   font-weight: 600;
   line-height: 1.3;
   text-align: center;
   transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

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

.sewp-order-cta:hover {
   background: #fff;
   border-color: #fff;
   color: var(--navy-deep);
}

.sewp-order-cta--primary {
   background: var(--gold);
   border-color: var(--gold);
   color: var(--navy-deep);
}

.sewp-order-cta--primary:hover {
   background: var(--gold-deep);
   border-color: var(--gold-deep);
   color: var(--navy-deep);
}
.solution-section {
    padding-block: clamp(48px, 6vw, 0px);
}
/* ===================== Ordering & support - responsive ===================== */
@media (max-width: 1180px) {
   .sewp-order-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media (max-width: 900px) {
   .sewp-order-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 560px) {
   .sewp-order-grid {
      grid-template-columns: 1fr;
   }

   .sewp-order-card {
      min-height: 0;
   }
}

/* preview only: the site's scroll-reveal JS is not loaded here */
.reveal { opacity: 1 !important; transform: none !important; visibility: visible !important; }