.career-page main { overflow: clip; }
.career-page .button { border-radius: 4px; }

.career-hero { background: var(--color-bg); }
.career-hero__grid { min-height: 720px; display: grid; grid-template-columns: minmax(460px,.9fr) minmax(600px,1.1fr); align-items: center; gap: clamp(3rem,6vw,7.5rem); padding-block: clamp(4.5rem,7vw,7.5rem); }
.career-hero__copy h1 { max-width: 760px; margin: 0 0 1.6rem; font-size: clamp(4rem,5.25vw,5.9rem); line-height: .95; letter-spacing: -.07em; text-wrap: balance; }
.career-hero__copy > p { max-width: 650px; margin: 0 0 2rem; color: var(--color-muted); font-size: clamp(1rem,1.3vw,1.22rem); line-height: 1.72; }
.career-hero__copy .hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.career-hero__media { position: relative; margin: 0; }
.career-hero__media::before { content: ""; position: absolute; z-index: -1; top: -26px; right: -26px; width: 44%; height: 44%; border-top: 2px solid var(--color-primary); border-right: 2px solid var(--color-primary); }
.career-hero__media img { width: 100%; aspect-ratio: 3/2; display: block; object-fit: cover; border: 1px solid var(--color-border-strong); }
.career-hero__media > span { position: absolute; right: -14px; bottom: -14px; width: 44%; height: 44%; border-right: 1px solid color-mix(in srgb,var(--color-primary) 55%,transparent); border-bottom: 1px solid color-mix(in srgb,var(--color-primary) 55%,transparent); pointer-events: none; }

.career-benefits { padding-block: clamp(6.5rem,8vw,9rem); background: var(--color-bg); }
.career-benefits__heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,.85fr); align-items: end; gap: 4rem; margin-bottom: 3.8rem; }
.career-benefits__heading h2 { max-width: 780px; margin: 0; font-size: clamp(3.2rem,4.7vw,5.2rem); line-height: .96; letter-spacing: -.065em; }
.career-benefits__heading > p { max-width: 640px; justify-self: end; margin: 0; padding-left: 1.5rem; color: var(--color-muted); border-left: 1px solid var(--color-border-strong); font-size: clamp(.9rem,1.15vw,1.05rem); line-height: 1.75; }
.career-benefits__rail { display: grid; grid-template-columns: repeat(3,1fr); margin-block: 0; padding-block: 0; border-top: 1px solid var(--color-border-strong); list-style: none; }
.career-benefits__rail li { position: relative; min-height: 280px; display: grid; grid-template-columns: 64px minmax(0,1fr); align-content: start; gap: 1.5rem; padding: 2.2rem clamp(1.4rem,2.4vw,2.5rem); border-right: 1px solid var(--color-border-strong); }
.career-benefits__rail li:first-child { padding-left: 0; }.career-benefits__rail li:last-child { padding-right: 0; border-right: 0; }
.career-benefits__rail li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--color-primary); }
.career-benefits__rail li > span { color: var(--color-muted-deep); font-size: 1rem; font-weight: 700; }
.career-benefits__rail h3 { margin: 0 0 .8rem; font-size: clamp(1.15rem,1.55vw,1.45rem); line-height: 1.25; }
.career-benefits__rail p { max-width: 390px; margin: 0; color: var(--color-muted); font-size: .88rem; line-height: 1.72; }

.career-roles { padding-block: clamp(6.5rem,8vw,9rem); background: var(--color-bg-elevated); }
.career-roles__heading { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(380px,.85fr); align-items: end; gap: 4rem; margin-bottom: 4rem; }
.career-roles__heading small { display: block; margin-bottom: 1.2rem; color: var(--color-primary); font-size: .67rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.career-roles__heading h2 { max-width: 900px; margin: 0; font-size: clamp(3.35rem,5vw,5.5rem); line-height: .94; letter-spacing: -.07em; }
.career-roles__heading > p { max-width: 560px; justify-self: end; margin: 0; color: var(--color-muted); font-size: .96rem; line-height: 1.75; }
.career-roles__layout { display: grid; grid-template-columns: minmax(320px,.72fr) minmax(0,1.28fr); border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }
.career-roles__tabs { border-right: 1px solid var(--color-border-strong); }
.career-roles__tabs button { position: relative; width: 100%; min-height: 96px; display: grid; grid-template-columns: minmax(0,1fr) 30px; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; color: var(--color-text); background: transparent; border: 0; border-bottom: 1px solid var(--color-border); text-align: left; cursor: pointer; transition: color 180ms ease,background 180ms ease,padding 180ms ease; }
.career-roles__tabs button:last-child { border-bottom: 0; }
.career-roles__tabs button::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 3px; background: transparent; }
.career-roles__tabs button:hover,.career-roles__tabs button:focus-visible { background: color-mix(in srgb,var(--color-primary) 6%,transparent); }
.career-roles__tabs button:focus-visible { z-index: 2; outline: 2px solid #a8aaff; outline-offset: -3px; }
.career-roles__tabs button[aria-selected="true"] { padding-left: 1.8rem; color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 8%,transparent); }
.career-roles__tabs button[aria-selected="true"]::before { background: var(--color-primary); }
.career-roles__tabs button span { min-width: 0; display: grid; gap: .3rem; }
.career-roles__tabs button small { color: var(--color-muted-deep); font-size: .57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.career-roles__tabs button strong { font-size: clamp(.92rem,1.15vw,1.08rem); line-height: 1.3; }
.career-roles__tabs button i { position: relative; width: 18px; height: 18px; justify-self: end; }
.career-roles__tabs button i::before,.career-roles__tabs button i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1px; background: currentColor; transform: translate(-50%,-50%); }
.career-roles__tabs button i::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform 180ms ease; }
.career-roles__tabs button[aria-selected="true"] i::after { transform: translate(-50%,-50%) rotate(0); }
.career-roles__panels { min-width: 0; padding: clamp(2rem,4vw,4rem); }
.career-roles__panels article { animation: career-panel-in 260ms ease both; }
.career-roles__panels article[hidden] { display: none; }
.career-roles__panels header { padding-bottom: 2.2rem; border-bottom: 1px solid var(--color-border-strong); }
.career-roles__panels header small { display: block; margin-bottom: .75rem; color: var(--color-primary); font-size: .62rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.career-roles__panels h3 { margin: 0 0 1rem; font-size: clamp(2rem,3vw,3.3rem); line-height: 1; letter-spacing: -.05em; }
.career-roles__panels header p { max-width: 790px; margin: 0; color: var(--color-muted); font-size: .9rem; line-height: 1.75; }
.career-role__details { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-top: 2.5rem; }
.career-role__details section { padding-right: clamp(1.5rem,3vw,3rem); }
.career-role__details section + section { padding-right: 0; padding-left: clamp(1.5rem,3vw,3rem); border-left: 1px solid var(--color-border-strong); }
.career-role__details h4 { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.3rem; font-size: .94rem; }
.career-role__details h4 svg { width: 27px; height: 27px; flex: 0 0 auto; fill: none; stroke: var(--color-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.career-role__details ul { display: grid; gap: .85rem; margin: 0; padding: 0; color: var(--color-muted); list-style: none; }
.career-role__details li { position: relative; padding-left: 1rem; font-size: .78rem; line-height: 1.65; }
.career-role__details li::before { content: ""; position: absolute; top: .63em; left: 0; width: 4px; height: 4px; background: var(--color-primary); }

.career-application { padding-block: clamp(6.5rem,8vw,9rem); background: color-mix(in srgb,var(--color-primary) 7%,var(--color-bg)); }
.career-application__heading { max-width: 1050px; margin-bottom: 4rem; }
.career-application__heading h2 { margin: 0 0 1rem; font-size: clamp(3.1rem,4.7vw,5.1rem); line-height: .96; letter-spacing: -.065em; }
.career-application__heading p { max-width: 760px; margin: 0; color: var(--color-muted); font-size: .95rem; line-height: 1.75; }
.career-application__steps { display: grid; grid-template-columns: repeat(4,1fr); margin-block: 0; padding-block: 0; list-style: none; }
.career-application__steps li { position: relative; min-height: 260px; padding: 0 clamp(1.3rem,2.3vw,2.4rem); border-right: 1px solid var(--color-border-strong); }
.career-application__steps li:first-child { padding-left: 0; }.career-application__steps li:last-child { padding-right: 0; border-right: 0; }
.career-application__steps li::after { content: ""; position: absolute; top: 27px; right: 0; width: 42%; height: 1px; background: color-mix(in srgb,var(--color-primary) 32%,var(--color-border)); transform: translateX(50%); }
.career-application__steps li:last-child::after { display: none; }
.career-application__steps i { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 1.3rem; color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 9%,var(--color-bg)); border: 1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-border)); border-radius: 50%; font-style: normal; }
.career-application__steps svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.career-application__steps > li > span { display: block; margin-bottom: .45rem; color: var(--color-primary); font-size: .62rem; font-weight: 750; }
.career-application__steps h3 { margin: 0 0 .7rem; font-size: 1rem; }
.career-application__steps p { max-width: 270px; margin: 0; color: var(--color-muted); font-size: .78rem; line-height: 1.65; }

.career-cta { color: #fff; background: var(--color-primary); }
.career-cta__grid { min-height: 260px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3rem; padding-block: 4rem; }
.career-cta h2 { margin: 0 0 .7rem; color: #fff; font-size: clamp(2.7rem,4vw,4.2rem); line-height: .98; letter-spacing: -.055em; }
.career-cta p { margin: 0; color: #eeeeff; font-size: .96rem; line-height: 1.7; }
.career-cta .button { min-width: 230px; justify-content: space-between; color: #171938; background: #fff; border-color: #fff; box-shadow: 0 18px 45px rgba(29,31,94,.2); }

html[data-theme="light"] .career-page .career-hero,html[data-theme="light"] .career-page .career-benefits { background: #fff; }
html[data-theme="light"] .career-page .career-roles { background: #f7f8fb; }
html[data-theme="light"] .career-page .career-application { background: #f2f3ff; }
html[data-theme="light"] .career-page .career-application__steps i { background: #e7e8ff; }

@keyframes career-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1240px) {
    .career-hero__grid { grid-template-columns: minmax(390px,.9fr) minmax(500px,1.1fr); gap: 3rem; }
    .career-roles__layout { grid-template-columns: minmax(280px,.68fr) minmax(0,1.32fr); }
}

@media (max-width: 980px) {
    .career-hero__grid { min-height: 0; grid-template-columns: 1fr; padding-block: 5.5rem 7rem; }
    .career-hero__copy h1 { max-width: 820px; }
    .career-hero__media { width: min(100%,820px); }
    .career-benefits__heading,.career-roles__heading { grid-template-columns: 1fr; gap: 1.5rem; }
    .career-benefits__heading > p,.career-roles__heading > p { justify-self: start; }
    .career-benefits__rail { grid-template-columns: 1fr; }
    .career-benefits__rail li,.career-benefits__rail li:first-child,.career-benefits__rail li:last-child { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--color-border-strong); }
    .career-benefits__rail li:last-child { border-bottom: 0; }
    .career-benefits__rail li::before { display: none; }
    .career-roles__layout { grid-template-columns: 1fr; }
    .career-roles__tabs { display: grid; grid-template-columns: repeat(2,1fr); border-right: 0; border-bottom: 1px solid var(--color-border-strong); }
    .career-roles__tabs button { border-right: 1px solid var(--color-border); }
    .career-roles__tabs button:nth-child(2n) { border-right: 0; }
    .career-roles__panels { padding: 2.5rem 0; }
    .career-application__steps { grid-template-columns: repeat(2,1fr); gap: 3rem 0; }
    .career-application__steps li:nth-child(2n) { border-right: 0; }
    .career-application__steps li:nth-child(2n)::after { display: none; }
}

@media (max-width: 680px) {
    .career-hero__grid { padding-block: 4.5rem 5.5rem; }
    .career-hero__copy h1 { font-size: clamp(3.2rem,14vw,4.2rem); }
    .career-hero__copy > p { font-size: .94rem; }
    .career-hero__copy .hero__actions { display: grid; }
    .career-hero__copy .button { width: 100%; }
    .career-hero__media::before { top: -12px; right: -12px; }
    .career-hero__media > span { right: -7px; bottom: -7px; }
    .career-benefits__heading h2,.career-roles__heading h2,.career-application__heading h2 { font-size: clamp(2.8rem,12vw,3.7rem); }
    .career-benefits__heading > p { padding: 1rem 0 0; border-top: 1px solid var(--color-border-strong); border-left: 0; }
    .career-benefits__rail li { grid-template-columns: 48px minmax(0,1fr); gap: .8rem; }
    .career-roles__tabs { grid-template-columns: 1fr; }
    .career-roles__tabs button,.career-roles__tabs button:nth-child(2n) { min-height: 84px; padding-inline: 1rem; border-right: 0; }
    .career-roles__tabs button[aria-selected="true"] { padding-left: 1.35rem; }
    .career-roles__panels h3 { font-size: 2.25rem; }
    .career-role__details { grid-template-columns: 1fr; gap: 2.5rem; }
    .career-role__details section,.career-role__details section + section { padding: 0; border-left: 0; }
    .career-role__details section + section { padding-top: 2.5rem; border-top: 1px solid var(--color-border-strong); }
    .career-application__steps { grid-template-columns: 1fr; gap: 0; }
    .career-application__steps li,.career-application__steps li:first-child,.career-application__steps li:last-child { min-height: 0; padding: 1.8rem 0; border-right: 0; border-bottom: 1px solid var(--color-border-strong); }
    .career-application__steps li:first-child { padding-top: 0; }.career-application__steps li:last-child { padding-bottom: 0; border-bottom: 0; }
    .career-application__steps li::after { display: none; }
    .career-cta__grid { grid-template-columns: 1fr; gap: 2rem; padding-block: 4rem; }
    .career-cta .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .career-roles__panels article { animation: none; }
    .career-roles__tabs button { transition: none; }
}
