/* Roof-build widget (homepage only; linked from index.html only).
   Mechanism shared with the roofer group (reference build: Exterior Plus). Words live in the page;
   colors and chrome here are Multi-Family Roofing's own (ink, stone, gold; Bricolage + Public Sans).
   "Whole roof system" variant: adds attic insulation (layer 2) and soffit intake vents. */

.rb{
  --rb-vh:1vh; --rb-hdr:91px; --rb-bar:0px;
  --rb-text:var(--ink); --rb-muted:var(--muted); --rb-line:var(--line); --rb-paper:var(--paper);
  --rb-ease:var(--ease);
  --rb-wood:#B07A45; --rb-ply:#D9B98A; --rb-seam:#B8935E; --rb-metal:#BFBBB1; --rb-metal-dk:#8a857a;
  --rb-ice:#201f1c; --rb-felt:#CFCBC1; --rb-felt-line:#ADA89C;
  --rb-shingle:#3B3A37; --rb-shingle-dk:#2B2A27; --rb-shingle-lt:#4E4C47; --rb-ridge:#1C1B19;
  --rb-wall:#F7F4EE; --rb-wall-line:#D8D1C2; --rb-wall-side:#E6E1D5; --rb-trim:var(--ink);
  --rb-glass:var(--ink-3); --rb-door:var(--gold-deep); --rb-brick:#98563F; --rb-mortar:#C99C87;
  --rb-ground:#E2DDD2;
  --rb-insul:#E3BF63; --rb-insul-lt:#F0D68F; --rb-insul-dk:#C9A14A; --rb-soffit:#F1EEE6;
  --rb-now:var(--gold); --rb-done:var(--ink);
  --rb-stage:min(calc(100 * var(--rb-vh) - var(--rb-hdr) - var(--rb-bar) - 1.5rem), 780px);
}
@supports (height:1svh){.rb{--rb-vh:1svh}}

.rb-head{max-width:64ch}
.rb-track{position:relative;height:calc(var(--rb-stage) + 210 * var(--rb-vh));margin-top:clamp(1.2rem,2vw,2rem)}
.rb-stage{position:sticky;top:calc(var(--rb-hdr) + .75rem);height:var(--rb-stage);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1rem,3vw,2.6rem);align-items:center}

.rb-draw{margin:0;background:var(--rb-paper);border-radius:4px;box-shadow:0 18px 40px rgba(15,14,10,.12);
  padding:clamp(.5rem,1.6vw,1.2rem);min-height:0}
.rb-draw svg{display:block;width:100%;height:auto;aspect-ratio:640/320;max-height:calc(var(--rb-stage) - 2.6rem)}

.rb-side{display:flex;flex-direction:column;gap:1rem;min-height:0}
.rb-zero{display:none;margin:0;color:var(--rb-muted)}
.rb-list{list-style:none;margin:0;padding:0;counter-reset:rb}
.rb-list li{position:relative;padding:.42rem 0 .42rem 2.2rem;border-top:1px solid var(--rb-line)}
.rb-list li:first-child{border-top:0}
.rb-list li::before{counter-increment:rb;content:counter(rb);position:absolute;left:0;top:.46rem;
  width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  font:700 .8rem/1 var(--sans);background:var(--rb-line);color:var(--rb-muted);
  transition:background-color .2s var(--rb-ease),color .2s var(--rb-ease)}
.rb-name{display:block;font:600 1.12rem/1.15 var(--display);letter-spacing:-.01em;color:var(--rb-text)}
.rb-say{display:block;margin-top:.22rem;color:var(--rb-muted);font-size:.98rem;line-height:1.5;max-width:46ch}

.rb-ctl{display:grid;gap:.2rem}
.rb-ctl-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2rem 1rem}
.rb-ctl label{font-weight:700;color:var(--rb-text)}
.rb-out{color:var(--rb-muted);font-size:.95rem}
.rb-range{width:100%;height:44px;margin:0;accent-color:var(--gold-deep);cursor:pointer}
.rb-cta{display:flex;flex-wrap:wrap;gap:.6rem}
.rb-cta .btn{min-height:44px}

.rb-layer{transition:transform .28s var(--rb-ease),opacity .28s var(--rb-ease)}

/* live states (set by main.js once the widget initializes, before it scrolls into view) */
.rb-live .rb-list li.is-done::before{content:"\2713";background:var(--rb-done);color:#fff}
.rb-live .rb-list li.is-now::before{background:var(--rb-now);color:#171204}
.rb-live .rb-list li.is-next .rb-name{color:var(--rb-muted)}
.rb-scroll .rb-list li:not(.is-now) .rb-say{display:none}
.rb-scroll.is-zero .rb-zero{display:block}

@media (max-width:860px){
  .rb-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start;gap:.8rem}
  .rb-draw{padding:.4rem}
  .rb-draw svg{max-height:calc(var(--rb-stage) * .44)}
  .rb-side{gap:.7rem}
  .rb-list{position:relative}
  /* out of flow but still rendered, so the CSS counter keeps each layer's real number */
  .rb-scroll .rb-list li:not(.is-now){position:absolute;inset:0 0 auto 0;visibility:hidden}
  .rb-scroll .rb-list li{border-top:0;padding-block:0}
  .rb-scroll .rb-list li::before{top:.05rem}
  .rb-cta .btn{flex:1 1 auto}
}

/* short laptop screens: tighten the list so nine layers, the slider and the buttons fit the stage */
@media (min-width:861px) and (max-height:760px){
  .rb-list li{padding-block:.26rem}
  .rb-list li::before{top:.3rem}
  .rb-name{font-size:1.1rem}
  .rb-say{font-size:.94rem;line-height:1.45}
  .rb-side{gap:.75rem}
}

/* phones: the fixed bottom bar (Call / Text / Estimate, 52px) sits over the stage, so leave room for it;
   on short phones the drawing gives up height. */
@media (max-width:760px){.rb{--rb-bar:52px}}
@media (max-width:760px) and (max-height:760px){
  .rb-draw svg{max-height:calc(var(--rb-stage) * .36)}
  .rb-say{font-size:.94rem;line-height:1.45}
  .rb-cta .btn-ghost{display:none}
}

/* Static fallback: reduced motion, or a screen too short for the sticky stage. The finished
   roof and the full list show; the slider still steps through the layers, instantly. */
@media (prefers-reduced-motion:reduce),(max-height:540px),(max-width:760px) and (max-height:600px){
  .rb-track{height:auto}
  .rb-stage{position:static;height:auto}
  .rb-draw svg{max-height:none}
  .rb-layer,.rb-list li::before{transition:none}
}

/* drawing colors. Roof planes are drawn in feet and scaled onto the house, so strokes keep a
   fixed screen width (non-scaling). */
.rb svg .w{fill:var(--rb-wall)} .rb svg .ws{fill:var(--rb-wall-side)} .rb svg .wl{stroke:var(--rb-wall-line);stroke-width:1}
.rb svg .tr{fill:var(--rb-trim)} .rb svg .gl{fill:var(--rb-glass)} .rb svg .dr{fill:var(--rb-door)}
.rb svg .gr{fill:var(--rb-ground)} .rb svg .br{fill:url(#rbBrick)} .rb svg .brs{fill:var(--rb-brick);filter:brightness(.8)}
.rb svg .cap{fill:#B7BFC7} .rb svg .pipe{fill:#E7EBEF;stroke:#9AA6B2;stroke-width:1}
.rb svg .wd,.rb svg .sm,.rb svg .icl,.rb svg .fel,.rb svg .rvl,.rb svg .rgl,.rb svg .mt,.rb svg .vm,.rb svg .vml{vector-effect:non-scaling-stroke}
.rb svg .wd{stroke:var(--rb-wood);stroke-width:3.2;stroke-linecap:round;fill:none}
.rb svg .ply{fill:var(--rb-ply)} .rb svg .sm{stroke:var(--rb-seam);stroke-width:1.1;fill:none}
.rb svg .slot{fill:#1B1F26}
.rb svg .mt{fill:var(--rb-metal);stroke:var(--rb-metal-dk);stroke-width:.8}
.rb svg .ice{fill:var(--rb-ice)} .rb svg .icl{stroke:#3B424D;stroke-width:1;fill:none}
.rb svg .fe{fill:var(--rb-felt)} .rb svg .fel{stroke:var(--rb-felt-line);stroke-width:1;fill:none}
.rb svg .shm{fill:url(#rbShH)} .rb svg .shw{fill:url(#rbShV)} .rb svg .shd{fill:var(--rb-shingle-dk)}
.rb svg .vm{stroke:#E6EBF0;fill:none;stroke-linecap:butt} .rb svg .vseam{stroke:var(--rb-shingle-dk);stroke-width:1.6;fill:none;vector-effect:non-scaling-stroke} .rb svg .vml{stroke:#7F8C99;stroke-width:1.2;fill:none}
.rb svg .rv{fill:#2E343D} .rb svg .rvl{stroke:#76818F;stroke-width:1;fill:none}
.rb svg .rg{fill:var(--rb-ridge)} .rb svg .rgl{stroke:#6B7686;stroke-width:1.2;fill:none}
.rb svg .ins{fill:url(#rbFluff)} .rb svg .sof{fill:var(--rb-soffit);stroke:var(--rb-metal-dk);stroke-width:.6;vector-effect:non-scaling-stroke}