[data-sig="garage-doors-hero"]{padding:0;height:calc(var(--hero-height) + 700px);view-timeline-name:--door-scene;view-timeline-axis:block;view-timeline-inset:88px 0px;background:var(--dark)}
[data-sig="garage-doors-hero"] .hero-stage{position:sticky;top:88px;height:var(--hero-height);overflow:hidden;perspective:1200px}
[data-sig="garage-doors-hero"] picture,[data-sig="garage-doors-hero"] picture img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
[data-sig="garage-doors-hero"] .hero-reveal{position:absolute;bottom:32px;left:var(--edge);background:var(--surface);padding:24px 32px;max-width:540px;z-index:1;box-shadow:0 4px 24px #202B2F20}
[data-sig="garage-doors-hero"] .hero-reveal h2{font-size:36px}[data-sig="garage-doors-hero"] .hero-reveal p{font-size:14px;margin:12px 0 20px}
[data-sig="garage-doors-hero"] .door-panels{position:absolute;inset:0;z-index:3;pointer-events:none}
[data-sig="garage-doors-hero"] .door-panel{position:absolute;left:0;right:0;height:25%;background:var(--surface);border-bottom:2px solid #CED3D1;box-shadow:inset 0 10px 15px #FFFFFF60,inset 0 -8px 15px #202B2F05;display:flex;align-items:center;justify-content:center;transform-origin:center top;backface-visibility:hidden;padding:20px var(--edge)}
[data-sig="garage-doors-hero"] .panel-0{top:0;font-size:14px}[data-sig="garage-doors-hero"] .panel-1{top:25%}[data-sig="garage-doors-hero"] .panel-2{top:50%}[data-sig="garage-doors-hero"] .panel-3{top:75%;font-size:14px}
[data-sig="garage-doors-hero"] .door-word{font-weight:700;font-size:clamp(90px,12vw,160px);line-height:1;letter-spacing:-.065em}
[data-sig="garage-doors-hero"] .panel-hinge{position:absolute;right:40px;top:50%;width:12px;height:38px;background:var(--ink);border-radius:3px}
[data-sig="garage-doors-hero"] .panel-hinge::before{content:'';position:absolute;right:calc(100vw - 92px);top:0;width:12px;height:38px;background:var(--ink);border-radius:3px}
[data-sig="garage-doors-hero"] .door-handle{position:absolute;bottom:30%;left:50%;transform:translateX(-50%);width:70px;height:8px;border:2px solid var(--ink);border-radius:2px}
@supports(animation-timeline:view()){
[data-sig="garage-doors-hero"] .door-panel{animation:door-roll linear both;animation-timeline:--door-scene;animation-range:contain 0% contain 100%}
[data-sig="garage-doors-hero"] .panel-0{animation-name:roll-0}[data-sig="garage-doors-hero"] .panel-1{animation-name:roll-1}[data-sig="garage-doors-hero"] .panel-2{animation-name:roll-2}[data-sig="garage-doors-hero"] .panel-3{animation-name:roll-3}
@keyframes roll-0{0%{transform:none;opacity:1}26%{opacity:1}28%,100%{transform:translateY(-130%) rotateX(-80deg);opacity:0}}
@keyframes roll-1{0%,12%{transform:none;opacity:1}46%{opacity:1}48%,100%{transform:translateY(-240%) rotateX(-80deg);opacity:0}}
@keyframes roll-2{0%,28%{transform:none;opacity:1}70%{opacity:1}72%,100%{transform:translateY(-350%) rotateX(-80deg);opacity:0}}
@keyframes roll-3{0%,44%{transform:none;opacity:1}93%{opacity:1}95%,100%{transform:translateY(-460%) rotateX(-80deg);opacity:0}}
}
@media(max-width:760px){[data-sig="garage-doors-hero"]{height:calc(var(--hero-height) + 450px);view-timeline-inset:72px 66px}[data-sig="garage-doors-hero"] .hero-stage{top:72px}[data-sig="garage-doors-hero"] .door-word{font-size:92px}[data-sig="garage-doors-hero"] .panel-0,[data-sig="garage-doors-hero"] .panel-3{font-size:12px}[data-sig="garage-doors-hero"] .panel-hinge{right:10px;width:7px;height:24px}[data-sig="garage-doors-hero"] .panel-hinge::before{right:calc(100vw - 27px);width:7px;height:24px}[data-sig="garage-doors-hero"] .hero-reveal{left:24px;right:24px;bottom:24px;padding:20px}[data-sig="garage-doors-hero"] .hero-reveal h2{font-size:30px}[data-sig="garage-doors-hero"] .hero-reveal p{font-size:13px}[data-sig="garage-doors-hero"] picture img{object-position:50% 50%}[data-sig="garage-doors-hero"] .door-handle{bottom:25%}}
@media(prefers-reduced-motion:reduce){[data-sig="garage-doors-hero"]{height:var(--hero-height)}[data-sig="garage-doors-hero"] .hero-stage{position:relative;top:0}[data-sig="garage-doors-hero"] .door-panels{display:none}[data-sig="garage-doors-hero"] .sr-only{position:absolute;top:32px;left:var(--edge);height:auto;width:auto;clip:auto;color:var(--surface);font-size:64px;text-shadow:0 2px 16px #202B2F}}

[data-sig="garage-doors-hero"] .hero-foreground{position:absolute;inset:0;pointer-events:none;background:url('../../img/hero.webp') center 60%/cover;mask-image:linear-gradient(90deg,#000 0%,transparent 20%),linear-gradient(0deg,#000 0%,transparent 22%);mask-composite:intersect;z-index:1}
[data-sig="garage-doors-hero"] .hero-reveal{z-index:2}
@supports(animation-timeline:view()){[data-sig="garage-doors-hero"] .hero-foreground{animation:garden-depth linear both;animation-timeline:--door-scene;animation-range:contain 0% contain 100%}@keyframes garden-depth{from{transform:translateY(0)}to{transform:translateY(-8px)}}}
@media(max-width:760px){[data-sig="garage-doors-hero"] .hero-foreground{background-position:50% 50%}}
@media(prefers-reduced-motion:reduce){[data-sig="garage-doors-hero"] .hero-foreground{animation:none;transform:none}}

body[data-worst]:not([data-worst="short"]) [data-sig="garage-doors-hero"] .door-word{font-size:clamp(30px,3.6vw,58px);max-width:22ch;text-align:center;line-height:1.12}