/* "The build up" on /roof-replacement: an exploded roof stack, one layer per
   button. GENERATED by _work/anim/genSiteBA.mjs from the prototype Aida chose
   on 7 Oct 2026 (final-BA.html); regenerate there, do not edit by hand.
   Loaded only on a page that has the section (lib.mjs looks for data-bu).
   Every state is one class on .bu (s0 to s4), set by buildup.js. Motion runs
   once per selection; nothing loops, and reduced motion changes instantly. */
.bu{--bu-line:rgba(255,255,255,.12);--bu-line-2:rgba(255,255,255,.2);display:grid;grid-template-columns:minmax(290px,360px) 1fr;grid-template-areas:'list stage' 'panel stage';grid-template-rows:auto 1fr;column-gap:clamp(1.5rem,.5rem + 2.4vw,3rem);row-gap:1.6rem}
.bu-list{grid-area:list;display:grid;gap:.5rem;align-content:start}
.bu-btn{display:flex;align-items:center;gap:.85rem;width:100%;min-height:44px;text-align:left;padding:.8rem 1rem;border-radius:12px;border:1.5px solid var(--bu-line);background:none;color:rgba(255,255,255,.74);cursor:pointer;transition:border-color .32s var(--ease-out),background .32s var(--ease-out)}
.bu-btn:hover{border-color:var(--bu-line-2)}
.bu-btn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.bu-btn[aria-pressed=true]{background:rgba(226,36,37,.12);border-color:var(--red)}
.bu .chip{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.07);color:var(--gold);transition:background .3s,color .3s}
.bu .chip svg{width:19px;height:19px}
.bu-btn[aria-pressed=true] .chip{background:var(--red);color:#fff}
.bu-btn b{display:block;font-family:var(--font-display);font-weight:700;font-size:.96rem;line-height:1.2;font-stretch:112%;color:#fff}
.bu-btn small{display:block;font-size:.8rem;line-height:1.35;color:rgba(255,255,255,.6);margin-top:.15rem}
.bu-stage{grid-area:stage;position:relative;align-self:start;min-width:0;border-radius:var(--r-xl);background:radial-gradient(50% 55% at 56% 50%,rgba(226,36,37,.1),transparent 72%),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px) 0 0/22px 22px}
.bu-svg{display:block;width:100%;height:auto;overflow:visible}
.bu-panels{grid-area:panel;display:grid;border-top:1px solid var(--bu-line);padding-top:1.4rem}
.bu-panel{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .4s var(--ease-out)}
.bu-panel .n{font-family:var(--font-display);font-weight:700;font-size:.72rem;font-stretch:112%;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.bu-panel h3{font-size:clamp(1.05rem,.94rem + .5vw,1.3rem);margin:.45rem 0 .6rem;color:#fff}
.bu-panel p{margin:0;font-size:.97rem;color:rgba(255,255,255,.68);max-width:68ch}
.bu-parts{display:none}
/* svg */
.bu-svg text{font-family:var(--font-display);font-weight:600;font-size:15px;font-stretch:108%;fill:rgba(255,255,255,.55);transition:fill .4s}
.bu .lb tspan{font-size:13px;letter-spacing:.14em;fill:var(--gold)}
.bu .lb path{stroke:rgba(255,255,255,.2);stroke-width:1;fill:none;transition:stroke .4s}
.bu .lb circle{fill:var(--ink);stroke:rgba(255,255,255,.4);stroke-width:1.2;transition:fill .4s,stroke .4s}
.bu .co{opacity:0}
.bu .co path{fill:none;stroke:var(--gold-soft);stroke-opacity:.5;stroke-width:1}
.bu .co circle{fill:var(--gold-soft);stroke:var(--ink);stroke-width:1.4}
.bu-svg .co text{font-family:var(--font-body);font-weight:500;font-size:13.5px;font-stretch:100%;fill:rgba(255,255,255,.88)}.bu-svg .co .sub{fill:rgba(255,255,255,.6)}
.bu .y0,.bu .y1,.bu .y2,.bu .y3,.bu .y4{transition:transform .7s var(--ease-out),opacity .45s var(--ease-out) var(--od,0s)}
.bu .g0,.bu .g1,.bu .g2{transition:clip-path .7s var(--ease-out)}
.bu .bd{opacity:.12;transition:opacity .5s var(--ease-out)}
.bu .ol,.bu .ol-p{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1;opacity:0;transition:opacity .5s}
.bu .ol-p rect{vector-effect:non-scaling-stroke}
.bu.s2 .ol-p{opacity:1;stroke:var(--gold-soft);stroke-opacity:.5}
.bu .ch{opacity:.6}
.bu.s2 .ch{opacity:1}
.bu .de{opacity:.12}.bu .de .hl{opacity:0;transition:opacity .4s}
.bu.s2 .de{opacity:1}.bu.s2 .de .hl{opacity:1}
.bu .si,.bu .air{opacity:0;transition:opacity .4s}.bu .slt{opacity:0}
.bu.s4 .si,.bu.s4 .air{opacity:1;transition-delay:.45s}.bu.s4 .slt{opacity:1;--od:.45s}
.bu.s4 .L3 .bd{opacity:.58}.bu.s2 .rk{opacity:.8}
.bu.s4 .lb{opacity:0}
.bu .air path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.bu .air .ab{stroke:rgba(217,188,121,.3);stroke-width:1}
.bu .air .af{stroke:var(--gold-soft);stroke-width:2;stroke-dasharray:3 7}
.bu .nss{vector-effect:non-scaling-stroke}
.bu .v0{--d:0ms}.bu .v1{--d:110ms}.bu .v2{--d:220ms}.bu .v3{--d:330ms}.bu .v4{--d:440ms}.bu .v5{--d:660ms}.bu .v6{--d:880ms}.bu .v7{--d:1150ms}.bu .v8{--d:1250ms}.bu .v9{--d:0ms;--x:14px;--y:8px}.bu .v10{--d:120ms;--x:-14px;--y:-8px}.bu .v11{--d:300ms;--x:0px;--y:-24px}.bu .v12{--d:560ms;--x:-12px;--y:12px}.bu .v13{--d:800ms;--x:13px;--y:7.5px}.bu .v14{--d:940ms;--x:13px;--y:7.5px}.bu .v15{--d:1080ms;--x:13px;--y:7.5px}.bu .v16{--d:1300ms;--x:0px;--y:-16px}.bu .v17{--d:140ms}.bu .v18{--d:280ms}.bu .v19{--d:70ms}.bu .v20{--d:210ms}.bu .v21{--d:350ms}.bu .v22{--d:420ms}.bu .v23{--d:490ms}.bu .v24{--d:560ms}.bu .v25{--d:630ms}.bu .v26{--d:700ms}.bu .v27{--d:770ms}.bu .v28{--d:840ms}
.bu .scn{transition:transform .7s var(--ease-out)}.bu.s4 .scn{transform:translateY(-92px)}
.bu.pre .L,.bu.pre .ch,.bu.pre .lb,.bu.pre .de{opacity:0}
.bu.intro .y0,.bu.intro .y1,.bu.intro .y2,.bu.intro .y3,.bu.intro .y4{transition-duration:.9s}
.bu.intro .ch{transition:opacity .5s 1.05s}.bu.intro .lb{--od:.3s}
.bu.pre .y0{transform:translateY(-70px)}.bu.intro .y0{transition-delay:0ms}.bu.pre .y1{transform:translateY(-112px)}.bu.intro .y1{transition-delay:150ms}.bu.pre .y2{transform:translateY(-154px)}.bu.intro .y2{transition-delay:300ms}.bu.pre .y3{transform:translateY(-196px)}.bu.intro .y3{transition-delay:450ms}.bu.pre .y4{transform:translateY(-238px)}.bu.intro .y4{transition-delay:600ms}
.bu.s0 .y0{transform:translateY(-10px)}.bu.s0 .y1{transform:translateY(-68px)}.bu.s0 .y2{transform:translateY(-110px)}.bu.s0 .y3{transform:translateY(-152px)}.bu.s0 .y4{transform:translateY(-194px)}.bu.s0 .g0{clip-path:inset(6.5px 0 0 0)}.bu.s0 .g1{clip-path:inset(20px 0 0 0)}.bu.s0 .g2{clip-path:inset(24px 0 0 0)}.bu.s0 .L0 .bd{opacity:1}.bu.s0 .L0 .ol{opacity:1;stroke:var(--gold-soft);stroke-opacity:.45}.bu.s0 .bp0{visibility:visible;opacity:1}.bu.s0 .lb0 text{fill:#fff}.bu.s0 .lb0 path{stroke:var(--gold-soft)}.bu.s0 .lb0 circle{fill:var(--red);stroke:#fff}.bu.s0 .co0{opacity:1;--od:.35s}.bu.s0 .pl0{visibility:visible}.bu.s0 .L1 .ol{opacity:.7}
.bu.s1 .y0{transform:translateY(0px)}.bu.s1 .y1{transform:translateY(-52px)}.bu.s1 .y2{transform:translateY(-110px)}.bu.s1 .y3{transform:translateY(-152px)}.bu.s1 .y4{transform:translateY(-194px)}.bu.s1 .g0{clip-path:inset(12.5px 0 0 0)}.bu.s1 .g1{clip-path:inset(4px 0 0 0)}.bu.s1 .g2{clip-path:inset(24px 0 0 0)}.bu.s1 .L1 .bd{opacity:1}.bu.s1 .L1 .ol{opacity:1;stroke:var(--gold-soft);stroke-opacity:.45}.bu.s1 .bp1{visibility:visible;opacity:1}.bu.s1 .lb1 text{fill:#fff}.bu.s1 .lb1 path{stroke:var(--gold-soft)}.bu.s1 .lb1 circle{fill:var(--red);stroke:#fff}.bu.s1 .co1{opacity:1;--od:.35s}.bu.s1 .pl1{visibility:visible}.bu.s1 .L0 .ol{opacity:.7}.bu.s1 .L2 .ol{opacity:.7}
.bu.s2 .y0{transform:translateY(0px)}.bu.s2 .y1{transform:translateY(-42px)}.bu.s2 .y2{transform:translateY(-94px)}.bu.s2 .y3{transform:translateY(-152px)}.bu.s2 .y4{transform:translateY(-194px)}.bu.s2 .g0{clip-path:inset(22.5px 0 0 0)}.bu.s2 .g1{clip-path:inset(10px 0 0 0)}.bu.s2 .g2{clip-path:inset(8px 0 0 0)}.bu.s2 .L2 .bd{opacity:1}.bu.s2 .L2 .ol{opacity:1;stroke:var(--gold-soft);stroke-opacity:.45}.bu.s2 .bp2{visibility:visible;opacity:1}.bu.s2 .lb2 text{fill:#fff}.bu.s2 .lb2 path{stroke:var(--gold-soft)}.bu.s2 .lb2 circle{fill:var(--red);stroke:#fff}.bu.s2 .co2{opacity:1;--od:.35s}.bu.s2 .pl2{visibility:visible}.bu.s2 .L1 .ol{opacity:.7}.bu.s2 .L3 .ol{opacity:.7}
.bu.s3 .y0{transform:translateY(0px)}.bu.s3 .y1{transform:translateY(-42px)}.bu.s3 .y2{transform:translateY(-84px)}.bu.s3 .y3{transform:translateY(-136px)}.bu.s3 .y4{transform:translateY(-194px)}.bu.s3 .g0{clip-path:inset(22.5px 0 0 0)}.bu.s3 .g1{clip-path:inset(20px 0 0 0)}.bu.s3 .g2{clip-path:inset(14px 0 0 0)}.bu.s3 .L3 .bd{opacity:1}.bu.s3 .L3 .ol{opacity:1;stroke:var(--gold-soft);stroke-opacity:.45}.bu.s3 .bp3{visibility:visible;opacity:1}.bu.s3 .lb3 text{fill:#fff}.bu.s3 .lb3 path{stroke:var(--gold-soft)}.bu.s3 .lb3 circle{fill:var(--red);stroke:#fff}.bu.s3 .co3{opacity:1;--od:.35s}.bu.s3 .pl3{visibility:visible}.bu.s3 .L2 .ol{opacity:.7}
.bu.s4 .y0{transform:translateY(0px)}.bu.s4 .y1{transform:translateY(-3px)}.bu.s4 .y2{transform:translateY(-4px)}.bu.s4 .y3{transform:translateY(-9px)}.bu.s4 .y4{transform:translateY(-9px)}.bu.s4 .g0{clip-path:inset(61.5px 0 0 0)}.bu.s4 .g1{clip-path:inset(61px 0 0 0)}.bu.s4 .g2{clip-path:inset(61px 0 0 0)}.bu.s4 .L4 .bd{opacity:1}.bu.s4 .L4 .ol{opacity:1;stroke:var(--gold-soft);stroke-opacity:.45}.bu.s4 .bp4{visibility:visible;opacity:1}.bu.s4 .lb4 text{fill:#fff}.bu.s4 .lb4 path{stroke:var(--gold-soft)}.bu.s4 .lb4 circle{fill:var(--red);stroke:#fff}.bu.s4 .co4{opacity:1;--od:.35s}.bu.s4 .pl4{visibility:visible}
/* micro animations, once per selection */
@keyframes buDrop{from{transform:translate(-19.8px,21.4px);opacity:0}to{transform:none;opacity:1}}
@keyframes buWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes buFade{from{opacity:0}to{opacity:1}}
@keyframes buSlide{from{transform:translate(var(--x),var(--y));opacity:0}to{transform:none;opacity:1}}
@keyframes buFlow{0%{stroke-dashoffset:140;opacity:0}12%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
.bu.seen.s0 .drop{animation:buDrop .55s var(--ease-out) var(--d) backwards}
.bu.seen.s0 .nl{animation:buFade .5s .5s backwards}
.bu.seen.s1 .ur{animation:buWipe .62s var(--ease-out) var(--d) backwards}
.bu.seen.s1 .pf{animation:buFade .5s var(--d) backwards}
.bu.seen.s2 .sl{animation:buSlide .62s var(--ease-out) var(--d) backwards}
.bu.seen.s3 .cr{animation:buWipe .48s var(--ease-out) var(--d) backwards}
.bu.seen.s4 .a0{animation:buFlow .8s cubic-bezier(.35,0,.25,1) calc(.55s + var(--d)) backwards}.bu.seen.s4 .a1{animation:buFlow 1.4s cubic-bezier(.35,0,.25,1) calc(1.1s + var(--d)) backwards}.bu.seen.s4 .a2{animation:buFlow .7s cubic-bezier(.35,0,.25,1) calc(2.2s + var(--d)) backwards}
/* below 1200 the legend replaces the in-art labels, so the art is framed on the
   house (viewBox x 185 to 775; max-width:none beats the site's svg cap) and its
   walls, which run past the viewBox foot, end above the legend. The five
   legends share one grid cell, like the panels, so the stage is always as tall
   as the longest and choosing a layer never moves the page. The stage width is
   capped so art plus legend (about 1.065 x width + 6.5rem) fits between the
   header and the call bar, never narrower than 300px. At 1200 and up the stage
   pads left so the in-art labels clear the layer buttons. */
@media (max-width:1199px){.bu .lbs,.bu .cos{display:none}
 .bu-stage{overflow:hidden;width:100%;justify-self:center;max-width:max(300px,calc((100vh - var(--header-h) - 6.5rem) / 1.065));max-width:max(300px,calc((100svh - var(--header-h) - 6.5rem) / 1.065))}
 .bu-svg{width:123.4%;max-width:none;margin-left:-17.1%;margin-bottom:5%}
 .bu-parts{display:grid;grid-template-columns:minmax(0,1fr);margin-top:.4rem;padding:0 .5rem .6rem}
 .bu .pl{display:grid;grid-area:1/1;align-content:start;visibility:hidden;grid-template-columns:repeat(3,auto);justify-content:center;gap:.45rem 1.2rem;margin:0;padding:0;list-style:none}
 .bu .pl-n1{grid-template-columns:auto}
 .bu .pl li{display:flex;align-items:center;gap:.45rem;font-size:.8rem;line-height:1.3;color:rgba(255,255,255,.74);padding:0}
 .bu .pl li::before{display:none}
 .bu .pl i{flex:none;width:10px;height:10px;border-radius:3px}
 .bu .sw-wd{background:#80603f}.bu .sw-dk{background:#050303;box-shadow:inset 0 0 0 1px var(--gold-soft)}.bu .sw-iw{background:#2b3037;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.bu .sw-ul{background:#6c7682}.bu .sw-mt{background:linear-gradient(135deg,#e3e7eb,#7c838c)}.bu .sw-sh{background:#3b3536;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.bu .sw-gd{background:var(--gold-soft)}
}
@media (min-width:1200px){.bu-stage{padding-left:6%}}
@media (max-width:1024px){
 .bu{grid-template-columns:1fr;grid-template-areas:'list' 'stage' 'panel';grid-template-rows:auto}
 .bu-list{display:flex;gap:.45rem}
 .bu-btn{width:auto;flex:1 1 auto;justify-content:center;padding:.4rem .8rem .4rem .4rem;border-radius:999px;gap:.55rem}
 .bu-btn small{display:none}
 .bu .chip{width:28px;height:28px;border-radius:999px}.bu .chip svg{width:15px;height:15px}
 .bu-btn b{font-size:.86rem}
 .bu-stage{max-width:max(300px,min(600px,calc((100vh - var(--header-h) - 72px - 6.5rem) / 1.065)));max-width:max(300px,min(600px,calc((100svh - var(--header-h) - 72px - 6.5rem) / 1.065)))}
}
@media (max-width:859px){
 .bu-list{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}
 .bu-btn{grid-column:span 2;flex-direction:column;gap:.35rem;padding:.6rem .3rem .55rem;border-radius:14px;text-align:center}
 .bu-btn:nth-child(n+4){grid-column:span 3}
 .bu-btn b{font-size:.8rem;font-stretch:100%;letter-spacing:0}
 .bu .chip{width:30px;height:30px;border-radius:9px}
}
@media (max-width:640px){
 .bu .pl{grid-template-columns:1fr;justify-content:start;width:max-content;max-width:100%;margin-inline:auto}
 .bu .pl-n6{grid-template-columns:repeat(2,auto);column-gap:1.4rem}
}
/* forced colors: the svg's white text would vanish on a light Canvas. The
   pressed button repeats app.css's Highlight rule, which this file's later
   background would otherwise override. */
@media (forced-colors:active){.bu-svg text,.bu-svg tspan,.bu-svg .co .sub{fill:CanvasText!important}.bu-svg text{paint-order:stroke;stroke:Canvas;stroke-width:4px;stroke-linejoin:round}.bu .lb path,.bu .co path,.bu .air .ab,.bu .air .af{stroke:CanvasText!important}.bu .lb circle,.bu .co circle{fill:Canvas!important;stroke:CanvasText!important}.bu.s0 .lb0 text,.bu.s0 .lb0 tspan,.bu.s1 .lb1 text,.bu.s1 .lb1 tspan,.bu.s2 .lb2 text,.bu.s2 .lb2 tspan,.bu.s3 .lb3 text,.bu.s3 .lb3 tspan,.bu.s4 .lb4 text,.bu.s4 .lb4 tspan{fill:Highlight!important}.bu.s0 .lb0 circle,.bu.s1 .lb1 circle,.bu.s2 .lb2 circle,.bu.s3 .lb3 circle,.bu.s4 .lb4 circle{fill:Highlight!important}
 .bu-btn[aria-pressed=true]{background:Highlight;border-color:Highlight}.bu-btn[aria-pressed=true] .chip{background:HighlightText;color:Highlight}}
@media (prefers-reduced-motion:reduce){.bu *,.bu *::before,.bu *::after{transition:none!important;animation:none!important}}
@media print{.bu .bu-panel{visibility:visible;opacity:1;grid-area:auto;margin-bottom:1rem}.bu-stage{display:none}}