.careers-page {
  --career-blue: #4169E1;
  --career-sky: #45B1E8;
  --career-red: #FF5D47;
}

.career-brand { display: inline-flex; align-items: center; gap: 13px; }
.career-brand > span { padding-left: 13px; border-left: 1px solid var(--line); color: var(--navy); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.career-hero {
  position: relative;
  min-height: 880px;
  padding: 138px 24px 90px;
  overflow: hidden;
}
.career-hero::before,
.career-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}
.career-hero::before { width: 620px; height: 620px; right: -160px; top: 40px; background: radial-gradient(circle, rgba(69,177,232,.28), rgba(69,177,232,0) 69%); }
.career-hero::after { width: 480px; height: 480px; left: -190px; bottom: -140px; background: radial-gradient(circle, rgba(255,199,0,.18), rgba(255,199,0,0) 69%); }
.career-hero-shell { position: relative; z-index: 1; max-width: var(--max); min-height: 650px; margin: 0 auto; display: grid; grid-template-columns: .96fr 1.04fr; gap: 76px; align-items: center; }
.career-hero-copy > p:not(.eyebrow) { max-width: 630px; margin-bottom: 33px; color: #4f5a6e; font-size: 19px; line-height: 1.66; }
.career-hero-copy h1 { font-size: clamp(58px, 6.8vw, 91px); }
.career-hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 36px; }
.career-hero-proof div { min-width: 0; padding: 14px 15px; border: 1px solid rgba(52,64,85,.10); border-radius: 17px; background: rgba(255,255,255,.58); }
.career-hero-proof strong, .career-hero-proof span { display: block; }
.career-hero-proof strong { color: var(--navy); font-size: 12px; }
.career-hero-proof span { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }

.career-hero-visual { position: relative; min-height: 610px; }
.talent-orbit { position: absolute; inset: 20px 0 0 16px; border-radius: 50px; background: linear-gradient(145deg, var(--royal), #264dbe); box-shadow: 0 38px 90px rgba(65,105,225,.20); overflow: hidden; }
.talent-orbit::after { content: ""; position: absolute; width: 430px; height: 430px; right: -150px; bottom: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(69,177,232,.64), rgba(69,177,232,0) 68%); }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; transform: rotate(-16deg); }
.orbit-one { width: 520px; height: 210px; left: -75px; top: 115px; }
.orbit-two { width: 650px; height: 320px; left: -90px; top: 170px; }
.orbit-node { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--career-red); box-shadow: 0 0 0 8px rgba(255,93,71,.14); }
.node-one { left: 84px; top: 180px; }
.node-two { right: 92px; top: 95px; }
.node-three { right: 140px; bottom: 98px; }
.hero-person-card { position: absolute; z-index: 2; overflow: hidden; border-radius: 30px; background: white; box-shadow: 0 24px 58px rgba(23,32,51,.22); }
.hero-person-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-emma img { object-position: 50% 48%; }
.hero-michael img { object-position: 50% 42%; }
.hero-person-card > div { position: absolute; inset: auto 13px 13px 13px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.hero-person-card p { margin: 0 0 2px; color: var(--royal); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-person-card h2 { margin: 0; color: var(--navy); font-size: 27px; letter-spacing: -.04em; }
.hero-person-card span { color: var(--muted); font-size: 11px; }
.hero-emma { width: 300px; height: 388px; left: 2px; top: 62px; transform: rotate(-3deg); }
.hero-michael { width: 278px; height: 362px; right: -7px; bottom: 32px; transform: rotate(3deg); }
.hero-culture-card { position: absolute; z-index: 4; left: 205px; bottom: 58px; display: flex; align-items: center; gap: 13px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.9); border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 20px 48px rgba(23,32,51,.18); }
.culture-symbol { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; color: var(--royal); background: rgba(65,105,225,.12); font-size: 20px; font-weight: 800; }
.hero-culture-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.hero-culture-card strong { color: var(--navy); font-size: 12px; }

.career-statement { padding: 24px; }
.career-statement-shell { max-width: var(--max); margin: 0 auto; padding: 74px; border-radius: 38px; background: var(--navy); color: white; position: relative; overflow: hidden; }
.career-statement-shell::before { content: ""; position: absolute; right: -85px; top: -190px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(69,177,232,.42), rgba(69,177,232,0) 70%); }
.career-statement blockquote { position: relative; z-index: 1; max-width: 1020px; margin: 0; font-size: clamp(33px, 4.2vw, 57px); line-height: 1.12; letter-spacing: -.04em; font-weight: 650; }

.career-section { max-width: var(--max); margin: 0 auto; padding: 128px 24px; }
.career-heading { max-width: 850px; margin-bottom: 58px; }
.career-heading > p:last-child { max-width: 760px; color: var(--muted); font-size: 18px; line-height: 1.65; }

.people-grid { display: grid; gap: 24px; }
.story-card { min-height: 590px; display: grid; grid-template-columns: .92fr 1.08fr; border-radius: 36px; background: white; overflow: hidden; box-shadow: var(--card-shadow); }
.story-card:nth-child(even) { grid-template-columns: 1.08fr .92fr; }
.story-card:nth-child(even) .story-portrait { order: 2; }
.story-portrait { position: relative; min-height: 590px; padding: 28px; background: #e7f4fa; overflow: hidden; }
.story-michael .story-portrait { background: #fff4c9; }
.story-portrait::after { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(52,64,85,.10); border-radius: 28px; pointer-events: none; }
.story-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; }
.story-emma .story-portrait img { object-position: 50% 50%; }
.story-michael .story-portrait img { object-position: 50% 42%; }
.story-year { position: absolute; left: 50px; top: 50px; z-index: 2; padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.90); color: var(--navy); font-size: 11px; font-weight: 800; }
.story-copy { display: flex; flex-direction: column; justify-content: center; padding: 56px; }
.story-role { margin-bottom: 12px; color: var(--royal); font-size: 11px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }
.story-copy h3 { max-width: 560px; margin-bottom: 26px; font-size: clamp(34px, 4vw, 50px); line-height: 1.05; }
.story-copy blockquote { margin: 0 0 25px; padding-left: 21px; border-left: 3px solid var(--yellow); color: var(--navy); font-size: 19px; line-height: 1.55; font-weight: 650; }
.story-copy > p:not(.story-role) { color: var(--muted); font-size: 16px; line-height: 1.72; }
.story-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.story-facts span { padding: 14px 15px; border-radius: 16px; background: var(--paper); color: var(--navy); font-size: 13px; font-weight: 750; }
.story-facts small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.growth-section { padding-top: 74px; }
.path-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.path-card { padding: 34px; border-radius: 30px; background: white; box-shadow: var(--card-shadow); }
.path-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.path-icon { flex: 0 0 auto; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: rgba(65,105,225,.10); color: var(--royal); font-size: 18px; font-weight: 850; }
.production-icon { background: rgba(69,177,232,.14); color: #168bc5; font-size: 28px; }
.leadership-icon { background: rgba(255,199,0,.18); color: #b68c00; font-size: 24px; }
.path-card-head p { margin: 0 0 3px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.path-card-head h3 { margin: 0; font-size: 25px; }
.career-ladder { margin: 0; padding: 0; list-style: none; display: grid; }
.career-ladder li { position: relative; min-height: 62px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 9px 12px; border-top: 1px solid var(--line); }
.career-ladder li:first-child { border-top: 0; }
.career-ladder li::before { content: ""; position: absolute; left: 29px; top: 42px; bottom: -20px; width: 1px; background: var(--line); }
.career-ladder li:last-child::before { display: none; }
.career-ladder li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--muted); font-size: 10px; font-weight: 850; z-index: 1; }
.career-ladder strong { font-size: 13px; }
.career-ladder em { color: var(--royal); font-size: 10px; font-style: normal; font-weight: 800; }
.career-ladder li.active { margin: 3px 0; border: 0; border-radius: 14px; background: rgba(65,105,225,.08); }
.career-ladder li.active > span { background: var(--royal); color: white; }
.career-ladder li.michael-step { background: rgba(69,177,232,.11); }
.career-ladder li.michael-step > span { background: var(--sky); }
.leadership-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.3fr; column-gap: 55px; align-items: center; }
.leadership-card .path-card-head { margin: 0; }
.leadership-route { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.leadership-route span { min-width: 0; flex: 1; padding: 17px 14px; border-radius: 16px; background: var(--paper); text-align: center; color: var(--navy); font-size: 12px; font-weight: 800; }
.leadership-route i { color: var(--royal); font-style: normal; font-weight: 800; }
.leadership-card > p { grid-column: 2; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.pipeline-section { max-width: none; padding-left: 24px; padding-right: 24px; }
.pipeline-shell { max-width: var(--max); margin: 0 auto; padding: 72px; border-radius: 38px; background: var(--royal); color: white; display: grid; grid-template-columns: .92fr 1.08fr; gap: 78px; align-items: center; position: relative; overflow: hidden; }
.pipeline-shell::after { content: ""; position: absolute; right: -100px; bottom: -230px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(69,177,232,.68), rgba(69,177,232,0) 70%); }
.pipeline-copy, .pipeline-steps { position: relative; z-index: 1; }
.pipeline-copy h2 { font-size: clamp(40px, 4vw, 56px); }
.pipeline-copy > p:not(.eyebrow) { margin-bottom: 30px; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.7; }
.pipeline-steps { display: grid; gap: 13px; }
.pipeline-steps article { display: grid; grid-template-columns: 48px 1fr; gap: 17px; padding: 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 21px; background: rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.pipeline-number { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.14); color: var(--yellow); font-size: 11px; font-weight: 850; }
.pipeline-steps h3 { margin: 1px 0 5px; font-size: 18px; }
.pipeline-steps p { margin: 0; color: rgba(255,255,255,.70); font-size: 13px; line-height: 1.55; }

.benefits-section { padding-top: 94px; }
.benefit-layout { display: grid; gap: 24px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.benefit-card { min-height: 230px; padding: 26px; border-radius: 25px; background: white; box-shadow: var(--card-shadow); }
.benefit-card > span { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 38px; border-radius: 14px; background: rgba(65,105,225,.09); color: var(--royal); font-size: 22px; font-weight: 850; }
.benefit-card:nth-child(2n) > span { background: rgba(69,177,232,.13); color: #168bc5; }
.benefit-card:nth-child(4) > span { background: rgba(255,93,71,.10); color: var(--career-red); }
.benefit-card:nth-child(5) > span { background: rgba(255,199,0,.17); color: #b68c00; }
.benefit-card h3 { font-size: 21px; }
.benefit-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.esop-card { min-height: 390px; display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 48px; padding: 50px; border-radius: 34px; background: var(--navy); color: white; position: relative; overflow: hidden; }
.esop-card::after { content: ""; position: absolute; right: -90px; bottom: -180px; width: 470px; height: 470px; border-radius: 50%; background: radial-gradient(circle, rgba(69,177,232,.40), rgba(69,177,232,0) 70%); }
.esop-visual, .esop-copy { position: relative; z-index: 1; }
.esop-visual { min-height: 270px; display: grid; place-items: center; text-align: center; }
.esop-visual svg { position: absolute; width: 260px; height: 260px; }
.esop-visual strong { margin-top: -8px; font-size: 70px; line-height: 1; letter-spacing: -.06em; }
.esop-visual span { margin-top: 74px; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 750; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }
.esop-copy h3 { max-width: 620px; font-size: clamp(31px, 3.2vw, 44px); }
.esop-copy > p:not(.eyebrow) { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.7; }
.esop-criteria { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.esop-criteria span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.07); font-size: 10px; font-weight: 800; }

.process-section { padding-top: 80px; }
.recruitment-process { display: grid; grid-template-columns: repeat(9, auto); align-items: stretch; gap: 10px; }
.recruitment-process article { width: min(205px, 15vw); min-height: 250px; display: flex; flex-direction: column; padding: 22px; border-radius: 23px; background: white; box-shadow: var(--card-shadow); }
.recruitment-process article > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: auto; border-radius: 12px; background: var(--paper); color: var(--royal); font-size: 10px; font-weight: 850; }
.recruitment-process h3 { margin: 30px 0 8px; font-size: 18px; }
.recruitment-process p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.recruitment-process > i { display: grid; place-items: center; color: var(--royal); font-style: normal; font-weight: 850; }

.opportunities-section { max-width: none; padding-left: 24px; padding-right: 24px; }
.opportunities-shell { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .75fr 1.25fr; gap: 74px; align-items: start; }
.opportunity-intro { position: sticky; top: 120px; }
.opportunity-intro > p:last-child { color: var(--muted); font-size: 16px; line-height: 1.7; }
.opportunity-list { display: grid; }
.opportunity-list article { min-height: 190px; display: grid; grid-template-columns: 170px 1fr auto; gap: 28px; align-items: center; border-top: 1px solid var(--line); }
.opportunity-list article:last-child { border-bottom: 1px solid var(--line); }
.opportunity-list article > span { color: var(--royal); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.opportunity-list h3 { margin: 0; max-width: 470px; font-size: 25px; line-height: 1.16; }
.opportunity-list a { display: inline-flex; align-items: center; gap: 14px; color: var(--navy); font-size: 12px; font-weight: 850; }
.opportunity-list b { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--royal); transition: transform .2s ease, background .2s ease, color .2s ease; }
.opportunity-list a:hover b { transform: translate(2px,-2px); background: var(--royal); color: white; }

.apply-section { max-width: none; padding: 28px 24px 80px; }
.apply-card { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .92fr 1.08fr; gap: 78px; padding: 72px; border-radius: 38px; background: var(--navy); color: white; position: relative; overflow: hidden; box-shadow: var(--soft-shadow); }
.apply-card::before { content: ""; position: absolute; left: -170px; bottom: -240px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(65,105,225,.58), rgba(65,105,225,0) 70%); }
.apply-card::after { content: ""; position: absolute; right: -170px; top: -260px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(69,177,232,.38), rgba(69,177,232,0) 70%); }
.apply-copy, .application-form { position: relative; z-index: 1; }
.apply-copy h2 { font-size: clamp(40px, 4.5vw, 59px); }
.apply-copy > p:not(.eyebrow) { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.67; }
.application-note { display: flex; align-items: flex-start; gap: 13px; margin-top: 30px; }
.application-note > span { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.10); color: var(--yellow); font-weight: 850; }
.application-note p { margin: 0; color: rgba(255,255,255,.64); font-size: 12px; line-height: 1.55; }
.application-note strong { color: white; }
.application-form { display: grid; gap: 16px; align-content: center; }
.application-form .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.application-form label { display: grid; gap: 8px; }
.application-form label > span { color: rgba(255,255,255,.68); font-size: 11px; font-weight: 750; }
.application-form input,
.application-form select,
.application-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; background: rgba(255,255,255,.08); color: white; padding: 13px 14px; outline: none; resize: vertical; }
.application-form input, .application-form select { min-height: 49px; }
.application-form input::placeholder, .application-form textarea::placeholder { color: rgba(255,255,255,.40); }
.application-form select option { color: var(--ink); }
.application-form input:focus, .application-form select:focus, .application-form textarea:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(69,177,232,.16); }
.career-footer { padding-top: 4px; }

@media (max-width: 1120px) {
  .career-hero-shell { grid-template-columns: 1fr; }
  .career-hero-copy { max-width: 850px; }
  .career-hero-visual { width: min(700px, 100%); min-height: 600px; margin: 0 auto; }
  .story-card, .story-card:nth-child(even) { grid-template-columns: 1fr 1fr; }
  .pipeline-shell, .apply-card { gap: 45px; padding: 54px; }
  .recruitment-process { grid-template-columns: repeat(5, 1fr); }
  .recruitment-process article { width: auto; }
  .recruitment-process > i { display: none; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .opportunities-shell { grid-template-columns: 1fr; }
  .opportunity-intro { position: static; max-width: 760px; }
}

@media (max-width: 900px) {
  .career-hero-proof { grid-template-columns: 1fr; }
  .story-card, .story-card:nth-child(even) { grid-template-columns: 1fr; }
  .story-card:nth-child(even) .story-portrait { order: 0; }
  .story-portrait { min-height: 500px; }
  .path-grid { grid-template-columns: 1fr; }
  .leadership-card { grid-column: auto; grid-template-columns: 1fr; }
  .leadership-route { margin-top: 20px; }
  .leadership-card > p { grid-column: auto; }
  .pipeline-shell, .esop-card, .apply-card { grid-template-columns: 1fr; }
  .esop-visual { min-height: 230px; }
  .recruitment-process { grid-template-columns: repeat(2, 1fr); }
  .opportunity-list article { grid-template-columns: 135px 1fr; padding: 24px 0; }
  .opportunity-list a { grid-column: 2; }
}

@media (max-width: 760px) {
  .career-brand > span { display: none; }
  .career-hero { min-height: 0; padding: 112px 18px 60px; }
  .career-hero-shell { gap: 46px; }
  .career-hero-copy h1 { font-size: 53px; }
  .career-hero-copy > p:not(.eyebrow) { font-size: 17px; }
  .career-hero-visual { min-height: 510px; }
  .talent-orbit { inset: 0; border-radius: 30px; }
  .hero-emma { width: 56%; height: 330px; top: 40px; left: 8px; }
  .hero-michael { width: 51%; height: 306px; right: 3px; bottom: 29px; }
  .hero-culture-card { left: 13%; bottom: 20px; padding: 10px 12px; }
  .hero-culture-card p { display: none; }
  .career-statement { padding: 12px; }
  .career-statement-shell { padding: 44px 28px; border-radius: 27px; }
  .career-section { padding: 88px 18px; }
  .career-heading { margin-bottom: 38px; }
  .career-heading > p:last-child { font-size: 16px; }
  .story-portrait { min-height: 390px; padding: 15px; }
  .story-portrait::after { inset: 15px; }
  .story-year { left: 30px; top: 30px; }
  .story-copy { padding: 32px 25px; }
  .story-copy blockquote { font-size: 17px; }
  .story-facts { grid-template-columns: 1fr; }
  .path-card { padding: 25px 20px; }
  .career-ladder li { grid-template-columns: 38px 1fr; }
  .career-ladder em { grid-column: 2; }
  .leadership-route { flex-direction: column; align-items: stretch; }
  .leadership-route i { transform: rotate(90deg); text-align: center; }
  .pipeline-section { padding-left: 12px; padding-right: 12px; }
  .pipeline-shell { padding: 43px 25px; border-radius: 28px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-card { min-height: 0; }
  .benefit-card > span { margin-bottom: 24px; }
  .esop-card { padding: 34px 24px; border-radius: 28px; }
  .recruitment-process { grid-template-columns: 1fr; }
  .recruitment-process article { min-height: 180px; }
  .opportunities-section { padding-left: 18px; padding-right: 18px; }
  .opportunity-list article { grid-template-columns: 1fr; gap: 12px; }
  .opportunity-list a { grid-column: 1; }
  .apply-section { padding-left: 12px; padding-right: 12px; }
  .apply-card { padding: 43px 25px; border-radius: 28px; }
  .application-form .form-row { grid-template-columns: 1fr; }
}

/* Keep the ESOP percentage geometrically centered inside the ring. */
.esop-visual {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.esop-chart {
  position: relative;
  width: 260px;
  height: 260px;
  flex: 0 0 260px;
}
.esop-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.esop-chart strong {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: 70px;
  line-height: 1;
  letter-spacing: -.06em;
  white-space: nowrap;
}
.esop-visual > span {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 760px) {
  .esop-chart { width: 225px; height: 225px; flex-basis: 225px; }
  .esop-chart strong { font-size: 61px; }
}

/* Research deployment expeditions */
.deployment-section {
  max-width: none;
  padding: 18px 24px 112px;
}
.deployment-shell {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 34px 56px;
  padding: 66px;
  border-radius: 40px;
  background:
    radial-gradient(circle at 82% 18%, rgba(69,177,232,.38), transparent 34%),
    radial-gradient(circle at 18% 90%, rgba(65,105,225,.48), transparent 35%),
    var(--navy);
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: var(--soft-shadow);
}
.deployment-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(rgba(255,255,255,.42) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom right, transparent 4%, #000 38%, transparent 92%);
}
.deployment-intro,
.deployment-visual,
.deployment-stories { position: relative; z-index: 1; }
.deployment-intro { align-self: center; }
.deployment-intro h2 {
  max-width: 570px;
  margin-bottom: 24px;
  color: white;
  font-size: clamp(43px, 5vw, 66px);
  line-height: 1.01;
  letter-spacing: -.05em;
}
.deployment-intro > p:not(.eyebrow) {
  max-width: 595px;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: 17px;
  line-height: 1.72;
}
.deployment-reward {
  margin-top: 34px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 19px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.deployment-reward span,
.deployment-reward strong { display: block; }
.deployment-reward span {
  margin-bottom: 7px;
  color: var(--yellow);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.deployment-reward strong { font-size: 14px; line-height: 1.5; }
.deployment-reward i { margin: 0 8px; color: var(--sky); font-style: normal; }

.deployment-visual {
  min-height: 475px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  overflow: hidden;
}
.deployment-visual::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  left: 50%;
  bottom: -190px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69,177,232,.38), transparent 68%);
}
.deployment-route { position: absolute; inset: 10px 5px auto; width: calc(100% - 10px); height: 92%; }
.deployment-visual > img {
  position: absolute;
  z-index: 2;
  width: min(74%, 440px);
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  filter: drop-shadow(0 26px 25px rgba(0,0,0,.25));
}
.deployment-coordinate {
  position: absolute;
  z-index: 3;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(6,28,70,.55);
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
}
.coordinate-one { left: 28px; top: 36px; }
.coordinate-two { right: 28px; top: 70px; }
.deployment-stage {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 13px;
  background: rgba(255,255,255,.94);
  color: var(--navy);
  box-shadow: 0 13px 30px rgba(2,14,44,.22);
}
.deployment-stage b {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(65,105,225,.10);
  color: var(--royal);
  font-size: 9px;
}
.deployment-stage span { font-size: 10px; font-weight: 850; }
.stage-one { left: 24px; bottom: 78px; }
.stage-two { right: 22px; bottom: 146px; }
.stage-three { right: 44px; top: 145px; }

.deployment-stories {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.deployment-story {
  min-height: 220px;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 15px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 23px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(10px);
}
.deployment-story > img,
.crew-mark {
  width: 70px;
  height: 70px;
  border-radius: 18px;
}
.deployment-story > img { object-fit: cover; }
.deployment-story:first-child > img { object-position: 50% 46%; }
.deployment-story:nth-child(2) > img { object-position: 50% 34%; }
.crew-mark {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--sky), var(--royal));
  color: white;
  font-size: 37px;
  font-weight: 650;
}
.deployment-story p {
  margin: 2px 0 11px;
  color: var(--yellow);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.deployment-story blockquote {
  margin: 0 0 13px;
  color: white;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 620;
}
.deployment-story span {
  color: rgba(255,255,255,.56);
  font-size: 10px;
  font-weight: 750;
}

@media (max-width: 1120px) {
  .deployment-shell { padding: 54px; grid-template-columns: 1fr; }
  .deployment-intro { max-width: 800px; }
  .deployment-visual { min-height: 520px; }
}
@media (max-width: 900px) {
  .deployment-stories { grid-template-columns: 1fr; }
  .deployment-story { min-height: 0; }
}
@media (max-width: 760px) {
  .deployment-section { padding: 8px 12px 88px; }
  .deployment-shell { padding: 42px 24px 24px; border-radius: 28px; gap: 31px; }
  .deployment-intro h2 { font-size: 48px; }
  .deployment-intro > p:not(.eyebrow) { font-size: 16px; }
  .deployment-reward strong { font-size: 12px; }
  .deployment-visual { min-height: 410px; border-radius: 24px; }
  .deployment-visual > img { width: min(88%, 390px); }
  .coordinate-two { display: none; }
  .stage-one { left: 13px; bottom: 54px; }
  .stage-two { right: 12px; bottom: 118px; }
  .stage-three { right: 18px; top: 108px; }
  .deployment-story { grid-template-columns: 58px 1fr; padding: 17px; }
  .deployment-story > img, .crew-mark { width: 58px; height: 58px; border-radius: 15px; }
  .deployment-story blockquote { font-size: 13px; }
}