/* Raster dossier artwork; copy stays in the document for accessibility. */
.team-process { position: relative; isolation: isolate; padding: 30px 0 24px; }
/* Continue the backdrop into the next section with a long fade behind its content. */
.team-process::before { content: ''; position: absolute; z-index: -1; inset: 30px 0 -520px; pointer-events: none; background: url('../assets/landing/corporate-process-backdrop-v1.webp') center top / cover no-repeat; mask-image: linear-gradient(transparent, #000 3%, #000 calc(100% - 900px), transparent); }
.team-process + .team-benefits { position: relative; z-index: 1; padding-top: 32px; }
.team-process-scene { position: relative; isolation: isolate; aspect-ratio: 1308 / 1202; margin-bottom: calc(min(1120px, 100vw - 64px) * -.1); }
.team-process-head { position: absolute; z-index: 2; inset: 0; }
.team-process .section-heading { position: absolute; top: 5.2%; left: 5.6%; width: 51%; margin: 0; }
.corporate-page .team-process h2 { font-size: clamp(32px, 3.55vw, 46px); line-height: 1.16; text-wrap: pretty; letter-spacing: -.045em; color: #f6ecda; }
.team-process-photo { position: absolute; top: 2.5%; left: 60.5%; width: 25%; margin: 0; padding: 9px 9px 23px; transform: rotate(-5deg); background: #e2d5bd; box-shadow: 0 16px 26px #0008, 0 1px 2px #0006; }
.team-process-photo::before { content: ''; position: absolute; z-index: 1; top: -12px; left: 38%; width: 26%; height: 28px; transform: rotate(7deg); background: #b8a17e90; box-shadow: inset 0 0 9px #a28a6670; clip-path: polygon(0 5%, 9% 0, 15% 6%, 25% 0, 33% 5%, 43% 0, 51% 5%, 61% 0, 70% 5%, 79% 0, 90% 4%, 100% 0, 100% 96%, 90% 100%, 82% 94%, 73% 100%, 64% 94%, 55% 100%, 45% 94%, 35% 100%, 25% 95%, 15% 100%, 7% 96%, 0 100%); }
.team-process-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.team-process-photo figcaption { margin-top: 8px; color: #4f3c2b; text-align: center; font: italic 12px/1.35 Georgia, serif; }
.team-process-route { position: absolute; inset: 0; }
.team-process-art { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.team-process-art img { display: block; width: 100%; height: 100%; object-fit: fill; mask-image: linear-gradient(transparent, #000 3%, #000 95%, transparent), linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }
.team-process-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.team-process-threads .thread-lines path { fill: none; stroke: #b95430; stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 1px 1px #160a05); }
.team-process-watch { position: absolute; top: 9%; right: .5%; width: 15.4%; aspect-ratio: 1122 / 1402; pointer-events: none; filter: drop-shadow(3px 9px 8px #0009); }
.team-process-watch img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
/* Tone down the brass outside the dial; retain the original enamel and face overlay. */
.team-process-watch::after { content: ''; position: absolute; inset: 0; background: url('../assets/landing/detectum-stopwatch-case-v5.webp') center / 100% 100% no-repeat; filter: saturate(.55) brightness(.82) contrast(.92); mask-image: radial-gradient(ellipse 39% 31.2% at 50.5% 61%, transparent 97%, #000 100%); }
.team-process-watch .process-watch-face { z-index: 1; }
.team-process-duration { position: absolute; top: 24.5%; left: 59%; width: 24%; margin: 0; color: #f0dfc5; font-size: clamp(13px, 1.13vw, 16px); font-weight: 600; line-height: 1.65; text-align: center; text-shadow: 0 1px 5px #000, 0 2px 12px #000; }
.team-process-duration strong { color: #f4e7cf; font-weight: 800; }
.team-process-steps { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.team-process-steps li { position: absolute; display: grid; place-items: center; width: 41%; height: 16%; padding: 20px 26px 15px 62px; }
.team-process-steps li:nth-child(1) { left: 53.2%; top: 30.8%; }
.team-process-steps li:nth-child(2) { left: 6.2%; top: 45%; width: 41.5%; }
.team-process-steps li:nth-child(3) { left: 53.2%; top: 58.4%; }
.team-process-steps li:nth-child(4) { left: 6.2%; top: 71.5%; width: 41.5%; height: 15.5%; }
.process-step-number { position: absolute; top: 17%; left: 6.5%; color: #8b4429; font: 600 clamp(24px, 2.8vw, 37px)/1 'Oswald', sans-serif; letter-spacing: -.04em; opacity: .87; }
.team-process-steps h3 { margin: 0; color: #32251b; font-size: clamp(16px, 1.58vw, 21px); font-weight: 700; line-height: 1.55; text-align: center; letter-spacing: -.025em; }
.team-process > .shell .team-conversation { margin-top: 45px; }
@media (min-width: 761px) and (max-width: 1000px) {
  .corporate-page .team-process h2 { font-size: clamp(28px, 3.3vw, 34px); }
  .team-process-photo { top: 1.2%; width: 24%; padding: 6px 6px 12px; }
  .team-process-photo figcaption { font-size: 9px; margin-top: 5px; white-space: nowrap; }
  .team-process-steps li { padding: 12px 14px 10px 40px; }
  .team-process-steps h3 { font-size: clamp(13px, 1.65vw, 16px); line-height: 1.5; }
  .process-step-number { font-size: 27px; }
  .team-process-duration { font-size: 12px; }
}
@media (max-width: 760px) {
  .team-process-threads { display: none; }
  .team-process { padding: 30px 0 24px; }
  .team-process::before { bottom: -300px; mask-image: linear-gradient(transparent, #000 3%, #000 calc(100% - 600px), transparent); }
  .team-process-scene { width: min(100%, 600px); aspect-ratio: auto; margin-bottom: 0; }
  .team-process-head { position: relative; display: grid; gap: 32px; padding: 10px 26px 20px; }
  .team-process .section-heading { position: static; width: auto; }
  .corporate-page .team-process h2 { font-size: clamp(30px, 7.7vw, 44px); line-height: 1.16; }
  .team-process-photo { position: relative; top: auto; left: auto; width: 86%; max-width: 360px; margin: 0 auto; padding: 8px 8px 18px; transform: rotate(-3deg); }
  .team-process-photo figcaption { margin-top: 8px; font-size: 12px; }
  .team-process-route { position: relative; aspect-ratio: 887 / 1774; margin-bottom: -20%; }
  .team-process-watch { top: .25%; right: 7%; width: 24%; }
  .team-process-art img { mask-image: linear-gradient(transparent, #000 3%, #000 93%, transparent), linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .team-process-duration { top: 5.3%; left: 10%; width: 53%; font-size: clamp(12px, 3.3vw, 16px); text-align: left; line-height: 1.6; }
  .team-process-steps li:nth-child(n) { left: 15.3%; width: 74.5%; height: 14.4%; padding: 10px 16px 6px; }
  .team-process-steps li:nth-child(1) { top: 15.8%; }
  .team-process-steps li:nth-child(2) { top: 34.8%; }
  .team-process-steps li:nth-child(3) { top: 54%; }
  .team-process-steps li:nth-child(4) { top: 72.4%; }
  .team-process-steps h3 { font-size: clamp(15px, 3.95vw, 21px); line-height: 1.45; }
  .process-step-number { top: 35%; left: -14%; color: #e6bb82; font-size: clamp(23px, 5.9vw, 32px); text-shadow: 0 2px 5px #000; }
  .team-process > .shell .team-conversation { margin-top: 10px; }
}
@media (max-width: 360px) {
  .team-process-head { padding-inline: 22px; }
  .team-process-steps li:nth-child(n) { padding: 8px 10px 4px; }
  .team-process-steps h3 { font-size: 14px; }
  .process-step-number { font-size: 22px; }
}
