/* AZ calm theme — one brand colour carries header, footer and bands; white space everywhere else.
   Loaded after style.css and pages.css. */
:root{
  --brand:#352b2d; --brand-2:#43373a; --brand-ink:#f4efee; --brand-muted:#bdb2b3;
  --accent:#b0292e; --accent-2:#952126;
  --bg:#ffffff; --surface:#ffffff; --ink:#2b2526; --muted:#766d6f; --line:#ebe6e4;
  --red:#a32b30; --wine:#7d2226; --soft:#f6f3f2;
  --band:#f6f3f2; --band-ink:#2b2526; --band-muted:#766d6f; --band-line:#e6e0de;
  --grad:linear-gradient(var(--accent),var(--accent));
  --f-display:"Readex Pro","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
}
body{line-height:1.85}
section{padding-block:clamp(56px,7vw,96px)}
h1,h2,h3{font-family:var(--f-display);font-weight:600}
html[lang="en"] h1,html[lang="en"] h2{font-family:var(--f-display);font-weight:600;letter-spacing:0}
.eyebrow{color:var(--accent)}
.eyebrow::before{background:var(--accent)}

/* Buttons */
.btn{padding:12px 22px;font-weight:600;box-shadow:none}
.btn-primary,.btn-accent,.btn-light{background:var(--accent);color:#fff;box-shadow:none}
.btn-primary:hover,.btn-accent:hover,.btn-light:hover{background:var(--accent-2);transform:none;box-shadow:none}
.btn-outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-outline-light:hover{background:rgba(255,255,255,.1)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-wa{background:#3d8a5c}.btn-wa:hover{background:#33754e}

/* ===== Header: solid brand bar ===== */
header.top{background:var(--brand);border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
header.top.scrolled{box-shadow:0 6px 20px -14px rgba(0,0,0,.5)}
.nav{height:76px;gap:16px}
.top .mark-d{display:none}.top .mark-l{display:block}
.top .brand-name{color:#fff}
.brand-name b{background:none;-webkit-background-clip:initial;background-clip:initial;color:#e0575b}
.top .links a{color:var(--brand-muted);font-weight:500}
.top .links>a:hover,.top .links .has-sub>a:hover{color:#fff;background:transparent}
.top .links a.active{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.top .links .sub{background:#fff;border:0;border-radius:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.top .links .sub a{color:var(--ink);box-shadow:none;border-radius:8px}
.top .links .sub a:hover{background:var(--soft);color:var(--ink)}
.top .links .sub a.active{color:var(--accent);box-shadow:none}
.top .icon-btn{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.top .icon-btn:hover{border-color:#fff}
.hdr-cta{background:var(--accent);color:#fff;padding:10px 18px;font-size:14px;white-space:nowrap}
.hdr-cta:hover{background:var(--accent-2)}
@media (max-width:1120px){.hdr-cta{display:none}}
@media (max-width:920px){
  .top .links{background:var(--brand);border-bottom:1px solid var(--brand-2)}
  .top .links .sub{background:transparent;box-shadow:none}
  .top .links .sub a{color:var(--brand-muted)}
  .top .links .sub a:hover{background:transparent;color:#fff}
}

/* ===== Footer: brand ===== */
footer{background:var(--brand);color:var(--brand-ink);border-top:0;margin-top:0;padding-block:48px 28px}
footer .mark-d{display:none}footer .mark-l{display:block}
footer .brand-name{color:#fff}
.foot-grid h4{color:#fff}
.foot-grid ul,.foot-about p,.foot{color:var(--brand-muted)}
.foot-grid a:hover{color:#fff}
.foot{border-top-color:var(--brand-2)}
.ficons a{background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
.ficons a:hover{border-color:#fff;transform:none}

/* ===== Inner page banner (image with brand tint) ===== */
.banner{position:relative;background-color:var(--brand);background-image:linear-gradient(90deg,rgba(53,43,45,.94),rgba(53,43,45,.72)),var(--img,none);background-size:cover;background-position:center;color:#fff}
[dir="rtl"] .banner{background-image:linear-gradient(270deg,rgba(53,43,45,.94),rgba(53,43,45,.72)),var(--img,none)}
.banner .page-head{padding-block:clamp(48px,7vw,96px)}
.banner .crumbs,.banner .crumbs a{color:var(--brand-muted)}
.banner .crumbs a:hover{color:#fff}
.banner .eyebrow{color:#f0a3a5}.banner .eyebrow::before{background:#f0a3a5}
.banner h1{color:#fff;font-size:clamp(28px,3.6vw,44px)}
.banner .lead{color:#e4dcdc}
.banner .svc-hero{grid-template-columns:1fr}
.banner .svc-art{display:none}
.banner .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.banner .btn-ghost:hover{background:rgba(255,255,255,.1)}

/* ===== Home ===== */
.h-hero{position:relative;color:#fff;background-color:var(--brand);background-image:linear-gradient(180deg,rgba(53,43,45,.82),rgba(53,43,45,.9)),var(--img);background-size:cover;background-position:center}
.h-hero .wrap{padding-block:clamp(72px,11vw,150px) clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:clamp(48px,7vw,96px)}
.h-hero-text{max-width:640px}
.h-kicker{display:inline-block;font-size:14px;color:#f0a3a5;margin-bottom:14px}
.h-hero h1{font-size:clamp(32px,5vw,58px);line-height:1.25;color:#fff}
.h-hero p{color:#e4dcdc;font-size:clamp(16px,1.6vw,18px);margin:18px 0 0}
.h-hero .hero-ctas{margin-top:30px}
.h-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid rgba(255,255,255,.18);padding-top:24px;gap:16px}
.h-stats div{min-width:0}
.h-stats dt{font-size:13px;color:var(--brand-muted)}
.h-stats dd{margin:4px 0 0;font-family:var(--f-display);font-weight:600;font-size:clamp(16px,1.8vw,21px);color:#fff}
@media (max-width:760px){.h-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}}

.h-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.h-about h2{font-size:clamp(24px,3vw,34px);margin:12px 0 16px;color:var(--brand)}
.h-about p{color:var(--muted);margin:0 0 14px;max-width:56ch}
.h-about-img{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/3;max-width:100%}
.h-about-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.h-about{grid-template-columns:1fr}}
.h-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);text-decoration:none;font-weight:600;font-size:15px}
.h-link svg{width:15px;height:15px}

.h-soft{background:var(--soft)}
.h-head{margin-bottom:clamp(24px,3vw,36px)}
.h-head h2{font-size:clamp(24px,3vw,34px);margin-top:10px;color:var(--brand)}
.h-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.h-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.h-card{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;text-decoration:none;border:1px solid var(--line);transition:box-shadow .3s;min-width:0}
.h-card:hover{box-shadow:0 16px 36px -24px rgba(53,43,45,.55)}
.h-card-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.h-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
@media (hover:hover){.h-card:hover .h-card-img img{transform:scale(1.04)}}
.h-card-body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1}
.h-card h3{font-size:17px;color:var(--brand)}
.h-card p{margin:0;font-size:14px;color:var(--muted)}
.h-card .h-link{margin-top:auto;padding-top:6px;font-size:14px}

.h-work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.h-work-item{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;text-decoration:none}
.h-work-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
@media (hover:hover){.h-work-item:hover img{transform:scale(1.04)}}
.h-work-item span{position:absolute;inset:auto 0 0 0;padding:40px 18px 18px;color:#fff;font-family:var(--f-display);font-weight:600;font-size:17px;background:linear-gradient(transparent,rgba(30,24,25,.78))}
@media (max-width:820px){.h-work{grid-template-columns:repeat(2,minmax(0,1fr))}}

.h-band{background:var(--brand);color:#fff}
.h-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.h-why div{min-width:0}
.h-why-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#f0a3a5;margin-bottom:16px}
.h-why h3{font-size:18px;color:#fff;margin-bottom:8px}
.h-why p{margin:0;color:var(--brand-muted);font-size:15px}
@media (max-width:900px){.h-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.h-why{grid-template-columns:1fr}}

.h-cta{background:var(--brand);color:#fff;border-radius:24px;padding:clamp(28px,4vw,52px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.h-cta h2{font-size:clamp(22px,2.6vw,30px);color:#fff}
.h-cta p{margin:6px 0 0;color:var(--brand-muted)}

/* ===== Shared components, calmer ===== */
.scard:hover,.ccard:hover,.way:hover,.picon:hover,.pmini:hover{transform:none}
.cta-band{background:var(--brand);color:#fff;border:0}
.cta-band h2{color:#fff}.cta-band p{color:var(--brand-muted);opacity:1}
.tech{background:var(--soft)}
.tech .eyebrow{color:var(--accent)}
.tcard,.tcard:hover{background:#fff}
.tcard .ico{background:var(--soft);color:var(--accent)}
.tcard h3{color:var(--brand)}
.tlist{color:var(--muted)}.tlist li{opacity:1}.tlist li::before{background:var(--accent)}
.tlink{color:var(--accent)}.tlink:hover{color:var(--accent-2)}
.sub-h{color:var(--brand)}
.offer-pct{background:var(--accent)}
.offer{background:#fff;border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.kind-3d{background:var(--brand)}
.kind-site{background:var(--accent)}
.wa-float{background:#3d8a5c;width:52px;height:52px;box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
.wa-float svg{width:26px;height:26px}
.qpreview{background:var(--brand)}

/* Careers */
.careers{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(18px,3vw,36px);align-items:start}
.careers-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}
.csteps{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:15px}
.csteps li::marker{color:var(--accent);font-weight:600}
.careers-form{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;min-width:0}
.form-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--soft)}
.form-bar strong{color:var(--brand);font-family:var(--f-display)}
.gform-wrap{position:relative}
.gform{position:relative;z-index:1;display:block;width:100%;height:1500px;border:0;background:transparent}
.gform-fallback{position:absolute;inset:0 0 auto 0;padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--muted)}
.gform-fallback strong{color:var(--brand);font-family:var(--f-display)}
.gform-fallback .btn{margin-top:8px}
@media (max-width:860px){.careers{grid-template-columns:1fr}.careers-side{position:static}.gform{height:1700px}}