/* 123 Plumber Pretoria: first red and logo-blue palette. */

/* Click/tap dropdowns: positioned panels keep the desktop header stationary. */
.nav-dropdown{position:relative}
.nav-dropdown>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:14px;font-weight:700;color:#20293a;white-space:nowrap;border-radius:8px}
.nav-dropdown>summary::-webkit-details-marker{display:none}
.nav-dropdown__chevron{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.nav-dropdown[open]>summary .nav-dropdown__chevron{transform:rotate(225deg);margin-top:4px}
.nav-dropdown>summary:hover,.nav-dropdown>summary:focus-visible,.nav-dropdown[open]>summary{color:var(--brand-blue)}
.nav-dropdown>.nav-dropdown__panel{position:absolute;top:calc(100% + 10px);left:-16px;z-index:110;width:290px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 180px);overflow-y:auto;list-style:none;padding:8px;margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 42px rgba(16,24,41,.16)}
.site-header .nav-dropdown__panel a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:8px;white-space:normal;line-height:1.4;color:var(--ink)}
.site-header .nav-dropdown__panel a:hover,.site-header .nav-dropdown__panel a:focus-visible{background:var(--brand-blue);color:#fff;outline-offset:-3px}
.nav-dropdown__all{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.site-header .nav-dropdown__all a{color:#003cd1}
@media(max-width:820px){
 .nav-dropdown>summary{padding:12px 13px;justify-content:space-between}
 .nav-dropdown>.nav-dropdown__panel{position:static;width:100%;max-width:none;max-height:none;overflow:visible;margin:0 0 8px;padding:4px;background:#f5f7fc;box-shadow:none}
 .site-header .nav-dropdown__panel a{padding:12px}
 .site-header .nav{transform:none;transition:opacity .15s,visibility .15s}
}


/* Service-page region and suburb selection. */
.service-coverage .service-coverage__region summary{transition:background-color .18s,color .18s}
.service-coverage .service-coverage__region ul{list-style:none;padding-left:0}
.service-coverage .service-coverage__region li{margin:0}
.service-coverage .service-coverage__region a{display:block;padding:12px 14px;border:1px solid #cbd8f7;border-radius:10px;background:#fff;color:#003cd1;text-decoration:none;line-height:1.5;transition:background-color .18s,color .18s,border-color .18s}
.service-coverage .service-coverage__region summary:focus-visible,
.service-coverage .service-coverage__region a:focus-visible{background:var(--brand-blue);color:#fff;outline:2px solid #fff;outline-offset:-5px}
@media(hover:hover){
 .service-coverage .service-coverage__region summary:hover,
 .service-coverage .service-coverage__region a:hover{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}
}
.service-coverage .service-coverage__region a:active{background:var(--brand-blue);color:#fff}
@media(prefers-reduced-motion:reduce){.service-coverage .service-coverage__region summary,.service-coverage .service-coverage__region a{transition:none}}


/* Equal service cards; highlight the card being explored. */
.service-grid .service-card{position:relative}
.service-grid .service-card>a:after{content:"";position:absolute;inset:0;border-radius:20px}
.service-grid .service-card:focus-within{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.service-grid .service-card:focus-within h3,.service-grid .service-card:focus-within p,.service-grid .service-card:focus-within>a{color:#fff}
.service-grid .service-card:focus-within .service-card__icon{background:rgba(255,255,255,.17);color:#fff}
@media(hover:hover){
 .service-grid .service-card:hover{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
 .service-grid .service-card:hover h3,.service-grid .service-card:hover p,.service-grid .service-card:hover>a{color:#fff}
 .service-grid .service-card:hover .service-card__icon{background:rgba(255,255,255,.17);color:#fff}
}
.coverage-panel{background:#102653;border:1px solid #6685bc;border-radius:26px;padding:26px;box-shadow:0 24px 50px rgba(0,12,50,.16)}
.coverage-panel__heading>span{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#d5e3ff}
.coverage-panel__heading h3{font-size:25px;line-height:1.2;margin:10px 0;color:#fff}
.coverage-panel__heading p{font-size:13px;color:#d5e3ff;margin:0 0 20px}
.coverage-panel__region{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;gap:12px;align-items:center;padding:13px 0;border-top:1px solid #405b88;color:#fff}
.coverage-panel__region>span:nth-child(2){display:flex;flex-direction:column;gap:3px}
.coverage-panel__region strong{font-size:15px}
.coverage-panel__region small{font-size:11px;line-height:1.5;color:#d5e3ff}
.coverage-panel__pin{display:grid;place-items:center;width:36px;height:36px;background:#253e69;border-radius:10px}
.coverage-panel__pin svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.8}
.coverage-panel__region:hover strong{text-decoration:underline;text-underline-offset:4px}
.coverage-panel__region:hover .coverage-panel__pin{background:var(--action-red)}
.coverage-panel__note{border-top:1px solid #405b88;padding-top:16px;margin:0;font-size:12px;color:#d5e3ff}
@media(max-width:540px){.coverage-panel{padding:20px}.coverage-panel__region small{font-size:12px}}
@media(prefers-reduced-motion:reduce){.service-grid .service-card{transition:none}.service-grid .service-card:hover{transform:none}}

:root{
 --brand-blue:#0048f8;--brand-red:#f82028;--action-red:#d41424;
 --navy:#101829;--navy2:#18233a;--blue:#0048f8;--cyan:#b8cdff;
 --sky:#edf2ff;--mist:#f5f7fc;--ink:#171c27;--muted:#586274;--line:#dce3f0;
}
body{color:var(--ink)}
.topbar{background:#111827;color:#fff;border-bottom:3px solid var(--brand-red)}
.topbar__trust{color:#e0e7f7}
.topbar__trust span+span{border-color:#6b7890}
.site-header{border-bottom-color:#dde5f4}
.nav__list a{color:#20293a}
.nav__list a:hover,.nav__list a:focus-visible{color:var(--blue)}
.header__phone .icon{background:#edf2ff;color:var(--blue)}
.header__phone strong{color:#17233a}
.hero,.page-hero{background:linear-gradient(120deg,#102650 0%,#073cbb 62%,var(--brand-blue) 100%);color:#fff}
.hero__glow--one,.page-hero:after{background:#417cff}
.hero__glow--two{background:var(--brand-red)}
.hero h1 em{color:#fff}
.hero__lead,.page-hero p{color:#ecf1ff}
.eyebrow{color:#dae5ff}
.eyebrow span{background:var(--brand-red);height:3px}
.eyebrow--dark{color:#4d5e7a}
.hero__trust{color:#e0eaff;border-color:#6688d0}
.hero__trust svg{stroke:#c9dcff}
.btn--primary{background:var(--action-red);color:#fff;border-color:var(--action-red);box-shadow:0 10px 24px rgba(150,12,30,.2)}
.btn--primary:hover{background:#b90f1f;border-color:#b90f1f;box-shadow:0 14px 28px rgba(150,12,30,.28)}
.btn--ghost{background:rgba(255,255,255,.08);border-color:#a5bbed;color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.18)}
.btn--dark{background:var(--blue)}
.btn--outline{border-color:#a4b8ea;color:#073bbc}
.btn--light{color:#10254a}
.btn--whatsapp{background:#087e50;color:#fff}
.btn--whatsapp:hover{background:#066740}
.service-picker{background:#102653;border-color:#6685bc;box-shadow:0 24px 50px rgba(0,12,50,.22)}
.service-picker__eyebrow{color:#dae5ff!important}
.service-picker>p{color:#e1e9fa}
.service-picker__grid>a{background:#1c396c;border-color:#657eab}
.service-picker__grid>a:hover{background:#254c8d;border-color:#bacfff}
.service-picker__icon{color:#d2e1ff}
.service-picker__bottom{border-color:#6685bc;color:#fff}
.service-jumps a{color:#fff}
.trust-strip strong{color:#162747}
.trust-strip span{color:#566782}
.section--services,.section--faq{background:#f5f7fc}
.service-card{border-color:#dce3f0}
.service-card p{color:#566578}
.service-card__icon{background:#edf2ff;color:var(--blue)}
.service-card--feature{background:linear-gradient(135deg,#123270,#0048f8);border-color:transparent}
.service-card--feature p{color:#e3ebff}
.service-card--feature .service-card__icon{background:rgba(255,255,255,.13);color:#fff}
.service-card--feature>a{color:#fff}
.service-card:hover{border-color:#a3bbfb}
.text-link,.service-card>a,.prose a,.post-card>a{color:#003cd1}
.service-card--feature>a{color:#fff}
.check-list li>svg{background:#edf2ff;color:var(--blue)}
.step-card>span{background:#edf2ff;border-color:#c6d5fb;color:#003cd1}
.section--areas{background:linear-gradient(125deg,#111e39,#073da9);color:#fff}
.areas__content>p{color:#e0e9fc}
.area-chips a{color:#fff;border-color:#7490c1;background:rgba(255,255,255,.08)}
.area-chips span{color:#d7e5ff}
.areas__map-card{background:#122b55;border-color:#6685bc}
.map-ring{border-color:rgba(165,193,255,.4)}
.map-pin i{background:var(--brand-red);box-shadow:0 0 0 5px rgba(248,32,40,.14)}
.map-label{background:#101e39}
.map-label span{color:#c7d7ef}
.accordion details{border-color:#dce3f0}
.accordion details div,.faq__intro p{color:#53657a}
.accordion details[open]{border-color:#a3bbfb}
.accordion summary span{color:#003cd1}
.cta-panel{background:linear-gradient(115deg,#0734a2,var(--brand-blue));box-shadow:0 22px 48px rgba(0,72,248,.2);border-top:4px solid var(--brand-red)}
.cta-panel p{color:#e4ecff}
.site-footer{background:#101620;color:#c1ccde;border-top:4px solid var(--brand-blue)}
.site-footer .btn--light{color:#10254a}
.footer__badges svg{stroke:#adc6ff}
.footer__small,.footer__bottom{color:#b6c2d6}
.footer__bottom{border-color:#445168}
.page-hero__icon{color:#d7e5ff;border-color:#8aa6df;background:rgba(255,255,255,.1)}
.prose{color:#354356}
.prose h2,.prose h3{color:#12264b}
.side-cta{background:#f0f4ff;border-color:#cbd8f7}
.side-cta p{color:#53657a}
.service-coverage__region{background:#f5f7fc;border-color:#dce3f0}
.service-coverage__region summary{color:#12264b}
.mobile-cta a:first-child{background:var(--action-red);color:#fff}
.mobile-cta a:first-child svg{stroke:#fff}
.mobile-cta__wa{color:#087e50!important}
.wa-dot{color:#087e50}
:where(a,button,summary):focus-visible{outline:3px solid #003cd1;outline-offset:4px}
.hero :focus-visible,.page-hero :focus-visible,.section--areas :focus-visible,.site-footer :focus-visible{outline-color:#fff}

/* Red interaction states on blue surfaces. */
.hero .service-picker__bottom>a,.page-hero .service-jumps>a{padding:8px 10px;border-radius:8px}
.section--areas .coverage-panel__region{border-radius:10px;transition:background-color .18s,color .18s}
:is(.hero .service-picker__grid>a,.hero .service-picker__bottom>a,.section--areas .area-chips>a,.section--areas .coverage-panel__region,.hero .btn,.page-hero .btn,.section--areas .btn,.cta-panel .btn,.page-hero .service-jumps>a,.btn--dark):focus-visible{background:var(--action-red);color:#fff;border-color:var(--action-red);outline:2px solid #fff;outline-offset:3px}
:is(.hero .service-picker__grid>a,.hero .service-picker__bottom>a,.section--areas .area-chips>a,.section--areas .coverage-panel__region,.hero .btn,.page-hero .btn,.section--areas .btn,.cta-panel .btn,.page-hero .service-jumps>a,.btn--dark):focus-visible :is(strong,small,span){color:#fff}
:is(.hero .service-picker__grid>a,.hero .service-picker__bottom>a,.section--areas .area-chips>a,.section--areas .coverage-panel__region,.hero .btn,.page-hero .btn,.section--areas .btn,.cta-panel .btn,.page-hero .service-jumps>a,.btn--dark):focus-visible .coverage-panel__pin{background:rgba(255,255,255,.16)}
@media(hover:hover){
 :is(.hero .service-picker__grid>a,.hero .service-picker__bottom>a,.section--areas .area-chips>a,.section--areas .coverage-panel__region,.hero .btn,.page-hero .btn,.section--areas .btn,.cta-panel .btn,.page-hero .service-jumps>a,.btn--dark):hover{background:var(--action-red);color:#fff;border-color:var(--action-red)}
 :is(.hero .service-picker__grid>a,.hero .service-picker__bottom>a,.section--areas .area-chips>a,.section--areas .coverage-panel__region,.hero .btn,.page-hero .btn,.section--areas .btn,.cta-panel .btn,.page-hero .service-jumps>a,.btn--dark):hover :is(strong,small,span){color:#fff}
 :is(.hero .service-picker__grid>a,.hero .service-picker__bottom>a,.section--areas .area-chips>a,.section--areas .coverage-panel__region,.hero .btn,.page-hero .btn,.section--areas .btn,.cta-panel .btn,.page-hero .service-jumps>a,.btn--dark):hover .coverage-panel__pin{background:rgba(255,255,255,.16)}
}
/* Keep hover targets stationary and leave room above anchor destinations. */
.service-grid .service-card{transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s}
.service-grid .service-card:hover,.btn:hover{transform:none}
#services,#areas,#why-us,#faq,#service-details,#service-faq,#service-areas{scroll-margin-top:156px}
/* Stable navigation: no animated page travel or width shifts between pages. */
html{scroll-behavior:auto;scrollbar-gutter:stable}
.site-header{transition:box-shadow .2s,background-color .2s}
.site-header .nav__list a{white-space:nowrap;transition:color .15s,background-color .15s}
.site-header .header__actions{flex-shrink:0}
@media(min-width:821px) and (max-width:1050px){
 .site-header .header__inner{gap:16px}
 .site-header .nav__list{gap:16px}
 .site-header .brand--image{width:200px}
}
@media(max-width:820px){
 .site-header .nav{position:absolute;top:calc(100% + 8px);max-height:calc(100dvh - 190px);overflow-y:auto}
 #services,#areas,#why-us,#faq,#service-details,#service-faq,#service-areas{scroll-margin-top:136px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.service-grid .service-card,.btn,.site-header{transition:none}}