.handoff-intro { display:grid; grid-template-columns:1.1fr 1fr; gap:9%; align-items:end; margin-bottom:45px; }
.handoff-intro h2 { margin:15px 0 0; font-size:clamp(40px,5vw,70px); line-height:1.05; }
.handoff-intro>p { font:15px/1.85 var(--sans); max-width:480px; margin:0 0 8px; color:#687066; }
.handoff-map { position:relative; isolation:isolate; padding:35px 28px 28px; border:1px solid #cec2ae; border-radius:18px; background:linear-gradient(125deg,#f9f6ee,#eee6d9); overflow:hidden; }
.handoff-backdrop { position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 50% 15%,#bfa57625,transparent 55%); }
.handoff-connections { position:absolute; inset:0; width:100%; height:100%; z-index:-1; fill:none; stroke:#b29c795c; stroke-width:1; }
.handoff-connections .handoff-current { stroke:#9c7f50; stroke-width:1.6; stroke-dasharray:9 140; animation:handoff-stream 9s linear infinite; }
@keyframes handoff-stream { to { stroke-dashoffset:-596; } }
.handoff-main { display:grid; grid-template-columns:1fr 1.25fr 1fr; align-items:center; gap:9%; }
.handoff-node,.handoff-hub { position:relative; border:1px solid #d4c8b5; background:#fcfaf4; color:#4c534d; border-radius:12px; padding:24px 16px; text-align:left; transition:background .3s,border-color .3s,box-shadow .3s,translate .3s; }
.handoff-node { display:grid; gap:8px; min-height:154px; }
.handoff-node svg { width:30px; height:30px; fill:none; stroke:#947953; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; margin-bottom:7px; }
.handoff-node strong { font:500 15px/1.3 var(--sans); }
.handoff-node>span { font:11px/1.5 var(--sans); color:#858071; }
.handoff-node i { position:absolute; top:21px; right:18px; font-style:normal; color:#a39171; }
.handoff-node:hover { translate:0 -4px; border-color:#ab8d60; box-shadow:0 12px 25px #73604510; }
.handoff-node[aria-pressed=true] { background:#e9dfcc; border-color:#9c8056; }
.handoff-hub { text-align:center; background:linear-gradient(115deg,#59564b,#73634d,#4c534b); padding:28px 18px; box-shadow:0 16px 40px #534b3920; }
.handoff-hub>span { font:9px var(--sans); color:#dacbb1; letter-spacing:.16em; }
.handoff-hub img { display:block; width:100%; max-width:218px; height:80px; object-fit:contain; margin:18px auto; }
.handoff-hub small { color:#ede1cc; font:11px var(--sans); }
.handoff-hub[aria-pressed=true] { outline:1px solid #c0a679; outline-offset:5px; }
.handoff-support-label { display:flex; justify-content:space-between; gap:15px; margin:66px 0 20px; font:9px/1.5 var(--sans); letter-spacing:.12em; color:#867559; }
.handoff-support-label span { font-size:8px; color:#878779; }
.handoff-support { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.handoff-support .handoff-node { min-height:140px; }
.handoff-detail { display:grid; grid-template-columns:180px 1fr 28px; gap:30px; align-items:start; padding:32px 28px; margin:18px 0 35px; border-radius:12px; background:#f7f3ea; border-left:3px solid #a58b64; }
.handoff-detail .eyebrow { font-size:9px; margin:7px 0 0; }
.handoff-detail h3 { font:400 29px/1.2 var(--serif); margin:0 0 12px; }
.handoff-detail p { font:14px/1.85 var(--sans); margin:0; max-width:770px; color:#667065; }
.handoff-detail-arrow { color:#a48c65; font-size:25px; }
.handoff-tasks { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; list-style:none; counter-reset:role-task; padding:0; margin:24px 0; }
.handoff-tasks li { counter-increment:role-task; font:12px/1.7 var(--sans); color:#596354; padding:18px 15px; background:#eee8dc; border-top:1px solid #c6b698; border-radius:0 0 6px 6px; }
.handoff-tasks li:before { content:'0' counter(role-task); display:block; font-size:10px; letter-spacing:.1em; color:#967b50; margin-bottom:10px; }
.handoff-detail .handoff-next { border-top:1px solid #d7cbb8; padding-top:17px; font-size:12px; color:#86714f; }
.handoff-detail { scroll-margin-top:100px; }
@media(max-width:640px) { .handoff-tasks { grid-template-columns:1fr; gap:8px; } .handoff-tasks li { padding:13px 15px; } .handoff-tasks li:before { display:inline; margin-right:12px; } }
.handoff-detail.is-changing>div { animation:handoff-copy .4s both; }
@keyframes handoff-copy { from { opacity:.1; transform:translateY(8px); } to { opacity:1; transform:none; } }
.handoff-map:not(.is-visible) .handoff-current { animation-play-state:paused; }
@media(max-width:800px) { .handoff-intro { grid-template-columns:1fr; gap:24px; } .handoff-main { gap:20px; } .handoff-node strong { font-size:13px; } .handoff-support { gap:10px; } .handoff-support .handoff-node { padding:20px 12px; } .handoff-detail { grid-template-columns:1fr; gap:15px; } .handoff-detail-arrow { display:none; } }
@media(max-width:560px) { .handoff-map { padding:25px 18px; } .handoff-main { grid-template-columns:1fr; gap:24px; } .handoff-main .handoff-node { min-height:95px; padding:18px 20px 18px 65px; } .handoff-main .handoff-node svg { position:absolute; left:20px; top:27px; } .handoff-hub { width:100%; } .handoff-support { grid-template-columns:1fr 1fr; gap:12px; } .handoff-support-label { margin-top:34px; flex-direction:column; gap:8px; } .handoff-connections { display:none; } .handoff-main:before { content:''; position:absolute; width:2px; height:385px; top:50px; left:50%; z-index:-1; background:linear-gradient(#c7b491,#92764c,#c7b491); } .handoff-detail { padding:25px 20px; } .handoff-detail h3 { font-size:26px; } }
@media(prefers-reduced-motion:reduce) { .handoff-current { animation:none!important; } .handoff-node { transition:none; } .handoff-detail.is-changing>div { animation:none; } }