/* Delviom — Solution detail pages (Cybersecurity, DevSecOps).
   Layered on top of main.css + index1.css + capabilities.css so the banner,
   proof grids, wave tiles, partner grid and closing CTA are literally the same
   components the Capabilities page uses. Everything here is the small amount of
   glue those pages need on top: section rhythm, a two-column intro, the
   numbered methodology tiles and the credentials strip. */

/* ===================== Banner secondary button ===================== */
/* capabilities.css only styles the solid banner button; this is the same
   outline treatment the job-openings banner uses, so a two-button banner
   matches across every inner page. */
.page-banner .btn-split--outline .btn-pill {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.40);
   color: #fff;
}

.page-banner .btn-split--outline:hover .btn-pill {
   background: rgba(255, 255, 255, 0.10);
   border-color: rgba(255, 255, 255, 0.72);
   color: #fff;
}

/* ===================== Section rhythm ===================== */
.solution-section {
   padding-block: clamp(48px, 6vw, 78px);
}

/* Same tint the Capabilities page uses for its alternating bands */
.solution-section--tint {
   background: rgb(233, 252, 255);
}

/* Left-aligned variant of .section-intro for bands that lead with a statement
   rather than a centred header */
.section-intro--left {
   max-width: 68ch;
   margin-inline: 0;
   text-align: left;
}

/* ===================== Two-column intro ===================== */
/* Statement left, supporting paragraphs right — mirrors .solutions-head. */
.solution-split {
   display: grid;
   grid-template-columns: 0.95fr 1.05fr;
   gap: clamp(28px, 4vw, 64px);
   align-items: start;
}

.solution-split h2 {
   color: var(--navy);
   font-size: clamp(1.5rem, 2.4vw, 2rem);
   font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1.2;
}

.solution-split p {
   color: var(--text);
   font-size: 1rem;
   line-height: 1.8;
}

.solution-split p+p {
   margin-top: 16px;
}

/* Lead-in term inside a .spotlight-item bullet */
.spotlight-item strong {
   color: var(--navy);
   font-weight: 700;
}

/* Pull-quote line for the one-sentence principles in the source copy */
.solution-principle {
   margin-top: clamp(24px, 3vw, 34px);
   padding: 18px 24px;
   border-left: 3px solid var(--gold);
   background: rgba(247, 191, 90, 0.10);
   border-radius: 0 12px 12px 0;
   color: var(--navy);
   font-size: clamp(1rem, 1.3vw, 1.12rem);
   font-weight: 600;
   line-height: 1.6;
}

/* ===================== Methodology tiles ===================== */
/* Four numbered steps reuse the .mini-metric wave tile, two per row. */
.mini-metric-grid--pairs {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mini-metric-step {
   display: grid;
   place-items: center;
   width: 52px;
   height: 52px;
   flex: none;
   border-radius: 50%;
   background: var(--gold);
   color: var(--navy-deep);
   font-size: 1.15rem;
   font-weight: 800;
   line-height: 1;
}

.mini-metric--gold .mini-metric-step {
   background: var(--navy-deep);
   color: var(--gold);
}

/* The cyan wave art is far brighter than the navy tiles capabilities.css was
   written for, so white copy needs a heavier scrim to stay readable on it. */
.mini-metric--cyan::after {
   background: linear-gradient(180deg, rgba(6, 16, 32, 0.58) 0%, rgba(6, 16, 32, 0.78) 100%);
}

/* Single-sentence framing under a tile heading, above its bullet list */
.mini-metric-note {
   margin: -6px 0 16px;
   color: rgba(255, 255, 255, 0.86);
   font-size: 0.92rem;
   line-height: 1.6;
}

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

/* ===================== Row-fill modifiers =====================
   capabilities.css lays both grids out three-up, which leaves a lone card
   stranded on a second row when a section has four items, and two cards hanging
   left when it has five. These modifiers fix the count to the content.

   Both restate their own breakpoints: media queries add no specificity, so a
   plain override here would otherwise beat the responsive rules in
   capabilities.css at every width. */

/* Four items, four columns — no orphan. */
.capability-proof-grid--quad {
   grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1080px) {
   .capability-proof-grid--quad {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 620px) {
   .capability-proof-grid--quad {
      grid-template-columns: 1fr;
   }
}

/* Five tiles — flex rather than grid so the trailing two centre under the
   first three instead of sitting hard left. Gap is inherited from the base
   .mini-metric-grid rule, which applies to flex containers too. */
.mini-metric-grid--center {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.mini-metric-grid--center>.mini-metric {
   flex: 0 1 calc((100% - 2 * clamp(16px, 1.8vw, 26px)) / 3);
   min-width: 0;
}

@media (max-width: 1080px) {
   .mini-metric-grid--center>.mini-metric {
      flex-basis: 100%;
   }
}

/* ===================== Closing-CTA fine print =====================
   Sits inside .cta-panel, below the button, so a page can close on its call to
   action, its privacy statement and its sign-off as one block. .cta-panel is a
   centred flex column, so both inherit the centring. */

/* Quieter and narrower than .cta-panel p — this is a disclosure, not the pitch.
   The extra .cta-panel prefix beats the `.cta-panel p` max-width. */
.cta-panel .cta-privacy {
   max-width: 78ch;
   margin-top: clamp(18px, 2.2vw, 26px);
   padding-top: clamp(16px, 2vw, 22px);
   border-top: 1px solid var(--line);
   color: var(--text);
   font-size: 0.88rem;
   line-height: 1.7;
   opacity: 0.9;
}

.cta-panel .cta-privacy strong {
   color: var(--navy);
   font-weight: 700;
}

/* Sign-off line — brand voice, so it carries the gold rule under it. */
.cta-panel .cta-signature {
   margin-top: clamp(14px, 1.8vw, 18px);
   color: var(--navy);
   font-size: clamp(0.95rem, 1.2vw, 1.05rem);
   font-weight: 700;
   letter-spacing: 0.01em;
}

.cta-panel .cta-signature::after {
   content: "";
   display: block;
   width: 46px;
   height: 3px;
   margin: 12px auto 0;
   border-radius: 999px;
   background: var(--gold);
}

/* Two buttons in a closing CTA — .cta-panel is a centred column, so the pair
   needs its own row to sit side by side, wrapping on narrow screens. */
.cta-panel-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 14px;
}

.cta-panel .btn-split--outline .btn-pill {
   background: transparent;
   border: 1px solid var(--line);
   color: var(--navy);
}

.cta-panel .btn-split--outline:hover .btn-pill {
   background: var(--navy);
   border-color: var(--navy);
   color: #fff;
}

/* ===================== Credentials strip ===================== */
.credential-list {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: clamp(20px, 2.4vw, 28px);
   padding: 0;
   list-style: none;
}

.credential-chip {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 10px 18px;
   border: 1px solid rgba(46, 139, 127, 0.28);
   border-radius: 999px;
   background: #fff;
   color: var(--navy);
   font-size: 0.88rem;
   font-weight: 600;
   line-height: 1.3;
}

.credential-chip::before {
   content: "";
   width: 17px;
   height: 17px;
   flex: none;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232E8B7F'/%3E%3Cpath d='M5.9 10.2l2.6 2.6 5.4-5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===================== Responsive ===================== */
/* capabilities.css collapses .mini-metric-grid to one column at 1080px. The
   two-up variant has room to hold its pair longer, so it is restated here
   (same specificity, later file) and drops to one column at 900px instead. */
@media (max-width: 900px) {
   .solution-split {
      grid-template-columns: 1fr;
   }

   .mini-metric-grid--pairs {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 620px) {
   .solution-principle {
      padding: 16px 18px;
   }
}