/* Delviom — Careers (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 capabilities page, then stacked content sections for the careers 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-copy>p+p {
   margin-top: 16px;
}

.page-banner-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-top: clamp(24px, 3vw, 32px);
}

.page-banner .btn-pill {
   height: 54px;
   padding: 0 24px;
   border-radius: 999px;
   font-weight: 600;
   font-size: 0.92rem;
   text-transform: none;
   letter-spacing: 0.01em;
}

.page-banner .btn-split--solid .btn-pill {
   background: var(--gold);
   border: 1px solid var(--gold);
   color: var(--navy-deep);
}

.page-banner .btn-split--solid:hover .btn-pill {
   background: var(--gold-deep);
   border-color: var(--gold-deep);
   color: var(--navy-deep);
}

.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);
}

/* ===================== Shared section intro ===================== */
.section-intro {
   max-width: 800px;
   margin-inline: auto;
   margin-bottom: clamp(28px, 3.5vw, 42px);
   text-align: center;
}

.section-intro h2 {
   color: var(--ink);
   font-size: clamp(1.5rem, 2.6vw, 2.05rem);
   font-weight: 700;
   line-height: 1.12;
   letter-spacing: -0.01em;
}

.section-intro .section-lead {
   margin-top: 14px;
   color: var(--teal-deep);
   font-size: clamp(1rem, 1.3vw, 1.12rem);
   font-weight: 600;
   line-height: 1.6;
}

.section-intro p {
   margin-top: 16px;
   color: var(--text);
   line-height: 1.8;
}

/* ===================== Opening statement =====================
   Same band + two-column split the solution detail pages use, so the careers
   opener reads with the identical rhythm as Cybersecurity / DevSecOps. */
.solution-section {
   padding-block: clamp(48px, 6vw, 78px);
}

.solution-section--tint {
   background: rgb(233, 252, 255);
}

/* Statement left, supporting paragraphs right */
.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;
}

/* Teal label above the statement — same treatment the solution pages use */
.spotlight-kicker {
   display: block;
   color: var(--teal-deep);
   font-size: 0.74rem;
   font-weight: 800;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   line-height: 1.7;
   margin-top: 14px;
}

/* ===================== Card grids (Why Delviom / Benefits) ===================== */
.careers-why {
   padding-block: clamp(48px, 6vw, 78px);
}

.careers-benefits {
   padding-block: clamp(48px, 6vw, 78px);
   background-color: rgb(233, 252, 255);
}

.career-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: clamp(16px, 2vw, 26px);
}

.career-grid--benefits {
   grid-template-columns: repeat(4, 1fr);
}

/* Wave-gradient tiles — the same art and treatment as .capability-card on the
   capabilities page and the shift cards on the AI-native page, so every card
   row across the site reads as one system. */
.career-tile {
   position: relative;
   display: flex;
   flex-direction: column;
   isolation: isolate;
   min-height: 360px;
   overflow: hidden;
   padding: clamp(18px, 1.6vw, 24px);
   border-radius: 20px;
   color: #fff;
   background-color: var(--navy-deep);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   transition: transform .22s ease;
}

/* Scrim sits behind the content so no child needs a positive z-index */
.career-tile::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(180deg, rgba(6, 16, 32, 0) 12%, rgba(6, 16, 32, 0.78) 78%);
}

.career-tile:hover {
   transform: translateY(-4px);
}

.career-tile-icon {
   display: inline-grid;
   place-items: center;
   width: 46px;
   height: 46px;
   color: #fff;
}

.career-tile-icon svg {
   width: 38px;
   height: 38px;
}

/* Copy anchors to the bottom of the tile */
.career-tile-body {
   margin-top: auto;
}

.career-tile h3 {
   color: #fff;
   font-size: clamp(1.2rem, 1.6vw, 1.4rem);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.01em;
}

.career-tile p {
   margin-top: 10px;
   color: rgba(255, 255, 255, 0.88);
   font-size: 0.92rem;
   line-height: 1.55;
}

/* Benefits cards — icon + heading + copy, no card chrome. Same treatment the
   homepage and capabilities page use for .capability-proof-card and the
   AI-native page uses for .ainc-property-card. */
.benefit-card {
   padding-block: 4px;
}

.benefit-icon {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   margin-bottom: 12px;
   color: var(--teal-deep);
}

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

.benefit-card h3 {
   color: var(--navy);
   font-size: 1.02rem;
   font-weight: 700;
   letter-spacing: -0.01em;
}

.benefit-card p {
   margin-top: 8px;
   color: var(--text);
   font-size: 0.93rem;
   line-height: 1.7;
}

/* ===================== Great Place to Work ===================== */
.careers-culture {
   padding-block: clamp(48px, 6vw, 78px);
}

/* Split card: navy text panel on the left, image on the right — the same
   component the homepage uses for its company overview (.overview-grid). */
.culture-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: stretch;
   border-radius: clamp(20px, 2.4vw, 32px);
   overflow: hidden;
   box-shadow: 0 24px 60px rgba(7, 21, 40, 0.14);
}

.culture-panel {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: clamp(30px, 4vw, 60px);
   background:
      linear-gradient(155deg, rgba(7, 21, 40, 0.25) 0%, rgba(7, 21, 40, 0.55) 100%),
      url("../images/search-cta-bg.png") center / cover no-repeat,
      var(--navy-deep);
   color: #fff;
}

.culture-panel .eyebrow {
   color: var(--teal);
   margin-bottom: 14px;
}

.culture-title {
   margin: 0 0 18px;
   color: #fff;
   font-size: clamp(1.5rem, 2.6vw, 2.05rem);
   font-weight: 700;
   line-height: 1.18;
   letter-spacing: -0.01em;
}

.culture-panel p {
   color: rgba(255, 255, 255, 0.82);
   font-size: clamp(0.98rem, 1.2vw, 1.08rem);
   line-height: 1.7;
}

.culture-panel p+p {
   margin-top: 14px;
}

/* Right side image fills the card height */
.culture-media {
   position: relative;
   min-height: 100%;
}

.culture-media img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* ===================== Closing CTA ===================== */
.cta-panel-wrap {
   background-color: rgb(233, 252, 255);
   padding-block: clamp(48px, 4vw, 78px);
}

.cta-panel {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 22px;
}

.cta-panel h2 {
   color: var(--ink);
   font-size: clamp(1.4rem, 2.4vw, 2.05rem);
   font-weight: 700;
   line-height: 1.12;
   letter-spacing: -0.01em;
}

.cta-panel p {
   margin-top: 14px;
   margin-inline: auto;
   max-width: 62ch;
   color: var(--text);
   line-height: 1.75;
}

.cta-panel .btn-pill {
   height: 54px;
   padding: 0 30px;
   border-radius: 999px;
   background: var(--gold);
   border: 1px solid var(--gold);
   color: var(--navy-deep);
   font-weight: 600;
   font-size: 0.94rem;
   text-transform: none;
   letter-spacing: 0.01em;
}

.cta-panel .btn-split:hover .btn-pill {
   background: var(--gold-deep);
   border-color: var(--gold-deep);
   color: var(--navy-deep);
}

/* ===================== Fraud Notice ===================== */
.fraud-notice-wrap {
   padding-block: clamp(48px, 6vw, 78px);
}

.fraud-notice {
   max-width: 1000px;
   margin-inline: auto;
}

.fraud-notice-head {
   display: flex;
   align-items: center;
   gap: 12px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--line);
}

.fraud-notice-icon {
   flex: 0 0 auto;
   display: inline-grid;
   place-items: center;
   color: var(--gold-deep);
}

.fraud-notice-icon svg {
   width: 30px;
   height: 30px;
}

.fraud-notice h2 {
   color: var(--ink);
   font-size: clamp(1.25rem, 2.1vw, 1.65rem);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.01em;
}

.fraud-notice p {
   color: var(--text);
   line-height: 1.85;
   margin-top: 16px;
}

.fraud-notice-list {
   list-style: none;
   margin-top: 20px;
   display: grid;
   gap: 14px;
}

.fraud-notice-list li {
   position: relative;
   padding-left: 26px;
   color: var(--text);
   line-height: 1.85;
}

.fraud-notice-list li::before {
   content: "";
   position: absolute;
   left: 2px;
   top: 11px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--teal-deep);
}

.fraud-notice-list li strong {
   display: block;
   color: var(--ink);
   font-weight: 600;
}

.fraud-notice-subtitle {
   margin-top: 32px;
   color: var(--ink);
   font-size: clamp(1.05rem, 1.6vw, 1.2rem);
   font-weight: 700;
   letter-spacing: -0.005em;
}

.fraud-notice a {
   color: var(--teal-deep);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 3px;
}

.fraud-notice a:hover {
   color: var(--steel);
}

.fraud-notice-final {
   margin-top: 28px;
   padding-top: 20px;
   border-top: 1px solid var(--line);
   color: var(--ink);
   font-weight: 600;
}

/* ===================== 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%;
   }

   .career-grid,
   .career-grid--benefits {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 900px) {
   .solution-split {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 860px) {
   .culture-grid {
      grid-template-columns: 1fr;
   }

   .culture-media {
      min-height: 240px;
      order: -1;
   }

   .culture-media img {
      position: static;
      height: 240px;
   }
}

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

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

   .career-grid,
   .career-grid--benefits {
      grid-template-columns: 1fr;
   }
}