/* Detailed Operations diorama; the page retains its warm paper background. */
.operations-hero{grid-template-columns:.78fr 1.22fr;gap:0;padding-block:37px 28px}
.operations-world-wrapper{min-width:0;position:relative;margin-left:-3%;margin-right:-4%}
#operations-scene{position:relative;height:620px;isolation:isolate;background:radial-gradient(ellipse at 52% 61%,#d8dfce2e,transparent 66%)}
#operations-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
#operations-scene[data-ready=true] canvas{opacity:1}
.operations-scene-skeleton{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;pointer-events:none;z-index:3;transition:opacity .8s ease,visibility 0s .8s}
.operations-scene-skeleton svg{width:100%;height:100%;opacity:.7;animation:operations-loading-breathe 2.7s ease-in-out infinite}
.operations-scene-skeleton:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff7 49%,transparent 76%);transform:translateX(-110%);animation:operations-loading-sweep 2.7s ease-in-out infinite}
#operations-scene[data-ready=true] .operations-scene-skeleton,#operations-scene[data-ready=fallback] .operations-scene-skeleton{opacity:0;visibility:hidden}
#operations-scene:not([data-ready=loading]) .operations-scene-skeleton:after,#operations-scene:not([data-ready=loading]) .operations-scene-skeleton svg{animation:none}
.operations-scene-fallback{position:absolute;inset:0;display:grid;align-items:center}.operations-scene-fallback[hidden]{display:none}.operations-scene-fallback .operations-map{width:100%;max-width:none}
#operations-scene[data-ready=loading] .operations-scene-fallback{visibility:hidden}
.operations-scene-labels{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .7s ease}
#operations-scene[data-ready=true] .operations-scene-labels{opacity:1}
.operations-scene-label{position:absolute;display:flex;align-items:center;gap:8px;transform:translate(-50%,-50%);padding:10px 11px;background:#f6f3eff0;border-bottom:1px solid #8097a647;color:#425963;font-size:14px;line-height:1.2;white-space:nowrap;pointer-events:auto;min-height:42px;border-radius:3px;transition:color .2s,background .2s}
.operations-scene-label:hover{background:#fff;color:#225f94}.operations-scene-label span{font-size:12px;opacity:.6}
.operations-scene-label.label-registry{font-size:15px;font-weight:550;background:#fffdf8;border:1px solid #b8c9c9;box-shadow:0 5px 14px #314a5312}.operations-scene-label i{width:6px;height:6px;background:#517f95;border-radius:50%;box-shadow:0 0 0 4px #517f9512}
.label-producers{left:21%;top:16%}.label-care{left:78%;top:17%}.label-markets{left:13%;top:57%}.label-processing{left:87%;top:59%}.label-distribution{left:39%;top:87%}.label-registry{left:50%;top:40%}
.operations-scene-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.operations-scene-leaders path{fill:none;stroke:#507ca0;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--blueprint,0));opacity:calc(var(--blueprint,0) * .65)}
.operations-view-controls{display:flex;width:max-content;max-width:100%;margin:-5px auto 0;position:relative;z-index:5;padding:4px;border:1px solid var(--line);background:#ffffff80;border-radius:5px;gap:2px}
.operations-view-controls button{font-size:13px;min-height:40px;padding:9px 17px;border-radius:3px;color:#677676}
.operations-view-controls button[aria-pressed=true]:not(.operations-scene-toggle){background:var(--ink);color:white}
.operations-view-controls .operations-scene-toggle{border-left:1px solid var(--line);border-radius:0;margin-left:4px;min-width:44px;padding-inline:12px;color:var(--ink)}
.operations-view-controls button:disabled{opacity:.45;cursor:default}
#operations-scene[data-ready=fallback] :is(canvas,.operations-scene-labels,.operations-scene-leaders){display:none}
@keyframes operations-loading-breathe{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes operations-loading-sweep{to{transform:translateX(110%)}}
@media(min-width:1500px){#operations-scene{height:670px}.operations-hero{min-height:780px}}
@media(max-width:1100px){.operations-hero{grid-template-columns:.8fr 1.2fr}#operations-scene{height:520px}.operations-scene-label{font-size:12px;padding:9px 8px;gap:5px}.operations-scene-label.label-registry{font-size:13px}.label-producers{left:24%;top:20%}.label-care{left:77%;top:21%}.label-markets{left:14%;top:59%}.label-processing{left:86%;top:59%}.label-distribution{left:40%;top:84%}}
@media(max-width:760px){.operations-hero{gap:26px;padding-bottom:33px}.operations-world-wrapper{margin:0 -6%}#operations-scene{height:415px}.operations-scene-label{font-size:12px;min-height:40px;padding:8px 6px;gap:4px}.operations-scene-label span{font-size:10px}.operations-scene-label.label-registry{font-size:13px;padding:9px}.label-producers{left:24%;top:14%}.label-care{left:77%;top:14%}.label-markets{left:15%;top:58%}.label-processing{left:85%;top:59%}.label-distribution{left:44%;top:84%}.label-registry{left:50%;top:33%}.operations-view-controls{margin-top:-1px}.operations-view-controls button{min-height:42px;font-size:12px;padding:9px 16px}}
@media(prefers-reduced-motion:reduce){.operations-scene-skeleton:after{display:none}.operations-scene-skeleton svg{animation:none}#operations-scene canvas,.operations-scene-skeleton,.operations-scene-labels{transition:none!important}}
.operations-view-controls[hidden]{display:none}
@media(min-width:761px) and (max-width:1000px){.operations-hero{display:flex;flex-direction:column;align-items:stretch;gap:12px}.operations-hero-copy{max-width:670px}.operations-hero-copy>p{max-width:590px}.operations-world-wrapper{margin:0 -3%}#operations-scene{height:565px}.label-producers{top:16%}.label-care{top:17%}.label-distribution{top:88%}}

/* Shared homepage introduction: give the same diorama room without a second hero. */
.operations-intro{grid-template-columns:.8fr 1.2fr;gap:2%;padding-block:35px 52px}
.operations-intro #operations-scene{height:570px}
.operations-intro .operations-scene-fallback .operations-map{width:100%;max-width:none;margin:0}
@media(min-width:1500px){.operations-intro #operations-scene{height:620px}}
@media(min-width:761px) and (max-width:1000px){.operations-intro{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding-top:40px}.operations-intro-copy>p{max-width:560px}.operations-intro #operations-scene{height:565px}}
@media(max-width:760px){.operations-intro{padding-block:41px 37px;gap:23px}.operations-intro #operations-scene{height:415px}}