/* ===========================================================
     Gusty Heating & Cooling landing page
     Real brand: sky-blue #0EB6F1 · charcoal #273038 · white
     Fonts: Albert Sans (body) · Archivo (display/headings)
     =========================================================== */
  :root{
    --blue:#0EB6F1;          /* primary brand / CTA */
    --blue-2:#00B9F4;        /* bright variant */
    --blue-d:#0a98cc;        /* hover */
    --ink:#273038;           /* charcoal text + dark bands */
    --ink-2:#3a444d;
    --grey:#69727d;          /* body text */
    --grey-2:#9aa3ab;
    --rose:#cc3366;          /* sparing accent */
    --bg:#f5fbfe;            /* very light page tint */
    --tint:#eaf7fd;          /* light-blue section band */
    --line:#e4eef4;
    --white:#ffffff;
    --maxw:1290px;
    --side:75px;
    /* legacy aliases so existing class names keep working */
    --navy:var(--ink);
    --orange:var(--blue);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Albert Sans',sans-serif;color:var(--ink);background:var(--white);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4,.display{font-family:'Archivo',sans-serif;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
  img{max-width:100%;display:block}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--side)}
  .full{width:100%}
  .orange{color:var(--blue)}
  .ph{background:#cfe9f5;position:relative;overflow:hidden}
  .ph-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(39,48,56,.30)}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:10px;font-family:'Albert Sans';font-weight:700;font-size:16px;border:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn .lab{display:inline-flex;align-items:center}
  .pill-white{background:#fff;color:var(--blue);border-radius:999px;padding:16px 28px;box-shadow:0 6px 18px rgba(14,182,241,.12)}
  .pill-orange{background:var(--blue);color:#fff;border-radius:999px;padding:16px 28px;box-shadow:0 8px 20px rgba(14,182,241,.28)}
  .pill-orange:hover{background:var(--blue-d)}
  .circ{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
  .circ-orange{background:var(--blue);color:#fff}
  .circ-white{background:#fff;color:var(--blue)}
  .circ-navy{background:var(--ink);color:#fff}
  .btn-group{display:inline-flex;align-items:center;gap:8px}

  /* ---------- top bar ---------- */
  .topbar{background:var(--ink);color:#fff;font-size:14px}
  .topbar .wrap{display:flex;justify-content:flex-end;padding-top:11px;padding-bottom:11px}
  .topbar .orange{color:var(--blue-2)}

  /* ---------- header (white, in normal flow above hero) ---------- */
  .header{position:relative;z-index:5;background:#fff;border-bottom:1px solid var(--line)}
  .hero .header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;flex-wrap:nowrap;gap:16px;grid-template-columns:none}
  .logo img{height:46px;width:auto;display:block}
  .nav{display:flex;gap:28px;color:var(--ink);font-weight:600;font-size:16px;flex:0 1 auto;min-width:0;margin:0 auto;align-items:center}
  .nav a:hover{color:var(--blue)}
  /* Services dropdown */
  .nav .has-drop{position:relative;display:inline-flex;align-items:center}
  .nav .has-drop>a::after{content:"";display:inline-block;margin-left:7px;border:5px solid transparent;border-top-color:currentColor;border-bottom:0;vertical-align:middle;opacity:.65;transition:transform .15s ease}
  .nav .has-drop:hover>a::after{transform:rotate(180deg)}
  .nav .has-drop::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:16px}
  .nav .drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(39,48,56,.16);padding:8px;min-width:262px;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:80}
  .nav .has-drop:hover .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .nav .drop a{padding:11px 15px;border-radius:9px;color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap}
  .nav .drop a:hover{background:var(--tint);color:var(--blue)}
  .header-right{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;flex:0 0 auto}
  .phone{display:flex;align-items:center;gap:10px;color:#fff;background:var(--blue);border-radius:999px;padding:11px 20px;font-family:'Albert Sans';font-weight:700;font-size:17px;white-space:nowrap}

  /* ---------- hero (LIGHT split + white form card) ---------- */
  .hero{position:relative;background:var(--bg);color:var(--ink)}
  .hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:42%;background:var(--tint);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);z-index:0}
  .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 520px;gap:54px;align-items:center;padding-top:74px;padding-bottom:80px}
  .hero h1{font-size:58px;font-weight:800;margin-bottom:24px;color:var(--ink)}
  .hero h1 .l1{color:var(--blue)}
  .hero-sub{color:var(--grey);font-size:18px;max-width:440px;margin-bottom:30px}
  .hero-checks{display:flex;flex-wrap:wrap;gap:14px 30px;margin-bottom:36px}
  .hero-checks .c{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;color:var(--ink)}
  .check-o{color:var(--blue);flex:0 0 auto}
  /* form card: white, sky-blue header bar */
  .form-card{background:#fff;border-radius:16px;padding:0 30px 32px;border:1px solid var(--line);box-shadow:0 26px 60px rgba(39,48,56,.12);overflow:hidden}
  .form-card h3{font-family:'Archivo';font-weight:800;font-size:26px;text-align:center;color:#fff;background:var(--blue);margin:0 -30px 24px;padding:22px 24px}
  .form-card .div{display:none}
  .field{background:#f1f6f9;border:1px solid var(--line);border-radius:9px;color:var(--ink);font-family:'Albert Sans';font-size:15px;padding:14px 16px;width:100%;margin-bottom:13px}
  .field::placeholder{color:#8b96a0}
  .field:focus{outline:none;border-color:var(--blue);background:#fff}
  textarea.field{resize:none;height:88px}
  .form-card .submit{display:flex;justify-content:center;margin-top:6px}
  .form-card .submit .pill-orange{width:100%;justify-content:center}

  /* ---------- stats ---------- */
  .stats{background:var(--tint)}
  .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-top:44px;padding-bottom:44px}
  .stat{text-align:center;position:relative}
  .stat+.stat::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:#cfe6f2}
  .stat .num{font-family:'Archivo';font-weight:800;font-size:50px;color:var(--blue);line-height:1}
  .stat .lab{color:var(--grey);font-size:17px;margin-top:8px}

  /* ---------- logo strip ---------- */
  .logos{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .logos .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:34px;padding-bottom:34px}
  .logos .l img{height:38px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
  .logos .l:hover img{filter:none;opacity:1}

  /* ---------- features A (cards left, heading right) ---------- */
  .feata{background:var(--tint);color:var(--ink)}
  .feata .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:88px;padding-bottom:88px;align-items:center}
  .feata-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .acard{background:#fff;color:var(--ink);border-radius:14px;padding:26px;box-shadow:0 10px 30px rgba(39,48,56,.05)}
  .acard .ic{width:48px;height:48px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:18px}
  .acard h5{font-family:'Archivo';color:var(--ink);font-size:18px;font-weight:700;margin-bottom:10px}
  .acard p{color:var(--grey);font-size:14px}
  .feata h2{font-size:42px;font-weight:800;margin-bottom:20px}
  .feata h2 .orange{color:var(--blue)}
  .feata .lead{color:var(--grey);margin-bottom:30px;max-width:440px}

  /* ---------- reviews ---------- */
  .reviews{background:#fff}
  .reviews .wrap{padding-top:90px;padding-bottom:38px}
  .reviews h2{font-size:44px;font-weight:800;text-align:center;margin-bottom:16px}
  .reviews .lead{text-align:center;max-width:620px;margin:0 auto 44px}
  .rev-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
  .gcard{background:var(--blue);color:#fff;border-radius:16px;padding:32px;display:flex;flex-direction:column;justify-content:space-between}
  .gcard .g{width:54px;height:54px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:800;font-size:26px;margin-bottom:18px}
  .gcard .stars{margin-bottom:10px}
  .gcard h4{font-family:'Archivo';font-size:20px;font-weight:700;margin-bottom:24px;color:#fff}
  .gcard .gpill{background:rgba(255,255,255,.18);color:#fff;border-radius:999px;padding:9px 16px;font-size:12px;align-self:flex-start}
  .tcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 10px 30px rgba(39,48,56,.05)}
  .tcard .stars{margin-bottom:16px}
  .tcard p{color:var(--grey);font-size:14px;line-height:1.6;margin-bottom:22px}
  .tcard .who{display:flex;justify-content:space-between;align-items:center}
  .tcard .who b{font-family:'Archivo';font-size:15px}
  .tcard .who span{color:var(--grey-2);font-size:12px}
  .stars{color:var(--blue);letter-spacing:3px;font-size:16px}
  .rev-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:40px}

  /* ---------- section heads ---------- */
  .sec{padding-top:90px;padding-bottom:90px}
  .eyebrow-center{text-align:center}
  h2.h{font-size:44px;font-weight:800}
  .lead{color:var(--grey);font-size:17px;line-height:1.6}

  /* ---------- steps ---------- */
  .steps .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .steps h2{font-size:44px;font-weight:800;margin-bottom:18px}
  .steps .lead{max-width:420px;margin-bottom:36px}
  .step{display:grid;grid-template-columns:54px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:none}
  .step .n{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:700;font-size:18px}
  .step.active .n{background:var(--blue);color:#fff}
  .step .n.dim{background:var(--tint);color:var(--blue)}
  .step h4{font-family:'Archivo';font-size:22px;font-weight:700;margin-bottom:8px}
  .step.active{border-bottom:2px solid var(--blue)}
  .step p{color:var(--grey);font-size:15px;max-width:400px}
  .steps-right{position:relative}
  .steps-img{width:100%;height:600px;border-radius:14px}
  .steps-cta{background:var(--blue);color:#fff;border-radius:12px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:-60px;width:100%;position:relative}
  .steps-cta p{font-family:'Archivo';font-weight:700;font-size:20px;line-height:1.25}
  .steps-note{text-align:right;font-style:italic;font-weight:600;margin-top:16px}

  /* ---------- marquee ---------- */
  .marquee{background:var(--blue);color:#fff;overflow:hidden;padding:16px 0}
  .marquee .track{display:flex;gap:60px;white-space:nowrap;font-family:'Archivo';font-weight:700;font-size:18px;letter-spacing:.06em;animation:scroll 24s linear infinite}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- savings (SKY-BLUE band) ---------- */
  .savings{background:var(--blue);color:#fff}
  .savings .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:90px;padding-bottom:90px;align-items:center}
  .savings h2{font-size:44px;font-weight:800;margin-bottom:20px;color:#fff}
  .savings .orange{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5)}
  .savings .lead{color:rgba(255,255,255,.92);max-width:440px;margin-bottom:34px}
  .coupons{display:flex;gap:24px}
  .coupon{flex:1;border-radius:12px;padding:30px 24px;text-align:center}
  .coupon.fill{background:#fff;color:var(--blue)}
  .coupon.fill .big{font-family:'Archivo';font-weight:800;font-size:42px;color:var(--blue)}
  .coupon.fill .div{height:1px;background:var(--line);margin:14px 0}
  .coupon.fill h4{font-family:'Archivo';font-size:22px;font-weight:700;margin-bottom:8px;color:var(--ink)}
  .coupon.fill p{font-size:14px;color:var(--grey)}
  .coupon.dash{border:2px dashed rgba(255,255,255,.8);background:transparent}
  .coupon.dash .big{font-family:'Archivo';font-weight:800;font-size:42px;color:#fff}
  .coupon.dash h4{color:#fff;font-family:'Archivo';font-size:20px;margin-top:6px}
  .dots{display:flex;gap:10px;justify-content:center;margin-top:30px}
  .dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.45)}
  .dot.on{background:#fff}

  /* ---------- services ---------- */
  .services{background:#fff}
  .services .wrap{padding-top:90px;padding-bottom:90px}
  .services h2{font-size:44px;font-weight:800;text-align:center;margin-bottom:18px}
  .services .orange{color:var(--blue)}
  .services .lead{text-align:center;max-width:640px;margin:0 auto 40px}
  .tabs{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
  .tab{background:var(--tint);color:var(--ink);border-radius:999px;padding:15px 26px;font-weight:700;font-size:16px;cursor:pointer;transition:background .15s ease,color .15s ease}
  .tab.on{background:var(--blue);color:#fff}
  .svc-card{border:1px solid var(--line);border-radius:16px;padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;box-shadow:0 14px 40px rgba(39,48,56,.05)}
  .services .svc-card{display:none}
  .services .svc-card.on{display:grid}
  /* Contact-page social proof (replaces 2nd lead form) */
  .cproof .gbadge{justify-content:flex-start;margin-bottom:24px}
  .cproof-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:0 10px 30px rgba(39,48,56,.05);margin-bottom:16px}
  .cproof-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .cproof-card .stars{color:var(--blue);letter-spacing:2px;font-size:15px}
  .cproof-card .gg{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:800;color:var(--blue);font-size:14px}
  .cproof-card p{color:#36424c;line-height:1.6;margin-bottom:12px}
  .cproof-card .who b{font-family:'Archivo';display:block;color:var(--ink);font-size:14px}
  .cproof-card .who span{color:var(--grey);font-size:12px}
  .svc-card h3{font-family:'Archivo';font-size:34px;font-weight:700;margin-bottom:18px}
  .svc-card .lead{margin-bottom:24px}
  .svc-list{list-style:none;margin-bottom:30px}
  .svc-list li{display:flex;gap:12px;align-items:center;color:var(--grey);margin-bottom:14px}
  .svc-img{width:100%;height:430px;border-radius:12px}

  /* ---------- promotions (deals) ---------- */
  .promos{background:var(--blue);color:#fff}
  .promos .wrap{padding-top:84px;padding-bottom:84px}
  .promos h2{font-size:44px;font-weight:800;text-align:center;margin-bottom:14px;color:#fff}
  .promos h2 .o{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:6px}
  .promos .lead{text-align:center;max-width:640px;margin:0 auto 44px;color:rgba(255,255,255,.92)}
  .promo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .pcard{background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(0,0,0,.12)}
  .pcard-img{height:170px;border-bottom:1px solid var(--line)}
  .pcard-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
  .pcard-brand{display:inline-flex;align-items:center;height:22px;margin-bottom:14px;font-family:'Archivo';font-weight:800;color:var(--ink);font-size:15px}
  .pcard-brand img{height:20px;width:auto}
  .pcard h4{font-family:'Archivo';font-size:18px;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:10px}
  .pcard p{color:var(--grey);font-size:13.5px;line-height:1.55;margin-bottom:20px;flex:1}
  .pcard-foot{display:flex;flex-direction:column;align-items:stretch;gap:14px;border-top:1px solid var(--line);padding-top:18px}
  .pcard .price{font-family:'Archivo';font-weight:800;font-size:30px;color:var(--blue);line-height:1}
  .pcard .pill-orange{padding:12px 18px;font-size:14px;white-space:nowrap;justify-content:center;text-align:center}
  .promos-note{text-align:center;color:rgba(255,255,255,.9);font-size:14px;font-style:italic;margin-top:34px}

  /* ---------- features grid ---------- */
  .features{background:var(--tint);color:var(--ink)}
  .features .wrap{padding-top:90px;padding-bottom:90px}
  .features .top{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:50px;align-items:end}
  .features h2{font-size:46px;font-weight:800}
  .features h2 .orange{color:var(--blue)}
  .features .top .lead{color:var(--grey)}
  .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .fcard{background:#fff;border-radius:14px;padding:36px 32px;color:var(--ink);box-shadow:0 10px 30px rgba(39,48,56,.05)}
  .fcard .ic{width:62px;height:62px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:26px}
  .fcard h4{font-family:'Archivo';color:var(--ink);font-size:22px;font-weight:700;line-height:1.25;margin-bottom:14px}
  .fcard p{color:var(--grey);font-size:15px}

  /* ---------- cta band ---------- */
  .ctaband{background:#fff}
  .ctaband .wrap{padding-top:60px;padding-bottom:60px}
  .ctaband .inner{background:var(--blue);color:#fff;border-radius:16px;padding:44px 50px;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center}
  .ctaband h2{font-size:34px;font-weight:800;line-height:1.2;color:#fff}
  .ctaband .r{display:flex;flex-direction:column;gap:18px}
  .ctaband p{font-size:14px;opacity:.95;max-width:360px}

  /* ---------- recent work ---------- */
  .work{background:#fff}
  .work .wrap{padding-top:60px;padding-bottom:90px;text-align:center}
  .work h2{font-size:44px;font-weight:800;margin-bottom:46px}
  .work-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:center}
  .work-card{border-radius:14px;height:300px;position:relative;background:linear-gradient(180deg,#7fc7e6,#0e6f97);display:flex;align-items:flex-end;padding:26px;color:#fff;text-align:left}
  .work-card.mid{height:360px}
  .work-card h4{font-family:'Archivo';font-size:18px;font-weight:700;line-height:1.3;color:#fff}
  .work-card .wa{position:absolute;top:18px;right:18px}
  .work-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:40px}
  .progress{width:300px;height:4px;background:#e6f3fa;border-radius:4px;position:relative}
  .progress::before{content:"";position:absolute;left:0;top:0;height:100%;width:35%;background:var(--blue);border-radius:4px}
  .nav-circ{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}

  /* ---------- additional services ---------- */
  .addl{background:#fff}
  .addl .wrap{padding-top:30px;padding-bottom:70px;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
  .addl h2{font-size:34px;font-weight:800;margin-bottom:16px}
  .addl .lead{margin-bottom:28px;max-width:360px}
  .addl-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
  .addl-cols .it{display:flex;gap:10px;align-items:center;color:var(--grey);font-size:14px}

  /* ---------- map ---------- */
  .map{position:relative;height:430px;background:#e6f1f6;overflow:hidden}
  .map .grid-bg{position:absolute;inset:0;background-image:linear-gradient(#cfe2eb 1px,transparent 1px),linear-gradient(90deg,#cfe2eb 1px,transparent 1px);background-size:70px 70px;opacity:.7}
  .map .roads{position:absolute;inset:0}
  .map .pin{position:absolute;width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--blue);transform:rotate(-45deg);box-shadow:0 4px 10px rgba(14,182,241,.35)}
  .map-card{position:absolute;right:120px;top:60px;background:var(--blue);color:#fff;border-radius:14px;padding:32px;width:330px;text-align:center}
  .map-card .ic{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
  .map-card h4{font-family:'Archivo';font-size:20px;font-weight:700;margin-bottom:10px;color:#fff}
  .map-card p{font-size:13px;opacity:.95;margin-bottom:18px}

  /* ---------- about stats ---------- */
  .about{background:#fff}
  .about .wrap{padding-top:80px;padding-bottom:60px}
  .about .head{margin-bottom:40px}
  .about h2{font-size:40px;font-weight:800}
  .about h2 .o{color:var(--blue)}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
  .about-img{width:100%;height:430px;border-radius:12px}
  .statbox{border:1px solid var(--line);border-radius:14px;padding:28px 30px;margin-bottom:22px}
  .statbox.peach{background:var(--tint);border:1px solid #cfe6f2}
  .statbox.peach .big{color:var(--blue)}
  .statbox .big{font-family:'Archivo';font-size:46px;font-weight:800;margin-bottom:10px;color:var(--ink)}
  .statbox p{color:var(--grey);font-size:14px;max-width:320px}

  /* ---------- why list ---------- */
  .why{background:#fff}
  .why .wrap{padding-top:60px;padding-bottom:70px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
  .why h2{font-size:40px;font-weight:800}
  .why h2 .o{color:var(--blue)}
  .why .it{padding:22px 0;border-bottom:1px solid var(--line)}
  .why .it h4{font-family:'Archivo';color:var(--ink);font-size:20px;font-weight:700;margin-bottom:8px}
  .why .it p{color:var(--grey);font-size:14px}

  /* ---------- cards row ---------- */
  .crow{background:#fff}
  .crow .wrap{padding-bottom:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .ccard{border:1px solid var(--line);border-radius:14px;padding:32px}
  .ccard.dark{background:var(--blue);color:#fff;border:none}
  .ccard.gray{background:var(--tint)}
  .ccard .over{color:var(--blue);font-weight:700;font-size:13px;margin-bottom:12px}
  .ccard.dark .over{color:#fff}
  .ccard h4{font-family:'Archivo';font-size:22px;font-weight:700;margin-bottom:10px}
  .ccard.dark h4{color:#fff}
  .ccard.dark p{color:rgba(255,255,255,.92);font-size:14px}
  .ccard p{color:var(--grey);font-size:14px}

  /* ---------- faq ---------- */
  .faq{background:var(--bg)}
  .faq .wrap{padding-top:80px;padding-bottom:90px;display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
  .faq h2{font-size:40px;font-weight:800;margin-bottom:16px}
  .faq .lead{margin-bottom:30px;max-width:300px}
  .faq-item{background:#fff;border-radius:10px;padding:22px 24px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;box-shadow:0 4px 14px rgba(39,48,56,.04)}
  .faq-item.open{border-left:4px solid var(--blue)}
  .faq-item .q{font-family:'Archivo';font-weight:700;font-size:17px}
  .faq-item p{color:var(--grey);font-size:14px;margin-top:12px;max-width:520px}
  .faq-toggle{flex:0 0 auto}

  /* ---------- final contact ---------- */
  .contact{background:var(--bg)}
  .contact .wrap{padding-top:80px;padding-bottom:90px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
  .contact .form-card{box-shadow:0 26px 60px rgba(39,48,56,.10)}
  .contact .grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
  .contact .grid2 .field{margin-bottom:0}
  .contact .form-card .stack{margin-top:13px}
  .contact-note{text-align:center;margin-top:18px;font-style:italic;font-weight:600;color:var(--grey)}
  .contact-note .orange{color:var(--blue)}
  .contact h2{font-size:42px;font-weight:800;margin-bottom:20px}
  .contact h2 .o{color:var(--blue)}
  .contact .lead{margin-bottom:26px;max-width:430px}
  .contact .clist{list-style:none}
  .contact .clist li{display:flex;gap:12px;align-items:center;color:var(--grey);margin-bottom:16px}

  /* ---------- footer ---------- */
  .footer{display:grid;grid-template-columns:1fr 420px}
  .foot-l{background:var(--ink);color:#fff;padding:60px 75px}
  .foot-l .logo{margin-bottom:0}
  .foot-l .logo img{height:46px;filter:brightness(0) invert(1)}
  .foot-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:26px;margin-bottom:34px}
  .foot-nav{display:flex;gap:26px;font-weight:600}
  .foot-nav a.on{color:var(--blue)}
  .foot-contacts{display:flex;gap:60px}
  .fc{display:flex;align-items:center;gap:16px}
  .fc .ic{width:54px;height:54px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center}
  .fc .lab{font-style:italic;color:rgba(255,255,255,.7);font-size:14px}
  .fc .val{font-family:'Archivo';font-weight:700;font-size:17px}
  .foot-r{background:var(--blue);color:#fff;padding:60px 50px;display:flex;flex-direction:column;justify-content:center;gap:28px}
  .foot-r h3{font-family:'Archivo';font-size:30px;font-weight:800;line-height:1.2;color:#fff}
  .burger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:4px}

  /* keep header on ONE line: drop the centre nav before things get tight */
  @media (max-width:1180px){ .header .nav{display:none} }

  /* ============ TABLET ============ */
  @media (max-width:980px){
    :root{--side:32px}
    .hero h1{font-size:46px}
    .nav{gap:18px;font-size:15px}
    .header-right{gap:14px}
    .phone{font-size:16px}
    h2.h,.steps h2,.savings h2,.services h2,.features h2,.feata h2,.reviews h2,.about h2,.why h2,.faq h2,.contact h2,.ctaband h2{font-size:36px}
    .fgrid,.rev-row,.promo-grid{grid-template-columns:1fr 1fr}
    .hero .wrap{grid-template-columns:1fr 440px}
  }

  /* ============ MOBILE ============ */
  @media (max-width:768px){
    :root{--side:20px}
    body{font-size:15px}
    .burger{display:flex}
    .nav,.header-right{display:none}
    .header .wrap{padding-top:14px;padding-bottom:14px}
    .topbar{font-size:12px}
    .topbar .wrap{justify-content:center}

    /* hero */
    .hero::after{display:none}
    .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:44px;padding-bottom:44px}
    .hero h1{font-size:34px;margin-bottom:18px}
    .hero-checks{flex-wrap:wrap;gap:12px 22px;margin-bottom:30px}
    .hero-checks .c{font-size:15px}
    /* gap between the call button row and the form card */
    .hero-left{margin-bottom:8px}
    .form-card{padding:0 22px 26px}
    .form-card h3{margin:0 -22px 22px;font-size:22px}

    /* generic single-column stacking */
    .steps .wrap,.savings .wrap,.svc-card,.features .top,.feata .wrap,
    .about-grid,.why .wrap,.faq .wrap,.contact .wrap,.addl .wrap{grid-template-columns:1fr;gap:30px}
    .fgrid,.rev-row,.crow .wrap,.work-row,.addl-cols,.contact .grid2,.feata-cards,.promo-grid{grid-template-columns:1fr}
    .coupons{flex-direction:column}
    .ctaband .inner{grid-template-columns:1fr;padding:30px 26px;gap:22px}

    /* stats */
    .stats .wrap{grid-template-columns:1fr 1fr;gap:34px 0}
    .stat::before{display:none!important}
    .stat .num{font-size:44px}

    /* logos */
    .logos .wrap{flex-wrap:wrap;gap:22px 30px;justify-content:center}
    .logos .l img{height:30px}

    /* type scale down */
    h2.h,.steps h2,.savings h2,.services h2,.features h2,.feata h2,.reviews h2,
    .about h2,.why h2,.faq h2,.contact h2{font-size:28px}
    .ctaband h2{font-size:26px}
    .svc-card h3{font-size:26px}

    /* images */
    .steps-img{height:300px}.svc-img,.about-img{height:260px}
    .steps-cta{flex-direction:column;align-items:flex-start;gap:16px;margin-top:-30px}
    .steps-note{text-align:left}

    /* tabs */
    .tabs{gap:10px}.tab{padding:11px 16px;font-size:14px}

    /* map */
    .map{height:auto;padding:0}
    .map .grid-bg{position:relative;height:280px}
    .map .pin{display:none}
    .map-card{position:relative;right:auto;top:auto;left:auto;width:auto;margin:-90px 20px 30px;}

    /* section padding compress */
    .sec,.services .wrap,.savings .wrap,.features .wrap,.feata .wrap,
    .reviews .wrap,.faq .wrap,.contact .wrap,.about .wrap{padding-top:56px;padding-bottom:56px}

    /* footer */
    .footer{grid-template-columns:1fr}
    .foot-l{padding:44px 20px}
    .foot-top{flex-direction:column;gap:20px;align-items:flex-start}
    .foot-nav{flex-wrap:wrap;gap:16px}
    .foot-contacts{flex-direction:column;gap:24px}
    .fc .val{font-size:13px;overflow-wrap:anywhere}
    .foot-r{padding:44px 20px}
    .foot-r h3{font-size:26px}

    /* misc */
    .work-card,.work-card.mid{height:280px}
    .marquee .track{font-size:16px;gap:40px}
  }

  /* service pages: the old template puts pill-white CTAs on light header/hero — force them blue so they're visible */
  .header .header-right .pill-white,
  .hero-left .pill-white{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(14,182,241,.28)}
  .header .header-right .pill-white:hover,
  .hero-left .pill-white:hover{background:var(--blue-d)}

  /* clickable service cards */
  a.fcard{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;text-decoration:none}
  a.fcard:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(14,182,241,.18)}
  a.fcard .more{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:700;font-size:14px;margin-top:14px}
  /* simple thank-you */
  .ty{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg)}
  .ty .inner{max-width:560px;padding:60px 24px}
  .ty .tick{width:84px;height:84px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 26px}
  .ty h1{font-size:40px;font-weight:800;margin-bottom:16px}
  .ty p{color:var(--grey);font-size:17px;margin-bottom:28px}

  /* ===== LOGO CAROUSEL (rolling brand strip) ===== */
  .logos .wrap{display:block;overflow:hidden}
  .logos-track{display:flex;align-items:center;gap:64px;width:max-content;animation:logoroll 24s linear infinite}
  .logos .l{flex:0 0 auto}
  .logos:hover .logos-track{animation-play-state:paused}
  @keyframes logoroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ===== REVIEWS CAROUSEL (slow auto-scroll) ===== */
  .gbadge{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:44px}
  .gbadge .gg{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:800;color:var(--blue);font-size:16px}
  .gbadge .stars{color:var(--blue);letter-spacing:2px;font-size:16px}
  .gbadge b{font-family:'Archivo';font-size:15px}
  .gbadge span{color:var(--grey-2);font-size:14px}
  .revcar{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .revcar-track{display:flex;gap:24px;width:max-content;animation:revroll 80s linear infinite}
  .revcar:hover .revcar-track{animation-play-state:paused}
  @keyframes revroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .rcard{flex:0 0 360px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px;box-shadow:0 10px 30px rgba(39,48,56,.05);display:flex;flex-direction:column}
  .rcard .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .rcard .stars{color:var(--blue);letter-spacing:3px;font-size:15px}
  .rcard .gg{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:800;color:var(--blue);font-size:13px}
  .rcard p{color:var(--grey);font-size:14px;line-height:1.6;margin-bottom:20px;flex:1}
  .rcard .who{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:15px}
  .rcard .who b{font-family:'Archivo';font-size:15px;color:var(--ink)}
  .rcard .who span{color:var(--grey-2);font-size:12px}
  @media (max-width:768px){ .rcard{flex:0 0 290px} }