:root {
      --brand-red:#e31414;
      --brand-blue:#0b5ed7; /* Bootstrap primary-ish */
      --ink:#172033;
      --muted:#6b7280;
      --bg-soft:#eaf2fb;          /* headline */
      --accent:#e31414;             /* yellow icons */
      --card-radius:24px;
    }

    body { color: var(--ink); }
        .wrap{
            overflow: hidden;
        }
    /* Topbar */
    .topbar { font-size: .875rem; background: #fff; border-bottom: 1px solid #eef2f7; }
    .topbar .emergency { color: #d72a2a; }
    .topbar i { margin-right: .25rem; }

    /* Navbar area */
    header .navbar { background: #fff;     border-bottom: 2px solid red;}
    .navbar-brand img { height: 70px; width: auto; }

    /* Center menu styles (desktop) */
    .main-menu .nav-link { color: #233143; font-weight: 600;  font-size: 12px;}
    .main-menu .nav-link:hover { opacity: .8; }
    .main-menu .nav-link.active {
      position: relative; color: #233143;
    }
    .main-menu .nav-link.active::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -12px;
      height: 3px; background: #111827; border-radius: 2px; width: 60%; margin: 0 auto;
    }

    /* Right actions */
    .call-now .label { font-size: .85rem; color: #6b7280; }
    .call-now .number { font-weight: 700; text-decoration: none; }
    .btn-quote { background: var(--brand-red); border-color: var(--brand-red); color: #fff; font-weight: 700; }
    .btn-quote:hover { filter: brightness(.95); color: #fff; }

    /* Offcanvas tweaks */
    .offcanvas .nav-link { font-weight: 600; }
 /* HERO */
    .hero{background:linear-gradient(180deg,#eef5ff 0%, #e9f2fd 100%)}
    .badge-soft{background:#f2f6ff;color:#e11d1d;border:1px solid #e8eefc;border-radius:9999px;padding:.5rem .85rem;font-weight:600;display:inline-flex;align-items:center;gap:.5rem}
    .hero h1{font-weight:800;letter-spacing:.2px}
    .hero h1 .brand{color:var(--brand-red)}
    .feature i{color:#16a34a}
    .btn-call{border:1.5px solid var(--brand-blue);color:var(--brand-blue);font-weight:700;border-radius:9999px}
    .btn-call:hover{background:var(--brand-blue);color:#fff}

    /* Right card */
    .help-card{background:#fff;border-radius:1.25rem;box-shadow:0 12px 30px rgba(9,30,66,.12);position:relative}
    .help-card .top{background:var(--brand-red);color:#fff;border-radius:1rem;}
    .help-card .top .phone-lg{font-size:1.5rem;font-weight:800}
    .help-item{background:#f4f7fc;border-radius:.75rem;border:1px solid #edf1f7}
    .bubble{position:absolute;right:-16px;top:-18px;width:68px;height:68px;background:rgba(62,130,255,.18);border-radius:9999px}
    .bubble-sm{position:absolute;left:-14px;bottom:-18px;width:58px;height:58px;background:rgba(237,70,70,.18);border-radius:9999px}
.section-appointment{ padding: 3.5rem 0; }
    @media (min-width: 992px){ .section-appointment{ padding: 5rem 0; } }

    .hero-lead{ max-width: 64ch; text-align: left; }

    /* stats */
    .stat i{ color: var(--accent); font-size: 2.25rem; line-height: 1; }
    .stat .value{ font-weight: 800; font-size: 1.625rem; }

    /* blue sheet */
    .appoint-card{ position: relative; background: var(--brand-blue); color:#fff; border-radius: var(--card-radius); box-shadow: 0 18px 40px rgba(13,94,215,.25); overflow: hidden; }
    .appoint-card .sheet-inner{ padding: 2rem; }
    @media (min-width: 768px){ .appoint-card .sheet-inner{ padding: 2.25rem; } }
    @media (min-width: 1200px){ .appoint-card .sheet-inner{ padding: 2.75rem; } }

    /* binder rings */
    .ring{ position:absolute; top:-10px; width:26px; height:26px; border:4px solid #111; border-radius:50%; background:#fff; z-index:2; }
    .ring.left-1{ left:56px; }
    .ring.left-2{ left:86px; }
    .ring.right-1{ right:86px; }
    .ring.right-2{ right:56px; }

    /* torn bottom effect */
    .appoint-card::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:28px; background-repeat:repeat-x; background-size: 120px 28px; background-position: bottom center; filter: drop-shadow(0 -1px 0 rgba(0,0,0,.05));
      background-image:url("data:image/svg+xml;utf8,\
        <svg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'>\
          <path d='M0,0 C16,32 32,-4 48,24 C64,-4 80,32 96,0 C104,12 112,12 120,0 L120,28 L0,28 Z' fill='%23ffffff'/>\
        </svg>"); }

    /* form controls */
    .form-control, .form-select{ border-radius: 14px; padding:.75rem 1rem; }
    .form-control:focus, .form-select:focus{ box-shadow: 0 0 0 .2rem rgba(255,255,255,.15); border-color:#fff; }

    .btn-appointment{ background:#1f2937; color:#fff; border-radius: 14px; padding: .9rem 1rem; font-weight: 700; }
    .btn-appointment:hover{ filter: brightness(1.05); color:#fff; }

      /* ===== SERVICES SECTION  ===== */
    .services-section { padding: 4rem 0; }
    .service-tabs .btn { border-radius: 10px; border: 1px solid #ddd; font-weight: 500; text-align: left; }
    .service-tabs .btn.active { background-color: #ffc107; border-color: #ffc107; color: #000; }
    .service-image img { border-radius: 12px; max-width: 100%; height: auto; }
    .contact-btn { background-color: #ffc107; color: #000; font-weight: 600; border-radius: 8px; padding: .6rem 1.5rem; }
    .call-btn { background-color: #0d6efd; color: #fff; font-weight: 600; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }

    .svc-section{padding:4rem 0}
    @media (min-width:1200px){.svc-section{padding:5rem 0}}
    .svc-title{color:var(--ink)}
    .svc-side{max-width:460px}
    .svc-list .btn{border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:#0f172a;text-align:left;padding:.9rem 1rem;font-weight:600}
    .svc-list .btn + .btn{margin-top:.75rem}
    .svc-list .btn.active{background:#e31414;color:#fff;border-color:#e31414}
    .svc-image{border-radius:16px;object-fit:fill;width:100%;height: 258px;}
    .svc-cta .btn-primary{background:#e31414;border-color:#e31414;border-radius:14px;padding:.8rem 1rem;font-weight:700}
    .svc-phone{display:flex;align-items:center;gap:.75rem}
    .svc-phone .bubble{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#0b5ed710}
    .svc-phone .bubble i{font-size:1.25rem}
    .svc-right p{max-width:70ch}

      /* ======== Flow strip (unique classes; no overlap) ======== */
  .flow-strip { padding: 3rem 0; }
  @media (min-width: 992px){ .flow-strip { padding: 4rem 0; } }

  .flow-item { max-width: 32rem; }
  .flow-icon{
    width: 92px; height: 92px; border-radius: 9999px;
    background: #0b5ed7; display: grid; place-items: center;
    margin-inline: auto; margin-bottom: 1rem;
    box-shadow: 0 12px 26px rgba(11,94,215,.18);
  }
  .flow-icon i{ font-size: 2rem; color: #fff; line-height: 1; }

  .flow-title{ font-weight: 700; color:#1f2937; margin-bottom:.5rem; }
  .flow-text{ color:#6b7280; margin:0 auto; max-width: 40ch; }
  /* ===== Emergency banner (unique classes) ===== */
  .emer-section { position: relative; }
  .emer-card{
    background:#e9eff6;           /* soft blue/grey like screenshot */
    border-radius:24px;
    position:relative;
    overflow:hidden;
  }
  /* Decorative white curves (right side) */
  .emer-card::after,
  .emer-card::before{
    content:"";
    position:absolute;
    right:-120px; top:-40px;
    width:420px; height:420px;
    border-radius:50%;
    border:6px solid #fff;
    opacity:.85;
  }
  /* .emer-card::before{
    right:20px; top:60px;
    width:320px; height:320px;
    border-width:4px;
    opacity:.9;
  } */

  .emer-photo{
    max-height:220px;
    width:auto; object-fit:contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.08));
  }

  .emer-title{ color:#1f2b3a; font-weight:800; }
  .emer-text{ color:#4b5563; max-width:52ch; }
  .emer-btn{ border-radius:12px; }
  .emer-phone{ color:#1f2b3a; }

  /* Stack nicely on small screens */
  @media (max-width: 767.98px){
    .emer-card::after,.emer-card::before{ display:none; } /* hide curves on very small */
    .emer-photo{ max-height:180px; }
    .emer-title{ text-align:center; }
    .emer-text{ text-align:center; margin-bottom:1rem; }
    .emer-phone{ width:100%; text-align:center; }
    .emer-btn{ width:100%; }
  }

   /* ===== Reviews (unique rev-* classes) ===== */
  .rev-title{ color:#172033; }
  .rev-sub{ max-width: 90ch; margin-left:auto; margin-right:auto; }

  .rev-card{ max-width: 420px; }
  .rev-avatar{
    width:84px;height:84px;border-radius:50%;
    object-fit:cover; margin-bottom:.75rem;
    box-shadow:0 10px 22px rgba(0,0,0,.08);
  }
  .rev-stars{ color:#f5b301; font-size:1.05rem; margin-bottom:.25rem; }
  .rev-name{ color:#1f2937; }

  /* Centered round arrow buttons like the screenshot */
  .rev-carousel{ position:relative; padding:2.25rem 0; }
  .rev-ctrl{ width:auto; }
  .rev-ctrl-circle{
    width:56px;height:56px;border-radius:50%;
    background:#fff; border:2px solid #cbd5e1;
    display:flex; align-items:center; justify-content:center;
    color:#64748b; font-size:1.25rem;
    transition:.15s ease;
  }
  .rev-ctrl-circle:hover{ border-color:#94a3b8; color:#334155; }
  .carousel-control-prev{ left:8%; }
  .carousel-control-next{ right:8%; }

  /* Responsive arrow spacing */
  @media (max-width: 991.98px){
    .carousel-control-prev{ left:2%; }
    .carousel-control-next{ right:2%; }
  }

  /* ===== Footer (unique foot-* classes) ===== */
  .foot-wrap{ background:#e9eff6; position:relative; }
  .foot-logo{
    width:38px;height:38px;border-radius:10px;background:#0b5ed7;color:#fff;
    font-size:1.2rem;
  }
  .foot-head{ font-weight:700; color:#1f2937; margin-bottom:.75rem; }
  .foot-list li + li{ margin-top:.35rem; }
  .foot-list a{ color:#475569; text-decoration:none; }
  .foot-list a:hover{ color:#0b5ed7; }

  .foot-contact li{
    color:#475569; margin-bottom:.5rem; display:flex; gap:.6rem; align-items:flex-start;
  }
  .foot-contact i{ color:#e31414; margin-top:.2rem; }

  .foot-soc{
    width:42px;height:42px;border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#0f172a; color:#fff; text-decoration:none;
  }
  .foot-soc:hover{ filter:brightness(1.1); }

  .foot-hr{ border-color:#e31414; opacity:1; }

  .foot-bottom .nav-link{ color:#475569; }
  .foot-bottom .nav-link:hover{ color:#e31414; }

  /* Back-to-top button */
  .foot-top{
    position:fixed; right:26px; bottom:26px; width:48px; height:48px;
    border-radius:50%; background:#e31414; color: #fff;;
    display:flex; align-items:center; justify-content:center; text-decoration:none;
    box-shadow:0 8px 18px rgba(11,94,215,.25);
  }


  /* Responsive spacing tweaks */
  @media (max-width: 767.98px){
    .foot-bottom{ justify-content:center; }
  }
 /* ===== Areas card (area-*) ===== */
  .area-card{
    position:relative; overflow:hidden; border-radius:22px;
    background: linear-gradient(180deg,#eef5ff 0%, #e9f2fd 100%);
    box-shadow: 0 16px 40px rgba(13,94,215,.12);
  }
  .area-title{ color:#0f1a2a; font-weight:800; }

  .area-pin{
    width:42px;height:42px;border-radius:12px;background:#e31414;color:#fff;
    display:grid;place-items:center;font-size:1.1rem;
    box-shadow:0 8px 18px rgba(11,94,215,.25);
  }

  .area-badge{
    background:#e31414; color:#fff; border-radius:9999px;
    padding:.55rem .9rem; font-weight:700; letter-spacing:.2px;
  }
  .area-badge.area-soft{
    background:#dbe8ff; color:#e31414;
  }

  .area-list{ list-style:none; padding-left:0; }
  .area-list li{ display:flex; align-items:center; gap:.6rem; margin:.35rem 0; color:#334155; }
  .area-list i{ color:#16a34a; }

  .area-side{
    background:#fff; border:1px solid #e6eefb; border-radius:16px;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
  }
  .area-mapbubble{
    width:54px;height:54px;border-radius:50%; background:#eef5ff;
    color:#e31414; display:flex; align-items:center; justify-content:center;
    font-size:1.4rem;
  }
  .area-btn{ border-radius:12px; padding:.7rem 1rem; }

  /* Decorative bubbles */
  .area-bubble{
    position:absolute; border-radius:50%; background:rgba(11,94,215,.12);
    filter: blur(1px);
  }
  .area-b1{ width:110px;height:110px; right:-30px; top:-30px; }
  .area-b2{ width:80px;height:80px; left:-20px; bottom:-20px; background:rgba(255,193,7,.25); }

  @media (max-width: 767.98px){
    .area-b1,.area-b2{ display:none; }
    .area-card{ border-radius:18px; }
  }
 /* ====== Unique styles (offer-*) ====== */
  .offer-wrap{
    background: linear-gradient(180deg,#f4f8ff 0%, #eef5ff 100%);
  }
  .offer-kicker{
    display:inline-block; font-weight:700; letter-spacing:.2px;
    color:#0b5ed7; background:#dbe8ff; border-radius:9999px;
    padding:.35rem .75rem; margin-bottom:.5rem;
  }
  .offer-title{ color:#0f1a2a; }

  .offer-card{
    background:#fff; border:1px solid #e7eef9; border-radius:18px;
    padding:1.4rem 1.25rem; box-shadow:0 10px 26px rgba(15,23,42,.06);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .offer-card:hover{
    transform: translateY(-4px);
    box-shadow:0 16px 40px rgba(15,23,42,.10);
  }

  .offer-icon{
    width:60px;height:60px;border-radius:14px;background:#0b5ed7;color:#fff;
    display:grid;place-items:center;font-size:1.35rem;margin-bottom:.8rem;
    box-shadow:0 10px 22px rgba(11,94,215,.22);
  }
  .offer-icon-warn{ background:#e31414; color:#111; box-shadow:0 10px 22px rgba(245,179,1,.25); }

  .offer-list{ list-style:none; padding-left:0; margin:0 0 .25rem; }
  .offer-list li{ display:flex; gap:.5rem; align-items:flex-start; color:#334155; margin:.35rem 0; }
  .offer-list i{ color:#16a34a; margin-top:.15rem; }

  .offer-btn{ border-radius:12px; }

   /* ===== About section (about-*) ===== */
  .about-wrap{ background:linear-gradient(180deg,#f6f9ff 0%, #eef5ff 100%); }
  .about-kicker{
    display:inline-block; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    color: #fff;; background:#e31414; border-radius:9999px; padding:.35rem .75rem; margin-bottom:.5rem;
    font-size:.8rem;
  }
  .about-title{ color:#0f1a2a; }
  .about-lead{ max-width:70ch; }

  .about-visual{ position:relative; }
  .about-img{
    width:100%; height:auto; border-radius:20px; object-fit:cover;
    box-shadow:0 18px 40px rgba(15,23,42,.12);
  }
  .about-bubble{
    position:absolute; border-radius:50%; z-index:0; filter:blur(1px);
    background:rgba(11,94,215,.12);
  }
  .about-bubble.b1{ width:110px; height:110px; right:-18px; top:-18px; }
  .about-bubble.b2{ width:80px; height:80px; left:-14px; bottom:-14px; background:rgba(245,179,1,.28); }

  .about-card{
    background:#fff; border:1px solid #e7eef9; border-radius:14px;
    padding:1rem 1rem 1.1rem; box-shadow:0 10px 22px rgba(15,23,42,.05);
  }
  .about-card-title{
    font-weight:800; color:#0f1a2a; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem;
  }
  .about-card-title i{ color:#e31414; }
  .about-list{ list-style:none; padding-left:0; margin:0; }
  .about-list li{ display:flex; gap:.5rem; align-items:flex-start; color:#334155; margin:.35rem 0; }
  .about-list i{ color:#16a34a; margin-top:.15rem; }

  .about-cta .about-btn{ border-radius:12px; padding:.75rem 1rem; }
  .about-geo{ color:#334155; }

  @media (max-width: 767.98px){
    .about-wrap{ padding-top:2.25rem; }
    .about-bubble{ display:none; }
  }


/* ===== Emergency Repairs — visual upgrade (emerg-*) ===== */
.emerg-wrap{
  background: linear-gradient(180deg,#f6f9ff 0%, #eef5ff 100%);
  border-bottom:1px solid #e7eef9;
  /* position:relative;
  z-index:1000; stays above hero when inserted */
}

/* Keep your existing .is-visible animation hook */

@keyframes emergSlideIn{
  0%   { transform: translateX(100%); opacity: 0; }
  40%  { transform: translateX(15%);  opacity: 1; }
  100% { transform: translateX(0);    opacity: 1; }
}
#emergency-repairs {
  display: none;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 1s ease, opacity 1s ease;
}
#emergency-repairs.is-visible {
  display: block;
  display: block;
  opacity: 1;
  transform: translateX(0);
}
/* Top alert strip */
.emerg-strip{
  background:#e11d1d; color:#fff; position:relative;
}
.emerg-dot{
  width:10px;height:10px;border-radius:50%;background:#fff;display:inline-block;
  box-shadow:0 0 0 4px rgba(255,255,255,.25);
}
.emerg-callchip{ border-radius:9999px; }

/* Headings and chips */
.emerg-kicker{
  display:inline-block; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#0b5ed7; background:#dbe8ff; border-radius:9999px; padding:.35rem .7rem; margin-bottom:.5rem;
  font-size:.8rem;
}
.emerg-title{ color:#0f1a2a; }
.emerg-badge{
  background:#0b5ed7; color:#fff; border-radius:9999px; padding:.45rem .8rem; font-weight:700;
}

/* Section heads */
.emerg-head{
  font-weight:800; color:#0f1a2a; margin-top:.25rem; display:flex; align-items:center; gap:.5rem;
}

/* Cards grid */
.emerg-card{
  background:#fff; border:1px solid #e7eef9; border-radius:14px;
  padding:.85rem 1rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 10px 22px rgba(15,23,42,.05);
  color:#334155; font-weight:600;
}
.emerg-card i{ color:#e11d1d; }

/* Right side card */
.emerg-side{
  background:#fff; border:1px solid #e6eefb; border-radius:16px;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
  position:relative; overflow:hidden;
}
.emerg-bubble{
  width:56px;height:56px;border-radius:50%;
  background:#ffe2e2; color:#e11d1d; display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
}
.emerg-btn{ border-radius:12px; }

.emerg-mini{
  background:#f8fafc; border:1px solid #e7eef9; border-radius:12px;
  padding:.9rem 1rem; display:flex; flex-direction:column; gap:.15rem; height:100%;
}
.emerg-mini i{ color:#0b5ed7; font-size:1.1rem; }

.emerg-note{
  background:#fff7ed; border:1px dashed #f59e0b; color:#92400e;
  border-radius:12px; padding:.85rem 1rem; font-size:.95rem;
}

/* Small screens */
@media (max-width: 767.98px){
  .emerg-title{ font-size:1.6rem; }
  .emerg-card{ padding:.8rem .9rem; }
}

/* ===== ELECTRICAL SERVICES (hidden by default) ===== */
.elec-section{
  display:none;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 1s ease, opacity 1s ease;
  background: linear-gradient(180deg,#f6f9ff 0%, #eef5ff 100%);
  border-bottom:1px solid #e7eef9;
}

/* Activate animation when visible */
.elec-section.is-visible{
  display: block;
  opacity: 1;
  transform: translateX(0);
}

/* Right-to-left entrance */
@keyframes elecSlideIn{
  0%   { transform: translateX(100%); opacity: 0; }
  40%  { transform: translateX(15%);  opacity: 1; }
  100% { transform: translateX(0);    opacity: 1; }
}

/* Content styles (namespaced) */
.elec-kicker{
  display:inline-block; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#0b5ed7; background:#dbe8ff; border-radius:9999px; padding:.35rem .7rem; margin-bottom:.5rem;
  font-size:.8rem;
}
.elec-title{ color:#0f1a2a; }

.elec-head{
  font-weight:800; color:#0f1a2a; margin-bottom:.35rem; display:flex; align-items:center; gap:.5rem;
}
.elec-grid .elec-item{
  display:flex; gap:.9rem; align-items:flex-start;
  background:#fff; border:1px solid #e7eef9; border-radius:14px; padding:.9rem 1rem;
  box-shadow:0 10px 22px rgba(15,23,42,.05);
}
.elec-badge{
  width:44px;height:44px;border-radius:12px;background:#0b5ed7;color:#fff;
  display:grid; place-items:center; font-size:1.1rem;
  box-shadow:0 8px 18px rgba(11,94,215,.22);
}
.elec-item-title{ font-weight:700; color:#172033; }
.elec-list{ padding-left:1rem; margin: .25rem 0 0; }
.elec-list li{ color:#475569; }

.elec-bullets{ list-style:none; padding-left:0; margin: .35rem 0 0; }
.elec-bullets li{ display:flex; gap:.5rem; align-items:flex-start; color:#334155; margin:.25rem 0; }
.elec-bullets i{ color:#16a34a; margin-top:.15rem; }

.elec-btn{ border-radius:12px; padding:.75rem 1rem; }
.elec-geo{ color:#334155; }

.elec-side{
  background:#fff; border:1px solid #e6eefb; border-radius:16px;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}
.elec-phonebubble{
  width:56px;height:56px;border-radius:50%; background:#eef5ff; color:#0b5ed7;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}
.elec-btn-dark{ border-radius:12px; }

/* Close button (optional) */
.elec-close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; border-radius:50%; border:1px solid #dbe4f1;
  background:#fff; color:#475569;
  display:flex; align-items:center; justify-content:center;
}
.elec-close:hover{ background:#f8fafc; }

@media (prefers-reduced-motion: reduce){
  .elec-section.is-visible{ animation:none; }
}

/* ===== POWER FLUSH PANEL (hidden by default) ===== */
.flush-section{
  display:none;
  position:relative;
  z-index:1000; /* show above hero */
  background:linear-gradient(180deg,#f6f9ff 0%, #eef5ff 100%);
  border-bottom:1px solid #e7eef9;
  box-shadow:0 18px 40px rgba(15,23,42,.12);
  will-change: transform, opacity;
}

/* Activate when visible */
.flush-section.is-visible{
  animation: flushSlideIn 2s cubic-bezier(0.25, 1, 0.5, 1) both; /* slow + smooth */
}

/* Right -> Left */
@keyframes flushSlideIn{
  0%   { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

/* --- Namespaced styles --- */
.flush-kicker{
  display:inline-block; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#0b5ed7; background:#dbe8ff; border-radius:9999px; padding:.35rem .7rem; margin-bottom:.5rem;
  font-size:.8rem;
}
.flush-title{ color:#0f1a2a; }
.flush-head{ font-weight:800; color:#0f1a2a; margin-top:.25rem; display:flex; align-items:center; gap:.5rem; }
.flush-point{
  display:flex; gap:.8rem; align-items:flex-start; background:#fff;
  border:1px solid #e7eef9; border-radius:14px; padding:.85rem 1rem;
  box-shadow:0 10px 22px rgba(15,23,42,.05);
}
.flush-badge{
  width:44px; height:44px; border-radius:12px; background:#0b5ed7; color:#fff;
  display:grid; place-items:center; font-size:1.1rem;
  box-shadow:0 8px 18px rgba(11,94,215,.22);
}
.flush-point-title{ font-weight:700; color:#172033; }
.flush-list{ margin:.35rem 0 0; padding-left:1rem; }
.flush-btn{ border-radius:12px; padding:.75rem 1rem; }

/* Right card */
.flush-side{
  background:#fff; border:1px solid #e6eefb; border-radius:16px;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}
.flush-chip{
  background:#dbe8ff; color:#0b5ed7; border-radius:9999px; padding:.45rem .75rem; font-weight:600;
}

/* Close button (optional) */
.flush-close{
  position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:50%;
  border:1px solid #dbe4f1; background:#fff; color:#475569; display:flex; align-items:center; justify-content:center;
}
.flush-close:hover{ background:#f8fafc; }

@media (prefers-reduced-motion: reduce){
  .flush-section.is-visible{ animation:none; }
}



/* ===== Servicing & CP12 (hidden by default; smooth slide-in) ===== */
/* #servicing-gas-safety { display:none; position:relative; z-index:1000;
  background:linear-gradient(180deg,#f6f9ff 0%, #eef5ff 100%);
  border-bottom:1px solid #e7eef9; box-shadow:0 18px 40px rgba(15,23,42,.12);
  will-change:transform,opacity;
} */
/* #servicing-gas-safety.is-visible {
  animation: svcgasSlideIn 2s cubic-bezier(.25,1,.5,1) both;
} */
@keyframes svcgasSlideIn {
  0%   { transform: translateX(100%); opacity: 0; }
  40%  { transform: translateX(15%);  opacity: 1; }
  100% { transform: translateX(0);    opacity: 1; }
}

#servicing-gas-safety { 
  display: none;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 1s ease, opacity 1s ease;
  background:linear-gradient(180deg,#f6f9ff 0%, #eef5ff 100%);
}

#servicing-gas-safety.is-visible{
  display: block;
  opacity: 1;
  transform: translateX(0);
}
/* Namespaced styles */
.svcgas-kicker{
  display:inline-block; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#ffffff; background:#e31414; border-radius:9999px; padding:.35rem .7rem; margin-bottom:.5rem;
  font-size:.8rem;
}
.svcgas-title{ color:#0f1a2a; }

.svcgas-box{
  background:#ffffff; border:1px solid #e7eef9; border-radius:16px;
  padding:1rem 1rem 1.1rem; box-shadow:0 12px 26px rgba(15,23,42,.06);
}
.svcgas-box-alt{ background:#e31414; color:#fff; border-color:transparent; }
.svcgas-box-alt .svcgas-list li{ color:#f1f5f9; }
.svcgas-box-head{ display:flex; align-items:center; gap:.6rem; }
.svcgas-chip{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:#e31414; color:#fff; font-size:1.1rem; box-shadow:0 8px 18px rgba(11,94,215,.22);
}
.svcgas-box-alt .svcgas-chip{ background:#e31414; }

.svcgas-list{ list-style:none; padding-left:0; margin:0; }
.svcgas-list li{ display:flex; align-items:flex-start; gap:.5rem; color:#334155; margin:.35rem 0; }
.svcgas-list i{ color:#16a34a; margin-top:.15rem; }
.svcgas-box-alt .svcgas-list i{ color:#fff; opacity:.95; }

.svcgas-btn{ border-radius:12px; padding:.75rem 1rem; }

.svcgas-side{
  background:#fff; border:1px solid #e6eefb; border-radius:16px;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}
.svcgas-bubble{
  width:56px; height:56px; border-radius:50%; background:#eef5ff; color:#0b5ed7;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}
.svcgas-mini{ list-style:none; padding-left:0; margin:0; }
.svcgas-mini li{ display:flex; align-items:flex-start; gap:.4rem; color:#475569; }

/* Optional close */
.svcgas-close{
  position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:50%;
  border:1px solid #dbe4f1; background:#fff; color:#475569; display:flex; align-items:center; justify-content:center;
}
.svcgas-close:hover{ background:#f8fafc; }

@media (max-width: 767.98px){
  .svcgas-title{ font-size:1.6rem; }
}
@media (prefers-reduced-motion: reduce){
  #servicing-gas-safety.is-visible{ animation:none; }
}



.whatsapp-button button {
  background-color: #25d366;
  color: white;
  border: none;
  /* padding: 5px 15px; */
  border-radius: 62%;
  cursor: pointer;
  font-size: 33px;
  position: fixed;
  bottom: 76px;
  right: 28px;
  z-index: 1;
  outline: none !important;
}
.call-btn {
  background-color: #4fa805;
  color: white;
  border: none;
  padding: 7px 15px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 25px;
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  outline: none !important;
}