[data-sig="remodeler-wall"] .lead{display:flex;align-items:center;justify-content:space-between;padding:24px var(--edge);gap:32px;background:var(--surface)}[data-sig="remodeler-wall"] .lead p{max-width:550px;font-size:15px}[data-sig="remodeler-wall"] .lead strong{font-weight:600}[data-sig="remodeler-wall"] .lead a{flex-shrink:0;font-size:13px}[data-sig="remodeler-wall"] .pin{height:280dvh;position:relative;view-timeline-name:--wall;view-timeline-axis:block}[data-sig="remodeler-wall"] .stage{height:calc(100dvh - var(--header));position:sticky;top:var(--header);overflow:hidden;background:var(--oak)}[data-sig="remodeler-wall"] .photo,[data-sig="remodeler-wall"] .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}[data-sig="remodeler-wall"] picture img{width:100%;height:100%;object-fit:cover}[data-sig="remodeler-wall"] .photo{z-index:0}[data-sig="remodeler-wall"] .framing{z-index:2}[data-sig="remodeler-wall"] .drywall{z-index:3}[data-sig="remodeler-wall"] .last-stud{z-index:4;position:absolute;inset:0;display:grid;place-items:center}[data-sig="remodeler-wall"] .last-stud img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}[data-sig="remodeler-wall"] h1{position:relative;font-size:var(--display);text-align:center;width:90%;max-width:1160px;color:var(--ink);line-height:1.05}[data-sig="remodeler-wall"] .finished{position:absolute;bottom:36px;left:var(--edge);z-index:1;background:var(--surface);padding:20px 24px;font-size:15px;max-width:480px}[data-sig="remodeler-wall"] .stage-caption{position:absolute;top:24px;right:var(--edge);z-index:5;background:var(--surface);padding:8px 14px;font-size:11px}[data-sig="remodeler-wall"] .finish-line{display:flex;gap:32px;justify-content:space-between;padding:24px var(--edge);border-bottom:1px solid var(--line);font-size:12px}
@keyframes lift-drywall{0%,8%{transform:translateY(0)}35%,100%{transform:translateY(-110%)}}@keyframes lift-framing{0%,32%{transform:translateX(0)}65%,100%{transform:translateX(110%)}}@keyframes lift-stud{0%,60%{transform:translateX(0) rotate(0)}88%,100%{transform:translateX(-120%) rotate(-8deg)}}
@supports(animation-timeline:view()){[data-sig="remodeler-wall"] .drywall{animation:lift-drywall linear both;animation-timeline:--wall;animation-range:contain 0% contain 100%}[data-sig="remodeler-wall"] .framing{animation:lift-framing linear both;animation-timeline:--wall;animation-range:contain 0% contain 100%}[data-sig="remodeler-wall"] .last-stud{animation:lift-stud linear both;animation-timeline:--wall;animation-range:contain 0% contain 100%}}
@media(max-width:760px){[data-sig="remodeler-wall"] .lead{display:block;padding:20px 24px}[data-sig="remodeler-wall"] .lead p{font-size:13px;margin-bottom:14px}[data-sig="remodeler-wall"] .lead .button{min-height:44px}[data-sig="remodeler-wall"] .pin{height:215dvh}[data-sig="remodeler-wall"] .stage{height:calc(100dvh - 128px)}[data-sig="remodeler-wall"] h1{font-size:44px;max-width:310px}[data-sig="remodeler-wall"] .photo,[data-sig="remodeler-wall"] .plate{object-position:50% 50%}[data-sig="remodeler-wall"] .last-stud img{object-position:50% 50%}[data-sig="remodeler-wall"] .finished{bottom:24px;left:24px;right:24px;padding:16px;font-size:13px}[data-sig="remodeler-wall"] .finish-line{gap:12px;flex-wrap:wrap;font-size:11px}[data-sig="remodeler-wall"] .stage-caption{right:24px;top:16px}}
@media(prefers-reduced-motion:reduce){[data-sig="remodeler-wall"] .pin{height:auto}[data-sig="remodeler-wall"] .stage{position:relative;top:0;height:70dvh}[data-sig="remodeler-wall"] .drywall,[data-sig="remodeler-wall"] .framing{display:none}[data-sig="remodeler-wall"] .last-stud{animation:none;inset:24px 24px auto;display:block;background:var(--surface);padding:20px;transform:none!important}[data-sig="remodeler-wall"] .last-stud img{display:none}[data-sig="remodeler-wall"] h1{font-size:clamp(36px,5vw,64px);width:100%;text-align:left}}
[data-sig="remodeler-wall"] .framing{mask-image:url('../../img/framing-mask.svg');mask-size:cover;mask-position:center}[data-sig="remodeler-wall"] .last-stud img{clip-path:inset(40% .5% 38%)}
body.worst [data-sig="remodeler-wall"] h1{font-size:clamp(28px,4vw,56px);max-width:1050px}
[data-sig="remodeler-wall"] .before-keyframe{z-index:1}[data-sig="remodeler-wall"] .drywall{mask-image:url('../../img/drywall-mask.svg');mask-size:cover;mask-position:center}
@keyframes cut-before{0%,9.99%{visibility:visible}10%,100%{visibility:hidden}}@keyframes expose-framing{0%,9.99%{visibility:hidden}10%,100%{visibility:visible}}
@supports(animation-timeline:view()){[data-sig="remodeler-wall"] .before-keyframe{animation:cut-before linear both;animation-timeline:--wall;animation-range:contain 0% contain 100%}[data-sig="remodeler-wall"] .framing{animation:lift-framing linear both,expose-framing linear both;animation-timeline:--wall,--wall;animation-range:contain 0% contain 100%,contain 0% contain 100%}[data-sig="remodeler-wall"] .last-stud img{animation:expose-framing linear both;animation-timeline:--wall;animation-range:contain 0% contain 100%}}
@media(prefers-reduced-motion:reduce){[data-sig="remodeler-wall"] .before-keyframe{display:none}}
/* In browsers without native timelines, the fallback exposes these plates after the first cut. */
@supports not (animation-timeline:view()){[data-sig="remodeler-wall"] .framing,[data-sig="remodeler-wall"] .last-stud img{visibility:hidden}}
@supports(animation-timeline:view()){[data-sig="remodeler-wall"] .finished{animation:expose-framing linear both;animation-timeline:--wall;animation-range:contain 0% contain 100%}}
@media(prefers-reduced-motion:reduce){[data-sig="remodeler-wall"] .finished{animation:none;visibility:visible}}