/* ════════════════════════════════════════════════════════════
   H-PIXELS — site stylesheet
   Palette sampled from the logo. Type: Cormorant Garamond
   headings over Manrope, IBM Plex Sans Arabic for the AR side.
   All spacing uses logical properties so RTL mirrors for free.
   ════════════════════════════════════════════════════════════ */

:root{
  --white:#FFFFFF;
  --stone:#EAE3DB;
  --stone-50:#F6F3EF;
  --stone-200:#DDD4C8;
  --ink:#26201A;
  --bark:#4A3728;
  --clay:#9B7C5F;
  --clay-deep:#7A5C40;
  --clay-hover:#684E36;
  --sage:#68756D;
  --sage-deep:#4E5A53;
  --sage-50:#E9EDE8;
  --muted:#6E6459;

  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  --gut:clamp(18px,4vw,48px);
  --maxw:1220px;
  --head-h:72px;

  --r-card:14px;
  --r-btn:10px;
  --r-tile:12px;

  --sh-1:0 1px 2px rgba(38,32,26,.04);
  --sh-2:0 10px 28px rgba(38,32,26,.07);

  --t-fast:180ms ease;
  --t-acc:320ms cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--head-h)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0;
         letter-spacing:-.005em;color:var(--bark);text-wrap:balance}
h4{font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.3;margin:0;color:var(--bark)}
p{margin:0 0 1em}
a{color:var(--clay-deep)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--clay-deep);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;
         text-transform:uppercase;color:var(--clay);margin:0 0 14px}
.lead{font-size:18.5px;line-height:1.65;color:#4A443C;max-width:62ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* keeps phone numbers and addresses from being reordered by the RTL bidi algorithm */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ── Arabic ─────────────────────────────────────────────── */
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic",var(--sans);line-height:1.85}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{
  font-family:"IBM Plex Sans Arabic",var(--sans);font-weight:600;letter-spacing:0;line-height:1.4}
html[dir="rtl"] .eyebrow{letter-spacing:0}
html[dir="rtl"] .lead{line-height:1.85}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  padding:14px 20px;border-radius:var(--r-btn);border:1px solid transparent;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
  cursor:pointer;white-space:nowrap;
}
.btn-primary{background:var(--clay-deep);color:#fff}
.btn-primary:hover{background:var(--clay-hover)}
.btn-ghost{background:transparent;color:var(--bark);border-color:var(--stone-200)}
.btn-ghost:hover{background:var(--stone-50);border-color:var(--clay)}
.btn svg{width:15px;height:15px;flex:none;fill:currentColor}

/* ── header ─────────────────────────────────────────────── */
.head{
  position:sticky;inset-block-start:0;z-index:80;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-block-end:1px solid var(--stone-200);
}
.head-in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  height:var(--head-h);display:flex;align-items:center;gap:20px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;direction:ltr;flex:none}
.brand img{height:40px;width:auto}
.brand span{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.14em;color:var(--bark)}

.nav{display:flex;gap:26px;margin-inline:auto}
.nav a{
  font-size:14px;font-weight:600;text-decoration:none;color:var(--muted);
  padding-block:6px;border-block-end:2px solid transparent;transition:color var(--t-fast);
}
.nav a:hover{color:var(--bark)}
.nav a.on{color:var(--bark);border-block-end-color:var(--sage)}

.head-tools{display:flex;align-items:center;gap:12px;flex:none}
.lang{
  display:flex;align-items:center;font-family:var(--sans);font-size:12.5px;font-weight:700;
  background:none;border:1px solid var(--stone-200);border-radius:999px;overflow:hidden;
  color:var(--muted);cursor:pointer;padding:0;
}
.lang span{padding:6px 11px;transition:background var(--t-fast),color var(--t-fast)}
.lang span.on{background:var(--sage);color:#fff}
.burger{display:none;background:none;border:1px solid var(--stone-200);border-radius:var(--r-btn);
        width:42px;height:42px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger svg{width:19px;height:19px;stroke:var(--bark);stroke-width:2;fill:none}

@media (max-width:1040px){
  .nav{position:fixed;inset-block-start:var(--head-h);inset-inline:0;background:var(--white);
       flex-direction:column;gap:0;padding:8px var(--gut) 20px;margin:0;
       border-block-end:1px solid var(--stone-200);box-shadow:var(--sh-2);
       transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast)}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:13px 0;border-block-end:1px solid var(--stone-50);font-size:16px}
  .nav a.on{border-block-end-color:var(--sage)}
  .burger{display:flex}
  .head-tools{margin-inline-start:auto}
}
.btn-head .short{display:none}
@media (max-width:520px){
  .brand span{display:none}
  .btn-head .full{display:none}
  .btn-head .short{display:inline}
  .btn{padding:12px 15px}
  .head-in{gap:12px}
}

/* ── hero ───────────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:46fr 54fr;
  min-height:calc(100svh - var(--head-h));align-items:stretch;
}
.hero-txt{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,80px) clamp(20px,4.4vw,64px);
  max-width:720px;margin-inline-start:auto;width:100%;
}
html[dir="rtl"] .hero-txt{margin-inline-start:0;margin-inline-end:auto}
.hero h1{font-size:clamp(36px,4.6vw,60px);line-height:1.06;margin:0}
html[dir="rtl"] .hero h1{font-size:clamp(32px,4.2vw,54px);line-height:1.35}
.hero .lead{margin:22px 0 0;font-size:17.5px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:32px}
.hero-img{position:relative;background:var(--stone)}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-img{order:-1;aspect-ratio:4/3}
  .hero-img img{position:static;height:100%}
  .hero-txt{padding-block:44px 56px;margin-inline:auto}
}

/* ── sections ───────────────────────────────────────────── */
.sec{padding-block:clamp(72px,9vw,130px)}
.sec-stone{background:var(--stone)}
.sec-50{background:var(--stone-50)}
.sec-head{max-width:70ch;margin-block-end:clamp(34px,4.5vw,54px)}
.sec-head h2{font-size:clamp(28px,3.6vw,42px)}
html[dir="rtl"] .sec-head h2{font-size:clamp(26px,3.2vw,38px)}
.sec-head .lead{margin-block-start:16px}

/* ── services accordion ─────────────────────────────────── */
.acc{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:820px){.acc{grid-template-columns:1fr}}
.acc-col{display:grid;gap:12px;align-content:start}

.svc{background:var(--stone);border:1px solid transparent;border-radius:var(--r-card);
     transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.sec-stone .svc{background:var(--white)}
.svc:hover{box-shadow:var(--sh-1)}
.svc.open{background:var(--stone-50);border-color:var(--stone-200);box-shadow:var(--sh-1)}
.sec-stone .svc.open{background:var(--white)}

.svc-btn{
  width:100%;background:none;border:0;padding:16px 18px;cursor:pointer;text-align:start;
  display:grid;grid-template-columns:38px minmax(0,1fr) 26px;gap:14px;align-items:center;
  font-family:inherit;color:inherit;
}
.svc-ic{width:38px;height:38px;border-radius:999px;background:var(--bark);
        display:flex;align-items:center;justify-content:center;flex:none}
.svc-ic svg{width:18px;height:18px;stroke:var(--stone);stroke-width:1.6;fill:none;
            stroke-linecap:round;stroke-linejoin:round}
.svc-name{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--bark);line-height:1.32}
.svc-pm{width:26px;height:26px;border-radius:999px;background:var(--sage);flex:none;
        display:flex;align-items:center;justify-content:center;transition:background var(--t-fast)}
.svc-pm svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.svc-pm .v{transition:opacity var(--t-fast),transform var(--t-fast);transform-origin:center}
.svc.open .svc-pm{background:var(--sage-deep)}
.svc.open .svc-pm .v{opacity:0;transform:scaleY(0)}

.svc-panel{overflow:hidden;max-height:0;transition:max-height var(--t-acc)}
.svc-inner{padding:0 18px 18px;padding-inline-start:70px}
@media (max-width:520px){.svc-inner{padding-inline-start:18px}}
.svc-inner p{font-size:15px;color:#4A443C;margin:0}
.svc-go{display:inline-flex;align-items:center;gap:7px;margin-block-start:14px;
        font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
        color:var(--clay-deep);text-decoration:none}
.svc-go:hover{color:var(--clay-hover)}
.svc-go svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
html[dir="rtl"] .svc-go svg{transform:scaleX(-1)}
.svc-foot{margin-block-start:clamp(28px,3.5vw,40px);display:flex;justify-content:center}

/* ── projects ───────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

.tile{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-tile);
      overflow:hidden;background:var(--stone);text-decoration:none;isolation:isolate}
.tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);
          transition:transform 380ms cubic-bezier(.2,.7,.3,1),filter 380ms ease}
.tile-scrim{position:absolute;inset:0;background:rgba(48,36,24,.78);opacity:0;
            transition:opacity 380ms ease}
.tile-cap{position:absolute;inset-inline:0;inset-block-end:0;padding:16px 18px;z-index:2;
          transform:translateY(8px);opacity:0;transition:transform 380ms cubic-bezier(.2,.7,.3,1),opacity 380ms ease}
.tile-cap .t{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:#F7F3ED;line-height:1.22}
html[dir="rtl"] .tile-cap .t{font-family:"IBM Plex Sans Arabic",var(--sans);font-size:18px}
.tile-cap .m{display:block;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.09em;
             text-transform:uppercase;color:#CBBCA6;margin-block-start:6px}
.tile:hover img,.tile:focus-visible img{transform:scale(1.045);filter:saturate(1)}
.tile:hover .tile-scrim,.tile:focus-visible .tile-scrim{opacity:1}
.tile:hover .tile-cap,.tile:focus-visible .tile-cap{transform:none;opacity:1}

/* touch devices get no hover, so the caption stays put */
@media (hover:none){
  .tile-cap{opacity:1;transform:none}
  .tile-scrim{opacity:1;background:linear-gradient(to top,rgba(48,36,24,.86) 0%,rgba(48,36,24,.35) 42%,transparent 70%)}
}

/* ── about ──────────────────────────────────────────────── */
.two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.facts{border-block-start:1px solid var(--stone-200)}
.fact{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding-block:14px;
      border-block-end:1px solid var(--stone-200);align-items:baseline}
.fact dt{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;
         text-transform:uppercase;color:var(--muted);white-space:nowrap}
html[dir="rtl"] .fact dt{letter-spacing:0}
.fact dd{margin:0;font-size:15.5px;color:var(--bark);font-weight:500}

/* ── contact ────────────────────────────────────────────── */
.ch{border-block-start:1px solid var(--stone-200)}
.ch a,.ch div.r{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:baseline;
                padding-block:16px;border-block-end:1px solid var(--stone-200);
                text-decoration:none;color:inherit;transition:color var(--t-fast)}
.ch a:hover{color:var(--clay-deep)}
.ch .k{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;
       text-transform:uppercase;color:var(--muted);white-space:nowrap}
html[dir="rtl"] .ch .k{letter-spacing:0}
.ch .v{font-size:16.5px;font-weight:500;word-break:break-word;direction:ltr;text-align:start}
html[dir="rtl"] .ch .v.ar{direction:rtl}

/* ── footer ─────────────────────────────────────────────── */
.foot{background:var(--stone);border-block-start:1px solid var(--stone-200);padding-block:48px 40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)) minmax(0,1.15fr);
           gap:clamp(24px,4vw,48px)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot .brand{margin-block-end:14px}
.foot p{font-size:14px;color:var(--muted);max-width:34ch}
.foot h5{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;
         text-transform:uppercase;color:var(--bark);margin:0 0 12px}
html[dir="rtl"] .foot h5{letter-spacing:0}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-block-end:7px}
.foot ul a{font-size:14px;color:var(--muted);text-decoration:none}
.foot ul a:hover{color:var(--clay-deep)}
.foot-btm{margin-block-start:36px;padding-block-start:20px;border-block-start:1px solid var(--stone-200);
          font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}

/* ── service detail page ────────────────────────────────── */
.crumb{font-size:12.5px;color:var(--muted);padding-block:22px 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--clay-deep)}
.svc-hero{padding-block:clamp(30px,5vw,52px) clamp(48px,7vw,86px)}
.svc-hero h1{font-size:clamp(32px,4.6vw,54px);max-width:18ch}
html[dir="rtl"] .svc-hero h1{font-size:clamp(28px,4vw,46px)}
.svc-hero .lead{margin-block-start:20px}
.soon{background:var(--sage-50);border:1px solid #CFD8CC;border-radius:var(--r-card);
      padding:26px 28px;margin-block-start:34px;max-width:64ch}
.soon .t{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--sage-deep)}
html[dir="rtl"] .soon .t{font-family:"IBM Plex Sans Arabic",var(--sans);font-size:21px}
.soon p{font-size:15.5px;color:#42463F;margin:8px 0 0}
.svc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:30px}

/* ── reveal ─────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(14px);transition:opacity 600ms ease,transform 600ms cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .tile img,.tile-cap,.tile-scrim,.svc-panel{transition:none}
}