/* Angie's Plumbing Hire — plumbing tool hire Cape Town */
:root{--blue:#0b5ed7;--blue-d:#083a80;--bg:#f7f9fc;--text:#1c2733;--muted:#5c6b7a;--line:#e3e9f0;--green:#0c8a3e;}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Arial,sans-serif;}
body{background:#fff;color:var(--text);line-height:1.55;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px;}

/* Header */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;}
.head{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1140px;margin:0 auto;}
.head .logo img{height:46px;}
.head nav{display:flex;align-items:center;}
.head nav a{margin-left:26px;font-weight:600;font-size:15px;color:var(--muted);}
.head nav a:hover,.head nav a.on{color:var(--blue);}
.head nav .cta{background:var(--blue);color:#fff;padding:10px 20px;border-radius:30px;}
.head nav .cta:hover{background:var(--blue-d);color:#fff;}
.burger{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--text);}
@media(max-width:820px){
  .burger{display:block;}
  .head nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:14px;border-bottom:1px solid var(--line);box-shadow:0 12px 20px rgba(0,0,0,.08);}
  .head nav.open{display:flex;}
  .head nav a{margin:8px 0;}
}

/* Buttons */
.btn{display:inline-block;padding:13px 28px;border-radius:30px;font-weight:700;border:none;cursor:pointer;font-size:15px;}
.btn-p{background:var(--blue);color:#fff;}
.btn-p:hover{background:var(--blue-d);}

/* Parallax hero */
.hero{position:relative;min-height:39vh;display:flex;align-items:center;color:#fff;}
.hero .para{position:absolute;inset:-6%;z-index:0;
  background-image:linear-gradient(rgba(6,26,60,.86),rgba(8,44,100,.78)),url('../Header_1920x640_0.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  animation:heroDrift 26s ease-in-out infinite alternate;will-change:transform;}
@keyframes heroDrift{
  0%{transform:scale(1) translate(0,0);}
  50%{transform:scale(1.08) translate(-1.5%,1%);}
  100%{transform:scale(1.14) translate(1.5%,-1%);}
}
@media(prefers-reduced-motion:reduce){.hero .para{animation:none;}}
.hero .inner{position:relative;z-index:2;padding:46px 0;text-align:center;width:100%;}
.hero h1{font-size:38px;line-height:1.12;max-width:860px;margin:0 auto 12px;text-shadow:0 2px 14px rgba(0,0,0,.4);}
.hero h1 span{color:#8fc1ff;}
.hero p{color:#e4edfb;font-size:17px;max-width:640px;margin:0 auto 22px;text-shadow:0 1px 8px rgba(0,0,0,.4);}
.hero .btns a{margin:6px;}
.hero .btn-w{background:#fff;color:var(--blue-d);}
.hero .strip{margin-top:26px;display:flex;justify-content:center;gap:32px;flex-wrap:wrap;color:#e0eafb;font-size:14px;font-weight:600;}
@media(max-width:700px){
  .hero h1{font-size:27px}
  .hero{min-height:auto}
  .hero .inner{padding:34px 0 30px}
  .hero .strip{gap:10px 18px;margin-top:20px;font-size:13px;}
}

/* Sticky call / WhatsApp bar — mobile only, injected by js/main.js */
.callbar{display:none;}
@media(max-width:820px){
  body{padding-bottom:44px;}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;
    box-shadow:0 -4px 14px rgba(0,0,0,.18);}
  .callbar a{flex:1;text-align:center;padding:12px 8px;font-weight:800;font-size:13px;
    color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px;}
  .callbar .cb-call{background:var(--blue);}
  .callbar .cb-wa{background:#25d366;}
}

/* Page hero (inner pages) */
.page-hero{background:linear-gradient(180deg,var(--bg),#fff);padding:40px 0 28px;border-bottom:1px solid var(--line);}
.page-hero h1{font-size:32px;}
.page-hero p{color:var(--muted);max-width:680px;margin-top:8px;}
.crumb{font-size:13px;color:var(--muted);margin-bottom:12px;}
.crumb a{color:var(--blue);}

/* Sections */
section.pad{padding:52px 0;}
.pad.alt{background:var(--bg);}
h2.sec{font-size:29px;margin-bottom:8px;}
p.lead{color:var(--muted);margin-bottom:26px;}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px;}
.card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:.15s;}
.card:hover{box-shadow:0 12px 28px rgba(28,39,51,.12);transform:translateY(-2px);}
.card .imgbox{height:175px;display:flex;align-items:center;justify-content:center;padding:14px;background:#fff;border-bottom:1px solid var(--line);}
.card .imgbox img{max-height:100%;max-width:100%;object-fit:contain;}
.card .body{padding:18px;flex:1;display:flex;flex-direction:column;}
.card h3{font-size:16px;margin-bottom:6px;}
.card p{color:var(--muted);font-size:13px;flex:1;}
.card .foot{margin-top:14px;}

/* Split button — flat, joined with a 45° slash */
.sbtn{display:flex;border-radius:10px;overflow:hidden;font-weight:700;font-size:14px;width:100%;}
.sbtn .p{flex:1.1;background:var(--blue);color:#fff;padding:11px 6px 11px 14px;white-space:nowrap;}
.sbtn .p small{font-weight:600;opacity:.8;font-size:11px;}
.sbtn .v{flex:1;background:var(--blue-d);color:#fff;padding:11px 14px 11px 6px;text-align:right;white-space:nowrap;position:relative;}
.sbtn .v::before{content:"";position:absolute;left:-10px;top:-2px;bottom:-2px;width:16px;background:var(--blue);transform:skewX(-20deg);}
.card:hover .sbtn .v,.sbtn:hover .v{background:#062a58;}

/* Tool detail */
.tool-top{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start;padding:38px 0;}
@media(max-width:860px){.tool-top{grid-template-columns:1fr;}}
.tool-top .imgmain{border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;padding:24px;min-height:320px;}
.tool-top .imgmain img{max-height:320px;object-fit:contain;}
.pricebox{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-top:18px;display:flex;align-items:center;justify-content:space-between;background:var(--bg);flex-wrap:wrap;gap:12px;}
.pricebox b{font-size:29px;color:var(--blue);}
.pricebox small{color:var(--muted);display:block;}
.ticks{list-style:none;margin:16px 0;}
.ticks li{padding:4px 0;color:var(--muted);}
.ticks li::before{content:"✓ ";color:var(--green);font-weight:800;}

/* Carousel */
.carousel{position:relative;}
.car-main{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;position:relative;height:430px;display:flex;align-items:center;justify-content:center;padding-bottom:40px;}
@media(max-width:700px){.car-main{height:260px;padding-bottom:36px;}}
.car-main img{max-width:100%;max-height:100%;object-fit:contain;padding:12px;}
.car-cap{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);color:var(--muted);padding:9px 18px;font-size:13px;}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.95);border:1px solid var(--line);width:42px;height:42px;border-radius:50%;font-size:18px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:5;color:var(--blue);}
.car-prev{left:12px;}.car-next{right:12px;}
.car-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;}
.car-thumbs img{width:96px;height:64px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;opacity:.65;background:#fff;}
.car-thumbs img.on{border-color:var(--blue);opacity:1;}

/* Steps */
.steps-list{counter-reset:step;list-style:none;max-width:760px;}
.steps-list li{position:relative;padding:0 0 22px 62px;counter-increment:step;}
.steps-list li::before{content:counter(step);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:17px;}
.steps-list li::after{content:"";position:absolute;left:20px;top:46px;bottom:4px;width:2px;background:var(--line);}
.steps-list li:last-child::after{display:none;}
.steps-list b{display:block;margin-bottom:2px;}
.steps-list span{color:var(--muted);font-size:14px;}

/* Fittings */
.fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.fit{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;font-size:14px;}
.fit b{display:block;margin-bottom:4px;}
.fit span{color:var(--muted);font-size:13px;}
.note{background:#fff8e6;border:1px solid #f0dfae;border-radius:10px;padding:14px 16px;font-size:14px;color:#7a6320;margin-top:18px;}

/* Booking form */
.bookbox{background:var(--blue-d);border-radius:18px;padding:34px;color:#fff;}
.bookbox h2{font-size:25px;margin-bottom:6px;}
.bookbox p{color:#bcd2f5;margin-bottom:20px;font-size:15px;}
.bookbox form{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:700px){.bookbox form{grid-template-columns:1fr;}}
.bookbox label{font-size:13px;font-weight:600;color:#bcd2f5;display:block;margin-bottom:4px;}
.bookbox input,.bookbox select,.bookbox textarea{width:100%;padding:12px;border-radius:8px;border:none;font-size:14px;background:#fff;color:var(--text);font-family:inherit;}
.bookbox .full{grid-column:1/-1;}
.bookbox .btn{background:#fff;color:var(--blue-d);grid-column:1/-1;justify-self:start;}
.bookbox .alt{grid-column:1/-1;font-size:13px;color:#9db9e8;}
.bookbox .alt a{color:#fff;text-decoration:underline;}

/* Steps / home extras */
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;text-align:center;}
.num{width:44px;height:44px;line-height:44px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;margin:0 auto 12px;font-size:17px;}
.step h3{margin-bottom:6px;font-size:16px;}
.step p{color:var(--muted);font-size:14px;}
.brands{display:flex;justify-content:center;gap:38px;margin-top:22px;font-weight:800;font-size:18px;color:#aab6c3;flex-wrap:wrap;}
.qb{margin-top:-56px;position:relative;z-index:5;padding-bottom:10px;}
@media(max-width:700px){.qb{margin-top:18px;}}
.qb .bookbox{box-shadow:0 24px 50px rgba(8,58,128,.35);}
.pop-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:20px;cursor:pointer;margin-left:8px;color:var(--blue);font-weight:800;}
.pop-nav button:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
#popular .card{animation:popIn .45s ease;}
@keyframes popIn{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
.pop-dots{display:flex;justify-content:center;gap:8px;margin-top:20px;}
.pop-dots span{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s;}
.pop-dots span.on{background:var(--blue);transform:scale(1.25);}
.seo-copy{max-width:820px;}
.seo-copy h2{font-size:24px;margin:22px 0 8px;}
.seo-copy p{color:var(--muted);margin-bottom:12px;}
.seo-copy a{color:var(--blue);font-weight:600;}

/* CTA banner + footer */
.banner{background:var(--blue-d);color:#fff;padding:48px 0;text-align:center;}
.banner h2{font-size:27px;margin-bottom:8px;}
.banner p{color:#bcd2f5;margin-bottom:22px;}
.banner a{background:#fff;color:var(--blue-d);padding:13px 28px;border-radius:30px;font-weight:800;}
footer{background:var(--bg);border-top:1px solid var(--line);padding:38px 0 24px;font-size:14px;color:var(--muted);}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;max-width:1140px;margin:0 auto;padding:0 20px 20px;}
footer h4{color:var(--text);margin-bottom:8px;}
footer a{color:var(--blue);}
footer .base{text-align:center;border-top:1px solid var(--line);padding-top:16px;font-size:12px;}
/* Footer heading icons */
footer .cols>div:nth-child(1) h4::before{content:"\1F527  ";}
footer .cols>div:nth-child(2) h4::before{content:"\1F4CD  ";}
footer .cols>div:nth-child(3) h4::before{content:"\1F4DE  ";}
footer .cols>div:nth-child(4) h4::before{content:"\2705  ";}