/* PRE Developments — stone + water.
   Identity is deliberately unlike the sister domains: they run Almarai /
   IBM Plex Sans Arabic / Alexandria / Readex / Tajawal on warm cream with a
   gold accent. This one is basalt ink on warm stone with a deep-water teal,
   set in Zain (display) + Rubik (Arabic text) + Space Grotesk (Latin/figures). */

@font-face{font-family:Zain;src:url(/assets/fonts/zain-ar-700.woff2)format('woff2');font-weight:700;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Zain;src:url(/assets/fonts/zain-ar-800.woff2)format('woff2');font-weight:800;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:RubikAr;src:url(/assets/fonts/rubik-ar.woff2)format('woff2');font-weight:300 700;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Grotesk;src:url(/assets/fonts/grotesk-latin.woff2)format('woff2');font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}

:root{
  --paper:oklch(0.962 0.006 84);      /* warm stone */
  --card:oklch(0.995 0.003 84);
  --ink:oklch(0.246 0.008 62);        /* basalt */
  --ink-2:oklch(0.432 0.010 62);
  --ink-3:oklch(0.498 0.013 62);
  --line:oklch(0.884 0.008 84);
  --accent:oklch(0.452 0.079 189);    /* deep water teal */
  --accent-ink:oklch(0.352 0.070 189);
  --accent-wash:oklch(0.958 0.019 189);
  --slab:oklch(0.288 0.030 200);      /* wet basalt, for the hero and footer */
  --warn:oklch(0.492 0.118 42);
  --r:14px; --r-sm:9px;
  --sans:Grotesk,RubikAr,system-ui,"Segoe UI",sans-serif;
  --disp:Grotesk,Zain,RubikAr,system-ui,sans-serif;
  --wrap:1140px;
}
html[dir=rtl]{--sans:RubikAr,Grotesk,system-ui,"Segoe UI",sans-serif;--disp:Zain,Grotesk,system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
section{padding-block:clamp(30px,5vw,56px)}
section+section{border-top:1px solid var(--line)}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.24;letter-spacing:-.012em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(28px,5.2vw,44px);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(21px,3.3vw,30px);margin-top:0}
h3{font-size:clamp(17px,2.2vw,21px)}
p{margin:0 0 1em;max-width:72ch}
.num{font-family:Grotesk,system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:0}
.fine{color:var(--ink-3);font-size:14px;line-height:1.62;max-width:72ch}
.eyebrow{display:inline-block;font-family:Grotesk,var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--accent-ink);
  background:var(--accent-wash);border-radius:999px;padding:5px 11px;margin-bottom:12px}

/* ── header ─────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:60;background:oklch(0.962 0.006 84/.93);
  backdrop-filter:saturate(1.3) blur(9px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:14px;min-height:60px}
/* Brand lockup: mark + wordmark. No `.brand span` descendant selector here —
   that is the `.idx span` trap again, and it would catch every span in the
   lockup including the chip. Each part is addressed by its own class. */
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand-mark{flex:none;display:grid;place-items:center;width:36px;height:36px;
  border-radius:9px;background:var(--slab)}
.brand-mark img{height:24px;width:auto;max-width:none}
.brand-tx{display:flex;flex-direction:column;line-height:1.14;font-family:var(--disp)}
.brand-n{font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.brand-s{font-weight:500;font-size:11.5px;letter-spacing:.015em;color:var(--ink-3)}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.nav a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;
  padding:7px 10px;border-radius:var(--r-sm);white-space:nowrap}
.nav a:hover{background:var(--accent-wash);color:var(--accent-ink)}
.nav .cta{background:var(--accent);color:#fff;font-weight:600;padding:8px 15px}
.nav .cta:hover{background:var(--accent-ink);color:#fff}

/* mobile menu — the veil must be inert when closed, or it eats every tap
   and blocks horizontal scrolling inside tables (egypt-malls lesson). */
.mtoggle{display:none}
.mbtn{display:none;margin-inline-start:auto;width:42px;height:38px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);cursor:pointer;align-items:center;justify-content:center}
.mbtn span{display:block;width:19px;height:2px;background:var(--ink);position:relative;border-radius:2px}
.mbtn span::before,.mbtn span::after{content:"";position:absolute;inset-inline:0;height:2px;background:var(--ink);border-radius:2px}
.mbtn span::before{top:-6px}.mbtn span::after{top:6px}
.mveil{position:fixed;inset:0;background:oklch(0.246 0.008 62/.45);z-index:70;
  visibility:hidden;pointer-events:none;opacity:0;transition:opacity .18s ease-out}
.msheet{position:fixed;inset-block:0;inset-inline-end:0;width:min(320px,86vw);background:var(--card);
  z-index:80;padding:22px 20px;display:flex;flex-direction:column;gap:2px;
  transform:translateX(var(--slide,110%));transition:transform .26s cubic-bezier(.22,1,.36,1);
  visibility:hidden;box-shadow:-18px 0 44px oklch(0.246 0.008 62/.16);overflow-y:auto}
html[dir=rtl] .msheet{--slide:-110%}
.msheet a{color:var(--ink);text-decoration:none;font-size:17px;font-weight:500;
  padding:11px 12px;border-radius:var(--r-sm)}
.msheet a:hover{background:var(--accent-wash)}
.msheet .sec{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:14px 12px 4px}
.mtoggle:checked~.mveil{visibility:visible;pointer-events:auto;opacity:1}
.mtoggle:checked~.msheet{transform:translateX(0);visibility:visible}

/* ── hero ───────────────────────────────────────────────── */
.hero{background:var(--slab);color:oklch(0.972 0.005 84);border-bottom:1px solid var(--line);
  padding-block:clamp(30px,6vw,58px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--bg,none);
  background-size:cover;background-position:center;opacity:.30;filter:saturate(.72)}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,oklch(0.288 0.030 200/.42),oklch(0.288 0.030 200/.88))}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;margin-bottom:.34em}
.hero .eyebrow{background:oklch(0.972 0.005 84/.16);color:oklch(0.952 0.010 189)}
.hero .lede{font-size:clamp(16px,2.1vw,19px);color:oklch(0.930 0.008 84);max-width:74ch;margin-bottom:20px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;
  padding:11px 20px;border-radius:var(--r-sm);font-size:16px}
.btn:hover{background:oklch(0.512 0.083 189);color:#fff}
.btn.ghost{background:transparent;border:1.5px solid oklch(0.972 0.005 84/.55);color:#fff}
.btn.ghost:hover{background:oklch(0.972 0.005 84/.14);color:#fff}

/* ── index band: horizontal scroll must reach the last item in RTL ── */
.band{background:var(--card);border-bottom:1px solid var(--line)}
.band .wrap{display:flex;gap:26px;overflow-x:auto;padding-block:15px;
  justify-content:safe center;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.band .wrap::-webkit-scrollbar{display:none}
.idx{flex:0 0 auto;width:max-content;text-align:center;min-width:96px;white-space:nowrap}
.idx > span{display:block;font-size:12px;color:var(--ink-3);font-weight:500;letter-spacing:.02em}
.idx b{display:block;font-family:var(--disp);font-size:19px;font-weight:700;color:var(--ink);white-space:nowrap}

/* ── the answer block: the 40–60 words an engine lifts ── */
.answer{background:var(--accent-wash);border:1px solid oklch(0.878 0.030 189);
  border-radius:var(--r);padding:16px 18px;margin:0 0 20px}
.answer p{margin:0;font-size:17px;color:var(--ink);max-width:74ch}
.answer p+p{margin-top:.75em}

.crumbs{padding-block:12px;font-size:14px;color:var(--ink-3)}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--accent)}

/* ── cards & grids ──────────────────────────────────────── */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .18s,transform .18s ease-out}
.pcard:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--ink)}
.pcard img{aspect-ratio:16/10;object-fit:cover;width:100%}
.pc-b{padding:13px 15px 16px}
.pc-b h3{margin:0 0 3px;font-size:18px}
.pc-m{font-size:13px;color:var(--ink-3)}
.pc-p{margin-top:7px;font-family:var(--disp);font-weight:700;color:var(--accent-ink);font-size:16px}
.two{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:800px){.two{grid-template-columns:1fr 1.1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card .tag{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.card .val{font-family:var(--disp);font-size:clamp(22px,3.4vw,28px);font-weight:800;margin-top:4px}
.card .val a{color:var(--ink);text-decoration:none}
.card .best{color:var(--ink-3);font-size:14px;margin-top:4px}

/* ── gallery & master plan ──────────────────────────────── */
.gal{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.gal figure{margin:0;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.gal img{aspect-ratio:16/10;object-fit:cover;width:100%}
.mp{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.mp img{width:100%}
.mp-flat{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  width:100%;max-width:1000px;margin-inline:auto}

/* ── tables: the container scrolls, never the page ─────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);margin-bottom:14px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th,td{padding:11px 13px;text-align:start;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--accent-wash);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--accent-ink)}
tbody tr:last-child td{border-bottom:0}
td a{font-weight:500;text-decoration:none}

/* ── faq ────────────────────────────────────────────────── */
.faq{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);margin-bottom:9px}
.faq summary{cursor:pointer;padding:13px 16px;font-weight:600;font-family:var(--disp);font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:inline-end;color:var(--accent);font-weight:700}
.faq[open] summary::after{content:"−"}
.faq .a{padding:0 16px 14px}
.faq .a p{margin:0;color:var(--ink-2)}

/* ── lead form ──────────────────────────────────────────── */
.form-card input,.form-card textarea{width:100%;padding:11px 13px;margin-top:9px;font:inherit;font-size:16px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink)}
.form-card input:focus,.form-card textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.form-card button{width:100%;margin-top:11px;padding:12px;font:inherit;font-size:16px;font-weight:700;
  background:var(--accent);color:#fff;border:0;border-radius:var(--r-sm);cursor:pointer}
.form-card button:hover{background:var(--accent-ink)}
.form-card small{display:block;margin-top:9px;color:var(--ink-3);font-size:13px;line-height:1.55}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── floating call / whatsapp ───────────────────────────── */
.dock{position:fixed;inset-block-end:14px;inset-inline:14px;z-index:50;display:none;gap:10px}
.dock a{flex:1;text-align:center;padding:13px 8px;border-radius:13px;font-weight:700;font-size:16px;
  text-decoration:none;color:#fff;box-shadow:0 8px 22px oklch(0.246 0.008 62/.26)}
.d-call{background:var(--accent)}
.d-wa{background:oklch(0.612 0.152 148)}

/* ── footer ─────────────────────────────────────────────── */
.ft{background:var(--slab);color:oklch(0.900 0.008 84);margin-top:36px;padding-block:34px 0}
.ft a{color:oklch(0.930 0.008 84);text-decoration:none}
.ft a:hover{color:#fff;text-decoration:underline}
.ft h4{color:#fff;font-size:15px;margin:0 0 9px;font-family:var(--disp)}
.ft-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ft ul{list-style:none;margin:0;padding:0;font-size:15px}
.ft li{margin-bottom:5px}
.ft .fine{color:oklch(0.780 0.010 84);margin-top:12px}
.ft-end{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:13px;
  color:oklch(0.780 0.010 84);border-top:1px solid oklch(0.972 0.005 84/.14);margin-top:26px;padding-block:14px 18px}

@media(max-width:860px){
  .hide-sm{display:none}
  .nav{gap:2px}
  .mbtn{display:inline-flex}
  .nav .cta{padding:8px 12px}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:16px}
  .dock{display:flex}
  .ft{padding-bottom:78px}
  .nav a:not(.cta){display:none}
  .band .wrap{justify-content:safe flex-start;gap:20px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ══ section grounds ═══════════════════════════════════════
   A 3,000-word record reads as a sequence of rooms, not one scroll.
   Adjacent sections never share a ground, so the border disappears. */
.s-paper{background:var(--paper)}
.s-card{background:var(--card)}
.s-wash{background:var(--accent-wash)}
.s-slab{background:var(--slab);color:oklch(0.940 0.008 84);border-top:0;border-bottom:0}
.s-slab h2,.s-slab h3{color:#fff}
.s-slab a{color:oklch(0.878 0.030 189)}
.s-slab .fine{color:oklch(0.800 0.010 84)}
.s-slab+.s-slab,.s-paper+.s-paper,.s-card+.s-card{border-top:1px solid var(--line)}
.s-slab+section,section+.s-slab{border-top:0}
.answer-dark{background:oklch(0.972 0.005 84/.09);border-color:oklch(0.972 0.005 84/.22)}
.answer-dark p{color:oklch(0.940 0.008 84)}

/* ── sales page ─────────────────────────────────────────── */
.hero-sales::after{background:linear-gradient(to bottom,oklch(0.288 0.030 200/.55),oklch(0.288 0.030 200/.93))}
.callbar{display:grid;gap:12px;grid-template-columns:1fr;margin:22px 0 16px;max-width:660px}
@media(min-width:620px){.callbar{grid-template-columns:1.05fr 1fr}}
.cb{display:block;padding:15px 20px;border-radius:15px;text-decoration:none;
  transition:transform .2s cubic-bezier(.22,1,.36,1)}
.cb:hover{transform:translateY(-2px)}
.cb-k{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.82}
.cb-v{display:block;font-family:var(--disp);font-weight:800;letter-spacing:-.01em;line-height:1.25}
.cb-call{background:var(--accent);color:#fff;box-shadow:0 10px 30px oklch(0.246 0.008 62/.30)}
.cb-call:hover{background:oklch(0.512 0.083 189);color:#fff}
.cb-call .cb-v{font-size:clamp(24px,4.6vw,33px)}
.cb-wa{background:oklch(0.972 0.005 84/.13);color:#fff;border:1.5px solid oklch(0.972 0.005 84/.42)}
.cb-wa:hover{background:oklch(0.972 0.005 84/.20);color:#fff}
.cb-wa .cb-v{font-size:clamp(15px,2.3vw,17px);font-weight:600}
.promises{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;
  font-size:15px;color:oklch(0.912 0.010 84)}
.promises li::before{content:"—";margin-inline-end:8px;color:oklch(0.878 0.030 189)}

/* channel cards — never a table (playbook §4) */
.chan{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.chan{grid-template-columns:repeat(3,1fr)}}
.chan-c{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.chan-primary{border-color:var(--accent);box-shadow:0 12px 34px oklch(0.452 0.079 189/.13)}
.chan .tag{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.chan-v{display:block;margin-top:6px;font-family:var(--disp);font-weight:800;font-size:clamp(19px,3vw,25px);
  color:var(--ink);text-decoration:none;line-height:1.3}
.chan-primary .chan-v{color:var(--accent-ink)}
a.chan-v:hover{color:var(--accent)}
.chan-addr{font-size:17px;font-weight:600;line-height:1.5}
.chan-b{margin-top:8px;font-size:14px;color:var(--ink-3);line-height:1.6}

/* booking steps */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:12px}
.steps li{display:flex;gap:15px;align-items:flex-start;
  background:oklch(0.972 0.005 84/.07);border:1px solid oklch(0.972 0.005 84/.15);
  border-radius:var(--r);padding:16px 18px}
.st-n{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:16px}
.steps h3{margin:0 0 4px;font-size:18px}
.steps p{margin:0;color:oklch(0.885 0.010 84);font-size:15.5px;line-height:1.65;max-width:none}

/* compact project index */
.pgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.pg{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;text-decoration:none;transition:border-color .18s,transform .18s cubic-bezier(.22,1,.36,1)}
.pg:hover{border-color:var(--accent);transform:translateY(-2px)}
.pg-n{display:block;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink)}
.pg-l{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.pg-p{display:block;margin-top:6px;font-weight:600;color:var(--accent-ink);font-size:15px}

/* ── VS cards: the comparison, without a wide table ──────── */
.vs{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.vs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.vs{grid-template-columns:repeat(3,1fr)}}
.vsc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .18s,transform .18s cubic-bezier(.22,1,.36,1)}
.vsc:hover{border-color:var(--accent);transform:translateY(-3px)}
.vsc-h{padding:15px 17px 12px;border-bottom:1px solid var(--line);background:var(--paper)}
.vsc-h a{font-family:var(--disp);font-weight:800;font-size:19px;color:var(--ink);text-decoration:none;line-height:1.3}
.vsc-h a:hover{color:var(--accent)}
.vsc-loc{display:block;font-size:13px;color:var(--ink-3);margin-top:3px}
.vsc-b{padding:6px 17px 14px;flex:1}
.vsr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.vsc-b .vsr:last-child{border-bottom:0}
.vsr dt{font-size:13.5px;color:var(--ink-3);font-weight:500}
.vsr dd{margin:0;font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink);text-align:end}
.vsr dd.muted{font-weight:500;font-size:14px;color:var(--ink-3)}
.vsc-f{padding:11px 17px;background:var(--accent-wash);border-top:1px solid oklch(0.878 0.030 189)}
.vsc-f a{font-weight:600;font-size:14.5px;text-decoration:none}
.badge{display:inline-block;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;padding:3px 9px;border-radius:999px;margin-inline-start:7px;vertical-align:2px}

/* ── fact cards over the hero photograph ─────────────────── */
.facts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));margin-top:22px}
.fact{background:oklch(0.246 0.008 62/.46);border:1px solid oklch(0.972 0.005 84/.20);
  border-radius:12px;padding:12px 14px;backdrop-filter:blur(3px)}
.fact-k{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;color:oklch(0.878 0.030 189)}
.fact-v{display:block;margin-top:3px;font-family:var(--disp);font-weight:800;font-size:clamp(17px,2.6vw,21px);
  color:#fff;white-space:nowrap}

/* ── phases grid ─────────────────────────────────────────── */
.phases{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.ph{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ph-n{background:var(--slab);color:#fff;padding:11px 15px;font-family:var(--disp);font-weight:700;font-size:17px}
.ph-b{padding:11px 15px;font-size:14px;color:var(--ink-3)}

/* ── dated updates timeline ──────────────────────────────── */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;inset-block:8px;inset-inline-start:7px;width:2px;background:var(--line)}
.tl li{position:relative;padding-inline-start:30px;padding-block:0 18px}
.tl li::before{content:"";position:absolute;inset-inline-start:2px;top:7px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);border:2px solid var(--card)}
.tl-d{font-family:Grotesk,var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent-ink)}
.tl-t{display:block;font-family:var(--disp);font-weight:700;font-size:17px;margin:2px 0 3px}
.tl p{margin:0;font-size:15px;color:var(--ink-2)}
.tl-s{display:block;margin-top:4px;font-size:13px;color:var(--ink-3)}

@media(max-width:640px){
  .steps li{padding:14px 15px;gap:12px}
  .promises{gap:6px 16px;font-size:14px}
}

/* ── evidence record: a 3-column source table is a wide table too ── */
.record{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.rec{background:var(--card);padding:13px 17px;display:grid;gap:2px}
@media(min-width:720px){.rec{grid-template-columns:1fr auto;align-items:baseline;column-gap:20px}}
.rec-k{font-size:14px;color:var(--ink-3);font-weight:500}
.rec-v{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink)}
@media(min-width:720px){.rec-v{text-align:end;grid-column:2;grid-row:1}}
.rec-s{font-size:12.5px;color:var(--ink-3);opacity:.9}
@media(min-width:720px){.rec-s{grid-column:1;grid-row:2}}
.rec-gap .rec-v{color:var(--warn)}

/* Light-surfaced components sitting inside a dark band inherit the band's pale
   ink and vanish. Same class of bug as `.imgbg h3{color:#fff}` on the sisters:
   invisible to every gate except a measured contrast pass. */
.s-slab .faq,.s-slab .card,.s-slab .vsc,.s-slab .chan-c,.s-slab .record,
.s-slab .ph,.s-slab .form-card,.s-slab .pg,.s-slab .gal figure{color:var(--ink)}
.s-slab .faq summary,.s-slab .faq .a p,.s-slab .vsc-h a,.s-slab .pg-n,
.s-slab .rec-v,.s-slab .card .val,.s-slab .card .val a{color:var(--ink)}
.s-slab .vsc-f a,.s-slab .chan-primary .chan-v{color:var(--accent-ink)}
.s-slab .faq .a p,.s-slab .rec-k,.s-slab .rec-s,.s-slab .chan-b,
.s-slab .pc-m,.s-slab .card .best,.s-slab .pg-l{color:var(--ink-3)}
.s-slab .card .fine,.s-slab .chan-c .fine,.s-slab .form-card small{color:var(--ink-3)}
.s-slab>.wrap>.fine{color:oklch(0.800 0.010 84)}
.s-slab .ph-n{color:#fff}

/* «+20 101 833 6004» renders as «6004 833 101 20+» in an RTL paragraph: the
   groups are separate neutral runs and bidi reorders them. Isolating the run
   fixes phone numbers without touching how prices sit in the sentence. */
.num{direction:ltr;unicode-bidi:isolate}

/* ══════════════════════════════════════════════════════════
   EDITORIAL LAYER
   The first build read as a document: no photography on the home
   page, every section the same heading→tinted-box→rectangles
   rhythm, and the loudest element was an alert-coloured box.
   This layer leads with the imagery and quiets the boxes.
   ══════════════════════════════════════════════════════════ */

:root{--wrap:1220px;--shadow:0 18px 44px -18px oklch(0.246 0.008 62/.34)}

/* ── the answer is a lead paragraph, not an alert ─────────── */
.answer{background:none;border:0;border-top:2px solid var(--accent);
  border-radius:0;padding:15px 0 0;margin:0 0 26px;max-width:74ch}
.answer p{font-size:clamp(17.5px,2.1vw,19.5px);line-height:1.68;color:var(--ink);letter-spacing:-.003em}
/* only the page's first answer keeps a ground: it is the one an engine lifts */
section:first-of-type .answer,.hero+.band+section .answer{padding:18px 20px;background:var(--accent-wash);
  border:1px solid oklch(0.878 0.030 189);border-top-width:2px;border-top-color:var(--accent);border-radius:0 0 var(--r) var(--r)}
.answer-dark{background:none;border:0;border-top:2px solid oklch(0.700 0.070 189)}
.answer-dark p{color:oklch(0.955 0.008 84)}
.s-slab section:first-of-type .answer{background:oklch(0.972 0.005 84/.09)}

/* ── hero: the photograph is the point, not a texture ─────── */
.hero{padding-block:clamp(52px,9vw,104px) clamp(30px,5vw,54px);isolation:isolate}
.hero::before{opacity:1;filter:none;transform:scale(1.02)}
.hero::after{background:
  linear-gradient(to bottom,oklch(0.246 0.008 62/.20) 0%,oklch(0.246 0.008 62/.58) 44%,oklch(0.216 0.024 200/.93) 100%)}
.hero h1{text-shadow:0 2px 26px oklch(0.216 0.024 200/.5);max-width:19ch}
.hero .lede{text-shadow:0 1px 14px oklch(0.216 0.024 200/.6);color:oklch(0.960 0.006 84)}
.hero-sales h1{max-width:none}
.facts{margin-top:clamp(24px,4vw,40px);gap:12px}
.fact{background:oklch(0.216 0.024 200/.62);border-color:oklch(0.972 0.005 84/.26);
  backdrop-filter:blur(7px) saturate(1.1);padding:13px 16px}

/* ── image-led project cards ──────────────────────────────── */
.ed{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.ed{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ed{grid-template-columns:repeat(3,1fr)}
  .ed>:first-child{grid-column:span 2;grid-row:span 2}}
.ec{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none;
  background:var(--slab);min-height:216px;box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1)}
.ed>:first-child{min-height:452px}
.ec:hover{transform:translateY(-4px);box-shadow:0 26px 58px -20px oklch(0.246 0.008 62/.46)}
.ec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.ec:hover img{transform:scale(1.045)}
.ec::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,oklch(0.216 0.024 200/.90) 0%,oklch(0.216 0.024 200/.42) 42%,oklch(0.216 0.024 200/.06) 100%)}
.ec-b{position:absolute;inset-inline:0;inset-block-end:0;padding:18px 20px;z-index:2;color:#fff}
.ec-t{display:block;font-family:var(--disp);font-weight:800;letter-spacing:-.015em;line-height:1.2;
  font-size:clamp(20px,2.5vw,25px);color:#fff}
.ed>:first-child .ec-t{font-size:clamp(26px,3.6vw,38px)}
.ec-m{display:block;margin-top:4px;font-size:14px;color:oklch(0.900 0.010 84)}
.ec-p{display:inline-block;margin-top:10px;background:oklch(0.972 0.005 84/.15);
  border:1px solid oklch(0.972 0.005 84/.32);border-radius:999px;padding:5px 13px;
  font-family:var(--disp);font-weight:700;font-size:14.5px;color:#fff;backdrop-filter:blur(4px)}
.ec-tag{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:2;
  background:var(--accent);color:#fff;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}

/* ── editorial split: photograph beside the prose ─────────── */
.split{display:grid;gap:clamp(20px,3.4vw,42px);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}
  .split.flip>:first-child{order:2}}
.split-fig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);position:relative}
.split-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.split-fig figcaption{position:absolute;inset-inline:0;inset-block-end:0;padding:12px 16px;
  background:linear-gradient(to top,oklch(0.216 0.024 200/.88),transparent);
  color:oklch(0.940 0.008 84);font-size:13.5px}

/* ── gallery with varied tiles, not a uniform grid ────────── */
.gal{grid-template-columns:repeat(4,1fr);gap:12px}
.gal figure{border:0;box-shadow:var(--shadow);border-radius:var(--r)}
.gal figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.gal figure:nth-child(1) img{aspect-ratio:1/1}
.gal figure:nth-child(6){grid-column:span 2}
.gal img{aspect-ratio:4/3;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gal figure:hover img{transform:scale(1.05)}
@media(max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}
  .gal figure:nth-child(1),.gal figure:nth-child(6){grid-column:span 2;grid-row:auto}
  .gal figure:nth-child(1) img{aspect-ratio:4/3}}

/* ── typographic scale: give the page a top note ──────────── */
h2{font-size:clamp(24px,3.9vw,37px);letter-spacing:-.022em;margin-bottom:.42em}
.hero h1{font-size:clamp(31px,5.8vw,55px);letter-spacing:-.028em}
section{padding-block:clamp(38px,6vw,74px)}
.wrap{padding-inline:24px}
@media(max-width:640px){.wrap{padding-inline:18px}}

/* ── depth on the flat surfaces ───────────────────────────── */
.pcard,.vsc,.chan-c,.card,.ph{box-shadow:0 2px 10px -6px oklch(0.246 0.008 62/.24)}
.pcard:hover,.vsc:hover{box-shadow:var(--shadow)}
.chan-primary{box-shadow:0 18px 40px -18px oklch(0.452 0.079 189/.55)}
.mp,.mp-flat{box-shadow:var(--shadow);border:0}

/* ── the hero was a thin band; give the photograph room ───── */
.hero{min-height:clamp(420px,64vh,620px);display:flex;align-items:flex-end}
.hero::before{background-position:center 38%}
.hero-sales{min-height:clamp(400px,58vh,560px)}
.hero .wrap{width:100%}

/* uniform tiles for the browse rows: no hero-sized first child */
.ed-flat{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.ed-flat>:first-child{grid-column:auto;grid-row:auto;min-height:200px}
.ed-flat .ec{min-height:200px}
.ed-flat .ec-t{font-size:clamp(18px,2.1vw,21px)}

/* ── FAQ: a list of questions, not a stack of grey bars ──── */
.faq{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;margin:0}
.faq:first-of-type{border-top:1px solid var(--line)}
.faq summary{padding:17px 40px 17px 0;font-size:clamp(17px,2.1vw,19px);font-weight:700;
  position:relative;transition:color .18s}
html[dir=rtl] .faq summary{padding:17px 0 17px 40px}
.faq summary:hover{color:var(--accent)}
.faq summary::after{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  float:none;font-size:24px;font-weight:400;line-height:1;color:var(--accent)}
.faq[open] summary{color:var(--accent-ink)}
.faq .a{padding:0 0 18px}
.faq .a p{font-size:16.5px;line-height:1.72;max-width:74ch}
.s-slab .faq{border-color:oklch(0.972 0.005 84/.20);background:none}
.s-slab .faq:first-of-type{border-top-color:oklch(0.972 0.005 84/.20)}
.s-slab .faq summary{color:#fff}
.s-slab .faq summary:hover,.s-slab .faq[open] summary{color:oklch(0.878 0.030 189)}
.s-slab .faq .a p{color:oklch(0.895 0.010 84)}

/* ── mobile: the call bar should not cover the content ───── */
@media(max-width:640px){
  .hero{min-height:clamp(380px,58vh,520px)}
  body{padding-bottom:0}
  .dock{inset-block-end:12px}
  .ed>:first-child{min-height:260px;grid-column:auto;grid-row:auto}
}

/* The card is an <a>, so its own text node inherits the link colour against a
   photograph; the measurable pair is the anchor itself, not the inner spans. */
.ec{color:#fff}
.ec-b{text-shadow:0 1px 12px oklch(0.216 0.024 200/.75)}
.ec::after{background:linear-gradient(to top,oklch(0.196 0.024 200/.94) 0%,oklch(0.196 0.024 200/.55) 46%,oklch(0.196 0.024 200/.10) 100%)}

/* ── OUR sales line, visible everywhere ───────────────────
   A CTA that says «call» makes the visitor hunt for the number.
   The fleet convention is the number inside the button. */
.nav .cta{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;
  padding:7px 15px;gap:1px}
.cta-k{font-size:10.5px;font-weight:600;letter-spacing:.08em;opacity:.88}
.cta-n{font-size:15px;font-weight:700;letter-spacing:.01em}
.nav-sales{font-weight:600}
.btn-call{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.btn-call .num{font-weight:700;letter-spacing:.01em}
.d-call{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.d-call .num{font-weight:800}

@media(max-width:860px){
  .nav-sales{display:none}                 /* lives in the sheet at this width */
  .cta-k{display:none}
  .nav .cta{padding:9px 13px}
  .cta-n{font-size:14px}
}
@media(max-width:420px){
  .cta-n{font-size:0}
  .cta-n::after{content:"☎";font-size:17px}
  .d-call{font-size:14px;gap:6px}
}

/* ══════════════════════════════════════════════════════════
   CENTRED READING FLOW
   Owner's call: headings and paragraphs read centred on every page.
   Two things this has to get right beyond `text-align`:
   1. A measure needs centring too. `p` is capped at 72ch, so without
      `margin-inline:auto` a centred paragraph sits against the start
      edge of a 1220px column with its lines centred inside it, which
      reads as a bug rather than a choice.
   2. Label→value pairs are not prose. Tables, the evidence ledger and
      the VS rows keep start/end alignment: the whole point of those
      rows is that the eye runs down one column.
   ══════════════════════════════════════════════════════════ */
h1,h2,h3,h4,p,.lede,.fine,.crumbs,.answer,.faq .a p,.tl-t,.tl p,.tl-s{text-align:center}
p,.fine,.answer,.faq .a p,.hero h1,.hero .lede,.callbar{margin-inline:auto}
.eyebrow{display:block;width:max-content;margin-inline:auto}
.hero-cta,.promises,.btn-call,.ft-end{justify-content:center}

/* card interiors: a centred heading over start-aligned sub-text reads
   as a half-finished job, so the whole tile commits */
.pc-b,.pg,.vsc-h,.vsc-f,.chan-c,.ph-b,.fact,.ec-b,.card,.steps li,
.ft-grid>*,.form-card small{text-align:center}
.steps li{flex-direction:column;align-items:center}

/* the +/− is absolutely positioned at the end, so the question needs
   equal padding on both sides or "centred" lands visibly off-centre */
.faq summary{padding-inline:40px}
html[dir=rtl] .faq summary{padding:17px 40px}

/* the timeline rail and its dots hang off the start edge; with centred
   entries there is nothing left for them to line up against */
.tl li{padding-inline:0}
.tl::before,.tl li::before{content:none}

/* ── structures that stay scannable ─────────────────────── */
th,td{text-align:start}
.vsr dt{text-align:start}
.vsr dd,.vsr dd.muted{text-align:end}
.rec-k,.rec-s{text-align:start}
.rec-v{text-align:start}
@media(min-width:720px){.rec-v{text-align:end}}
.msheet a,.msheet .sec,.nav a,.brand{text-align:start}
.form-card input,.form-card textarea{text-align:start}

/* ── brand lockup across the breakpoints ──────────────────
   The source mark is 101px tall, so the display height is capped at
   24px: that is 4.2x oversampling and stays crisp on a 3x phone.
   At 420px the header carries brand + ☎ + burger, so the lockup
   sheds width in steps rather than wrapping or pushing the burger out. */
@media(max-width:860px){
  .brand-mark{width:33px;height:33px;border-radius:8px}
  .brand-mark img{height:22px}
  .brand-n{font-size:16px}
  .brand-s{font-size:11px}
}
@media(max-width:420px){
  .hd-in{gap:10px}
  .brand{gap:8px}
  .brand-mark{width:30px;height:30px;border-radius:7px}
  .brand-mark img{height:20px}
  .brand-n{font-size:15px}
  .brand-s{font-size:10px;letter-spacing:0}
}
@media(max-width:340px){
  .brand-s{display:none}
}

/* ── floating call bar: icon-led ───────────────────────────
   The old bar printed «اتصل» plus the full number as flowing text; in half a
   390px screen the number wrapped to a second line and the call button stood
   81px tall next to a 48px WhatsApp. The icon carries the verb, the number
   gets the whole line and never wraps, and the two buttons match height. */
.dock a{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 10px;border-radius:14px;font-size:15px;white-space:nowrap;line-height:1.1}
.dock .d-call{flex:1.3}
.dock .d-wa{flex:1}
.d-ico{width:19px;height:19px;flex:none;display:block}
.d-call .num{font-weight:800;font-size:14.5px;letter-spacing:.005em}
.d-lab{font-weight:700}
/* Below 360px even one line is tight, so WhatsApp drops to its glyph and
   hands the width to the number — the number is the thing worth keeping. */
@media(max-width:360px){
  .dock{gap:8px}
  .dock a{padding:12px 8px}
  .d-wa .d-lab{display:none}
  .dock .d-wa{flex:0 0 54px}
  .d-call .num{font-size:14px}
}

/* header CTA: real icon instead of the «☎» dingbat the 420px rule used to
   swap in. The icon is always present; below 420px the text drops and the
   icon alone carries the button, at a size that is actually a tap target. */
.nav .cta{flex-direction:row;gap:8px}
.cta-ico{width:17px;height:17px;flex:none;display:block}
.cta-tx{display:flex;flex-direction:column;align-items:center;line-height:1.15;gap:1px}
@media(max-width:420px){
  .cta-n{font-size:0}
  .cta-n::after{content:none}          /* the dingbat is gone */
  .cta-tx{display:none}
  .cta-ico{width:20px;height:20px}
  .nav .cta{padding:10px 13px}
}