:root{
  --ground:#F2F0EE; --sheet:#FFFFFF; --ink:#241D1F; --ink2:#5A5054; --ink3:#6A6063;
  --line:#DCD7D5; --line2:#C9C2C0;
  --maroon:#5B2333; --deep:#471B28; --red:#B82E25; --orange:#DF8050; --off:#E3E4E3;
  --ui:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --dp:'Alexandria','IBM Plex Sans Arabic',sans-serif;
  --e:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:86px}  /* 74px sticky header + air, or every #anchor lands decapitated */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);
  font-size:14px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.w{max-width:1360px;margin:0 auto;padding-inline:clamp(18px,4vw,60px)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:var(--ground);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px}
.brand{font-family:var(--dp);font-size:17px;font-weight:600;letter-spacing:.01em;color:var(--maroon);
  display:flex;align-items:center;gap:11px;flex:none}
/* flex:none is load-bearing. img{max-width:100%} caps the width while the
   inline height:44px holds, so a shrinking brand crushes the wordmark's
   aspect — measured at 32.5% on the English lockup at 375px. */
.bmark{display:block}
.nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,30px)}
.nav a{font-size:15px;color:var(--ink2);transition:color .15s var(--e);padding:6px 0}
.nav a:hover,.nav a:focus-visible{color:var(--maroon)}
.hd .book{font-size:14.5px;font-weight:600;color:#fff;background:var(--red);padding:11px 20px}
.hd .book:hover,.hd .book:focus-visible{background:#9A2620}
.burger{display:none}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink)}
.hero .ph{height:min(74vh,620px);min-height:400px;overflow:hidden}
.hero .ph img{width:100%;height:100%;object-fit:cover}
/* Alpha is set by the CONTRAST the headline needs, not by taste. The old ramp
   fell to .38 by 58%, and on a bright render the top line of a two-line h1
   composited to 2.60:1 — under the 3:1 large-text floor. Worst case here is a
   blown-white pixel: composited = a*36 + (1-a)*255, so the band the headline
   occupies needs a >= .54 to clear 3:1, and it does now at every stop. */
.hero .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(36,29,31,.93) 0%,rgba(36,29,31,.84) 30%,rgba(36,29,31,.62) 54%,rgba(36,29,31,.26) 72%,rgba(36,29,31,0) 88%)}
.hero .cap{position:absolute;inset-inline:0;bottom:0;padding-block:0 clamp(30px,4.4vw,60px)}
.hero h1{font-family:var(--dp);font-size:clamp(26px,3.4vw,44px);line-height:1.5;font-weight:600;
  margin:0 0 12px;color:#fff;max-width:22ch;letter-spacing:.01em}
.hero p{margin:0 0 30px;color:rgba(255,255,255,.86);font-size:16px;max-width:46ch;line-height:1.85}
.btn{display:inline-block;background:var(--red);color:#fff;font-size:15.5px;font-weight:600;
  padding:17px 38px;transition:background .15s var(--e);box-shadow:0 8px 20px rgba(184,46,37,.25)}
.btn:hover,.btn:focus-visible{background:#9A2620}
.btn-o{background:transparent;color:var(--maroon);border:1px solid var(--maroon);box-shadow:none}
.btn-o:hover{background:var(--maroon);color:#fff}

/* ---------- section furniture ---------- */
.sec{padding-block:clamp(48px,6vw,90px)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:clamp(24px,3vw,42px)}
.sec-h h2{font-family:var(--dp);font-size:clamp(21px,2.4vw,30px);font-weight:600;margin:0;letter-spacing:.01em}
.sec-h .m{font-size:12px;color:var(--ink3);letter-spacing:.01em}
.sec-h a{font-size:13px;color:var(--maroon);border-bottom:1px solid var(--maroon);padding-bottom:2px}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:clamp(12px,1.4vw,18px)}
.svc a{display:block;background:var(--sheet);transition:background .15s var(--e)}
.svc a:hover{background:#fff}
.svc .ph{aspect-ratio:4/3;overflow:hidden;background:var(--off)}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--e)}
.svc a:hover .ph img,.svc a:focus-visible .ph img{transform:scale(1.03)}
.svc .t{padding:15px}
.svc h3{font-family:var(--dp);font-size:15px;font-weight:600;margin:0;line-height:1.5}

/* ---------- work grid ---------- */
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(12px,1.4vw,18px)}
.work figure{margin:0}
.work .ph{aspect-ratio:3/2;overflow:hidden;background:var(--off)}
.work .ph img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--e)}
.work figure:hover .ph img{transform:scale(1.03)}
.work figcaption{padding-top:12px;display:flex;justify-content:space-between;gap:12px;
  font-size:12px;color:var(--ink3);letter-spacing:.01em}
.work figcaption b{font-weight:500;color:var(--ink)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,4vw,72px);align-items:start}
.steps-list{min-width:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,28px);align-items:start;
  padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--line2)}
.step .sn{font-family:var(--dp);font-size:clamp(36px,3.8vw,54px);font-weight:600;color:var(--red);
  line-height:1;min-width:1.15em;text-align:center;font-variant-numeric:tabular-nums}
.step h3{font-family:var(--dp);font-size:17px;font-weight:600;margin:0 0 8px}
.step p{margin:0;font-size:15.5px;color:var(--ink2);line-height:1.9;max-width:52ch}
.steps-list .btn{margin-top:30px}
.steps-fig{margin:0;min-width:0;position:sticky;top:98px;display:grid;gap:clamp(14px,1.6vw,20px)}
.steps-fig .ph{aspect-ratio:3/2;overflow:hidden}
.steps-fig .ph img{width:100%;height:100%;object-fit:cover}

/* ---------- showroom ---------- */
.show{background:var(--maroon);color:#fff}
.show .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(28px,4vw,72px);
  padding-block:clamp(52px,6vw,92px)}
.show h2{font-family:var(--dp);font-size:clamp(26px,3.2vw,38px);font-weight:600;margin:0 0 18px;color:#fff}
.smark{display:block;margin-block:0 22px;margin-inline:0 auto}
.show p{margin:0 0 9px;color:rgba(255,255,255,.88);font-size:16px;line-height:1.9;max-width:44ch}
.show dt{font-size:12px;color:rgba(255,255,255,.66);margin-bottom:5px}
.show dd{margin:0 0 20px;font-size:16.5px}
.show dd.tel{font-family:var(--dp);font-size:clamp(24px,2.6vw,32px);font-weight:600;margin:0 0 14px}
.show dd.acts{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.55);padding:11px 22px;font-size:14.5px;color:#fff;
  transition:border-color .15s var(--e),background .15s var(--e)}
.pill:hover,.pill:focus-visible{border-color:#fff;background:rgba(255,255,255,.08)}
.show a.u{border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
.show a.u:hover{border-color:#fff}
.show .btn{background:#fff;color:var(--maroon);box-shadow:0 8px 20px rgba(28,21,24,.22)}
.show .btn:hover,.show .btn:focus-visible{background:var(--off)}

/* contact icons. flex follows `dir`, so the mark leads in reading order in both
   trees with no mirroring. Aligned to the FIRST line, not the block centre —
   the hours sentence wraps to two lines on a phone. */
.show .ln{display:flex;align-items:flex-start;gap:9px}
.show .ic{width:16px;height:16px;flex:none;margin-block-start:4px}
.show dd.tel .ln{align-items:center}
.show dd.tel .ic{width:22px;height:22px;margin-block-start:0}
.pill .ic{width:17px;height:17px;margin-block-start:0}

/* ---------- category pages: columns come from the pool size, not the viewport ---------- */
/* .work sizes its own columns from the viewport, which at three images leaves an
   empty slot beside them. The TV page has three frames in the whole corpus, so
   the pool decides instead — and as the pool shrinks the frames grow. */
.intro{font-size:16px;color:var(--ink2);line-height:1.9;max-width:46ch;
  margin:0 0 clamp(30px,4vw,60px)}
.cat{grid-template-columns:repeat(6,1fr)}
.cat figure{grid-column:span 2}
.cat[data-n="2"] figure{grid-column:span 3}
.cat[data-n="1"] figure{grid-column:span 6;justify-self:center;width:min(100%,1080px)}
.cat figure.wide{grid-column:span 3}
.cat figure.full{grid-column:span 6}
.hero h1+.btn{margin-block-start:18px}
.steps.one{grid-template-columns:minmax(0,900px)}
@media (max-width:900px){.cat[data-n="3"] figure{grid-column:span 3}
  .cat figure.full{grid-column:span 6}}
@media (max-width:620px){.cat[data-n="3"] figure,.cat[data-n="2"] figure,
  .cat figure.wide{grid-column:span 6}}

/* ---------- the facts ---------- */
/* Reads as a specification table, not a feature grid: no cards, no icons, no
   shadow. --line2 rather than --line because this is structure a reader follows
   down a column, not a decorative rule under a heading. */
.facts dl{margin:0;border-top:1px solid var(--line2)}
.facts .r{display:grid;grid-template-columns:minmax(96px,150px) 1fr;gap:clamp(12px,2vw,30px);
  padding-block:18px;border-bottom:1px solid var(--line2)}
.facts dt{font-size:12px;color:var(--ink3);letter-spacing:.01em;margin:0;padding-block-start:3px}
.facts dd{margin:0;font-size:15.5px;line-height:1.9;color:var(--ink2);max-width:62ch}
.facts .note{margin:18px 0 0;font-size:12px;color:var(--ink3);line-height:1.9;max-width:78ch}
@media (max-width:620px){.facts .r{grid-template-columns:1fr;gap:6px}}

/* ---------- 404 ---------- */
.err{padding-block:clamp(52px,7vw,96px) clamp(30px,4vw,48px)}
.err .code{font-size:12px;color:var(--ink3);letter-spacing:.01em;margin:0 0 12px}
.err h1{font-family:var(--dp);font-size:clamp(24px,3vw,34px);font-weight:600;line-height:1.5;
  margin:0 0 12px;max-width:22ch;letter-spacing:.01em}
.err p{font-size:16px;color:var(--ink2);line-height:1.9;max-width:46ch;margin:0 0 30px}
[lang="en"] .intro,[lang="en"] .err p{max-width:58ch}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);padding-block:24px 30px;font-size:12px;color:var(--ink3)}
.ft-in{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;align-items:center}
.ft a:hover{color:var(--maroon)}
.ft .lk{display:flex;gap:18px;flex-wrap:wrap}
:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
/* The ring is maroon, and so is the showroom band — it was being drawn in its
   own background colour, 1:1, on every page. The address link and the phone
   number have no other focus style, so for a keyboard user they changed
   nothing at all. Dark grounds get a light ring instead. */
.show :focus-visible,.hero :focus-visible{outline-color:#fff}
.mnav{display:none}
@media (max-width:760px){
  .nav{display:none}
  .steps-fig{position:static}
  /* No room for the full label beside the brand and the menu at 375. The tail
     hides; the verb remains, so no new wording is introduced. */
  .hd .book{white-space:nowrap;padding:11px 16px}
  .hd .book .lg{display:none}
  .mnav{display:block;position:relative}
  .mnav>summary{list-style:none;font-size:14px;color:var(--maroon);cursor:pointer;
    min-height:44px;display:flex;align-items:center;padding-inline:6px}
  .mnav>summary::-webkit-details-marker{display:none}
  .mnav>summary::marker{content:""}
  .mnav-p{position:absolute;inset-inline-end:0;top:calc(100% + 12px);min-width:210px;
    background:var(--ground);border:1px solid var(--line2);padding-block:6px;z-index:70}
  .mnav-p a{display:flex;align-items:center;min-height:44px;padding:6px 18px;
    font-size:15px;color:var(--ink2)}
  .mnav-p a:hover,.mnav-p a:focus-visible{color:var(--maroon);background:var(--well,#F4F0ED)}
}
/* The CRM has enforced 44pt under pointer:coarse since v0.8; the website never
   did. Seven controls measured under 44x44 at 375px, the worst being the only
   navigation control at 34x25 and the language switch at 39x21. */
@media (pointer:coarse){
  .ft .lk a,.sec-h a{display:inline-flex;align-items:center;min-height:44px}
  /* padded on the LEADING edge only: .show a.u carries a border-bottom as its
     underline, and symmetric padding would detach the rule from the text. */
  .show a.u{padding-block:12px 2px}
  .show a.ln{padding-block:6px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Latin sets narrower per character than Arabic — the measure differs by script */
/* Latin needs tighter leading than Arabic. Arabic sets at 1.75-1.9 because 1.30
   collides its glyphs — that exemption was applied to the English tree too, so
   display type was setting at 1.75 against a 1.30 craft bar, and the headings
   below had no declared value at all and simply inherited body's 1.75. */
[lang="en"] .hero h1,[lang="en"] .sec-h h2,[lang="en"] .show h2,[lang="en"] .step h3,
[lang="en"] .svc h3,[lang="en"] .err h1,[lang="en"] .legal h1,[lang="en"] .legal h2,
[lang="en"] .legal h3{line-height:1.3}
[lang="en"] .hero p,[lang="en"] .step p,[lang="en"] .show p,[lang="en"] .intro,
[lang="en"] .err p,[lang="en"] .facts dd,[lang="en"] .facts .note,[lang="en"] .legal p,
[lang="en"] .legal li{line-height:1.6}
[lang="en"] .hero p{max-width:58ch}
[lang="en"] .step p{max-width:56ch}
[lang="en"] .show p{max-width:40ch}

/* legal pages */
.legal{max-width:760px;padding-block:clamp(30px,5vw,54px) 70px}
.legal h1{font-family:var(--dp);font-size:clamp(26px,3.4vw,36px);font-weight:600;margin:0 0 8px}
.legal h2{font-family:var(--dp);font-size:19px;font-weight:600;margin:38px 0 10px}
.legal h3{font-size:16px;font-weight:600;margin:20px 0 6px}
.legal p,.legal li{margin:0 0 12px;color:var(--ink2);line-height:1.9}
.legal ul{padding-inline-start:22px;margin:0 0 12px}
.legal .upd{font-size:13px;color:var(--ink3);margin:0 0 34px}
.legal a{color:var(--maroon)}
.legal .en{direction:ltr;text-align:left;border-top:1px solid var(--line);margin-top:52px;padding-top:20px}