/* ==========================================================================
   HOMEPAGE v2 — mock redesign. Scoped ek-* classes. Loaded via $extra_css.
   ========================================================================== */
.ek-hero{padding:0}
.ek-hero__card{position:relative;color:#fff;overflow:hidden;
  background:
    linear-gradient(94deg,rgba(9,22,48,.96) 6%,rgba(10,26,56,.88) 42%,rgba(12,32,68,.22) 68%,rgba(12,32,68,.45) 100%),
    #0c1c3a url('../images/rooftop-waterproofing-in-dubai.webp') right center/cover no-repeat}
.ek-hero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:56px 56px 10px}
.ek-pill{display:inline-block;background:rgba(21,101,216,.25);border:1px solid rgba(21,101,216,.55);color:#bcd6ff;font:600 13px/1 var(--font-b);padding:9px 18px;border-radius:999px;margin-bottom:18px}
.ek-hero__tel{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 18px;color:#fff;font:700 14.5px var(--font-b);text-decoration:none;backdrop-filter:blur(4px);transition:.25s;margin-bottom:16px}
.ek-hero__tel svg{width:16px;height:16px;color:#4ade80}
.ek-hero__tel-note{font:600 11.5px var(--font-b);text-transform:uppercase;letter-spacing:.06em;color:#bcd6ff}
.ek-hero__tel:hover{background:#fff;color:var(--navy)}
.ek-hero__tel:hover svg{color:var(--blue)}
.ek-hero h1{font:800 clamp(30px,4.4vw,50px)/1.15 var(--font-h);letter-spacing:-.4px;margin:0 0 16px;color:#fff}
.ek-hero__text{max-width:520px;color:#c9d6ea;font-size:15.5px;line-height:1.65;margin:0 0 28px}
.ek-hero__btns{display:flex;flex-wrap:wrap;gap:14px}
.ek-btn{background:var(--blue);color:#fff;border-radius:999px;padding:14px 26px;font:600 15px var(--font-b);display:inline-flex;align-items:center;gap:9px;transition:.25s;box-shadow:0 10px 24px -10px rgba(21,101,216,.6);text-decoration:none}
.ek-btn:hover{background:#0f54bd;transform:translateY(-2px);color:#fff}
.ek-btn .ek-btn__ar{transition:transform .25s;line-height:1;vertical-align:middle}
.ek-btn .ek-btn__ar::after{content:"";display:inline-block;width:8px;height:8px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg);margin:-2px 6px 0 4px}
.ek-btn:hover .ek-btn__ar{transform:translateX(4px)}
.ek-btn--ghost{background:rgba(10,25,52,.35);border:1.5px solid rgba(255,255,255,.55);color:#fff;box-shadow:none}
.ek-btn--ghost:hover{background:#fff;color:var(--navy)}
.ek-btn--ghost:hover .ek-btn__ar{color:var(--blue);transform:none}
.ek-btn--lg{padding:15px 30px;font-size:15.5px}
.ek-hero__side{display:flex;justify-content:flex-end;align-items:center;padding-bottom:44px}
.ek-watch{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 20px 10px 10px;color:#fff;font:700 13px/1.3 var(--font-h);text-transform:uppercase;letter-spacing:.05em;backdrop-filter:blur(6px);transition:.25s;text-decoration:none}
.ek-watch:hover{background:#fff;color:var(--navy)}
.ek-watch:hover .ek-watch__play{background:var(--blue);color:#fff}
.ek-watch__play{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;flex:none}
.ek-watch__play svg{width:20px;height:20px;margin-left:2px}
.ek-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:26px 56px 30px;position:relative;z-index:2}
.ek-chip{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 16px;backdrop-filter:blur(4px)}
.ek-chip svg{width:40px;height:40px;padding:9px;border-radius:11px;background:var(--blue);color:#fff;flex:none}
.ek-chip span{font:600 13px/1.35 var(--font-b);color:#dce6f5}
.ek-chip b{color:#fff;font-weight:700;display:inline}
.ek-avail{position:absolute;right:26px;bottom:26px;display:inline-flex;align-items:center;gap:8px;background:rgba(10,25,52,.55);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 15px;font-size:12.5px;color:#cfe0f8;font-weight:600;backdrop-filter:blur(4px);z-index:3}
.ek-avail i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.25)}

/* ---- labels ---- */
.ek-sec{padding:64px 0 30px}
.ek-sec--white{background:#fff}
.ek-sec--tint{background:linear-gradient(180deg,#f3f8fe 0%,#fff 100%)}
.ek-sec .section__head{max-width:860px;margin:0 auto 38px;text-align:center}
.section__label{display:inline-block;background:#e8f1ff;color:var(--blue);font:700 12.5px var(--font-b);letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:14px}
.ek-label--plain{background:transparent;padding:0;color:var(--blue);font-weight:700}
.section__title{font:800 clamp(24px,3.2vw,36px)/1.25 var(--font-h);color:var(--navy);margin:0}
.section__title span{color:var(--blue)}
.section__title--left{text-align:left;margin-bottom:22px}

/* ---- video ---- */
.ek-video{padding:58px 0 44px;background:linear-gradient(180deg,#eaf3fd 0%,#fff 60%)}
.ek-video .section__head{margin-bottom:30px}
.ek-video__card{position:relative;max-width:900px;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(12,28,58,.55);background:#0c1c3a}
.ek-video__card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.ek-video__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 34px -10px rgba(21,101,216,.7);transition:.25s}
.ek-video__play:hover{transform:translate(-50%,-50%) scale(1.08);background:#0f54bd}
.ek-video__play svg{width:34px;height:34px;margin-left:4px}

/* ---- projects ---- */
.ek-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.ek-tabs button{border:1.5px solid #dfe6f2;background:#fff;color:#40506e;font:600 14px var(--font-b);padding:10px 22px;border-radius:999px;cursor:pointer;transition:.2s}
.ek-tabs button:hover{border-color:var(--blue);color:var(--blue)}
.ek-tabs button.is-on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 20px -8px rgba(21,101,216,.55)}
.ek-proj{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ekp2{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:0 6px 24px -12px rgba(12,28,58,.25);border:1px solid #e8edf6;transition:.25s}
.ekp2:hover{transform:translateY(-6px);box-shadow:0 20px 40px -16px rgba(12,28,58,.35)}
.ekp2__img{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;background:#eef2f8}
.ekp2__img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.ekp2:hover .ekp2__img img{transform:scale(1.06)}
.ekp2__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(9,20,42,.92) 100%);pointer-events:none}
.ekp2__badge{position:absolute;top:12px;left:12px;z-index:2;color:#fff;font:600 11.5px var(--font-b);letter-spacing:.04em;padding:6px 13px;border-radius:999px}
.ekp2__badge--residential{background:var(--blue)}
.ekp2__badge--commercial{background:#1d8a45}
.ekp2__badge--industrial{background:#0e8a8a}
.ekp2__badge--government{background:#e2820e}
.ekp2__title{position:absolute;left:14px;right:14px;bottom:10px;z-index:2;color:#fff;font:700 15px/1.3 var(--font-h);text-shadow:0 2px 8px rgba(0,0,0,.35)}
.ekp2__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 12px 14px}
.ekp2__chip{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#5a6a86}
.ekp2__chip svg{width:26px;height:26px;padding:5px;border-radius:50%;background:#e8f1ff;color:var(--blue);flex:none}
.ekp2__chip span{display:flex;flex-direction:column;line-height:1.35}
.ekp2__chip span b{color:var(--navy);font-weight:600}
.ekp2__go{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none;transition:.25s}
.ekp2__go svg{width:15px;height:15px}
.ekp2:hover .ekp2__go{background:var(--navy)}
.ek-empty{text-align:center;color:#5a6a86;font-size:14px;padding:10px 0 0}

/* ---- services ---- */
.ek-serv{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.eksc2{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;background:linear-gradient(160deg,#f2f7fe 0%,#fff 90%);border:1px solid #e3ecf8;border-radius:16px;padding:20px 18px 18px;text-decoration:none;transition:.25s;position:relative}
.eksc2::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--blue);border-radius:0 0 6px 6px;transition:.3s}
.eksc2:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(12,28,58,.28);border-color:#d3e1f5}
.eksc2:hover::before{width:100%}
.eksc2__ic{width:46px;height:46px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 8px 18px -8px rgba(21,101,216,.6)}
.eksc2__ic svg{width:24px;height:24px}
.eksc2__t b{display:block;font:700 15px/1.3 var(--font-h);color:var(--navy);margin-bottom:6px;padding-right:14px}
.eksc2__t p{margin:0;font-size:12.8px;line-height:1.5;color:#5a6a86;padding-right:14px}
.eksc2__ar{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#c3cfe3;font-size:22px;line-height:1;transition:.25s}
.eksc2:hover .eksc2__ar{color:var(--blue);transform:translateY(-50%) translateX(3px)}

/* ---- stats band ---- */
.ek-band2{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:linear-gradient(95deg,#0c1c3a 0%,#123a7c 60%,#1565d8 130%);border-radius:20px;padding:32px 28px;color:#fff;box-shadow:0 30px 60px -25px rgba(12,28,58,.6)}
.ek-band2>span{display:flex;align-items:center;justify-content:center;gap:13px;border-right:1px solid rgba(255,255,255,.16);padding:6px 10px}
.ek-band2>span:last-child{border-right:0}
.ek-band2 i{width:44px;height:44px;border-radius:50%;background:rgba(21,101,216,.35);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;flex:none}
.ek-band2 i svg{width:22px;height:22px;color:#fff}
.ek-band2 b{display:block;font:800 clamp(24px,3vw,34px)/1.05 var(--font-h)}
.ek-band2>span>span{font:600 13px/1.4 var(--font-b);color:#b9c9e6}

/* ---- certifications ---- */
.ek-certs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1020px;margin:0 auto}
.ekc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;background:#fff;border:1px solid #e8edf6;border-radius:16px;padding:24px 16px 20px;box-shadow:0 8px 24px -14px rgba(12,28,58,.2);transition:.25s;text-decoration:none;margin:.1px}
.ekc:hover{transform:translateY(-4px);box-shadow:0 16px 34px -16px rgba(12,28,58,.3)}
.ekc__img{width:88px;height:88px;border-radius:50%;background:#fff;box-shadow:0 12px 28px -12px rgba(12,28,58,.35);display:grid;place-items:center;margin-bottom:10px;padding:6px;overflow:hidden}
.ekc__img img{width:100%;height:100%;object-fit:contain}
.ekc b{font:700 14.5px var(--font-h);color:var(--navy)}
.ekc span{font-size:12.5px;color:#5a6a86}
.section__cta{ text-align:center;margin-top:30px}

/* ---- why us ---- */
.ek-why{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.ek-why__label{display:block;color:var(--blue);font:700 13px var(--font-b);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.ek-check{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:16px}
.ek-check li{display:flex;gap:13px;align-items:flex-start}
.ek-check__ic{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none;margin-top:2px}
.ek-check__ic svg{width:14px;height:14px}
.ek-check b{display:block;font:700 15px var(--font-h);color:var(--navy);margin-bottom:2px}
.ek-check p{margin:0;font-size:13.5px;color:#5a6a86;line-height:1.5}
.ek-why__media{position:relative;padding:0 0 30px 30px}
.ek-why__big{width:calc(100% - 30px);aspect-ratio:5/4;object-fit:cover;border-radius:20px;display:block;box-shadow:0 24px 50px -22px rgba(12,28,58,.45)}
.ek-why__stack{position:absolute;top:30px;right:0;display:grid;gap:10px;width:34%}
.ek-why__stack img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:14px;border:5px solid #fff;box-shadow:0 14px 30px -14px rgba(12,28,58,.4)}
.ek-sat2{position:absolute;left:-10px;bottom:52px;display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:14px 20px;box-shadow:0 18px 44px -14px rgba(12,28,58,.4)}
.ek-sat2__ic{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none}
.ek-sat2__ic svg{width:19px;height:19px}
.ek-sat2 b{display:block;font:800 22px/1.05 var(--font-h);color:#1565d8}
.ek-sat2 span{font:600 11.5px/1.35 var(--font-b);color:var(--navy);text-transform:uppercase;letter-spacing:.03em}

/* ---- guides ---- */
.ek-guides__head{margin-bottom:26px}
.ek-guides__label{display:block;color:var(--blue);font:700 13px var(--font-b);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.ek-guides{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blg2{display:flex;flex-direction:column;background:#fff;border:1px solid #e8edf6;border-radius:16px;overflow:hidden;transition:.25s;box-shadow:0 6px 24px -14px rgba(12,28,58,.2)}
.blg2:hover{transform:translateY(-6px);box-shadow:0 20px 42px -18px rgba(12,28,58,.32)}
.blg2__img{display:block;aspect-ratio:16/9;overflow:hidden}
.blg2__img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.blg2:hover .blg2__img img{transform:scale(1.05)}
.blg2__body{padding:18px 20px 20px}
.blg2__body b{display:block;font:700 15.5px/1.4 var(--font-h);color:var(--navy);margin-bottom:6px}
.blg2__body p{margin:0 0 12px;font-size:13px;color:#5a6a86;line-height:1.5}
.blg2__more{display:inline-flex;align-items:center;gap:7px;font:600 13.5px var(--font-b);color:var(--blue);text-decoration:none}
.blg2__more svg{width:15px;height:15px;transition:.2s}
.blg2__more:hover svg{transform:translateX(3px)}

/* ---- CTA ---- */
.ek-cta{position:relative;margin-top:46px;padding:64px 0;color:#fff;overflow:hidden;
  background:linear-gradient(90deg,rgba(9,20,42,.97) 0%,rgba(10,26,56,.9) 45%,rgba(13,34,72,.82) 100%),#0c1c3a url('../images/rooftop-waterproofing-in-dubai.webp') left center/cover no-repeat}
.ek-cta::after{content:"";position:absolute;right:0;top:0;height:100%;width:44%;pointer-events:none;
  background:
    radial-gradient(120% 90% at 100% 100%,rgba(21,101,216,.55) 0%,transparent 55%) no-repeat;
  mix-blend-mode:screen}
.ek-cta__in{position:relative;z-index:2}
.ek-cta h2{font:800 clamp(26px,3.4vw,38px)/1.2 var(--font-h);margin:0 0 10px;color:#fff}
.ek-cta p{margin:0 0 26px;color:#b9c9e6;font-size:15.5px}
.ek-cta__btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ek-cta__tel{display:inline-flex;align-items:center;gap:10px;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:13px 24px;color:#fff;font:600 14.5px var(--font-b);text-decoration:none;transition:.25s}
.ek-cta__tel svg{width:17px;height:17px}
.ek-cta__tel:hover{background:#fff;color:var(--navy)}

/* ---- client logos ---- */
.ek-clients{padding:52px 0 46px}
.clients{padding:52px 0 46px}

/* ---- reviews ---- */
.ek-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ekrev{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #e8edf6;border-radius:16px;padding:26px 24px 22px;box-shadow:0 8px 26px -14px rgba(12,28,58,.22);transition:.25s}
.ekrev:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(12,28,58,.3)}
.ekrev__stars{color:#f5a623;font-size:15px;letter-spacing:3px}
.ekrev p{margin:0;font-size:14px;line-height:1.65;color:#45536e;flex:1}
.ekrev__who{display:block;font-size:12.5px;color:#5a6a86;border-top:1px solid #edf1f8;padding-top:12px}
.ekrev__who b{display:block;font:700 14px var(--font-h);color:var(--navy);margin-bottom:2px}

/* ---- responsive ---- */
@media (max-width:1080px){
  .ek-proj,.ek-serv,.ek-certs2{grid-template-columns:repeat(2,1fr)}
  .ek-band2{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .ek-band2>span:nth-child(2n){border-right:0}
  .ek-hero__in{grid-template-columns:1fr;padding:40px 40px 0}
  .ek-hero__side{justify-content:flex-start;padding:0 0 10px}
  .ek-chips{grid-template-columns:repeat(2,1fr);padding:22px 40px 60px}
  .ek-cta{background:linear-gradient(90deg,rgba(9,20,42,.97) 0%,rgba(10,26,56,.92) 60%,rgba(13,34,72,.85) 100%),#0c1c3a center/cover no-repeat url('../images/rooftop-waterproofing-in-dubai.webp')}
}
@media (max-width:900px){
  .ek-guides,.ek-revs{grid-template-columns:1fr}
  .ek-why{grid-template-columns:1fr;gap:34px}
  .ek-why__media{order:2}
}
@media (max-width:620px){
  .ek-chips{grid-template-columns:1fr;padding:18px 24px 58px}
  .ek-hero__in{padding:32px 24px 0}
  .ek-proj,.ek-serv,.ek-certs2{grid-template-columns:1fr}
  .ek-band2{grid-template-columns:1fr}
  .ek-band2>span{border-right:0}
  .ek-avail{right:16px;bottom:16px}
  .ek-video__play{width:64px;height:64px}
  .ek-cta__roof{width:300px}
}