/* =========================================================================
   Ivan's Pro Painting — site.css (interactive layer, v4)
   Loads LAST, after styles-v2.css, styles-v3.css and interactive.css.
   Adds motion and interaction on top of the v3 look. Owns no layout that
   v2 does not already own, except the components it introduces.
   Every animation is off under prefers-reduced-motion.
   Revert: remove the <link> to this file and the <script> for site.js.
   ========================================================================= */

:root{
  --ease:cubic-bezier(.2,.7,.2,1);
  --navy-2:#10284a;
  --hdr-h:76px;
}

/* ---------- Scroll progress ---------- */
.scrollprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none;
  background:var(--orange);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- 1. Header: sticky, shrinks on scroll ---------- */
header.site{transition:box-shadow .25s var(--ease),background-color .25s var(--ease)}
header.site .wrap{transition:padding .25s var(--ease)}
header.site img.logo{transition:height .25s var(--ease)}
body.is-scrolled header.site{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(11,30,53,.08);background:rgba(255,255,255,.97)}
body.is-scrolled header.site .wrap{padding-top:6px;padding-bottom:6px}
body.is-scrolled header.site img.logo{height:42px}
@supports (backdrop-filter:blur(8px)){body.is-scrolled header.site{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(8px)}}

/* Tap-to-call stays in the header on phones and tablets */
@media(max-width:960px){
  header.site .head-cta{display:flex;margin-left:auto;gap:0}
  header.site .head-cta .btn,header.site .head-cta .phone span:not(.num){display:none}
  header.site .head-cta .phone{display:flex;align-items:center;min-height:44px;padding:0 6px}
  header.site .head-cta .phone .num{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.02em}
  header.site .navtoggle{order:3}
}
@media(max-width:380px){header.site .head-cta .phone .num{font-size:14px}}
/* styles-v2 shows a CSS "Call Now" label under 720px and hides the number with display:none,
   which leaves the link without a name for screen readers. Keep the number readable, not visible. */
@media(max-width:720px){header.site .head-cta .phone .num{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}

/* Full-screen mobile menu */
@media(max-width:960px){
  header.site .head-nav{inset:0;width:100%;background:var(--blue);padding:92px 24px 28px;box-shadow:none;
    transition:transform .28s var(--ease),visibility 0s linear .28s;visibility:hidden}
  header.site .head-nav.open{visibility:visible;transition:transform .28s var(--ease)}
  header.site .head-nav .navlink{color:#fff;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:30px;
    letter-spacing:0;min-height:52px;border-bottom:1px solid rgba(255,255,255,.12);padding:6px 0}
  header.site .head-nav .navlink svg{width:14px;height:9px}
  header.site .head-nav .dd-panel{background:transparent;border:0;padding:6px 0 14px 2px}
  header.site .head-nav .dd-eyebrow{color:var(--red-tint)}
  header.site .head-nav .dd-link,header.site .head-nav .dd-plain{color:#dbe5f2;font-size:17px;min-height:44px;display:flex;align-items:center}
  header.site .head-nav .dd-link:hover{color:#fff;background:transparent}
  header.site .head-nav .nav-foot{border-top-color:rgba(255,255,255,.14)}
  header.site .head-nav .nav-foot .phone .num{color:#fff;font-size:22px}
  header.site .head-nav .nav-foot .btn{background:var(--orange)}
  /* the toggle sits above the open panel and turns into a close cross */
  header.site .navtoggle{position:relative;z-index:85}
  header.site .navtoggle[aria-expanded="true"] span{background:#fff}
  header.site .navtoggle span{transition:transform .25s var(--ease),opacity .2s}
  header.site .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.site .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  header.site .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- 2. Mobile action bar ---------- */
@media(max-width:820px){
  body{padding-bottom:60px}
  .mobilecall{transition:transform .28s var(--ease);will-change:transform}
  .mobilecall a{min-height:52px;padding:12px;font-size:15px;letter-spacing:.06em;gap:8px}
  .mobilecall a:first-child{background:var(--orange)}
  .mobilecall a.book{background:var(--blue)}
  body.mc-hide .mobilecall{transform:translateY(110%)}
  /* never let the bar sit over the menu */
  body:has(.head-nav.open) .mobilecall{transform:translateY(110%)}
}

/* ---------- 3. Hero ---------- */
.hero .ticks li{line-height:1.5}
.hero h1{text-wrap:balance}
.hero .sub{max-width:62ch}
.hero .callrow .btn{box-shadow:0 10px 30px rgba(158,27,27,.28)}

/* ---------- Section heads ---------- */
.sec-head h2{text-wrap:balance}
.sec-head p{max-width:68ch;margin-left:auto;margin-right:auto}

/* ---------- 6. Rails: services carousel, review carousel ---------- */
.rail-wrap{position:relative}
.rail{display:flex!important;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:4px 2px 18px;margin:0}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 clamp(262px,80%,330px)}
@media(min-width:821px){.rail>*{flex-basis:calc((100% - 54px)/4)}}
.rail-nav{position:absolute;top:38%;z-index:3;width:48px;height:48px;display:none;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;
  transition:background-color .2s,color .2s,opacity .2s}
.rail-nav:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.rail-nav:focus-visible{outline:3px solid var(--blue-mid);outline-offset:2px}
.rail-nav[disabled]{opacity:.35;cursor:default}
.rail-prev{left:-22px}.rail-next{right:-22px}
.rail-wrap.is-scrollable .rail-nav{display:flex}
@media(max-width:820px){.rail-nav{display:none!important}}
.rail-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.rail-dots i{width:22px;height:2px;background:var(--line);transition:background-color .2s}
.rail-dots i.on{background:var(--orange)}
@media(min-width:821px){.rail-dots{display:none}}

/* review rail arrows (markup existed, now driven by site.js) */
.sp-rail-wrap.is-scrollable .sp-nav{display:flex!important}
@media(max-width:820px){.sp-rail-wrap .sp-nav{display:none!important}}

/* ---------- 8. Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(6,21,36,.94);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility 0s linear .22s;touch-action:pan-y}
.lb.open{opacity:1;visibility:visible;transition:opacity .22s var(--ease)}
.lb figure{margin:0;max-width:min(92vw,1200px);max-height:86vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;background:#0b1e35}
.lb figcaption{color:#c3d2e6;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-family:'Montserrat',sans-serif;text-align:center}
.lb button{position:absolute;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;width:48px;height:48px;
  font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb button:hover{background:rgba(255,255,255,.12)}
.lb button:focus-visible{outline:3px solid var(--blue-pale);outline-offset:2px}
.lb .lb-close{top:16px;right:16px}
.lb .lb-prev{left:16px;top:50%;margin-top:-24px}
.lb .lb-next{right:16px;top:50%;margin-top:-24px}
.lb .lb-count{position:absolute;top:26px;left:20px;color:#9fb3cd;font-size:13px;font-family:'Montserrat',sans-serif;letter-spacing:.14em}
@media(max-width:720px){.lb .lb-prev,.lb .lb-next{top:auto;bottom:18px;margin:0}}
.gallery2 figure img,.jobgal-track figure img{cursor:zoom-in}

/* ---------- 9. Service area chips ---------- */
.chips .chip-link{transition:background-color .2s,color .2s,border-color .2s}
.chips .chip{min-height:44px;display:inline-flex;align-items:center}

/* ---------- 10. FAQ ---------- */
.faq summary{min-height:44px}
.faq details[open] .a{animation:faqIn .28s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- 12. Guarantee tiers + process steps ---------- */
.tier{position:relative;transition:transform .25s var(--ease),border-color .25s,background-color .25s}
@media(hover:hover){.tier:hover{transform:translateY(-4px);border-color:var(--blue)}}
.tier .yrs{transition:color .25s}

.steps{position:relative}
.steps .step{transition:border-color .3s var(--ease),background-color .3s}
.steps .step.is-on{border-color:var(--blue)}
.steps .step.is-on::before{color:var(--orange)}
.steps-line{position:absolute;left:0;right:0;top:-22px;height:2px;background:var(--line);overflow:hidden}
.steps-line i{position:absolute;inset:0;background:var(--orange);transform-origin:0 50%;transform:scaleX(var(--fill,0));transition:transform .1s linear}
@media(max-width:820px){.steps-line{display:none}}

/* ---------- 4. Estimator additions ---------- */
.est-stories .est-seg{margin-bottom:22px}
.est-type{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--body);
  font-family:'Montserrat',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.est-num{width:120px;min-height:44px;padding:8px 10px;border:1px solid var(--line);font-size:16px;color:var(--ink);
  font-family:'Montserrat',sans-serif;background:#fff}
.est-num:focus{outline:none;border-color:var(--blue-mid);box-shadow:0 0 0 3px rgba(31,95,168,.18)}
.est-price{font-variant-numeric:tabular-nums}
.est-spec{color:#dbe5f2;font-size:13px;line-height:1.5;margin:-8px 0 22px;padding-left:12px;border-left:2px solid var(--red-tint)}

/* specialty finishes note under price ranges (section 5) */
.spec-note{font-size:14px;color:var(--body);border-left:2px solid var(--orange);padding:2px 0 2px 12px;margin:12px 0 18px}

/* before/after pairs upgraded to sliders inside .ba-card */
.ba-card .ba2-inline{max-width:none;margin:0}
.ba-card .ba2-inline .ba2-stage{aspect-ratio:1/1}

/* ---------- 13. Quote form ---------- */
.leadcard{border-top:3px solid var(--orange)}
.leadcard input,.leadcard select,.leadcard textarea{font-size:16px;min-height:48px;transition:border-color .2s,box-shadow .2s}
.leadcard input:focus,.leadcard select:focus,.leadcard textarea:focus{outline:none;border-color:var(--blue-mid);box-shadow:0 0 0 3px rgba(31,95,168,.18)}
.leadcard button[type=submit],.leadcard .btn{min-height:52px}
.est-flash{animation:estFlash 1.2s var(--ease)}
@keyframes estFlash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 4px rgba(158,27,27,.35)}}

/* ---------- 11. Scroll reveal (JS adds .rv only below the fold) ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- Header between tablet and full desktop: fit everything ---------- */
@media(min-width:961px) and (max-width:1180px){
  header.site .head-nav{gap:14px}
  header.site .head-cta{gap:12px}
  header.site .head-cta .phone span:not(.num){display:none}
  header.site .head-cta .btn{padding:14px 16px;font-size:13px;letter-spacing:.06em}
  header.site img.logo{height:44px}
}

/* ---------- Tap targets and type on phones ---------- */
@media(max-width:720px){
  body{font-size:16px}
  .card .more,.chip-link,.dd-link{min-height:44px}
}
@media(max-width:820px){
  footer.site .foot-cities a,footer.site .foot-legal a,footer.site .foot-col p a{display:inline-flex;align-items:center;min-height:44px}
  .crumb a,.crumbs a{display:inline-flex;align-items:center;min-height:44px}
}
.topbar a[href^="tel:"]{display:inline-flex;align-items:center;min-height:24px}
footer.site .foot-col p a,footer.site .foot-cities a{display:inline-flex;align-items:center;min-height:24px}
.jobgal-btn{min-width:44px;min-height:44px}
.prose p,.prose li,.sec-head p{max-width:72ch}

/* ---------- Reduced motion: everything static ---------- */
@media(prefers-reduced-motion:reduce){
  .scrollprog{display:none}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  header.site,header.site .wrap,header.site img.logo,.tier,.mobilecall,.lb,.rail-nav,.steps-line i{transition:none!important}
  .faq details[open] .a,.est-flash{animation:none!important}
  .rail{scroll-behavior:auto}
}

/* Links inside running text need more than color to stand out (WCAG 1.4.1) */
.prose p a,.prose li a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* ---------- video slots (empty until footage lands; see video/manifest.json) ---------- */
.vslot{position:relative;overflow:hidden;background:#0b1e35}
.vslot video{display:block;width:100%;height:auto}
.vslot-city{position:absolute;left:10px;bottom:10px;font:600 12px/1 Montserrat,sans-serif;color:#fff;background:rgba(6,21,36,.6);padding:5px 8px}
.hero .vslot-hero{position:absolute;inset:0;z-index:0;background:none;transition:opacity .8s ease}
.hero .vslot-hero video{width:100%;height:100%;object-fit:cover}
.hero .vslot-hero+.vslot-hero{opacity:0}
.hero .vslot-hero.is-on{opacity:1}
.hero .vslot-hero~.wrap{position:relative;z-index:1}
.vslot-sec{padding-top:0}
.vslot-walk video{aspect-ratio:16/9;object-fit:cover}
.vproof{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 28px}
.vproof:not(:has(.vslot)){display:none}
@media(max-width:820px){.vslot-walk video{aspect-ratio:4/5}.vproof{grid-template-columns:repeat(2,1fr)}}

/* ---------- terms strip: estimate, booking, payments ---------- */
.terms-strip{padding:28px 0}
.termrow{list-style:none;margin:28px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:960px}
.terms-strip .termrow{margin-top:0}
.termrow li{border:1px solid var(--line,#d7e0ec);background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.termrow b{font:700 20px/1.2 Montserrat,sans-serif;color:var(--blue,#0b1e35)}
.termrow span{font-size:15px;color:var(--body,#4a5567)}
@media(max-width:720px){.termrow{grid-template-columns:1fr}}

/* ---------- why Ivan's: three points ---------- */
.why3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 28px}
.why3-item{background:#fff;border:1px solid var(--line,#d7e0ec);padding:22px}
.why3-item h3{margin:0 0 8px;font-size:19px}
.why3-item p{margin:0;color:var(--body,#4a5567)}
.why3-item blockquote{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line,#d7e0ec);font-style:italic;font-size:15px;color:var(--blue,#0b1e35)}
.why3-item cite{display:block;margin-top:6px;font-style:normal;font-size:13px;font-weight:700;color:var(--body,#4a5567)}
@media(max-width:820px){.why3{grid-template-columns:1fr}}

/* ---------- about: crew ---------- */
.crewline{margin:18px 0 8px}
.crewlist{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px}
.crewlist li{border:1px solid var(--line,#d7e0ec);padding:6px 12px;font-weight:700}
.crewgrid.crew4{grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){.crewgrid.crew4{grid-template-columns:repeat(2,1fr)}}

/* ---------- trust row: licensed, insured, locally owned (+ gated badges) ---------- */
.trustrow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;align-items:center}
.trustrow-wrap{padding-top:22px;padding-bottom:6px}
.trustrow li{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:120px}
.trustrow b{font:700 15px/1.3 Montserrat,sans-serif;color:var(--blue,#0b1e35)}
.trustrow span{font-size:13px;color:var(--body,#4a5567)}
.trustrow .trust-sub{display:block}
.trust-badge img{height:48px;width:auto;display:block}
.trust-badge img.tb-tall{height:60px}
.trustrow-foot{justify-content:flex-start;gap:6px 18px;margin-top:12px}
.trustrow-foot li{align-items:flex-start;text-align:left;min-width:0}
.trustrow-foot b{color:#fff;font-size:13px}
.trustrow-foot span{color:#9aa0a6;font-size:12px}
@media(max-width:720px){.trustrow{gap:10px 16px}.trustrow li{min-width:96px}}

/* ---------- financing line (gated) ---------- */
.fin-line{text-align:center;margin:14px 0 0;font-size:15px;color:var(--body,#4a5567)}
.fin-logo{display:block;margin:16px auto 0;height:36px;width:auto}

/* ---------- guide author: byline under the answer, box after the article ---------- */
.hero .byline{margin:14px 0 0;font-size:14px;letter-spacing:.02em;opacity:.85}
.hero .byline a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.author-sec{padding:8px 0 28px}
.author-box{max-width:840px;margin:0 auto;padding:20px 22px;border:1px solid var(--line,#e2e6ec);border-radius:10px;background:#fff}
.author-kicker{margin:0 0 4px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red,#9e1b1b)}
.author-name{margin:0 0 6px;font-size:20px;font-weight:700}
.author-name a{color:var(--ink,#0b1e35)}
.author-bio{margin:0;font-size:16px;line-height:1.6;color:var(--body,#4a5567)}