/* Builds Jeddah — design.css
   Adapted for the WordPress theme from the final approved design stylesheet.
   Removed for WordPress: SPA hash-router view toggling, Lenis smooth-scroll,
   calculator/estimator widgets, quote forms and language-dictionary switching.
   Theme additions (CTA band, page hero, entry content, WP menu support) are in
   the clearly-commented section at the end of this file. */

:root{
  --cream:#F7F3EC;
  --cream-2:#EFE7D7;
  --cream-3:#E9DFCB;
  --ink:#221709;
  --brown:#2D1F13;
  --brown-2:#1E140B;
  --gold:#C07F16;
  --gold-2:#D2831A;
  --gold-soft:#F3E3BC;
  --card:#FFFFFF;
  --muted:#6E5F4F;
  --muted-2:#8A7A67;
  --line:#E2D6C0;
  --line-2:#D8C9AC;
  --radius:20px;
  --shadow:0 18px 40px rgba(45,31,19,.10);
  --shadow-sm:0 8px 24px rgba(45,31,19,.08);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
html:focus-within{scroll-behavior:smooth}
/* Buttery smooth scrolling (Lenis, inlined in this file) */
body{margin:0;font-family:var(--font);background:var(--cream);color:var(--ink);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.02em;margin:0;color:var(--brown)}
p{margin:0}
.container{width:min(1320px,100% - 40px);margin-inline:auto}
@media(min-width:1400px){.container{width:min(1360px,100% - 64px)}}
.section{padding:88px 0}
@media(max-width:640px){.section{padding:60px 0}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.sec-head{max-width:720px;margin-bottom:42px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow::after{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.sec-head h2{font-size:clamp(32px,4.4vw,50px);font-weight:800;margin:14px 0 14px}
.sec-head p{color:var(--muted);font-size:17px;max-width:620px}
.sec-head.center p{margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15.5px;padding:15px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .25s,color .25s,transform .25s,border-color .25s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-dark{background:var(--brown);color:#FFF7EA}
.btn-dark:hover{background:var(--gold-2);color:#fff}
.btn-gold{background:var(--gold-2);color:#fff}
.btn-gold:hover{background:var(--brown);color:#FFF7EA}
.btn-light{background:#fff;color:var(--brown);border-color:#fff}
.btn-light:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.btn-outline{background:transparent;color:var(--brown);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--brown);background:#fff}
.btn svg{flex:none}
/* Header */
.site-header{position:fixed;top:14px;left:0;right:0;z-index:60;transition:top .3s}
.header-pill{width:min(1400px,100% - 24px);margin-inline:auto;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:1px solid rgba(226,214,192,.9);border-radius:999px;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;box-shadow:0 10px 30px rgba(45,31,19,.07);transition:box-shadow .3s,padding .3s;flex-wrap:nowrap;min-width:0}
.site-header.scrolled{top:8px}
.site-header.scrolled .header-pill{box-shadow:0 16px 38px rgba(45,31,19,.14);padding-top:7px;padding-bottom:7px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--brown);color:var(--gold-soft);display:grid;place-items:center;font-weight:800;font-size:19px;position:relative;overflow:hidden}
.brand-mark::after{content:"";position:absolute;right:0;bottom:0;width:14px;height:14px;background:var(--gold-2);border-radius:12px 0 0 0}
.brand-text{line-height:1.05}
.brand-text strong{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--brown)}
.brand-text span{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.main-nav{display:flex;gap:2px;margin-inline:auto;min-width:0}
.main-nav a{text-decoration:none;font-weight:600;font-size:14px;color:#4A3A28;padding:8px 9px;border-radius:999px;transition:color .2s,background .2s;white-space:nowrap}
.main-nav a:hover{color:var(--gold-2);background:#FBF6EA}
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.header-phone{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:13.5px;color:var(--brown);padding:9px 4px;white-space:nowrap}
.header-phone:hover{color:var(--gold-2)}
.header-cta{padding:11px 17px;font-size:14px}
@media(max-width:1380px){.header-phone .hp-num{display:none}.header-phone{width:40px;height:40px;justify-content:center;border:1px solid var(--line);border-radius:50%;background:#fff;padding:0}}
@media(max-width:1180px){.main-nav{display:none}.menu-btn{display:grid}}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;place-items:center;color:var(--brown)}
.mobile-menu{display:none;width:min(1320px,100% - 32px);margin:10px auto 0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:var(--shadow)}
.mobile-menu.open{display:block}
.mobile-menu a{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-radius:14px;text-decoration:none;font-weight:600;color:var(--brown)}
.mobile-menu a:hover{background:#FBF6EA;color:var(--gold-2)}
.mobile-menu .btn{width:100%;margin-top:8px}
@media(max-width:400px){.brand-text span{display:none}.brand-mark{width:36px;height:36px;font-size:16px}}
/* Hero */
.hero{padding:148px 0 0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-180px;right:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(210,131,26,.16),transparent 65%)}
.hero-grid{position:relative}
.hero-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:12px 28px;align-items:stretch}
.hero-copy{max-width:680px;align-self:center;padding:10px 0 18px}
.hero-video{position:relative;display:flex;align-items:center;justify-content:center;min-height:100%;padding:8px 0 18px}
.hero-video::before{content:"";position:absolute;top:50%;left:50%;transform:translate(calc(-50% + 18px),calc(-50% + 18px));width:min(100%,450px);aspect-ratio:3/4;max-height:600px;border:1.5px solid var(--gold-2);border-radius:28px;opacity:.45;pointer-events:none}
.hero-video-frame{position:relative;z-index:1;width:min(100%,450px);aspect-ratio:3/4;max-height:600px;border-radius:24px;overflow:hidden;border:6px solid #fff;outline:1px solid var(--line);box-shadow:0 28px 56px rgba(45,31,19,.18),0 6px 16px rgba(45,31,19,.08);background:var(--cream-2)}
.hero-video-frame::after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -56px 56px -32px rgba(30,20,11,.28);pointer-events:none}
.hero-video-frame video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-video-badge{position:absolute;z-index:2;left:0;bottom:38px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 30px rgba(45,31,19,.14);padding:11px 14px;display:flex;gap:10px;align-items:center;max-width:250px}
.hero-video-badge .ic{width:38px;height:38px;flex:none;border-radius:11px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center}
.hero-video-badge strong{display:block;font-size:13.5px;line-height:1.2;color:var(--brown)}
.hero-video-badge small{display:block;font-size:12px;color:var(--muted);font-weight:600;line-height:1.35;margin-top:2px}
@media(max-width:980px){.hero-top{grid-template-columns:1fr;gap:6px}.hero-copy{max-width:760px}.hero-video{min-height:0;padding-top:18px}.hero-video::before{width:min(88vw,440px);transform:translate(calc(-50% + 12px),calc(-50% + 12px))}.hero-video-frame{width:min(88vw,440px);max-height:none}.hero-video-badge{left:50%;transform:translateX(-118%);bottom:28px}}
@media(max-width:560px){.hero-video-badge{display:none}.hero-video::before{display:none}.hero-video-frame{width:min(88vw,360px);border-width:5px;border-radius:20px}.hero-video-frame::after{border-radius:15px}}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 10px;font-size:13.5px;font-weight:700;color:var(--brown);box-shadow:var(--shadow-sm)}
.hero-badge .dot{width:24px;height:24px;border-radius:50%;background:var(--gold-soft);display:grid;place-items:center;color:var(--gold)}
.hero-badge .ar{font-family:"Amiri",serif;font-size:15px;color:var(--gold);font-weight:700}
.hero h1{font-size:clamp(40px,4.9vw,66px);font-weight:800;margin:22px 0 18px}
.hero h1 em{font-style:normal;color:var(--gold-2);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:10px;background:var(--gold-soft);z-index:-1;border-radius:3px}
.hero-sub{font-size:18.5px;color:var(--muted);max-width:640px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 22px}
.hero-points{display:flex;gap:8px 26px;flex-wrap:wrap;color:#4A3A28;font-weight:600;font-size:14.5px}
.hero-points span{display:inline-flex;gap:8px;align-items:center}
.hero-points svg{color:var(--gold)}
.hero-media{margin-top:46px;position:relative}
.hero-media figure{margin:0;border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}
.hero-media img{width:100%;height:clamp(300px,52vw,560px);object-fit:cover}
.hero-card{position:absolute;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:14px 18px;display:flex;gap:12px;align-items:center}
.hero-card .ic{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);display:grid;place-items:center;color:var(--gold);flex:none}
.hero-card strong{display:block;font-size:19px;line-height:1.1;color:var(--brown)}
.hero-card small{color:var(--muted);font-weight:600;font-size:12.5px}
.hero-card.rating{left:22px;bottom:22px}
.hero-card.area{right:22px;top:22px}
.stars{color:var(--gold-2);letter-spacing:2px;font-size:13px}
@media(max-width:640px){.hero{padding-top:126px}.hero-card.area{display:none}.hero-card.rating{left:12px;bottom:12px;padding:11px 14px}.hero-card strong{font-size:16px}.hero-badge{font-size:12.5px;padding:7px 13px 7px 8px;max-width:100%}.hero-badge .ar{display:none}}
/* Trust bar */
.trust-bar{margin-top:56px;background:var(--brown);border-radius:26px;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.trust-item{display:flex;gap:15px;padding:24px 24px;align-items:flex-start;border-radius:18px}
.trust-item + .trust-item{border-left:1px solid rgba(255,247,234,.12)}
.trust-item .ic{width:48px;height:48px;flex:none;border-radius:14px;background:rgba(210,131,26,.22);color:var(--gold-soft);display:grid;place-items:center}
.trust-item h3{color:#FFF7EA;font-size:17.5px;margin-bottom:5px}
.trust-item p{color:#CDBFA8;font-size:14.5px;line-height:1.55}
@media(max-width:860px){.trust-bar{grid-template-columns:1fr}.trust-item + .trust-item{border-left:0;border-top:1px solid rgba(255,247,234,.12)}}
/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1080px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
.svc-card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s,border-color .35s}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line-2)}
.svc-card .ph{overflow:hidden;aspect-ratio:4/3}
.svc-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.svc-card:hover .ph img{transform:scale(1.06)}
.svc-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.svc-body h3{font-size:19.5px;font-weight:800}
.svc-body p{color:var(--muted);font-size:14.5px;line-height:1.6;flex:1}
.svc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.svc-foot .from{font-size:13px;font-weight:700;color:var(--muted-2);letter-spacing:.02em}
.svc-foot .from b{color:var(--brown);font-size:14.5px}
.arrow-btn{width:46px;height:46px;border-radius:50%;background:#FBF3DF;color:var(--brown);display:grid;place-items:center;transition:background .3s,color .3s,transform .3s;flex:none}
.svc-card:hover .arrow-btn{background:var(--gold-2);color:#fff;transform:rotate(-38deg)}
/* Story */
.story-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
@media(max-width:920px){.story-grid{grid-template-columns:1fr;gap:36px}}
.story-media{position:relative}
.story-media .main-img{border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}
.story-media .main-img img{width:100%;height:480px;object-fit:cover}
.story-media .second-img{position:absolute;right:-8px;bottom:-34px;width:46%;border-radius:20px;overflow:hidden;border:8px solid var(--cream);box-shadow:var(--shadow)}
.story-media .second-img img{width:100%;height:210px;object-fit:cover}
.story-media .exp-badge{position:absolute;left:20px;top:20px;background:var(--brown);color:#FFF7EA;border-radius:16px;padding:13px 18px;text-align:center}
.story-media .exp-badge strong{display:block;font-size:26px;line-height:1;color:var(--gold-soft)}
.story-media .exp-badge small{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#CDBFA8}
@media(max-width:640px){.story-media .second-img{display:none}.story-media .main-img img{height:340px}}
.story-copy h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin:14px 0 16px}
.story-copy p{color:var(--muted);margin-bottom:14px}
.check-list{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:13px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:#3D2C1B}
.check-list .ck{width:26px;height:26px;flex:none;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;margin-top:1px}
.story-sign{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:22px}
.story-sign .avatar{width:52px;height:52px;border-radius:50%;background:var(--brown);color:var(--gold-soft);display:grid;place-items:center;font-weight:800;font-size:17px}
.story-sign strong{display:block;color:var(--brown)}
.story-sign span{color:var(--muted);font-size:14px}
/* Stats */
.stats-band{background:var(--brown-2);border-radius:28px;padding:46px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;overflow:hidden}
.stats-band::before{content:"جدة";position:absolute;right:18px;top:-38px;font-family:"Amiri",serif;font-size:170px;color:rgba(210,131,26,.10);line-height:1;pointer-events:none}
.stat strong{display:block;font-size:clamp(34px,4vw,48px);font-weight:800;color:#FFF7EA;line-height:1}
.stat strong i{font-style:normal;color:var(--gold-2)}
.stat span{display:block;margin-top:8px;color:#CDBFA8;font-weight:600;font-size:14.5px}
@media(max-width:860px){.stats-band{grid-template-columns:repeat(2,1fr);padding:34px 26px}}
/* Trust / why */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:920px){.why-grid{grid-template-columns:1fr;gap:34px}}
.why-media{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.why-media img{width:100%;height:520px;object-fit:cover}
.why-media video{width:100%;height:520px;object-fit:cover;object-position:center;display:block;background:var(--cream-2)}
.why-media .chip{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.95);border-radius:14px;padding:12px 16px;font-weight:700;font-size:14px;color:var(--brown);display:flex;gap:9px;align-items:center}
.why-media .chip svg{color:var(--gold)}
@media(max-width:640px){.why-media img{height:320px}.why-media video{height:320px}}
.why-item{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.why-item:last-child{border-bottom:0}
.why-item .num{width:52px;height:52px;flex:none;border-radius:16px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);box-shadow:var(--shadow-sm)}
.why-item h3{font-size:19px;margin-bottom:5px}
.why-item p{color:var(--muted);font-size:15px}
/* Process */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(min-width:921px){.process-grid .step:nth-child(2),.process-grid .step:nth-child(4){transform:translateY(34px)}}
@media(max-width:920px){.process-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.process-grid{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 24px;transition:transform .35s,box-shadow .35s}
.step:hover{box-shadow:var(--shadow)}
.step .no{font-size:44px;font-weight:800;color:transparent;-webkit-text-stroke:1.6px var(--gold-2);line-height:1}
.step h3{font-size:19px;margin:16px 0 8px}
.step p{color:var(--muted);font-size:14.5px}
.step .dur{display:inline-block;margin-top:14px;background:#FBF3DF;color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.06em;padding:5px 11px;border-radius:999px;text-transform:uppercase}
/* Projects */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.filter-row button{font-family:var(--font);font-weight:700;font-size:14px;padding:10px 20px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:#4A3A28;cursor:pointer;transition:all .2s}
.filter-row button.active{background:var(--brown);color:#FFF7EA;border-color:var(--brown)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:920px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.proj-grid{grid-template-columns:1fr}}
.proj-card{border-radius:22px;overflow:hidden;position:relative;text-decoration:none;min-height:340px;display:flex;align-items:flex-end;isolation:isolate}
.proj-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s}
.proj-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(24,15,6,.88) 0%,rgba(24,15,6,.25) 55%,transparent 100%);z-index:-1}
.proj-card:hover img{transform:scale(1.05)}
.proj-info{padding:24px;color:#FFF7EA;width:100%}
.proj-info .tag{display:inline-block;background:var(--gold-2);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:11px}
.proj-info h3{color:#fff;font-size:21px;margin-bottom:4px}
.proj-info p{color:#D8C9AC;font-size:14px}
.proj-card.hide{display:none}
/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:920px){.testi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.testi-grid{grid-template-columns:1fr}}
.testi{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:14px;transition:transform .3s,box-shadow .3s}
.testi:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.testi .stars{font-size:15px}
.testi blockquote{margin:0;font-size:15.5px;color:#3D2C1B;line-height:1.65;flex:1}
.testi-who{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:16px}
.testi-who .avatar{width:46px;height:46px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.testi-who strong{display:block;font-size:15px;color:var(--brown)}
.testi-who span{font-size:13px;color:var(--muted)}
.testi .room{margin-left:auto;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);background:#FBF3DF;padding:5px 10px;border-radius:999px;white-space:nowrap}
.testi-summary{text-align:center;margin-top:34px;color:var(--muted);font-weight:600}
.testi-summary b{color:var(--brown);font-size:19px}
/* Where we serve */
.serve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1080px){.serve-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.serve-grid{grid-template-columns:1fr}}
.serve-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s,border-color .35s}
.serve-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.serve-card .zone-ic{width:52px;height:52px;border-radius:16px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;margin-bottom:16px}
.serve-card h3{font-size:20px;font-weight:800;margin-bottom:4px}
.serve-card .zone-sub{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.serve-card>p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:18px}
.area-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.area-pill{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:13px;font-weight:700;color:#4A3A28;background:#FBF6EA;border:1px solid var(--line);border-radius:999px;padding:7px 12px;transition:background .25s,color .25s,border-color .25s}
.area-pill svg{color:var(--gold);flex:none;transition:color .25s}
.area-pill:hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
.area-pill:hover svg{color:#fff}
.serve-banner{margin-top:26px;background:var(--brown);border-radius:26px;padding:34px 36px;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:26px;align-items:center}
@media(max-width:1080px){.serve-banner{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.serve-banner{grid-template-columns:1fr;padding:28px 24px}}
.serve-point{display:flex;gap:13px;align-items:flex-start}
.serve-point .ic{width:44px;height:44px;flex:none;border-radius:13px;background:rgba(210,131,26,.22);color:var(--gold-soft);display:grid;place-items:center}
.serve-point strong{display:block;color:#FFF7EA;font-size:15.5px;line-height:1.3}
.serve-point span{display:block;color:#CDBFA8;font-size:13.5px;line-height:1.5;margin-top:3px}
.serve-seo{max-width:920px;margin:30px auto 0;text-align:center}
.serve-seo p{color:var(--muted);font-size:15.5px;line-height:1.75}
.serve-seo p + p{margin-top:12px}
.serve-seo b{color:var(--brown);font-weight:700}
/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1080px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.blog-card .ph{overflow:hidden;aspect-ratio:16/10}
.blog-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.blog-card:hover .ph img{transform:scale(1.06)}
.blog-body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.blog-meta{display:flex;gap:12px;font-size:12.5px;font-weight:700;color:var(--muted-2)}
.blog-meta .cat{color:var(--gold);text-transform:uppercase;letter-spacing:.07em}
.blog-body h3{font-size:17.5px;line-height:1.3}
.blog-body p{color:var(--muted);font-size:14px;flex:1}
.read-more{font-weight:800;font-size:14px;color:var(--brown);display:inline-flex;gap:7px;align-items:center}
.blog-card:hover .read-more{color:var(--gold-2)}
/* FAQ */
.faq-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:start}
@media(max-width:920px){.faq-grid{grid-template-columns:1fr;gap:32px}}
.faq-media{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);position:sticky;top:110px}
.faq-media img{width:100%;height:480px;object-fit:cover}
@media(max-width:920px){.faq-media{position:static}.faq-media img{height:300px}}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:12px;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.faq-item.open{box-shadow:var(--shadow-sm);border-color:var(--line-2)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font);font-weight:700;font-size:16.5px;color:var(--brown);padding:20px 22px}
.faq-q .plus{width:34px;height:34px;flex:none;border-radius:50%;background:#FBF3DF;color:var(--gold);display:grid;place-items:center;font-size:20px;font-weight:600;transition:transform .35s,background .3s,color .3s;line-height:1}
.faq-item.open .plus{transform:rotate(45deg);background:var(--gold-2);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a p{padding:0 22px 22px;color:var(--muted);font-size:15px}
/* Footer */
footer{background:var(--brown-2);color:#CDBFA8;margin-top:0}
.footer-strip{border-bottom:1px solid rgba(255,247,234,.1);padding:26px 0}
.footer-strip .container{display:flex;gap:14px 40px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.footer-strip .item{display:flex;gap:11px;align-items:center;font-weight:600;font-size:14.5px;color:#EBDFC9}
.footer-strip svg{color:var(--gold-2)}
.footer-main{padding:60px 0 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
@media(max-width:920px){.footer-main{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-main{grid-template-columns:1fr}}
.footer-main h4{color:#FFF7EA;font-size:16px;margin-bottom:16px}
.footer-main ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-main a{text-decoration:none;font-size:14.5px;color:#CDBFA8}
.footer-main a:hover{color:var(--gold-2)}
.footer-brand p{font-size:14.5px;max-width:320px;margin-top:14px}
.footer-contact li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
.footer-contact svg{color:var(--gold-2);flex:none;margin-top:3px}
.footer-bottom{border-top:1px solid rgba(255,247,234,.1);padding:22px 0 30px;display:flex;gap:10px 30px;flex-wrap:wrap;justify-content:space-between;font-size:13.5px;color:#9A8465}
.footer-bottom a{color:#CDBFA8;text-decoration:none}
.footer-bottom a:hover{color:var(--gold-2)}
/* Reveal: content is visible by default; the .in class only plays a one time entrance animation */
.reveal.in{animation:rise .6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal.in{animation:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
.to-top{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;background:var(--brown);color:#FFF7EA;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);opacity:.92;transition:opacity .3s,background .3s;z-index:50}
.to-top.show{opacity:1}
.to-top:hover{background:var(--gold-2)}
.wa-float{position:fixed;right:18px;bottom:86px;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 28px rgba(20,40,30,.30);z-index:60;transition:transform .25s}.wa-float:hover{transform:scale(1.07)}.brand-mark{background:#0E5A50;overflow:hidden;padding:0;border-radius:10px}.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}.footer-brand .brand-mark{background:#FFF7EA}@media(max-width:640px){.wa-float{bottom:80px}}


/* ===== Round fixes: equal cards, logo, WhatsApp, hero anim, RTL, blog ===== */
.brand-mark{width:56px !important;height:56px !important;flex:none;background:#FFF7EA !important;padding:4px !important;border-radius:14px !important;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:contain !important;display:block}
@media(max-width:400px){.brand-mark{width:48px !important;height:48px !important}}
.stats-band::before{content:"" !important}
.serve-grid{align-items:stretch;grid-auto-rows:1fr}
.serve-card{height:100%;justify-content:flex-start}
.serve-card>p{text-align:justify}
@media(max-width:560px){.serve-grid{grid-auto-rows:auto}}
.svc-grid{align-items:stretch}
.svc-card{height:100%}
.svc-more{font-size:13.5px;font-weight:800;color:var(--gold);letter-spacing:.02em}
.process-grid{align-items:stretch}
.process-grid .step:nth-child(2),.process-grid .step:nth-child(4){transform:none}
.step{height:100%;display:flex;flex-direction:column}
.step p{text-align:justify;font-size:15px;line-height:1.65;flex:1}
.step .dur{margin-top:16px;align-self:flex-start}
.est-result .btn{margin-top:10px}
.est-result .btn:first-of-type{margin-top:0}
.btn-wa-always{background:#25D366 !important;color:#fff !important;border:1px solid #25D366 !important;box-shadow:0 8px 20px rgba(37,211,102,.35)}
.btn-wa-always:hover{background:#1DA851 !important;border-color:#1DA851 !important;color:#fff !important}
.hero{isolation:isolate}
.hero-anim{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.hero-anim i{position:absolute;border-radius:50%;pointer-events:none}
.hero-anim .b1{width:560px;height:560px;left:-160px;top:-180px;background:radial-gradient(circle,rgba(210,131,26,.27),transparent 65%);animation:heroDrift1 16s ease-in-out infinite alternate}
.hero-anim .b2{width:640px;height:640px;right:-220px;top:6%;background:radial-gradient(circle,rgba(192,127,22,.21),transparent 65%);animation:heroDrift2 20s ease-in-out infinite alternate}
.hero-anim .b3{width:420px;height:420px;left:38%;bottom:-220px;background:radial-gradient(circle,rgba(243,227,188,.6),transparent 65%);animation:heroDrift1 26s ease-in-out infinite alternate-reverse}
.hero-anim .ring{width:340px;height:340px;right:6%;top:52px;border:1.5px solid rgba(192,127,22,.22);background:transparent;animation:heroRing 40s linear infinite}
.hero-anim .ring::after{content:"";position:absolute;inset:26px;border-radius:50%;border:1.5px dashed rgba(192,127,22,.18)}
.hero-anim .ring2{width:290px;height:290px;left:3%;top:110px;border:1.5px solid rgba(192,127,22,.27);background:transparent;animation:heroPulse 9s ease-in-out infinite}
.hero-anim .ring2::after{content:"";position:absolute;inset:22px;border-radius:50%;border:1.5px dashed rgba(192,127,22,.2)}
.hero-anim .arch{width:250px;height:330px;right:17%;top:34px;border:1.5px solid rgba(192,127,22,.16);border-radius:150px 150px 20px 20px;background:transparent;animation:heroPulse 13s ease-in-out -4s infinite reverse}
.hero-anim .p{width:10px;height:10px;background:radial-gradient(circle,rgba(210,131,26,.75),rgba(210,131,26,0) 68%);animation:heroFloat linear infinite}
.hero-anim .p1{left:6%;top:560px;animation-duration:13s;animation-delay:0s}
.hero-anim .p2{left:16%;top:300px;width:7px;height:7px;animation-duration:16s;animation-delay:-6s}
.hero-anim .p3{left:31%;top:640px;width:12px;height:12px;animation-duration:14s;animation-delay:-9s}
.hero-anim .p4{left:56%;top:210px;width:8px;height:8px;animation-duration:17s;animation-delay:-3s}
.hero-anim .p5{left:73%;top:480px;animation-duration:12s;animation-delay:-7s}
.hero-anim .p6{left:89%;top:380px;width:7px;height:7px;animation-duration:15s;animation-delay:-11s}
@keyframes heroDrift1{from{transform:translate(0,0) scale(1)}to{transform:translate(110px,58px) scale(1.13)}}
@keyframes heroDrift2{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-110px,66px) scale(.94)}}
@keyframes heroRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes heroPulse{0%,100%{transform:scale(.93);opacity:.95}50%{transform:scale(1.06);opacity:.3}}
@keyframes heroFloat{0%{transform:translateY(36px);opacity:0}14%{opacity:1}80%{opacity:.6}100%{transform:translateY(-240px);opacity:0}}
@media(max-width:640px){.hero-anim .arch{display:none}.hero-anim .ring2{width:210px;height:210px;left:-60px;top:90px}}
.hero-grid,.hero-media{position:relative;z-index:1}
.lang-btn{font-family:var(--font);font-weight:800;font-size:14.5px;padding:10px 18px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--brown);cursor:pointer;transition:all .2s;flex:none}
.lang-btn:hover{border-color:var(--gold-2);color:var(--gold-2)}
html[lang="ar"] body,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] button,html[lang="ar"] input,html[lang="ar"] select,html[lang="ar"] textarea{font-family:"Tajawal","Plus Jakarta Sans",system-ui,sans-serif}
[dir="rtl"] .faq-q{text-align:right}
[dir="rtl"] .f-field input,[dir="rtl"] .f-field select,[dir="rtl"] .f-field textarea{text-align:right}
[dir="rtl"] .est-result ul li,[dir="rtl"] .why-item,[dir="rtl"] .trust-item,[dir="rtl"] .serve-point,[dir="rtl"] .check-list li,[dir="rtl"] .quote-steps li,[dir="rtl"] .testi-who,[dir="rtl"] .footer-contact li{direction:rtl}
[dir="rtl"] input[type="range"]{direction:ltr}
.ltr-num{direction:ltr;unicode-bidi:isolate;display:inline-block;white-space:nowrap;font-variant-numeric:tabular-nums}
[dir="rtl"] .hero-video-badge{left:auto;right:0}
/* ===== Landing pages (same design system as the homepage) ===== */
.page-view p{text-align:justify}
.page-view .pv-fine{text-align:start}
.pv-hero{padding:150px 0 54px;position:relative;overflow:hidden;isolation:isolate}.pv-hero::before{content:"";position:absolute;left:-160px;top:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(210,131,26,.20),transparent 65%);animation:heroDrift1 16s ease-in-out infinite alternate;pointer-events:none}.pv-hero::after{content:"";position:absolute;right:4%;top:36px;width:290px;height:290px;border-radius:50%;border:1.5px solid rgba(192,127,22,.20);animation:heroPulse 9s ease-in-out infinite;pointer-events:none}.pv-hero>.container{position:relative;z-index:1}
.pv-crumb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13.5px;font-weight:700;color:var(--muted-2);margin-bottom:28px}
.pv-crumb a{color:var(--gold);text-decoration:none}
.pv-crumb a:hover{text-decoration:underline}
.pv-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.pv-hero h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;line-height:1.14;margin:16px 0 16px;max-width:900px}
.pv-lead{font-size:17.5px;color:var(--muted);line-height:1.7;max-width:820px}
.pv-hours{display:inline-flex;gap:9px;align-items:center;margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:700;font-size:13.5px;color:#4A3A28}
.pv-hours svg{color:var(--gold);flex:none}
.pv-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pv-hero-img{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);margin:0}
.pv-hero-img img{width:100%;height:100%;max-height:470px;object-fit:cover;display:block}
.pv-body{padding-bottom:6px}
.pv-sec{padding:36px 0;border-top:1px solid var(--line)}
.pv-sec h2{font-size:clamp(24px,3vw,34px);font-weight:800;margin-bottom:14px;max-width:840px;line-height:1.25}
.pv-sec p{color:var(--muted);font-size:16.5px;line-height:1.75;max-width:880px}
.pv-table-wrap{margin-top:20px}
.pv-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pv-table th{background:var(--brown);color:#FFF7EA;text-align:start;font-size:13.5px;font-weight:800;padding:15px 17px}
.pv-table td{padding:15px 17px;border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:#4A3A28;vertical-align:top;text-align:start}
.pv-table td.rate{font-weight:800;color:var(--brown);white-space:nowrap}
.pv-note{margin-top:16px;font-size:14px!important}
.pv-districts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.pv-dist{display:flex;gap:9px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 13px;font-weight:700;font-size:14px;color:#3D2C1B;line-height:1.3}
.pv-dist i{font-style:normal;width:24px;height:24px;flex:none;border-radius:50%;background:#FBF3DF;color:var(--gold);display:grid;place-items:center;font-size:12px;font-weight:800}
.pv-faq{max-width:880px;margin-top:20px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:16px;margin-top:20px}
.rel-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:transform .3s,box-shadow .3s,border-color .3s}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}
.rel-card h3{font-size:17.5px;font-weight:800;color:var(--brown);line-height:1.3}
.rel-card p{color:var(--muted);font-size:13.5px;line-height:1.55;flex:1}
.rel-link{font-weight:800;color:var(--gold);font-size:14px}
.pv-cta{background:var(--brown);border-radius:28px;padding:clamp(28px,4.5vw,50px);margin:40px 0 84px;position:relative;overflow:hidden}
.pv-cta::after{content:"";position:absolute;right:-70px;bottom:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(210,131,26,.35),transparent 68%);pointer-events:none}
.pv-cta h2{color:#FFF7EA;font-size:clamp(27px,3.6vw,42px);font-weight:800;line-height:1.2;position:relative;z-index:1}
.pv-cta h2 em{font-style:normal;color:var(--gold-2)}
.pv-cta p{color:#CDBFA8;max-width:660px;margin-top:12px;position:relative;z-index:1}
.pv-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;position:relative;z-index:1}
.pv-btn-ghost{border:1px solid rgba(255,247,234,.45);color:#FFF7EA;background:transparent}
.pv-btn-ghost:hover{border-color:var(--gold-2);color:var(--gold-2)}
.pv-about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.pv-about-text p{color:var(--muted);font-size:16.5px;line-height:1.75;margin-bottom:14px}
.pv-about-photo{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);margin:0;background:#fff;border:1px solid var(--line)}
.pv-about-photo img{width:100%;display:block}
.pv-about-photo figcaption{padding:16px 20px}
.pv-about-photo figcaption b{display:block;color:var(--brown);font-size:15.5px}
.pv-about-photo figcaption span{color:var(--muted);font-size:13.5px}
.pv-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 44px}
.pv-rev-summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 26px;max-width:880px}
.pv-rev-summary .big{font-size:42px;font-weight:800;color:var(--brown);line-height:1}
.pv-rev-summary .big i{font-style:normal;font-size:24px;color:var(--muted-2)}
.pv-rev-summary .stars{color:var(--gold-2);font-size:19px;letter-spacing:2px}
.pv-rev-summary .sum{color:var(--muted);font-weight:600;font-size:14.5px}
.pv-form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
.pv-form-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px}
.pv-form-card h2{font-size:24px;font-weight:800;margin-bottom:8px;line-height:1.3}
.pv-form-card>p{color:var(--muted);font-size:15px;margin-bottom:20px}
.pv-form-card .f-field{margin-bottom:16px}
.pv-fine{font-size:12.5px;color:var(--muted-2);margin-top:14px}
.pv-info-card{background:var(--brown);border-radius:24px;padding:30px}
.pv-info-card h3{color:#FFF7EA;font-size:21px;font-weight:800;margin-bottom:18px}
.pv-info-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.pv-info-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#CDBFA8}
.pv-info-list svg{color:var(--gold-2);flex:none;margin-top:2px}
.pv-info-list a{color:#FFF7EA;text-decoration:none;font-weight:700}
.pv-map{border-radius:26px;overflow:hidden;box-shadow:var(--shadow-sm);margin-top:8px;border:1px solid var(--line)}
.pv-map-panel{position:relative;text-align:center;padding:56px 24px 50px;background:radial-gradient(120% 140% at 50% 0%,#FBF6EA 0%,var(--cream-2) 80%)}.pv-map-anim{position:absolute;inset:0;pointer-events:none}.pv-map-anim i{position:absolute;border-radius:50%}.pv-map-anim .b1{width:340px;height:340px;left:-120px;top:-160px;background:radial-gradient(circle,rgba(210,131,26,.20),transparent 68%);animation:pvMapDrift 11s ease-in-out infinite alternate}.pv-map-anim .b2{width:300px;height:300px;right:-110px;bottom:-150px;background:radial-gradient(circle,rgba(45,31,19,.10),transparent 68%);animation:pvMapDrift 13s ease-in-out infinite alternate-reverse}.pv-map-anim .ring,.pv-map-anim .ring2{left:50%;top:56px;width:74px;height:74px;margin-left:-37px;border:2px solid rgba(192,127,22,.45);animation:pvMapRing 3.2s ease-out infinite}.pv-map-anim .ring2{animation-delay:1.6s}.pv-map-pin{position:relative;z-index:1;width:74px;height:74px;margin:0 auto 18px;border-radius:50%;background:var(--brown);color:var(--gold-soft);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.pv-map-panel h3{position:relative;z-index:1;font-size:clamp(24px,3vw,32px);margin:0 0 10px;color:var(--brown)}.page-view .pv-map-panel p{position:relative;z-index:1;max-width:520px;margin:0 auto 24px;color:var(--muted);text-align:center}.pv-map-panel .pv-map-btn{position:relative;z-index:1}@keyframes pvMapDrift{from{transform:translate(0,0)}to{transform:translate(34px,22px)}}@keyframes pvMapRing{0%{transform:scale(.55);opacity:.85}100%{transform:scale(1.9);opacity:0}}@media (prefers-reduced-motion: reduce){.pv-map-anim i{animation:none}}
@media(max-width:900px){
  .pv-hero-grid{grid-template-columns:1fr;gap:30px}
  .pv-about-grid{grid-template-columns:1fr;gap:32px}
  .pv-form-grid{grid-template-columns:1fr}
  .pv-districts{grid-template-columns:repeat(3,1fr)}
  .pv-why-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .pv-table thead{display:none}
  .pv-table,.pv-table tbody,.pv-table tr,.pv-table td{display:block;width:100%}
  .pv-table tr{padding:12px 0;border-top:1px solid var(--line)}
  .pv-table tbody tr:first-child{border-top:0}
  .pv-table td{border-top:0;padding:5px 17px}
  .pv-table td::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
  .pv-table td.rate{white-space:normal}
}
@media(max-width:760px){.pv-hero{padding-top:126px}}
@media(max-width:560px){.pv-districts{grid-template-columns:repeat(2,1fr)}}

/* Justified body copy: every paragraph block reads edge-to-edge, EN + AR, all viewports.
   Headings, buttons, nav, chips, form labels and small meta lines keep their own alignment. */
.hero-sub,.sec-head p,.svc-body p,.story-copy p,.why-item p,.trust-item p,.serve-point span,.serve-seo p,.testi blockquote,.faq-a p,.blog-body p,.blog-article p,.blog-article .art-intro,.quote-copy p,.quote-form>p,.est-form>p,.est-note,.footer-brand p{text-align:justify}

/* ===== Visitor-verified fixes: header fit, justified everywhere ===== */
/* Header: the logo mark shrinks inside the header pill only (footer keeps its size),
   so brand + nav + phone + language + Book button always fit inside the pill. */
.header-pill .brand-mark{width:44px !important;height:44px !important;border-radius:12px !important;padding:3px !important}
.header-pill .brand-text strong{font-size:17.5px}
.header-pill .brand-text span{font-size:10.5px}
.lang-btn{padding:9px 15px;font-size:14px}
@media(max-width:820px){.header-cta{display:none}.header-pill{padding-left:14px;gap:9px}.brand-text strong{font-size:16.5px}}
@media(max-width:1180px){.main-nav{display:none}.menu-btn{display:grid}}
.proj-card{background:var(--brown-2)}
@media(max-width:480px){.lang-btn{padding:8px 12px;font-size:13px}}
/* Justified body copy everywhere: EVERY paragraph on the page (homepage, landing
   pages, blog articles, footer included) reads edge-to-edge. Headings, buttons,
   nav, chips, labels, table cells and small meta lines keep their own alignment. */
p{text-align:justify}
.blog-article li{text-align:justify}
.page-view .pv-fine{text-align:justify}
[dir="rtl"] p,[dir="rtl"] .blog-article li{text-align:justify}
.testi-summary{text-align:center}

/* ===== Round: instant hero, equal areas banner, centred Insights ===== */
.hero-first-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero-video-frame video{position:relative;z-index:1}
.serve-banner{align-items:center}
.serve-point{align-items:flex-start}
.serve-point .ic{margin-top:1px}
.serve-point strong{font-size:16.5px;line-height:1.3}
.serve-point span{font-size:14px;line-height:1.55}
#blog .sec-head .eyebrow{font-size:15.5px;letter-spacing:.16em}

/* ===== Mobile overflow fix — nothing may exceed the viewport (verified on 390px) =====
   Root cause of the cut hero paragraph: at <=980px .hero-top collapses to
   grid-template-columns:1fr, and a 1fr track's automatic minimum is the widest
   min-content inside it. The hero h1 <em> ("Plaster, perfected.") is
   white-space:nowrap at a 40px font floor (~430px wide), so the single column —
   and the hero copy and paragraph inside it — laid out wider than a phone
   screen and were clipped mid-word at the right edge. Separately, the
   .pv-map-anim blobs stick out of .pv-map-panel, which had no clipping.
   The rules below are containment + mobile-only; desktop layout is untouched.
   overflow-x:clip is declared after hidden so modern browsers use clip
   (hidden is the fallback) — clip does not break position:sticky (.faq-media). */
html,body{overflow-x:hidden;overflow-x:clip}
body{max-width:100%}
img,video,svg,iframe{max-width:100%}
.hero-top,.hero-copy,.hero-video,.pv-hero-grid,.pv-hero-copy{min-width:0}
.hero-sub,.pv-lead{overflow-wrap:break-word}
.pv-map-panel{overflow:hidden}
.hero-anim{clip-path:inset(0)}
@media(max-width:980px){
  .hero-top{grid-template-columns:minmax(0,1fr)}
  .pv-hero-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .hero h1 em{white-space:normal}
  .hero-anim .ring{width:min(340px,78vw);height:min(340px,78vw);right:2%;top:40px}
  .hero-anim .b2{width:min(640px,120vw);height:min(640px,120vw);right:-30vw}
  .hero-anim .b3{animation:none;width:min(420px,80vw);height:min(420px,80vw);left:auto;right:2%;bottom:-120px}
}
@media(max-width:480px){
  .hero .container{width:calc(100% - 40px)}
  .hero-sub{font-size:17.5px}
}
@media(max-width:920px){.testi-who{flex-wrap:wrap}}




/* ============================================================
   WORDPRESS THEME ADDITIONS — Builds Jeddah v2.0.0
   Everything below this line was added for the WordPress theme:
   layout aliases (.wrap / .sec / .kicker), WP menu support,
   hero-grid mapping, the .grad headline gradient, .page-hero,
   the CTA band, the WhatsApp button colour, generic content
   typography (.entry-content), why-cards, and the global
   mobile overflow guard.
   ============================================================ */

/* Layout aliases: .wrap == design .container, .sec == design .section, .kicker == design .eyebrow */
.wrap{width:min(1320px,100% - 40px);margin-inline:auto}
@media(min-width:1400px){.wrap{width:min(1360px,100% - 64px)}}
.sec{padding:88px 0}
@media(max-width:640px){.sec{padding:60px 0}}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.kicker::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.sec-head.center .kicker::after{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}

/* WordPress menus inside the designed header */
.main-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center}
.main-nav li{margin:0;padding:0}
.main-nav li a{text-decoration:none;font-weight:600;font-size:14px;color:#4A3A28;padding:8px 9px;border-radius:999px;transition:color .2s,background .2s;white-space:nowrap;display:block}
.main-nav li a:hover,.main-nav li.current-menu-item a{color:var(--gold-2);background:#FBF6EA}
.mobile-menu ul{list-style:none;margin:0;padding:0}
.mobile-menu li a{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-radius:14px;text-decoration:none;font-weight:600;color:var(--brown)}
.mobile-menu li a:hover{background:#FBF6EA;color:var(--gold-2)}
.menu-btn{font-size:21px;line-height:1}
.header-phone .hp-ic{font-style:normal}
body.admin-bar .site-header{top:46px}
@media(max-width:782px){body.admin-bar .site-header{top:60px}}

/* Homepage hero: the live structure is used as-is (.hero-top is the
   two-column grid, .hero-media is the wide photo row below it), so the
   design's own hero rules govern — no mapping overrides. */
.hero-anim span{position:absolute;border-radius:50%;pointer-events:none}
/* Generic page hero band (based on the design's .pv-hero look) */
.page-hero{padding:150px 0 54px;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(120% 140% at 50% 0%,#FBF6EA 0%,var(--cream-2) 100%)}
.page-hero::before{content:"";position:absolute;left:-160px;top:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(210,131,26,.20),transparent 65%);pointer-events:none}
.page-hero>.wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;line-height:1.14;margin:16px 0 16px;max-width:900px}
.page-hero .page-sub{font-size:17.5px;color:var(--muted);line-height:1.7;max-width:820px}
.page-hero .page-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;font-weight:700;color:var(--muted-2);margin-top:14px}
.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:900px){.page-hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}}
@media(max-width:760px){.page-hero{padding-top:126px}}
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13.5px;font-weight:700;color:var(--muted-2);margin-bottom:10px}
.breadcrumb a{color:var(--gold);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* CTA band: dark brown band, cream text, gold + WhatsApp buttons */
.cta-band{background:var(--brown);padding:64px 0;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-70px;bottom:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(210,131,26,.35),transparent 68%);pointer-events:none}
.cta-band-in{display:flex;gap:26px 40px;flex-wrap:wrap;align-items:center;justify-content:space-between;position:relative;z-index:1}
.cta-band h2{color:#FFF7EA;font-size:clamp(27px,3.6vw,40px);font-weight:800;line-height:1.2}
.cta-band p{color:#CDBFA8;max-width:620px;margin-top:10px}
.cta-band-btns{display:flex;gap:12px;flex-wrap:wrap}

/* WhatsApp button colour */
.btn-wa{background:#22b358;color:#fff;border-color:#22b358}
.btn-wa:hover{background:#1a9448;border-color:#1a9448;color:#fff}

/* FAQ list wrapper on the homepage */
.faq-list{max-width:880px}
.faq-more{margin-top:20px}

/* Blog cards with inner links */
.blog-card h3 a{color:inherit;text-decoration:none}
.blog-card h3 a:hover{color:var(--gold-2)}

/* Footer strip wrapper alias */
.footer-strip .wrap{display:flex;gap:14px 40px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.footer-brand .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.footer-brand .brand-text strong{color:#FFF7EA}
.footer-hours{margin-top:12px;font-size:14px;color:#CDBFA8}

/* Generic content typography (page / post bodies) */
.entry-content h2{font-size:clamp(24px,3vw,34px);font-weight:800;margin:34px 0 14px;line-height:1.25}
.entry-content h3{font-size:21px;font-weight:800;margin:26px 0 10px}
.entry-content h4{font-size:17.5px;font-weight:800;margin:20px 0 8px}
.entry-content p{color:var(--muted);font-size:16.5px;line-height:1.75;margin:0 0 16px;max-width:880px}
.entry-content ul,.entry-content ol{color:var(--muted);font-size:16.5px;line-height:1.75;margin:0 0 18px;padding-inline-start:22px;max-width:880px}
.entry-content li{margin-bottom:7px}
.entry-content a{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.entry-content img{border-radius:18px;margin:18px 0}
.entry-content blockquote{margin:22px 0;padding:18px 22px;background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--gold-2);border-radius:14px;color:#3D2C1B;font-size:16.5px;max-width:880px}
.entry-content table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:20px 0}
.entry-content th{background:var(--brown);color:#FFF7EA;text-align:start;font-size:13.5px;font-weight:800;padding:14px 16px}
.entry-content td{padding:14px 16px;border-top:1px solid var(--line);font-size:15px;color:#4A3A28;vertical-align:top}
.page-links{margin-top:24px;font-weight:700}
.pagination{margin-top:36px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--brown);font-weight:700;text-decoration:none}
.pagination .page-numbers.current{background:var(--brown);color:#FFF7EA;border-color:var(--brown)}

/* Global mobile overflow guard (the live site needed this fix) */
html,body{overflow-x:hidden;overflow-x:clip}
body{max-width:100%}
img,video,svg,iframe{max-width:100%}

/* ============================================================
   v2.0.3 — HEADER = LIVE HEADER
   The v2.0.1 fit-fix block is REMOVED. The header now carries the
   live site's own 8 links, so the live file's own header CSS and
   breakpoints (already in this stylesheet: phone icon-only at
   <=1380px, nav into the hamburger at <=1180px, CTA hidden at
   <=820px) govern again — exactly as on the live site. The
   v2.0.2 <=480px block at the end still guarantees the hamburger
   sits fully inside the pill on small phones.
   ============================================================ */

/* The live design has no search control in the header — hide any
   search element a menu/plugin injects into the pill. */
.site-header .header-pill .search-form,
.site-header .header-pill .search-toggle,
.site-header .header-pill .header-search,
.site-header .header-pill .search-icon{display:none !important}

/* <=820px: the live site's own mobile header fix — snug pill padding
   and a 40px menu button, flex-none, fully inside the pill. */
@media(max-width:820px){
  .header-pill{padding:8px 12px;gap:8px}
  .header-actions{gap:8px}
  .brand{gap:9px}
  .header-pill .brand-text strong{font-size:16px}
  .header-phone{width:38px;height:38px}
  .menu-btn{width:40px;height:40px;flex:none}
}

/* ============================================================
   v2.0.2 — MOBILE HEADER FIT AT <=480px (320 / 360 / 390)
   Why v2.0.1 still overflowed at 320px: the <=820px block above
   only shaved fixed sizes (pill padding, a 40px menu button).
   It never touched the structure: .brand{flex:none} and
   .header-actions{flex:none} inside a nowrap pill meant NO flex
   item was allowed to shrink, so when the items' max-content
   sum exceeded the pill, flexbox forced the excess out of the
   pill's right edge — and the last item is the hamburger.
   Measured demand at 320px was ~331px (brand 168 = 40px mark +
   9px gap + "Builds Jeddah" at 16px, actions 155) against a
   264px pill inner width (288px pill - 2x12px padding): the
   hamburger landed at x=319-359 in a 320px viewport and the
   global overflow-x:clip cut it to a sliver.

   This block fixes the cause, not the symptom:
   1) The brand becomes the ONE flexible item (flex:0 1 auto +
      min-width:0 on .brand and .brand-text, name nowrap with
      ellipsis). The action cluster stays fixed-size, so the
      hamburger's right edge is bounded by the pill itself —
      the brand absorbs any variance and truncates before the
      button can ever be pushed out.
   2) Everything is downsized so the natural (untruncated) sum
      fits at 320px with slack even under worst-case font
      metrics (widths measured with DejaVu Sans Bold, ~13%
      wider than the theme's Jakarta/Noto class fonts):
        pill: width calc(100% - 16px) = 304, padding 8px
              -> inner 288
        brand: mark 32 + gap 5 + name at 14px (<=104) = 141
        pill gap: 5
        actions: phone 36 + gap 5 + عربي (<=34 text + 14
              padding + 2 border = 50) + gap 5 + menu 36 = 132
        total worst case: 141 + 5 + 132 = 278 <= 288
        (slack 10px; ~30px with the real fonts)
      At 360px slack grows to ~50px, at 390px to ~80px.
   Nothing above 480px changes.
   ============================================================ */
@media(max-width:480px){
  .header-pill{width:calc(100% - 16px);padding:8px;gap:5px}
  .brand{flex:0 1 auto;min-width:0;gap:5px}
  .header-pill .brand-mark{width:32px !important;height:32px !important;padding:2px !important}
  .brand-text{min-width:0}
  .header-pill .brand-text span{display:none}
  .header-pill .brand-text strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-actions{gap:5px}
  .header-phone{width:36px;height:36px}
  .lang-btn{font-size:12.5px;padding:6px 7px}
  .menu-btn{width:36px;height:36px;flex:none}
  /* Floating WhatsApp button: slightly smaller and lower on
     small phones so it covers less of the hero headline.
     Position/size only; colours and behaviour unchanged. */
  .wa-float{width:52px;height:52px;bottom:74px;right:14px}
}

/* ============================================================
   v2.0.3 — LIVE PARITY ADDITIONS
   Rules the earlier theme build dropped when it skipped the
   estimator and quote-form sections, restored verbatim from the
   live designed stylesheet, plus the article-sheet rules the
   single-post template needs.
   ============================================================ */

/* Estimator */
.estimator{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden}
@media(max-width:920px){.estimator{grid-template-columns:1fr}}
.est-form{padding:38px}
.est-form h3{font-size:26px;margin-bottom:6px}
.est-form>p{color:var(--muted);font-size:15px;margin-bottom:24px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:700;font-size:14px;color:var(--brown);margin-bottom:9px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{font-family:var(--font);font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px;border:1px solid var(--line-2);background:#FFFCF5;color:#4A3A28;cursor:pointer;transition:all .2s}
.seg button:hover{border-color:var(--gold)}
.seg button.active{background:var(--brown);color:#FFF7EA;border-color:var(--brown)}
.range-row{display:flex;align-items:center;gap:16px}
.range-row output{font-weight:800;color:var(--brown);background:var(--gold-soft);border-radius:10px;padding:6px 12px;font-size:14.5px;white-space:nowrap}
input[type=range]{flex:1;accent-color:var(--gold-2);height:6px;cursor:pointer}
.est-result{background:var(--brown);color:#FFF7EA;padding:38px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.est-result::after{content:"";position:absolute;right:-70px;bottom:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(210,131,26,.35),transparent 68%)}
.est-result .lbl{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.est-result .amount{font-size:clamp(32px,3.6vw,44px);font-weight:800;line-height:1.15;margin:12px 0 6px}
.est-result .per{color:#CDBFA8;font-size:14.5px}
.est-result ul{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:10px;position:relative;z-index:1}
.est-result li{display:flex;gap:10px;font-size:14.5px;color:#EBDFC9}
.est-result li svg{color:var(--gold-2);flex:none;margin-top:3px}
.est-result .btn{position:relative;z-index:1;align-self:flex-start}
.est-note{font-size:12.5px;color:#A98F6E;margin-top:16px;position:relative;z-index:1}

/* Quote form */
.quote-wrap{background:var(--brown);border-radius:30px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1fr 1.05fr;gap:48px;position:relative;overflow:hidden}
.quote-wrap::before{content:"";position:absolute;left:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(210,131,26,.35),transparent 68%)}
@media(max-width:920px){.quote-wrap{grid-template-columns:1fr;gap:32px}}
.quote-copy{position:relative;z-index:1}
.quote-copy h2{color:#FFF7EA;font-size:clamp(30px,4vw,44px);margin:14px 0 14px}
.quote-copy h2 em{font-style:normal;color:var(--gold-2)}
.quote-copy p{color:#CDBFA8;max-width:440px}
.quote-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.quote-steps li{display:flex;gap:14px;color:#EBDFC9;font-weight:600;font-size:15px;align-items:flex-start}
.quote-steps .n{width:30px;height:30px;flex:none;border-radius:50%;background:rgba(210,131,26,.25);color:var(--gold-soft);display:grid;place-items:center;font-size:13.5px;font-weight:800}
.quote-contact{margin-top:30px;border-top:1px solid rgba(255,247,234,.15);padding-top:22px;display:grid;gap:8px;color:#CDBFA8;font-size:14.5px}
.quote-contact b{color:#FFF7EA}
.quote-contact a{color:#FFF7EA;text-decoration:none}
.quote-form{background:#fff;border-radius:24px;padding:30px;position:relative;z-index:1}
.quote-form h3{font-size:21px;margin-bottom:4px}
.quote-form>p{color:var(--muted);font-size:14px;margin-bottom:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.f-row{grid-template-columns:1fr}}
.f-field{margin-bottom:14px}
.f-field label{display:block;font-size:13px;font-weight:700;color:var(--brown);margin-bottom:7px}
.f-field input,.f-field select,.f-field textarea{width:100%;font-family:var(--font);font-size:15px;padding:13px 15px;border:1px solid var(--line-2);border-radius:13px;background:#FFFCF5;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(210,131,26,.16)}
.f-field textarea{resize:vertical;min-height:88px}
.form-success{display:none;background:#F2F8EC;border:1px solid #CBE3B4;color:#3C5A22;border-radius:14px;padding:15px 17px;font-size:14.5px;font-weight:600;margin-bottom:16px}
.form-success.show{display:block}

/* Single article sheet (the live article view, as a page body) */
.article-sheet{width:min(860px,100%);margin:0 auto;padding:28px 0 90px}
.article-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:800;font-size:14.5px;padding:11px 20px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--brown);text-decoration:none;margin-bottom:26px}
.article-back:hover{border-color:var(--gold-2);color:var(--gold-2)}
.blog-article h1.art-title{font-size:clamp(28px,4.4vw,42px);font-weight:800;margin:0 0 14px;line-height:1.2}
.blog-article .art-cta .cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.pv-body .entry-content>h2:first-child{margin-top:0}

/* ===== v2.0.5 — current-page highlight (which page is open) =====
   The open page's nav link must be unmistakable at a glance (owner's
   rule, agreed 2026-11-09): deep brown pill — the dark CTA's tone —
   with light text and an amber underline. Desktop: the underline is
   an INSET box-shadow on every main-nav link (transparent when not
   current), so the 3px space is always reserved inside the pill and
   nothing shifts or grows when the highlight moves. Mobile menu:
   same deep pill plus an amber bar on the reading-start edge. */
.main-nav a{box-shadow:inset 0 -3px 0 transparent;transition:color .2s,background .2s,box-shadow .2s}
.main-nav a.current{background:var(--brown);color:#FFF7EA;box-shadow:inset 0 -3px 0 var(--gold-2)}
.main-nav a.current:hover{background:var(--brown-2);color:#FFF7EA}
.mobile-menu a.current{background:var(--brown);color:#FFF7EA;box-shadow:inset 3px 0 0 var(--gold-2)}
.mobile-menu a.current:hover{background:var(--brown-2);color:#FFF7EA}
.mobile-menu a.current span{color:var(--gold-soft)}
[dir="rtl"] .mobile-menu a.current{box-shadow:inset -3px 0 0 var(--gold-2)}

/* ===== v2.0.12 — Arabic / RTL (ported from the previous designed site) =====
   The old site's Arabic mode rules, kept verbatim where the theme uses
   the same classes (both were built from the same design): Tajawal for
   Arabic text, right-aligned FAQ questions and form fields, RTL flow
   inside checklist/steps/testimonial blocks, the range slider kept LTR,
   justified paragraphs. The hero cards swap sides to mirror the LTR
   layout (the old file flipped its hero badge the same way). */
html[lang="ar"] body,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] button,html[lang="ar"] input,html[lang="ar"] select,html[lang="ar"] textarea{font-family:"Tajawal","Plus Jakarta Sans",system-ui,sans-serif}
[dir="rtl"] .faq-q{text-align:right}
[dir="rtl"] .f-field input,[dir="rtl"] .f-field select,[dir="rtl"] .f-field textarea{text-align:right}
[dir="rtl"] .est-result ul li,[dir="rtl"] .why-item,[dir="rtl"] .trust-item,[dir="rtl"] .serve-point,[dir="rtl"] .check-list li,[dir="rtl"] .quote-steps li,[dir="rtl"] .testi-who,[dir="rtl"] .footer-contact li{direction:rtl}
[dir="rtl"] input[type="range"]{direction:ltr}
[dir="rtl"] .hero-card.rating{left:auto;right:22px}
[dir="rtl"] .hero-card.area{right:auto;left:22px}
@media(max-width:640px){[dir="rtl"] .hero-card.rating{left:auto;right:12px}}
[dir="rtl"] p,[dir="rtl"] .pv-body li{text-align:justify}