.operations-demo{scroll-margin-top:76px;--ops-paper:var(--paper,#efeee4);--ops-orange:var(--orange,#ff5b18);--ops-muted:#b5b2aa;--ops-line:#ffffff24;color:var(--ops-paper);background:#181818}.operations-demo .wrap{width:100%;max-width:1200px;margin-inline:auto}.ops-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:32px;margin-bottom:32px}.ops-heading h2{font-size:clamp(2.4rem,5vw,4.5rem);letter-spacing:-.055em;line-height:1.02;margin:12px 0 0}.ops-heading>p{margin:0;max-width:43ch;font-size:1rem;line-height:1.55;color:var(--ops-muted)}.ops-heading strong{font-weight:500;color:var(--ops-paper)}.ops-shell{border:1px solid var(--ops-line);border-radius:4px;overflow:visible;background:#1e1e1c}.ops-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--ops-line)}.ops-wordmark{font-size:20px;font-weight:600;letter-spacing:-.035em}.ops-wordmark small{display:block;font-size:11px;font-weight:400;letter-spacing:0;color:var(--ops-muted);margin-top:4px}.ops-badge{font-size:10px;letter-spacing:.1em;color:var(--ops-orange);white-space:nowrap}.ops-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--ops-line)}.ops-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ops-muted);min-height:52px;padding:12px 8px;font:inherit;font-size:13px;cursor:pointer}.ops-tabs button[aria-selected=true]{color:var(--ops-paper);border-bottom-color:var(--ops-orange);background:#ffffff05}.ops-tabs button:hover{color:var(--ops-paper)}.operations-demo button:focus-visible,.operations-demo input:focus-visible,.operations-demo select:focus-visible,.operations-demo textarea:focus-visible,.ops-panel:focus-visible{outline:2px solid var(--ops-orange);outline-offset:-3px}.ops-panel{padding:28px}.ops-panel[hidden]{display:none}.ops-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.ops-panel-heading h3{font-size:22px;letter-spacing:-.025em;margin:0}.ops-panel-heading>span{font-size:11px;color:var(--ops-muted)}.ops-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:28px}.ops-metrics>div{padding-bottom:16px;border-bottom:1px solid var(--ops-line)}.ops-metrics span{display:block;font-size:12px;color:var(--ops-muted)}.ops-metrics strong{display:block;font-size:38px;line-height:1.2;letter-spacing:-.04em;margin-top:8px}.ops-jobs,.ops-team,.ops-hazards{list-style:none;margin:0;padding:0}.ops-jobs li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--ops-line)}.ops-jobs strong,.ops-team strong,.ops-hazards strong{display:block;font-size:15px;font-weight:500}.ops-jobs li div>span,.ops-team li>span,.ops-hazards li div>span{display:block;color:var(--ops-muted);font-size:12px;margin-top:6px;line-height:1.5}.ops-status{display:inline-block;padding:7px 9px;font-size:10px;border:1px solid #ff5b1855;color:var(--ops-orange);white-space:nowrap}.ops-status-neutral{color:var(--ops-muted);border-color:var(--ops-line)}.ops-note{font-size:12px;line-height:1.5;color:var(--ops-muted);margin:20px 0 0;max-width:90ch}.ops-map-layout{display:grid;grid-template-columns:1.65fr 1fr;gap:24px}.ops-schematic{min-height:270px;position:relative;overflow:hidden;border:1px solid var(--ops-line);background:#252724}.ops-map-block{position:absolute;background:#343631;border:1px solid #ffffff15;width:35%;height:32%;transform:rotate(-12deg)}.block-one{left:6%;top:8%}.block-two{right:7%;top:9%}.block-three{left:34%;bottom:8%}.ops-map-road{position:absolute;background:#181818}.road-one{width:140%;height:22px;left:-20%;top:44%;transform:rotate(-12deg)}.road-two{width:22px;height:140%;left:45%;top:-20%;transform:rotate(-12deg)}.road-three{width:140%;height:12px;left:-20%;top:79%;transform:rotate(-12deg)}.ops-map-pin{position:absolute;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#181818;background:var(--ops-orange);font-weight:600;font-size:12px;border:2px solid var(--ops-paper)}.ops-map-pin small{position:absolute;top:37px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:400;color:var(--ops-paper);background:#181818;padding:4px 6px}.pin-one{top:17%;left:22%}.pin-two{top:25%;right:20%}.pin-three{bottom:25%;left:44%}.ops-map-caption{position:absolute;bottom:9px;left:10px;font-size:8px;letter-spacing:.08em;color:var(--ops-muted)}.ops-team li{padding:18px 0;border-bottom:1px solid var(--ops-line)}.ops-cost-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}.ops-cost-form,.ops-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.operations-demo label{display:grid;gap:8px;min-width:0;font-size:12px;line-height:1.5}.operations-demo input,.operations-demo select,.operations-demo textarea{min-width:0;width:100%;min-height:46px;background:#181818;color:var(--ops-paper);border:1px solid #ffffff35;border-radius:2px;padding:10px 12px;font:inherit;font-size:14px}.ops-estimate{padding:24px;border:1px solid var(--ops-line);align-self:start}.ops-estimate>span{font-size:12px;color:var(--ops-muted)}.ops-estimate output{display:block;font-size:clamp(30px,3.5vw,48px);letter-spacing:-.055em;line-height:1.15;color:var(--ops-orange);margin:16px 0;overflow-wrap:anywhere}.ops-estimate p{font-size:12px;line-height:1.55;color:var(--ops-muted);margin:0}.ops-hazards li{padding:16px 0;border-top:1px solid var(--ops-line)}.ops-hazards li>p{font-size:12px;line-height:1.5;color:var(--ops-muted);margin:12px 0 0}.ops-hazard-form{border-top:1px solid var(--ops-line);padding-top:20px;margin-top:20px;display:grid;gap:18px}.ops-hazard-form h4{margin:0;font-size:16px;font-weight:500}.operations-demo textarea{min-height:90px;resize:vertical}.ops-form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.ops-action,.ops-reset{min-height:46px;padding:12px 16px;font:inherit;font-size:12px;cursor:pointer;border:1px solid var(--ops-line)}.ops-action{display:flex;justify-content:space-between;gap:24px;background:var(--ops-paper);color:#181818}.ops-reset{background:transparent;color:var(--ops-paper)}.ops-action:hover{background:var(--ops-orange);border-color:var(--ops-orange)}.ops-reset:hover{border-color:var(--ops-paper)}.ops-form-status{margin:0;min-height:18px;font-size:12px;color:var(--ops-muted)}
@media(max-width:760px){.ops-heading{grid-template-columns:1fr;gap:20px;margin-bottom:24px}.ops-heading h2{font-size:clamp(36px,10vw,58px)}.ops-heading>p{font-size:14px}.ops-toolbar{padding:16px}.ops-panel{padding:20px}.ops-map-layout,.ops-cost-layout{grid-template-columns:1fr;gap:20px}.ops-metrics{gap:12px}.ops-metrics span{font-size:10px}.ops-metrics strong{font-size:30px}.ops-panel-heading{align-items:start;flex-direction:column;gap:8px}.ops-panel-heading h3{font-size:20px}.ops-jobs li{align-items:start}.ops-cost-form,.ops-form-row{gap:14px}.ops-tabs button{font-size:11px}.ops-schematic{min-height:260px}.ops-team{display:grid;grid-template-columns:1fr;gap:0}.ops-estimate{padding:20px}}
@media(max-width:400px){.ops-panel{padding:16px}.ops-jobs li{flex-direction:column;gap:10px}.ops-cost-form,.ops-form-row{grid-template-columns:1fr}.ops-tabs button{font-size:10px;padding-inline:3px}.ops-badge{font-size:8px}.ops-wordmark{font-size:18px}.ops-estimate output{font-size:34px}}
@media(prefers-reduced-motion:reduce){.operations-demo *{scroll-behavior:auto}}
/* A bounded native-scroll job story; all controls remain ordinary DOM elements. */
.ops-job-journey{height:220svh;position:relative;border-bottom:1px solid var(--ops-line)}.ops-job-stage{position:sticky;top:76px;min-height:580px;max-width:100%;padding:24px;background:#1e1e1c}.ops-job-top,.ops-job-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.ops-view-toggle{display:flex;gap:4px}.ops-view-toggle button,.ops-job-phases button,.ops-scenario-select button{font:inherit;font-size:11px;background:transparent;color:var(--ops-muted);border:1px solid var(--ops-line);min-height:38px;padding:8px 12px;cursor:pointer}.ops-view-toggle button[aria-pressed=true]{background:var(--ops-paper);color:#181818;border-color:var(--ops-paper)}.ops-job-heading{margin:24px 0}.ops-job-heading h3{font-size:clamp(30px,3.7vw,48px);letter-spacing:-.045em;line-height:1.05;margin:10px 0}.ops-job-heading>p:last-child{font-size:13px;line-height:1.5;color:var(--ops-muted);max-width:68ch;margin:10px 0 0}.ops-job-phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0 0 24px}.ops-job-phases button{width:100%;border:0;border-bottom:2px solid var(--ops-line);padding-inline:4px}.ops-job-phases button[aria-current=step]{color:var(--ops-paper);border-bottom-color:var(--ops-orange)}.ops-job-body{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}.ops-job-record{padding:22px;border:1px solid var(--ops-line);min-width:0}.ops-record-label{display:block;color:var(--ops-orange);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.ops-job-record>strong{display:block;font-size:26px;letter-spacing:-.04em;line-height:1.15;margin:14px 0}.ops-job-record>p,.ops-job-action>p{font-size:12px;line-height:1.5;margin:0;color:var(--ops-muted)}.ops-job-action{display:flex;flex-direction:column;gap:12px;align-items:start}.ops-job-action .ops-action{font-size:11px;max-width:100%}.ops-job-action button:disabled{opacity:.4;cursor:not-allowed}.ops-job-warning{color:var(--ops-orange)!important}.ops-job-evidence{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.ops-job-evidence span{padding:18px 10px;font-size:10px;line-height:1.5;background:#ffffff08;border:1px dashed var(--ops-line);text-align:center}.ops-job-invoice{display:grid;gap:8px;padding:14px 0 0;border-top:1px solid var(--ops-line)}.ops-job-invoice>span,.ops-job-invoice small{font-size:10px;color:var(--ops-muted);line-height:1.5}.ops-job-invoice>strong{font-size:26px;color:var(--ops-orange)}.ops-job-evidence[hidden],.ops-job-invoice[hidden],.ops-scenario-choices[hidden]{display:none}.ops-morning{margin-top:20px;border-top:1px solid var(--ops-line);padding-top:12px}.ops-morning summary{font-size:12px;cursor:pointer;min-height:32px}.ops-scenario-select,.ops-scenario-choices{display:flex;flex-wrap:wrap;gap:8px}.ops-scenario-select{margin-top:10px}.ops-morning>p{font-size:12px;line-height:1.5;color:var(--ops-muted)}.ops-job-bottom{margin-top:18px;font-size:10px;color:var(--ops-muted)}.ops-job-stage [hidden]{display:none}.ops-job-journey.is-static{height:auto}.is-static .ops-job-stage{position:relative;top:auto;min-height:0}
@media(max-width:760px){.ops-job-journey{height:180svh}.ops-job-stage{top:68px;min-height:520px;padding:20px}.ops-job-top{align-items:start}.ops-job-top .ops-badge{max-width:140px;white-space:normal;line-height:1.5}.ops-job-heading{margin:18px 0}.ops-job-heading h3{font-size:32px}.ops-job-heading>p:last-child{font-size:12px}.ops-job-phases{gap:4px;margin-bottom:18px}.ops-job-phases button{font-size:10px}.ops-job-body{grid-template-columns:1fr;gap:16px}.ops-job-record{padding:16px}.ops-job-record>strong{font-size:23px;margin:10px 0}.ops-job-action{gap:8px}.ops-job-action .ops-action{min-height:38px;padding:10px}.ops-job-bottom{font-size:9px}.ops-morning{margin-top:16px}.ops-job-evidence span{padding:12px 6px}.ops-job-stage:has(.ops-morning[open]){position:relative;top:auto}.ops-job-journey:has(.ops-morning[open]){height:auto;min-height:0}}
@media(max-height:700px){.ops-job-journey{height:auto!important}.ops-job-stage{position:relative;top:auto;min-height:0}.ops-job-bottom>span:first-child{font-size:0}.ops-job-bottom>span:first-child::after{content:'Select a stage to follow the job.';font-size:10px}}
@media(prefers-reduced-motion:reduce){.ops-job-journey{height:auto}.ops-job-stage{position:relative;top:auto;min-height:0}}
.ops-job-diagram{margin:-4px 0 18px;max-width:100%}.ops-job-diagram svg{display:block;width:100%;height:128px;overflow:visible}.ops-job-diagram g{fill:#1e1e1c;stroke:var(--ops-muted);stroke-width:1.5;transform-box:fill-box;transform-origin:center}.ops-job-diagram g[data-active=true]{stroke:var(--ops-orange)}.ops-job-diagram text{fill:var(--ops-muted);stroke:none;font-size:10px;text-anchor:middle;font-family:inherit}.ops-diagram-track{fill:none;stroke:var(--ops-line);stroke-width:1.5}.ops-diagram-flow{fill:none;stroke:var(--ops-orange);stroke-width:2;stroke-dasharray:4 4}.ops-diagram-dot{fill:var(--ops-orange)}.ops-diagram-pause{font:inherit;font-size:9px;color:var(--ops-muted);background:transparent;border:0;border-bottom:1px solid var(--ops-line);padding:5px 0;min-height:30px;cursor:pointer}.ops-job-diagram g path{fill:none}.ops-job-diagram g text{stroke:none}.ops-shell{overflow:visible}.ops-job-journey.is-static{min-height:0!important}.ops-job-stage{border-radius:4px 4px 0 0}
@media(max-width:760px){.ops-job-diagram{margin:0 0 12px}.ops-job-diagram svg{height:86px}.ops-job-record{padding:12px}.ops-job-heading h3{font-size:28px}.ops-job-heading{margin:14px 0}.ops-job-phases{margin-bottom:14px}.ops-job-body{gap:12px}.ops-job-stage{padding:16px}.ops-job-record>strong{font-size:21px}.ops-job-action>p{font-size:11px}.ops-job-bottom{margin-top:12px}}
/* Phone reading and touch floors apply to the same controls at every size. */
.operations-demo :is(button,select,input,textarea,summary){min-height:44px}
.operations-demo :is(.ops-view-toggle button,.ops-job-phases button,.ops-scenario-select button,.ops-job-action .ops-action,.ops-tabs button,.ops-diagram-pause){min-height:44px;font-size:12px}
.operations-demo :is(.ops-badge,.ops-wordmark small,.ops-panel-heading>span,.ops-metrics span,.ops-status,.ops-map-pin small,.ops-map-caption,.ops-record-label,.ops-job-evidence span,.ops-job-invoice>span,.ops-job-invoice small,.ops-job-bottom,.ops-job-action>p,.ops-job-diagram text){font-size:12px}
.operations-demo .ops-job-bottom>span:first-child{font-size:12px}
.operations-demo .ops-job-bottom>span:first-child::after{content:none}
.operations-demo .ops-job-bottom{align-items:flex-start;line-height:1.45}
.operations-demo .ops-job-bottom>span:last-child{white-space:nowrap}
.operations-demo .ops-job-stage .ops-action{min-height:44px;font-size:12px}
@media(max-width:400px){.operations-demo .ops-job-phases{gap:2px}.operations-demo .ops-job-phases button{padding-inline:1px}.operations-demo .ops-job-top .ops-badge{max-width:120px}.operations-demo .ops-tabs button{padding-inline:2px}.operations-demo .ops-map-pin small{font-size:12px;letter-spacing:-.02em}}
