:root{
      --accent:#a887b4;
      --navy:#0b3a5b;
      --bg:#eaf2f8;
      --muted:#6b7280;
      --card:#ffffff;
      --container-width:1100px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;font-family:'Poppins',sans-serif;background:var(--bg);color:#0b2030;
      -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    }
    /* Page container */
    .site-wrap{background:#fff;box-shadow:0 8px 30px rgba(2,18,29,0.06);overflow:hidden;border-radius:6px}

    /* NAV */
    header{position:relative;}
    .topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;background:transparent;}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{color:#0b3a5b;padding:6px 10px;border-radius:18px;font-weight:700;background:rgba(255,255,255,0.9)}
   
    nav{display:flex;gap:22px;align-items:center}
    nav a{color:#0b3a5b;text-decoration:none;font-weight:500;background:rgba(255,255,255,0.8);padding:8px 12px;border-radius:20px;backdrop-filter:blur(5px)}
    .btn-cta{background:var(--accent);color:#fff;padding:8px 14px;border-radius:22px;font-weight:600;border:none;cursor:pointer;transition:all 0.3s ease;text-decoration:none;display:inline-block}
    .btn-cta:hover{background:#9679a2;transform:translateY(-2px);box-shadow:0 4px 12px rgba(168,135,180,0.3)}

    /* Contact Us Today button styling */
    .cta, button.cta{background:var(--accent);color:#fff;padding:12px 24px;border-radius:26px;border:0;font-weight:700;cursor:pointer;transition:all 0.3s ease;text-decoration:none;display:inline-block;font-size:16px}
    .cta:hover, button.cta:hover{background:#9679a2;transform:translateY(-3px);box-shadow:0 8px 20px rgba(168,135,180,0.4)}

    /* Button outline styling */
    .btn-outline{background:transparent;border:2px solid rgba(255,255,255,0.18);padding:10px 16px;border-radius:8px;color:#fff;cursor:pointer;transition:all 0.3s ease;text-decoration:none;display:inline-block}
    .btn-outline:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.4);transform:translateY(-2px)}

    /* mobile nav */
    .hamburger{display:none;background:transparent;border:0;cursor:pointer;font-size:20px;z-index:1001;position:relative}
    .nav-right{display:flex;align-items:center;gap:10px}

    /* Mobile Menu Overlay */
    .mobile-menu-overlay{
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:rgba(0,0,0,0.5);
      z-index:999;
      opacity:0;
      visibility:hidden;
      transition:all 0.3s ease;
      backdrop-filter:blur(5px);
    }
    .mobile-menu-overlay.active{
      opacity:1;
      visibility:visible;
    }

    .mobile-menu{
      position:fixed;
      top:-100%;
      left:0;
      right:0;
      width:100%;
      max-height:90vh;
      background:linear-gradient(135deg,var(--navy),var(--accent));
      z-index:1000;
      transition:top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      padding:60px 20px 20px;
      color:#fff;
      overflow-y:auto;
      border-radius:0 0 20px 20px;
      box-shadow:0 10px 40px rgba(0,0,0,0.3);
      display:none;
    }
    .mobile-menu.active{
      top:0;
      display:block;
    }

    .mobile-menu-header{
      margin-bottom:25px;
      text-align:center;
      border-bottom:2px solid rgba(255,255,255,0.3);
      padding-bottom:15px;
    }
    .mobile-menu-header h3{
      margin:0;
      font-size:20px;
      color:#fff;
      font-weight:700;
      letter-spacing:0.5px;
    }

    .mobile-nav-links{
      list-style:none;
      padding:0;
      margin:0 0 25px;
      max-width:500px;
      margin-left:auto;
      margin-right:auto;
    }
    .mobile-nav-links li{
      margin-bottom:12px;
    }
    .mobile-nav-links a{
      color:#fff;
      text-decoration:none;
      font-size:17px;
      font-weight:600;
      padding:14px 20px;
      border-radius:12px;
      display:flex;
      align-items:center;
      gap:12px;
      transition:all 0.3s ease;
      background:rgba(255,255,255,0.15);
      backdrop-filter:blur(10px);
    }
    .mobile-nav-links a:hover, .mobile-nav-links a:active{
      background:rgba(255,255,255,0.25);
      transform:scale(1.02);
      box-shadow:0 4px 15px rgba(0,0,0,0.2);
    }
    .mobile-nav-links a i{
      font-size:18px;
    }

    .mobile-contact-info{
      border-top:2px solid rgba(255,255,255,0.3);
      padding-top:20px;
      max-width:500px;
      margin:0 auto;
      text-align:center;
    }
    .mobile-contact-info h4{
      margin:0 0 15px;
      font-size:17px;
      color:#fff;
      font-weight:700;
    }
    .mobile-contact-info p{
      margin:10px 0;
      font-size:15px;
      color:rgba(255,255,255,0.9);
      line-height:1.6;
    }
    .mobile-contact-info a{
      color:#fff;
      text-decoration:none;
      font-weight:500;
    }

    .mobile-social{
      display:flex;
      gap:15px;
      margin-top:20px;
      justify-content:center;
    }
    .mobile-social a{
      color:#fff;
      font-size:20px;
      padding:12px;
      width:45px;
      height:45px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,0.15);
      border-radius:50%;
      transition:all 0.3s ease;
    }
    .mobile-social a:hover, .mobile-social a:active{
      background:rgba(255,255,255,0.3);
      transform:scale(1.15);
    }

    .menu-close-btn{
      position:absolute;
      top:15px;
      right:15px;
      background:rgba(255,255,255,0.15);
      border:none;
      color:#fff;
      font-size:26px;
      cursor:pointer;
      padding:8px;
      width:45px;
      height:45px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      transition:all 0.3s ease;
    }
    .menu-close-btn:hover, .menu-close-btn:active{
      background:rgba(255,255,255,0.3);
      transform:rotate(90deg);
    }

    /* HERO */
    .hero{position:relative;height:100vh;background-image: url('assets/hero-bg-2.jpg');background-size:cover;background-position:center;background-attachment:fixed;}
    .hero::after{content:'';position:absolute;inset:0;background-image:url('assets/hero-bg.png');background-size:cover;background-position:center;}
    .hero::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);z-index:0;}
    .hero-inner{position:relative;z-index:2;display:flex;gap:30px;align-items:center;padding:48px 56px;height:100%}
    .hero-left{flex:1;color:#2d6caf;max-width:40%}
    .social-media{position:absolute;right:56px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:15px;z-index:3}
    .social-icon{color:#06060683;font-size:20px;padding:8px;background:rgba(255,255,255,0.2);border-radius:50%;text-decoration:none;transition:all 0.3s ease}
    .social-icon:hover{background:var(--accent);transform:scale(1.1)}
    .hero-bottom-text{position:absolute;bottom:30px;right:56px;color:#292929;text-align:right;z-index:3}
    .hero-bottom-text p{margin:5px 0;font-size:14px;opacity:0.9;}

    /* Quote Popup System */
    .quote-popup-container{position:fixed;top:50%;right:-320px;transform:translateY(-50%);z-index:1000;transition:right 0.3s ease}
    .quote-popup-container.active{right:0}
    .quote-toggle-btn{position:absolute;left:-50px;top:50%;transform:translateY(-50%);background:var(--accent);color:#fff;border:none;padding:15px 12px;border-radius:8px 0 0 8px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.15)}
    .quote-toggle-btn:hover{background:#9679a2;transform:translateY(-50%) scale(1.05)}
    .quote-toggle-btn i{display:block;margin-bottom:5px;font-size:16px}
    .quote-toggle-btn span{font-size:12px;font-weight:600;writing-mode:vertical-rl;text-orientation:mixed}
    .quote-popup{width:320px;height:100vh;background:#fff;box-shadow:-5px 0 20px rgba(0,0,0,0.1);overflow-y:auto}
    .quote-popup-content{padding:20px}
    .quote-close-btn{position:absolute;top:15px;right:15px;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:18px;transition:color 0.3s}
    .quote-close-btn:hover{color:var(--navy)}
    .quote-popup h3{margin:0 0 20px;color:var(--navy);font-size:18px}
    .form-group{margin-bottom:15px}
    .form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border:1px solid #e0e7ee;border-radius:6px;font-size:14px;font-family:inherit;transition:border-color 0.3s}
    .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent)}
    .submit-quote-btn{width:100%;background:var(--accent);color:#fff;border:none;padding:12px;border-radius:6px;font-weight:600;cursor:pointer;transition:background 0.3s}
    .submit-quote-btn:hover{background:#9679a2}

    /* form card */
    .quote-card{width:360px;background:var(--card);padding:18px;border-radius:10px;box-shadow:0 8px 30px rgba(2,18,29,0.12);align-self:flex-start}
    .quote-card h3{margin:0 0 12px;color:var(--navy)}
    .field{margin-bottom:10px}
    .field input,.field select,.field textarea{width:100%;padding:10px;border-radius:6px;border:1px solid #e6eef5;font-size:14px}
    .get-quote{background:var(--accent);color:#fff;padding:12px;border-radius:8px;border:0;width:100%;font-weight:700;cursor:pointer}

    /* Services section */
    .services{padding:42px 56px;background:#f6fbfd}
    .services.about-section{background:#fff;border-left:5px solid var(--accent)}
    .services.mission-section{background:linear-gradient(135deg,#f0f9ff,#e0f2fe)}
    .services.vision-section{background:linear-gradient(135deg,#fef7f0,#fef3e2)}
    .services h2{text-align:center;color:var(--navy);margin:0 0 8px}
    .services p{color:var(--muted);text-align:center;margin:0 0 22px}
    .cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
    .card{background:#fff;width:300px;border-radius:10px;padding:12px;box-shadow:0 6px 18px rgba(2,18,29,0.06);text-align:left}
    .card img{width:100%;height:150px;object-fit:cover;border-radius:6px;margin-bottom:10px}
    .about-image{width:100%;height:200px;object-fit:cover;border-radius:8px;margin:20px 0}
    .card h4{margin:6px 0}
    .card p{color:var(--muted);font-size:14px}
    .card .small-cta{display:inline-block;margin-top:10px;padding:8px 12px;border-radius:20px;background:linear-gradient(90deg,#f1a563,#ffb66b);color:#fff;font-weight:700}

    /* Blue section */
    .blue-section{background:linear-gradient(180deg,#083a63,#0d5788);color:#fff;padding:44px 56px;display:flex;gap:28px;align-items:center}
    .blue-section img{width:45%;border-radius:8px}
    .blue-section .content{flex:1}
    .blue-section h3{margin-top:0}
    .btn-outline{background:transparent;border:2px solid rgba(255,255,255,0.18);padding:10px 16px;border-radius:8px;color:#fff;cursor:pointer}

    /* why choose us */
    .why{padding:44px 56px;display:flex;gap:34px;align-items:center}
    .why .list{flex:1}
    .why img{width:320px;border-radius:8px}
    ul.checks{padding-left:18px}
    ul.checks li{margin:10px 0;color:var(--muted)}

    /* Map Section */
    .map-section{background:#f9fafb;padding:44px 56px;text-align:center}
    .map-container h3{color:var(--navy);margin:0 0 8px;font-size:28px}
    .map-container p{color:var(--muted);margin:0 0 30px;font-size:16px}
    .map-wrapper{margin:30px 0;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(2,18,29,0.1)}
    .map-wrapper iframe{display:block;width:100%;height:400px;border:0}
    .map-info{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px;text-align:left}
    .location-details h4,.contact-details h4{color:var(--navy);margin:0 0 15px;font-size:18px;display:flex;align-items:center;gap:10px}
    .location-details h4 i,.contact-details h4 i{color:var(--accent);font-size:16px}
    .location-details p,.contact-details p{color:var(--muted);margin:8px 0;line-height:1.6}
    .contact-details a{color:var(--accent);text-decoration:none;font-weight:500;transition:color 0.3s ease}
    .contact-details a:hover{color:var(--navy)}

    footer{background:linear-gradient(135deg,#083a63,#0d5788);color:#fff;padding:40px 56px;text-align:left}
    .footer-content{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:30px}
    .footer-section h4{color:#fff;margin-bottom:15px;font-weight:600}
    .footer-section p, .footer-section li{color:rgba(255,255,255,0.8);margin:8px 0}
    .footer-section ul{list-style:none;padding:0}
    .footer-section a{color:rgba(255,255,255,0.8);text-decoration:none;transition:color 0.3s}
    .footer-section a:hover{color:#fff}
    .footer-social{display:flex;gap:12px;margin-top:15px}
    .footer-social a{background:rgba(255,255,255,0.1);padding:8px;border-radius:50%;transition:all 0.3s}
    .footer-social a:hover{background:var(--accent);transform:translateY(-2px)}
    .footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;text-align:center;color:rgba(255,255,255,0.6)}

    /* Responsive */
    @media(max-width:980px){
      .hero-inner{flex-direction:column;align-items:flex-start;padding:28px}
      .hero-left{max-width:100%}
      .hero::before{background:rgba(255,255,255,0.7);}
      .quote-card{width:100%;order:2}
      .hero{height:auto;background-position:center;padding-bottom:26px;background-attachment:scroll;min-height:80vh}
      .blue-section{flex-direction:column;padding:30px 20px}
      .blue-section img{width:100%;margin-bottom:20px}
      nav{display:none}
      .hamburger{display:block;color:#0b3a5b;padding:8px;min-height:44px;min-width:44px}
      /* Show mobile menu only on mobile */
      .mobile-menu{display:block}
      .topbar{padding:12px 18px}
      .site-wrap{margin:0;border-radius:0}
      .cards{justify-content:center;gap:15px}
      .card{width:calc(50% - 8px);min-width:280px}
      .social-media{position:static;transform:none;flex-direction:row;justify-content:center;margin:20px 0;gap:20px}
      .hero-bottom-text{position:static;text-align:center;margin-top:20px}
      .footer-content{grid-template-columns:1fr;gap:20px;text-align:center}
      .quote-popup-container{right:-100vw}
      .quote-popup-container.active{right:0}
      .quote-popup{width:100vw}
      .quote-toggle-btn{left:-60px;min-height:50px}
      .services{padding:30px 20px}
      .why{padding:30px 20px;flex-direction:column}
      .why .list{text-align:center}
      .why img{width:100%;margin-top:20px;max-width:400px}
      .map-section{padding:30px 20px}
      .map-info{grid-template-columns:1fr;gap:25px;text-align:center}
      /* Hide Get An Estimate button in nav on mobile */
      .nav-right .btn-cta{display:none}
    }
    @media(max-width:520px){
      h1{font-size:24px;line-height:1.2}
      .hero{min-height:100vh}
      .hero::before{background:rgba(255,255,255,0.85)!important;}
      .hero-inner{align-items:center;text-align:center;justify-content:center}
      .hero-left{text-align:center;max-width:100%}
      .card{width:100%;margin-bottom:15px;max-width:none}
      .cards{flex-direction:column;align-items:center}
      .why{flex-direction:column;text-align:center}
      .why img{width:100%;max-width:300px}
      .topbar{padding:10px 15px;flex-wrap:wrap}
      .brand{order:1;flex:1}
      .hamburger{order:2;margin-left:auto}
      .hero-inner{padding:20px 15px}
      .hero-left{padding:0}
      .services{padding:25px 15px}
      .blue-section{padding:25px 15px;text-align:center}
      .map-section{padding:25px 15px}
      footer{padding:25px 15px}
      .footer-content{gap:15px}
      .social-media{gap:15px}
      .quote-toggle-btn{font-size:11px;padding:12px 8px}
      .map-wrapper iframe{height:300px}
      .map-info{gap:20px}
      /* Better button sizing on mobile */
      .cta, .btn-cta, .btn-outline{
        padding:12px 20px;
        font-size:14px;
        min-height:44px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
      }
      .submit-quote-btn{
        min-height:44px;
        font-size:16px;
      }
      /* Improve text readability on mobile */
      .eyebrow{font-size:12px}
      .lead{font-size:14px;line-height:1.5}
      .hero-bottom-text p{font-size:12px}
      /* Mobile navigation improvements */
      .hamburger{
        background:rgba(255,255,255,0.9);
        border-radius:6px;
        padding:10px;
      }
      /* Better mobile spacing */
      .services h2, .blue-section h3, .why h3, .map-container h3{
        font-size:22px;
        margin-bottom:15px;
      }
      .services p, .blue-section p, .why p, .map-container p{
        font-size:14px;
        line-height:1.6;
      }
      /* Mobile card improvements */
      .card{
        padding:16px;
        margin-bottom:20px;
      }
      .card h4{
        font-size:18px;
        margin:10px 0;
      }
      .card p{
        font-size:14px;
        line-height:1.5;
      }
      /* Mobile form improvements */
      .form-group input, .form-group select, .form-group textarea{
        padding:14px;
        font-size:16px; /* Prevents zoom on iOS */
      }
      /* Footer mobile improvements */
      .footer-section h4{
        font-size:18px;
        margin-bottom:10px;
      }
      .footer-section p, .footer-section li{
        font-size:14px;
        line-height:1.5;
      }
    }
    /* small transitions */
    .card, .quote-card, .hero-left .cta, .get-quote{transition:transform .22s ease, box-shadow .22s ease}
    .card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,18,29,0.1)}
    .quote-card:focus-within{transform:translateY(-4px)}