/* OUTSOURCING belongs to the story; it is not a fifth film chapter. */
.topnav .outsourcing-entry { display: grid; align-content: center; gap: 7px; min-height: 44px; margin-left: 8px; padding-left: 24px; border-left: 1px solid var(--line); }
.topnav .outsourcing-entry small { color: var(--muted); font: 7px/1.4 var(--mono); letter-spacing: .12em; }
.topnav .outsourcing-entry b { font: inherit; font-weight: 400; }
.chapter-menu .chapter-outsourcing { display: block; margin-bottom: 8px; padding: 14px 10px 18px; border-bottom: 1px solid var(--line); text-decoration: none; }
.chapter-outsourcing small { display: block; margin-bottom: 9px; color: var(--muted); font: 8px/1.4 var(--mono); letter-spacing: .12em; }
.chapter-outsourcing b { color: var(--paper); font: 11px/1.4 var(--mono); letter-spacing: .08em; }
.story-outsourcing { display: flex; align-items: center; min-height: 44px; padding: 13px 0 13px 20px; border-left: 1px solid var(--line); color: var(--paper); font: 9px/1 var(--mono); letter-spacing: .1em; text-decoration: none; pointer-events: auto; white-space: nowrap; }
.outsourcing-entry:focus-visible, .outsourcing a:focus-visible, .outsourcing button:focus-visible { outline: 2px solid var(--teal); outline-offset: 7px; }
.outsourcing-nav-label { display: none; }
/* The same compact control carries the scene. During later reading it returns on intent. */
body.in-outsourcing .topbar, body.in-reading.navigation-revealed .topbar { visibility: visible; }
body:is(.in-outsourcing, .in-reading) .chapter-control { display: block; }
body:is(.in-outsourcing, .in-reading) .chapter-toggle { grid-template-columns: 1fr 12px; }
body:is(.in-outsourcing, .in-reading) .chapter-toggle-count,
body:is(.in-outsourcing, .in-reading) #chapter-current-label { display: none; }
body:is(.in-outsourcing, .in-reading) .outsourcing-nav-label { display: block; }
body:is(.in-outsourcing, .in-reading) .chapter-option[aria-current="step"]:not(:hover) { color: rgba(238,245,241,.72); background: transparent; }
body:is(.in-outsourcing, .in-reading) .chapter-option[aria-current="step"] b { color: inherit; }
body.in-outsourcing .chapter-outsourcing b { color: var(--teal); }
body.in-reading .topbar { background: var(--ink); border-bottom: 1px solid rgba(205,244,237,.12); }
/* Keep the persistent entry legible when editorial text scrolls behind it. */
body.in-reading.in-reading-copy .sixis-question { background: var(--ink); box-shadow: 0 0 8px 4px var(--ink); }
body.in-outsourcing.navigation-solid .topbar { background: var(--ink); border-bottom: 1px solid rgba(205,244,237,.12); }
body.in-outsourcing:has(.outsourcing:not(.is-scroll-scene)) .topbar { background: var(--ink); border-bottom: 1px solid rgba(205,244,237,.12); }
body.in-reading.navigation-revealed .industries-guide { top: var(--navigation-clearance, 90px); }
body.in-reading.navigation-revealed .industry-entry { scroll-margin-top: calc(var(--navigation-clearance, 90px) + 88px); }
body.andrei-interruption-open:is(.in-outsourcing, .in-reading) .topbar { visibility: hidden; }
@media (min-width: 1101px) {
  body:is(.in-outsourcing, .in-reading) .topbar { padding-block: 14px; }
  body.in-reading.navigation-revealed .industries-guide { max-height: calc(100svh - var(--navigation-clearance, 90px) - 16px); overflow-y: auto; }
}

/* One photographic part steps forward. The rest of the scene stays behind it. */
.outsourcing { --handover: 1; --lift: 1; --arrival: 1; --departure: 0; position: relative; background: var(--ink); border-bottom: 1px solid var(--line); }
.outsourcing:focus { outline: none; }
/* Copy and controls share one flow; a short viewport can grow before becoming sticky. */
.outsourcing-stage { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: max(680px, 100svh); padding: max(217.6px, 32svh) 7.5% max(76px, 8svh); overflow: hidden; }
.outsourcing-photo, .outsourcing-piece { position: absolute; inset: 0; pointer-events: none; }
.outsourcing picture, .outsourcing img { display: block; width: 100%; height: 100%; }
.outsourcing img { object-fit: cover; object-position: center; }
.outsourcing-photo { z-index: -3; filter: brightness(calc(.8 - var(--lift) * .28)); }
.outsourcing-piece {
  z-index: -2;
  clip-path: inset(7% 9% 7% 59%);
  transform-origin: 73% 50%;
  transform: perspective(1800px) translate3d(calc(var(--lift) * -30px), calc(var(--lift) * -18px), 0) rotateY(calc(var(--lift) * -9deg)) rotateZ(calc(var(--lift) * -1.5deg)) scale(calc(1 + var(--lift) * .04));
  filter: brightness(calc(.8 + var(--lift) * .25));
}
.outsourcing-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(3,8,8,.3), transparent 70%), linear-gradient(0deg, rgba(3,8,8,.88), transparent 27%); }
.outsourcing-overline { position: absolute; top: max(96px, 12%); left: 7.5%; right: 7.5%; margin: 0; color: var(--teal); font: 10px/1.6 var(--mono); letter-spacing: .16em; }
.outsourcing-words { position: relative; display: grid; flex-shrink: 0; max-width: 780px; }
.outsourcing-display { margin: 0; font-size: clamp(64px, 6.6vw, 110px); line-height: 1.06; font-weight: 300; letter-spacing: -.055em; }
.outsourcing-display em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--teal); letter-spacing: -.05em; }
.outsourcing-opening { grid-area: 1 / 1; opacity: var(--departure); transform: translateY(calc(var(--arrival) * -24px)); pointer-events: none; }
.outsourcing-arrival { grid-area: 1 / 1; opacity: var(--arrival); transform: translateY(calc((1 - var(--arrival)) * 24px)); }
.outsourcing-opening, .outsourcing-arrival { transition: opacity .28s, transform .45s cubic-bezier(.22,.61,.36,1); }
.outsourcing-lead, .outsourcing-intro { max-width: 450px; margin: 36px 0 0; color: var(--paper); font-size: clamp(16px, 1.35vw, 21px); font-weight: 300; line-height: 1.65; }
.outsourcing-axes { max-width: 400px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.outsourcing-foot { position: relative; display: flex; flex-shrink: 0; align-items: end; justify-content: space-between; gap: 25px; }
.outsourcing-controls { display: grid; gap: 15px; }
.outsourcing-transfer { display: inline-flex; align-items: center; justify-content: space-between; gap: 50px; width: fit-content; min-width: 200px; min-height: 44px; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(205,244,237,.5); background: none; color: var(--paper); font: 12px/1.5 var(--mono); cursor: pointer; }
.outsourcing-transfer[hidden] { display: none; }
.outsourcing-transfer span:last-child { color: var(--teal); font-size: 19px; transition: transform .25s; }
.outsourcing-transfer:hover span:last-child { transform: translateX(5px); }
.outsourcing-continuity { margin: 0; color: var(--paper); font-size: 14px; line-height: 1.6; opacity: var(--arrival); }
.outsourcing-continuity { transition: opacity .28s; }
.outsourcing-progress { position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background: var(--teal); opacity: .55; transform: scaleX(var(--handover)); transform-origin: left; }
.outsourcing:not(.is-scroll-scene) .outsourcing-photo, .outsourcing:not(.is-scroll-scene) .outsourcing-piece, .outsourcing:not(.is-scroll-scene) .outsourcing-progress { transition: transform 1.1s cubic-bezier(.22,.61,.36,1), filter 1.1s; }
.outsourcing.is-scroll-scene { height: calc(var(--outsourcing-stage-height) + 85svh); }
.outsourcing.is-scroll-scene .outsourcing-stage { position: sticky; top: var(--outsourcing-stage-top); height: var(--outsourcing-stage-height); min-height: 0; }

@media (max-width: 1100px) {
  body.in-reading.navigation-revealed .industries-guide::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; background: var(--ink); pointer-events: none; }
  .story-outsourcing { position: absolute; bottom: 18px; left: 20px; padding: 12px 0; border-left: 0; font-size: 9px; }
  .outsourcing-display { font-size: clamp(62px, 7.5vw, 88px); }
  .outsourcing-words { max-width: 570px; }
  .outsourcing-piece { clip-path: inset(9% 5% 9% 60%); }
}
@media (max-width: 600px) and (orientation: portrait) {
  .outsourcing-stage { min-height: max(620px, 100svh); padding-top: max(124px, 20svh); padding-inline: 24px; }
  .outsourcing-overline { top: max(88px, 8%); left: 24px; right: 24px; max-width: 260px; font-size: 9px; letter-spacing: .1em; }
  .outsourcing-display { font-size: clamp(40px, 11.8vw, 70px); line-height: 1.08; }
  .outsourcing-lead, .outsourcing-intro { margin-top: 25px; max-width: 350px; font-size: 16px; line-height: 1.6; }
  .outsourcing-axes { max-width: 260px; font-size: 11px; }
  .outsourcing-piece { clip-path: inset(53% 7% 15% 7%); transform-origin: 50% 65%; transform: perspective(1200px) translate3d(0, calc(var(--lift) * -18px), 0) rotateX(calc(var(--lift) * 9deg)) rotateZ(calc(var(--lift) * -1.5deg)) scale(calc(1 + var(--lift) * .02)); }
  .outsourcing-stage::after { background: linear-gradient(0deg, rgba(3,8,8,.92), transparent 35%), linear-gradient(180deg, rgba(3,8,8,.28) 20%, transparent 52%); }
  .outsourcing-foot { align-items: end; gap: 15px; }
  .outsourcing-controls { gap: 12px; }
  .outsourcing-transfer { min-width: 150px; gap: 22px; font-size: 10px; }
  .outsourcing-continuity { font-size: 12px; }
  .outsourcing.is-scroll-scene { height: calc(var(--outsourcing-stage-height) + 70svh); }
}
@media (max-width: 350px) and (orientation: portrait) {
  .outsourcing-display { font-size: 40px; }
  .outsourcing-lead, .outsourcing-intro { font-size: 15px; }
  .outsourcing-controls { gap: 8px; }
}
@media (max-height: 649px) and (orientation: landscape) {
  .outsourcing-stage { min-height: 620px; padding-top: max(155px, 25svh); }
  .outsourcing-overline { top: 96px; }
  .outsourcing-display { font-size: clamp(52px, 7vw, 88px); }
}
@media (min-width: 1101px) and (max-height: 649px) and (orientation: landscape) {
  .outsourcing-stage { min-height: 680px; padding-top: max(170px, 25svh); }
}
@media (prefers-reduced-motion: reduce) {
  .outsourcing { --handover: 1 !important; --lift: 1 !important; --arrival: 1 !important; --departure: 0 !important; }
  .outsourcing *, .outsourcing:not(.is-scroll-scene) * { transition: none; }
  .outsourcing-transfer { display: none; }
}
@media (forced-colors: active) {
  .outsourcing-photo, .outsourcing-piece, .outsourcing-stage::after, .outsourcing-progress { display: none; }
  .outsourcing-transfer { border-color: ButtonText; }
  .outsourcing-overline, .outsourcing-display em { color: CanvasText; }
}