/* ── CSS Variables ── */
    :root {
      --primary:        #008002;
      --primary-light:  #33a035;
      --primary-dark:   #006001;
      --secondary:      #FF801A;
      --secondary-dark: #e06000;
      --green-light:    #EBF4E8;
      --gray-light:     #F4F4F4;
      --top-bar:        #DAA521;
      --text-main:      #333333;
      --text-muted:     #9e9d9d;
      --border-btn:     5.656px;
    }

    /* ── Base ── */
    body { font-family: 'DM Sans', sans-serif !important; color: var(--text-main); background: #fff; }
    h1, h2, h3, h4, h5, .font-heading { font-family: 'Nobile', sans-serif !important; }

    /* ── Colour Utilities ── */
    .text-primary-brand   { color: var(--primary)   !important; }
    .text-secondary-brand { color: var(--secondary) !important; }
    .text-muted-brand     { color: var(--text-muted)!important; }
    .bg-primary-brand     { background-color: var(--primary)    !important; }
    .bg-secondary-brand   { background-color: var(--secondary)  !important; }
    .bg-green-light       { background-color: var(--green-light)!important; }
    .bg-gray-light        { background-color: var(--gray-light) !important; }
    .bg-top-bar           { background-color: var(--top-bar)    !important; }

    /* ── Buttons ── */
    .btn-primary-brand {
      background-color: var(--primary); color: #fff;
      border-radius: var(--border-btn); border: none;
      font-weight: 600; text-transform: uppercase; font-size: .875rem;
      transition: background-color .2s;
    }
    .btn-primary-brand:hover, .btn-primary-brand:focus { background-color: var(--primary-dark); color: #fff; }
    .btn-primary-brand:disabled { opacity: .4; cursor: not-allowed; }

    .btn-secondary-brand {
      background-color: var(--secondary); color: #fff;
      border-radius: var(--border-btn); border: none;
      font-weight: 600; text-transform: uppercase; font-size: .875rem;
      transition: background-color .2s;
    }
    .btn-secondary-brand:hover { background-color: var(--secondary-dark); color: #fff; }

    .btn-white {
      background-color: #fff; color: #000;
      border-radius: var(--border-btn); border: none;
      font-weight: 600; text-transform: uppercase; font-size: .875rem;
      transition: background-color .2s;
    }
    .btn-white:hover { background-color: #f1f1f1; }

    .btn-white-primary {
      background-color: #fff; color: var(--primary);
      border-radius: var(--border-btn); border: 2px solid var(--primary);
      font-weight: 600; text-transform: uppercase; font-size: .875rem;
      transition: background-color .2s, color .2s;
    }
    .btn-white-primary:hover { background-color: var(--primary); color: #fff; }

    .btn-text-muted {
      font-family: 'DM SANS';
      background: none; border: none; color: var(--text-muted);
      font-size: .875rem; transition: color .2s; width: 100%;
    }
    .btn-text-muted:hover { color: var(--primary); }

    /* ── Top Bar ── */
    .top-bar { background-color: var(--top-bar); }

    /* ── Navbar ── */
    .site-navbar {
      background-color: #f8f9fa;
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
      position: sticky; top: 0; z-index: 1050;
    }

    /* ── Hero ── */
    .hero-section { position: relative; min-height: 580px; display: flex; align-items: center; overflow: hidden; }
    .hero-bg { position: absolute; inset: 0; background: url('https://greenergyair.com/wp-content/uploads/2026/05/estimator-hero.jpg') center/cover no-repeat; }
    .hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
    .hero-content { position: relative; z-index: 10; animation: fadeUp 1s ease forwards; }
    @keyframes fadeUp { from { opacity:0; transform:translateY(2rem); } to { opacity:1; transform:translateY(0); } }
    .badge-promo {
      background-color: var(--secondary); color: #fff;
      font-size: .75rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; padding: .375rem .75rem; border-radius: 4px; display: inline-block;
    }

    /* ── Benefits ── */
    .benefit-card {
      background: #fff; border-radius: .5rem; padding: 1.5rem;
      box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: box-shadow .3s; height: 100%;
    }
    .benefit-card:hover { box-shadow: 0 4px 16px rgba(0,128,2,.12); }
    .benefit-card:hover h3 { color: var(--primary); }

    /* ── Step Indicator ── */
    .step-indicator { display: flex; align-items: flex-start; max-width: 32rem; margin: 0 auto 2.5rem; }
    .step-node { display: flex; flex-direction: column; align-items: center; flex: 1; }
    .step-circle {
      width: 2.5rem; height: 2.5rem; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: .875rem; border: 2px solid #d1d5db;
      background: #fff; color: #9ca3af; transition: all .3s;
    }
    .step-circle.active   { background: var(--primary); border-color: var(--primary); color: #fff; }
    .step-circle.complete { background: var(--primary); border-color: var(--primary); color: #fff; }
    .step-label { font-size: .75rem; font-weight: 600; margin-top: .375rem; color: #9ca3af; text-align: center; }
    .step-label.active { color: var(--primary); }
    .step-connector { flex: 1; height: 2px; background: #e5e7eb; margin-top: 1.25rem; transition: background .3s; }
    .step-connector.active { background: var(--primary); }

    /* ── Estimator Panel ── */
    .estimator-panel {
      background: #fff; border: 1px solid #e5e7eb;
      border-radius: .75rem; padding: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .step-badge {
      width: 1.5rem; height: 1.5rem; border-radius: 50%;
      background-color: var(--primary); color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .75rem; font-weight: 700; flex-shrink: 0;
    }
    .step-badge.done { background-color: var(--secondary); }
    .form-control:focus, .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 .2rem rgba(0,128,2,.15);
    }
    .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

    /* ── Promo / Discount Banners (Step 1) ── */
    .discount-banner {
      background: rgba(255,128,26,.1); border: 2px solid rgba(255,128,26,.3);
      border-radius: .75rem; padding: 1rem 1.25rem;
    }
    .estimate-locked-banner {
      background: rgba(0,128,2,.05); border: 1px solid rgba(0,128,2,.2);
      border-radius: .5rem; padding: .75rem 1rem;
    }

    /* ── Trust Badges (Step 2) ── */
    .trust-badge {
      display: flex; flex-direction: column; align-items: center;
      gap: .375rem; border-radius: .75rem; padding: .75rem; text-align: center;
    }
    .trust-badge-icon {
      width: 2.5rem; height: 2.5rem; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .trust-badge.green { background: var(--green-light); border: 1px solid rgba(0,128,2,.2); }
    .trust-badge.orange { background: rgba(255,128,26,.05); border: 1px solid rgba(255,128,26,.2); }
    .trust-badge.yellow { background: #fefce8; border: 1px solid #fef08a; }

    /* ── Step 3: Estimate Revealed ── */
    .estimate-reveal-box {
      background: var(--green-light); border: 1px solid rgba(0,128,2,.2);
      border-radius: .75rem; padding: 1.5rem;
    }
    .discount-reveal-box {
      background: rgba(255,128,26,.1); border: 1px solid rgba(255,128,26,.2);
      border-radius: .75rem; padding: 1rem; text-align: center;
    }

    /* ── Sidebar ── */
    .sidebar-estimate {
      background: var(--green-light); border: 1px solid rgba(0,128,2,.2);
      border-radius: .75rem; padding: 1.5rem; position: sticky; top: 5.5rem;
    }
    .sidebar-locked {
      background: rgba(0,128,2,.1); border: 1px solid rgba(0,128,2,.2);
      border-radius: .5rem; padding: .75rem; margin-top: 1rem;
    }
    .blurred-price { filter: blur(6px); user-select: none; }
    .trust-card { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1.5rem; }

    /* ── Service Cards ── */
    .service-card { background:#fff; height: 100%; border-radius:.75rem; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06); transition:box-shadow .3s; }
    .service-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.12); }
    .service-card img { transition:transform .5s; }
    .service-card:hover img { transform:scale(1.05); }
    .service-card:hover h3 { color:var(--primary); }

    /* ── Testimonials ── */
    .testimonial-featured { background:var(--green-light); border-radius:.75rem; padding:2rem; position:relative; }
    .testimonial-quote-icon { position:absolute; top:1.5rem; left:1.5rem; width:2.5rem; height:2.5rem; color:rgba(0,128,2,.2); }
    .testimonial-dot { width:.625rem; height:.625rem; border-radius:50%; background:#d1d5db; border:none; padding:0; transition:all .3s; cursor:pointer; }
    .testimonial-dot.active { background:var(--primary); width:1.5rem; border-radius:999px; }
    .testimonial-card { background:#fff; border:1px solid #f3f4f6; border-radius:.75rem; padding:1.5rem; box-shadow:0 1px 4px rgba(0,0,0,.04); transition:box-shadow .3s; height:100%; }
    .testimonial-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); }

    /* ── Avatar / Social / Other ── */
    .avatar { background:var(--primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
    .social-btn { width:2.25rem; height:2.25rem; background:var(--gray-light); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); transition:background-color .2s,color .2s; text-decoration:none; }
    .social-btn:hover { background:var(--primary); color:#fff !important; }
    .issue-card { background:#fff; border-radius:.5rem; padding:1rem; box-shadow:0 1px 4px rgba(0,0,0,.06); display:flex; gap:.75rem; align-items:flex-start; }
    .process-step-num { width:4rem; height:4rem; background:var(--primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Nobile',sans-serif; font-weight:700; font-size:1.25rem; margin:0 auto 1rem; transition:background-color .2s; }
    .process-step:hover .process-step-num { background:var(--primary-dark); }
    .cta-banner { background-color:var(--primary); }
    .promo-banner { background-color:var(--primary); }
    .exp-badge { position:absolute; bottom:-1rem; left:-1rem; background:var(--primary); color:#fff; border-radius:.75rem; padding:1rem; box-shadow:0 4px 16px rgba(0,0,0,.2); }
    .footer-main { background:#fff; }
    .footer-bottom { background:#000; }
    .value-item:hover h3 { color:var(--primary); }
    .check-item svg { flex-shrink:0; color:var(--primary); }
    footer a {
      color: var(--secondary) !important;
      text-decoration: none !important;
    }
    footer a:hover {
        color: var(--secondary) !important;
    }
    .page-template-page-duct-cleaning-cost-estimator footer .sitemap-link, .page-template-page-duct-cleaning-cost-estimator footer .policypage-link{
        display: none !important;
    }
    .footer-contact-col li .text-muted-brand {
        padding-left: 20px;
    }
    .footer-contact-col li .text-muted-brand svg {
        margin-left: -20px;
    }

    /* Step panels — shown/hidden via JS */
    .step-panel { display: none; }
    .step-panel.active { display: block; }

    /* Add this to your existing <style> block */

    /* ── Process Step Connectors ── */
    .process-step-wrapper {
      position: relative;
    }
    .process-connector-line {
      display: none;
    }
    
    .form-select, .form-control {
        font-family: 'DM Sans' !important;
    }
    
    @media (min-width: 992px) {
      .process-connector-line {
        display: block;
        position: absolute;
        top: 2rem; /* half of the 4rem circle height */
        left: 50%;
        width: calc(100% - 2rem); /* stops short of the next circle */
        height: 2px;
        background-color: rgba(0, 128, 2, 0.2);
        z-index: 0;
      }
    }
    .process-step-num {
      position: relative;
      z-index: 1; /* keeps the circle above the line */
    }