/* ============================================================================
   SPRAYTECH — styles (light theme, gradient accents — Paint-Pros style)
   Colours come from CSS variables set by site.js from config.js (theme.preset).
   ==========================================================================*/
:root{
  --accent:#e11d74; --accent2:#ef5a2a; --accent-dark:#a3178f;
  --grad:linear-gradient(90deg,#6a2ca0,#b81f95,#e5218a,#ee5a2b,#f5a02a);
  --grad-soft:linear-gradient(90deg,#6a2ca0,#e5218a,#f5a02a);
  --ink:#1c2230; --body:#525a6b; --muted:#8b93a3; --line:#e7e9f0;
  --bg:#ffffff; --bg-tint:#f6f7fb; --dark:#161a24;
  --font-display:'Poppins',sans-serif; --font-body:'Inter',sans-serif;
}
*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:100px; }
body{ margin:0; background:var(--bg); color:var(--body); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4,.font-display{ font-family:var(--font-display); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:#fff; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 20px; }
.gradient-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.on-grad{ background:var(--grad); }

/* ---------- TOP BAR ---------- */
.topbar{ background:var(--dark); color:#cbd0dc; font-size:.82rem; }
.topbar .in{ display:flex; align-items:center; justify-content:space-between; height:42px; }
.topbar .in a{ color:#fff; font-weight:600; }
.topbar .in .sep{ opacity:.4; margin:0 10px; }
@media(max-width:720px){ .topbar .hide-sm{ display:none; } .topbar .in{ justify-content:center; } }

/* ---------- HEADER ---------- */
#hdr{ position:sticky; top:0; z-index:60; background:var(--grad); box-shadow:0 4px 20px rgba(0,0,0,.12); transition:padding .25s; }
#hdr .bar{ display:flex; align-items:center; justify-content:space-between; height:94px; }
#hdr.shrink .bar{ height:78px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:70px; width:auto; transition:height .25s; }
#hdr.shrink .brand img{ height:58px; }
@media(max-width:560px){ #hdr .bar{ height:76px; } .brand img{ height:52px; } }
.brand .wm{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:#fff; letter-spacing:.5px; }
.brand .wm b{ color:#fff; opacity:.85; font-weight:600; }
.nav{ display:flex; align-items:center; gap:6px; }
.nav a{ color:#fff; font-family:var(--font-display); font-weight:600; font-size:.98rem; padding:10px 14px; border-radius:8px; position:relative; opacity:.95; }
.nav a:hover{ background:rgba(255,255,255,.14); }
.nav a.active::after{ content:"•••"; position:absolute; left:0; right:0; bottom:-2px; text-align:center; font-size:.6rem; letter-spacing:.15em; color:#fff; }
.hdr-actions{ display:flex; align-items:center; gap:10px; }
.hdr-call{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--accent-dark); font-weight:700; padding:10px 18px; border-radius:999px; font-size:.9rem; box-shadow:0 6px 16px rgba(0,0,0,.18); }
.hdr-call:hover{ transform:translateY(-1px); }
#navToggle{ display:none; background:none; border:0; color:#fff; padding:6px; cursor:pointer; }
#hdr-spacer{ display:none; }
#mobileNav{ display:none; background:var(--grad); }
#mobileNav.open{ display:block; }
#mobileNav a{ display:block; color:#fff; font-family:var(--font-display); font-weight:600; padding:14px 20px; border-top:1px solid rgba(255,255,255,.15); }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:.95rem; padding:14px 30px; border-radius:999px; cursor:pointer; border:0; transition:transform .18s, box-shadow .18s, background .2s; }
.btn-grad{ background:var(--grad); color:#fff; box-shadow:0 10px 24px -8px rgba(var(--accent-rgb,23,147,230),.55); background-size:150% 100%; }
.btn-grad:hover{ transform:translateY(-2px); background-position:100% 0; }
.btn-dark{ background:var(--dark); color:#fff; }
.btn-dark:hover{ transform:translateY(-2px); background:#000; }
.btn-outline{ border:2px solid var(--line); color:var(--ink); background:#fff; }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn-white{ background:#fff; color:var(--accent-dark); box-shadow:0 8px 20px rgba(0,0,0,.15); }
.btn-white:hover{ transform:translateY(-2px); }

/* ---------- SECTIONS & HEADINGS ---------- */
.sec{ padding:80px 0; }
.sec-tint{ background:var(--bg-tint); }
.sec-dark{ background:var(--dark); color:#cfd4de; }
.eyebrow{ display:inline-block; font-family:var(--font-display); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; color:var(--accent); margin-bottom:10px; }
.stitle{ position:relative; text-align:center; font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--ink); line-height:1.1; z-index:1; }
.stitle::before{ content:attr(data-ghost); position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-size:clamp(3.4rem,8vw,6rem); font-weight:800; color:rgba(20,24,36,.045); z-index:-1; white-space:nowrap; pointer-events:none; }
.stitle::after{ content:""; display:block; width:70px; height:6px; margin:16px auto 0; border-radius:999px; background:var(--grad); }
.sec-sub{ text-align:center; max-width:640px; margin:16px auto 0; color:var(--body); }
.stitle.left{ text-align:left; } .stitle.left::before{ left:0; transform:translate(0,-50%);} .stitle.left::after{ margin-left:0; }

/* ---------- CARDS ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:18px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.card:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -24px rgba(30,20,60,.35); border-color:transparent; }

/* service cards */
.svc{ padding:34px 26px; text-align:center; }
.svc .ic{ width:74px; height:74px; margin:0 auto 18px; display:grid; place-items:center; border-radius:20px; background:var(--bg-tint); }
.svc:hover .ic{ background:var(--grad); }
.svc:hover .ic svg{ stroke:#fff; }
.svc .ic svg{ width:38px; height:38px; stroke:url(#stgrad); }
.svc h3{ font-size:1.15rem; font-weight:700; margin:0 0 8px; }
.svc p{ font-size:.92rem; color:var(--body); margin:0 0 14px; line-height:1.6; }
.svc .more{ font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--accent); display:inline-flex; gap:6px; align-items:center; }

/* stat / feature tiles */
.stat{ text-align:center; padding:30px 18px; }
.stat .n{ font-family:var(--font-display); font-weight:800; font-size:2.8rem; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat p{ margin:10px 0 0; color:var(--body); font-size:.95rem; }

/* process steps */
.step{ padding:28px 24px; }
.step .k{ font-family:var(--font-display); font-weight:800; font-size:.85rem; color:var(--accent); }
.step h3{ font-size:1.1rem; margin:6px 0 8px; }
.step p{ font-size:.9rem; color:var(--body); line-height:1.6; margin:0; }

/* ---------- HERO (photographic carousel) ---------- */
.hero{ position:relative; background:var(--dark); overflow:hidden; }
.hero .slide{ display:none; }
.hero .slide.on{ display:block; }
.hero .stage{ position:relative; min-height:600px; display:flex; align-items:center; }
.hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(1.12); }
.hero .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,23,35,.74), rgba(15,23,35,.40) 52%, rgba(15,23,35,.08)); }
.hero .stage::before{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(46rem 34rem at 88% 12%, rgba(var(--accent-rgb,23,147,230),.14), transparent 60%); pointer-events:none; }
/* moving aurora glow layer */
.hero .stage::after{ content:""; position:absolute; inset:-12%; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(28rem 20rem at 20% 30%, rgba(var(--accent-rgb,23,147,230),.16), transparent 60%),
            radial-gradient(24rem 18rem at 78% 66%, rgba(var(--accent2-rgb,51,162,234),.12), transparent 60%),
            radial-gradient(20rem 15rem at 58% 12%, rgba(var(--accent-rgb,23,147,230),.10), transparent 60%);
  background-repeat:no-repeat; animation:auroraMove 18s ease-in-out infinite alternate; }
@keyframes auroraMove{ 0%{ transform:translate3d(-3%,-2%,0) scale(1); } 100%{ transform:translate3d(4%,3%,0) scale(1.18); } }
.hero .inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:80px 20px; width:100%; }
.hero .box{ max-width:640px; }
.hero .eyebrow{ color:#fff; opacity:.92; }
.hero h1{ color:#fff; font-weight:800; font-size:clamp(2.3rem,4.8vw,3.7rem); line-height:1.07; margin:12px 0 0; }
.hero h1 .g{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ color:#d3d7e2; font-size:1.12rem; line-height:1.7; margin:18px 0 0; max-width:34rem; }
.hero .cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero .trust{ display:flex; flex-wrap:wrap; gap:22px; margin-top:26px; color:#c7ccd8; font-size:.9rem; }
.hero .dots{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:3; }
.hero .dots b{ width:11px; height:11px; border-radius:999px; background:rgba(255,255,255,.45); cursor:pointer; transition:width .3s; }
.hero .dots b.on{ background:#fff; width:30px; }

/* ---------- QUICK TABS (category strip) ---------- */
.quicktabs{ background:#fff; border-bottom:1px solid var(--line); }
.quicktabs .in{ display:flex; flex-wrap:wrap; }
.quicktabs a{ flex:1; text-align:center; padding:20px 12px; font-family:var(--font-display); font-weight:700; color:var(--ink); border-right:1px solid var(--line); transition:color .2s, background .2s; min-width:150px; }
.quicktabs a:last-child{ border-right:0; }
.quicktabs a:hover{ color:#fff; background:var(--grad); }

/* ---------- SERVICES GRID (divider style) ---------- */
.svcgrid{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; }
.svcgrid .cell{ text-align:center; padding:46px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .25s; }
.svcgrid .cell:nth-child(3n){ border-right:0; }
.svcgrid .cell:nth-last-child(-n+3){ border-bottom:0; }
.svcgrid .cell:hover{ background:var(--bg-tint); }
.svcgrid .cell .ic{ width:84px; height:84px; margin:0 auto 18px; display:grid; place-items:center; }
.svcgrid .cell .ic svg{ width:52px; height:52px; stroke:url(#stgrad); stroke-width:1.4; }
.svcgrid .cell h3{ font-size:1.2rem; margin:0 0 8px; }
.svcgrid .cell p{ font-size:.9rem; color:var(--body); line-height:1.6; margin:0 0 14px; }
.svcgrid .cell .more{ font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; }
@media(max-width:900px){ .svcgrid{ grid-template-columns:1fr 1fr; } .svcgrid .cell{ border-right:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important; } .svcgrid .cell:nth-child(2n){ border-right:0!important; } }
@media(max-width:560px){ .svcgrid{ grid-template-columns:1fr; } .svcgrid .cell{ border-right:0!important; } }

/* ---------- TESTIMONIALS ---------- */
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tcard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px; position:relative; }
.tcard .quote{ font-size:3rem; line-height:1; font-family:Georgia,serif; color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text; }
.tcard h4{ font-size:1.1rem; margin:0 0 10px; }
.tcard p{ font-size:.92rem; color:var(--body); line-height:1.7; font-style:italic; }
.tcard .who{ margin-top:16px; font-weight:700; color:var(--ink); font-size:.95rem; }
.tcard .who span{ display:block; font-weight:500; color:var(--muted); font-size:.82rem; font-style:normal; }
.tstars{ color:#f5a02a; letter-spacing:2px; }

/* ---------- FREE ESTIMATE FORM ---------- */
.festimate{ position:relative; }
.festimate form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; margin:36px auto 0; }
.festimate form .full{ grid-column:1/-1; }
@media(max-width:600px){ .festimate form{ grid-template-columns:1fr; } }

/* ---------- FAQ decorations ---------- */
.faqwrap{ position:relative; overflow:hidden; }
.flower{ position:absolute; width:130px; opacity:.5; z-index:0; }
.faqwrap .wrap{ position:relative; z-index:1; }

/* ---------- BEFORE / AFTER ---------- */
.ba-slider{ position:relative; width:100%; aspect-ratio:16/11; overflow:hidden; border-radius:20px; border:4px solid #fff; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); user-select:none; cursor:ew-resize; background:#000; }
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-after{ position:absolute; inset:0; width:100%; height:100%; will-change:clip-path; clip-path:inset(0 0 0 50%); -webkit-clip-path:inset(0 0 0 50%); }
.ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px; background:#fff; z-index:5; box-shadow:0 0 12px rgba(0,0,0,.4); }
.ba-handle span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:999px; background:var(--grad); border:3px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.4); }
.ba-handle span::before,.ba-handle span::after{ content:""; position:absolute; top:50%; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.ba-handle span::before{ left:9px; border-right:7px solid #fff; } .ba-handle span::after{ right:9px; border-left:7px solid #fff; }
.ba-label{ position:absolute; top:14px; z-index:6; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:#fff; padding:5px 12px; border-radius:999px; background:rgba(0,0,0,.55); }
.ba-label-before{ left:14px; } .ba-label-after{ right:14px; background:var(--accent); }

/* ---------- GALLERY ---------- */
.gfilter-bar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.gfilter{ font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--body); padding:9px 20px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer; transition:all .2s; }
.gfilter:hover{ color:var(--accent); border-color:var(--accent); }
.gfilter--on{ color:#fff; background:var(--grad); border-color:transparent; }
.masonry{ column-count:4; column-gap:16px; }
@media(max-width:1024px){ .masonry{ column-count:3; } }
@media(max-width:720px){ .masonry{ column-count:2; } }
.gcard{ position:relative; display:block; width:100%; margin:0 0 16px; break-inside:avoid; border-radius:14px; overflow:hidden; cursor:pointer; background:#eee; }
.gcard img{ width:100%; height:auto; transition:transform .5s; }
.gcard:hover img{ transform:scale(1.06); }
.gcard .ov{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,10,40,.8), transparent 55%); opacity:0; transition:opacity .3s; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; }
.gcard:hover .ov{ opacity:1; }
.gcard .ov .cat{ font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:#fff; background:var(--accent); align-self:flex-start; padding:3px 9px; border-radius:999px; font-weight:700; }
.gcard .ov .t{ color:#fff; font-family:var(--font-display); font-weight:600; margin-top:8px; font-size:.95rem; }

/* lightbox */
#lightbox{ position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; background:rgba(10,6,20,.92); padding:20px; }
#lightbox.show{ display:flex; }
#lightbox img{ max-height:84vh; max-width:92vw; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
#lightbox .x{ position:absolute; top:20px; right:24px; color:#fff; font-size:2rem; cursor:pointer; background:none; border:0; }
#lightbox .nav{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:2.4rem; cursor:pointer; background:rgba(255,255,255,.12); border:0; width:52px; height:52px; border-radius:999px; }
#lb-prev{ left:20px; } #lb-next{ right:20px; }

/* ---------- POST CARDS (blog) ---------- */
.post-card{ overflow:hidden; }
.post-card .thumb{ aspect-ratio:16/10; overflow:hidden; }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.post-card:hover .thumb img{ transform:scale(1.05); }
.post-card .body{ padding:22px; }
.post-card .meta{ display:flex; gap:12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--accent); }
.post-card .meta .d{ color:var(--muted); }
.post-card h3{ font-size:1.15rem; margin:10px 0 8px; line-height:1.3; }
.post-card p{ font-size:.9rem; color:var(--body); line-height:1.6; margin:0; }

/* prose */
.prose-st{ color:var(--body); line-height:1.85; font-size:1.05rem; max-width:100%; }
.prose-st p{ margin:0 0 1.1rem; }

/* ---------- ESTIMATE STRIP ---------- */
.estimate{ background:var(--grad); text-align:center; padding:30px 20px; }
.estimate .inner{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(1.3rem,3vw,2rem); }
.estimate a{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- FAQ ---------- */
.faq{ border:1px solid var(--line); border-radius:14px; margin-bottom:12px; background:#fff; overflow:hidden; }
.faq q{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 22px; cursor:pointer; font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.02rem; }
.faq .plus{ flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:999px; background:var(--grad); color:#fff; transition:transform .3s; }
.faq.open .plus{ transform:rotate(45deg); }
.faq .a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq.open .a{ max-height:340px; }
.faq .a p{ padding:0 22px 20px; margin:0; color:var(--body); line-height:1.7; }

/* ---------- FORMS ---------- */
.field{ width:100%; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:var(--ink); font-size:1rem; font-family:var(--font-body); transition:border-color .2s, box-shadow .2s; }
.field:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(225,29,116,.15); }
.field::placeholder{ color:var(--muted); }
label.lbl{ display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:6px; }

/* contact detail cards */
.cinfo{ display:flex; align-items:center; gap:16px; padding:20px; }
.cinfo .ic{ flex:none; width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--bg-tint); }
.cinfo .ic svg{ width:24px; height:24px; stroke:url(#stgrad); }
.cinfo .k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.cinfo .v{ font-weight:700; color:var(--ink); }

/* ---------- FOOTER ---------- */
.footer{ background:#fff; border-top:1px solid var(--line); }
.footer .cols{ display:grid; grid-template-columns:1.3fr .9fr .9fr .9fr 1.2fr; gap:28px; padding:60px 20px; }
.footer h4{ font-size:.95rem; margin:0 0 18px; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer ul li{ margin-bottom:10px; }
.footer ul a{ color:var(--body); font-size:.92rem; }
.footer ul a:hover{ color:var(--accent); }
.footer .social{ display:flex; gap:10px; margin-top:16px; }
.footer .social a{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--bg-tint); color:var(--body); }
.footer .social a:hover{ background:var(--grad); color:#fff; }
.footer .social svg{ width:18px; height:18px; }
.footbar{ background:var(--grad); }
.footbar .inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 20px; color:#fff; font-size:.85rem; }
.foot-logo{ height:52px; }

/* ---------- REVEAL ---------- */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.reveal-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .nav{ display:none; }
  #navToggle{ display:block; }
  .hero .wrap{ grid-template-columns:1fr; padding-top:40px; padding-bottom:50px; }
  .footer .cols{ grid-template-columns:1fr 1fr; gap:28px; }
  .footbar .inner{ flex-direction:column; text-align:center; }
}
@media(max-width:560px){ .footer .cols{ grid-template-columns:1fr; } .hdr-call span{ display:none; } }

/* breadcrumb */
.crumb{ font-size:.85rem; color:var(--muted); padding:22px 0 0; }
.crumb a:hover{ color:var(--accent); }

/* ============ ANIMATED GRADIENTS & MOTION ============ */
@keyframes gradFlow{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
#hdr,.estimate,.footbar,.btn-grad,.gfilter--on,.quicktabs a:hover{ background-size:220% 220%; animation:gradFlow 14s ease infinite; }
.hero h1 .g{ background-size:220% 220%; animation:gradFlow 9s ease infinite; }
.stat .n{ background-size:220% 220%; animation:gradFlow 9s ease infinite; }
.stitle::after{ background-size:200% 200%; animation:gradFlow 10s ease infinite; }

/* Free-estimate section: flowing gradient background */
.festimate{ background:var(--grad); background-size:240% 240%; animation:gradFlow 16s ease infinite; color:#fff; }
.festimate .eyebrow{ color:#fff; }
.festimate .stitle{ color:#fff; }
.festimate .stitle::before{ color:rgba(255,255,255,.10); }
.festimate .stitle::after{ background:#fff; }
.festimate .sec-sub{ color:rgba(255,255,255,.92); }
.festimate .field{ background:rgba(255,255,255,.96); }

@media (prefers-reduced-motion: reduce){
  #hdr,.estimate,.footbar,.btn-grad,.gfilter--on,.hero h1 .g,.stat .n,.stitle::after,.festimate,.hero .stage::after{ animation:none!important; }
}

/* ============ MOBILE RESPONSIVE FIXES ============ */
html{ overflow-x:hidden; }
/* stack every multi-column grid (inline or class) on tablet/mobile */
@media(max-width:820px){
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .tgrid{ grid-template-columns:1fr; }
  .festimate form{ grid-template-columns:1fr; }
  .flower{ display:none; }               /* decorative — hide on small screens */
  .stitle::before{ font-size:15vw; }     /* keep ghost title inside the viewport */
  .sec{ padding:56px 0; }
}
/* keep the 4-up stat rows as 2-up on small tablets, 1-up on phones */
@media(min-width:521px) and (max-width:820px){
  [style*="repeat(4"]{ grid-template-columns:1fr 1fr !important; }
}
/* Floating WhatsApp button (bottom-right, expands on hover) */
.wa-float{ position:fixed; right:20px; bottom:20px; z-index:80; display:flex; align-items:center; height:58px; width:58px;
  background:#25D366; color:#fff; border-radius:999px; box-shadow:0 12px 26px -8px rgba(0,0,0,.45); overflow:hidden;
  transition:width .28s ease, box-shadow .2s ease; text-decoration:none; }
.wa-float svg{ width:30px; height:30px; flex:none; margin:0 14px; }
.wa-float .wa-label{ white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:.95rem; opacity:0; transition:opacity .18s ease; padding-right:20px; }
.wa-float:hover, .wa-float:focus-visible{ width:214px; box-shadow:0 16px 32px -8px rgba(0,0,0,.5); }
.wa-float:hover .wa-label, .wa-float:focus-visible .wa-label{ opacity:1; }
@media(max-width:560px){ .wa-float{ right:16px; bottom:16px; }
  .wa-float:hover, .wa-float:focus-visible{ width:58px; }        /* no hover on touch — stays a tappable circle */
  .wa-float:hover .wa-label{ opacity:0; } }

/* Horizontal swipe/scroll strip (e.g. shop front photos) — snaps one at a time */
.hscroll{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; border-radius:20px; scrollbar-width:thin; }
.hscroll::-webkit-scrollbar{ height:6px; }
.hscroll::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.22); border-radius:3px; }
.hscroll > img{ flex:0 0 100%; scroll-snap-align:center; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:20px; box-shadow:0 24px 48px -24px rgba(0,0,0,.4); }
.hscroll-hint{ text-align:center; font-size:.8rem; color:var(--muted); margin:10px 0 0; }
@media(min-width:821px){ .hscroll-hint{ display:none; } } /* hint only where touch-swipe matters */

/* Services page: on mobile the image-left ("order:1") sections must fall back to
   normal source order so each photo sits UNDER its own heading & text, not above
   it (and not bleeding up under the previous section). */
@media(max-width:820px){
  #kitchen-spraying>div, #industrial-spraying>div, #painting-decorating>div{ order:0 !important; }
}