 
:root {
    --primary: #ef4933;
    --primary-hover: #8f2315;
    --light: #f6f7f8;
    --dark: #1a2a36;
    --transition: 0.3s;

    --c-bg: #ffffff;
  --c-bg-alt: #f6f7f8;
  --c-bg-dark: #1a2a36;
  --c-text: #1a2a36;
  --c-text-soft: #475569;
  --c-muted: #94a3b8;
  --c-border: #e6e8ef;

  --c-footer-color:#9B9B9B;
  --primary-l: #fde5e1;

  --c-accent: #ef4444;
  --c-accent-d: #dc2626;
  --c-success: #10b981;

  --btn-wh:#25d366;
  --c-dark: #061122;
  --c-dark-2: #0a1828;
  --c-dark-soft: #1a2a36;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px rgba(15,23,42,.06);
  --shadow-md: 0 10px 30px rgba(15,23,42,.08);
  --shadow-lg: 0 24px 60px rgba(15,23,42,.12);
  --shadow-glow: 0 12px 40px rgba(239,73,51,.35);

  --container: 1200px;
  --header-h: 76px;

  --font-display: Roboto, system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;

  /* Page aliases mapped onto the root palette above */
  --pc-navy: var(--c-dark);
  --pc-navy-2: var(--c-dark-2);
  --pc-red: var(--primary);
  --pc-red-d: var(--primary-hover);
  --pc-ink: var(--c-text);
  --pc-soft: var(--c-text-soft);
  --pc-line: var(--c-border);
  --pc-bg: var(--c-bg-alt);

  /* Cleaning-page (.cl-) compatibility aliases mapped onto the root palette */
  --cl-navy: var(--c-dark);
  --cl-navy-2: var(--c-dark-2);
  --cl-red: var(--primary);
  --cl-red-d: var(--primary-hover);
  --cl-teal: var(--primary);
  --cl-teal-soft: var(--primary-l);
  --cl-ink: var(--c-text);
  --cl-soft: var(--c-text-soft);
  --cl-line: var(--c-border);
  --cl-bg: var(--c-bg-alt);
}

.cleaning-page{ background:#fff; }

/* ===== Shared eyebrow pill ===== */
.cl-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem .95rem; border-radius:999px;
  margin-bottom:1.2rem;
  color:#ffd9d2; background:rgba(239,73,51,.18);
}
.cl-eyebrow i{ font-size:.95rem; }
.cl-eyebrow--solid{ color:var(--cl-red-d); background:#fde7e3; }
.cl-eyebrow--light{ color:#fff; background:rgba(255,255,255,.14); }

.cl-hl{ color:var(--cl-red); }

/* ===== Shared section head ===== */
.cl-section-head{ max-width:720px; margin:0 auto 3rem; text-align:center; }
.cl-section-head h2{ margin:0 0 .8rem; }
.cl-section-head p{ color:var(--cl-soft); font-size:1.05rem; line-height:1.7; margin:0; }

/* ============================================================
   HERO
   ============================================================ */
.cl-hero{
  position:relative;
  background:
    radial-gradient(70% 90% at 12% 12%, rgba(239,73,51,.16), transparent 58%),
    radial-gradient(60% 80% at 92% 8%, rgba(239,73,51,.22), transparent 60%),
    linear-gradient(160deg, var(--cl-navy) 0%, var(--cl-navy-2) 60%, #0d2238 100%);
  color:#fff;
  overflow:hidden;
}
.cl-hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 30%, #000 40%, transparent 80%);
  pointer-events:none;
}
.cl-hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center;
  padding:4rem 0 5rem;
}
.cl-hero__copy h1{ color:#fff; font-size:clamp(2.2rem,4.4vw,3.5rem); margin:0 0 1.2rem; }
.cl-hero__lead{ color:#c3ccd6; font-size:1.12rem; line-height:1.75; margin:0 0 1.8rem; max-width:38rem; }

.cl-hero__checks{
  list-style:none; padding:0; margin:0 0 2rem;
  display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.4rem;
}
.cl-hero__checks li{ display:flex; align-items:flex-start; gap:.6rem; color:#e7ecf1; font-weight:600; }
.cl-hero__checks i{ color:var(--cl-red); font-size:1.15rem; flex:0 0 auto; margin-top:.05rem; }

.cl-hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; }

.cl-hero__media{ position:relative; }
.cl-hero__media img{
  width:100%; height:480px; object-fit:cover;
  border-radius:24px; box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.cl-hero__badge{
  position:absolute; left:-14px; bottom:34px;
  background:linear-gradient(135deg, var(--cl-red), var(--cl-red-d));
  color:#fff; padding:1rem 1.3rem; border-radius:16px;
  display:flex; align-items:center; gap:.7rem;
  box-shadow:0 18px 40px rgba(239,73,51,.45);
}
.cl-hero__badge span{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.8rem; line-height:1; }
.cl-hero__badge small{ font-size:.78rem; line-height:1.2; opacity:.95; }

/* button helpers used on dark bg */
.btn-ghost-light{
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.3);
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.16); }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.cl-trust{ background:var(--cl-bg); }
.cl-trust__head{ text-align:center; max-width:760px; margin:0 auto 2.5rem; }
.cl-trust__head h2{ margin:0 0 .6rem; }
.cl-trust__head p{ color:var(--cl-soft); margin:0; }
.cl-trust__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cl-rating{
  background:#fff; border:1px solid var(--cl-line); border-radius:18px;
  padding:1.8rem 1.5rem; text-align:center; box-shadow:0 10px 30px rgba(15,23,42,.05);
}
.cl-stars{ color:#f6b100; font-size:1.05rem; margin-bottom:.5rem; }
.cl-rating strong{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:2rem; color:var(--cl-ink); line-height:1; }
.cl-rating span{ color:var(--cl-soft); font-size:.95rem; }

/* ============================================================
   SERVICES GRID
   ============================================================ */
.cl-services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cl-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--cl-line); border-radius:18px;
  padding:2rem 1.7rem; transition:transform .25s, box-shadow .25s, border-color .25s;
}
.cl-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--cl-red), var(--cl-teal));
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.cl-card:hover{ transform:translateY(-6px); box-shadow:0 22px 46px rgba(15,23,42,.12); border-color:transparent; }
.cl-card:hover::before{ transform:scaleX(1); }
.cl-card__icon{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:1.1rem;
  background:var(--cl-teal-soft); color:var(--cl-teal); font-size:1.5rem;
  transition:background .25s, color .25s;
}
.cl-card:hover .cl-card__icon{ background:var(--cl-red); color:#fff; }
.cl-card h3{ margin:0 0 .5rem; font-size:1.12rem; }
.cl-card p{ color:var(--cl-soft); font-size:.96rem; line-height:1.65; margin:0; }

/* ============================================================
   WHY US
   ============================================================ */
.cl-why__inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem; align-items:center; }
.cl-why__media{ position:relative; }
.cl-why__media img{
  width:100%; height:460px; object-fit:cover;
  border-radius:22px; position:relative; z-index:1;
  box-shadow:0 24px 50px rgba(6,17,34,.16);
}
.cl-why__frame{
  position:absolute; inset:auto -18px -18px auto;
  width:62%; height:70%;
  border:3px solid var(--cl-teal); border-radius:22px; z-index:0;
}
.cl-why__copy h2{ margin:0 0 1rem; }
.cl-why__copy > p{ color:var(--cl-soft); font-size:1.05rem; line-height:1.7; margin:0 0 1.5rem; }
.cl-why__list{ list-style:none; padding:0; margin:0 0 1.6rem; display:grid; gap:.85rem; }
.cl-why__list li{ display:flex; align-items:flex-start; gap:.7rem; font-size:1rem; color:var(--cl-ink); line-height:1.5; }
.cl-why__list i{ color:var(--cl-red); font-size:1.2rem; flex:0 0 auto; margin-top:.05rem; }
.cl-why__list li span{ flex:1; }
.cl-why__tag{
  display:inline-block;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
  color:var(--cl-red-d); background:#fde7e3;
  padding:.7rem 1.1rem; border-radius:12px; margin:0;
}

/* ============================================================
   DETAIL BLOCKS
   ============================================================ */
.cl-detail--alt{ background:var(--cl-bg); }
.cl-detail__row{ display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem; align-items:center; }
.cl-detail__row--reverse{ direction:rtl; }
.cl-detail__row--reverse > *{ direction:ltr; }
.cl-detail__media img{
  width:100%; height:400px; object-fit:cover; border-radius:20px;
  box-shadow:0 20px 44px rgba(15,23,42,.14);
}
.cl-detail__copy h2{ margin:0 0 1rem; }
.cl-detail__copy > p{ color:var(--cl-soft); font-size:1.04rem; line-height:1.75; margin:0 0 1.3rem; }
.cl-check{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.cl-check li{ display:flex; align-items:center; gap:.65rem; color:var(--cl-ink); font-weight:600; }
.cl-check i{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:var(--cl-teal-soft); color:var(--cl-teal); font-size:.85rem;
}

/* ============================================================
   EMERGENCY BANNER
   ============================================================ */
.cl-emergency{
  background:linear-gradient(135deg, var(--cl-navy) 0%, var(--cl-navy-2) 100%);
  color:#fff; padding:3.5rem 0;
}
.cl-emergency__grid{
  display:grid; grid-template-columns:1fr 1fr auto; gap:2.5rem; align-items:center;
}
.cl-emergency__item h3{ color:#fff; margin:.2rem 0 .5rem; }
.cl-emergency__item p{ color:#c3ccd6; line-height:1.7; margin:0; font-size:.98rem; }
.cl-emergency__icon{
  width:50px; height:50px; border-radius:13px; display:grid; place-items:center;
  background:rgba(239,73,51,.22); color:var(--cl-red); font-size:1.4rem; margin-bottom:.4rem;
}
.cl-emergency__cta{ text-align:center; }
.cl-emergency__cta p{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; margin:0 0 .8rem; }

/* ============================================================
   COMPANY SERVICES
   ============================================================ */
.cl-company{ background:var(--cl-bg); }
.cl-company__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cl-company__card{
  display:block; background:#fff; border:1px solid var(--cl-line); border-radius:18px;
  padding:2rem 1.7rem; color:inherit; transition:transform .25s, box-shadow .25s;
}
.cl-company__card:hover{ transform:translateY(-6px); box-shadow:0 22px 46px rgba(15,23,42,.12); }
.cl-company__icon{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#fde7e3; color:var(--cl-red); font-size:1.4rem; margin-bottom:1rem;
}
.cl-company__card h3{ margin:0 0 .5rem; font-size:1.1rem; }
.cl-company__card p{ color:var(--cl-soft); font-size:.95rem; line-height:1.6; margin:0 0 1rem; }
.cl-company__link{ font-weight:700; color:var(--cl-red); display:inline-flex; align-items:center; gap:.4rem; }
.cl-company__card:hover .cl-company__link i{ transform:translateX(4px); }
.cl-company__link i{ transition:transform .25s; }

/* ============================================================
   FAQ
   ============================================================ */
.cl-faq__inner{ max-width:880px; }
.cl-faq__list{ display:grid; gap:1rem; }
.cl-faq__item{
  border:1px solid var(--cl-line); border-radius:14px; background:#fff;
  overflow:hidden; transition:border-color .25s, box-shadow .25s;
}
.cl-faq__item[open]{ border-color:var(--cl-red); box-shadow:0 10px 30px rgba(239,73,51,.1); }
.cl-faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.4rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--cl-ink);
}
.cl-faq__item summary::-webkit-details-marker{ display:none; }
.cl-faq__item summary i{ color:var(--cl-red); transition:transform .25s; flex:0 0 auto; }
.cl-faq__item[open] summary i{ transform:rotate(180deg); }
.cl-faq__a{ padding:0 1.4rem 1.25rem; }
.cl-faq__a p{ color:var(--cl-soft); line-height:1.7; margin:0; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.cl-reviews{ background:var(--cl-bg); }
.cl-reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cl-review{
  background:#fff; border:1px solid var(--cl-line); border-radius:18px;
  padding:1.8rem; margin:0; box-shadow:0 10px 30px rgba(15,23,42,.05);
}
.cl-review .cl-stars{ font-size:.95rem; }
.cl-review blockquote{ margin:.6rem 0 1.2rem; color:var(--cl-ink); line-height:1.65; font-size:.98rem; }
.cl-review figcaption{ display:flex; align-items:center; gap:.7rem; color:var(--cl-soft); font-size:.92rem; font-weight:600; }
.cl-avatar{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  background:var(--cl-teal-soft); color:var(--cl-teal); font-size:.85rem;
}

/* ============================================================
   CONTACT
   ============================================================ */
.cl-contact{
  background:linear-gradient(160deg, var(--cl-navy) 0%, var(--cl-navy-2) 100%);
  color:#fff; padding:4.5rem 0;
}
.cl-contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.cl-contact__info h2{ color:#fff; margin:0 0 .8rem; }
.cl-contact__lead{ color:#c3ccd6; line-height:1.75; margin:0 0 2rem; }
.cl-contact__list{ list-style:none; padding:0; margin:0; display:grid; gap:1.1rem; }
.cl-contact__list li{ display:flex; align-items:center; gap:1rem; }
.cl-contact__ic{
  width:46px; height:46px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; background:rgba(239,73,51,.2); color:var(--cl-red); font-size:1.2rem;
}
.cl-contact__list small{ display:block; color:#94a3b8; font-size:.82rem; }
.cl-contact__list a, .cl-contact__list span{ color:#fff; font-weight:700; }
.cl-contact__list a:hover{ color:var(--cl-red); }

.cl-contact__card{
  background:#fff; border-radius:22px; padding:3rem 2.4rem; box-shadow:0 30px 60px rgba(0,0,0,.3);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem;
}
.cl-contact__card-ic{
  width:74px; height:74px; border-radius:18px; display:grid; place-items:center;
  background:rgba(239,73,51,.12); color:var(--cl-red); font-size:2rem;
}
.cl-contact__card h3{ margin:.4rem 0 0; color:var(--cl-ink); font-size:1.5rem; }
.cl-contact__card p{ margin:0 0 .6rem; color:var(--cl-soft); line-height:1.7; }
.cl-form{ display:grid; gap:1rem; }
.cl-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cl-form label{ display:grid; gap:.4rem; font-size:.88rem; font-weight:600; color:var(--cl-ink); }
.cl-form input, .cl-form select, .cl-form textarea{
  width:100%; padding:.8rem .9rem; border:1px solid var(--cl-line); border-radius:10px;
  font:inherit; color:var(--cl-ink); background:#fbfbfc; transition:border-color .2s, box-shadow .2s;
}
.cl-form input:focus, .cl-form select:focus, .cl-form textarea:focus{
  outline:none; border-color:var(--cl-red); box-shadow:0 0 0 3px rgba(239,73,51,.14);
}
.cl-form textarea{ resize:vertical; }
.btn-block{ width:100%; justify-content:center; }
.cl-form__note{ text-align:center; color:var(--cl-soft); font-size:.9rem; margin:.3rem 0 0; }
.cl-form__note a{ color:var(--cl-red); font-weight:700; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .cl-hero__inner{ grid-template-columns:1fr; gap:2.5rem; padding:3.5rem 0 4rem; }
  .cl-hero__media{ order:-1; }
  .cl-hero__media img{ height:360px; }
  .cl-why__inner,
  .cl-detail__row,
  .cl-contact__grid{ grid-template-columns:1fr; gap:2.2rem; }
  .cl-detail__row--reverse{ direction:ltr; }
  .cl-why__media img,
  .cl-detail__media img{ height:340px; }
  .cl-services__grid,
  .cl-company__grid,
  .cl-reviews__grid{ grid-template-columns:repeat(2,1fr); }
  .cl-emergency__grid{ grid-template-columns:1fr; gap:1.8rem; text-align:center; }
  .cl-emergency__icon{ margin-inline:auto; }
  .cl-emergency__cta{ text-align:center; }
}
@media (max-width:640px){
  .cl-hero__checks{ grid-template-columns:1fr; }
  .cl-trust__grid,
  .cl-services__grid,
  .cl-company__grid,
  .cl-reviews__grid{ grid-template-columns:1fr; }
  .cl-form__row{ grid-template-columns:1fr; }
}
