/* Delviom — Insight article (inner page), light theme.
   Layered on top of main.css + index1.css so header, footer and tokens stay
   identical to the rest of the site. Reuses the same inner-page banner
   pattern as the insights / certifications / capabilities pages, then adds a
   single-column reading measure for long-form white paper copy. */

/* ===================== Inner banner (large-bg-wave) ===================== */
.page-banner {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   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;
   border-bottom-left-radius: 40px;
   border-bottom-right-radius: 40px;
   padding-top: calc(var(--header-height) + clamp(30px, 4vw, 56px));
   padding-bottom: clamp(48px, 5.5vw, 76px);
}

.page-banner-inner {
   display: grid;
   grid-template-columns: 1fr 0.92fr;
   align-items: center;
   gap: clamp(32px, 5vw, 72px);
}

.page-banner .eyebrow {
   color: var(--gold);
   margin-bottom: 12px;
}

.page-banner-title {
   font-size: clamp(1.9rem, 3.6vw, 2.9rem);
   line-height: 1.15;
   font-weight: 700;
   letter-spacing: -0.02em;
   color: #fff;
}

.page-banner-lead {
   margin-top: clamp(18px, 2.2vw, 26px);
   max-width: 60ch;
   color: rgba(245, 247, 250, 0.86);
   font-size: clamp(1rem, 1.25vw, 1.1rem);
   line-height: 1.75;
}

.page-banner-media {
   justify-self: end;
   width: 100%;
   max-width: 620px;
}

.page-banner-media img {
   width: 100%;
   height: clamp(300px, 30vw, 420px);
   object-fit: cover;
   object-position: center;
   border-radius: 22px;
   box-shadow: 0 26px 60px rgba(3, 12, 26, 0.42);
}

/* ===================== Article body ===================== */
.article-main {
   padding-block: clamp(40px, 5vw, 70px);
}

.article-shell {
   max-width: 880px;
   margin-inline: auto;
}

/* Back link — same uppercase micro-CTA treatment as the insight cards */
.article-back {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   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;
}

.article-back .icon {
   width: 16px;
   height: 16px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.article-back:hover {
   color: var(--navy);
   gap: 12px;
}

.article-body {
   margin-top: clamp(26px, 3vw, 38px);
}

.article-body h2 {
   position: relative;
   margin-top: clamp(34px, 4vw, 50px);
   padding-top: 20px;
   color: var(--ink);
   font-size: clamp(1.2rem, 1.9vw, 1.5rem);
   font-weight: 700;
   line-height: 1.35;
   letter-spacing: -0.01em;
}

.article-body h2::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 56px;
   height: 3px;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--teal), var(--gold));
}

.article-body p {
   margin-top: 18px;
   color: var(--text);
   font-size: clamp(0.97rem, 1.1vw, 1.03rem);
   line-height: 1.85;
}

.article-body h2 + p {
   margin-top: 14px;
}

/* Figures — the infographics are portrait/square, so they are centred at
   their natural proportions instead of being cropped to a band. */
.article-figure {
   margin-block: clamp(30px, 3.6vw, 44px);
   text-align: center;
}

.article-figure img {
   width: 100%;
   height: auto;
   margin-inline: auto;
   border-radius: 18px;
   border: 1px solid var(--line);
   box-shadow: var(--shadow-card);
}

.article-figure--diagram img {
   max-width: 520px;
}

.article-figure--poster img {
   max-width: 620px;
}

/* ===================== Responsive ===================== */
@media (max-width: 1080px) {
   .page-banner-inner {
      grid-template-columns: 1fr;
      gap: clamp(34px, 5vw, 48px);
   }

   .page-banner-media {
      justify-self: stretch;
      max-width: 100%;
   }
}

@media (max-width: 620px) {
   .page-banner {
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
   }

   .page-banner-media img {
      border-radius: 18px;
   }

   .article-figure img {
      border-radius: 14px;
   }
}