/* Delviom — Business Intelligence (solution detail page).
   Layered on top of main.css + index1.css + capabilities.css + solution.css so
   the banner, proof grids, wave tiles, partner grid and closing CTA are the same
   components the Cybersecurity and DevSecOps pages use. Everything here is the
   small amount of glue this page needs on top. */

/* ===================== What Delviom delivers =====================
   Seven icon columns rather than a bullet list, divided by hairlines so the row
   reads as one band of capabilities. */
.bi-deliver-grid {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   margin-top: clamp(26px, 3vw, 36px);
}

.bi-deliver-item {
   padding: 4px clamp(10px, 1.2vw, 18px);
   text-align: center;
}

.bi-deliver-item+.bi-deliver-item {
   border-left: 1px solid var(--line);
}

.bi-deliver-icon {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   margin: 0 auto 14px;
   color: var(--teal-deep);
}

.bi-deliver-icon svg {
   width: 34px;
   height: 34px;
}

.bi-deliver-item p {
   color: var(--text);
   font-size: 0.86rem;
   line-height: 1.6;
}

@media (max-width: 1180px) {
   .bi-deliver-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      row-gap: clamp(24px, 3vw, 34px);
   }

   /* Only the hairlines inside a row should show */
   .bi-deliver-item+.bi-deliver-item {
      border-left: 1px solid var(--line);
   }

   .bi-deliver-item:nth-child(4n+1) {
      border-left: 0;
   }
}

@media (max-width: 760px) {
   .bi-deliver-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .bi-deliver-item:nth-child(4n+1) {
      border-left: 1px solid var(--line);
   }

   .bi-deliver-item:nth-child(odd) {
      border-left: 0;
   }
}

@media (max-width: 460px) {
   .bi-deliver-grid {
      grid-template-columns: 1fr;
   }

   .bi-deliver-item+.bi-deliver-item {
      border-left: 0;
      border-top: 1px solid var(--line);
      padding-top: 22px;
   }
}

/* ===================== Technology ecosystem =====================
   Five bordered columns, each a category heading over its platforms stacked one
   per row — the reference's logo-wall layout. Each row is a fixed-height slot so
   a platform logo can drop in beside or in place of the name without the
   columns losing their shared rhythm. */
.bi-platform-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: clamp(14px, 1.6vw, 20px);
   align-items: stretch;
}

.bi-platform-card {
   padding: clamp(18px, 2vw, 24px) clamp(12px, 1.4vw, 18px);
   border: 1px solid var(--line);
   border-radius: 16px;
   background: var(--white);
   box-shadow: var(--shadow-card);
   text-align: center;
}

.bi-platform-card h3 {
   margin-bottom: 16px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--line);
   color: var(--teal-deep);
   font-size: 0.9rem;
   font-weight: 700;
   line-height: 1.35;
   letter-spacing: -0.01em;
}

.bi-platform-list {
   display: grid;
   gap: 4px;
   padding: 0;
   list-style: none;
}

.bi-platform-list li {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
   min-height: 42px;
   text-align: left;
   color: var(--navy);
   font-size: 0.88rem;
   font-weight: 600;
   line-height: 1.35;
}

/* Brand mark sits in a fixed slot so the names line up down the column, whether
   or not a given platform has a logo of its own. */
.bi-platform-list img {
   width: 26px;
   height: 26px;
   flex: none;
   object-fit: contain;
}

/* The governance column lists disciplines rather than products, so its rows
   carry a line icon in the same slot the brand marks occupy. */
.bi-platform-icon {
   display: grid;
   place-items: center;
   width: 26px;
   height: 26px;
   flex: none;
   color: var(--teal-deep);
}

.bi-platform-icon svg {
   width: 22px;
   height: 22px;
}

.bi-platform-list--disciplines li {
   align-items: flex-start;
}

.bi-platform-list--disciplines .bi-platform-icon {
   margin-top: 1px;
}

@media (max-width: 1180px) {
   .bi-platform-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media (max-width: 860px) {
   .bi-platform-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

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

/* ===================== Capability tiles =====================
   Label introducing the bullet list inside a .mini-metric, sitting between the
   framing sentence and the list itself. */
.mini-metric-label {
   margin-bottom: 12px;
   color: rgba(255, 255, 255, 0.72);
   font-size: 0.74rem;
   font-weight: 800;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

.mini-metric--gold .mini-metric-label {
   color: rgba(7, 21, 40, 0.66);
}

/* ===================== Industries =====================
   A navy wave panel breaks the run of light bands between Outcomes and Why
   Delviom, and gives the sector list somewhere to sit other than bare white. */
.bi-industries {
   padding-block: clamp(48px, 6vw, 78px);
}

.bi-industries-panel {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   padding: clamp(34px, 4.4vw, 62px) clamp(22px, 3.4vw, 56px);
   border-radius: clamp(20px, 2.4vw, 30px);
   color: #fff;
   background-color: var(--navy-deep);
   background-image: url("../images/large-bg-wave.png");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   box-shadow: 0 24px 60px rgba(7, 21, 40, 0.18);
}

/* Scrim behind the content so the wave art stays readable under the copy */
.bi-industries-panel::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(180deg, rgba(6, 16, 32, 0.34) 0%, rgba(6, 16, 32, 0.62) 100%);
}

.bi-industries-panel .section-intro {
   margin-bottom: clamp(26px, 3.2vw, 40px);
}

.bi-industries-panel .eyebrow {
   color: var(--gold);
}

.bi-industries-panel h2 {
   color: #fff;
}

.bi-industry-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: clamp(12px, 1.5vw, 18px);
   padding: 0;
   list-style: none;
}

/* Glass chips — translucent over the wave art rather than solid cards */
.bi-industry {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 15px 18px;
   border: 1px solid rgba(255, 255, 255, 0.20);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.08);
   color: #fff;
   font-size: 0.92rem;
   font-weight: 600;
   line-height: 1.4;
   transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.bi-industry:hover {
   transform: translateY(-3px);
   border-color: rgba(92, 183, 170, 0.65);
   background: rgba(255, 255, 255, 0.14);
}

.bi-industry-icon {
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   flex: none;
   border-radius: 11px;
   background: rgba(92, 183, 170, 0.22);
   color: #fff;
}

.bi-industry-icon svg {
   width: 24px;
   height: 24px;
}

@media (max-width: 980px) {
   .bi-industry-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

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