/* Explanatory movement; native controls work in script-free case previews. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.case-pause{display:flex;align-items:center;gap:7px;min-height:44px;font-size:11px;cursor:pointer;color:var(--muted)}.case-pause input{accent-color:var(--cyan);width:16px;height:16px}.case-pause:has(input:focus-visible){outline:3px solid var(--bright);outline-offset:3px}
.walkthrough{padding:45px 0 70px}.workflow{border:1px solid var(--line);background:var(--surface);overflow:hidden}.workflow-controls{display:flex;border:0;border-bottom:1px solid var(--line);margin:0;padding:0;min-width:0}.workflow-controls label{flex:1;position:relative;cursor:pointer}.workflow-controls input{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}.workflow-controls label>span{display:flex;align-items:center;gap:18px;padding:25px 28px;font-size:16px;font-weight:600;min-height:72px}.workflow-controls b{font-size:11px;color:var(--bright)}.workflow-controls input:checked+span{background:var(--cyan);color:var(--ink)}.workflow-controls input:checked+span b{color:var(--ink)}.workflow-controls input:focus-visible+span{outline:3px solid var(--text);outline-offset:-5px}.workflow-panels{display:block}.workflow-panel{grid-area:1/1;display:grid;grid-template-columns:.7fr 1.3fr;gap:35px;padding:38px;align-items:center}.workflow-copy h3{font-size:clamp(25px,2.5vw,37px);line-height:1.15;margin:15px 0 20px}.workflow-copy>p:not(.section-label){font-size:14px;line-height:1.8;color:var(--muted)}.workflow-copy .workflow-note{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}.workflow-screen{min-width:0}.workflow-screen img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;object-position:top;border:1px solid var(--line);background:var(--bg)}.workflow-caption{border-top:1px solid var(--line);padding:16px 25px;font-size:11px;color:var(--muted)}.distribution{padding:35px 24px;border:1px solid var(--line);text-align:center;background:var(--bg)}.distribution>p{font-size:10px;color:var(--bright)}.distribution>strong{display:block;font-size:24px;margin-top:12px}.distribution-line{height:60px;width:1px;background:var(--cyan);margin:18px auto}.distribution ul{display:grid;grid-template-columns:1fr 1fr;gap:20px;list-style:none;padding:0;margin:0}.distribution li{border-top:2px solid var(--cyan);padding:20px 5px 0}.distribution b{display:block;font-size:16px}.distribution li span{font-size:12px;display:block;color:var(--muted);margin-top:12px}
@supports selector(:has(*)){.workflow-panels{display:grid}.workflow-panel{visibility:hidden;opacity:0;transform:translateY(12px);transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out),visibility 240ms}.workflow:has(input[value="0"]:checked) [data-step="0"],.workflow:has(input[value="1"]:checked) [data-step="1"],.workflow:has(input[value="2"]:checked) [data-step="2"]{visibility:visible;opacity:1;transform:none}.workflow:has(input:focus-visible) .workflow-panel{transition:none}}
.observation-proof{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#e2e8f0;padding:22px;margin-bottom:28px;border-radius:3px}.roof-plan{position:relative;min-height:175px;background:repeating-linear-gradient(90deg,#cad4df 0 1px,transparent 1px 20px),#dce4ec;overflow:hidden}.roof-plan>i{position:absolute;inset:25% 20%;border:3px solid #334155;transform:skewY(-12deg);background:#94a3b855}.roof-marker{position:absolute;left:53%;top:35%;background:#0e7490;color:white;border:4px solid white;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;font-weight:700}.roof-label{position:absolute;bottom:12px;left:15px;font-size:11px;color:#334155}.observation-card{align-self:center}.observation-card>span{font-size:10px;color:#0e7490}.observation-card>strong{font-size:23px;display:block;line-height:1.2;margin:12px 0}.observation-card p{font-size:12px;color:#475569}.scenario-comparison{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px}.scenario-comparison>div{border-top:3px solid #0e7490;background:#e2e8f0;padding:20px}.scenario-comparison span{font-size:10px;color:#64748b;display:block}.scenario-comparison b{font-size:19px;display:block;margin:15px 0 8px}.scenario-comparison p{font-size:12px;color:#475569}.plan-illustration{height:190px;background:repeating-linear-gradient(0deg,#cbd5e1 0 1px,transparent 1px 35px),repeating-linear-gradient(90deg,#cbd5e1 0 1px,transparent 1px 35px),#e2e8f0;position:relative;margin-bottom:28px;overflow:hidden}.plan-illustration i{position:absolute;inset:30px 20%;border:3px solid #475569;transform:rotate(-10deg)}.plan-illustration span{position:absolute;left:20%;top:30%;background:#0e7490;color:white;padding:7px 12px;font-size:11px}.plan-illustration span:nth-of-type(2){left:60%;top:45%}.plan-illustration span:nth-of-type(3){left:40%;top:70%}
.project-types{display:grid;grid-template-columns:1fr;gap:8px;border:0;padding:0;margin:20px 0}.contact-form .project-types label{position:relative;margin:0}.project-types input{position:absolute;width:1px!important;height:1px!important;clip:rect(0,0,0,0);overflow:hidden}.project-types label>span{display:block;padding:13px 15px;min-height:46px;border:1px solid #566274;color:var(--text);font-size:13px;border-radius:3px;cursor:pointer}.project-types input:checked+span{border-color:var(--cyan);background:#06b6d41c}.project-types input:focus-visible+span{outline:3px solid var(--bright);outline-offset:2px}.contact-form .contact-guidance{font-size:12px;color:var(--muted);line-height:1.6;margin:10px 0 22px}.contact-form select{display:block;width:100%;background:var(--bg);border:1px solid #566274;color:var(--text);padding:14px 12px;font:inherit;font-size:13px;border-radius:3px;margin-top:9px}.contact-form .optional{font-weight:400;color:var(--muted);font-size:11px}.contact-form .contact-next{font-size:12px;line-height:1.65;color:var(--muted);margin:24px 0}.contact-form [hidden]{display:none!important}.contact-form select:focus-visible{outline:3px solid var(--bright);outline-offset:3px}
@keyframes case-arrive{from{transform:translateY(24px) scale(.98)}to{transform:none}}
@supports(animation-timeline:view()){.case-cover img,.case-product figure,.case-phone img,.workflow{animation:case-arrive linear both;animation-timeline:view();animation-range:entry 0% cover 30%}}
.detail-page:has(#case-motion:checked) .workflow-panel{transition:none;transform:none}.detail-page:has(#case-motion:checked) .case-cover img,.detail-page:has(#case-motion:checked) .case-product figure,.detail-page:has(#case-motion:checked) .case-phone img,.detail-page:has(#case-motion:checked) .workflow{animation:none;transform:none}
@media(hover:hover) and (pointer:fine){.workflow-controls label:hover>span{box-shadow:inset 0 -2px var(--bright)}.case-related a{transition:transform 160ms var(--ease-out)}.case-related a:hover{transform:translateX(4px)}}
@media(max-width:900px){.workflow-panel{grid-template-columns:1fr;gap:24px;padding:28px}.workflow-screen img{max-height:400px}.workflow-controls label>span{padding:20px;gap:10px}.case-pause{font-size:10px}}
@media(max-width:550px){.workflow-panel{padding:22px 18px;align-content:start}.workflow-controls label>span{padding:16px 11px;font-size:12px;gap:8px;min-height:60px}.workflow-controls b{font-size:9px}.workflow-copy h3{font-size:27px}.workflow-caption{padding:14px 18px}.observation-proof{grid-template-columns:1fr;padding:16px}.roof-plan{min-height:145px}.observation-card>strong{font-size:21px}.scenario-comparison{grid-template-columns:1fr;gap:10px}.scenario-comparison>div{padding:16px}.scenario-comparison b{margin:7px 0;font-size:18px}.detail-page .site-header{gap:6px;padding-left:4%;padding-right:4%}.detail-page .header-actions{gap:8px}.detail-page .case-pause{gap:3px}.detail-page .brand>span{font-size:17px}.detail-page .site-header .button.compact{padding:0 10px;font-size:10px;gap:8px}.detail-page .brand img{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.workflow-panel,.case-related a{transition:none!important;transform:none!important}.case-cover img,.case-product figure,.case-phone img,.workflow{animation:none!important;transform:none!important}}

/* Contact lives on a light surface: use its own readable foregrounds. */
.contact-form .project-types label>span{color:var(--ink);border-color:#9daebd}.contact-form .project-types input:checked+span{border-color:#067e94;background:#d9f2f5}.contact-form .contact-guidance,.contact-form .optional,.contact-form .contact-next{color:#526273}.contact-form select{background:#fff;color:var(--ink);border-color:#9daebd;color-scheme:light}.contact-form .project-types input:focus-visible+span,.contact-form select:focus-visible{outline-color:#067e94}

.case-pause,.workflow-controls label{margin-top:0}