/* ==========================================================================
   Build & Price page  (build-and-price.html)

   Loaded on that page only, after spe.css and site.css. It is the approved
   Build & Price demo, ported.

   How it stays out of the way, and keeps the site out of it:
     - the whole page sits in <div class="bp">, and every rule below starts
       with .bp, so nothing here can restyle another page;
     - every class is prefixed bp-, so nothing in spe.css or site.css (.btn,
       .card, .chip, .note, .tag, .lnk, .wrap, .tab ...) can restyle this page;
     - what spe.css sets on bare elements is neutralized in one block right
       below (headings, lists, svg, links, number and text inputs, focus rings);
     - keyframes carry the bp- prefix too, as they are global.
   The one rule outside .bp is at the very end: while the phone ribbon is up,
   the site's own sticky Call / Quote bar and chat button step aside.
   ========================================================================== */

.bp{
  color-scheme:light;
  --paper:#f6f2e7; --paper-2:#eee8d8; --paper-3:#fbf9f3;
  --navy:#272944; --navy-2:#1c1d36;
  --red:#c5232a; --red-hi:#d8383e;
  --slate:#6e7aa6; --tint:#eceef6;
  --ink:#2b2c40; --muted:#62647a; --mute-2:#8a8ca6;
  --rule:#e4decd; --rule-2:#d3cbb4;
  --line:rgba(197,35,42,.55);
  --grid:rgba(39,41,68,.075); --grid-2:rgba(39,41,68,.035);
  --display:"Jost","Futura","Century Gothic","Avenir Next",Helvetica,Arial,sans-serif;
  --body:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gut:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Sticky offset of the estimate card under the site header. build.js
     replaces it with the measured header height (+20px). */
  --bp-top:88px;
  /* scroll-margin for our anchors; build.js sets it only when the site does
     not already pad its own scrolling (html { scroll-padding-top }). */
  --bp-scroll:0px;
  display:block;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.6 var(--body);
  text-align:left;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- what spe.css sets on bare elements, undone inside the page ---------- */
.bp *,.bp *::before,.bp *::after{box-sizing:border-box}
.bp [hidden]{display:none!important}
.bp p{margin:0}
.bp ul,.bp ol{margin:0;padding:0;list-style:none}
.bp li{margin:0}
.bp h1,.bp h2,.bp h3,.bp h4{margin:0;padding:0;font-weight:500;letter-spacing:normal;text-transform:none;text-shadow:none;color:var(--navy)}
.bp a{color:inherit;text-decoration:none;background:none}
.bp a:hover{color:inherit;text-decoration:none}
.bp b,.bp strong{font-weight:600;color:inherit}
.bp em{font-style:normal}
.bp small{font-size:inherit}
.bp figure{margin:0}
.bp svg{display:block;max-width:none;height:auto}
.bp img,.bp video{display:block;max-width:100%}
/* the clips sit over their stills; they stay hidden until build.js has run (a browser with scripting off would
   otherwise draw its own player over the photo) */
.bp video{visibility:hidden}
.bp.bp-js video{visibility:visible}
/* without the script there is nothing to ask CJ with */
.bp:not(.bp-js) .bp-cmd,.bp:not(.bp-js) #askBuild{display:none}
.bp button,.bp input{font:inherit;margin:0}
.bp button{-webkit-appearance:none;appearance:none}
.bp table{width:100%;border-collapse:collapse;border-spacing:0;background:none}
.bp th,.bp td{border-left:0;border-right:0;border-top:0;background:none;font-weight:inherit}
.bp label{display:inline;margin:0;font-weight:inherit;text-transform:none;letter-spacing:normal}
.bp :focus-visible{outline:2px solid var(--red);outline-offset:3px}
.bp input:focus,.bp button:focus{box-shadow:none}
.bp .bp-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the quote sheet's parts ---------- */
.bp .bp-wrap{width:100%;max-width:calc(1320px + 2 * var(--gut));margin:0 auto;padding-inline:var(--gut)}
.bp .bp-tab{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;font:600 11.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;padding:10px 14px;margin:0}
.bp .bp-h2{font:500 clamp(34px,4.6vw,64px)/.98 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--navy);margin:18px 0 0;text-wrap:balance}
.bp .bp-lede{font-size:clamp(15.5px,1.25vw,17.5px);color:var(--ink);max-width:56ch;margin:0}
.bp .bp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:2px;background:var(--red);color:#fff;font:600 12.5px/1.25 var(--display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;text-align:center;white-space:normal;box-shadow:none;transform:none}
.bp .bp-btn:hover{background:var(--red-hi);color:#fff;text-decoration:none;box-shadow:0 10px 24px -12px rgba(197,35,42,.7);transform:none}
.bp .bp-btn:active{transform:translateY(1px)}
.bp .bp-btn svg{flex:0 0 auto}
.bp .bp-btn.bp-ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.bp .bp-btn.bp-ghost:hover{background:var(--navy);color:#fff;box-shadow:inset 0 0 0 1.5px var(--navy)}
.bp .bp-btn.bp-block{display:flex;width:100%}
.bp .bp-card{position:relative;background:#fff;border:1px solid var(--rule);border-radius:0;overflow:visible;transform:none;padding:34px 34px 30px;box-shadow:0 1px 2px rgba(20,20,40,.05),0 30px 60px -44px rgba(39,41,68,.45)}
.bp .bp-card::before{content:"";position:absolute;inset:7px;border:1px solid var(--line);border-radius:0;pointer-events:none}
.bp .bp-card>*{position:relative}
.bp .bp-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:10px 0 0;list-style:none;color:var(--muted);font-size:13px;border-top:1px solid var(--rule)}
.bp .bp-meta b{color:var(--ink);font-weight:600}
.bp .bp-qt{width:100%;border-collapse:collapse}
.bp .bp-qt th,.bp .bp-qt td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.bp .bp-qt thead th{font:600 11px/1.2 var(--display);text-transform:uppercase;letter-spacing:.16em;color:#fff;background:var(--navy);border-bottom:0}
.bp .bp-qt .bp-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bp .bp-qt td small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.45}
.bp .bp-qt tr.bp-sub td{color:var(--muted);font-size:13.5px}
.bp .bp-tablewrap{overflow-x:auto}
.bp .bp-terms{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13.5px;line-height:1.55;color:#4a4b5e}
.bp .bp-terms li{position:relative;padding-left:16px}
.bp .bp-terms li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--red)}
.bp .bp-sec{padding-block:clamp(64px,8.5vw,120px)}
.bp .bp-sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px 64px;align-items:end;margin-bottom:clamp(30px,4vw,52px)}
.bp .bp-sec-head .bp-lede{color:#474860}
.bp .bp-drafting{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.bp #build,.bp #systems,.bp #est,.bp .bp-prod{scroll-margin-top:var(--bp-scroll)}

/* ---------- hero ---------- */
.bp .bp-hero{padding-block:clamp(32px,3.4vw,52px) clamp(56px,6vw,96px);overflow:clip}
.bp .bp-hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.bp .bp-h1{font:500 clamp(40px,4.3vw,66px)/.97 var(--display);text-transform:uppercase;letter-spacing:.004em;color:var(--navy);margin:20px 0 0}
.bp .bp-h1 .bp-ln{display:block;overflow:hidden;padding-bottom:.05em}
.bp .bp-h1 .bp-ln>span{display:block;animation:bp-lnUp 1s var(--ease) both}
.bp .bp-h1 .bp-ln:nth-child(2)>span{animation-delay:.14s}
.bp .bp-h1 em{font-style:normal;color:var(--red)}
@keyframes bp-lnUp{from{transform:translateY(105%)}}
.bp .bp-hdim{position:relative;display:flex;align-items:center;justify-content:center;height:26px;margin:20px 0 16px;max-width:620px}
.bp .bp-hdim::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--red);animation:bp-drawX 1.2s .45s var(--ease) both}
.bp .bp-hdim i{position:absolute;top:50%;left:0;width:15px;height:1.5px;background:var(--red);transform:translate(-50%,-50%) rotate(-45deg);animation:bp-fadeIn .4s 1.2s both}
.bp .bp-hdim i.bp-r{left:100%}
.bp .bp-hdim i.bp-e{width:1px;height:26px;transform:translate(-50%,-50%);background:var(--red);opacity:.6}
.bp .bp-hdim span{position:relative;background:var(--paper);padding:0 12px;font:600 10.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--red);white-space:nowrap;animation:bp-fadeIn .6s 1.3s both}
@keyframes bp-drawX{from{transform:scaleX(0)}}
@keyframes bp-drawY{from{transform:scaleY(0)}}
@keyframes bp-fadeIn{from{opacity:0}}
.bp .bp-hero .bp-lede{animation:bp-fadeIn .8s .5s both}

/* CJ: a command line for the whole page */
.bp .bp-cmd{margin:24px 0 0;max-width:660px;animation:bp-fadeIn .8s .7s both}
.bp .bp-cmd-lbl{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.bp .bp-cmd-lbl::before{content:"";width:28px;height:5px;background:linear-gradient(var(--red) 0 2px,transparent 2px 3px,var(--navy) 3px 5px)}
.bp .bp-cmd-form{position:relative;display:flex;align-items:stretch;height:66px;margin:0;padding:0;background:#fff;border:1.5px solid var(--navy);border-radius:0;box-shadow:0 26px 50px -34px rgba(39,41,68,.75)}
.bp .bp-cmd-form::after{content:"";position:absolute;left:-1.5px;right:-1.5px;bottom:-7px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.bp .bp-cmd-form:focus-within::after{transform:scaleX(1)}
.bp .bp-cmd-tag{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:0 16px 0 14px;background:var(--navy);color:#fff;font:600 13px/1 var(--display);letter-spacing:.2em}
.bp .bp-cmd-tag svg{width:24px;height:24px}
.bp .bp-cmd-in,.bp input.bp-cmd-in[type=text]{flex:1;min-width:0;width:auto;height:auto;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;font:400 17px/1.3 var(--body);color:var(--ink);padding:0 14px;outline:none;-webkit-appearance:none;appearance:none}
.bp .bp-cmd-in::placeholder{color:#6e7089;opacity:1}
.bp .bp-cmd-kbd{align-self:center;margin-right:12px;font:500 12px/1 var(--display);color:var(--muted);border:1px solid var(--rule-2);border-bottom-width:2px;padding:5px 8px;border-radius:3px;background:var(--paper-3)}
.bp .bp-cmd-go{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:0 22px;border:0;border-radius:0;background:var(--red);color:#fff;font:600 12.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.bp .bp-cmd-go:hover{background:var(--red-hi)}
.bp .bp-cmd-go svg{width:18px;height:18px}
.bp .bp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.bp .bp-chip{border:1px solid rgba(39,41,68,.24);background:rgba(255,255,255,.6);color:var(--navy);border-radius:999px;padding:8px 14px;font:400 13.5px/1.25 var(--body);letter-spacing:normal;text-transform:none;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;box-shadow:none}
.bp .bp-chip:hover{border-color:var(--navy);background:#fff;transform:translateY(-1px)}
.bp .bp-cj-note{font-size:12.5px;color:var(--muted);margin:12px 0 0}
.bp .bp-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:22px;animation:bp-fadeIn .8s .9s both}
.bp .bp-stars{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 11.5px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bp .bp-stars b{color:var(--navy);font-weight:600;letter-spacing:.04em;font-size:14px;margin-right:4px}

/* the framed photo band, sitting on a drawing sheet */
.bp .bp-hero-media{position:relative;padding:44px 54px 58px 0}
.bp .bp-hm-grid{position:absolute;inset:0 0 0 -28px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
.bp .bp-hm-dx{position:absolute;left:0;right:54px;top:14px;height:16px;display:flex;justify-content:center;align-items:center}
.bp .bp-hm-dx::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--red);animation:bp-drawX 1.1s .6s var(--ease) both}
.bp .bp-hm-dx i,.bp .bp-hm-dy i{position:absolute;width:13px;height:1.5px;background:var(--red)}
.bp .bp-hm-dx i{top:50%;left:0;transform:translate(-50%,-50%) rotate(-45deg)}
.bp .bp-hm-dx i.bp-r{left:100%}
.bp .bp-hm-dx span,.bp .bp-hm-dy span{position:relative;background:var(--paper);padding:0 10px;font:600 10px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--red);animation:bp-fadeIn .5s 1.4s both;white-space:nowrap}
.bp .bp-hm-dy{position:absolute;right:16px;top:44px;bottom:58px;width:16px;display:flex;align-items:center;justify-content:center}
.bp .bp-hm-dy::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--red);animation:bp-drawY 1.1s .8s var(--ease) both}
.bp .bp-hm-dy i{left:50%;top:0;transform:translate(-50%,-50%) rotate(-45deg)}
.bp .bp-hm-dy i.bp-b{top:100%}
.bp .bp-hm-dy span{transform:rotate(-90deg);padding:0 8px}
.bp .bp-hm-gnd{position:absolute;left:-28px;right:0;bottom:44px;height:14px;border-top:1.5px solid var(--navy);background:repeating-linear-gradient(-45deg,rgba(39,41,68,.28) 0 1px,transparent 1px 7px);animation:bp-fadeIn .8s .3s both}
.bp .bp-frame{position:relative;margin:0;background:#fff;padding:10px;box-shadow:0 2px 6px rgba(20,21,42,.08),0 40px 80px -48px rgba(20,21,42,.7)}
.bp .bp-frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--line);pointer-events:none;z-index:3}
.bp .bp-vwrap{position:relative;overflow:hidden;background:var(--navy-2)}
.bp .bp-vwrap picture,.bp .bp-prod-media picture{display:contents}
.bp .bp-vwrap video,.bp .bp-vwrap img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.bp .bp-hero .bp-vwrap{height:clamp(460px,44vw,620px)}
.bp .bp-hero .bp-vwrap video,.bp .bp-hero .bp-vwrap img{animation:bp-settle 2.4s var(--ease) both}
@keyframes bp-settle{from{transform:scale(1.1)}}
.bp img.bp-kb{animation:bp-kb 22s ease-in-out infinite alternate!important}
@keyframes bp-kb{from{transform:scale(1.04);object-position:42% 50%}to{transform:scale(1.14);object-position:60% 44%}}
.bp .bp-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:70px 22px 22px;background:linear-gradient(180deg,rgba(28,29,54,0) 0%,rgba(28,29,54,.55) 45%,rgba(28,29,54,.9) 100%);color:#fff}
.bp .bp-cap-k{display:block;font:600 10.5px/1.2 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--paper);opacity:.9;margin-bottom:6px}
.bp .bp-cap-t{display:block;font:500 clamp(18px,1.6vw,22px)/1.2 var(--display);letter-spacing:.01em}
.bp .bp-loop{position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3}
.bp .bp-loop::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.3)}
.bp .bp-loop i{position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);transform-origin:0 50%;transform:scaleX(0);transition:transform .3s linear}
.bp .bp-still .bp-loop i{animation:bp-loopbar 12s linear infinite}
@keyframes bp-loopbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bp .bp-live{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:rgba(20,21,42,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:600 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;padding:8px 11px}
.bp .bp-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);animation:bp-pulse 1.6s ease-in-out infinite}
@keyframes bp-pulse{50%{opacity:.25}}

/* ---------- build & price ---------- */
.bp .bp-build{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bp .bp-build-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,410px);gap:24px;align-items:start}
.bp .bp-sheet{padding:30px 32px 32px}
.bp .bp-sheet-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:22px}
.bp .bp-sheet-top h3{font:500 26px/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--navy);margin:0}
.bp .bp-sheet-top .bp-meta{border-top:0;padding:0}
.bp .bp-step+.bp-step,.bp .bp-sheet-body{margin-top:28px}
.bp .bp-step-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.bp .bp-step-h .bp-tab b{display:inline-grid;place-items:center;width:18px;height:18px;background:var(--red);font-weight:600;letter-spacing:0;margin-right:2px}
.bp .bp-step-h small{font:500 11px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bp .bp-sys-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bp .bp-sys{position:relative;display:block;cursor:pointer}
.bp .bp-sys input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.bp .bp-sys-c{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;padding:16px 16px 14px;border:1.5px solid var(--rule-2);background:#fff;color:var(--navy);transition:background .3s,color .3s,border-color .3s}
.bp .bp-sys:hover .bp-sys-c{border-color:var(--navy)}
.bp .bp-sys input:checked+.bp-sys-c{background:var(--navy);border-color:var(--navy);color:#fff}
.bp .bp-sys input:focus-visible+.bp-sys-c{outline:2px solid var(--red);outline-offset:3px}
.bp .bp-sys-c>svg{width:52px;height:38px;flex:0 0 auto}
.bp .bp-sys-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.bp .bp-sys-t b{font:600 15.5px/1.2 var(--display);letter-spacing:.015em}
.bp .bp-sys-t small{font-size:12.5px;line-height:1.4;opacity:.78}
.bp .bp-sys-tag{align-self:flex-start;margin-top:auto;font:600 9.5px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;padding:5px 8px;background:var(--tint);color:var(--navy)}
.bp .bp-sys input:checked+.bp-sys-c .bp-sys-tag{background:var(--red);color:#fff}
.bp .bp-chk{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--rule-2);display:grid;place-items:center}
.bp .bp-chk svg{width:11px;height:11px;opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s var(--ease)}
.bp .bp-sys input:checked+.bp-sys-c .bp-chk{background:var(--red);border-color:var(--red)}
.bp .bp-sys input:checked+.bp-sys-c .bp-chk svg{opacity:1;transform:none}
.bp .bp-sheet-body{display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr);gap:28px;align-items:start}
.bp .bp-ctls .bp-step+.bp-step{margin-top:26px}
.bp .bp-dc+.bp-dc{margin-top:18px}
.bp .bp-dc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bp .bp-dc-top label{font:600 12px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.bp .bp-dc-read{font:500 15px/1 var(--display);color:var(--red);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.bp .bp-dc-row{display:flex;align-items:center;gap:14px;margin-top:6px}
.bp .bp-dc-lim{display:flex;justify-content:space-between;font:500 10.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#6e7089;margin-top:2px;padding-right:110px}
.bp input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;width:100%;height:40px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;margin:0;cursor:pointer;--pct:50%;touch-action:pan-y}
.bp input[type=range]:focus{outline:none;box-shadow:none}
.bp input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--red) 0 var(--pct),var(--rule-2) var(--pct) 100%)}
.bp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:radial-gradient(circle,var(--red) 0 3.5px,#fff 4.5px);border:2px solid var(--navy);box-shadow:0 3px 8px rgba(20,21,42,.25);transition:transform .2s}
.bp input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.bp input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--red);outline-offset:3px}
.bp input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--rule-2)}
.bp input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--red)}
.bp input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,var(--red) 0 3.5px,#fff 4.5px);border:2px solid var(--navy)}
.bp .bp-num-in{flex:0 0 96px;display:flex;align-items:center;height:46px;border:1.5px solid var(--navy);background:#fff}
.bp .bp-num-in input,.bp .bp-num-in input[type=number]{width:100%;min-width:0;height:auto;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;font:500 20px/1 var(--display);color:var(--navy);text-align:right;padding:0 4px 0 8px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;outline:none}
.bp .bp-num-in input:focus{box-shadow:none;border:0;outline:none}
.bp .bp-num-in input::-webkit-outer-spin-button,.bp .bp-num-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bp .bp-num-in i{font:600 11px/1 var(--display);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-right:10px}
.bp .bp-num-in:focus-within{box-shadow:0 0 0 3px rgba(197,35,42,.25)}
.bp .bp-note{background:var(--paper-3);border:0;border-left:4px solid var(--navy);padding:11px 14px;margin:16px 0 0;font-size:13px;line-height:1.5;color:#4a4b5e;white-space:normal}
.bp .bp-cnt{display:flex;align-items:center;gap:0}
.bp .bp-cnt button{width:46px;height:46px;padding:0;border:1.5px solid var(--navy);border-radius:0;background:#fff;color:var(--navy);font:400 24px/1 var(--display);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.bp .bp-cnt button:hover{background:var(--navy);color:#fff}
.bp .bp-cnt .bp-num-in{flex:0 0 72px;border-inline:0}
.bp .bp-cnt .bp-num-in input,.bp .bp-cnt .bp-num-in input[type=number]{text-align:center;padding:0}
.bp .bp-cnt-l{margin-left:14px;font:500 11.5px/1.3 var(--display);letter-spacing:.12em;white-space:nowrap;text-transform:uppercase;color:var(--muted)}
.bp .bp-bays{display:grid;grid-template-columns:repeat(var(--n,20),minmax(0,1fr));gap:4px;margin-top:14px}
.bp .bp-bay{height:26px;border:1px dashed var(--rule-2);border-radius:0;background:transparent;cursor:pointer;position:relative;transition:background .25s,border-color .25s,transform .35s var(--ease);padding:0}
.bp .bp-bay::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--rule-2)}
.bp .bp-bay.bp-on{background:rgba(110,122,166,.22);border:1px solid var(--navy)}
.bp .bp-bay.bp-on::before{background:var(--navy)}
.bp .bp-bay.bp-pop{animation:bp-pop .45s var(--ease)}
@keyframes bp-pop{40%{transform:translateY(-4px)}}
.bp .bp-dwg{margin:0}
.bp .bp-dwg-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;font:600 10.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin:0 0 8px}
.bp .bp-dwg-h span{white-space:nowrap}
.bp .bp-dwg-h span:last-child{color:var(--muted);font-weight:500}
.bp .bp-dwg-box{position:relative;height:440px;background-color:var(--paper-3);background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);background-size:20px 20px;border:1px solid var(--rule-2);overflow:hidden}
.bp .bp-dwg-box svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bp .bp-dwg figcaption{font-size:12px;color:var(--muted);margin-top:8px}
.bp .bp-nojs{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:13px;line-height:1.55;color:var(--muted)}
.bp .bp-nojs span{max-width:34ch}
.bp .bp-nojs a:not(.btn):not(.bp-x){color:var(--navy);text-decoration:underline;text-underline-offset:2px}

/* the drawing (classes are set by build.js; d- keeps them clear of the site's own) */
.bp #dwg text{font-family:var(--display)}
.bp #dwg .d-gl{stroke:var(--navy);stroke-width:1.5}
.bp #dwg .d-ex{stroke:var(--navy);stroke-width:1.2}
.bp #dwg .d-hs{fill:#fff;stroke:var(--navy);stroke-width:1.6}
.bp #dwg .d-tr{fill:var(--navy)}
.bp #dwg .d-pcl{fill:rgba(110,122,166,.17);stroke:var(--slate);stroke-width:1}
.bp #dwg .d-psh{stroke:var(--navy);stroke-width:1}
.bp #dwg .d-glr{stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:.95}
.bp #dwg .d-bb{fill:var(--navy)}
.bp #dwg .d-rail{fill:var(--navy)}
.bp #dwg .d-mp{fill:rgba(110,122,166,.15);stroke:var(--navy);stroke-width:1.2}
.bp #dwg .d-mb{fill:var(--navy);fill-opacity:.85}
.bp #dwg .d-mw{fill:none;stroke:var(--navy);stroke-opacity:.35;stroke-width:.8}
.bp #dwg .d-st{stroke:var(--navy);stroke-width:1.6}
.bp #dwg .d-stc{fill:#fff;stroke:var(--navy);stroke-width:1.2}
.bp #dwg .d-zp{stroke:var(--red);stroke-width:3.4;stroke-dasharray:1.3 2.1}
.bp #dwg .d-dl,.bp #dwg .d-dk{stroke:var(--red);stroke-width:1.2}
.bp #dwg .d-dk{stroke-width:1.7}
.bp #dwg .d-dx{stroke:var(--red);stroke-width:.8;stroke-opacity:.65}
.bp #dwg .d-dt{fill:var(--red);font-size:13.5px;font-weight:600;letter-spacing:.04em;paint-order:stroke;stroke:#fbf9f3;stroke-width:5px;stroke-linejoin:round}
.bp #dwg .d-dt.d-s{font-size:11px;stroke-width:4px}
.bp #dwg .d-pl{fill:var(--navy);font-size:10.5px;font-weight:600;letter-spacing:.24em;paint-order:stroke;stroke:rgba(251,249,243,.85);stroke-width:4px;stroke-linejoin:round}
.bp #dwg .d-pl.d-w{fill:#fff;stroke:rgba(39,41,68,.55)}
.bp #dwg .d-pn{fill:#fff;font-size:9.5px;font-weight:600;letter-spacing:.12em}
.bp #dwg .d-zl{fill:var(--red);font-size:9px;font-weight:600;letter-spacing:.16em;paint-order:stroke;stroke:#fbf9f3;stroke-width:3.5px;stroke-linejoin:round}
.bp #dwg .d-hl{fill:var(--navy);font-size:8px;font-weight:600;letter-spacing:.22em}
.bp #dwg .d-xl{fill:var(--muted);font-size:8.5px;font-weight:500;letter-spacing:.2em;paint-order:stroke;stroke:#fbf9f3;stroke-width:3.5px}
.bp #dwg .d-tb{fill:#fff;stroke:var(--navy);stroke-width:1.2}
.bp #dwg .d-tbs{fill:var(--navy)}
.bp #dwg .d-tbr{fill:var(--red)}
.bp #dwg .d-tb1{fill:var(--navy);font-size:11px;font-weight:600;letter-spacing:.07em}
.bp #dwg .d-tb2{fill:var(--muted);font-size:9px;font-weight:500;letter-spacing:.12em}
.bp #dwg .d-sbf{fill:var(--navy)}
.bp #dwg .d-sbo{fill:#fff;stroke:var(--navy);stroke-width:1}
.bp #dwg .d-sbt{fill:var(--navy);font-size:9.5px;font-weight:500;letter-spacing:.08em}

/* the estimate: the deposit invoice */
.bp .bp-est{position:sticky;top:var(--bp-top);padding:30px 30px 26px}
.bp .bp-est-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.bp .bp-est-top h3{font:500 30px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--navy);margin:0}
.bp .bp-tag{display:inline-block;font:600 10px/1 var(--display);text-transform:uppercase;letter-spacing:.16em;background:var(--tint);color:var(--navy);padding:6px 10px;border:0;border-radius:20px;white-space:nowrap}
.bp .bp-inv{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 18px}
.bp .bp-inv div{border-top:3px solid var(--navy);padding-top:9px;font-size:13px;line-height:1.5;color:#3e3f55}
.bp .bp-inv b{display:block;font:600 10px/1.3 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.bp .bp-est .bp-qt td{font-size:14px}
.bp .bp-est .bp-qt td:first-child{font-weight:600;color:var(--navy)}
.bp .bp-est .bp-qt td small{font-weight:400}
.bp .bp-est .bp-qt td.bp-num{font:500 15px/1.4 var(--display);color:var(--navy)}
.bp .bp-est .bp-qt td.bp-num small{font:400 11.5px/1.3 var(--body)}
.bp .bp-tot{display:flex;flex-direction:column;gap:4px;border-top:3px solid var(--navy);margin-top:2px;padding-top:12px}
.bp .bp-tot>span{font:600 10.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.bp .bp-tot>span.bp-sr{font:inherit}
.bp .bp-tot b{font:500 clamp(30px,2.6vw,38px)/1.05 var(--display);color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:.005em;white-space:nowrap}
.bp .bp-tot b i{font-style:normal;color:var(--red);margin:0 .12em}
.bp .bp-tot small{font-size:12px;line-height:1.45;color:var(--muted)}
.bp .bp-tot b.bp-bump{animation:bp-bump .6s var(--ease)}
@keyframes bp-bump{30%{color:var(--red)}}
/* ---------- where the patio is (step 4) and the travel cards in the estimate ---------- */
.bp .bp-where{display:grid;gap:10px}
.bp .bp-sel{display:block;width:100%;height:46px;margin:0;padding:0 40px 0 14px;border:1.5px solid var(--navy);border-radius:0;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.5l6 6 6-6' fill='none' stroke='%23272944' stroke-width='2'/></svg>") no-repeat right 14px center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font:500 17px/1 var(--display);color:var(--navy);box-shadow:none;cursor:pointer;text-overflow:ellipsis}
.bp .bp-sel:focus{outline:none;box-shadow:0 0 0 3px rgba(197,35,42,.25)}
.bp .bp-trv{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
.bp .bp-trv-hint{font-size:13.5px;line-height:1.5;color:var(--muted)}
.bp .bp-trv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.bp .bp-trv-card{display:flex;flex-direction:column;gap:6px;padding:12px 12px 12px;background:var(--paper-3);border:1.5px solid var(--rule-2);border-top:3px solid var(--navy)}
.bp .bp-trv-card+.bp-trv-card{border-top-color:var(--red)}
.bp .bp-trv-card h5{margin:0;font:600 10.5px/1.2 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bp .bp-trv-n{font:500 22px/1.15 var(--display);color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.bp .bp-trv-n .bp-trv-up{display:block;margin-top:3px;font:400 12px/1.3 var(--body);color:var(--muted);white-space:normal}
.bp .bp-trv-card small{font-size:12px;line-height:1.45;color:var(--muted)}
.bp .bp-trv-card small.bp-trv-same{font-weight:600;color:var(--navy)}
/* the email gate in front of the two totals */
.bp .bp-gate{display:grid;gap:12px;padding:16px 16px 18px;background:var(--paper-3);border:1.5px solid var(--rule-2);border-top:3px solid var(--red)}
.bp .bp-gate-h{margin:0;font:500 20px/1.2 var(--display);letter-spacing:.02em;color:var(--navy)}
.bp .bp-gate-f{display:grid;gap:5px}
.bp .bp-gate-f label{font:600 10.5px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bp .bp-gate-f input{display:block;width:100%;height:46px;margin:0;padding:0 12px;border:1.5px solid var(--navy);border-radius:0;background:#fff;box-shadow:none;font:400 16px/1.2 var(--body);color:var(--ink)}
.bp .bp-gate-f input::placeholder{color:var(--mute-2);font-style:italic;opacity:.8}
.bp .bp-gate-f input:focus{outline:none;box-shadow:0 0 0 3px rgba(197,35,42,.25)}
.bp .bp-gate-f input[aria-invalid=true]{border-color:var(--red)}
.bp .bp-gate-c{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.4;color:#4a4b5e;cursor:pointer}
.bp .bp-gate-c input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--navy)}
.bp .bp-gate-err{font-size:13px;line-height:1.4;color:var(--red);font-weight:600}
.bp .bp-gate .bp-btn{min-height:44px;width:100%}
.bp .bp-gate .bp-btn[disabled]{opacity:.7;cursor:progress}
.bp .bp-gate-sent{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--navy);font-weight:600}
.bp .bp-trv-call{font-size:14px;line-height:1.5;color:var(--navy);font-weight:600}
.bp .bp-trv-call a{text-decoration:underline;text-underline-offset:2px}
.bp .bp-trv-fine{margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted)}
@media (max-width:560px){
  .bp .bp-trv-cards{grid-template-columns:minmax(0,1fr)}
}

.bp .bp-est .bp-terms{margin:18px 0 20px;padding-top:16px;border-top:1px solid var(--rule)}
.bp .bp-est-acts{display:grid;gap:10px}
.bp .bp-est-acts .bp-btn{min-height:54px;padding:12px 18px;letter-spacing:.12em}
.bp .bp-est-fine{font-size:12px;color:var(--muted);margin:12px 0 0;text-align:center}
/* site.css underlines every link inside main p/li/td at (0,2,2); the :not()s lift this above it */
.bp .bp-est-fine a:not(.btn):not(.bp-x){color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.bp .bp-est-fine a:not(.btn):not(.bp-x):hover{color:var(--navy);text-decoration:underline}
.bp .bp-ribbon{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--navy);border-top:4px solid var(--red);color:#fff;transform:translateY(110%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s linear .4s}
.bp .bp-ribbon.bp-on{transform:none;visibility:visible;transition:transform .4s var(--ease)}
.bp .bp-ribbon span{display:block;font:600 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#c3c5da;margin-bottom:5px}
.bp .bp-ribbon b{font:500 20px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.bp .bp-ribbon .bp-btn{min-height:42px;padding:0 14px;font-size:11.5px;white-space:nowrap}

/* ---------- the systems (product sheets) ---------- */
.bp .bp-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bp .bp-prod{position:relative;display:flex;flex-direction:column;background:#fff;padding:10px;border:1px solid var(--rule);box-shadow:0 30px 60px -48px rgba(39,41,68,.55)}
.bp .bp-prod::before{content:"";position:absolute;inset:5px;border:1px solid var(--line);pointer-events:none;z-index:3}
.bp .bp-prod-media{position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:var(--navy-2)}
.bp .bp-prod-media video,.bp .bp-prod-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.bp .bp-prod:hover .bp-prod-media video{transform:scale(1.04)}
.bp .bp-prod-cat{position:absolute;left:12px;top:12px;z-index:2;background:var(--navy);color:#fff;font:600 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;padding:8px 10px}
.bp .bp-prod-cat.bp-alt{background:#fff;color:var(--navy)}
.bp .bp-prod-body{display:flex;flex-direction:column;flex:1;padding:24px 16px 16px}
.bp .bp-prod-name{font:500 clamp(24px,2.1vw,30px)/1.02 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--navy);margin:0 0 10px}
.bp .bp-prod-line{font-size:14.5px;color:#474860;margin:0 0 18px;max-width:48ch}
.bp .bp-spec{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 20px}
.bp .bp-spec thead th{background:var(--navy);color:#fff;font:600 10.5px/1.2 var(--display);letter-spacing:.18em;text-transform:uppercase;text-align:left;padding:10px 12px;border:0}
.bp .bp-spec tbody th{width:32%;text-align:left;vertical-align:top;font:600 10.5px/1.5 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 10px 10px 12px;border-bottom:1px solid var(--rule)}
.bp .bp-spec tbody td{vertical-align:top;padding:9px 12px 9px 0;border-bottom:1px solid var(--rule);color:var(--ink);line-height:1.45}
.bp .bp-spec td b{font:500 15px/1.3 var(--display);color:var(--navy);letter-spacing:.01em}
.bp .bp-prod-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:auto}
.bp .bp-lnk{display:inline;background:none;font:600 11.5px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--navy);text-decoration:none;padding:10px 0;border:0;border-bottom:1.5px solid var(--navy);cursor:pointer}
.bp .bp-lnk:hover{color:var(--red);border-color:var(--red);text-decoration:none}

/* ---------- the CJ answer sheet ---------- */
.bp .bp-ans{position:fixed;z-index:200;left:50%;bottom:0;width:min(760px,100%);transform:translate(-50%,calc(100% + 140px));visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s;background:var(--paper);color:var(--navy);padding:26px 26px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -24px 70px rgba(20,21,42,.4);max-height:82vh;max-height:82svh;display:flex;flex-direction:column;border-top:4px solid var(--red)}
.bp .bp-ans:focus{outline:none}
.bp .bp-ans.bp-open{transform:translate(-50%,0);visibility:visible;transition:transform .5s var(--ease)}
.bp .bp-ans::before{content:"";position:absolute;inset:7px 7px 0;border:1px solid var(--line);border-bottom:0;pointer-events:none}
.bp .bp-ans>*{position:relative}
.bp .bp-ans-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.bp .bp-ans-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;font:600 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;padding:9px 12px}
.bp .bp-ans-q{font:600 13px/1.45 var(--body);color:#55576c;flex:1;min-width:0;padding-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bp .bp-ans-x{flex:0 0 40px;background:transparent;border:1px solid rgba(39,41,68,.3);border-radius:0;width:40px;height:40px;padding:0;cursor:pointer;color:var(--navy);font-size:20px;line-height:1}
.bp .bp-ans-body{overflow:auto;font-size:16px;line-height:1.62;white-space:pre-wrap;color:#2a2b3f;min-height:60px}
.bp .bp-think{display:inline-flex;gap:6px;align-items:center;color:#5a5c70}
.bp .bp-think i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:bp-blink 1s infinite}
.bp .bp-think i:nth-child(2){animation-delay:.15s}
.bp .bp-think i:nth-child(3){animation-delay:.3s}
@keyframes bp-blink{0%,100%{opacity:.2}50%{opacity:1}}
.bp .bp-ans-f{display:flex;margin:16px 0 0;border:1.5px solid var(--navy);background:#fff;height:50px}
.bp .bp-ans-f input,.bp .bp-ans-f input[type=text]{flex:1;min-width:0;width:auto;height:auto;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;font:400 16px/1.3 var(--body);color:var(--ink);padding:0 14px;outline:none;-webkit-appearance:none;appearance:none}
.bp .bp-ans-f input::placeholder{color:#6e7089;opacity:1}
.bp .bp-ans-f button{flex:0 0 54px;border:0;border-radius:0;padding:0;background:var(--navy);color:#fff;cursor:pointer;display:grid;place-items:center}
.bp .bp-ans-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.bp .bp-ans-fine{font-size:12px;color:#6b6b76;margin:12px 0 0}
.bp .bp-scrim{position:fixed;inset:0;z-index:190;background:rgba(20,21,42,.55);opacity:0;pointer-events:none;transition:opacity .4s}
.bp .bp-scrim.bp-on{opacity:1;pointer-events:auto}

/* scroll reveals: content is visible at rest; this only plays as it arrives */
.bp .bp-rv{animation:bp-rise .9s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes bp-rise{from{opacity:0;transform:translateY(22px)}}

/* ---------- the estimate on a short screen ----------
   Beside the sheet the estimate card is sticky, so it has to fit under the
   site's bar, and clear of the site's chat button in the bottom corner. Its
   spec sentences (wind, warranty, lead time) always stay. What gives, in order,
   is the For / From block, the "Prepared" line, the phone line (the site bar
   carries the number), then padding and type; on a screen too short for even
   that, it scrolls with the page. */
@media (min-width:900px) and (max-height:1100px){
  .bp .bp-est{padding:26px 26px 22px}
  .bp .bp-est .bp-meta,.bp .bp-est .bp-inv,.bp .bp-est .bp-est-fine{display:none}
  .bp .bp-est-top{margin-bottom:16px}
  .bp .bp-est .bp-terms{margin:16px 0 18px}
}
@media (min-width:900px) and (max-height:820px){
  .bp .bp-est{padding:20px 22px 16px}
  .bp .bp-est-top{margin-bottom:12px}
  .bp .bp-est-top h3{font-size:26px}
  .bp .bp-est .bp-qt th,.bp .bp-est .bp-qt td{padding:8px 8px}
  .bp .bp-est .bp-qt td{font-size:13.5px}
  .bp .bp-tot{padding-top:9px}
  .bp .bp-tot b{font-size:30px}
  .bp .bp-est .bp-terms{margin:12px 0 14px;padding-top:12px;gap:6px;font-size:12.5px;line-height:1.45}
  .bp .bp-est-acts{gap:8px}
  .bp .bp-est-acts .bp-btn{min-height:46px;padding:8px 14px}
}
@media (min-width:900px) and (max-height:700px){
  .bp .bp-est{position:relative;top:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .bp .bp-sheet-body{grid-template-columns:minmax(0,1fr)}
  .bp .bp-dwg{order:-1}
}
@media (max-width:1040px){
  .bp .bp-line{grid-template-columns:1fr 1fr}
  .bp .bp-line .bp-prod:last-child{grid-column:1/-1}
  .bp .bp-line .bp-prod:last-child .bp-prod-media{aspect-ratio:16/7}
}
@media (max-width:899px){
  .bp{--bp-top:20px}
  .bp .bp-hero{padding-top:0}
  .bp .bp-hero-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .bp .bp-hero-media{order:-1;margin-inline:calc(-1 * var(--gut));padding:0}
  .bp .bp-hm-grid,.bp .bp-hm-dx,.bp .bp-hm-dy,.bp .bp-hm-gnd{display:none}
  .bp .bp-hero .bp-frame{padding:0;box-shadow:none}
  .bp .bp-hero .bp-frame::before{display:none}
  .bp .bp-hero .bp-vwrap{height:min(72vh,640px);height:min(72svh,640px);min-height:440px}
  .bp .bp-cap{padding:90px 18px 20px}
  .bp .bp-h1{font-size:clamp(36px,10.2vw,46px);margin-top:16px}
  .bp .bp-hdim{margin:18px 0 16px}
  .bp .bp-hdim{height:auto;min-height:26px}
  .bp .bp-hdim span{font-size:9.5px;letter-spacing:.1em;padding:0 8px;white-space:normal;text-align:center;line-height:1.5;max-width:84%}
  .bp .bp-cmd-form{height:60px}
  .bp .bp-cmd-tag{padding:0 12px}
  .bp .bp-cmd-tag span{display:none}
  .bp .bp-cmd-kbd{display:none}
  .bp .bp-cmd-go{padding:0 16px}
  .bp .bp-cmd-go span{display:none}
  .bp .bp-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gut));padding:2px var(--gut) 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 88%,transparent)}
  .bp .bp-chips::-webkit-scrollbar{display:none}
  .bp .bp-chip{flex:0 0 auto}
  .bp .bp-sec-head{grid-template-columns:minmax(0,1fr)}
  .bp .bp-build-grid{grid-template-columns:minmax(0,1fr)}
  .bp .bp-est{position:relative;top:auto}
  .bp .bp-ribbon{display:flex}
  .bp .bp-line{grid-template-columns:minmax(0,1fr)}
  .bp .bp-line .bp-prod:last-child{grid-column:auto}
  .bp .bp-prod-media,.bp .bp-line .bp-prod:last-child .bp-prod-media{aspect-ratio:4/5}
}
@media (max-width:560px){
  .bp .bp-card{padding:26px 20px 22px}
  .bp .bp-sheet{padding:24px 16px 22px}
  .bp .bp-est{padding:26px 18px 22px}
  .bp .bp-sheet-top h3{font-size:22px}
  .bp .bp-sys-opts{grid-template-columns:minmax(0,1fr);gap:8px}
  .bp .bp-sys-c{flex-direction:row;align-items:center;gap:14px;padding:12px 44px 12px 12px}
  .bp .bp-sys-c>svg{width:44px;height:34px}
  .bp .bp-sys-tag{display:none}
  .bp .bp-chk{top:50%;right:14px;margin-top:-10px}
  .bp .bp-dwg-box{height:330px}
  .bp .bp-dc-lim{padding-right:106px}
  .bp .bp-num-in{flex-basis:92px}
  .bp .bp-bays{gap:3px}
  .bp .bp-bay{height:22px}
  .bp .bp-inv{grid-template-columns:1fr 1fr;gap:12px}
  .bp .bp-est .bp-qt th,.bp .bp-est .bp-qt td{padding:10px 7px}
  .bp .bp-ans{padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:374px){
  .bp .bp-ribbon{padding-inline:12px}
  .bp .bp-ribbon b{font-size:18px}
  .bp .bp-ribbon .bp-btn{padding:0 11px;font-size:10.5px;letter-spacing:.1em}
}
/* 320 px phones: the widest answer ($200,000 - $500,000) still has to sit inside the card and the ribbon */
@media (max-width:339px){
  .bp .bp-tot b{font-size:23px}
  .bp .bp-ribbon{gap:8px;padding-inline:10px}
  .bp .bp-ribbon b{font-size:16px}
  .bp .bp-ribbon .bp-btn{padding:0 9px;font-size:10px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  .bp *,.bp *::before,.bp *::after{animation:none!important;transition:none!important}
}

/* The one rule outside .bp: while the phone ribbon is up (build.js sets the
   class on <body>), the site's own sticky Call / Quote bar and chat button
   step aside so two bars never stack. */
body.bp-rib-on .mobile-cta,body.bp-rib-on .chatbtn{visibility:hidden;pointer-events:none}