/* Delviom — Insights / White Papers (inner page), light theme.
   Layered on top of main.css + index1.css so header, footer and tokens stay
   identical to the approved homepage design. Same inner-page banner pattern as
   the contact / certifications / capabilities / vehicles pages. */

/* ===================== 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(2.2rem, 4.6vw, 3.5rem);
   line-height: 1.1;
   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);
}

/* ===================== Insight grid ===================== */
.insights-main {
   padding-block: clamp(48px, 6vw, 78px);
}

/* Numbered editorial index — a rule and a counter head each entry, so the
   cards read as a numbered series rather than four identical blocks. */
.insight-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: clamp(30px, 3.4vw, 46px) clamp(24px, 3vw, 42px);
   counter-reset: insight;
}

.insight-card {
   display: flex;
   flex-direction: column;
   padding-block: 4px;
   counter-increment: insight;
   transition: transform .2s ease;
}

.insight-card:hover {
   transform: translateY(-5px);
}

/* Flex order puts the rule first, then the numeral, then the copy */
.insight-line {
   order: 1;
   width: 100%;
   height: 3px;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--teal), var(--gold));
}

.insight-card::before {
   content: counter(insight, decimal-leading-zero);
   order: 2;
   margin: 16px 0 12px;
   color: rgba(46, 139, 127, 0.32);
   font-size: clamp(1.7rem, 2.4vw, 2.2rem);
   font-weight: 800;
   line-height: 1;
   letter-spacing: -0.02em;
   transition: color .22s ease;
}

.insight-card:hover::before {
   color: var(--teal-deep);
}

.insight-card h3 {
   order: 3;
   color: var(--ink);
   font-size: 1.1rem;
   font-weight: 700;
   line-height: 1.35;
   letter-spacing: -0.01em;
}

.insight-card p {
   order: 4;
   margin-top: 10px;
   color: var(--text);
   font-size: 0.93rem;
   line-height: 1.7;
}

/* CTA pinned to the card foot so the row stays even */
.insight-card .card-link {
   order: 5;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   align-self: flex-start;
   margin-top: auto;
   padding-top: 22px;
   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;
}

.insight-card .card-link .icon {
   width: 16px;
   height: 16px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

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

/* ===================== Responsive ===================== */
@media (max-width: 1180px) {
   .insight-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@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;
   }

   .insight-grid {
      grid-template-columns: 1fr;
   }
}