/* Existing brand; physical materials and restrained explanatory motion. */
.metal-system[data-state="expanded"] .ms-scene { animation:none; }
.ms-camera { transition:transform 1050ms var(--ease-in-out); }
.ms-layer { transition:transform var(--ms-dur,1050ms) var(--ease-in-out) var(--ms-delay,0ms),filter 200ms var(--ease-out); }
.metal-system[data-state="expanded"] .ms-layer[data-layer="1"] { --ms-delay:380ms; }
.metal-system[data-state="expanded"] .ms-layer[data-layer="2"] { --ms-delay:320ms; }
.metal-system[data-state="expanded"] .ms-layer[data-layer="3"] { --ms-delay:260ms; }
.metal-system[data-state="expanded"] .ms-layer[data-layer="4"] { --ms-delay:200ms; }
.metal-system[data-state="expanded"] .ms-layer[data-layer="5"] { --ms-delay:140ms; }
#flat-system[data-state="expanded"] .ms-layer[data-layer="6"],#flat-system[data-state="expanded"] .ms-layer[data-layer="7"],#flat-system[data-state="expanded"] .ms-layer[data-layer="8"] { --ms-delay:80ms; }
.metal-system[data-state="expanded"] .ms-focus-hint,.metal-system[data-state="expanded"] .metal-system__note { transition-delay:1400ms; }
.metal-system.is-focused .ms-layer:not(.is-focused) { filter:brightness(.74) saturate(.8); }
.ms-layer.is-focused { filter:drop-shadow(3px 9px 7px rgb(0 0 0 / .3)); }
@media(hover:hover) and (pointer:fine) { .metal-system[data-state="expanded"] .ms-layer:hover { filter:brightness(1.06); } }
.ms-layer__leader { stroke-dasharray:none; stroke-width:1; opacity:.65; }
.ms-detail { background:rgb(8 25 36 / .97); backdrop-filter:none; transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out); }
.ms-detail__close,.flat-variant-tab { min-width:44px;min-height:44px; }
.rd-demo { grid-template-columns:1fr; gap:12px; }
.rd-demo .install-demo__visual { min-height:210px; background:#d9dedb; border-radius:8px; overflow:hidden; }
.rd-svg { width:100%; height:210px; display:block; }
.rd-demo .install-demo__caption { color:#d1dedf; }
.rd-demo .install-demo__caption strong { color:#fff; }
.rd-demo .install-demo__caption p { margin:7px 0 10px; }
.rd-steps { display:flex;flex-wrap:wrap;gap:8px 20px;list-style:decimal;padding-left:18px;font-size:.75rem; }
.rd-steps li { display:list-item;padding:0; }
.rd-steps li::before { display:none; }
.rd-replay { position:absolute;right:10px;bottom:8px;min-height:44px;padding:0 14px;border:1px solid #607176;background:#f4f5ef;color:#26383e;border-radius:6px;font-weight:700;cursor:pointer; }
.rd-svg .rd-set { animation:rd-seat 900ms var(--ease-out) both;animation-delay:calc(500ms + var(--step,0)*180ms); }
.rd-svg .rd-cover { animation:rd-seat 900ms 1900ms var(--ease-out) both; }
.rd-svg .rd-adhesive { animation:rd-appear 400ms 120ms var(--ease-out) both; }
.rd-svg .rd-reveal { clip-path:inset(0 0 0 0);animation:rd-unroll 1500ms var(--ease-in-out) both; }
.rd-svg .rd-roll { animation:rd-travel 1500ms var(--ease-in-out) both; }
.rd-svg .rd-liner { animation:rd-travel 1500ms var(--ease-in-out) both; }
.rd-svg .rd-roller { animation:rd-travel 1500ms 1500ms var(--ease-in-out) both; }
.rd-svg .rd-gun { animation:rd-nail 1500ms 650ms linear both; }
.rd-svg .rd-fastener { animation:rd-appear 130ms var(--ease-out) both;animation-delay:calc(800ms + var(--step,0)*500ms); }
.rd-svg .rd-clip { animation:rd-seat 550ms var(--ease-out) both; }
.rd-svg .rd-lock { animation:rd-appear 350ms 2100ms var(--ease-out) both; }
.rd-svg .rd-seamer { animation:rd-seam 1500ms 1250ms var(--ease-in-out) both; }
.rd-svg .rd-mop,.rd-svg .rd-torch { animation:rd-travel 1500ms var(--ease-in-out) both; }
.rd-svg .rd-cap { animation:rd-unroll 1500ms 1500ms var(--ease-in-out) both; }
.rd-svg .rd-water { animation:rd-appear 650ms 1400ms var(--ease-out) both; }
.rd-svg .rd-frame { animation:rd-seat 850ms var(--ease-out) both;animation-delay:calc(var(--step,0)*160ms); }
@keyframes rd-seat { from { opacity:0;transform:translateY(-25px); } to { opacity:1;transform:none; } }
@keyframes rd-appear { from { opacity:0; } to { opacity:1; } }
@keyframes rd-unroll { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes rd-travel { 0% { transform:translateX(0);opacity:1; } 90% {opacity:1;} 100% { transform:translateX(194px);opacity:0; } }
@keyframes rd-seam { 0% {transform:translateY(-12px);opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {transform:translateY(118px);opacity:0;} }
@keyframes rd-nail { 0%,12% {transform:translateX(0);opacity:1;} 15% {transform:translate(0,3px);} 20% {transform:translateX(0);} 42% {transform:translateX(68px);} 45% {transform:translate(68px,3px);} 50% {transform:translateX(68px);} 72% {transform:translateX(136px);} 75% {transform:translate(136px,3px);} 82% {transform:translateX(136px);opacity:1;} 100% {transform:translateX(136px);opacity:0;} }
@media(prefers-reduced-motion:reduce) {
 .ms-camera,.ms-layer,.ms-roof,.ms-layer__tag { transition:none!important;animation:none!important; }
 .rd-svg * { animation:none!important; }
 .rd-svg .rd-tool,.rd-svg .rd-roll,.rd-svg .rd-liner { opacity:0; }
 .rd-svg .rd-reveal,.rd-svg .rd-cap { clip-path:none; }
 .rd-replay { display:none; }
}
@media(max-width:760px) {
 .ms-detail { display:none;position:relative;inset:auto;max-height:none;overflow:visible;margin-top:14px;padding:16px;scroll-margin-top:85px; }
 .metal-system.is-focused .ms-detail { display:block; }
 .rd-demo .install-demo__visual,.rd-svg { height:190px;min-height:190px; }
 .rd-demo { margin-top:12px; }
 .ms-detail__close { position:absolute;right:7px;top:7px; }
 .ms-detail h4 { padding-right:22px; }
}
/* Keep the selected educational detail readable above the persistent contact CTA. */
@media(max-width:760px) {
 body:has(.metal-system.is-focused) .ai-roofer { visibility:hidden;pointer-events:none; }
 .ms-detail { margin-bottom:82px; }
}