/* =========================================================
   Design Tokens
   ========================================================= */
:root{--primary-color:#0072bc;--secondary-color:#e11b22;--bg-color:#fff;--text-color:#333;--light-bg:#f9f9f9;--dark-bg:#222;--footer-text:#ccc;--transition-speed:0.4s;--shadow-light:0 4px 15px rgba(0,0,0,0.1);--shadow-heavy:0 8px 25px rgba(0,0,0,0.2);--base-font-size:1rem}

/* =========================================================
   Base / Resets
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{background:linear-gradient(to bottom,#ffffff 0%,#f1f1f1 100%);font-size:100%}
@media (max-width:48rem){html{font-size:80%}}
@media (max-width:30rem){html{font-size:70%}}
body{background:transparent;font-family:'DM Sans',sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
code{font-family:'Fira Code',monospace}
.container{max-width:75rem;width:90%;margin:0 auto}
@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}

/* =========================================================
   Header / Nav
   ========================================================= */
header{background:var(--bg-color);padding:1.25rem 0;border-bottom:1px solid #e5e5e5;box-shadow:var(--shadow-light);position:sticky;top:0;z-index:100;backdrop-filter:blur(6px);transition:all var(--transition-speed)}
header:hover{box-shadow:var(--shadow-heavy)}
header nav a,header h1,header .logo,header .main-nav a{font-size:1.25rem;font-weight:600}
.header-container{display:flex;justify-content:space-between;align-items:center}
.logo img{max-width:12.5rem;transition:transform var(--transition-speed)}
@media (hover:hover){.logo img:hover{transform:scale(1.05)}}
.main-nav ul{display:flex;list-style:none}
.main-nav ul li{margin-left:1.5625rem;position:relative;transition:transform var(--transition-speed)}
@media (hover:hover){.main-nav ul li:hover{transform:translateY(-0.1875rem)}}
.main-nav ul li a{text-decoration:none;color:var(--text-color);font-weight:600;padding:.3125rem 0;transition:color var(--transition-speed)}
.main-nav ul li a:hover{color:var(--primary-color)}
.main-nav ul li a::after{content:"";position:absolute;left:0;bottom:-.125rem;width:0;height:.125rem;background:var(--primary-color);transition:width var(--transition-speed)}
.main-nav ul li a:hover::after{width:100%}
.main-nav ul li.has-dropdown{position:relative}
.main-nav ul li .dropdown{position:absolute;top:100%;left:0;display:flex;flex-direction:column;gap:.5rem;background:var(--bg-color);border-radius:.5rem;box-shadow:var(--shadow-heavy);padding:.75rem;min-width:240px;opacity:0;visibility:hidden;transition:opacity var(--transition-speed),visibility var(--transition-speed);z-index:200}
.main-nav ul li.has-dropdown:hover .dropdown{opacity:1;visibility:visible}
.main-nav ul li .dropdown li{margin:0;position:relative}
.main-nav ul li .dropdown li a{display:block;padding:.75rem 1rem;border-radius:.375rem;font-weight:500;transition:background var(--transition-speed)}
.main-nav ul li .dropdown li:nth-child(1)>a{background:#e1f5fe}
.main-nav ul li .dropdown li:nth-child(2)>a{background:#e8f5e9}
.main-nav ul li .dropdown li:nth-child(3)>a{background:#ffebee}
.main-nav ul li .dropdown li a:hover{background:var(--primary-color);color:var(--bg-color)}
.main-nav ul li .dropdown li.has-sub .dropdown-sub{position:absolute;top:0;left:100%;display:flex;flex-direction:column;gap:.5rem;background:var(--bg-color);border-radius:.5rem;box-shadow:var(--shadow-heavy);padding:.75rem;min-width:180px;opacity:0;visibility:hidden;transition:opacity var(--transition-speed),visibility var(--transition-speed)}
.main-nav ul li .dropdown li.has-sub:hover .dropdown-sub{opacity:1;visibility:visible}

/* =========================================================
   Mobile header + FULL-SCREEN overlay menu (centered)
   ========================================================= */
@media (max-width:48rem){
  header .header-container{flex-direction:row;justify-content:space-between;align-items:center}
  header .logo{flex:0 1 auto;display:flex;align-items:center}
  header .logo img{max-width:10rem;height:auto}

  .nav-toggle{display:block;margin-left:auto;background:var(--primary-color);border:none;width:40px;height:40px;border-radius:12px;position:relative;cursor:pointer;z-index:300;box-shadow:var(--shadow-light)}
  .nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:"";display:block;width:22px;height:3px;background:#fff;position:absolute;left:50%;transform:translateX(-50%);border-radius:2px}
  .nav-toggle::before{top:10px}
  .nav-toggle span{top:50%;transform:translate(-50%,-50%)}
  .nav-toggle::after{bottom:10px}

  /* True full-screen gradient overlay */
  .main-nav{
    position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;
    background:linear-gradient(180deg,#0072bc 0%,#e11b22 100%);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    padding:calc(env(safe-area-inset-top,0) + 4rem) 1rem 2rem;
    z-index:250;display:block;transform:translateY(-100%);transition:transform var(--transition-speed) ease;
    overflow:hidden;
  }
  .main-nav.open{transform:translateY(0)}
  /* lock background scroll while open (supported browsers) */
  @supports selector(html:has(.main-nav.open)){ html:has(.main-nav.open), body:has(.main-nav.open){overflow:hidden;height:100vh} }

  /* Level-1 menu: centered vertically & horizontally */
  .main-nav>ul{
    display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;
    min-height:calc(100vh - (env(safe-area-inset-top,0) + 5rem));text-align:center;color:#fff;
    transition:transform var(--transition-speed) ease,opacity var(--transition-speed) ease;
  }
  .main-nav>ul>li{margin:0;width:min(22rem,90vw)}
  .main-nav>ul>li>a{
    color:#fff;display:block;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.18);
    font-size:1.2rem;letter-spacing:.2px;border-radius:.5rem;background:transparent;
  }
  .main-nav ul li a::after{display:none}

  /* Indicate Services has a submenu */
  .main-nav>ul>li.has-dropdown>a{position:relative}
  .main-nav>ul>li.has-dropdown+a::before,.main-nav>ul>li.has-dropdown>a::before{content:"›";position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:1.35rem;color:#fff;opacity:.9}

  /* Submenu: also full-screen, centered; no colored item backgrounds */
  .main-nav .dropdown{
    position:absolute;inset:0;padding:calc(env(safe-area-inset-top,0) + 4rem) 1rem 2rem;background:transparent;box-shadow:none;border-radius:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
    transform:translateX(100%);transition:transform var(--transition-speed) ease;
    opacity:1;visibility:visible;min-width:0;overflow:hidden;
  }
  .main-nav .dropdown::before{content:"Services";color:#fff;opacity:.9;font-weight:700;margin:0 0 .25rem;letter-spacing:.3px}
  .main-nav .dropdown li{width:min(22rem,90vw)}
  .main-nav .dropdown li a{
    color:#fff;display:block;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.18);
    font-size:1.1rem;font-weight:600;border-radius:.5rem;background:transparent;
  }

  /* Slide-in effect for submenu & hide main list while open */
  .main-nav>ul>li.has-dropdown:focus-within>.dropdown{transform:translateX(0)}
  @supports selector(.main-nav:has(> ul > li.has-dropdown:focus-within)){
    .main-nav:has(> ul > li.has-dropdown:focus-within) > ul{opacity:0;pointer-events:none;transform:translateX(-15%)}
  }
}

/* desktop: hide overlay behavior */
@media (min-width:48.0625rem){.nav-toggle{display:none}}

/* =========================================================
   Hero / Slider
   ========================================================= */
.hero{position:relative;overflow:visible;height:37.5rem}
@media (max-width:48rem){.hero{height:28rem}}
.slider{position:relative;height:100%}
.slide{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;visibility:hidden;transition:opacity 1s ease-in-out,transform 1s ease;transform:scale(1.02)}
.slide.active{opacity:1;visibility:visible;transform:scale(1)}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,114,188,.3) 0%,rgba(225,27,34,.7) 100%);transition:opacity var(--transition-speed)}
.slider .slide:first-of-type .slide-overlay{background:none}
.slide-content{position:absolute;bottom:3.125rem;left:50%;transform:translateX(-50%);z-index:2;text-align:center;color:#fff;max-width:31.25rem;padding:0 1rem}
.slide-content h1{font-size:3rem;margin-bottom:.625rem;letter-spacing:.05rem;line-height:1.2}
.slide-content p{font-size:1.2rem;margin-bottom:1.25rem}
@media (max-width:48rem){.slide-content{max-width:90vw;bottom:2rem}.slide-content h1{font-size:clamp(1.75rem,6vw,2.4rem)}.slide-content p{font-size:1.05rem}}
.slider-controls{position:absolute;top:50%;width:100%;z-index:3;display:flex;justify-content:space-between;transform:translateY(-50%);padding:0 1.875rem}
.slider-controls button{background:rgba(0,0,0,.4);border:none;color:#fff;font-size:2rem;padding:.625rem .9375rem;cursor:pointer;transition:background var(--transition-speed),transform var(--transition-speed)}
@media (hover:hover){.slider-controls button:hover{background:rgba(0,0,0,.7);transform:scale(1.1)}}

/* =========================================================
   About Hero Enhancements
   ========================================================= */
.hero--about .slide-overlay{background:radial-gradient(120% 100% at 50% 90%,rgba(0,0,0,.35) 0%,rgba(0,0,0,.1) 55%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 100%)}
.hero--about .slide::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 120% at 50% 20%,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%)}
.hero-card{display:inline-block;text-align:center;padding:1.25rem 1.5rem;border-radius:.75rem;background:rgba(20,20,20,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.18);max-width:36rem}
.hero--about .slide-content h1{margin-bottom:.5rem;line-height:1.1;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.hero--about .slide-content p{margin:0;opacity:.95;text-shadow:0 1px 3px rgba(0,0,0,.35)}
@media (min-width:64rem){.hero--about{height:42rem}}
@media (max-width:30rem){.hero-card{padding:1rem 1rem}}

/* =========================================================
   Buttons
   ========================================================= */
.btn{display:inline-block;background:var(--primary-color);color:var(--bg-color);padding:.75rem 1.5rem;text-decoration:none;font-weight:600;border-radius:1.5625rem;transition:background var(--transition-speed),transform var(--transition-speed),box-shadow var(--transition-speed)}
@media (hover:hover){.btn:hover{background:var(--secondary-color);transform:scale(1.05);box-shadow:var(--shadow-light)}}
.btn-primary{background:var(--primary-color);color:#fff;padding:1rem 2.5rem;border:none;border-radius:.5rem;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background var(--transition-speed),transform var(--transition-speed)}
@media (hover:hover){.btn-primary:hover{background:var(--secondary-color);transform:translateY(-2px) scale(1.02)}}

/* =========================================================
   Animations
   ========================================================= */
.animated{opacity:0;animation-fill-mode:forwards}
.fadeInDown{animation:fadeInDown 1s ease-out forwards}
.fadeInUp{animation:fadeInUp 1s ease-out forwards}
.zoomIn{animation:zoomIn .8s ease-out forwards}
.delay-1{animation-delay:.5s}.delay-2{animation-delay:.8s}.delay-3{animation-delay:1s}.delay-4{animation-delay:1.2s}.delay-5{animation-delay:1.4s}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-1.25rem)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:translateY(0)}}
@keyframes zoomIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* =========================================================
   Section Titles
   ========================================================= */
.section-title{margin-bottom:2.5rem;font-size:2.5rem;text-align:center}
@media (max-width:48rem){.section-title{font-size:2rem}}

/* =========================================================
   Tabs / Services
   ========================================================= */
.our-services,.featured-solutions,.reviews-and-stats{background:transparent}
.our-services{padding:3.75rem 0;background:var(--light-bg);text-align:center}
.tabs{margin-top:2.5rem}
.tab-buttons{list-style:none;display:flex;justify-content:center;gap:1.25rem;margin-bottom:1.875rem;cursor:pointer}
.tab-buttons li{padding:.625rem 1.25rem;border-bottom:.1875rem solid transparent;transition:all var(--transition-speed);display:inline-flex;align-items:center;gap:.5rem}
.tab-buttons li.active,.tab-buttons li:hover{border-color:var(--primary-color);transform:translateY(-.1875rem)}
.tab-contents{max-width:50rem;margin:0 auto;text-align:left}
.tab-content{display:none;animation:fadeInUp .8s ease-out forwards}
.tab-content.active{display:block}
.tab-content ul{list-style:disc inside;font-size:1.1rem;line-height:1.8}
.icon-home{width:1.25rem;height:1.25rem;fill:currentColor;vertical-align:middle}

/* =========================================================
   Featured Solutions
   ========================================================= */
.featured-solutions{padding:3.75rem 0;text-align:center}
.solutions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:1.875rem}
.solution-item{background:var(--bg-color);border-radius:.5rem;overflow:hidden;box-shadow:var(--shadow-light);transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}
@media (hover:hover){.solution-item:hover{transform:translateY(-.5rem);box-shadow:var(--shadow-heavy)}.solution-item:hover img{transform:scale(1.03)}}
.solution-item img{width:100%;transition:transform .3s ease}
.solution-item h3{margin:1.25rem 0 .625rem;font-size:1.5rem;padding:0 .9375rem;text-align:center;letter-spacing:.025rem}
.solution-item .description{padding:0 .9375rem 1.25rem;color:var(--text-color)}

/* =========================================================
   Awards
   ========================================================= */
.awards{display:flex;justify-content:center;align-items:center;gap:1.25rem;margin:1.25rem 0}
.award-img{height:5rem;width:auto;transition:transform .3s ease}
@media (hover:hover){.award-img:hover{transform:scale(1.05)}}
.awards__images{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;max-width:100%;margin:0 auto}
.awards__images img{max-height:80px;width:auto;display:block}

/* =========================================================
   Reviews & Stats
   ========================================================= */
.reviews-and-stats{padding:3.75rem 0;background:var(--bg-color);text-align:center}
.section-subtitle{margin-top:.0625rem;margin-bottom:0;font-size:1.125rem;font-weight:600;color:var(--text-color);text-align:center;max-width:600px;margin-left:auto;margin-right:auto;text-shadow:0 1px 2px rgba(0,0,0,.1);line-height:1}
.reviews-and-stats h3{clear:both;display:block;width:100%;margin-top:2rem}
.stats-grid{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-top:2rem;margin-bottom:2.5rem}
.stats-item{background:#fff;padding:1.5rem 2rem;border-radius:.5rem;box-shadow:0 4px 8px rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease;width:12.5rem;text-align:center;flex:1 1 20rem;max-width:22rem}
.stats-item a{display:block;text-align:center}
.stats-logo{height:3rem;display:inline-block;margin:0 auto 1rem auto}



@media (min-width:48rem){.stats-grid{flex-wrap:nowrap}}
@media (hover:hover){.stats-item:hover{transform:translateY(-.5rem) scale(1.02);box-shadow:0 12px 24px rgba(0,0,0,.2)}}
/* .stats-logo{height:3rem;margin-bottom:1rem} */
.stats-count,.stats-rating{font-size:1.25rem;font-weight:600;color:var(--text-color)}
.stats-rating{margin-top:.5rem;display:flex;align-items:center;justify-content:center;gap:.25rem}
.star{color:gold}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18.75rem,1fr));gap:1.875rem;margin-top:2.5rem}
.review-item{background:var(--light-bg);padding:1.5rem;border-radius:.75rem;box-shadow:0 4px 8px rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease}
@media (hover:hover){.review-item:hover{transform:translateY(-.5rem) scale(1.02);box-shadow:0 12px 24px rgba(0,0,0,.2)}}
review-item span,.review-item span{font-size:.875rem;color:var(--text-color);font-weight:500}
.review-stats{padding:3.75rem 0;background:var(--bg-color);text-align:center}

/* =========================================================
   Promotions / CTA
   ========================================================= */
.promotions{padding:3.75rem 0;background:var(--primary-color);text-align:center;color:var(--bg-color);background-image:linear-gradient(to bottom,rgba(0,114,188,.8) 0%,rgba(225,27,34,.8) 100%)}
.promotion-content{margin-top:1.25rem}

/* =========================================================
   Footer
   ========================================================= */
footer{background:var(--dark-bg);color:var(--footer-text);font-size:.9rem}
.footer-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:1.875rem;padding:2.5rem 0}
.footer-column h4{margin-bottom:.9375rem;color:#fff}
.footer-column ul{list-style:none}
.footer-column ul li a{color:var(--footer-text);text-decoration:none;transition:color var(--transition-speed)}
.footer-column ul li a:hover{color:var(--primary-color)}
.footer-bottom{border-top:.25rem solid #444;padding:1.25rem 0;text-align:center}
.social-icons .social-link{margin:0 .625rem;text-decoration:none;color:var(--footer-text);transition:color var(--transition-speed)}
.social-icons .social-link:hover{color:var(--primary-color)}

/* =========================================================
   About / Company Sections
   ========================================================= */
.company-overview{padding:3.75rem 0;background:var(--bg-color);text-align:center}
.company-overview p{font-size:1.125rem;max-width:800px;margin:1rem auto 2rem}
.mission-vision{padding:3.75rem 0;background:var(--light-bg);text-align:center}
.mission-vision h2{margin-bottom:1.5rem;font-size:2rem}
.mission-vision p{font-size:1.125rem;max-width:800px;margin:0 auto 2rem}
.company-milestones{padding:3.75rem 0;background:var(--bg-color);text-align:center}
.timeline{margin-top:2rem}
.timeline-item{margin-bottom:1.5rem}
.timeline-year{display:block;font-size:1.5rem;font-weight:700;color:var(--primary-color);margin-bottom:.5rem}
.timeline-text{font-size:1.125rem;max-width:600px;margin:0 auto}
.our-team{padding:3.75rem 0;background:var(--light-bg);text-align:center}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem;margin-top:2rem}
.team-member{background:#fff;padding:1.5rem;border-radius:.5rem;box-shadow:var(--shadow-light);transition:transform .3s ease,box-shadow .3s ease;text-align:center}
@media (hover:hover){.team-member:hover{transform:translateY(-.5rem) scale(1.02);box-shadow:var(--shadow-heavy)}}
.team-photo{width:100%;border-radius:50%;max-width:10rem;margin-bottom:1rem}
.team-member h3{font-size:1.25rem;margin-bottom:.5rem}
.team-member p{font-size:1rem;color:var(--text-color);margin:0}
.text-center{text-align:center}

/* =========================================================
   Contact Page
   ========================================================= */
.contact-hero{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:#fff;text-align:center;padding:5rem 0}
.contact-hero h2{font-family:'Fira Code',monospace;font-size:3.5rem;margin-bottom:1rem;letter-spacing:.05rem}
@media (max-width:48rem){.contact-hero h2{font-size:2.75rem}}
.contact-hero p{font-size:1.25rem;opacity:.9;max-width:600px;margin:0 auto}
.contact-section{background:var(--light-bg);padding:4rem 0}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:2.5rem}
.contact-card{background:var(--bg-color);padding:2.5rem;border-radius:1rem;position:relative;overflow:hidden;box-shadow:var(--shadow-light);transition:transform var(--transition-speed),box-shadow var(--transition-speed)}
.contact-card::before{content:"";position:absolute;top:0;left:0;width:4rem;height:.5rem;background:var(--primary-color)}
@media (hover:hover){.contact-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-heavy)}}
.contact-card h3{font-family:'Fira Code',monospace;color:var(--primary-color);margin-bottom:1.5rem;font-size:1.75rem}
.contact-card p,.contact-card a{color:var(--text-color);line-height:1.6}
.contact-card a:hover{color:var(--primary-color)}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;font-weight:600;margin-bottom:.5rem}
.form-group label span{color:var(--secondary-color);margin-left:.25rem}
.form-group input,.form-group textarea{width:100%;padding:.75rem 1rem;border:1px solid #ddd;border-radius:.5rem;background:var(--bg-color);transition:border-color var(--transition-speed),box-shadow var(--transition-speed);font-family:inherit;font-size:1rem}
.form-group input:focus,.form-group textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(0,114,188,.15);outline:none}

/* =========================================================
   Installation Page
   ========================================================= */
.page-header{padding:2rem 1rem;background:var(--bg-color);border-radius:1rem;box-shadow:var(--shadow-light);margin:2rem auto;text-align:center}
.page-header h1{font-size:2.5rem;font-weight:700}
.page-header p{color:var(--text-color);margin-top:.5rem;font-size:1.1rem}
@media (max-width:48rem){.page-header,.install-process,.cta-install{margin:1rem}.page-header h1{font-size:2rem}}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem;justify-items:center}
.card{background:var(--bg-color);padding:1.5rem;border-radius:1rem;box-shadow:var(--shadow-light);transition:transform var(--transition-speed),box-shadow var(--transition-speed)}
@media (hover:hover){.card:hover{transform:translateY(-.5rem);box-shadow:var(--shadow-heavy)}}
.card h3{margin-bottom:.75rem;font-size:1.25rem;font-weight:600}
.card p{font-size:1rem;line-height:1.6}
.install-process{padding:2rem 1rem;background:var(--light-bg);border-radius:1rem;box-shadow:var(--shadow-light);margin:2rem 0}
.install-process .install-wrapper{max-width:50rem;margin:0 auto;text-align:left}
.install-process ol{list-style-position:inside;font-size:1.1rem;line-height:1.6}
.install-process li+li{margin-top:1rem}
.why-us{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:800px;margin:60px auto;padding:0 20px}
.why-us .why-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;list-style:none;padding:0;margin:24px 0}
.why-us .why-grid li{flex:0 0 auto}
@media (hover:hover){.why-us li:hover{transform:translateY(-.25rem);box-shadow:var(--shadow-heavy)}}
.why-us .btn{margin-top:32px}
.cta-install{padding:1.75rem 1rem;text-align:center;border-radius:1rem;margin:1.5rem auto;background:var(--primary-color);box-shadow:var(--shadow-light)}
.cta-install h2,.cta-install p{color:var(--bg-color)}
.cta-install h2{font-size:1.75rem;margin-bottom:.75rem}
.cta-install p{font-size:1rem;margin-bottom:.75rem}
.cta-install .btn{margin-top:.5rem;padding:.6rem 1.5rem;font-size:.95rem}
.cta-install.promotions{width:100%;padding:3.75rem 0;box-sizing:border-box}
.slides{position:relative;overflow:hidden}
.slide{display:none;width:100%;opacity:0;transition:opacity .5s ease-in-out}
.slide.active{display:block;opacity:1}
.section-title{margin-bottom:2rem}
.our-awards .slideshow{max-width:400px;margin:0 auto}

/* =========================================================
   Brands We Service
   ========================================================= */
.brands-service{padding:60px 0;background:#f9f9f9;text-align:center}
.brands-service .section-title{margin-bottom:30px;font-size:1.75rem}
.brands-slider{position:relative;width:100%;max-width:600px;margin:0 auto;overflow:hidden;height:100px}
.brand-slide{position:absolute;inset:0;width:100%;opacity:0;transition:opacity .8s ease;display:flex;align-items:center;justify-content:center}
.brand-slide.active{opacity:1}
.brands-slider .brand-slide figure{display:flex;flex-direction:column;align-items:center}
.brand-slide img{max-height:120px;object-fit:contain}
.brands-slider .brand-slide figcaption{margin-top:8px;font-size:1rem;font-weight:500;color:#333;text-align:center}

/* =========================================================
   Horizontal Brand Strip
   ========================================================= */
.brand-strip{background:var(--light-bg);padding:2rem 0}
.brand-strip-logos{display:flex;justify-content:center;align-items:center;gap:2.5rem;flex-wrap:wrap}
.brand-strip-logos img{max-height:80px;width:auto;filter:grayscale(20%);transition:transform var(--transition-speed),filter var(--transition-speed)}
@media (hover:hover){.brand-strip-logos img:hover{transform:scale(1.1);filter:grayscale(0%)}}

/* =========================================================
   Extra Small Devices Safe-guard
   ========================================================= 
@media (max-width:30rem){body{transform:scale(.9);transform-origin:top left;width:111%}}  */

/* =========================================================
   Colorful About Utilities (new)
   ========================================================= */
.accent-underline{position:relative}
.accent-underline::after{content:"";display:block;width:4rem;height:.25rem;margin:.5rem auto 0;border-radius:999px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color))}
.band-gradient{background:linear-gradient(90deg,rgba(0,114,188,.12),rgba(225,27,34,.12));padding:.85rem 0}
.band-soft{background:linear-gradient(180deg,rgba(0,114,188,.06),rgba(225,27,34,.06));padding:3rem 0}
.band-content{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;align-items:center}
.pill{display:inline-block;padding:.35rem .75rem;border-radius:999px;font-weight:600;font-size:.95rem;color:#0e2a3f;background:rgba(0,114,188,.18);border:1px solid rgba(0,114,188,.25)}
.pill--alt{background:rgba(225,27,34,.16);border-color:rgba(225,27,34,.22);color:#3d1416}
.pill--solid{color:#fff;background:var(--primary-color);border-color:transparent}
.pill--solid.pill--alt{background:var(--secondary-color)}
.card--accent{border-left:.35rem solid var(--primary-color)}
.card--accent-alt{border-left:.35rem solid var(--secondary-color)}
.card--tint{background:linear-gradient(180deg,rgba(0,114,188,.08),rgba(0,114,188,.03))}
.card--tint-alt{background:linear-gradient(180deg,rgba(225,27,34,.08),rgba(225,27,34,.03))}
.section-soft{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,114,188,.05) 100%)}
.timeline-year.pill{margin-bottom:.5rem;display:inline-block}

/* accessories images */
.cat-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.5rem;box-shadow:var(--shadow-light);margin-bottom:.75rem}

/* brand lists styling (desktop) */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.brand-card{border-radius:.75rem;padding:1rem 1.25rem;box-shadow:var(--shadow-light);background:linear-gradient(180deg,rgba(0,114,188,.08),rgba(0,114,188,.03))}
.brand-card.alt{background:linear-gradient(180deg,rgba(225,27,34,.08),rgba(225,27,34,.03))}
.brand-card.neutral{background:linear-gradient(180deg,#f5f7fa,#ffffff)}
.brand-title{display:flex;align-items:center;gap:.5rem;font-weight:700;margin:0 0 .5rem}
.brand-title .dot{width:.55rem;height:.55rem;border-radius:999px;background:var(--primary-color)}
.brand-card.alt .brand-title .dot{background:var(--secondary-color)}
.brand-card.neutral .brand-title .dot{background:#9aa4af}
.brand-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:.35rem}
.brand-item{display:flex;align-items:flex-start;gap:.5rem;padding:.35rem .5rem;border-radius:.4rem;background:rgba(255,255,255,.75)}
.brand-item::before{content:"•";color:var(--primary-color);font-weight:700;line-height:1}
.brand-card.alt .brand-item::before{color:var(--secondary-color)}
.brand-card.neutral .brand-item::before{color:#6b7280}
/* Submenu page behavior (JS-driven) */
.main-nav.submenu-open > ul{opacity:0;pointer-events:none;transform:translateX(-15%);transition:transform var(--transition-speed) ease,opacity var(--transition-speed) ease}
.main-nav.submenu-open .dropdown{transform:translateX(0)}

/* ============ Mobile Menu v3 (full-screen, centered, clean) ============ */
@media (max-width:48rem){
  /* Hide desktop nav on mobile */
  .main-nav { display:none !important; }

  /* Full-screen overlay */
  .mobile-menu{
    position:fixed; inset:0;
    width:100vw; height:100vh;
    background:linear-gradient(180deg,#0072bc 0%,#e11b22 100%);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    z-index:250;
    opacity:0; visibility:hidden; transform:translateY(-2%);
    transition:opacity var(--transition-speed), transform var(--transition-speed), visibility var(--transition-speed);
    display:grid; place-items:center; overflow:hidden;
  }
  .mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }

  /* Panels */
  .mobile-menu__panel{
    position:absolute; inset:0;
    display:grid;
    grid-template-rows:auto 1fr auto;     /* Back row, center area, bottom space */
    justify-items:center;
    align-content:start;
    padding:calc(env(safe-area-inset-top,0) + 3.5rem) 1.25rem 2rem;
    row-gap:1rem;
    transition:transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
  }
  .mobile-menu__title{ color:#fff; margin-bottom:.25rem; font-size:1.25rem; text-align:center; grid-row:1; }

  /* Back button fixed at the top of the panel */
  .menu-back{
    grid-row:1;
    margin:0 0 .75rem;
    padding:.6rem 1rem;
    color:#fff; background:transparent;
    border:1px solid rgba(255,255,255,.35);
    border-radius:.6rem; font-size:1rem; letter-spacing:.2px;
  }
  .menu-back:active{ transform:scale(.98); }

  /* Center the list in the remaining space under Back */
  .mobile-menu__list{
    grid-row:2;
    list-style:none;
    width:min(22rem,90vw);
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:1rem;
    align-self:center;      /* vertical centering within row 2 */
  }
  .mobile-menu__link{
    display:block; width:100%; text-align:center;
    padding:1rem 0; color:#fff; text-decoration:none; font-size:1.2rem; font-weight:700;
    border-bottom:1px solid rgba(255,255,255,.18); border-radius:.5rem; background:transparent;
  }
  .mobile-menu__link--chevron{ position:relative; }
  .mobile-menu__link--chevron::after{
    content:"›"; position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
    font-size:1.35rem; opacity:.95;
  }

  /* Services subpanel slide */
  .mobile-menu__panel--root{ transform:translateX(0); }
  .mobile-menu--services .mobile-menu__panel--root{ opacity:0; pointer-events:none; transform:translateX(-15%); }
  .mobile-menu__panel--services{ transform:translateX(100%); }
  .mobile-menu--services .mobile-menu__panel--services{ transform:translateX(0); }

  /* Hide when aria-hidden is true */
  .mobile-menu[aria-hidden="true"]{ opacity:0; visibility:hidden; transform:translateY(-2%); }
}

/* Lock behind when overlay open (fallback via JS will also set overflow) */
body.no-scroll{ overflow:hidden; height:100vh; }
/* Desktop default: never show the mobile overlay */
.mobile-menu { display: none; }

/* Mobile only: show and style the overlay */
@media (max-width:48rem){
  .mobile-menu { display: grid; }
}

/* brand lists styling (mobile variant: show all, simplified) */
@media (max-width:48rem){
  .brand-grid{grid-template-columns:1fr}
  .brand-card{background:#fff;border:1px solid #eee;box-shadow:none}
  .brand-title{font-size:1.125rem;margin-bottom:.25rem}
  .brand-list{gap:.25rem;max-height:none;overflow:visible}
  .brand-item{background:#fafafa;border:1px solid #f1f1f1;padding:.5rem .75rem;border-radius:.4rem}
  .brand-item:nth-child(odd){background:#fff}
}

/* =========================================================
   Duct Cleaning Slideshow - compact & responsive (scoped)
   ========================================================= */
.dv-slideshow.dv--compact{
  margin:0 auto;
  width:min(92vw,44rem);
}
.dv-slideshow.dv--compact .dv-slides{
  border-radius:.75rem;
  box-shadow:var(--shadow-light);
  overflow:hidden;
}
.dv-slideshow.dv--compact .dv-slide img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}
.dv-slideshow.dv--compact .dv-caption{
  text-align:center;
  margin-top:.4rem;
  font-weight:600;
  font-size:.95rem;
  line-height:1.35;
}
.dv-slideshow.dv--compact .dv-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.45);
  border:none;
  color:#fff;
  font-size:1.6rem;
  padding:.35rem .6rem;
  cursor:pointer;
  transition:background var(--transition-speed);
  z-index:2;
}
/* Search bar */
.brand-search{
  position:relative; display:flex; align-items:center; gap:.5rem;
  max-width:28rem; margin:0 auto 1rem;
}
.brand-search__label{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; /* accessible, visually hidden */
}
.brand-search__input{
  flex:1; padding:.75rem 2.5rem .75rem 1rem; border:1px solid #ddd; border-radius:.6rem;
  background:var(--bg-color); font-size:1rem; transition:border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.brand-search__input:focus{
  border-color:var(--primary-color); box-shadow:0 0 0 4px rgba(0,114,188,.15); outline:none;
}
.brand-search__clear{
  position:absolute; right:.5rem; background:transparent; border:none; font-size:1.4rem; line-height:1; cursor:pointer;
  color:#888; padding:.25rem; border-radius:.4rem;
}
.brand-search__clear:hover{ color:#555; background:#f1f1f1; }
.brand-search__count{
  margin-left:.5rem; font-weight:600; color:#445; min-width:4ch; text-align:right;
}

/* Accordion shell (from prior answer) */
.brand-accordion{ display:grid; gap:1rem; max-width:50rem; margin:0 auto; }
.brand-dd{ background:var(--bg-color); border-radius:.75rem; box-shadow:var(--shadow-light); overflow:hidden; border:1px solid #eee; }
.brand-dd__summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem; padding:1rem 1.25rem; font-weight:700; position:relative; }
.brand-dd[open] .brand-dd__summary i{ transform:rotate(180deg); }
.brand-dd__summary i{ margin-left:auto; transition:transform var(--transition-speed); }
.brand-dd__panel{ padding:.25rem 1rem 1rem; }

/* Scrollable list */
.brand-scroll{ max-height:260px; overflow:auto; padding-right:.5rem; }
.brand-scroll::-webkit-scrollbar{ width:10px; }
.brand-scroll::-webkit-scrollbar-track{ background:#f1f1f1; border-radius:10px; }
.brand-scroll::-webkit-scrollbar-thumb{ background:#c8c8c8; border-radius:10px; }
.brand-scroll::-webkit-scrollbar-thumb:hover{ background:#b0b0b0; }

/* Dots/accents */
.brand-title .dot, .brand-dd__summary .dot{ width:.55rem; height:.55rem; border-radius:999px; background:var(--primary-color); display:inline-block; }
.brand-dd:nth-of-type(2) .dot{ background:var(--secondary-color); }
.brand-dd:nth-of-type(3) .dot{ background:#9aa4af; }

/* Optional highlight for matches */
.brand-item.mark{ background:linear-gradient(90deg,rgba(0,114,188,.12),rgba(0,114,188,0)); border-radius:.35rem; }


.dv-slideshow.dv--compact .dv-arrow:hover{ background:rgba(0,0,0,.7); }
.dv-slideshow.dv--compact #dvPrev{ left:8px; }
.dv-slideshow.dv--compact #dvNext{ right:8px; }

/* Small, subtle city list inside the dark footer */

.footer-cities{
  margin-top:.35rem;
  font-size:.001rem;             /* very small text */
  color:var(--footer-text);     /* matches your footer color */
  opacity:.95;
}
.footer-cities__list{
  list-style:none;
  margin:.25rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .75rem;            /* row/column spacing */
  justify-content:center;
  color: var(--dark-bg);  /* same color as footer background */
}
.footer-cities__item{
  white-space:nowrap;           /* keeps each city intact */
}

.promotions .btn-primary { display: inline-block; }
.promotions .text-center { text-align: center; } /* safety, if .text-center isn't in the CSS */

.shop-wizard{ display:grid; gap:1rem; }
  .wizard-choices{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
  .wizard-step{ background:var(--bg-color); padding:1rem; border-radius:.75rem; box-shadow:var(--shadow-light); }
  .wizard-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }
  .wizard-title{ margin:0; font-size:1.25rem; }
  .wizard-back{
    border:1px solid #ddd; background:#fff; padding:.5rem .75rem; border-radius:.5rem; cursor:pointer;
    transition:transform var(--transition-speed), box-shadow var(--transition-speed);
  }

.logo a { display: inline-block; text-decoration: none; }
.logo img { display: block; }



  @media (hover:hover){ .wizard-back:hover{ transform:translateY(-1px); box-shadow:var(--shadow-light); } }

  .wizard-dropdown-row{
    display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap;
  }
  .filter-label{ font-weight:700; color:#0e2a3f; }
  .filter-select{
    padding:.75rem 1rem; border:1px solid #ddd; border-radius:.6rem; background:#fff;
    font-size:1rem; min-width:240px;
    transition:border-color var(--transition-speed), box-shadow var(--transition-speed);
  }
  .filter-select:focus{
    border-color:var(--primary-color); box-shadow:0 0 0 4px rgba(0,114,188,.15); outline:none;
  }
  .mini{ font-size:.95rem; }
  @media (max-width:48rem){
    .wizard-step{ padding:.85rem; }
    .wizard-dropdown-row{ justify-content:stretch; }
    #wizardGo{ width:100%; }
  }





@media (min-width:64rem){
  .dv-slideshow.dv--compact{ width:min(60vw,40rem); }
  .dv-slideshow.dv--compact .dv-arrow{ font-size:1.8rem; padding:.45rem .75rem; }
}
@media (max-width:48rem){
  .dv-slideshow.dv--compact{ width:min(94vw,34rem); }
  .dv-slideshow.dv--compact .dv-slide img{ aspect-ratio:4/3; }
  .dv-slideshow.dv--compact .dv-arrow{ font-size:1.4rem; padding:.3rem .55rem; }
  .dv-slideshow.dv--compact .dv-caption{ font-size:.9rem; }
}
@media (max-width:30rem){
  .dv-slideshow.dv--compact{ width:92vw; }
  .dv-slideshow.dv--compact .dv-arrow{ font-size:1.25rem; padding:.25rem .5rem; }
}
.cart-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 9999;
}

.cart-modal-backdrop.is-open {
  display: flex;
}

.cart-modal {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 1.25rem 1.25rem 1rem;
}

.cart-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.cart-modal__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.cart-modal__close {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .4rem;
}

.cart-modal__body {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: .75rem 0 1rem;
}

.cart-modal__thumb {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #f5f5f5;
  border-radius: 12px;
  padding: .25rem;
  flex: 0 0 auto;
}

.cart-modal__text p {
  margin: 0;
  color: #333;
}

.cart-modal__text .mini {
  margin-top: .25rem;
  color: #666;
  font-size: .95rem;
}

.cart-modal__actions {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: .5rem;
}

/* Make the two buttons look like your existing .btn */
.cart-modal__actions .btn {
  min-width: 180px;
  text-align: center;
}

@media (max-width: 420px) {
  .cart-modal__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .cart-modal__body {
    align-items: flex-start;
  }
}
/* Promo Banner */
.promo-banner{
  background:#0b2b55;          /* deep blue */
  color:#fff;
  font-size:.95rem;
  line-height:1.3;
}

.promo-banner__inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;   /* centers text */
  padding: .6rem 0;
}

.promo-banner__text{
  margin:0;
}

.promo-call-btn{
  color:#fff;
  font-weight:700;
  text-decoration:underline;
  margin-left:.35rem;
}

.promo-call-btn:hover{
  opacity:.9;
}

.promo-banner__close{
  border:0;
  background:transparent;
  color:#fff;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
  padding:.15rem .45rem;
  border-radius:10px;
}

.promo-banner__close:hover{
  background:rgba(255,255,255,0.12);
}

@media (max-width: 520px){
  .promo-banner__inner{
    align-items:flex-start;
    padding:.65rem 0;
  }
  .promo-banner__close{
    margin-top:-.1rem;
  }
}