/* Roof Waterproofing Pretoria East — palette sampled from the duck logo */
:root{--navy:#0b3352;--navy-d:#071d32;--roof:#034e6e;--blue:#1a80a6;--teal:#1f9fa2;--teal-d:#157e91;--teal-l:#e6f5f5;--yellow:#fbc316;--yellow-l:#fff6d6;--orange:#f69d29;--orange-d:#de8414;--ink:#14263a;--muted:#55687b;--line:#d9e5ec;--tint:#f2f8fa;--r:14px;--shadow:0 16px 36px -16px rgba(11,51,82,.35);--shadow-s:0 4px 14px -6px rgba(11,51,82,.25);--hf:"Barlow Condensed",system-ui,-apple-system,"Segoe UI",sans-serif;--bf:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--bf);font-size:18px;line-height:1.65;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}a{color:var(--roof);text-decoration-thickness:1px;text-underline-offset:2px}a:hover{color:var(--orange-d)}
h1,h2,h3,h4{font-family:var(--hf);color:var(--navy);line-height:1.08;letter-spacing:.005em;margin:1.5em 0 .45em;font-weight:800}
h1{font-size:clamp(2.3rem,5vw,3.6rem);margin-top:.2em;text-transform:uppercase}h2{font-size:clamp(1.75rem,3vw,2.45rem)}h3{font-size:1.38rem;font-weight:700}
p{margin:0 0 1em}ul,ol{padding-left:1.25em}li{margin:.3em 0}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99}
.hp{position:absolute;left:-5000px}.muted{color:var(--muted)}.small{font-size:.9rem}
.ic{width:24px;height:24px;flex:none}.ic-sm{width:18px;height:18px;flex:none;vertical-align:-3px}.ic-xs{width:15px;height:15px;flex:none;vertical-align:-2px}.ic-lg{width:32px;height:32px;flex:none}
.eyebrow{font-family:var(--hf);text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--teal-d);font-size:.95rem;margin:0 0 .3em}.eyebrow.light{color:var(--yellow)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;font-family:var(--hf);font-weight:800;font-size:1.12rem;text-transform:uppercase;letter-spacing:.04em;border-radius:10px;padding:.7em 1.3em;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--orange);color:var(--navy-d);box-shadow:0 8px 18px -8px rgba(246,157,41,.8)}.btn-accent:hover{background:var(--yellow);color:var(--navy-d)}
.btn-blue{background:var(--teal-d);color:#fff}.btn-blue:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy)}.btn-white:hover{background:var(--yellow-l);color:var(--navy)}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-lg{font-size:1.22rem;padding:.78em 1.5em}.btn-block{width:100%}
/* header */
.topbar{background:var(--navy-d);color:#cfe3ee;font-size:.86rem}.topbar-in{display:flex;justify-content:space-between;gap:12px;padding:7px 22px;flex-wrap:wrap}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;box-shadow:0 2px 14px -8px rgba(11,51,82,.35)}
.header-in{display:flex;align-items:center;gap:18px;min-height:78px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}.logo-mark{width:56px;height:56px;object-fit:contain}
.logo-text{font-family:var(--hf);font-weight:800;line-height:.92;display:flex;flex-direction:column;text-transform:uppercase}.lt1{color:var(--navy);font-size:1.32rem;letter-spacing:.01em}.lt2{color:var(--teal-d);font-size:1.05rem;letter-spacing:.14em}
.main-nav{margin-left:auto}.nav-list{list-style:none;display:flex;gap:2px;margin:0;padding:0}
.nav-list>li{position:relative;margin:0}.nav-list>li>a{display:block;padding:10px 11px;font-weight:600;color:var(--navy);text-decoration:none;font-size:.98rem}
.nav-list>li>a:hover{color:var(--teal-d)}.has-sub>a::after{content:"▾";font-size:.7em;margin-left:4px;color:var(--teal)}
.sub{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);list-style:none;margin:0;padding:10px;min-width:290px;z-index:50}
.sub-wide{columns:2;min-width:420px}.sub li{margin:0;break-inside:avoid}.sub a{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.95rem}.sub a:hover{background:var(--teal-l);color:var(--navy)}
.sub-all a{font-weight:700;color:var(--teal-d)}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.hdr-phone{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--navy)}.hdr-phone .ic{background:var(--teal-l);border-radius:50%;padding:7px;width:38px;height:38px;color:var(--teal-d)}
.hdr-phone small{display:block;font-size:.72rem;color:var(--muted);line-height:1}.hdr-phone b{font-family:var(--hf);font-size:1.32rem;letter-spacing:.02em}
.mnav{display:none}
/* hero */
.hero{background:radial-gradient(1200px 500px at 85% 10%,#d9f1f1 0,rgba(217,241,241,0) 60%),linear-gradient(180deg,#f4fbfb,#fff);position:relative;overflow:hidden;border-bottom:4px solid var(--teal)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(31,159,162,.12) 1px,transparent 0);background-size:22px 22px;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;padding:46px 22px 54px;position:relative}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:600;font-size:.92rem;color:var(--navy);box-shadow:var(--shadow-s)}
.pill .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(31,159,162,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,159,162,.55)}70%{box-shadow:0 0 0 9px rgba(31,159,162,0)}100%{box-shadow:0 0 0 0 rgba(31,159,162,0)}}
@media (prefers-reduced-motion:reduce){.pill .dot{animation:none}html{scroll-behavior:auto}}
.hero h1 span{color:var(--teal-d)}.hero .lead{font-size:1.15rem;color:#2a3f54;max-width:620px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 14px}
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:600;font-size:.95rem;color:var(--navy)}.ticks li{display:flex;gap:6px;align-items:center;margin:0}.ticks .ic-xs{color:var(--teal)}
.hero-card{position:relative}
.hero-mascot{position:absolute;right:-8px;top:-78px;width:150px;filter:drop-shadow(0 10px 18px rgba(11,51,82,.25));z-index:2}
.page-hero{padding:24px 0 40px}.page-hero .hero-grid{padding-top:20px}
/* forms */
.qform{background:#fff;border-radius:18px;padding:24px 24px 18px;box-shadow:var(--shadow);border-top:6px solid var(--orange);position:relative}
.qf-title{font-family:var(--hf);font-weight:800;font-size:1.7rem;color:var(--navy);margin:0;text-transform:uppercase;line-height:1.05;padding-right:80px}.qf-sub{color:var(--muted);font-size:.95rem;margin:.3em 0 .9em}
.qform label{display:block;font-weight:600;font-size:.88rem;color:var(--navy);margin-bottom:10px}
.qform input,.qform select,.qform textarea{display:block;width:100%;margin-top:4px;font:inherit;font-size:1rem;padding:.6em .75em;border:1.5px solid var(--line);border-radius:10px;background:#f9fcfd;color:var(--ink)}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,159,162,.18);background:#fff}
.qf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.qf-or{text-align:center;margin:.7em 0 .2em;font-size:.95rem}.qf-or a{font-weight:800;color:var(--navy)}.qf-legal{font-size:.78rem;color:var(--muted);text-align:center;margin:0}
/* trust strip */
.trust{background:var(--navy);color:#fff}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:20px 22px}
.trust-i{display:flex;gap:12px;align-items:center}.trust-i .ic-lg{color:var(--yellow);background:rgba(255,255,255,.08);border-radius:10px;padding:5px;width:42px;height:42px}
.trust-i b{display:block;font-family:var(--hf);font-size:1.15rem;letter-spacing:.02em}.trust-i span{font-size:.86rem;color:#bcd6e4}
/* sections */
.band{padding:64px 0}.band-tint{background:var(--tint)}.band-teal{background:linear-gradient(135deg,var(--teal-d),var(--roof));color:#fff}.band-teal h2,.band-teal h3{color:#fff}
.sec-head{max-width:760px;margin-bottom:28px}.sec-head h2{margin-top:0}
.prose{max-width:780px}.prose-wide{max-width:900px}
.two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
.answer{background:var(--yellow-l);border-left:5px solid var(--yellow);border-radius:12px;padding:16px 20px;margin:18px 0 22px}.answer p{margin:0}.answer-label{font-family:var(--hf);text-transform:uppercase;letter-spacing:.1em;font-weight:800;font-size:.85rem;color:var(--orange-d);margin-bottom:4px!important}
.callout{background:var(--teal-l);border-radius:14px;padding:18px 22px;margin:22px 0}.callout-label{font-family:var(--hf);text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--teal-d);font-size:.85rem;margin:0 0 4px}
/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cards-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
.card-art svg{display:block;width:100%;height:auto}.card-b{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}.card-b h3{margin:0 0 .3em;font-size:1.3rem}.card-b p{font-size:.95rem;color:var(--muted);margin:0 0 .6em}
.more{margin-top:auto;font-weight:700;color:var(--orange-d);font-size:.92rem}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}.step{background:#fff;border-radius:var(--r);padding:20px;border:1px solid var(--line);position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:18px;background:var(--yellow);color:var(--navy);font-family:var(--hf);font-weight:800;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem}
.step h3{margin:.4em 0 .3em}.step p{font-size:.95rem;color:var(--muted);margin:0}
/* tables */
.table-wrap{overflow-x:auto;margin:18px 0 22px;border-radius:12px;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.97rem;background:#fff}th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--navy);color:#fff;font-family:var(--hf);font-size:1.05rem;letter-spacing:.03em;font-weight:700}tr:nth-child(even) td{background:#f7fbfc}
/* areas */
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;padding:0;margin:0}
.area-grid a{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 14px;text-decoration:none;font-weight:600;color:var(--navy)}.area-grid a:hover{border-color:var(--teal);background:var(--teal-l)}.area-grid .ic-sm{color:var(--teal)}
.area-grid li{margin:0}
/* faq */
.faq{display:grid;gap:10px}.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 18px}.faq-item summary{cursor:pointer;list-style:none;padding:14px 28px 14px 0;position:relative}
.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:"+";position:absolute;right:0;top:10px;font-size:1.6rem;color:var(--teal);font-weight:700}.faq-item[open] summary::after{content:"–"}
.faq-item h3{margin:0;font-size:1.22rem}.faq-a{padding:0 0 14px}.faq-a p:last-child{margin:0}
/* breadcrumbs */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:14px 22px 0;margin:0;font-size:.88rem;color:var(--muted)}.crumbs li{margin:0}.crumbs li+li::before{content:"/";margin-right:6px;color:#9fb3c2}.crumbs a{color:var(--muted)}
/* sidebar */
.side{position:sticky;top:100px;display:grid;gap:16px}.side-box{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:18px}.side-box h3{margin-top:0}.side-box ul{list-style:none;padding:0;margin:0}.side-box li{margin:0;border-bottom:1px solid var(--line)}.side-box li:last-child{border:0}.side-box li a{display:block;padding:8px 2px;text-decoration:none;font-weight:600}
.side-call{background:var(--navy);color:#fff;border-radius:var(--r);padding:20px;text-align:center}.side-call p{margin:.2em 0 .8em;color:#cfe3ee}.side-call b{font-family:var(--hf);font-size:1.5rem;display:block}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}.tags li{margin:0}.tags a{display:inline-block;background:var(--teal-l);border-radius:999px;padding:5px 12px;font-size:.88rem;text-decoration:none;font-weight:600;color:var(--navy)}.tags a:hover{background:var(--yellow-l)}
/* cta band */
.cta-band{background:linear-gradient(120deg,var(--navy-d),var(--roof));color:#fff;padding:44px 0}.cta-in{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}.cta-band h2{color:#fff;margin:.1em 0 .3em}.cta-band p{color:#cfe3ee;margin:0;max-width:640px}.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
/* footer */
.site-footer{background:#06192b;color:#b9cfdd;font-size:.95rem;padding:48px 0 90px}.site-footer a{color:#e3eef5;text-decoration:none}.site-footer a:hover{color:var(--yellow)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1.4fr 1fr;gap:28px}.fh{font-family:var(--hf);text-transform:uppercase;letter-spacing:.1em;color:#fff;font-weight:800;margin:0 0 .5em;font-size:1.05rem}.site-footer ul{list-style:none;padding:0;margin:0 0 1em}.site-footer li{margin:.25em 0}
.flogo img{background:#fff;border-radius:14px;padding:8px;width:150px}.nap{margin-top:12px}.cols2{columns:2}.fbottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:16px;font-size:.85rem}
.mbar{display:none}
/* blog */
.post-meta{color:var(--muted);font-size:.92rem}.post-card .card-b h3{font-size:1.25rem}
.toc{background:var(--tint);border-radius:12px;padding:14px 20px;margin:16px 0}.toc p{margin:0;font-weight:700}
/* responsive */
@media (max-width:1100px){.main-nav,.hdr-phone{display:none}.mnav{display:block;margin-left:auto}.hdr-cta{margin-left:auto}
.mnav summary{list-style:none;cursor:pointer;display:grid;gap:5px;padding:10px}.mnav summary::-webkit-details-marker{display:none}.mnav summary span{display:block;width:26px;height:3px;background:var(--navy);border-radius:2px}
.mnav-panel{position:absolute;left:0;right:0;top:100%;background:#fff;padding:16px 22px 24px;box-shadow:var(--shadow);max-height:80vh;overflow:auto;border-top:1px solid var(--line)}.mnav-panel ul{list-style:none;padding:0;margin:0}.mnav-panel li a{display:block;padding:7px 0;text-decoration:none;font-weight:600}.mnav-h{font-family:var(--hf);text-transform:uppercase;letter-spacing:.1em;color:var(--teal-d);font-weight:800;margin:14px 0 4px}
.cards{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr);row-gap:30px}.trust-grid{grid-template-columns:repeat(2,1fr)}.area-grid{grid-template-columns:repeat(3,1fr)}.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.hero-grid,.two-col{grid-template-columns:1fr}.hero-mascot{width:110px;top:-58px}.side{position:static}.cards-3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){body{font-size:17px}.topbar .tb-r{display:none}.hdr-cta{display:none}.lt1{font-size:1.12rem}.lt2{font-size:.9rem}.logo-mark{width:46px;height:46px}
.cards,.cards-3,.steps,.trust-grid{grid-template-columns:1fr}.area-grid{grid-template-columns:1fr 1fr}.qf-grid{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}.band{padding:46px 0}.hero-grid{padding-top:28px}
.mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:60;box-shadow:0 -4px 16px rgba(0,0,0,.18)}.mbar a{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px;font-family:var(--hf);font-weight:800;text-transform:uppercase;font-size:1.1rem;text-decoration:none;letter-spacing:.04em}.mbar-call{background:var(--orange);color:var(--navy-d)}.mbar-quote{background:var(--navy);color:#fff}}
/* fixes */
.hero-grid>*,.two-col>*{min-width:0}
.eyebrow+h1,.eyebrow+h2{margin-top:0}
.hdr-phone b{white-space:nowrap}
.faq-wrap{max-width:900px}
@media (max-width:1250px){.hdr-phone small{display:none}.nav-list>li>a{padding:10px 8px}}
@media (max-width:600px){.hero-mascot{right:6px;top:-50px;width:96px}.hero-btns .btn{flex:1 1 100%}.pill{font-size:.85rem}.qform{padding:20px 16px 16px}.qf-title{font-size:1.45rem}}
td{overflow-wrap:anywhere}
.logo{flex:none}.main-nav{flex:1 1 auto;display:flex;justify-content:flex-end;min-width:0}
.hdr-phone,.hdr-cta{flex:none}
@media (max-width:1300px){.nav-list>li>a{padding:10px 7px;font-size:.94rem}.lt1{font-size:1.2rem}.lt2{font-size:.95rem}}
@media (max-width:1180px){.main-nav,.hdr-phone{display:none}.mnav{display:block;margin-left:auto}.hdr-cta{margin-left:auto}}
.main-nav{min-width:auto;flex:0 1 auto;margin-left:auto}
/* open/closed status */
.status-top{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:#fff}.status-top .dot{width:9px;height:9px;border-radius:50%;background:#3fd18b;box-shadow:0 0 0 0 rgba(63,209,139,.6);animation:pulse 2s infinite}
.is-closed .dot{background:var(--yellow)!important;animation:none!important}
/* whatsapp */
.btn-wa{background:#25d366;color:#06331a}.btn-wa:hover{background:#1ebe5a;color:#06331a}
.wa-float{position:fixed;right:20px;bottom:22px;z-index:55;display:flex;align-items:center;gap:8px;background:#25d366;color:#06331a;text-decoration:none;font-family:var(--hf);font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:12px 18px 12px 14px;border-radius:999px;box-shadow:0 10px 24px -8px rgba(0,0,0,.35)}
.wa-float:hover{background:#1ebe5a;color:#06331a}
.mbar-wa{background:#25d366;color:#06331a}
@media (max-width:600px){.wa-float{display:none}.mbar{grid-template-columns:1fr 1fr 1fr}.mbar a{font-size:1rem;padding:14px 6px}}