@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Playfair+Display:wght@400;500&display=swap');

*{box-sizing:border-box}
:root{--ink:#2b2c2e;--ink2:#38393b;--slate:#637074;--teal:#398077;--teal-d:#2c675f;
 --soft:#f1f7f6;--sand:#f6f4f1;--line:#e6e8e8;--l2:#eff1f1}
html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);direction:rtl;line-height:1.8;
 font-family:'Almarai',-apple-system,"SF Arabic","Segoe UI",Tahoma,Arial,sans-serif;font-weight:300;
 -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{color:var(--teal);font-size:12px;font-weight:800;letter-spacing:3px;margin:0 0 12px;
 display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--teal)}
h2{font-size:clamp(25px,3.6vw,38px);font-weight:800;margin:0 0 18px;line-height:1.28;letter-spacing:-.8px;color:var(--ink)}
.lead{color:var(--slate);font-size:15.5px;margin:0 0 14px;max-width:62ch}
/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
 border-bottom:1px solid var(--line)}
.nav .in{max-width:1120px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px}
.nav img.brand{height:38px;width:auto}
.nav .sp{flex:1}
.nav a.mini{background:var(--teal);color:#fff;padding:9px 20px;font-size:13px;font-weight:700;text-decoration:none}
.nav a.mini:hover{background:var(--teal-d)}
/* hero */
.hero{position:relative;min-height:clamp(500px,76vh,720px);display:flex;align-items:center;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
 background:linear-gradient(105deg,rgba(28,29,31,.95) 4%,rgba(35,37,39,.82) 42%,rgba(35,37,39,.28) 100%)}
.hero .in{position:relative;z-index:2;color:#fff;padding:76px 0 96px}
.hlogo{height:clamp(46px,6vw,64px);width:auto;margin:0 0 26px}
.hk{font-size:12.5px;letter-spacing:4px;font-weight:700;color:#9fc8c1;margin:0 0 18px}
.hero h1{font-size:clamp(32px,5.6vw,58px);font-weight:800;margin:0 0 20px;line-height:1.2;letter-spacing:-1.6px}
.hero h1 em{font-style:normal;color:#7fbdb3}
.hero p{font-size:clamp(15px,1.9vw,18.5px);max-width:600px;margin:0 0 34px;color:rgba(255,255,255,.9)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.cta{background:var(--teal);color:#fff;padding:15px 34px;font-size:15.5px;font-weight:700;
 text-decoration:none;display:inline-block;transition:.18s}
.cta:hover{background:var(--teal-d);transform:translateY(-2px)}
.cta.o{background:transparent;border:1px solid rgba(255,255,255,.55)}
.cta.o:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* proof */
.proof{background:var(--ink);color:#fff}
.proof .in{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;
 grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.proof div{padding:26px 20px;border-left:1px solid rgba(255,255,255,.1)}
.proof div:last-child{border-left:none}
.proof b{display:block;font-size:21px;font-weight:800;margin-bottom:2px}
.proof span{font-size:12.8px;color:rgba(255,255,255,.62)}
/* about */
.about{padding:96px 0 80px}
.about .g{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.about img{box-shadow:-22px 22px 0 var(--soft)}
/* gallery */
.gal{padding:20px 0 96px}
.gg{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-top:34px}
.gi{margin:0;position:relative;overflow:hidden}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gi:hover img{transform:scale(1.06)}
.gi figcaption{position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;color:#fff;font-size:13px;font-weight:700;
 background:linear-gradient(to top,rgba(20,21,22,.88),transparent)}
/* journey */
.jour{background:var(--sand);padding:92px 0}
.jgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;margin-top:40px;
 background:var(--line);border:1px solid var(--line)}
.jstep{background:#fff;padding:26px 24px;display:flex;gap:16px;transition:.2s}
.jstep:hover{background:var(--soft)}
.jn{font-family:'Playfair Display',serif;font-size:34px;line-height:1;color:var(--teal);opacity:.5;flex:0 0 auto}
.jstep h4{margin:0 0 5px;font-size:16.5px;font-weight:800}
.jstep p{margin:0;font-size:13.2px;color:var(--slate);line-height:1.75}
/* services */
.srv{padding:92px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:22px;margin-top:40px}
.card{border:1px solid var(--line);background:#fff;transition:.22s}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(43,44,46,.09);border-color:#d5dbda}
.card img{width:100%;height:170px;object-fit:cover}
.card .b{padding:22px}
.card h3{margin:0 0 7px;font-size:17px;font-weight:800}
.card p{margin:0;font-size:13.3px;color:var(--slate)}
/* tool */
.tool{background:var(--ink);padding:88px 0 26px}
.tool .eyebrow{color:#7fbdb3} .tool .eyebrow::before{background:#7fbdb3}
.tool h2{color:#fff} .tool .lead{color:rgba(255,255,255,.7)}
.board{background:#fff;margin-top:40px;transform:translateY(48px)}
.steps{display:flex;border-bottom:1px solid var(--line)}
.st{flex:1;padding:16px 10px;font-size:12.8px;color:var(--slate);text-align:center;cursor:pointer;
 border-bottom:3px solid transparent;transition:.2s}
.st.on{border-color:var(--teal);color:var(--ink);font-weight:800;background:var(--soft)}
.st.done{color:var(--teal);font-weight:700}
.pane{display:none;padding:34px 36px} .pane.on{display:block}
.pane h3{margin:0 0 4px;font-size:22px;font-weight:800}
.pane .hint{margin:0 0 26px;font-size:13.4px;color:var(--slate)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:16px}
label{display:block;font-size:12.3px;color:var(--slate);margin-bottom:6px;font-weight:400}
input,select{width:100%;padding:12px 13px;border:1px solid var(--line);font-family:inherit;font-size:14px;
 color:var(--ink);background:#fff;border-radius:2px}
input:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(57,128,119,.1)}
table{width:100%;border-collapse:collapse;font-size:13.6px}
th{background:var(--ink2);color:#fff;padding:12px 9px;text-align:right;font-size:12.3px;font-weight:700}
th.mid,td.mid{text-align:center}
td{padding:10px 9px;border-bottom:1px solid var(--l2)}
tbody tr:hover td{background:#fbfcfc}
tr.on td{background:var(--soft)}
tr.wet td:first-child::after{content:"رطبة";color:var(--teal);font-size:10.5px;border:1px solid #cfe2df;padding:1px 6px;margin-right:8px}
.floor td{background:#fff!important;font-weight:800;font-size:13px;padding:22px 9px 8px;border-bottom:1.5px solid var(--ink)}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--teal);cursor:pointer;padding:0;box-shadow:none}
input[type=number]{width:64px;padding:6px;text-align:center;font-variant-numeric:tabular-nums}
.n{font-variant-numeric:tabular-nums;text-align:left;white-space:nowrap}
.qa{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.qa button{border:1px solid var(--line);background:#fff;color:var(--slate);padding:7px 14px;
 font-family:inherit;font-size:12.5px;cursor:pointer;border-radius:2px}
.qa button:hover{border-color:var(--teal);color:var(--teal)}
.extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.ex{border:1px solid var(--line);padding:18px}
.ex.hl{border-color:var(--teal);background:var(--soft)}
.ex h4{margin:0 0 4px;font-size:15px;font-weight:800}
.ex p{font-size:12.3px;color:var(--slate);margin:0 0 13px;min-height:36px}
.ex .r{display:flex;align-items:center;gap:10px}
.tag{font-size:12.2px;color:var(--slate)} .tag b{color:var(--ink);font-weight:700}
.note{border-right:2px solid var(--teal);background:var(--soft);padding:14px 17px;font-size:12.9px;margin:18px 0 0}
.note b{color:var(--teal)}
.empty{color:var(--slate);font-size:13.4px;padding:14px 0}
.badge{display:inline-block;background:#fff;color:var(--ink);font-size:11px;padding:3px 10px;margin-right:8px;vertical-align:middle;font-weight:700}
/* bar */
.bar{position:fixed;inset:auto 0 0 0;background:#fff;border-top:1px solid var(--ink);
 box-shadow:0 -10px 30px rgba(43,44,46,.1);padding:13px 24px;z-index:50}
.bar .in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.bar .lbl{font-size:11.3px;color:var(--slate)}
.bar .big{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.bar .big.fin{color:var(--teal);font-size:25px}
.sp{flex:1}
.btn{background:var(--ink);color:#fff;border:none;padding:12px 26px;font-family:inherit;font-size:14px;
 font-weight:700;cursor:pointer;border-radius:2px}
.btn:hover{background:#000}
.btn.g{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.btn:disabled{opacity:.3;cursor:not-allowed}
footer{background:var(--ink);color:#fff;padding:110px 0 40px;margin-top:0}
footer .in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.8px;color:rgba(255,255,255,.62)}
footer img.flogo{height:42px;width:auto}
@media (max-width:860px){.about .g{grid-template-columns:1fr;gap:30px}.about img{box-shadow:none}}
@media (max-width:640px){th,td{padding:7px 5px;font-size:12.2px}input[type=number]{width:52px}
 .pane{padding:22px 16px}.st{font-size:10.6px;padding:12px 4px}.board{transform:none;margin-top:26px}
 .tool{padding:70px 0 40px}.hero .in{padding:60px 0 76px}}
@media print{.bar,.qa,.nav,.hero,.proof,.about,.gal,.jour,.srv{display:none!important}
 .pane{display:block!important;padding:0}.tool{background:#fff;padding:0}.board{transform:none}}

#wrapwrap > header, #wrapwrap > footer, .o_footer_copyright{display:none!important}
#wrapwrap{padding:0!important}