/* Delviom — Awards & Certifications (inner page).
   Layered on top of main.css + index1.css so header, footer and tokens stay
   identical to the approved homepage design. Shares the inner-page banner
   pattern established on the contact page (large-bg-wave + image right). */

/* ===================== 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: 58ch;
   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);
}

/* ===================== Certification grid ===================== */
.certifications {
   /* background: rgb(233, 252, 255); */
   padding-block: clamp(48px, 6vw, 78px);
}

/* Flex (not grid) so the 3-card last row centres under the 4-card first row */
.cert-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: clamp(20px, 2.2vw, 28px);
}

.cert-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   flex: 0 1 calc(25% - 21px);
   min-width: 240px;
   padding: clamp(24px, 2.4vw, 32px) clamp(18px, 2vw, 26px) clamp(22px, 2.2vw, 28px);
   transition: transform .2s ease;
}

.cert-card:hover {
   transform: translateY(-6px);
}

/* Neutral tile behind the logo — the marks have mixed backgrounds */
.cert-logo-wrap {
   display: grid;
   place-items: center;
   width: 100%;
   height: 132px;
   margin-bottom: 20px;
   padding: 12px;
   border-radius: 16px;
   background: var(--off-white);
}

.cert-logo {
   max-width: 100%;
   max-height: 108px;
   width: auto;
   height: auto;
   object-fit: contain;
}

.cert-card h3 {
   color: var(--navy);
   font-size: 1.08rem;
   font-weight: 700;
   letter-spacing: -0.01em;
   line-height: 1.35;
}

.cert-sub {
   margin-top: 6px;
   color: var(--muted);
   font-size: 0.88rem;
   line-height: 1.5;
}

/* ===================== Responsive ===================== */
@media (max-width: 1180px) {
   .cert-card {
      flex: 0 1 calc(33.333% - 19px);
   }
}

@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: 860px) {
   .cert-card {
      flex: 0 1 calc(50% - 14px);
   }
}

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

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

   .cert-card {
      flex: 1 1 100%;
      min-width: 0;
   }
}