/* Real 3D circular road; fallback is the existing interactive eight-stage diagram. */
.road3d-view{display:none;min-width:0;width:100%;position:relative}
.road3d-ready .road3d-view{display:block}
.road3d-ready .cycle-orbit-scene,.road3d-ready .cycle-diagram-caption{display:none}
.road3d-ready .cycle-orbit-wrap{min-height:580px;justify-content:flex-start;align-items:stretch}
.road3d-canvas-wrap{width:100%;height:clamp(460px,43vw,625px);position:relative;overflow:hidden;border-radius:27px;border:1px solid rgba(60,129,85,.28);background:radial-gradient(ellipse at 50% 33%,#f8fcf5,#dbece0);box-shadow:inset 0 2px 15px rgba(0,65,35,.04),0 16px 38px rgba(20,75,51,.09)}
.road3d-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-4px}
.road3d-canvas:active{cursor:grabbing}
.road3d-canvas canvas{display:block;width:100%;height:100%;touch-action:none}
.road3d-badge{position:absolute;left:15px;top:17px;border:1px solid #b8dbc4;background:#f7fff1e8;backdrop-filter:blur(12px);border-radius:100px;padding:9px 13px;display:flex;align-items:center;gap:8px;color:#26674e;font-size:.71rem;font-weight:800;pointer-events:none;box-shadow:0 5px 18px #1f694220}
.road3d-badge-dot{width:8px;height:8px;background:#30b37b;border-radius:50%;box-shadow:0 0 0 4px #30b37b1d}
.road3d-camera-controls{position:absolute;left:15px;right:15px;bottom:49px;display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap;pointer-events:none}
.road3d-camera-btn{pointer-events:auto;border:1px solid #c1dbcc;border-radius:11px;background:#ffffffec;color:#2e6552;backdrop-filter:blur(10px);padding:9px 13px;min-height:38px;font-weight:800;font-size:.74rem;box-shadow:0 6px 14px rgba(0,54,27,.06);transition:background .2s,transform .2s}
.road3d-camera-btn:hover{background:#e8f5e9;transform:translateY(-1px)}
.road3d-camera-btn.is-active{background:#145f44;border-color:#145f44;color:white}
.road3d-hint{position:absolute;bottom:13px;left:0;right:0;text-align:center;color:#4f7963;text-shadow:0 1px white;font-weight:750;font-size:.72rem;pointer-events:none}
.road3d-hint span{color:#2a9973;margin:0 3px}
.road3d-stop-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:11px 0 0}
.road3d-stop{display:flex;align-items:center;gap:7px;text-align:left;border:1px solid #cee4d6;background:#f9fdf6;color:#446d56;border-radius:12px;padding:8px 10px;min-height:41px;font:700 .73rem/1.25 Manrope,sans-serif;letter-spacing:-.02em;transition:border-color .2s,background .2s,transform .2s}
.road3d-stop span{border:1px solid #b1d7bf;color:#1d865f;display:grid;place-items:center;border-radius:50%;width:22px;height:22px;flex-shrink:0;font:800 .57rem Manrope,sans-serif}
.road3d-stop:hover{border-color:#53ad81;background:#eaf8eb;transform:translateY(-2px)}
.road3d-stop.is-selected{background:#dcf1e2;border-color:#399e71;color:#175c43;box-shadow:0 3px 10px #17623e0d}
.road3d-stop.is-selected span{background:#176b4e;border-color:#176b4e;color:white}
.road3d-hint-mobile{display:none;color:#527663;font-size:.72rem;margin:8px 0 0;text-align:center}
.cycle-detail-category{max-width:70%;text-align:center}
@media(min-width:1400px){.road3d-canvas-wrap{height:625px}.road3d-ready .cycle-orbit-wrap{min-height:655px}}
@media(max-width:1150px){.road3d-ready .cycle-orbit-wrap{min-height:0}.road3d-canvas-wrap{height:530px}.road3d-stop-list{grid-template-columns:repeat(2,minmax(0,1fr))}.road3d-stop{font-size:.71rem;padding:8px}}
@media(max-width:900px){.road3d-canvas-wrap{height:min(74vw,600px);min-height:460px}.road3d-stop-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){
 .road3d-canvas-wrap{min-height:350px;height:380px;border-radius:20px}
 .road3d-badge{left:9px;top:10px;padding:6px 10px;font-size:.61rem}
 .road3d-camera-controls{bottom:46px;left:8px;right:8px;gap:5px}
 .road3d-camera-btn{min-height:35px;padding:6px 8px;font-size:.66rem}
 .road3d-hint{font-size:.62rem;padding:0 6px}
 .road3d-stop-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .road3d-stop{min-height:43px;font-size:.66rem;padding:7px 8px}
 .road3d-hint-mobile{display:block}
 .road3d-ready .cycle-orbit-wrap{display:block}
}
@media(max-width:380px){.road3d-canvas-wrap{height:340px;min-height:340px}.road3d-camera-btn{font-size:.62rem;padding:6px}.road3d-hint{font-size:.58rem}.road3d-stop{font-size:.6rem}}
@media(prefers-reduced-motion:reduce){.road3d-camera-btn,.road3d-stop{transition:none!important}.road3d-stop:hover,.road3d-camera-btn:hover{transform:none!important}}


/* Illustrated checkpoint key */
.road3d-stop-icon{width:30px;height:30px;display:block;object-fit:contain;border-radius:8px;flex:none;background:#f3fbf2}
.road3d-stop{gap:6px}
.road3d-stop>span{order:-1}
.road3d-stop.is-selected .road3d-stop-icon{background:#e1f7e6;box-shadow:0 0 0 2px #50aa8029}

/* Native fullscreen: 3D camera remains interactive and fits the monitor. */
.road3d-exit,.road3d-fullscreen-caption{display:none}
.road3d-fullscreen-toggle{white-space:nowrap}
.road3d-view:fullscreen{
 display:flex!important;flex-direction:column;gap:9px;padding:10px;
 width:100%;height:100%;overflow:hidden;background:#123c2f;color:#e8f7eb;
}
.road3d-view:fullscreen .road3d-canvas-wrap{
 flex:1 1 auto;min-height:0;height:auto;max-height:none;
 border-radius:15px;border:1px solid #55876c;box-shadow:none;
}
.road3d-view:fullscreen .road3d-canvas{height:100%;width:100%}
.road3d-view:fullscreen .road3d-badge{display:none}
.road3d-view:fullscreen .road3d-camera-controls{bottom:16px}
.road3d-view:fullscreen .road3d-hint{display:none}
.road3d-view:fullscreen .road3d-stop-list{
 display:flex;flex:0 0 auto;flex-wrap:nowrap;overflow-x:auto;
 min-height:62px;max-height:76px;gap:8px;
 margin:0;padding:4px 6px 6px;scrollbar-width:thin;scrollbar-color:#8fc3a2 #174f3c;
}
.road3d-view:fullscreen .road3d-stop{
 flex:1 0 146px;width:auto;min-width:144px;max-width:222px;
 min-height:56px;background:#f2faf2;border-color:#9cc5a4;color:#24593f
}
.road3d-view:fullscreen .road3d-stop.is-selected{background:#d8f2dd;border:2px solid #40b47e}
.road3d-view:fullscreen .road3d-hint-mobile{display:none}
.road3d-view:fullscreen .road3d-exit{
 position:absolute;display:flex;align-items:center;justify-content:center;
 z-index:30;top:15px;right:15px;
 background:#0e4937;color:#f5fff5;border:1px solid #90ba9a;
 border-radius:12px;padding:10px 15px;min-height:41px;
 font-weight:800;font-size:.79rem;box-shadow:0 4px 24px #0f382727
}
.road3d-view:fullscreen .road3d-exit:hover{background:#226e4f}
.road3d-view:fullscreen .road3d-fullscreen-caption{
 display:flex;flex-direction:column;gap:6px;
 position:absolute;left:17px;top:18px;z-index:15;
 width:min(345px,37%);max-height:calc(100% - 124px);overflow-y:auto;
 padding:16px 17px;background:#f8fff2eb;color:#1a4835;
 border:1px solid #b7dabd;border-radius:17px;
 box-shadow:0 12px 35px #0d392b2b;backdrop-filter:blur(10px)
}
.road3d-fullscreen-kicker{font-size:.65rem;letter-spacing:.13em;color:#29875d;font-weight:800}
.road3d-fullscreen-caption strong{font:800 clamp(.98rem,1.45vw,1.32rem)/1.2 Manrope,sans-serif;letter-spacing:-.04em}
.road3d-fullscreen-caption p{font-size:.73rem;line-height:1.5;color:#587568;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.road3d-fullscreen-steps{display:flex;gap:7px;margin-top:6px}
.road3d-fullscreen-steps button{border:1px solid #a9cbb4;border-radius:9px;padding:7px 9px;background:#e6f4e5;color:#226d4e;font-weight:800;font-size:.71rem}
.road3d-fullscreen-steps button:hover{background:#d4eccc}
.road3d-view:fullscreen .road3d-fullscreen-toggle{background:#145f44;color:#fafffb;border-color:#145f44}
@media(max-width:800px){
 .road3d-view:fullscreen{padding:5px;gap:4px}
 .road3d-view:fullscreen .road3d-canvas-wrap{border-radius:9px}
 .road3d-view:fullscreen .road3d-exit{top:9px;right:9px;font-size:.7rem;padding:7px 10px;min-height:36px}
 .road3d-view:fullscreen .road3d-fullscreen-caption{top:9px;left:9px;max-height:48%;width:min(260px,50%);padding:10px 12px;border-radius:12px;gap:4px}
 .road3d-view:fullscreen .road3d-fullscreen-caption strong{font-size:.88rem}
 .road3d-view:fullscreen .road3d-fullscreen-caption p{font-size:.66rem;-webkit-line-clamp:3}
 .road3d-view:fullscreen .road3d-camera-controls{bottom:8px;left:5px;right:5px;gap:4px}
 .road3d-view:fullscreen .road3d-camera-btn{padding:7px 9px;font-size:.69rem}
 .road3d-view:fullscreen .road3d-stop-list{min-height:52px;max-height:60px;padding:3px}
 .road3d-view:fullscreen .road3d-stop{min-height:45px;min-width:130px;flex-basis:130px;padding:5px 8px;font-size:.64rem}
 .road3d-view:fullscreen .road3d-stop-icon{width:26px;height:26px}
}
@media(max-width:480px){
 .road3d-view:fullscreen .road3d-fullscreen-caption{top:52px;left:9px;width:min(230px,61%);max-height:35%;padding:8px 10px}
 .road3d-view:fullscreen .road3d-fullscreen-caption p{display:none}
 .road3d-view:fullscreen .road3d-camera-controls{bottom:9px}
 .road3d-view:fullscreen .road3d-fullscreen-steps button{padding:5px 7px;font-size:.61rem}
 .road3d-stop-icon{width:27px;height:27px}
}

/* Photo illustrations extracted from the approved circular waste diagram. */
.road-atlas-icon{display:inline-block;flex:none;width:48px;height:48px;border-radius:50%;background-image:url("./road-images/eight-stages.webp");background-repeat:no-repeat;background-size:400% 200%;background-position:var(--atlas-x,0%) var(--atlas-y,0%);background-color:#f9fcf8;box-shadow:0 2px 7px rgba(29,84,48,.16);vertical-align:middle}
.road3d-stop-icon.road-atlas-icon{width:37px;height:37px;border:1px solid #bddbc6;border-radius:50%;background-color:#fff}
.road3d-stop.is-selected .road-atlas-icon{box-shadow:0 0 0 2px rgba(44,153,92,.28),0 3px 8px rgba(26,92,50,.2)}
.road3d-view:fullscreen .road3d-stop-icon.road-atlas-icon{width:38px;height:38px}
.cycle-step-disc .road-atlas-icon{width:91%;height:91%;box-shadow:none}
.cycle-detail-icon .road-atlas-icon{width:54px;height:54px;box-shadow:none}
.approval-header-note{font-size:.78rem;font-weight:800;color:#3e8059;text-align:right}
.approval-footer{padding:31px 0}
.approval-footer-inner{display:flex;align-items:center;gap:22px;justify-content:space-between;color:#d3ecdb;font-size:.85rem;font-weight:750;text-align:right}
.approval-footer .brand{color:#f7fff1}
@media(max-width:680px){.approval-header-note{font-size:.64rem;max-width:45%;line-height:1.35}.approval-footer-inner{flex-direction:column;align-items:flex-start;text-align:left}.road3d-stop-icon.road-atlas-icon{width:33px;height:33px}}

/* A synchronized guided-tour control inside the immersive 3D stage information panel. */
.road3d-fullscreen-caption .road3d-fullscreen-tour{display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;margin-top:8px;padding:11px 12px;border:1px solid #246947;border-radius:12px;background:#155f43;color:#f6fff2;font:800 .76rem/1.2 Manrope,sans-serif;cursor:pointer;text-align:left;box-shadow:0 5px 16px #093f3021;transition:background .2s,transform .2s}
.road3d-fullscreen-caption .road3d-fullscreen-tour:hover{background:#277a54;transform:translateY(-1px)}
.road3d-fullscreen-caption .road3d-fullscreen-tour.is-playing{background:#eaf5e6;color:#155f43;border-color:#76b58a}
.road3d-fullscreen-caption .road3d-fullscreen-tour.is-playing:hover{background:#d8ebd7}
.road3d-tour-symbol{font-size:1.05rem;width:19px;flex:none;text-align:center}
.road3d-tour-label{flex:1;white-space:nowrap}
.road3d-tour-duration{font:650 .62rem/1.2 'DM Sans',sans-serif;opacity:.78;text-align:right}
@media(max-width:800px){
 .road3d-fullscreen-caption .road3d-fullscreen-tour{margin-top:5px;padding:9px 8px;gap:6px;font-size:.7rem}
 .road3d-tour-duration{font-size:.58rem}
}
@media(max-width:480px){
 .road3d-fullscreen-caption .road3d-fullscreen-tour{padding:8px 7px;font-size:.66rem}
 .road3d-tour-duration{display:none}
}
@media(prefers-reduced-motion:reduce){.road3d-fullscreen-caption .road3d-fullscreen-tour{transition:none}}