/*
Theme Name: ZSP
Theme URI: https://www.zspkzn.co.za
Author: Zululand Service Providers
Description: Custom theme for Zululand Service Providers — department pages, a daily feed of curated videos and workshop photos, 24/7 contact.
Version: 3.9.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: zsp
*/

:root{--ink:#1A1A1A;--orange:#E8731C;--orange-text:#B4500A;--orange-light:#F59A4A;--paper:#F5F4F1;--line:#E4E1DA;--muted:#5E5A52;--green:#1F7A45}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Barlow',system-ui,sans-serif;font-size:17px;line-height:1.5}
a{color:var(--ink)}a:hover{color:var(--orange-text)}
img{max-width:100%;height:auto}
.wrap{max-width:1240px;margin:0 auto;padding-left:24px;padding-right:24px}
.display{font-family:'Barlow Condensed',sans-serif;font-weight:800;line-height:1;letter-spacing:-.01em}
.eyebrow{font-weight:700;color:var(--orange-text);letter-spacing:.12em;font-size:14px;margin-bottom:10px;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:6px;font-weight:700;text-decoration:none;border:2px solid transparent;line-height:1.2}
.btn-orange{background:var(--orange);color:var(--ink)}.btn-orange:hover{background:#F08A3A;color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#333;color:#fff}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:#196639;color:#fff}
.btn-ghost{border-color:#fff;color:#fff}.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-outline{border-color:var(--ink);color:var(--ink)}.btn-outline:hover{background:var(--ink);color:#fff}

/* top strip */
.strip{background:var(--ink);color:#fff;font-size:14px}
.strip .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.strip strong{letter-spacing:.04em}
.strip-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.strip a{color:#fff;text-decoration:none}.strip a.hl{color:var(--orange-light);font-weight:600}.strip a.wa{color:#7FE3A0;font-weight:600}
.strip a.fb,.site-footer a.fb{color:#9DBBFF;font-weight:600;display:inline-flex;align-items:center;gap:5px}

/* header */
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.brand{display:inline-flex;flex-direction:column;align-items:center;width:max-content;text-decoration:none}
.brand .brand-zsp{display:block;align-self:stretch;line-height:0}
.brand .brand-zsp svg{display:block;height:58px;width:100%}
.zsp-mark-header .zsp-shine{animation:zsp-hdr-shine 1.6s .5s cubic-bezier(.45,.05,.3,1) both}
.brand:hover .zsp-mark-header .zsp-shine{animation:zsp-hdr-shine 1s ease-out}
.brand .brand-bar{display:block;align-self:stretch;height:6px;margin:5px 0 4px;background:var(--orange);border-radius:1px;transform-origin:left;animation:zsp-draw .7s .15s cubic-bezier(.2,.8,.2,1) both}
.brand .brand-name{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.06em;line-height:1;white-space:nowrap;color:var(--ink)}
@keyframes zsp-hdr-shine{from{transform:skewX(-18deg) translateX(0)}to{transform:skewX(-18deg) translateX(420px)}}
@keyframes zsp-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.main-nav{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;font-weight:600}
.main-nav>a{text-decoration:none}
.main-nav .btn{padding:11px 18px}

/* hero */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;right:-80px;top:0;bottom:0;width:40%;background:var(--orange);transform:skewX(-14deg)}
.hero .wrap{position:relative;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;padding-top:26px;padding-bottom:64px}
.hero-side{margin-top:6px}
.hero-text{flex:1 1 440px;min-width:0}
.hero-side{flex:1 1 440px;min-width:0;max-width:540px;display:flex;flex-direction:column;gap:14px}
.hero-box{flex:0 0 auto;min-width:0;background:#fff;color:var(--ink);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero-box-lbl{background:var(--orange);color:var(--ink);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px}
.hero-tip-media{position:relative;display:block;aspect-ratio:16/9;background:#2B2B2B;overflow:hidden}
.hero-tip-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-tip-media .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hero-tip-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.hero-tip-body h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;line-height:1.1;margin:0}
.hero-tip-body h3 a{text-decoration:none;color:var(--ink)}
.hero .hero-tip-body p{margin:0;max-width:none;font-size:15px;color:#4A463F;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hero-tip-more{margin-top:auto;font-weight:700;font-size:15px;text-decoration:none;color:var(--orange-text)}
.hero-follow{background:#fff;color:var(--ink);border-radius:10px;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero-follow-txt{flex:1 1 200px;display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.3;color:var(--ink)}
.hero-follow-txt svg{color:#1877F2;flex:0 0 auto}
.hero-follow .fb-embed{flex:1 1 220px;min-width:180px;max-width:300px;line-height:0}
.hero-follow iframe{max-width:100%}
.btn-fb{background:#1877F2;color:#fff;padding:10px 18px}.btn-fb:hover{background:#0f63d0;color:#fff}
.hero-kicker{display:flex;align-items:center;gap:14px;white-space:nowrap;font-weight:800;color:var(--orange);letter-spacing:.13em;font-size:15px;margin-bottom:14px}
.hero-kicker:after{content:"";flex:0 1 110px;min-width:24px;height:4px;background:var(--orange);border-radius:2px}
.hero h1{font-size:clamp(34px,4.4vw,64px);margin:0 0 24px;line-height:.98}
.hero p{font-size:20px;color:#D9D6CF;margin:0 0 36px;max-width:560px}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px}

/* partners */
.partners{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:48px}
#supplier-updates{padding-top:48px}
.partners .wrap{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:center;justify-content:center;padding-top:28px;padding-bottom:28px}
.partners .lbl{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.partners a{display:block;line-height:0}
.partners .hint{display:block;margin-top:4px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted)}

/* supplier updates */
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.sup-card{background:#fff;border:2px solid var(--line);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.sup-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sup-head a:first-child{line-height:0}
.sup-visit{font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.sup-list{display:flex;flex-direction:column;gap:12px}
.sup-vid{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--ink)}
.sup-vid:hover{color:var(--orange-text)}
.sup-thumb{position:relative;flex:0 0 120px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#2B2B2B}
.sup-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sup-play{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--orange)}
.sup-play:after{content:"";position:absolute;left:12px;top:9px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--ink)}
.sup-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sup-txt strong{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sup-txt small{font-size:13px;color:var(--muted)}
.sup-more{margin-top:auto;font-size:14px;font-weight:700;text-decoration:none}
.sup-empty{margin:0;color:var(--muted);font-size:15px}
.sup-fb{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sup-fb small{font-size:13px;color:var(--muted)}
.sup-fb iframe{max-width:100%}
.vmodal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.vmodal[hidden]{display:none}
.vmodal-box{position:relative;width:100%;max-width:960px}
.vmodal-frame{aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.vmodal-frame iframe{width:100%;height:100%;border:0;display:block}
.vmodal-close{position:absolute;right:0;top:-44px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer}

/* attention-grabbing contact buttons */
.btn-wa{background:#25D366;color:#fff;border-radius:999px;box-shadow:0 3px 10px rgba(37,211,102,.35)}
.btn-wa:hover{background:#1EBE57;color:#fff}
.btn-call{border-radius:999px;box-shadow:0 3px 10px rgba(232,115,28,.35)}
.attn-hop{animation:zsp-hop 2.8s ease-in-out infinite}
.attn-late{animation-delay:1.4s}
.btn-call .ico-phone{animation:zsp-ring 2.8s ease-in-out infinite;animation-delay:1.4s;transform-origin:50% 50%}
@keyframes zsp-hop{0%,62%,100%{transform:translateY(0)}70%{transform:translateY(-6px)}78%{transform:translateY(0)}84%{transform:translateY(-3px)}90%{transform:translateY(0)}}
@keyframes zsp-ring{0%,60%,100%{transform:rotate(0)}64%,72%,80%{transform:rotate(-14deg)}68%,76%,84%{transform:rotate(14deg)}}
.btn-callout{position:relative;border-radius:999px;animation:zsp-glow 2.2s ease-out infinite}
.btn-callout svg{color:#25D366}
.btn-callout:hover svg{color:#1EBE57}
@keyframes zsp-glow{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.attn-hop:hover,.btn-callout:hover,.attn-hop:hover .ico-phone{animation-play-state:paused}
.wa-float{background:#25D366;animation:zsp-hop 2.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.attn-hop,.btn-call .ico-phone,.btn-callout,.wa-float{animation:none}}

/* WhatsApp "who are we speaking to?" form */
.wam{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.wam[hidden]{display:none}
.wam-box{position:relative;background:#fff;border-radius:14px;width:100%;max-width:440px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.35);margin:auto}
.wam-head{display:flex;gap:12px;align-items:center;color:#25D366;padding-right:28px}
.wam-head strong{display:block;color:var(--ink);font-size:18px}
.wam-head span{display:block;color:var(--muted);font-size:14px;line-height:1.35}
.wam-box label{display:block;font-weight:600;font-size:14px;color:var(--ink)}
.wam-box em{font-weight:400;color:var(--muted);font-style:normal}
.wam-box input,.wam-box select,.wam-box textarea{display:block;margin-top:4px;font:inherit;font-weight:400;font-size:16px;padding:10px 12px;border:2px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%}
.wam-box input:focus,.wam-box select:focus,.wam-box textarea:focus{outline:none;border-color:#25D366}
.wam-x{position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;background:none;font-size:28px;line-height:1;color:var(--muted);cursor:pointer}
.wam-go{justify-content:center;font-size:17px;margin-top:4px}
.wam-err{margin:0;color:#B42318;font-weight:600;font-size:14px}
.wam-note{margin:0;font-size:12.5px;color:var(--muted);text-align:center}

/* "Request a callout" choice + email form */
.callm-box{max-width:520px}
.callm-head{color:var(--orange-text)}
.callm-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;border-radius:12px;border:2px solid var(--line);background:#fff;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,transform .15s}
.callm-opt:hover{transform:translateY(-1px)}
.callm-opt strong{display:block;font-size:17px}
.callm-opt small{display:block;color:var(--muted);font-size:14px}
.callm-opt-wa{border-color:#25D366;color:#128C4A}.callm-opt-wa strong{color:var(--ink)}
.callm-opt-wa:hover{background:#F0FBF4}
.callm-opt-mail{border-color:var(--orange);color:var(--orange-text)}.callm-opt-mail strong{color:var(--ink)}
.callm-opt-mail:hover{background:#FFF6EE}
.callm-choose,.callm-form,.callm-done{display:flex;flex-direction:column;gap:12px}
.callm-choose[hidden],.callm-form[hidden],.callm-done[hidden]{display:none}
.callm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.callm-row{grid-template-columns:1fr}}
.callm-back{align-self:flex-start;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;padding:0}
.wam-box .callm-consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px}
.wam-box .callm-consent input{width:auto;margin-top:3px}
.callm-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.callm-send{justify-content:center;font-size:17px}
.callm-send[disabled]{opacity:.7;cursor:wait}
.callm-done{align-items:center;text-align:center;padding:12px 0}
.callm-tick{width:64px;height:64px;border-radius:50%;background:#25D366;color:#fff;font-size:36px;line-height:64px;font-weight:800}
.callm-done p{margin:0;font-size:16px}

/* bouncing "SALE" badges in the menu */
.site-header .wrap{row-gap:30px}
.main-nav{row-gap:26px}
.nav-sale{position:relative;font-weight:700;color:var(--orange-text)}
.nav-badge{position:absolute;left:50%;bottom:100%;margin-bottom:3px;transform:translateX(-50%);white-space:nowrap;background:#E11D2E;color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;line-height:1;padding:4px 7px;border-radius:999px;box-shadow:0 2px 6px rgba(225,29,46,.35);animation:zsp-bounce 1.4s ease-in-out infinite;pointer-events:none}
.nav-badge:after{content:"";position:absolute;left:50%;top:100%;margin-left:-4px;border:4px solid transparent;border-top-color:#E11D2E}
.nav-sale:nth-of-type(3) .nav-badge{animation-delay:.35s}
@keyframes zsp-bounce{0%,100%{transform:translate(-50%,0)}45%{transform:translate(-50%,-6px)}60%{transform:translate(-50%,-6px) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.nav-badge{animation:none}}
/* Phones/tablets: the menu wraps, so put the badge beside the link instead of above it. */
@media (max-width:900px){
	.site-header .wrap{row-gap:16px}
	.main-nav{row-gap:12px}
	.nav-sale{display:inline-flex;align-items:center;gap:7px}
	.nav-badge{position:static;order:2;margin:0;transform:none;font-size:10px;padding:4px 6px;animation-name:zsp-bounce-inline}
	.nav-badge:after,.nav-emoji{display:none}
}
@keyframes zsp-bounce-inline{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}60%{transform:translateY(-4px) scale(1.06)}}
body .wa-float{background:#25D366}

/* sales pages */
.sales-intro{background:#fff;border:2px solid var(--line);border-left:6px solid var(--orange);border-radius:10px;padding:22px 24px;margin-bottom:32px}
.sales-intro p{margin:0 0 16px;font-size:17px;max-width:820px}
.sales-btns{display:flex;flex-wrap:wrap;gap:12px}

/* department photos */
.dept-photo{display:block;margin:-26px -24px 4px;aspect-ratio:16/9;overflow:hidden;border-radius:8px 8px 0 0;background:#EDE9E1}
.dept-photo img{width:100%;height:100%;object-fit:cover;display:block}
.dept-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:56px}
.dg-item{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#2B2B2B;text-decoration:none}
.dg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.dg-item:hover img{transform:scale(1.04)}
.dg-item span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-weight:600;font-size:14px;line-height:1.25}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:56px 16px 16px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:1100px;width:100%;text-align:center;position:relative}
.lightbox img{max-width:100%;max-height:78vh;border-radius:8px;display:inline-block}
.lightbox figcaption{color:#fff;margin-top:10px;font-weight:600}
.lightbox .vmodal-close{position:absolute;right:16px;top:12px}

/* department equipment range */
.equip{margin-bottom:56px}
.equip-group{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;margin:28px 0 14px}
.equip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.equip-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:#fff;border:2px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.equip-card:hover{border-color:var(--ink);color:var(--ink)}
.equip-card strong{font-size:17px}
.equip-card span{font-size:14px;color:#4A463F}
.equip-card em{margin-top:auto;font-style:normal;font-weight:700;font-size:13px;color:var(--orange-text)}
.equip-feed-h{font-size:clamp(28px,3vw,38px);margin:0 0 20px}

/* sections */
.section{padding-top:80px;padding-bottom:40px}
.section-head{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:flex-end;justify-content:space-between;margin-bottom:32px}
.section-head h2,.section-head h1{font-size:clamp(36px,4vw,52px);margin:0}
.section-head p{margin:0;max-width:440px;color:#4A463F}

/* departments */
.dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.dept-card{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-radius:10px;min-height:240px;background:#fff;border:2px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.dept-card:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.dept-card svg{color:var(--orange-text)}
.dept-card h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;line-height:1.05;margin:0}
.dept-card p{margin:0;font-size:15px;color:#4A463F}
.dept-card .go{margin-top:auto;font-weight:700;font-size:15px}

/* feed */
.feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.card{background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.card:hover{color:var(--ink);border-color:#BDB8AD}
.card-media{aspect-ratio:16/9;position:relative;background:#2B2B2B;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-media .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.card-media.no-img{background:#EDE9E1}
.tag{position:absolute;left:12px;top:12px;font-size:12px;font-weight:700;letter-spacing:.06em;padding:5px 9px;border-radius:4px}
.tag-video{background:var(--ink);color:#fff}.tag-photo{background:var(--orange);color:var(--ink)}
.card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.card-dept{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--orange-text);text-transform:uppercase}
.card-body h3{margin:0;font-size:19px;line-height:1.3;font-weight:600}
.card-meta{font-size:14px;color:var(--muted)}
.empty{background:#fff;border:2px dashed var(--line);border-radius:10px;padding:40px 24px;text-align:center;color:var(--muted)}
.pager{display:flex;gap:12px;justify-content:center;margin-top:36px}

/* work band */
.band{background:var(--orange);margin-top:48px}
.band .wrap{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;padding-top:72px;padding-bottom:72px}
.band h2{font-size:clamp(34px,4vw,50px);margin:0 0 14px}
.band p{margin:0;font-size:18px;max-width:620px}

/* single */
.single{max-width:860px;margin:0 auto;padding:64px 24px}
.single h1{font-size:clamp(36px,5vw,56px);margin:8px 0 12px}
.single .entry{font-size:18px}
.single .entry iframe,.single .entry .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:10px}
.single .entry img{border-radius:10px}

/* footer */
.site-footer{background:var(--ink);color:#D9D6CF;font-size:15px}
.site-footer .cols{display:flex;flex-wrap:wrap;gap:40px;padding-top:72px;padding-bottom:32px}
.site-footer .col{flex:1 1 220px;min-width:0;line-height:1.8}
.site-footer .col:first-child{flex-basis:280px;line-height:1.6}
.site-footer h4{color:#fff;font-weight:700;letter-spacing:.08em;font-size:13px;margin:0 0 8px;text-transform:uppercase}
.site-footer h4+h4,.site-footer .col h4.gap{margin-top:16px}
.site-footer a{color:#D9D6CF;text-decoration:none}.site-footer a:hover{color:#fff}
.site-footer a.hl{color:var(--orange-light);font-weight:600}.site-footer a.wa{color:#7FE3A0;font-weight:600}
.foot-logo{height:48px;width:auto;display:block;margin-bottom:18px;background:#fff;padding:8px 12px;border-radius:6px}
.legal{border-top:1px solid #3A3A3A;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-top:20px;padding-bottom:32px;font-size:13px;color:#A8A49C}

/* floating whatsapp on phones */
.wa-float{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:50}
@media (max-width:700px){.wa-float{display:flex}.hero .wrap{padding-top:22px;padding-bottom:56px}.hero:before{width:25%;opacity:.9}.main-nav{gap:8px 16px}}

/* ===== v2.8.0: ZSP crew band (handyman dusting the ZSP sign), above Departments ===== */
.hero-text{align-self:stretch;display:flex;flex-direction:column}
.hero-text .hero-btns{margin-bottom:18px}
.crew-card{margin-top:auto;max-width:600px;background:#fff;color:var(--ink);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:10px 16px;display:flex;align-items:center;gap:16px}
.crew-scene{flex:0 0 31%;min-width:0}
.crew-scene>svg{display:block;width:100%;height:auto;overflow:visible}
.crew-text{flex:1 1 auto;min-width:0}
.crew-live{display:none;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text);margin-bottom:6px}
.crew-live:before{content:"";width:8px;height:8px;border-radius:50%;background:#25D366;animation:zh-live 2s infinite}
.hero .crew-slogan{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(18px,1.6vw,21px);line-height:1.08;color:var(--ink);margin:0 0 10px;max-width:none}
.crew-slogan span{display:block;color:var(--orange)}
.crew-btns{display:flex;flex-wrap:wrap;gap:8px}
.crew-btns .btn-sm{padding:7px 12px;font-size:13px;gap:6px}
.zh-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px}
.zsp-crew .zh-man{animation:zh-climb 12s ease-in-out infinite}
.zsp-crew .zh-arm{transform-box:view-box;transform-origin:315px 380px;animation:zh-scrub 12s ease-in-out infinite}
.zsp-crew .zh-leg-l{transform-box:view-box;transform-origin:324px 422px;animation:zh-step-l 12s linear infinite}
.zsp-crew .zh-leg-r{transform-box:view-box;transform-origin:338px 422px;animation:zh-step-r 12s linear infinite}
.zsp-crew .zh-dust{animation:zh-dust 12s ease-in-out infinite}
.zsp-crew .zsp-shine{animation:zh-shine 12s ease-in-out infinite}
.zsp-crew .zh-speck{opacity:0;animation:zh-fall 12s ease-in infinite}
.zsp-crew .zh-spark{opacity:0;transform-box:fill-box;transform-origin:center;animation:zh-spark 12s ease-out infinite}
.zsp-crew .zh-d2{animation-delay:.3s}.zsp-crew .zh-d3{animation-delay:.6s}.zsp-crew .zh-d4{animation-delay:.9s}.zsp-crew .zh-d5{animation-delay:1.2s}
@keyframes zh-climb{0%,8%{transform:translate(0,0)}32%,66%{transform:translate(-6px,-170px)}90%,100%{transform:translate(0,0)}}
@keyframes zh-scrub{0%,34%{transform:rotate(0)}38%{transform:rotate(-22deg)}42%{transform:rotate(14deg)}46%{transform:rotate(-24deg)}50%{transform:rotate(12deg)}54%{transform:rotate(-20deg)}58%{transform:rotate(16deg)}62%{transform:rotate(-10deg)}66%,100%{transform:rotate(0)}}
@keyframes zh-step-l{0%,8%{transform:rotate(0)}12%{transform:rotate(-14deg)}16%{transform:rotate(0)}20%{transform:rotate(-14deg)}24%{transform:rotate(0)}28%{transform:rotate(-14deg)}32%,66%{transform:rotate(0)}70%{transform:rotate(-14deg)}74%{transform:rotate(0)}78%{transform:rotate(-14deg)}82%{transform:rotate(0)}86%{transform:rotate(-14deg)}90%,100%{transform:rotate(0)}}
@keyframes zh-step-r{0%,10%{transform:rotate(0)}14%{transform:rotate(-14deg)}18%{transform:rotate(0)}22%{transform:rotate(-14deg)}26%{transform:rotate(0)}30%{transform:rotate(-14deg)}34%,68%{transform:rotate(0)}72%{transform:rotate(-14deg)}76%{transform:rotate(0)}80%{transform:rotate(-14deg)}84%{transform:rotate(0)}88%{transform:rotate(-14deg)}92%,100%{transform:rotate(0)}}
@keyframes zh-dust{0%,34%{opacity:.9}64%,94%{opacity:0}100%{opacity:.9}}
@keyframes zh-shine{0%,62%{transform:skewX(-18deg) translateX(0)}78%,100%{transform:skewX(-18deg) translateX(420px)}}
@keyframes zh-fall{0%,36%{opacity:0;transform:translateY(0)}40%{opacity:1}62%{opacity:0;transform:translateY(190px)}100%{opacity:0;transform:translateY(190px)}}
@keyframes zh-spark{0%,64%{opacity:0;transform:scale(.2) rotate(0)}70%{opacity:1;transform:scale(1.15) rotate(45deg)}80%{opacity:0;transform:scale(.4) rotate(90deg)}100%{opacity:0}}
@keyframes zh-live{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media (max-width:700px){
  .brand .brand-zsp svg{height:46px}.brand .brand-name{font-size:13px}
  .hero-kicker{font-size:11.5px;letter-spacing:.08em;gap:8px}.hero-kicker:after{flex-basis:30px}
  .crew-card{flex-direction:column;align-items:stretch;gap:10px}.crew-scene{flex-basis:auto;max-width:300px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .zsp-crew *,.crew-live:before,.zsp-mark *,.brand .brand-bar{animation:none!important}
  .zsp-crew .zh-dust{opacity:0}
}

/* ===== v2.9.0: smoother headline font ===== */
.hero h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.02em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ===== v2.9.0: Bakkie lane (header, beside the logo) ===== */
.bakkie-lane{flex:1 1 520px;min-width:0;align-self:stretch;display:flex;align-items:flex-end;gap:20px}
.lane-cta{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);padding-bottom:6px}
.lane-cta:hover{color:var(--ink)}
.lane-big{font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;line-height:1.1;letter-spacing:-.01em}
.lane-num{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--orange-text)}
.lane-cta:hover .lane-num{text-decoration:underline}
.lane-road{position:relative;flex:1 1 auto;min-width:240px;height:104px;overflow:hidden}
.lane-line{position:absolute;left:0;right:0;bottom:2px;height:3px;background:repeating-linear-gradient(90deg,#DCD6CB 0 18px,transparent 18px 30px)}
.bk{position:absolute;bottom:2px;left:-210px;width:182px;animation:bk-drive 11s ease-in-out infinite}
.bk-svg{display:block;width:182px;height:auto;overflow:visible}
.bk-zsp{font-family:"Poppins",sans-serif;font-weight:800;font-size:12px;fill:#1A1A1A}
.bk-wheel{transform-box:fill-box;transform-origin:center;animation:bk-spin 11s ease-in-out infinite}
.bk-body{animation:bk-bob .32s ease-in-out infinite alternate}
.bk-puff{opacity:0;transform-box:fill-box;transform-origin:center;animation:bk-puff 1s ease-out infinite}
.bk-p2{animation-delay:.33s}.bk-p3{animation-delay:.66s}
.bk-bubble{position:absolute;left:96px;top:-3px;background:var(--orange);color:#fff;font-family:'Poppins',sans-serif;font-weight:800;font-size:13px;line-height:1;padding:7px 11px;border-radius:14px;white-space:nowrap;transform-origin:20% 100%;opacity:0;transform:scale(0);animation:bk-bubble 11s ease-out infinite;z-index:2}
.bk-bubble:after{content:"";position:absolute;left:16px;bottom:-6px;border:6px solid transparent;border-top-color:var(--orange);border-bottom:0}
.lane-road .bk{top:auto}
@keyframes bk-drive{0%{left:-210px}26%{left:calc(50% - 91px)}62%{left:calc(50% - 91px)}88%,100%{left:calc(100% + 20px)}}
@keyframes bk-spin{0%{transform:rotate(0)}26%{transform:rotate(900deg)}62%{transform:rotate(900deg)}88%,100%{transform:rotate(1800deg)}}
@keyframes bk-bob{from{transform:translateY(0)}to{transform:translateY(-1.2px)}}
@keyframes bk-puff{0%{opacity:.95;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-26px,-16px) scale(2.2)}}
@keyframes bk-bubble{0%,27%{opacity:0;transform:scale(0)}31%{opacity:1;transform:scale(1.15)}34%,57%{opacity:1;transform:scale(1)}61%,100%{opacity:0;transform:scale(0)}}
@media (max-width:900px){.bakkie-lane{display:none}}
@media (prefers-reduced-motion:reduce){
  .bk,.bk-wheel,.bk-body,.bk-puff,.bk-bubble{animation:none!important}
  .bk{left:calc(50% - 91px)}.bk-bubble{opacity:1;transform:none}
}

/* ===== v3.0.0: phone layout (desktop unchanged) ===== */
.m-only{display:none}
@media (max-width:700px){
  /* top bar gone: ZSP sits at the very top */
  .strip{display:none}
  .site-header .wrap{padding-top:12px;padding-bottom:14px;row-gap:12px}
  /* bakkie races along the logo line */
  .bakkie-lane{display:flex;flex:1 1 120px;align-self:center;gap:0}
  .lane-cta{display:none}
  .lane-road{min-width:0;height:58px}
  .bk{width:98px;left:-110px;animation:bk-race 7s linear infinite}
  .bk-svg{width:98px}
  .bk-bubble{display:none}
  .bk-wheel{animation:bk-spin-m .5s linear infinite}
  .lane-line{bottom:1px;height:2px}
  /* nav: links in a row, the two buttons side by side, number line spanning both */
  .main-nav{gap:8px 14px;font-size:15px}
  .main-nav .btn-wa,.main-nav .btn-call{flex:1 1 calc(50% - 7px);justify-content:center;padding:11px 10px}
  .m-allhours{display:block;flex:1 1 100%;text-align:center;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;background:#F5F4F1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:-2px}
  .m-allhours strong{color:var(--orange-text);font-weight:800;white-space:nowrap}
  /* hero: kicker, 24/7 line, headline, department tiles */
  .hero .wrap{padding-top:18px}
  .hero-kicker{margin-bottom:6px}
  .m-247{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#D9D6CF;margin:0 0 12px}
  .hero h1{margin-bottom:16px}
  .m-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 20px}
  .m-tiles a{display:flex;align-items:center;min-height:48px;padding:8px 12px;background:#2B2B2B;border:1px solid #3A3A3A;border-left:4px solid var(--orange);border-radius:8px;color:#fff;font-weight:700;font-size:14px;line-height:1.2;text-decoration:none}
  .m-tiles a:active,.m-tiles a:hover{background:#333;color:#fff}
  .m-tiles a:last-child:nth-child(odd){grid-column:1 / -1}
  .hero p{font-size:16px;margin-bottom:22px}
}
@keyframes bk-race{0%{left:-110px}55%{left:100%}100%{left:100%}}
@keyframes bk-spin-m{to{transform:rotate(360deg)}}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.bk{left:calc(50% - 49px)}}

/* ===== v3.1.0: phone layout, round two ===== */
@media (max-width:700px){
  /* header: departments + sales move to the hero tiles; Call 24/7 full width, then WhatsApp + Request a callout, then the number line */
  .main-nav .nav-depts,.main-nav .nav-sale{display:none}
  .main-nav .btn-call{order:1;flex:1 1 100%}
  .main-nav .btn-wa{order:2;flex:1 1 calc(50% - 5px)}
  .main-nav .m-callout{display:inline-flex;order:3;flex:1 1 calc(50% - 5px);justify-content:center;padding:11px 10px;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:999px;font-weight:700}
  .main-nav .m-callout svg{color:#25D366}
  .main-nav .m-allhours{order:4}
  .main-nav .nav-tips,.main-nav .nav-contact{order:5;font-size:14px}
  .main-nav{column-gap:10px}
  /* hero: kicker, 24/7, Departments heading + tiles, then the headline */
  .m-depts{display:block;margin:4px 0 22px}
  .m-depts-h{font-family:'Poppins',sans-serif;font-weight:800;font-size:24px;line-height:1;color:#fff;margin:0 0 12px}
  .m-depts .m-tiles{margin:0}
  .m-tiles-sale{margin-top:8px!important}
  .m-tiles-sale a{position:relative;background:#3A2414;border-color:#5A3518;padding-top:16px}
  .m-tiles-sale a:last-child:nth-child(odd){grid-column:auto}
  .m-badge{position:absolute;top:-9px;right:8px;background:#E0182D;color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 7px;border-radius:999px;animation:zsp-bounce-inline 1.6s ease-in-out infinite}
  .hero h1{font-size:30px;margin-bottom:14px}
  .hero-btns{display:none}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.m-badge{animation:none}}

/* ===== v3.2.0: phone Departments tiles move into the header, straight under the logo ===== */
@media (max-width:700px){
  .site-header .m-depts{display:block;flex:1 1 100%;margin:2px 0 4px}
  .site-header .m-depts-h{color:var(--ink);font-size:20px;margin-bottom:10px}
  .site-header .m-tiles a{background:#F5F4F1;border:1px solid var(--line);border-left:4px solid var(--orange);color:var(--ink)}
  .site-header .m-tiles a:hover,.site-header .m-tiles a:active{background:#EDE9E1;color:var(--ink)}
  .site-header .m-tiles-sale a{background:#FFF1E6;border-color:#F6D2B4;border-left-color:#E0182D;color:var(--ink)}
}

/* ===== v3.3.0: phone header buttons: Request a callout on top, then Call 24/7 (left) + WhatsApp us (right) ===== */
@media (max-width:700px){
  .main-nav .m-callout{order:1;flex:1 1 100%;background:var(--ink);color:#fff;border-color:var(--ink);padding:12px 10px;font-size:16px}
  .main-nav .m-callout:hover{color:#fff}
  .main-nav .btn-call{order:2;flex:1 1 calc(50% - 5px)}
  .main-nav .btn-wa{order:3;flex:1 1 calc(50% - 5px)}
}

/* v3.3.0: phone: office + WhatsApp numbers under the bakkie's road; the full-width number box is removed */
@media (max-width:700px){
  .bakkie-lane{flex-direction:column;align-items:stretch;justify-content:flex-end}
  .bakkie-lane{align-self:flex-start}
  .site-header .brand{align-self:flex-start}
  .lane-road{flex:0 0 auto;height:56px}
  .lane-nums{display:flex;flex-direction:column;gap:3px;padding:6px 0 0 4px}
  .lane-nums a{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
  .lane-nums a span{color:var(--muted);font-weight:600}
  .lane-nums a svg{color:var(--orange-text);flex:0 0 auto}
  .lane-nums a.wa svg{color:#1EBE57}
  .main-nav .m-allhours{display:none}
  .site-header .wrap{column-gap:12px}
  .bakkie-lane{flex:1 1 0;min-width:0}
}
@media (max-width:389px){.lane-nums a span{display:none}.lane-nums a{font-size:12.5px}}

/* v3.3.0: phone bakkie stops halfway with "On the way!", then drives on */
@media (max-width:700px){
  .lane-road{overflow:visible;clip-path:inset(-40px 0 0 0)}
  .bk{width:82px;left:-100px;animation:bk-race-stop 9s ease-in-out infinite}
  .bk-svg{width:82px}
  .bk-wheel{animation:bk-spin-stop 9s ease-in-out infinite}
  .bk-bubble{display:block;left:50%;top:-21px;width:78px;margin-left:-39px;text-align:center;font-size:10px;padding:4px 0;border-radius:10px;transform-origin:50% 100%;animation:bk-bubble-m 9s ease-out infinite}
  .bk-bubble:after{left:50%;margin-left:-5px;bottom:-5px;border-width:5px}
}
@keyframes bk-race-stop{0%{left:-100px}28%{left:calc(50% - 41px)}58%{left:calc(50% - 41px)}88%,100%{left:calc(100% + 10px)}}
@keyframes bk-spin-stop{0%{transform:rotate(0)}28%{transform:rotate(720deg)}58%{transform:rotate(720deg)}88%,100%{transform:rotate(1440deg)}}
@keyframes bk-bubble-m{0%,29%{opacity:0;transform:scale(0)}33%{opacity:1;transform:scale(1.15)}36%,54%{opacity:1;transform:scale(1)}57%,100%{opacity:0;transform:scale(0)}}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.bk{left:calc(50% - 41px)}.bk-bubble{opacity:1;transform:none}}
@media (max-width:700px){
  /* Departments heading rises under the logo, so the first tiles start just under the WhatsApp number */
  .site-header .m-depts{margin-top:-34px;position:relative;z-index:1}
  .site-header .m-depts-h{max-width:52%}
}

/* v3.3.1: phone: no sideways scroll while the bakkie is off the road; no crew card; tip of the day straight under the intro text */
@media (max-width:700px){
  .lane-road{overflow-x:clip;overflow-y:visible}
  .hero .crew-card{display:none}
  .hero .wrap{row-gap:20px}
  .hero p{margin-bottom:0}
  .hero-side{margin-top:0}
  .main-nav .nav-tips,.main-nav .nav-contact{display:none}
}

/* ===== v3.4.0: desktop Departments bar (header row 2): big Departments tile + department/sales tiles ===== */
.dept-bar{display:none}
@media (min-width:701px){
  .site-header .wrap{row-gap:16px}
  .dept-bar{display:flex;flex:1 1 100%;align-items:stretch;gap:14px}
  .dept-bar-h{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 28px;background:var(--orange);color:var(--ink);font-family:'Poppins',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.01em;text-decoration:none;border-radius:14px;box-shadow:0 3px 10px rgba(232,115,28,.35)}
  .dept-bar-h:hover{background:#F08A3A;color:var(--ink)}
  .dept-tiles{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 8px}
  .dept-tiles a{position:relative;display:flex;align-items:center;min-height:46px;padding:8px 12px;background:#F5F4F1;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:8px;color:var(--ink);font-weight:700;font-size:14px;line-height:1.2;text-decoration:none;transition:background .15s}
  .dept-tiles a:hover{background:#EDE9E1;color:var(--ink)}
  .dept-tiles a.dept-sale{background:#FFF1E6;border-color:#F6D2B4;border-left-color:#E0182D}
  .dept-tiles a.dept-sale:hover{background:#FFE6D2}
  .dept-badge{position:absolute;top:-9px;right:8px;background:#E0182D;color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;line-height:1;padding:3px 7px;border-radius:999px;animation:zsp-bounce-inline 1.6s ease-in-out infinite}
  /* the tiles replace these menu links; the rest of the menu sits on its own row, right-aligned */
  .main-nav .nav-depts,.main-nav .nav-sale{display:none}
  .main-nav{margin-left:auto;row-gap:12px}
}
@media (min-width:701px) and (max-width:999px){.dept-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.dept-badge{animation:none}}

/* ===== v3.5.0: desktop contact row (header row 3: three equal tiles) + Handyman Tips link above Tip of the day ===== */
.contact-bar,.tips-link{display:none}
@media (min-width:701px){
  .site-header .main-nav{display:none}
  .contact-bar{display:grid;flex:1 1 100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .contact-bar>a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 16px;border:0;border-radius:14px;font-family:'Poppins',sans-serif;font-weight:800;font-size:20px;line-height:1.1;text-decoration:none;white-space:nowrap}
  .contact-bar .callout-tile{background:var(--ink);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.3)}
  .contact-bar .callout-tile svg{color:#25D366;flex:0 0 auto}
  .contact-bar .callout-tile:hover{background:#333;color:#fff}
  .contact-bar .btn-wa{animation-delay:.7s}
  .tips-link{display:flex;align-items:center;justify-content:space-between;background:#fff;color:var(--ink);border-radius:10px;padding:10px 16px;font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .tips-link span{color:var(--orange-text);font-size:22px;line-height:1}
  .tips-link:hover{color:var(--orange-text)}
}
@media (min-width:701px) and (max-width:999px){.contact-bar>a{font-size:16px;gap:7px;padding:0 10px}}
@media (prefers-reduced-motion:reduce){.contact-bar .attn-hop{animation:none}}

/* ===== v3.6.0: desktop hero: no hero buttons; handyman card straight under the intro text with the Facebook box under it (left),
   its bottom level with Tip of the day (right); tighter spacing. Phones unchanged. ===== */
.hero-tipcol{display:flex;flex-direction:column;gap:14px}
@media (min-width:1000px){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);grid-template-rows:1fr auto;column-gap:40px;row-gap:14px;align-items:start;padding-bottom:40px}
  .hero-side{display:contents}
  .hero-text{grid-column:1;grid-row:1;align-self:stretch}
  .hero p{margin-bottom:22px}
  .hero .crew-card{margin-top:auto}
  .hero-tipcol{grid-column:2;grid-row:1 / 3;align-self:end}
  .hero-follow{grid-column:1;grid-row:2;align-self:end;max-width:600px}
  #departments{padding-top:48px}
}

/* ===== v3.7.0: desktop: supplier logos strip moves to the top, straight under the header; phones keep it lower down ===== */
@media (min-width:701px){
  .partners-low{display:none}
  .partners-top{margin-top:0;border-top:0}
  .partners-top .wrap{padding-top:20px;padding-bottom:20px}
}
@media (max-width:700px){.partners-top{display:none}}

/* ===== v3.8.0: supplier logos: Combustion Technology added (its logo has white text, so it sits on a dark tile, as on its own site);
   bolder "Accredited service provider for" label with the hint line justified to the same width (desktop) ===== */
.partners a.logo-dark{background:var(--ink);border-radius:8px;padding:8px 12px}
@media (min-width:701px){
  .partners .lbl{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.08em}
  .partners .hint{margin-top:5px;font-size:14px;font-weight:700;letter-spacing:.055em;color:var(--orange-text);text-align:justify;text-align-last:justify}
  .partners .wrap{column-gap:36px}
}

/* ===== v3.8.2: desktop logos strip: label on the left, the five logos spread out in ONE line, scaled down on smaller screens ===== */
@media (min-width:701px){
  .partners-top .wrap{--lg:1;flex-wrap:nowrap;justify-content:space-between;column-gap:16px}
  .partners-top .lbl,.partners-top a{flex:0 0 auto}
  .partners-top a:nth-of-type(1) img{height:calc(52px*var(--lg))!important}
  .partners-top a:nth-of-type(2) img{height:calc(40px*var(--lg))!important}
  .partners-top a:nth-of-type(3) img{height:calc(36px*var(--lg))!important}
  .partners-top a:nth-of-type(4) img{height:calc(34px*var(--lg))!important}
  .partners-top a:nth-of-type(5) img{height:calc(36px*var(--lg))!important}
  .partners-top a.logo-dark{padding:calc(8px*var(--lg)) calc(12px*var(--lg))}
}
@media (min-width:1000px) and (max-width:1199px){.partners-top .wrap{--lg:.82}}
@media (min-width:701px) and (max-width:999px){.partners-top .wrap{--lg:.5}.partners-top .lbl{font-size:12px}.partners-top .hint{font-size:10.5px}}

/* ===== v3.9.0: phones: the supplier logos strip (with Combustion Technology) moves up, straight under Call 24/7 + WhatsApp us ===== */
@media (max-width:700px){
  .partners-low{display:none}
  .partners-top{display:block;margin-top:0;border-top:0}
  .partners-top .wrap{--lg:.72;padding-top:14px;padding-bottom:16px;gap:12px 22px}
  .partners-top .lbl{flex:1 1 100%;text-align:center;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.08em}
  .partners-top .hint{margin-top:3px;font-size:12px;font-weight:700;color:var(--orange-text)}
  .partners-top a:nth-of-type(1) img{height:calc(52px*var(--lg))!important}
  .partners-top a:nth-of-type(2) img{height:calc(40px*var(--lg))!important}
  .partners-top a:nth-of-type(3) img{height:calc(36px*var(--lg))!important}
  .partners-top a:nth-of-type(4) img{height:calc(34px*var(--lg))!important}
  .partners-top a:nth-of-type(5) img{height:calc(36px*var(--lg))!important}
  .partners-top a.logo-dark{padding:calc(8px*var(--lg)) calc(12px*var(--lg))}
}
@media (max-width:380px){.partners-top .wrap{--lg:.62;column-gap:18px}}

/* ===== v3.9.1: phones: "Click a supplier's logo..." moves under the logos, inside the white box ===== */
@media (max-width:700px){
  .partners-top .wrap{position:relative;padding-bottom:42px}
  .partners-top .hint{position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center}
}

/* ===== v3.9.2: desktop: "We're one call away" centred vertically beside the ZSP logo block and the bakkie ===== */
@media (min-width:901px){.lane-cta{align-self:center;padding-bottom:0}}

/* ===== v3.9.3: waving man (desktop only) ===== */
.tu{position:relative;z-index:2;width:96px;height:auto;margin-left:-6px;margin-bottom:-18px;overflow:visible}
.tu-body{animation:tu-lean 4.2s ease-in-out infinite;transform-box:view-box;transform-origin:60px 150px}
.tu-arm{transform-box:view-box;transform-origin:76px 78px}
.tu-fore{transform-box:view-box;transform-origin:94px 70px;animation:tu-wave 1.1s ease-in-out infinite alternate}
@keyframes tu-wave{from{transform:rotate(-18deg)}to{transform:rotate(16deg)}}
@keyframes tu-lean{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-3.5deg)}}
/* In the header Departments tiles (homepage): scaled to the free space beside the Second-hand tile, feet on its baseline,
   pushing hand on its right edge, clear of the Solar Geysers tile above; the -12px top margin stops him making the row taller.
   Hidden below 1000px (no free space there). */
.dept-tiles .tu{width:48px;margin:-12px 0 -2px -9px;align-self:end;justify-self:start;pointer-events:none}
@media (max-width:999px){.tu{display:none}}
@media (prefers-reduced-motion:reduce){.tu-body,.tu-fore{animation:none}}