/* ============================================================
   PRODEC PAINTERS — custom styles
   Tailwind (loaded via CDN) handles layout, spacing and colour.
   This file covers the pieces utility classes can't express:
   the brand "drip strip", the before/after slider, numbered
   steps, and a few accessibility defaults.
   ============================================================ */

:root{
  --grey:#6F6F74;
  --blue:#2287BC;
  --amber:#F0A63A;
  --red:#E2372B;
  --ink:#17171B;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{-webkit-font-smoothing:antialiased}

/* Visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}

/* ------------------------------------------------------------
   SIGNATURE — the four-colour drip strip.
   Taken straight from the four paint bars in the Prodec logo,
   so the site is branded by its own mark rather than a generic
   accent colour.
   ------------------------------------------------------------ */
.drip{
  height:6px;
  background:linear-gradient(90deg,
    var(--grey) 0 25%,
    var(--blue) 25% 50%,
    var(--amber) 50% 75%,
    var(--red) 75% 100%);
}

.tick{
  display:inline-block;
  width:56px;height:5px;
  background:linear-gradient(90deg,
    var(--grey) 0 25%,
    var(--blue) 25% 50%,
    var(--amber) 50% 75%,
    var(--red) 75% 100%);
}

/* Section eyebrow labels */
.eyebrow{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:.5rem;
}
.bg-ink .eyebrow{color:var(--amber)}

/* CTA banner gets the drip strip as a vertical edge */
.cta-banner{position:relative;overflow:hidden}
.cta-banner::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:8px;
  background:linear-gradient(180deg,
    var(--grey) 0 25%,
    var(--blue) 25% 50%,
    var(--amber) 50% 75%,
    var(--red) 75% 100%);
}

/* ------------------------------------------------------------
   NUMBERED PROCESS STEPS
   Numbers are genuine sequence information here, not decoration:
   each step must happen before the next.
   ------------------------------------------------------------ */
.steps{counter-reset:step;list-style:none;padding:0;margin:0}
.step{position:relative;padding-left:64px;margin-bottom:26px}
.step::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;left:0;top:0;
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;font-size:1.15rem;
  color:#fff;background:var(--ink);
}
.step:nth-child(1)::before{background:var(--grey)}
.step:nth-child(2)::before{background:var(--blue)}
.step:nth-child(3)::before{background:var(--amber)}
.step:nth-child(4)::before{background:var(--red)}

/* ------------------------------------------------------------
   BEFORE / AFTER SLIDER
   ------------------------------------------------------------ */
.ba{
  position:relative;
  max-width:720px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(23,23,27,.16);
}
.ba img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
}
.ba .after{
  position:absolute;
  inset:0;
  clip-path:inset(0 0 0 50%);
}
.ba input[type=range]{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  opacity:0;
  cursor:ew-resize;
  z-index:3;
  margin:0;
}
.ba .handle{
  position:absolute;
  top:0;bottom:0;left:50%;
  width:4px;
  background:#fff;
  z-index:2;
  pointer-events:none;
  box-shadow:0 0 10px rgba(0,0,0,.45);
}
.ba .handle::after{
  content:"\f337";                 /* FontAwesome arrows-left-right */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:#fff;color:var(--ink);
  border-radius:999px;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;
}
.ba .tag{
  position:absolute;top:14px;
  background:rgba(23,23,27,.78);
  color:#fff;
  padding:4px 13px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  z-index:2;
  pointer-events:none;
}
.ba .tag.before{left:14px}
.ba .tag.after-tag{right:14px}

/* ------------------------------------------------------------
   FAQ accordion
   ------------------------------------------------------------ */
details summary::-webkit-details-marker{display:none}
details summary::marker{content:""}

/* ------------------------------------------------------------
   Checklists used on the service pages
   ------------------------------------------------------------ */
.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding-left:32px;margin-bottom:10px}
.checks li::before{
  content:"\f00c";                 /* FontAwesome check */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;left:0;top:1px;
  color:var(--red);
  font-size:.9rem;
}

/* ------------------------------------------------------------
   Print — so quotes and details survive being printed out
   ------------------------------------------------------------ */
@media print{
  header,footer,.drip,form,.ba{display:none}
  body{background:#fff;color:#000}
}