/* Interactive layer: before/after slider, project filter, cost estimator,
   line icons, and the mobile first screen.
   Loads after styles-v3.css. Every rule below is scoped to a class that only
   exists where the feature is used, except section 1, which deliberately
   applies sitewide on small screens. */

/* ---------- 1. Mobile first screen ----------
   The top bar wrapped to three lines on a phone and the hero repeated every
   rating again as chips, so a visitor scrolled past the same numbers four
   times before reaching the form. On small screens: one line of trust, and
   the full rating breakdown lives in the reviews section below the form. */
@media(max-width:720px){
  .topbar .wrap{justify-content:center;padding-top:9px;padding-bottom:9px}
  .topbar .badges{flex-wrap:nowrap;gap:16px;white-space:nowrap}
  /* Badge order is identical on every page: Google, NiceJob, Facebook, CA Lic. */
  .topbar .badges>span:nth-child(2),.topbar .badges>span:nth-child(3){display:none}
  .topbar .wrap>div:not(.badges){display:none}
  .hero .trustchips{display:none}
  .proof{display:none}
}

/* The hero photo sat at 38% under a navy gradient, so on a phone the first
   screen read as a wall of text. Pages that have a real job photo opt in with
   .has-photo: the photo shows at full strength as a band across the top and
   fades into navy where the headline starts. */
@media(max-width:820px){
  .hero.has-photo{--band:210px;padding-top:0!important}
  .hero.has-photo::before{inset:0 0 auto 0;height:var(--band);opacity:1}
  .hero.has-photo::after{background:linear-gradient(180deg,rgba(11,30,53,0) 0,rgba(11,30,53,0) 95px,
    rgba(11,30,53,.7) 170px,var(--blue) var(--band),var(--blue) 100%)}
  .hero.has-photo .wrap{padding-top:calc(var(--band) + 14px)}
}

/* ---------- 2. Line icons (replacing emoji) ---------- */
.card .ic svg{width:24px;height:24px;display:block}
.i-inline{width:17px;height:17px;display:inline-block;vertical-align:-3px;margin-right:7px;flex:0 0 auto}
.fineprint .i-inline{width:13px;height:13px;vertical-align:-2px;margin-right:5px}
/* Linked cards inherited link blue for their whole description. */
a.card p{color:var(--body)}

/* ---------- 3. Before / after slider ---------- */
.ba2{max-width:860px;margin:0 auto}
.ba2-stage{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft);
  border:1px solid var(--line);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;--pos:50%}
.ba2-stage img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none}
/* Both layers use the same object-fit and position, so a pair shot from the
   same spot stays aligned at every divider position. */
.ba2-after{clip-path:inset(0 0 0 var(--pos))}
.ba2-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;
  box-shadow:0 0 0 1px rgba(11,30,53,.16);pointer-events:none}
.ba2-knob{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:#fff;color:var(--ink);display:grid;place-items:center;pointer-events:none;
  box-shadow:0 2px 14px rgba(11,30,53,.28)}
.ba2-knob svg{width:22px;height:22px}
.ba2-tag{position:absolute;top:14px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;padding:8px 11px;color:#fff;pointer-events:none}
.ba2-tag.b{left:14px;background:rgba(11,30,53,.8)}
.ba2-tag.a{right:14px;background:var(--orange)}
/* The range input carries keyboard and screen reader control; pointer
   dragging is handled on the stage itself so vertical page scrolls pass
   through on touch screens. */
.ba2-range{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.ba2-stage:focus-within{outline:2px solid var(--blue);outline-offset:3px}
.ba2-cap{text-align:center;margin:22px auto 0;max-width:640px;min-height:78px}
.ba2-cap h3{font-size:20px;margin-bottom:6px;line-height:1.3}
.ba2-cap p{color:var(--body);line-height:1.6;margin:0}
.ba2-picks{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.ba2-pick,.gfilter button{font-family:'Montserrat',sans-serif;font-weight:600;font-size:11.5px;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;padding:12px 16px;min-height:44px;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.ba2-pick:hover,.gfilter button:hover{border-color:var(--blue)}
.ba2-pick[aria-pressed=true],.gfilter button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.ba2-pick:focus-visible,.gfilter button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:720px){.ba2-stage{aspect-ratio:1/1}}

/* ---------- 4. Project gallery filter ---------- */
.gfilter{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:-22px 0 28px}
.gallery2 figure.g-in{animation:g-in .34s ease both}
@keyframes g-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:720px){.gallery2 img{height:170px}}

/* On a phone both button rows become one swipeable line that bleeds to the
   screen edge. This block must stay after the .gfilter base rule above.
   scroll-padding keeps snapping from pulling the first button to the edge. */
@media(max-width:720px){
  .ba2-picks,.gfilter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;
    margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;
    scroll-snap-type:x proximity;scroll-padding-inline:20px}
  .ba2-picks::-webkit-scrollbar,.gfilter::-webkit-scrollbar{display:none}
  .ba2-pick,.gfilter button{scroll-snap-align:start;flex:0 0 auto}
}

/* ---------- 5. Cost estimator ---------- */
.est{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--orange)}
.est-in{padding:32px 32px 28px}
.est-label{display:block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--body);margin:0 0 10px}
.est-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-bottom:28px}
.est-seg button{min-height:48px;border:0;background:#fff;color:var(--ink);cursor:pointer;font-family:'Montserrat',sans-serif;
  font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:background-color .2s,color .2s}
.est-seg button+button{border-left:1px solid var(--line)}
.est-seg button[aria-pressed=true]{background:var(--blue);color:#fff}
.est-seg button:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
.est-sqft{font-family:'Instrument Serif',Georgia,serif;font-size:44px;line-height:1;color:var(--ink);margin:2px 0 6px}
.est-sqft span{font-family:'Montserrat',sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--body)}
.est-range{width:100%;height:44px;margin:0;accent-color:var(--blue);cursor:pointer}
.est-scale{display:flex;justify-content:space-between;font-size:12px;color:#7b8798;margin-top:2px}
.est-out{background:var(--blue);color:#fff;padding:32px;display:flex;flex-direction:column;justify-content:center}
.est-kicker{font-family:'Montserrat',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-tint);margin:0 0 10px}
.est-price{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(32px,3.1vw,42px);line-height:1.04;color:#fff;
  margin:0 0 14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.est-note{color:#b9c6d8;font-size:14px;line-height:1.55;margin:0 0 22px}
.est-out .btn{align-self:flex-start}
@media(max-width:820px){
  .est{grid-template-columns:1fr}
  .est-in,.est-out{padding:26px 22px}
  .est-out .btn{align-self:stretch;text-align:center}
}
/* Brief highlight on the lead form after "Get my exact quote" scrolls to it. */
.leadcard.est-flash{animation:est-flash 1.6s ease}
@keyframes est-flash{0%,100%{box-shadow:0 0 0 0 rgba(158,27,27,0)}25%{box-shadow:0 0 0 4px rgba(158,27,27,.55)}}

@media(prefers-reduced-motion:reduce){
  .gallery2 figure.g-in,.leadcard.est-flash{animation:none}
  .ba2-pick,.gfilter button,.est-seg button{transition:none}
}