/* Screen 03 only. Screens 01/02 and vertical page scrolling are intentionally untouched. */
html.career-case-open { overflow: hidden; }
.career-screen {
  --sector: #ffd372;
  --sector-rgb: 255, 211, 114;
  position: relative;
  isolation: isolate;
  width: 100vw;
  min-width: 0;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  background: #030405;
  color: #f7f8fc;
  font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.career-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 87%, rgba(var(--sector-rgb), .035), transparent 56%);
  transition: background 600ms;
}
.career-topbar {
  position: absolute;
  top: 27px;
  left: 4%;
  right: 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid #c6d6e411;
  z-index: 3;
}
.career-brand { color: #f7f8fc; text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -.045em; }
.career-brand > span { display: inline-block; margin-left: 16px; color: var(--sector); font-size: 22px; font-weight: 400; vertical-align: -1px; }
.career-chapter { color: #c2ccda; font-size: 11px; letter-spacing: .2em; }
.career-heading {
  position: absolute;
  top: 87px;
  left: 4%;
  right: 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
.career-heading h2 { display: flex; gap: 22px; align-items: baseline; margin: 0; font-size: clamp(26px, 2.2vw, 40px); letter-spacing: .07em; font-weight: 650; }
.career-heading h2 span { font-size: 12px; font-weight: 400; letter-spacing: .05em; color: #a8b5c6; }
.career-heading > p { margin: 0; font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: .18em; color: #8594a8; text-align: right; }
.career-heading > p span { color: #ccd5df; }
.career-stage { position: absolute; inset: 0; touch-action: pan-y; }
.career-floor {
  display: none; /* Replaced by a grid rendered through the gallery's actual camera. */
  position: absolute;
  left: -40%;
  right: -40%;
  height: 49%;
  bottom: 52px;
  transform: perspective(450px) rotateX(62deg);
  transform-origin: 50% 100%;
  background-image: linear-gradient(#c9d2e31a 1px, transparent 1px), linear-gradient(90deg, #c9d2e31a 1px, transparent 1px);
  background-size: 92px 64px;
  mask-image: linear-gradient(transparent, #0008 35%, #000 78%, transparent);
  pointer-events: none;
  opacity: .62;
}
#career-webgl { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms; }
#career-webgl canvas { display: block; width: 100%; height: 100%; }
.career-screen.is-webgl-ready #career-webgl { opacity: 1; }
.career-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(49vw, calc((100svh - 300px) * 1.6));
  aspect-ratio: 1.6;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 8px;
  background: #10151e;
  box-shadow: 0 24px 80px #0008;
}
.career-fallback img { display: block; width: 100%; height: 100%; object-fit: cover; }
.career-screen.is-webgl-ready .career-fallback { visibility: hidden; }
.career-fallback-title {
  position: absolute;
  right: 7%;
  bottom: 10%;
  text-align: right;
  color: #fff;
  transform: skewX(-11deg);
  text-shadow: 0 0 5px #fff8, 0 0 24px rgba(var(--sector-rgb), .7), 0 0 42px rgba(var(--sector-rgb), .3);
}
.career-fallback-title strong { display: block; font-size: clamp(44px, 6vw, 110px); font-weight: 900; line-height: 1.13; }
.career-fallback-title span { display: block; font-size: clamp(15px, 1.5vw, 27px); font-weight: 800; margin-top: 7px; letter-spacing: -.02em; }
.career-arrow {
  position: absolute;
  top: calc(50% + 23px);
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border: 1px solid #d4deed55;
  border-radius: 50%;
  background: #0d1424ca;
  color: #f3f5fa;
  display: grid;
  place-items: center;
  z-index: 5;
  cursor: pointer;
  backdrop-filter: blur(15px);
  transition: border-color 200ms, background 200ms, box-shadow 200ms, opacity 200ms;
}
.career-arrow-prev { left: 4%; }
.career-arrow-next { right: 4%; }
.career-arrow svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.career-arrow:hover { border-color: var(--sector); box-shadow: 0 0 22px rgba(var(--sector-rgb), .17); background: #162132eb; }
.career-arrow:disabled { opacity: .48; cursor: wait; }
.career-screen button:focus-visible, .career-screen a:focus-visible { outline: 2px solid var(--sector); outline-offset: 5px; }
.career-caption {
  position: absolute;
  bottom: 76px;
  left: 26%;
  right: 26%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.career-caption-kicker { margin: 0 0 7px; font-size: 10px; letter-spacing: .12em; color: #92a0b3; }
.career-caption-kicker > span { color: var(--sector); }
#career-company-line { margin: 0; font-size: 13px; color: #f0f3f8; line-height: 1.5; }
#career-company-line span { margin-left: 16px; color: #8797ac; font-size: 11px; letter-spacing: .03em; }
.career-detail-trigger { display: flex; align-items: center; gap: 27px; padding: 11px 0; border: 0; border-bottom: 1px solid #b4c4d451; background: transparent; color: #ecf2f8; font-size: 12px; cursor: pointer; }
.career-detail-trigger > span { font-size: 21px; color: var(--sector); }
.career-detail-trigger:hover { border-color: var(--sector); }
.career-footer { position: absolute; bottom: 24px; left: 4%; right: 4%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.career-back { font-size: 10px; text-decoration: none; color: #8c9aaf; }
.career-pagination { display: flex; align-items: center; gap: 22px; }
#industry-count { font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: .13em; color: #d3dce8; }
.career-progress { display: flex; gap: 5px; list-style: none; padding: 0; margin: 0; }
.career-progress li { position: relative; width: 34px; height: 2px; background: #344152; transition: background 300ms, box-shadow 300ms; }
.career-progress li[aria-current="step"] { background: var(--sector); box-shadow: 0 0 9px rgba(var(--sector-rgb), .5); }
.career-progress li > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.career-footer-note { font-size: 10px; color: #8190a5; letter-spacing: .04em; }
.career-footer-note > span { margin: 0 8px; color: #4d5e72; }
.career-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: calc(100vw - 64px);
  height: calc(100svh - 32px);
  max-width: 1800px;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #f9fafb;
  color: #141a22;
  box-shadow: 0 30px 140px #000b;
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #657283 transparent;
}
.career-dialog::backdrop { background: #000000b8; backdrop-filter: blur(5px); }
.career-close { position: absolute; top: 20px; right: 20px; z-index: 10; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #111820; color: #fff; font-size: 25px; line-height: 1; cursor: pointer; }
.career-dialog-eyebrow { display: flex; justify-content: space-between; margin-bottom: 25px; padding-bottom: 17px; border-bottom: 1px solid #ffffff24; font-size: 10px; color: var(--sector); letter-spacing: .16em; }
#career-detail-title { margin: 0 0 14px; font-size: 29px; line-height: 1.4; letter-spacing: -.02em; }
.career-detail-company { margin: 0 0 9px; font-size: 20px; color: #e7edf6; }
.career-detail-meta { color: #94a6bb; font-size: 12px; line-height: 1.9; }
.career-detail-steps { list-style: none; padding: 0; margin: 30px 0 0; counter-reset: career-step; }
.career-detail-steps li { position: relative; padding: 0 0 24px 39px; margin-left: 7px; border-left: 1px solid #ffffff22; counter-increment: career-step; }
.career-detail-steps li::before { content: "0" counter(career-step); position: absolute; top: 0; left: -8px; background: #111a29; color: var(--sector); font-size: 11px; padding: 3px 0; }
.career-detail-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.career-detail-steps h4 { margin: 0 0 9px; font-size: 17px; font-weight: 600; }
.career-detail-steps p, .career-detail-pending, .career-second-job p { margin: 0; font-size: 14px; line-height: 1.95; color: #c3cfde; }
.career-second-job { margin-top: 25px; padding-top: 24px; border-top: 1px solid #ffffff24; }
.career-second-job h4 { margin: 0 0 9px; font-size: 17px; }
.career-second-job p + p { margin-top: 7px; }
.career-detail-pending { margin-top: 25px; padding-top: 22px; border-top: 1px solid #ffffff24; }
.career-image-note { margin: 28px 0 0; font-size: 10px; color: #8391a4; line-height: 1.7; }
#career-detail-body { display: grid; grid-template-columns: 36% 64%; width: 100%; height: 100%; }
.resume-sidebar { padding: 44px 38px 30px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; border-right: 1px solid #e1e4e8; }
.resume-eyebrow { display: flex; justify-content: space-between; color: #78818c; font-size: 10px; letter-spacing: .15em; margin-bottom: 45px; }
.resume-label { color: #8a663a; font-size: 10px; letter-spacing: .1em; margin: 0 0 12px; }
#career-detail-title { margin: 0 0 32px; font-size: clamp(35px, 4.1vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1.14; }
#career-detail-title > span { display: block; margin-top: 14px; font-size: clamp(13px, 1.3vw, 19px); line-height: 1.6; font-weight: 400; letter-spacing: 0; color: #5b6673; }
.resume-company { margin: 0 0 10px; font-size: 21px; font-weight: 500; line-height: 1.6; }
.resume-date { margin: 0 0 20px; color: #697483; font-size: 12px; letter-spacing: .02em; }
.resume-role { margin: 0; font-size: 14px; line-height: 1.8; max-width: 26em; }
.resume-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.resume-tags > span { padding: 6px 10px; border-radius: 20px; background: #e9ecef; font-size: 10px; color: #4c5764; }
.resume-sidebar-bottom { margin-top: auto; padding-top: 40px; }
#resume-reading-toggle { padding: 10px 0; border: 0; border-bottom: 1px solid #bdc4cc; background: transparent; color: #222b38; font-size: 12px; cursor: pointer; }
#resume-reading-toggle > span { margin-left: 22px; }
.resume-sidebar-bottom p { font-size: 10px; line-height: 1.8; color: #75808e; margin-top: 16px; }
.resume-sidebar-bottom small { display: block; color: #8c95a0; font-size: 9px; line-height: 1.8; max-width: 29em; }
.resume-document { position: relative; min-width: 0; height: 100%; overflow: hidden; }
.resume-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 34px 70px 32px 28px; scrollbar-width: thin; scrollbar-color: #a6afb9 transparent; }
.resume-scroll:focus-visible { outline-offset: -5px !important; }
.resume-sheets { display: flex; flex-direction: column; gap: 32px; }
.resume-sheet { position: relative; margin: 0; flex: none; border-radius: 13px; background: #eef0f3; overflow: hidden; }
.resume-sheet-image { aspect-ratio: 16 / 9; background: #111820; }
.resume-source { padding: clamp(20px, 2.6vw, 38px); }
.resume-sheet-image .resume-source { padding: 0; position: absolute; inset: 0; }
.resume-source > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.resume-source h4 { margin: 0 0 18px; color: #17202d; font-size: clamp(20px, 2.3vw, 32px); font-weight: 600; line-height: 1.4; }
.resume-source p { color: #425061; font-size: clamp(14px, 1.55vw, 21px); line-height: 1.8; margin: 0; white-space: normal; }
.resume-source .resume-sheet-eyebrow { font-size: 10px; letter-spacing: .09em; color: #7b8693; margin-bottom: 24px; }
.resume-sheet[data-has-texture] .resume-source { position: absolute; inset: 0; overflow: auto; }
.resume-gpu-ready:not(.is-reading) .resume-source { opacity: 0; }
.resume-webgl { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.resume-webgl canvas { display: block; width: 100%; height: 100%; }
.is-reading .resume-webgl { visibility: hidden !important; }
.is-reading .resume-sheet:not(.resume-sheet-image) { aspect-ratio: auto !important; }
.is-reading .resume-sheet:not(.resume-sheet-image) .resume-source { position: relative; overflow: visible; }
.resume-metrics { display: flex; gap: 20px; margin: 30px 0 0; flex-wrap: wrap; }
.resume-metrics > div { min-width: 100px; flex: 1; }
.resume-metrics dt { color: #68788c; font-size: 11px; margin-bottom: 10px; }
.resume-metrics dd { margin: 0; font-size: clamp(25px, 3vw, 40px); font-weight: 600; letter-spacing: -.04em; }
.resume-endnote { margin: 4px 0 0; font-size: 10px; line-height: 1.9; color: #8c96a3; }
@media (min-height: 1000px) {
  .career-topbar { top: 38px; }
  .career-heading { top: 112px; }
  .career-stage { inset: 0; }
  .career-caption { bottom: 102px; }
  .career-footer { bottom: 34px; }
}
@media (max-width: 1100px) {
  .career-heading h2 span { font-size: 10px; }
  .career-caption { left: 22%; right: 22%; }
  .career-arrow { width: 48px; height: 48px; }
  .career-heading > p { display: none; }
  #career-company-line { font-size: 12px; }
  #career-company-line span { display: block; margin-left: 0; margin-top: 3px; }
  .career-progress li { width: 24px; }
}
@media (max-width: 800px) {
  .career-heading h2 { gap: 14px; }
  .career-stage { inset: 0; }
  .career-caption { left: 19%; right: 19%; gap: 12px; }
  .career-detail-trigger { gap: 12px; font-size: 11px; }
  .career-footer-note { max-width: 120px; text-align: right; line-height: 1.7; }
  .career-pagination { gap: 12px; }
  .career-progress li { width: 20px; }
  .career-dialog { width: calc(100vw - 24px); height: calc(100svh - 24px); border-radius: 14px; }
  #career-detail-body { grid-template-columns: 32% 68%; }
  .resume-sidebar { padding: 26px 18px 24px; }
  .resume-eyebrow { font-size: 8px; letter-spacing: .02em; margin-bottom: 32px; }
  #career-detail-title { font-size: 32px; margin-bottom: 24px; }
  #career-detail-title > span { font-size: 12px; }
  .resume-company { font-size: 16px; }
  .resume-role { font-size: 12px; }
  .resume-tags { gap: 5px; }
  .resume-tags > span { font-size: 9px; padding: 5px 7px; }
  .resume-scroll { padding: 68px 18px 26px; }
  .resume-sheets { gap: 22px; }
  .resume-source { padding: 20px; }
  .resume-source h4 { font-size: 20px; }
  .resume-source p { font-size: 14px; }
  .resume-source .resume-sheet-eyebrow { margin-bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .career-screen *, .career-screen *::before, .career-screen *::after { transition: none !important; animation: none !important; }
}