/* Delviom — Job openings (inner page), light theme.
   Layered on top of main.css + index1.css so header, footer and tokens stay
   identical to the approved homepage design. Content ported from
   source/venkat site/Careers.html. */

/* ===================== 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.75rem, 3.2vw, 2.5rem);
   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-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-top: clamp(24px, 3vw, 32px);
}

.page-banner .btn-pill {
   height: 54px;
   padding: 0 28px;
   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 .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;
}

.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 header ===================== */
.section-intro {
   max-width: 760px;
   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 p {
   margin-top: 16px;
   color: var(--text);
   line-height: 1.75;
}

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

.metric-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: clamp(18px, 2.2vw, 28px);
}

/* Image tile matching the capabilities page .capability-card — static, no flip */
.metric {
   position: relative;
   display: flex;
   flex-direction: column;
   isolation: isolate;
   min-height: 165px;
   overflow: hidden;
   padding: clamp(20px, 1.8vw, 26px);
   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 */
.metric::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%);
}

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

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

/* Title line above the figure */
.metric-kicker {
   display: block;
   margin-bottom: 10px;
   color: rgba(255, 255, 255, 0.82);
   font-size: 0.72rem;
   font-weight: 800;
   letter-spacing: 0.16em;
   line-height: 1.5;
   text-transform: uppercase;
}

.metric strong {
   display: block;
   color: #fff;
   font-size: clamp(1.5rem, 2.4vw, 2rem);
   font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1.1;
}

/* The location / career-area tiles carry a phrase rather than a figure, so they
   step down to a size that reads as a statement instead of a stat. */
.metric-body .metric-kicker+strong:last-child {
   font-size: clamp(1.02rem, 1.35vw, 1.18rem);
   font-weight: 600;
   letter-spacing: -0.01em;
   line-height: 1.5;
}

.metric span {
   display: block;
   margin-top: 8px;
   color: rgba(255, 255, 255, 0.88);
   font-size: 0.9rem;
   line-height: 1.6;
}

/* ===================== Open roles ===================== */
.open-roles {
   padding-block: clamp(48px, 6vw, 78px);
}

/* ---------- Search / filter band ---------- */
.search-band {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr auto;
   align-items: end;
   gap: clamp(14px, 1.8vw, 20px);
   padding: clamp(20px, 2.4vw, 28px);
   margin-bottom: clamp(26px, 3vw, 36px);
   border-radius: 22px;
   background-color: var(--navy-deep);
   background-image: url("../images/search-cta-bg.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.search-band label {
   display: block;
   margin-bottom: 8px;
   color: rgba(255, 255, 255, 0.9);
   font-size: 0.8rem;
   font-weight: 600;
   letter-spacing: 0.02em;
}

.search-band input,
.search-band select {
   width: 100%;
   height: 52px;
   padding: 0 16px;
   border-radius: 12px;
   border: 1px solid rgba(62, 110, 156, 0.28);
   background: var(--white);
   color: var(--ink);
   font-size: 0.95rem;
   transition: border-color .18s ease, box-shadow .18s ease;
}

.search-band input::placeholder {
   color: var(--steel);
   opacity: 0.85;
}

.search-band input:focus,
.search-band select:focus {
   outline: none;
   border-color: var(--teal);
   box-shadow: 0 0 0 3px rgba(92, 183, 170, 0.18);
}

/* Gold on the wave band — navy would sink into the background */
.search-band button {
   height: 52px;
   padding: 0 30px;
   border-radius: 12px;
   background: var(--gold);
   color: var(--navy-deep);
   font-size: 0.94rem;
   font-weight: 600;
   transition: background-color .18s ease, color .18s ease;
}

.search-band button:hover {
   background: var(--gold-deep);
   color: var(--navy-deep);
}

/* ---------- Job listings ----------
   A divided list rather than stacked cards — rows are separated by a hairline
   and vertical rhythm, so nothing carries a surface of its own. */
.jobs-list {
   display: grid;
   gap: 0;
}

.job-card {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: start;
   gap: clamp(20px, 3vw, 40px);
   padding: clamp(26px, 3vw, 38px) 0;
   border-top: 1px solid var(--line);
   transition: padding-left .22s ease;
}

.job-card:first-child {
   border-top: 0;
   padding-top: 4px;
}

.job-card:last-child {
   border-bottom: 1px solid var(--line);
}

.job-card:hover {
   padding-left: 10px;
}

.job-card:hover h3 {
   color: var(--teal-deep);
}

.job-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 14px;
}

.pill {
   padding: 5px 13px;
   border-radius: 999px;
   background: var(--off-white);
   border: 1px solid var(--line);
   color: var(--text);
   font-size: 0.74rem;
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

/* "Open" reads as the status, so it gets the teal accent */
.pill.status {
   background: rgba(92, 183, 170, 0.14);
   border-color: rgba(92, 183, 170, 0.4);
   color: var(--teal-deep);
   font-weight: 800;
}

/* Roles posted within the last fortnight — gold so it reads apart from the
   teal status pill without competing with it. */
.pill.new {
   background: rgba(247, 191, 90, 0.20);
   border-color: rgba(247, 191, 90, 0.55);
   color: var(--navy);
   font-weight: 800;
}

.job-card h3 {
   color: var(--ink);
   font-size: clamp(1.15rem, 1.8vw, 1.4rem);
   font-weight: 700;
   letter-spacing: -0.01em;
   line-height: 1.3;
   transition: color .22s ease;
}

.job-card p {
   margin-top: 10px;
   color: var(--text);
   font-size: 0.95rem;
   line-height: 1.75;
}

.job-card p strong {
   color: var(--navy);
   font-weight: 700;
}

/* Label introducing the skill pills */
.skill-label {
   display: block;
   margin-top: 18px;
   color: var(--teal-deep);
   font-size: 0.72rem;
   font-weight: 800;
   letter-spacing: 0.16em;
   text-transform: uppercase;
}

.skill-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 16px;
}

.skill-label+.skill-row {
   margin-top: 10px;
}

.skill {
   padding: 5px 12px;
   border-radius: 8px;
   background: rgba(62, 110, 156, 0.09);
   color: var(--steel);
   font-size: 0.78rem;
   font-weight: 600;
}

/* Posting age — the quietest line on the card, sitting under the skills row.
   Overrides the generic .job-card p size so it never reads as body copy. */
.job-card .job-posted {
   display: flex;
   align-items: center;
   gap: 7px;
   margin-top: 16px;
   color: var(--steel);
   font-size: 0.82rem;
   font-weight: 600;
   line-height: 1.4;
}

.job-posted svg {
   width: 15px;
   height: 15px;
   flex: none;
   opacity: 0.85;
}

.job-posted time {
   font-weight: 500;
   opacity: 0.85;
}

.job-actions {
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-width: 190px;
}

.btn-job {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 50px;
   padding: 0 24px;
   border-radius: 999px;
   font-size: 0.92rem;
   font-weight: 600;
   letter-spacing: 0.01em;
   transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn-job--gold {
   background: var(--gold);
   border: 1px solid var(--gold);
   color: var(--navy-deep);
}

.btn-job--gold:hover {
   background: var(--gold-deep);
   border-color: var(--gold-deep);
   transform: translateY(-2px);
}

.btn-job--outline {
   background: var(--white);
   border: 1px solid var(--line);
   color: var(--navy);
}

.btn-job--outline:hover {
   background: var(--navy);
   border-color: var(--navy);
   color: #fff;
   transform: translateY(-2px);
}

/* ---------- Empty state ---------- */
.empty-state {
   display: none;
   padding: clamp(32px, 4vw, 48px);
   border-radius: 22px;
   border: 1px dashed rgba(62, 110, 156, 0.35);
   background: var(--off-white);
   text-align: center;
}

.empty-state.show {
   display: block;
}

.empty-state h3 {
   color: var(--ink);
   font-size: 1.15rem;
   font-weight: 700;
}

.empty-state p {
   margin-top: 8px;
   color: var(--muted);
}

/* Both are display:grid, so [hidden] needs an explicit rule to win. */
.jobs-list[hidden],
.search-band[hidden] {
   display: none;
}

/* ===================== Apply Now modal ===================== */
.apply-modal {
   position: fixed;
   inset: 0;
   z-index: 1300;
   display: grid;
   place-items: center;
   padding: clamp(16px, 4vw, 40px);
   opacity: 0;
   visibility: hidden;
   transition: opacity .2s ease, visibility .2s ease;
}

.apply-modal.active {
   opacity: 1;
   visibility: visible;
}

.apply-modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(7, 21, 40, 0.55);
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
}

.apply-modal-dialog {
   position: relative;
   width: min(760px, 100%);
   max-height: min(88vh, 860px);
   overflow-y: auto;
   border-radius: 24px;
   background: var(--white);
   box-shadow: 0 30px 70px rgba(3, 12, 26, 0.35);
   transform: translateY(14px);
   transition: transform .22s ease;
}

.apply-modal.active .apply-modal-dialog {
   transform: none;
}

.apply-modal-head {
   position: sticky;
   top: 0;
   z-index: 1;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 20px;
   padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 40px) 20px;
   background: var(--white);
   border-bottom: 1px solid var(--line);
}

.apply-modal-head h2 {
   color: var(--ink);
   font-size: clamp(1.25rem, 2vw, 1.6rem);
   font-weight: 700;
   letter-spacing: -0.02em;
}

.apply-modal-position {
   margin-top: 6px;
   color: var(--muted);
   font-size: 0.92rem;
}

.apply-modal-position span {
   color: var(--navy);
   font-weight: 600;
}

.apply-modal-close {
   display: grid;
   place-items: center;
   flex: none;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: var(--off-white);
   color: var(--navy);
   transition: background-color .18s ease, color .18s ease;
}

.apply-modal-close svg {
   width: 18px;
   height: 18px;
}

.apply-modal-close:hover {
   background: var(--navy);
   color: #fff;
}

/* ---------- Form ---------- */
.apply-form {
   padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 34px);
}

.apply-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(14px, 1.8vw, 20px);
}

.apply-field {
   display: block;
}

.apply-field--full {
   grid-column: 1 / -1;
}

.apply-field>span {
   display: block;
   margin-bottom: 8px;
   color: var(--ink);
   font-size: 0.74rem;
   font-weight: 800;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

.apply-field>span em {
   font-style: normal;
   color: var(--gold-deep);
}

.apply-field input,
.apply-field textarea {
   width: 100%;
   padding: 14px 16px;
   border-radius: 12px;
   border: 1px solid rgba(62, 110, 156, 0.28);
   background: var(--white);
   color: var(--ink);
   font-size: 0.95rem;
   transition: border-color .18s ease, box-shadow .18s ease;
}

.apply-field textarea {
   min-height: 118px;
   resize: vertical;
}

.apply-field input::placeholder,
.apply-field textarea::placeholder {
   color: var(--steel);
   opacity: 0.8;
}

.apply-field input:focus,
.apply-field textarea:focus {
   outline: none;
   border-color: var(--teal);
   box-shadow: 0 0 0 3px rgba(92, 183, 170, 0.18);
}

/* Flags a field that failed validation on submit */
.apply-field input.invalid {
   border-color: #b4453b;
   box-shadow: 0 0 0 3px rgba(180, 69, 59, 0.14);
}

.apply-field input[type="file"] {
   padding: 11px 14px;
   cursor: pointer;
}

.apply-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 12px;
   margin-top: clamp(20px, 2.4vw, 28px);
}

.apply-form .form-status {
   margin-top: 16px;
}

.apply-rights {
   margin-top: clamp(20px, 2.4vw, 28px);
   padding-top: clamp(16px, 2vw, 22px);
   border-top: 1px solid var(--line);
}

.apply-rights h3 {
   color: var(--ink);
   font-size: 0.95rem;
   font-weight: 700;
   letter-spacing: -0.005em;
}

.apply-rights p {
   margin-top: 8px;
   color: var(--muted);
   font-size: 0.86rem;
   line-height: 1.7;
}

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

.apply-rights a:hover {
   color: var(--steel);
}

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

/* Connected timeline instead of four cards — the numbered markers are linked
   by a rule that runs across the row. */
.process-grid {
   --step-gap: clamp(18px, 2.2vw, 28px);
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: var(--step-gap);
   /* numbers are ordinal markers, not copy */
   counter-reset: step;
}

.step {
   position: relative;
   padding: 0;
}

.step::before {
   counter-increment: step;
   content: counter(step);
   display: grid;
   place-items: center;
   width: 46px;
   height: 46px;
   margin-bottom: 18px;
   border-radius: 50% 50% 0 50%;
   background: var(--white);
   box-shadow: inset 0 0 0 2px var(--teal);
   color: var(--teal-deep);
   font-size: 1rem;
   font-weight: 800;
}

/* Connector to the next marker, spanning the grid gap */
.step::after {
   content: "";
   position: absolute;
   top: 23px;
   left: 58px;
   right: calc(-1 * var(--step-gap));
   height: 2px;
   background: rgba(92, 183, 170, 0.45);
}

.step:last-child::after {
   display: none;
}

.step h3 {
   color: var(--ink);
   font-size: 1.05rem;
   font-weight: 700;
   letter-spacing: -0.01em;
}

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

/* ===================== General resume CTA ===================== */
.general-resume {
   padding-block: clamp(48px, 6vw, 78px);
}

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

.cta-card-kicker {
   display: block;
   margin-bottom: 12px;
   color: var(--teal-deep);
   font-size: 0.74rem;
   font-weight: 800;
   letter-spacing: 0.16em;
   text-transform: uppercase;
}

.cta-card 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-card p {
   margin-top: 14px;
   margin-inline: auto;
   max-width: 68ch;
   color: var(--text);
   line-height: 1.75;
}

.cta-card .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-card .btn-split:hover .btn-pill {
   background: var(--gold-deep);
   border-color: var(--gold-deep);
   color: var(--navy-deep);
}

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

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

   .search-band button {
      grid-column: 1 / -1;
   }

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

   /* End-of-row markers have nothing to connect to */
   .step:nth-child(even)::after {
      display: none;
   }
}

/* Five steps get tight before the 2-up break, so they go 3-up first */
@media (max-width: 1240px) and (min-width: 1081px) {
   .process-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .step:nth-child(3n)::after {
      display: none;
   }
}

@media (max-width: 760px) {
   .metric-row {
      grid-template-columns: 1fr;
   }

   .job-card {
      grid-template-columns: 1fr;
   }

   .job-actions {
      flex-direction: row;
      flex-wrap: wrap;
      min-width: 0;
   }

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

   .apply-actions .btn-job {
      flex: 1 1 100%;
   }
}

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

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

   .search-band {
      grid-template-columns: 1fr;
   }

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

   .step::after {
      display: none;
   }

   .job-actions .btn-job {
      flex: 1 1 100%;
   }
}

/* Locks the page behind the apply dialog */
body.apply-modal-open {
   overflow: hidden;
}

/* ===================== Applicant notices (EEO) ===================== */
.applicant-notices {
   padding-block: clamp(6px, 1.5vw, 16px) clamp(48px, 6vw, 78px);
}

.notice-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0;
}

/* Padding lives on the blocks so the divider lines stay continuous */
.notice-card:not(:last-child) {
   padding-bottom: clamp(26px, 3vw, 40px);
}

.notice-card+.notice-card {
   padding-top: clamp(26px, 3vw, 40px);
   border-top: 1px solid var(--line);
}

.notice-head {
   display: flex;
   align-items: center;
   gap: 16px;
}

.notice-icon {
   flex: 0 0 auto;
   display: inline-grid;
   place-items: center;
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background-color: var(--navy);
   background-size: cover;
   background-position: center;
   color: #fff;
   box-shadow: 0 8px 18px rgba(11, 31, 58, 0.18);
}

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

.notice-card h2 {
   color: var(--ink);
   font-size: clamp(1.1rem, 1.8vw, 1.35rem);
   font-weight: 700;
   line-height: 1.25;
   letter-spacing: -0.01em;
}

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

.notice-list {
   list-style: none;
   margin-top: 16px;
   display: grid;
   gap: 10px;
}

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

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

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

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