/* Product imagery and material recovery scenes. */
.module-section,
.recovery-section {
  position: relative;
  background: #080d12;
  border-top: 1px solid #26303a;
  scroll-margin-top: 0;
}

.recovery-section { padding: 96px 0 80px; }
.process-wrap { width: min(1400px, calc(100% - 80px)); margin: 0 auto; }
.process-eyebrow { color: #84a9ba; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 24px; }
.process-heading { font-family: Outfit, system-ui, sans-serif; font-weight: 500; font-size: clamp(30px, 3.7vw, 54px); line-height: 1.2; letter-spacing: -.05em; word-break: keep-all; }
.process-heading em { font-style: normal; color: #8aa8b9; }
.process-description { color: #93a0ae; line-height: 1.8; font-size: 13px; margin-top: 24px; max-width: 340px; word-break: keep-all; }
.material-choice:focus-visible { outline: 2px solid #77b8e1; outline-offset: 5px; }

.recovery-head { display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; }
.recovery-head .process-heading { max-width: 680px; }
.recovery-head .process-description { margin-top: 0; max-width: 280px; }
.recovery-status { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding: 16px 0; border-top: 1px solid #28343e; color: #8fa2ae; font-size: 10px; letter-spacing: .16em; }
.flow-status { display: inline-flex; align-items: center; gap: 9px; }
.flow-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #88bba4; box-shadow: 0 0 9px #88bba455; }
.recovery-section.is-paused .flow-status::before { background: #7e8790; box-shadow: none; }
.recovery-scene { position: relative; width: 100%; aspect-ratio: 3 / 2; max-width: 1140px; margin: -25px auto 0; }
.recovery-machine { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten; }
.recovery-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.outlet-labels { position: absolute; inset: 0; pointer-events: none; }
.outlet-label { position: absolute; top: 81%; left: var(--x); width: 10.2%; transform: translate(-50%, -50%); color: #d1cdc2; font-family: "Arial Black", "Impact", monospace; font-weight: 900; font-size: clamp(9px, 1.4vw, 16px); line-height: 1.1; letter-spacing: .06em; text-align: center; white-space: nowrap; opacity: .65; mix-blend-mode: soft-light; -webkit-mask-image: repeating-linear-gradient(174deg, #000 0 2px, #0009 2.2px 2.6px, #000 3px 6px); mask-image: repeating-linear-gradient(174deg, #000 0 2px, #0009 2.2px 2.6px, #000 3px 6px); }
.material-choices { display: grid; width: 100%; max-width: 1140px; margin: 0 auto; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid #34424e; border-bottom: 1px solid #34424e; }
.material-choice { background: transparent; border: 0; border-right: 1px solid #26323d; text-align: left; font-family: inherit; color: #a4b1bb; padding: 23px 20px; cursor: pointer; position: relative; transition: background .2s; }
.material-choice:last-child { border-right: 0; }
.material-choice:hover { background: #12212d; }
.material-choice[aria-pressed="true"] { background: #13212c; color: #f5f8fa; }
.material-choice[aria-pressed="true"]::before { content: ""; position: absolute; top: -1px; height: 2px; left: 0; right: 0; background: var(--material-color, #adc4d1); }
.material-symbol { display: block; font-size: 26px; font-weight: 400; letter-spacing: -.06em; color: var(--material-color, #adc4d1); margin-bottom: 12px; }
.material-choice strong { display: block; font-size: 13px; font-weight: 500; }
.material-choice small { display: block; margin-top: 5px; font-size: 10px; color: #768a98; }
.material-detail { display: flex; align-items: baseline; justify-content: space-between; gap: 25px; padding: 24px 0; min-height: 100px; }
.material-detail h3 { font-size: 17px; font-weight: 500; min-width: 165px; }
.material-detail p { max-width: 710px; font-size: 13px; line-height: 1.8; color: #97a6b1; word-break: keep-all; }
.process-footnote { color: #657785; font-size: 10px; line-height: 1.7; margin-top: 8px; }
.materials { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1000px) {
  .process-wrap { width: calc(100% - 48px); }
  .material-choice { padding: 18px 12px; }
  .material-choice strong { font-size: 12px; }
  .material-choice small { font-size: 9px; }
  .material-symbol { font-size: 23px; }
}
@media (max-width: 700px) {
  .process-eyebrow { font-size: 9px; margin-bottom: 18px; }
  .process-heading { font-size: 34px; }
  .process-description { font-size: 12px; margin-top: 20px; max-width: none; }
  .recovery-section { padding: 80px 0 60px; }
  .recovery-head { display: block; }
  .recovery-head .process-description { margin-top: 24px; max-width: none; }
  .recovery-status { margin-top: 30px; font-size: 8px; letter-spacing: .08em; }
  .recovery-scene { width: calc(100% + 32px); margin: 0 0 12px -16px; }
  .outlet-label { font-size: clamp(6px, 1.7vw, 11px); letter-spacing: .035em; }
  .material-choices { width: calc(100% + 32px); max-width: none; margin: 0 -16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .material-choice { padding: 16px 13px; border-bottom: 1px solid #26323d; }
  .material-choice:nth-child(3n) { border-right: 0; }
  .material-symbol { font-size: 25px; margin-bottom: 8px; }
  .material-detail { display: block; min-height: 147px; }
  .material-detail h3 { font-size: 16px; margin-bottom: 10px; }
  .material-detail p { font-size: 12px; }
  .materials { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .material-choice { transition: none; }
}

/* The equipment image, live streams and outlet targets share one camera. */
.recovery-explore-hint { margin: 10px 0 18px; text-align: center; color: #8fa7b5; font-size: 11px; letter-spacing: .04em; }
.recovery-viewport { position: relative; width: 100%; max-width: 1140px; aspect-ratio: 3 / 2; margin: 0 auto; overflow: hidden; isolation: isolate; background: #080d12; scroll-margin-top: 78px; --recovery-accent: #bdd6e4; }
.recovery-viewport .recovery-scene { position: absolute; inset: 0 auto auto 0; width: 100%; height: auto; aspect-ratio: 3 / 2; max-width: none; margin: 0; transform-origin: 0 0; transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .45s .12s; }
/* One outer frame for the overview and every material, including return. */
.recovery-viewport.is-zoomed { aspect-ratio: 3 / 2; }
.recovery-viewport.is-zoomed .recovery-scene { will-change: transform; }
.recovery-viewport.is-zoomed.has-macro-plate .recovery-scene { opacity: 0; }
.recovery-macro { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transform: scale(.98); transform-origin: 40% 42%; transition: opacity .6s .1s, transform 1.15s cubic-bezier(.16,1,.3,1), visibility .6s; }
.recovery-macro canvas { display: block; width: 100%; height: 100%; }
.recovery-macro canvas.recovery-macro-outgoing { position: absolute; inset: 0; }
.is-zoomed.has-macro-plate .recovery-macro { visibility: visible; opacity: 1; transform: scale(1) translateY(0); }
.outlet-illumination { position: absolute; inset: 0; background: url('../assets/recovery-line.webp') center / 100% 100% no-repeat; filter: brightness(1.65) saturate(1.12); mix-blend-mode: lighten; opacity: 0; pointer-events: none; transition: opacity .34s;
  mask-image: radial-gradient(ellipse 4.8% 5.4% at var(--outlet-x) 63%, #000 34%, #000b 64%, transparent 100%), radial-gradient(ellipse 3.3% 8% at var(--outlet-x) 71%, #000c 18%, #0008 54%, transparent 100%), radial-gradient(ellipse 6.2% 8.3% at var(--outlet-x) 82%, #000 48%, #000b 75%, transparent 100%);
}
.outlet-illumination.is-lit { opacity: .92; }
/* Defer this offscreen CSS image with JS; the base rule still supports no-JS. */
html.has-deferred-visuals .recovery-section:not(.has-visual-assets) .outlet-illumination { background-image: none; }
.recovery-viewport [hidden] { display: none !important; }
.outlet-hotspots { position: absolute; inset: 0; }
.outlet-hotspot { position: absolute; top: 59%; left: var(--x); width: 10.4%; height: 28%; transform: translateX(-50%); border: 0; background: transparent; cursor: zoom-in; color: #ecf6fc; font-family: inherit; padding: 0; }
.outlet-hotspot:hover, .outlet-hotspot:focus-visible { outline: none; }
.outlet-tooltip { position: absolute; left: 50%; top: -7px; transform: translate(-50%,-85%); min-width: 142px; padding: 12px 16px; background: #08121ef2; border: 1px solid #68889b66; text-align: left; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; }
.outlet-tooltip strong { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; }
.outlet-tooltip small { display: block; margin-top: 5px; color: #9ab5c6; font-size: 9px; white-space: nowrap; }
.outlet-hotspot:hover .outlet-tooltip, .outlet-hotspot:focus-visible .outlet-tooltip { opacity: 1; transform: translate(-50%,-100%); }
.is-zoomed .outlet-hotspots, .is-zoomed .outlet-labels { visibility: hidden; }
.recovery-back { position: absolute; top: 24px; left: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 12px; border: 1px solid #59728380; color: #e4eef5; background: #09131edb; backdrop-filter: blur(12px); padding: 11px 16px; font-family: inherit; font-size: 11px; cursor: pointer; }
.recovery-back > span:first-child { font-size: 18px; }
.recovery-back:hover { border-color: #c2dce8; }
.recovery-back:focus-visible, .recovery-detail-close:focus-visible { outline: 2px solid #b4dcf1; outline-offset: 3px; }
.recovery-detail { position: absolute; z-index: 2; right: 0; top: 0; width: 33.333333%; min-width: 286px; height: 100%; max-height: 100%; padding: clamp(24px,2.6vw,36px); display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(135deg,#10202ace,#09121bc7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 0; outline: none; }
.recovery-detail-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #466270 transparent; }
.recovery-material-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; flex-shrink: 0; margin-top: 24px; padding-top: 16px; border-top: 1px solid #b7d8ed26; }
.recovery-material-nav button { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid #6b8f9e50; background: #a4cee908; color: #dcebf2; font: inherit; cursor: pointer; text-align: left; transition: background .2s, border-color .2s; }
.recovery-material-nav button:last-child { justify-content: flex-end; text-align: right; }
.recovery-material-nav button > span { min-width: 0; }
.recovery-material-nav button small { display: block; color: #9bb4c2; font-size: 9px; margin-bottom: 4px; }
.recovery-material-nav button strong { display: block; font-size: 11px; font-weight: 500; line-height: 1.3; }
.recovery-material-nav button:hover { background: #a4cee919; border-color: #b4dcf1; }
.recovery-material-nav button:focus-visible { outline: 2px solid #b4dcf1; outline-offset: 2px; }
.is-zoomed .recovery-detail { animation: material-reveal .65s .18s both; }
@keyframes material-reveal { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
.recovery-detail-kicker { display: flex; justify-content: space-between; gap: 20px; color: #a0bccd; font-size: 9px; letter-spacing: .14em; }
.recovery-detail h3 { margin-top: 19px; color: var(--recovery-accent); font-size: clamp(28px,2.8vw,36px); line-height: 1.1; letter-spacing: -.04em; font-weight: 400; }
.recovery-detail-description { font-size: 12px; line-height: 1.7; color: #c0cfd9; margin-top: 12px; word-break: keep-all; }
.recovery-share { margin-top: 20px; }
.recovery-share strong { display: block; font-weight: 300; font-size: clamp(48px,4.8vw,66px); line-height: 1; letter-spacing: -.055em; color: #edf4f9; }
.recovery-share > span { display: block; margin-top: 9px; color: #89a0b1; font-size: 8px; letter-spacing: .12em; }
.recovery-share i { display: block; margin-top: 14px; height: 2px; background: #b4d6e525; }
.recovery-share b { display: block; height: 100%; background: var(--recovery-accent); transition: width .85s cubic-bezier(.16,1,.3,1); }
.recovery-material-location { margin-top: 20px; }
.recovery-material-location > span, .recovery-next-life h4 { font-size: 8px; color: #7d99ac; letter-spacing: .13em; font-weight: 400; }
.recovery-material-location p { margin-top: 6px; color: #d5e0e8; font-size: 11px; }
.recovery-next-life { margin-top: 20px; }
.recovery-next-life ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 0; list-style: none; margin-top: 12px; }
.recovery-next-life li { min-width: 0; overflow: hidden; border: 1px solid #6b8f9e50; padding: 0 0 10px; background: #0a15294d; font-size: 10px; line-height: 1.5; color: #e6f2f9; text-align: center; }
.recovery-next-life img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 auto 8px; }
.recovery-next-life li > span { display: block; padding: 0 7px; }
.recovery-route-description, .recovery-assembly-note { font-size: 12px; line-height: 1.75; color: #b8cbd8; margin-top: 14px; word-break: keep-all; }
.recovery-basis { margin-top: 25px; padding-top: 15px; border-top: 1px solid #6883922e; font-size: 9px; line-height: 1.65; color: #708b9e; }
.recovery-sources { margin-top: 22px; padding-top: 14px; border-top: 1px solid #b7d8ed26; font-size: 10px; line-height: 1.8; color: #a9c3d3; }
.recovery-sources summary { cursor: pointer; font-size: 11px; }
.recovery-sources summary:focus-visible { outline: 2px solid #b4dcf1; outline-offset: 5px; }
.recovery-sources a { display: block; color: #a0c2d7; margin-top: 7px; text-decoration-color: #557b8e; }
.recovery-detail-close { display: inline-block; margin-top: 14px; color: #bbd7e7; background: transparent; border: 0; padding: 0 0 4px; border-bottom: 1px solid #708f9e77; font: inherit; font-size: 10px; cursor: pointer; }
@media (max-width: 1000px) and (min-width: 701px) {
  .recovery-detail { width: 35%; padding: 24px; }
}
@media (max-width: 700px) {
  .recovery-explore-hint { text-align: left; font-size: 10px; line-height: 1.7; margin: 8px 0 16px; }
  .recovery-viewport, .recovery-viewport.is-zoomed { width: calc(100% + 32px); margin: 0 -16px; max-width: none; scroll-margin-top: 76px; aspect-ratio: 3 / 2; }
  .recovery-viewport .recovery-scene { width: 100%; margin: 0; top: 0; }
  .recovery-macro { width: 100%; height: 100%; }
  .outlet-tooltip { min-width: 105px; padding: 8px 10px; }
  .outlet-tooltip strong { font-size: 11px; }
  .outlet-tooltip small { font-size: 8px; }
  .recovery-back { top: 10px; left: 10px; padding: 5px 8px; font-size: 9px; gap: 6px; }
  .recovery-detail { top: 0; bottom: 0; right: 0; margin: 0; width: 48%; min-width: 0; height: 100%; max-height: 100%; padding: 14px; background: linear-gradient(135deg,#142330df,#0a141ce8); }
  .recovery-detail-kicker { font-size: 6px; gap: 5px; }
  .recovery-detail h3 { margin-top: 10px; font-size: 23px; }
  .recovery-share strong { font-size: 36px; }
  .recovery-detail-description, .recovery-next-life p { font-size: 10px; }
  .recovery-next-life li { padding: 0 0 5px; font-size: 8px; }
  .recovery-material-nav { margin-top: 10px; padding-top: 8px; gap: 5px; }
  .recovery-material-nav button { padding: 7px 5px; gap: 4px; }
  .recovery-material-nav button small { font-size: 7px; }
  .recovery-material-nav button strong { font-size: 8px; }
  .recovery-detail-close { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .recovery-viewport .recovery-scene, .recovery-share b, .outlet-illumination, .outlet-tooltip, .recovery-macro { transition: none; }
  .is-zoomed .recovery-detail { animation: none; }
}