/*
Theme Name: Jaber X
Theme URI: https://jaberx.com
Author: Jaber X Solutions & Development Services
Description: ثيم Jaber X الرسمي — أبيض وأسود، عربي أولاً (RTL)، خفيف وسريع.
Version: 1.3.1
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: jaberx
*/

/* Design plan
   Palette: pure black #000 / pure white #fff + 4 neutral greys. No accent colour: contrast IS the accent.
   Type: Readex Pro (display, geometric/tech) + IBM Plex Sans Arabic (body). Arabic rules: no letter-spacing, no caps, lh 1.75.
   Radius: sharp scale. Shadows: none — hairlines carry structure.
   The ONE bold element: the hero "X" built from a field of data points that reacts to the cursor.
   Inversion (black sections) is the only structural device besides hairlines. */

:root{
  --paper:#ffffff;
  --ink:#000000;
  --ink-2:#2b2b2b;
  --muted:#5f5f5f;          /* 6.4:1 on white */
  --subtle:#8a8a8a;         /* UI only */
  --line:#e7e7e7;
  --line-strong:#cdcdcd;
  --sunken:#f5f5f5;
  --inv-bg:#000000;
  --inv-ink:#ffffff;
  --inv-muted:#a6a6a6;      /* 8.9:1 on black */
  --inv-line:#2a2a2a;
  --wa:#25D366;
  --danger:#B42318;
  --success:#1E7B4F;

  --f-display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Readex Pro",system-ui,sans-serif;

  --r-sm:2px; --r-md:4px; --r-lg:6px; --r-pill:999px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --t-display:clamp(2.6rem,6.2vw,5.4rem);
  --t-h1:clamp(2.1rem,4.4vw,3.6rem);
  --t-h2:clamp(1.7rem,3vw,2.5rem);
  --t-h3:1.3125rem;
  --t-lg:1.1875rem;
  --t-body:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  --container:1240px;
  --gutter:clamp(16px,4vw,32px);
  --header-h:72px;

  --fast:120ms; --base:220ms; --ease:cubic-bezier(.2,0,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--t-body);line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.3;margin:0 0 var(--s4);color:inherit}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);line-height:1.45}
p{margin:0 0 var(--s4)}
ul,ol{margin:0;padding:0}
bdi,.ltr{unicode-bidi:isolate;direction:ltr}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.inv :focus-visible{outline-color:var(--inv-ink)}
.screen-reader-text,.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip{position:absolute;inset-inline-start:var(--s4);top:-60px;background:var(--ink);color:var(--paper);padding:var(--s2) var(--s4);z-index:100;border-radius:var(--r-md)}
.skip:focus{top:var(--s4)}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}
.section{padding-block:clamp(64px,9vw,128px)}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section + .section:not(.inv):not(.band){border-top:1px solid var(--line)}
.inv{background:var(--inv-bg);color:var(--inv-ink)}
.inv .muted,.inv .lead{color:var(--inv-muted)}
.band{background:var(--sunken)}
.muted{color:var(--muted)}
.lead{font-size:var(--t-lg);color:var(--ink-2);max-width:62ch}
.kicker{font-family:var(--f-display);font-size:var(--t-sm);font-weight:500;color:var(--muted);margin-bottom:var(--s4);display:block}
.inv .kicker{color:var(--inv-muted)}
.sec-head{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-bottom:clamp(40px,5vw,72px);max-width:760px}
.sec-head h2{margin:0}
.sec-head p{margin:0}

/* ───── Buttons ───── */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-height:var(--h);padding:0 var(--s5);font-family:var(--f-display);font-weight:500;font-size:1rem;line-height:1;border-radius:var(--r-md);border:1.5px solid var(--ink);text-decoration:none;cursor:pointer;transition:background var(--base) var(--ease),color var(--base) var(--ease),border-color var(--base) var(--ease);white-space:nowrap}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--paper);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.inv .btn--primary{background:var(--inv-ink);color:var(--inv-bg);border-color:var(--inv-ink)}
.inv .btn--primary:hover{background:transparent;color:var(--inv-ink)}
.inv .btn--ghost{color:var(--inv-ink);border-color:var(--inv-ink)}
.inv .btn--ghost:hover{background:var(--inv-ink);color:var(--inv-bg)}
.btn--wa{background:var(--wa);border-color:var(--wa);color:#08311a}
.btn--wa:hover{background:#1fbe5b;border-color:#1fbe5b}
.btn--sm{--h:42px;padding:0 var(--s4);font-size:var(--t-sm)}
.btn .arr{transition:transform var(--base) var(--ease)}
.btn:hover .arr{transform:translateX(-4px)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.link{font-family:var(--f-display);font-weight:500;text-decoration:underline;text-underline-offset:6px}
.arr{display:inline-block;width:18px;height:18px;flex:none}

/* ───── Header ───── */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:var(--s5);height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:var(--s3);text-decoration:none;flex:none}
.brand svg{width:34px;height:34px}
.brand b{font-family:"Readex Pro",sans-serif;font-weight:700;font-size:1.25rem;direction:ltr;unicode-bidi:isolate;line-height:1}
.nav{margin-inline-start:auto}
.nav ul{list-style:none;display:flex;gap:var(--s1);align-items:center}
.nav a{display:block;padding:var(--s2) var(--s3);text-decoration:none;font-family:var(--f-display);font-size:var(--t-sm);font-weight:500;border-radius:var(--r-md);color:var(--ink-2)}
.nav a:hover,.nav .current-menu-item>a,.nav .current-menu-ancestor>a,.nav .current_page_parent>a{color:var(--ink);background:var(--sunken)}
.nav .menu-item-has-children{position:relative}
.nav .sub-menu{position:absolute;inset-inline-start:0;top:100%;min-width:280px;background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-md);padding:var(--s2);display:none;flex-direction:column;align-items:stretch;gap:0}
.nav .menu-item-has-children:hover>.sub-menu,.nav .menu-item-has-children:focus-within>.sub-menu{display:flex}
.nav .sub-menu a{padding:var(--s3)}
.header-cta{flex:none}
.burger{display:none;margin-inline-start:auto;width:44px;height:44px;border:1.5px solid var(--ink);background:var(--paper);border-radius:var(--r-md);cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;inset-inline:0;height:1.5px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media (max-width:1060px){
  .nav,.header-cta{display:none}
  .burger{display:inline-flex}
  body.menu-open{overflow:hidden}
  body.menu-open .nav{display:block;position:fixed;inset:var(--header-h) 0 0 0;background:var(--paper);overflow:auto;padding:var(--s5) var(--gutter) var(--s8)}
  body.menu-open .nav ul{flex-direction:column;align-items:stretch;gap:0}
  body.menu-open .nav>ul>li{border-bottom:1px solid var(--line)}
  body.menu-open .nav a{font-size:1.25rem;padding:var(--s4) 0;background:none}
  body.menu-open .nav .sub-menu{position:static;display:flex;border:0;padding:0 0 var(--s3);min-width:0}
  body.menu-open .nav .sub-menu a{font-size:1rem;padding:var(--s2) var(--s4);color:var(--muted)}
  body.menu-open .header-cta{display:flex;position:fixed;inset-inline:var(--gutter);bottom:var(--s5);z-index:60}
  body.menu-open .header-cta .btn{flex:1}
}

/* ───── Hero ───── */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:center;min-height:min(calc(100svh - var(--header-h)),820px);padding-block:var(--s8)}
.hero h1{font-size:var(--t-display);line-height:1.18;margin-bottom:var(--s5);font-weight:700}
.hero .lead{margin-bottom:var(--s6)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s6);font-size:var(--t-sm);color:var(--muted);list-style:none}
.hero-meta li{display:flex;align-items:center;gap:var(--s2)}
.hero-meta li::before{content:"";width:6px;height:6px;background:var(--ink);border-radius:50%}
.xfield{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;justify-self:center;touch-action:pan-y}
.xfield canvas{width:100%;height:100%}
.xfield figcaption{position:absolute;inset-block-end:0;inset-inline-start:0;font-size:var(--t-xs);color:var(--subtle);font-family:var(--f-display)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding-block:var(--s7) var(--s8)}
  .xfield{order:-1;max-width:300px;justify-self:start}
}

/* page hero (inner pages) */
.phero{border-bottom:1px solid var(--line)}
.phero .wrap{padding-block:clamp(56px,8vw,112px) clamp(40px,6vw,80px)}
.phero h1{font-size:var(--t-h1);max-width:20ch}
.phero .lead{margin-bottom:var(--s5)}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--s5)}
.crumbs li+li::before{content:"/";margin-inline-end:var(--s2);color:var(--line-strong)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ───── Stats ───── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.stat{padding:var(--s6) var(--s5);border-inline-start:1px solid var(--line)}
.stat:first-child{border-inline-start:0;padding-inline-start:0}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:700;line-height:1.1;direction:ltr;unicode-bidi:isolate;text-align:start}
.stat span{font-size:var(--t-sm);color:var(--muted)}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat{padding:var(--s5) var(--s4)}.stat:nth-child(odd){border-inline-start:0;padding-inline-start:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

/* ───── Service rows (signature list) ───── */
.svc-list{list-style:none;border-top:1px solid var(--inv-line)}
.svc-list li{border-bottom:1px solid var(--inv-line)}
.svc-row{display:grid;grid-template-columns:72px 1fr 1.2fr 40px;gap:var(--s5);align-items:center;padding:var(--s6) var(--s4);text-decoration:none;transition:background var(--base) var(--ease),color var(--base) var(--ease)}
.svc-row .n{font-family:"Readex Pro",sans-serif;font-size:var(--t-sm);color:var(--inv-muted);direction:ltr}
.svc-row h3{margin:0;font-size:clamp(1.3rem,2.2vw,1.75rem)}
.svc-row p{margin:0;color:var(--inv-muted);font-size:var(--t-sm)}
.svc-row .arr{width:28px;height:28px;justify-self:end}
.svc-row:hover{background:var(--inv-ink);color:var(--inv-bg)}
.svc-row:hover p,.svc-row:hover .n{color:var(--ink-2)}
.svc-row:hover .arr{transform:translateX(-6px)}
.svc-row .arr{transition:transform var(--base) var(--ease)}
/* light variant */
.svc-list--light{border-color:var(--line)}
.svc-list--light li{border-color:var(--line)}
.svc-list--light .svc-row .n,.svc-list--light .svc-row p{color:var(--muted)}
.svc-list--light .svc-row:hover{background:var(--ink);color:var(--paper)}
.svc-list--light .svc-row:hover p,.svc-list--light .svc-row:hover .n{color:var(--inv-muted)}
@media (max-width:760px){.svc-row{grid-template-columns:40px 1fr 28px;gap:var(--s3) var(--s4);padding:var(--s5) 0}.svc-row p{grid-column:2/3}.svc-row .arr{grid-row:1;grid-column:3}}

/* ───── Columns / features ───── */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.cols--2{grid-template-columns:repeat(2,1fr)}
.cols--4{grid-template-columns:repeat(4,1fr)}
.col{padding:var(--s6) var(--s5) var(--s6) 0;border-top:1.5px solid var(--ink);margin-inline-end:var(--s5)}
.inv .col{border-color:var(--inv-ink)}
.col h3{margin-bottom:var(--s3)}
.col p{color:var(--muted);margin:0}
.inv .col p{color:var(--inv-muted)}
@media (max-width:900px){.cols,.cols--4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cols,.cols--2,.cols--4{grid-template-columns:1fr}.col{margin-inline-end:0}}

/* ───── Steps (real sequence) ───── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:s;gap:var(--s5)}
.steps li{counter-increment:s;position:relative;padding-top:var(--s7)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;inset-inline-start:0;font-family:"Readex Pro",sans-serif;font-size:var(--t-sm);font-weight:500;direction:ltr}
.steps li::after{content:"";position:absolute;top:12px;inset-inline:40px 0;height:1px;background:var(--line-strong)}
.steps li:last-child::after{display:none}
.steps h3{font-size:1.15rem;margin-bottom:var(--s2)}
.steps p{color:var(--muted);font-size:var(--t-sm);margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:var(--s7)}.steps li:nth-child(2)::after{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}.steps li::after{display:none}}

/* ───── Clients ───── */
.clients{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-inline-start:1px solid var(--line);list-style:none}
.clients li{display:flex;align-items:center;justify-content:center;text-align:center;min-height:120px;padding:var(--s4);border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--ink-2);line-height:1.35}
.clients li small{display:block;font-family:var(--f-body);font-weight:400;font-size:var(--t-xs);color:var(--muted);margin-top:var(--s1)}
@media (max-width:900px){.clients{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.clients{grid-template-columns:repeat(2,1fr)}.clients li{min-height:96px}}

/* ───── Split / prose ───── */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.split--even{grid-template-columns:1fr 1fr}
@media (max-width:900px){.split,.split--even{grid-template-columns:1fr}}
.sticky{position:sticky;top:calc(var(--header-h) + var(--s5))}
@media (max-width:900px){.sticky{position:static}}
.prose{max-width:70ch}
.prose h2{font-size:1.6rem;margin-top:var(--s7)}
.prose h3{margin-top:var(--s6)}
.prose p,.prose li{color:var(--ink-2)}
.prose ul,.prose ol{padding-inline-start:1.25em;margin-bottom:var(--s4)}
.prose li{margin-bottom:var(--s2)}
.prose a{text-decoration:underline}
.prose img{border-radius:var(--r-md);margin-block:var(--s5)}
.prose blockquote{margin:var(--s6) 0;padding-inline-start:var(--s5);border-inline-start:3px solid var(--ink);font-family:var(--f-display);font-size:1.25rem}

/* checklist */
.checks{list-style:none;display:grid;gap:0}
.checks li{display:grid;grid-template-columns:28px 1fr;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.checks li:first-child{border-top:1px solid var(--line)}
.checks li::before{content:"";width:20px;height:20px;margin-top:5px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.checks b{display:block;font-family:var(--f-display);font-weight:500}
.checks span{color:var(--muted);font-size:var(--t-sm)}
.inv .checks li{border-color:var(--inv-line)}
.inv .checks li::before{background:var(--inv-ink)}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none}
.tags li{font-size:var(--t-xs);padding:var(--s1) var(--s3);border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink-2)}
.inv .tags li{border-color:var(--inv-line);color:var(--inv-muted)}

/* ───── Cases (portfolio) ───── */
.cases{display:grid;gap:0;list-style:none}
.case{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px);padding-block:var(--s7);border-top:1px solid var(--line)}
.case:last-child{border-bottom:1px solid var(--line)}
.case h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:var(--s2)}
.case .sector{color:var(--muted);font-size:var(--t-sm);margin-bottom:var(--s4)}
.case dl{display:grid;grid-template-columns:110px 1fr;gap:var(--s3) var(--s5);margin:0}
.case dt{font-family:var(--f-display);font-weight:500;font-size:var(--t-sm)}
.case dd{margin:0;color:var(--ink-2)}
@media (max-width:760px){.case{grid-template-columns:1fr}.case dl{grid-template-columns:1fr;gap:var(--s1)}.case dd{margin-bottom:var(--s3)}}

/* ───── FAQ ───── */
.faq{border-top:1px solid var(--line)}
.inv .faq,.inv .faq details{border-color:var(--inv-line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s5);padding:var(--s5) 0;font-family:var(--f-display);font-weight:500;font-size:1.125rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform var(--base) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:0 0 var(--s5);max-width:70ch}
.inv .faq details p{color:var(--inv-muted)}

/* ───── CTA band ───── */
.cta{text-align:start}
.cta .wrap{display:grid;grid-template-columns:1.3fr auto;gap:var(--s6);align-items:end}
.cta h2{font-size:var(--t-h1);margin:0 0 var(--s3);max-width:16ch}
.cta p{margin:0}
@media (max-width:820px){.cta .wrap{grid-template-columns:1fr}}

/* ───── Forms ───── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.form .full{grid-column:1/-1}
.field label,.field legend{display:block;font-family:var(--f-display);font-weight:500;font-size:var(--t-sm);margin-bottom:var(--s2)}
.field .hint{font-size:var(--t-xs);color:var(--muted);margin-top:var(--s1)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:var(--s3) var(--s4);font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--r-md);transition:border-color var(--fast) var(--ease)}
.field textarea{min-height:140px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--subtle)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 14%,transparent)}
.field input[type=tel]{direction:ltr;text-align:end}
.field fieldset{border:0;padding:0;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips label{margin:0;font-family:var(--f-body);font-weight:400;font-size:var(--t-sm)}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;min-height:42px;padding:0 var(--s4);border:1.5px solid var(--line-strong);border-radius:var(--r-pill);cursor:pointer;transition:all var(--fast) var(--ease)}
.chips span:hover{border-color:var(--ink)}
.chips input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.hp{position:absolute;inset-inline-start:-9999px}
.form-status{grid-column:1/-1;padding:var(--s4) var(--s5);border-radius:var(--r-md);border:1.5px solid var(--ink);display:none}
.form-status.ok{display:block}
.form-status.err{display:block;border-color:var(--danger);color:var(--danger)}
.field.invalid input,.field.invalid select{border-color:var(--danger)}
.field .err-msg{color:var(--danger);font-size:var(--t-xs);margin-top:var(--s1);display:none}
.field.invalid .err-msg{display:block}
@media (max-width:640px){.form{grid-template-columns:1fr}}

.panel{border:1.5px solid var(--ink);border-radius:var(--r-lg);padding:clamp(24px,4vw,48px)}
.info-list{list-style:none;display:grid;gap:0}
.info-list li{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.info-list li:first-child{border-top:1px solid var(--line)}
.info-list b{font-family:var(--f-display);font-weight:500;font-size:var(--t-sm)}
.info-list a{text-decoration:none}
.info-list a:hover{text-decoration:underline}

/* ───── Blog ───── */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s5);list-style:none}
.post-card a{text-decoration:none;display:block}
.post-card .thumb{aspect-ratio:16/10;background:var(--sunken);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--s4)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter var(--base) var(--ease)}
.post-card a:hover .thumb img{filter:none}
.post-card h3{margin-bottom:var(--s2)}
.post-card a:hover h3{text-decoration:underline}
.post-card time,.post-meta{font-size:var(--t-xs);color:var(--muted)}
.post-card p{color:var(--muted);font-size:var(--t-sm);margin:var(--s2) 0 0}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.empty{padding:var(--s8) 0;border-block:1px solid var(--line)}
.pagination{display:flex;gap:var(--s2);margin-top:var(--s7)}
.pagination .page-numbers{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line-strong);border-radius:var(--r-md);text-decoration:none}
.pagination .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.single-hero img{width:100%;border-radius:var(--r-md);margin-top:var(--s6)}

/* ───── Footer ───── */
.site-footer{background:var(--inv-bg);color:var(--inv-ink)}
.site-footer .wrap{padding-block:var(--s9) var(--s6)}
.f-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s7);padding-bottom:var(--s8);border-bottom:1px solid var(--inv-line)}
.f-top h2{font-size:1.75rem;margin-bottom:var(--s3);max-width:14ch}
.f-top p{color:var(--inv-muted);font-size:var(--t-sm)}
.f-col h3{font-size:var(--t-sm);color:var(--inv-muted);font-weight:500;margin-bottom:var(--s4)}
.f-col ul{list-style:none;display:grid;gap:var(--s2)}
.f-col a{text-decoration:none;font-size:var(--t-sm)}
.f-col a:hover{text-decoration:underline}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);padding-top:var(--s5);font-size:var(--t-xs);color:var(--inv-muted)}
.f-bottom a{text-decoration:none}.f-bottom a:hover{text-decoration:underline}
.f-mark{font-family:"Readex Pro",sans-serif;font-weight:700;font-size:clamp(4rem,17vw,15rem);line-height:.85;color:var(--inv-line);direction:ltr;text-align:center;margin-top:var(--s7);user-select:none;white-space:nowrap;overflow:hidden}
@media (max-width:900px){.f-top{grid-template-columns:1fr 1fr}.f-top>div:first-child{grid-column:1/-1}}

/* floating WhatsApp */
.wa-float{position:fixed;inset-inline-end:var(--s5);bottom:var(--s5);z-index:40;width:56px;height:56px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px color-mix(in srgb,var(--ink) 22%,transparent)}
.wa-float svg{width:28px;height:28px}

/* utilities */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.center{text-align:center}
hr.rule{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}
.note{font-size:var(--t-sm);color:var(--muted);border-inline-start:2px solid var(--ink);padding-inline-start:var(--s4)}
.booking-slot{min-height:200px}

/* v1.0.1 fixes */
.hp{inset-inline-start:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;clip-path:inset(50%)}
.svc-row .n{display:none}
.svc-row{grid-template-columns:1fr 1.2fr 40px}
@media (max-width:760px){.svc-row{grid-template-columns:1fr 28px}.svc-row h3{grid-column:1}.svc-row p{grid-column:1;grid-row:2}.svc-row .arr{grid-column:2;grid-row:1}}
.sec-head .kicker{display:none}
.site-footer{border-top:1px solid var(--inv-line)}
.chips input{width:1px;height:1px;min-height:0;padding:0;border:0}
body.menu-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
@media (max-width:1060px){body.menu-open .nav{padding-bottom:120px}}

/* v1.1.0 dark (inverted) palette: black page, white text; inverted bands become white */
:root{
  --paper:#000000;--ink:#ffffff;--ink-2:#d4d4d4;--muted:#a3a3a3;--subtle:#7d7d7d;
  --line:#242424;--line-strong:#3d3d3d;--sunken:#0e0e0e;
  --inv-bg:#ffffff;--inv-ink:#000000;--inv-muted:#5f5f5f;--inv-line:#e2e2e2;
  color-scheme:dark;
}
.site-footer{--inv-bg:#000000;--inv-ink:#ffffff;--inv-muted:#a3a3a3;--inv-line:#242424;border-top:1px solid var(--line)}
.svc-row:hover p,.svc-row:hover .n{color:var(--inv-line)}
.field select option{background:#111;color:#fff}

/* v1.1.1 monochrome WhatsApp */
.wa-float{background:var(--ink);box-shadow:0 0 0 1.5px var(--paper),0 6px 20px rgba(0,0,0,.35)}
.wa-float svg path{fill:var(--paper)}
.wa-float:hover{transform:scale(1.06)}
.wa-float{transition:transform var(--base) var(--ease)}
.btn--wa{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--wa:hover{background:transparent;color:var(--ink)}

/* v1.2 — Cairo, language switch, LTR, logos, service banners */
:root{--f-display:"Cairo",system-ui,sans-serif;--f-body:"Cairo",system-ui,sans-serif}
body{line-height:1.8}
h1,h2,h3,h4{font-weight:800}
.brand b,.svc-row .n,.steps li::before,.f-mark{font-family:var(--f-display)}
.brand b{font-weight:800;font-size:1.3rem}
.brand--img{display:flex;align-items:center}
.brand-logo{height:40px;width:auto;max-width:180px;object-fit:contain}
.lang-switch{flex:none;font-family:var(--f-display);font-size:var(--t-sm);font-weight:700;text-decoration:none;padding:6px 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);transition:border-color var(--fast) var(--ease)}
.lang-switch:hover{border-color:var(--ink)}
@media (max-width:1060px){.lang-switch{margin-inline-start:auto}.burger{margin-inline-start:var(--s3)}}
html[dir=ltr] .arr{scale:-1 1}
html[dir=ltr] .btn:hover .arr{transform:translateX(4px)}
html[dir=ltr] .svc-row:hover .arr{transform:translateX(6px)}
html[dir=ltr] .field input[type=tel]{text-align:start}
.clients li.has-logo{padding:var(--s5)}
.clients li.has-logo img{max-height:56px;max-width:78%;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.82;transition:filter var(--base) var(--ease),opacity var(--base) var(--ease)}
.clients li.has-logo:hover img{filter:none;opacity:1}
.bn-sec{padding-block:clamp(48px,6vw,96px);border-bottom:1px solid var(--line)}
.bn-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s5);margin-bottom:var(--s6)}
.bn-head h2{margin:0}
.bn-nav{display:flex;gap:var(--s2)}
.bn-nav button{width:48px;height:48px;border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease)}
.bn-nav button:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.bn-prev .arr{scale:-1 1}
html[dir=ltr] .bn-prev .arr{scale:1 1}
.bn-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;scrollbar-width:none;overscroll-behavior-x:contain}
.bn-track::-webkit-scrollbar{display:none}
.bn-slide{scroll-snap-align:start;min-width:0}
.bn{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,72px);min-height:440px;height:100%;padding:clamp(24px,4vw,64px);background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;overflow:hidden;transition:border-color var(--base) var(--ease)}
.bn:hover{border-color:var(--line-strong)}
.bn-i{display:block;font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--s4)}
.bn h3{font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.25;margin-bottom:var(--s4)}
.bn p{color:var(--muted);max-width:46ch;margin-bottom:var(--s6)}
.bn-cta{display:inline-flex;align-items:center;gap:var(--s3);font-family:var(--f-display);font-weight:700;padding-bottom:4px;border-bottom:1.5px solid currentColor}
.bn-cta .arr{transition:transform var(--base) var(--ease)}
.bn:hover .bn-cta .arr{transform:translateX(-6px)}
html[dir=ltr] .bn:hover .bn-cta .arr{transform:translateX(6px)}
.bn-art{display:flex;align-items:center;justify-content:center;color:var(--ink);min-width:0}
.bn-art .art{width:100%;max-width:520px;height:auto}
.art-img{display:block;width:100%;height:380px;object-fit:cover;border-radius:var(--r-md)}
.bn-dots{display:flex;gap:8px;justify-content:center;margin-top:var(--s5)}
.bn-dots button{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:var(--line-strong);cursor:pointer;transition:width var(--base) var(--ease),background var(--base) var(--ease)}
.bn-dots button[aria-current=true]{width:28px;background:var(--ink)}
@media (max-width:820px){.bn{grid-template-columns:1fr;min-height:0;gap:var(--s5)}.bn-art{order:-1}.bn-art .art{max-width:320px}.art-img{height:220px}.bn-nav{display:none}}
.phero--art .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:center}
.phero-art{color:var(--ink);background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);display:flex;align-items:center;justify-content:center;overflow:hidden}
.phero-art .art{width:100%;max-width:460px;height:auto}
.phero-art .art-img{height:340px}
@media (max-width:900px){.phero--art .wrap{grid-template-columns:1fr}.phero-art{order:-1;max-width:440px}.phero-art .art{max-width:300px}}

/* v1.3 — animated service art: plays on hover (desktop) / in view (touch) */
.art [class^="a-"],.art [class*=" a-"]{transform-box:fill-box;transform-origin:center}
.art{transition:transform .5s var(--ease)}
.art.play{transform:scale(1.03)}
.art .a-pipe{stroke-width:3.2}
.art .a-line{stroke-width:3;stroke-dasharray:1}
.art .a-bar{transform-origin:50% 100%}
.art .a-row{transform-origin:0 50%}
.art.play .a-tile{animation:jx-pop 2.4s var(--ease) infinite;animation-delay:calc(var(--i) * .12s)}
.art.play .a-heart{animation:jx-beat 1.6s ease-in-out infinite}
.art.play .a-spin{animation:jx-spin 3s linear infinite}
.art.play .a-shutter{animation:jx-shutter 2.4s var(--ease) infinite}
.art.play .a-blink{animation:jx-blink 1s steps(1) infinite}
.art.play .a-frame{animation:jx-breathe 2.4s ease-in-out infinite}
.art.play .a-ring{animation:jx-ripple 1.8s ease-out infinite;animation-delay:calc(var(--i) * .2s)}
.art.play .a-bar{animation:jx-grow 2.2s var(--ease) infinite;animation-delay:calc(var(--i) * .15s)}
.art.play .a-shoot{animation:jx-shoot 2.2s var(--ease) infinite}
.art.play .a-card{animation:jx-load 2.6s var(--ease) infinite;animation-delay:calc(var(--i) * .2s)}
.art.play .a-btn{animation:jx-press 2.6s steps(1) infinite;animation-delay:calc(var(--i) * .2s)}
.art.play .a-cart{animation:jx-bump 2.6s var(--ease) infinite}
.art.play .a-link{animation:jx-flow .8s linear infinite}
.art.play .a-ring2{animation:jx-flow 1.6s linear infinite reverse}
.art.play .a-node{animation:jx-fire 2.4s var(--ease) infinite;animation-delay:calc(var(--i) * .4s)}
.art.play .a-core{animation:jx-breathe 2s ease-in-out infinite}
.art.play .a-pipe{animation:jx-travel 1.6s linear infinite;animation-delay:calc(var(--i) * .3s)}
.art.play .a-bub{animation:jx-bob 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)}
.art.play .a-ping{animation:jx-ping 1.6s ease-in-out infinite}
.art.play .a-row{animation:jx-write 2.4s var(--ease) infinite;animation-delay:calc(var(--i) * .15s)}
.art.play .a-line{animation:jx-draw 2.4s var(--ease) infinite}
.art.play .a-dot{animation:jx-ping 1.2s ease-in-out infinite}
@keyframes jx-pop{0%,60%,100%{transform:scale(1)}20%{transform:scale(.8)}35%{transform:scale(1.07)}}
@keyframes jx-beat{0%,100%{transform:translateY(0) scale(1)}15%{transform:scale(1.28)}30%{transform:scale(1)}60%{transform:translateY(-12px) scale(1.06)}}
@keyframes jx-spin{to{transform:rotate(360deg)}}
@keyframes jx-shutter{0%,100%{transform:rotate(0) scale(1)}40%,60%{transform:rotate(60deg) scale(.55)}}
@keyframes jx-blink{0%{opacity:1}50%{opacity:.1}}
@keyframes jx-breathe{0%,100%{transform:scale(1)}50%{transform:scale(.95)}}
@keyframes jx-ripple{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.4}}
@keyframes jx-grow{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.2)}}
@keyframes jx-shoot{0%,100%{transform:translate(0,0)}25%{transform:translate(-34px,18px)}38%{transform:translate(5px,-3px)}48%{transform:translate(0,0)}}
@keyframes jx-load{0%,100%{opacity:1;transform:translateY(0)}20%{opacity:.12;transform:translateY(10px)}}
@keyframes jx-press{0%{fill:none}75%{fill:currentColor}90%{fill:none}}
@keyframes jx-bump{0%,74%,100%{transform:translateY(0) rotate(0)}80%{transform:translateY(-7px) rotate(-10deg)}88%{transform:translateY(0) rotate(0)}}
@keyframes jx-flow{to{stroke-dashoffset:-32}}
@keyframes jx-fire{0%,100%{transform:scale(1)}10%{transform:scale(1.4)}22%{transform:scale(1)}}
@keyframes jx-travel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes jx-bob{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes jx-ping{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes jx-write{0%,100%{transform:scaleX(1)}25%{transform:scaleX(.08)}}
@keyframes jx-draw{0%,100%{stroke-dashoffset:0}12%{stroke-dashoffset:1}65%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.art.play,.art.play *{animation:none!important;transform:none!important}}

/* v1.3.1 - desktop nav sits next to the logo; language + CTA pushed to the far end */
@media (min-width:1061px){.nav{margin-inline-start:var(--s2)}.lang-switch{margin-inline-start:auto}}