/* M.K Trading Group - styled after the "Plumberz" ThemeWagon layout: blue + orange, Roboto/Inter, square corners */
:root{
  --primary:#1E60AA;--secondary:#FF4917;--light:#EDF1FC;--dark:#17224D;--mk-body:#555b73;--mk-line:#d9e0f2;
  --mk-gold:var(--secondary);--mk-navy:var(--dark);--mk-soft:var(--light);
  --bs-body-font-family:'Inter',system-ui,sans-serif;--bs-body-color:var(--mk-body);--bs-link-color:var(--primary);--bs-link-hover-color:var(--secondary);
  --bs-border-radius:0;--bs-border-radius-lg:0;--bs-border-radius-sm:0;
}
body{overflow-x:hidden;font-size:1rem}
h1,h2,h3,h4,h5,h6{font-family:'Roboto',sans-serif;color:var(--dark);font-weight:700}
.text-gold{color:var(--secondary)!important}
.bg-soft{background:var(--light)}
.section{padding:90px 0}
@media(max-width:767px){.section{padding:56px 0}}
.js [data-anim]{opacity:0}.js [data-anim].animate__animated{opacity:1}

/* header */
.top-strip{background:var(--light)}
.brand-text{font-family:'Roboto',sans-serif;font-weight:900;font-size:1.7rem;color:var(--primary);text-decoration:none;display:inline-flex;align-items:center;gap:8px;line-height:1}
.brand-text:hover{color:var(--primary)}
.strip-info{font-size:.85rem;color:var(--dark)}
.strip-info a,.strip-info span{color:var(--dark);text-decoration:none}
.strip-info i{color:var(--primary);margin-right:6px}
.soc a{display:inline-grid;place-items:center;width:30px;height:30px;background:#fff;color:var(--primary)!important;margin-left:6px;transition:.2s}
.soc a i{margin:0}
.soc a:hover{background:var(--primary);color:#fff!important}
.nav-wrap{background:var(--light)}
.site-header{position:relative;z-index:1030}
.nav-bar{background:#fff;box-shadow:0 0 30px rgba(0,0,0,.08)}
.sticky-nav .nav-bar{position:fixed;top:0;left:0;right:0}
.nav-bar .nav-link{font-family:'Roboto',sans-serif;text-transform:uppercase;font-weight:500;font-size:.85rem;color:var(--dark);padding:1.7rem 1rem!important;letter-spacing:.02em}
.nav-bar .nav-link:hover,.nav-bar .nav-link.active{color:var(--primary)}
@media(max-width:991px){.nav-bar .nav-link{padding:.7rem 1rem!important}}
@media(min-width:992px){.nav-bar .dropdown:hover>.dropdown-menu{display:block;animation:fadeInUp .25s}}
.dropdown-menu{border:0;border-top:3px solid var(--primary);border-radius:0;box-shadow:0 12px 30px rgba(23,34,77,.15);padding:.5rem 0;margin-top:0}
.dropdown-item{padding:.6rem 1.3rem;font-size:.92rem}
.dropdown-item:hover{background:var(--light);color:var(--primary)}
.navbar-toggler{border-radius:0;border-color:var(--primary)}
.emergency{background:var(--primary);color:#fff;text-decoration:none;align-items:center;gap:14px;padding:16px 28px;margin-right:-1px}
.emergency small{display:block;font-weight:500;font-size:.8rem;color:#fff}
.emergency b{color:var(--secondary);font-family:'Roboto',sans-serif;font-size:1.05rem}
.em-icon{display:inline-grid;place-items:center;width:46px;height:46px;background:#fff;color:var(--primary);font-size:1.1rem;flex:none}
.emergency:hover{background:var(--dark);color:#fff}

/* buttons */
.btn{border-radius:0;font-family:'Roboto',sans-serif;font-weight:500;padding:.75rem 2rem;transition:all .25s}
.btn-lg{padding:1rem 2.2rem}
.btn-mk-blue,.btn-mk-navy{background:var(--primary);border:1px solid var(--primary);color:#fff}
.btn-mk-blue:hover,.btn-mk-navy:hover{background:var(--dark);border-color:var(--dark);color:#fff}
.btn-mk-orange,.btn-mk-gold{background:var(--secondary);border:1px solid var(--secondary);color:#fff}
.btn-mk-orange:hover,.btn-mk-gold:hover{background:var(--dark);border-color:var(--dark);color:#fff}
.btn-outline-navy{border:1px solid var(--primary);color:var(--primary)}
.btn-outline-navy:hover{background:var(--primary);color:#fff}
.btn-light{background:#fff;color:var(--primary)}.btn-light:hover{background:var(--secondary);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--primary)}

/* hero */
.hero{background:linear-gradient(rgba(23,34,77,.9),rgba(30,96,170,.82)),repeating-linear-gradient(45deg,#1b2b63 0 14px,#17224D 14px 28px);color:#fff;padding:90px 0 100px;position:relative}
.hero-frame{position:relative;padding:30px 0 30px 40px}
.hero-frame::before{content:"";position:absolute;left:0;top:0;bottom:0;width:90px;border:12px solid #fff;border-right:0;pointer-events:none}
.hero-tag{display:inline-block;color:#fff;text-transform:uppercase;font-family:'Roboto',sans-serif;font-weight:500;letter-spacing:.06em;font-size:.9rem;margin-bottom:1rem}
.hero h1{color:#fff;font-weight:700;font-size:clamp(2.2rem,4.8vw,3.8rem);line-height:1.15;margin-bottom:1.2rem}
.hero .lead{color:#fff;font-size:1.05rem;font-weight:500}
.hero-card{background:#fff;border-bottom:6px solid var(--secondary);padding:36px;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.hero-card h2{color:var(--dark)}
.stat{border-left:3px solid var(--primary);padding-left:16px}
.stat b{display:block;font-family:'Roboto',sans-serif;font-size:2.1rem;color:var(--primary);font-weight:700;line-height:1.1}
.stat span{font-size:.82rem}
@media(max-width:575px){.hero-frame{padding-left:20px}.hero-frame::before{width:40px;border-width:8px}}

/* tiles under hero */
.tiles{padding:80px 0 0}
.tile{display:block;text-decoration:none;background:var(--light);transition:transform .3s,box-shadow .3s}
.tile:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(23,34,77,.14)}
.tile-img{display:grid;place-items:center;height:150px;background:linear-gradient(135deg,var(--primary),#2f7bd0);color:#fff;font-size:3.6rem}
.tile-img.alt{background:linear-gradient(135deg,var(--dark),#2c3d82)}
.tile-body{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;font-family:'Roboto',sans-serif;font-weight:700;color:var(--dark);font-size:1.05rem}
.tile-body i{width:34px;height:34px;display:grid;place-items:center;background:#fff;color:var(--primary);font-size:.9rem;transition:.25s}
.tile:hover .tile-body i{background:var(--primary);color:#fff}

/* page hero */
.page-hero{background:linear-gradient(rgba(23,34,77,.92),rgba(30,96,170,.85)),repeating-linear-gradient(45deg,#1b2b63 0 14px,#17224D 14px 28px);color:#fff;padding:80px 0 70px}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,3.8vw,3rem)}
.page-hero .lead{color:#e6ecfa;max-width:720px;font-size:1.02rem;margin-bottom:0}
.breadcrumb{--bs-breadcrumb-divider-color:#9fb4dc;font-size:.88rem;text-transform:uppercase;font-family:'Roboto',sans-serif}
.breadcrumb a{color:#fff;text-decoration:none}.breadcrumb-item.active{color:var(--secondary)}

/* headings */
.eyebrow,.eyebrow-light{display:inline-block;font-family:'Roboto',sans-serif;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;color:var(--secondary)}
.eyebrow-light{color:var(--secondary)}
.section-head{max-width:720px;margin:0 auto 52px}
.section-title{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:1.2rem}
.text-muted{color:var(--mk-body)!important}

/* cards */
.mk-card{border:0;border-radius:0;background:var(--light);box-shadow:none;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.mk-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(23,34,77,.14)}
.mk-card .card-body{position:relative}
.icon-box{width:64px;height:64px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:1.8rem;margin-bottom:20px;border:2px solid var(--primary);transition:all .3s}
.mk-card:hover .icon-box{background:var(--primary);color:#fff}
.card-arrow{font-family:'Roboto',sans-serif;font-weight:700;text-decoration:none;color:var(--primary);display:inline-block;margin-top:6px}
.card-arrow i{display:inline-block;transition:transform .2s}.card-arrow:hover i{transform:translateX(5px)}
.badge-open{background:var(--secondary);color:#fff;font-family:'Roboto',sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.45em .9em;border-radius:0}
.tag{background:#fff;color:var(--primary);padding:.35rem .9rem;font-size:.8rem;font-weight:600;border-left:3px solid var(--secondary)}
.check-list{list-style:none;padding:0;margin:0 0 1rem}
.check-list li{position:relative;padding:.35rem 0 .35rem 1.9rem;font-weight:500;color:var(--dark)}
.check-list li::before{content:"\F26A";font-family:"bootstrap-icons";position:absolute;left:0;top:.3rem;color:var(--primary);font-size:1.1rem}
.check-list.two-col{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.note{background:#fff;border-left:4px solid var(--secondary);padding:14px 18px;font-size:.92rem;margin:1rem 0}
.store-card{background:#fff;border:1px solid var(--mk-line)}
.store-card::before{display:none}
.store-banner{background:var(--primary);color:#fff;padding:16px 28px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.store-banner h2{color:#fff}
.detail-list{list-style:none;margin:0 0 1rem;padding:6px 20px;background:var(--light)}
.detail-list li{display:flex;flex-direction:column;padding:12px 0;border-bottom:1px solid var(--mk-line);font-size:.92rem}
.detail-list li:last-child{border:0}
.label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--primary);font-weight:700}

/* about */
.call-box{display:flex;align-items:center;gap:18px;background:var(--primary);padding:24px;margin-top:1.5rem;max-width:380px}
.call-box b{display:block;color:#fff;font-family:'Roboto',sans-serif}
.call-box a{color:var(--secondary);font-family:'Roboto',sans-serif;font-weight:700;font-size:1.3rem;text-decoration:none}
.about-visual{position:relative;min-height:380px}
.av-main{position:absolute;right:0;top:0;width:78%;height:82%;background:linear-gradient(135deg,var(--light),#fff);border:1px solid var(--mk-line);display:grid;place-items:center;padding:30px}
.av-main img{max-width:230px}
.av-sub{position:absolute;left:0;bottom:0;width:48%;background:var(--primary);color:#fff;padding:30px;border:10px solid #fff;display:flex;align-items:center;gap:14px}
.av-sub b{font-family:'Roboto',sans-serif;font-size:3rem;line-height:1;color:#fff}.av-sub span{font-size:.85rem;line-height:1.3}
@media(max-width:575px){.about-visual{min-height:320px}.av-sub{width:60%}}

/* facts band */
.facts{background:linear-gradient(rgba(23,34,77,.92),rgba(23,34,77,.92)),repeating-linear-gradient(45deg,#1b2b63 0 14px,#17224D 14px 28px);padding:70px 0;margin:30px 0 0}
.facts i{display:block;font-size:2.2rem;margin-bottom:8px}
.facts b{display:block;font-family:'Roboto',sans-serif;font-size:2.2rem;font-weight:700}
.facts span{font-size:.9rem;opacity:.85}

/* service band */
.service-band{background:var(--primary);padding:80px 0}
.service-band .btn-mk-gold{background:var(--secondary)}

/* quote band (appointment style) */
.quote-band{background:var(--primary);padding:90px 0}
.quote-card{background:#fff;padding:40px}
.quote-band .eyebrow-light{color:#fff}

/* faq */
.mk-accordion .accordion-item{border:0;border-radius:0;margin-bottom:12px;background:var(--light)}
.mk-accordion .accordion-button{font-family:'Roboto',sans-serif;font-weight:700;color:var(--dark);border-radius:0;padding:1.2rem 1.5rem;box-shadow:none;background:var(--light)}
.mk-accordion .accordion-button:not(.collapsed){background:var(--primary);color:#fff}
.mk-accordion .accordion-button:not(.collapsed)::after{filter:brightness(0) invert(1)}
.mk-accordion .accordion-body{padding:1.4rem 1.5rem;background:#fff}

/* features */
.features-strip{background:var(--light);padding:70px 0}
.feat{display:flex;gap:18px;align-items:flex-start}
.feat>i{font-size:2.2rem;color:var(--secondary);line-height:1}
.feat h3{font-size:1.1rem;margin-bottom:.3rem}.feat p{margin:0;font-size:.92rem}

/* CTA */
.cta-banner{background:var(--secondary);padding:56px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-banner h3{color:#fff;font-size:1.8rem}
.cta-banner p{color:#fff;margin:0;max-width:640px}
.cta-banner .btn-mk-gold{background:var(--dark);border-color:var(--dark)}
.cta-banner .btn-mk-gold:hover{background:#fff;color:var(--dark);border-color:#fff}

/* forms */
.form-control,.form-select{border-radius:0;padding:.8rem 1rem;border:1px solid var(--mk-line);background:var(--light)}
.form-control:focus,.form-select:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 .2rem rgba(30,96,170,.2)}
.form-label{font-weight:600;font-size:.88rem;color:var(--dark)}
.alert{border-radius:0}

/* footer */
.mk-footer{background:var(--dark);color:#c6cde6;padding:80px 0 0;font-size:.93rem}
.mk-footer .brand-box{display:inline-flex;align-items:center;gap:10px;background:#fff;padding:6px 14px 6px 8px;text-decoration:none;color:var(--primary);font-family:'Roboto',sans-serif;font-weight:900;font-size:1.3rem}
.mk-footer .brand-box small{display:none}
.mk-footer h5{color:#fff;font-size:1.15rem;margin-bottom:1.4rem}
.mk-footer a{color:#c6cde6;text-decoration:none}.mk-footer a:hover{color:var(--secondary)}
.gold-list li{margin-bottom:.7rem}
.gold-list:not(.icons) li::before{content:"\F285";font-family:"bootstrap-icons";color:var(--secondary);margin-right:8px;font-size:.75rem}
.gold-list.icons i{color:var(--secondary);margin-right:8px}
.social a{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.35);margin-right:8px;transition:.2s}
.social a:hover{background:var(--secondary);border-color:var(--secondary);color:#fff;transform:translateY(-3px)}
.footer-bottom{margin-top:64px;border-top:1px solid rgba(255,255,255,.12);padding:22px 0;font-size:.85rem;color:#98a3c8}

.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border:0;background:var(--primary);color:#fff;font-size:1.2rem;opacity:0;visibility:hidden;transition:.3s;z-index:99}
.to-top.show{opacity:1;visibility:visible}.to-top:hover{background:var(--secondary)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js [data-anim]{opacity:1}}

/* keep only the nav bar pinned on large screens (the info strip scrolls away) */
@media(min-width:992px){.site-header{position:sticky;top:-74px}}
@media(max-width:991px){.site-header{position:sticky;top:0}}

/* ---- photo backgrounds (Unsplash placeholders) ---- */
.hero{background:linear-gradient(rgba(23,34,77,.86),rgba(30,96,170,.72)),var(--bg) center/cover no-repeat}
.page-hero{background:linear-gradient(rgba(23,34,77,.88),rgba(30,96,170,.74)),var(--bg) center/cover no-repeat}
.service-band{background:linear-gradient(rgba(30,96,170,.9),rgba(23,34,77,.88)),var(--bg) center/cover fixed no-repeat}
.tile-img{background-size:cover;background-position:center;font-size:0}
.av-main{background-size:cover;background-position:center;padding:0}
.av-photo{position:absolute;right:6%;bottom:0;width:38%;height:34%;background-size:cover;background-position:center;border:10px solid #fff}
.av-sub{left:0;bottom:12%}
.mk-card .card-img-top{height:230px;object-fit:cover;border-radius:0}
.footer-credit{font-size:.78rem;color:#8390b8}
.hero{background:linear-gradient(rgba(23,34,77,.72),rgba(30,96,170,.5)),var(--bg) center/cover no-repeat}
.page-hero{background:linear-gradient(rgba(23,34,77,.8),rgba(30,96,170,.6)),var(--bg) center/cover no-repeat}
.tile-img{height:210px}

/* ---- zoom hero slider ---- */
.hero-slider{position:relative;background:var(--dark)}
.hero-slider .carousel-item{height:clamp(520px,82vh,720px);overflow:hidden;transition:opacity 1.2s ease}
.slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1)}
.carousel-item.active .slide-bg{animation:slideZoom 8s ease-out forwards}
@keyframes slideZoom{from{transform:scale(1)}to{transform:scale(1.18)}}
.slide-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,34,77,.88) 0%,rgba(23,34,77,.6) 55%,rgba(30,96,170,.25) 100%)}
.slide-inner{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.slide-inner .hero-frame{width:100%;padding:30px 0 30px 40px}
.hero-slider h1{color:#fff;font-size:clamp(2.1rem,4.8vw,3.8rem);line-height:1.15;margin-bottom:1.1rem}
.hero-slider .lead{color:#fff;font-weight:500;max-width:620px}
.hero-slider .hero-tag{color:var(--secondary)}
.carousel-item.active .caption>*{animation:zoomIn .9s both}
.carousel-item.active .caption>:nth-child(2){animation-delay:.25s}
.carousel-item.active .caption>:nth-child(3){animation-delay:.5s}
.carousel-item.active .caption>:nth-child(4){animation-delay:.75s}
.hero-slider .carousel-control-prev,.hero-slider .carousel-control-next{width:54px;height:54px;top:50%;bottom:auto;transform:translateY(-50%);background:rgba(255,255,255,.14);color:#fff;opacity:1;font-size:1.3rem;margin:0 18px;transition:.25s}
.hero-slider .carousel-control-prev:hover,.hero-slider .carousel-control-next:hover{background:var(--secondary)}
.hero-slider .carousel-indicators{z-index:3;margin-bottom:26px}
.hero-slider .carousel-indicators [data-bs-target]{width:34px;height:4px;border:0;background:#fff;opacity:.45;margin:0 4px;border-radius:0}
.hero-slider .carousel-indicators .active{background:var(--secondary);opacity:1}
@media(max-width:767px){.hero-slider .carousel-control-prev,.hero-slider .carousel-control-next{display:none}.slide-inner .hero-frame{padding-left:20px}}
@media(prefers-reduced-motion:reduce){.carousel-item.active .slide-bg{animation:none}.carousel-item.active .caption>*{animation:none}}