/* Hallmark · macrostructure: Long Document (right-bias editorial, RTL) · tone: serious / trustworthy / plainspoken
 * theme: Souq Trust (light paper · emerald-teal primary · gold micro-accent) · lang: ar · dir: rtl (MENA)
 * palette validated for non-technical Arab SMB owners (Tamara/Salla/Foodics school): light + one trust accent
 * pre-emit critique: P5 H4 E4 S4 R5 V4 · no emoji · no re-drawn chrome · logical properties
 */
:root{
  --paper:    oklch(98.6% 0.004 180);
  --paper-2:  oklch(96.2% 0.008 180);
  --rule:     oklch(88.5% 0.012 185);
  --rule-2:   oklch(92.5% 0.008 185);
  --neutral:  oklch(49% 0.015 205);
  --muted:    oklch(38% 0.018 208);
  --ink:      oklch(24% 0.020 210);
  --accent:   #0E8F7E;
  --accent-2: #0A7566;
  --good:     oklch(52% 0.13 155);
  --wa:       oklch(56% 0.14 150);
  --gold:     oklch(66% 0.11 78);

  --font-display:"Cairo", system-ui, sans-serif;
  --font-body:"IBM Plex Sans Arabic", system-ui, sans-serif;

  --text-md:1.25rem; --text-lg:1.5625rem; --text-xl:1.953rem; --text-2xl:2.441rem;
  --text-display:clamp(2.4rem, 4.4vw + 1rem, 4rem);

  --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-6:3rem; --sp-8:4rem; --sp-12:6rem;
  --maxw:1120px;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:24px}
@media(max-width:560px){.wrap{padding-inline:18px}}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.28;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.label{font-size:.82rem;color:var(--neutral);font-weight:600}

/* nav */
.nav{border-bottom:1px solid var(--rule-2)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:1.4rem;direction:ltr}
.wordmark .k{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:26px;font-size:.98rem}
.nav-right a{color:var(--muted);transition:color .15s var(--ease-out)}
.nav-right a:hover{color:var(--ink)}
.nav-right .go{color:var(--ink);border-bottom:1.5px solid var(--accent);padding-bottom:3px}
@media(max-width:640px){.nav-right .quiet{display:none}}

/* hero */
.hero{padding-block:var(--sp-12) var(--sp-8);border-bottom:1px solid var(--rule-2)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-8);align-items:end}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:var(--sp-6)}}
.status{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px}
.status .sq{width:9px;height:9px;background:var(--good);border-radius:2px}
.status span{font-size:.9rem;color:var(--muted);font-weight:600}
h1.hero-h{font-size:var(--text-display);max-width:17ch;font-weight:800;line-height:1.24}
h1.hero-h .u{color:var(--accent)}
.hero-sub{margin-top:var(--sp-3);font-size:var(--text-md);color:var(--muted);max-width:50ch;line-height:1.7}
.hero-actions{margin-top:var(--sp-4);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.btn{font-family:var(--font-body);font-weight:600;font-size:1rem;cursor:pointer;border:none;background:none}
.btn-primary{background:var(--accent);color:#fff;padding:14px 26px;border-radius:3px;font-weight:700;box-shadow:0 1px 2px rgba(14,143,126,.25);transition:transform .12s var(--ease-out),background .15s}
.btn-primary:hover{transform:translateY(-1px);background:var(--accent-2)}
.btn-wa{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--rule);color:var(--ink);padding:13px 22px;border-radius:2px;font-weight:600;transition:border-color .15s,background .15s}
.btn-wa:hover{border-color:var(--wa);background:var(--paper-2)}
.btn-wa .dot{width:8px;height:8px;border-radius:50%;background:var(--wa)}
.hero-meta{margin-top:var(--sp-4);font-size:.9rem;color:var(--neutral)}

.timeline{border-inline-start:2px solid var(--rule)}
.timeline .cap{font-size:.85rem;color:var(--neutral);padding-inline-start:20px;margin-bottom:18px;line-height:1.6;font-weight:600}
.tl-row{position:relative;padding-block-end:22px;padding-inline-start:20px}
.tl-row::before{content:"";position:absolute;inset-inline-start:-5px;top:9px;width:8px;height:8px;background:var(--paper);border:2px solid var(--rule);border-radius:50%}
.tl-row:last-child::before{background:var(--accent);border-color:var(--accent)}
.tl-row .d{font-size:.9rem;color:var(--accent);font-weight:700}
.tl-row .t{font-size:1rem;color:var(--ink);margin-top:3px;line-height:1.5}

/* sections */
section{padding-block:var(--sp-12)}
.sec-lead{max-width:38ch}
.sec-lead h2{font-size:var(--text-2xl);line-height:1.3}
.sec-lead p{margin-top:14px;color:var(--muted);font-size:var(--text-md);max-width:48ch;line-height:1.7}
.rule-top{border-top:1px solid var(--rule-2)}

.ledger{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-top:var(--sp-6)}
@media(max-width:760px){.ledger{grid-template-columns:1fr;gap:var(--sp-6)}}
.ledger h3{font-size:1rem;font-weight:700;padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.ledger .now h3{color:var(--neutral)}
.ledger .then h3{color:var(--accent)}
.ledger .item{padding:16px 0;border-bottom:1px solid var(--rule-2);font-size:1rem;line-height:1.6}
.ledger .now .item{color:var(--neutral)}
.ledger .then .item{color:var(--ink)}

.gets{margin-top:var(--sp-6);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-6) var(--sp-8)}
.get{grid-column:span 6}
@media(max-width:760px){.get{grid-column:1 / -1}}
.get .n{font-size:.9rem;color:var(--accent);font-weight:700}
.get h3{font-size:var(--text-lg);margin-top:10px}
.get p{margin-top:8px;color:var(--muted);max-width:44ch;line-height:1.7}

.steps{margin-top:var(--sp-6)}
.step{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:28px 0;border-top:1px solid var(--rule-2);align-items:start}
.step:last-child{border-bottom:1px solid var(--rule-2)}
.step .num{font-family:var(--font-display);font-size:var(--text-xl);color:var(--accent);font-weight:800;line-height:1}
.step h3{font-size:var(--text-md);margin-bottom:8px}
.step p{color:var(--muted);max-width:64ch;line-height:1.7}

.offers{margin-top:var(--sp-6);display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule-2)}
@media(max-width:760px){.offers{grid-template-columns:1fr}}
.offer{padding:30px 26px;border-inline-end:1px solid var(--rule-2)}
.offer:last-child{border-inline-end:none}
@media(max-width:760px){.offer{border-inline-end:none;border-bottom:1px solid var(--rule-2)}.offer:last-child{border-bottom:none}}
.offer.mid{background:var(--paper-2)}
.offer .ok{font-size:.82rem;color:var(--neutral);font-weight:600}
.offer .on{font-family:var(--font-display);font-size:var(--text-md);font-weight:700;margin-top:12px}
.offer .od{margin-top:10px;color:var(--muted);font-size:.98rem;line-height:1.7}
.offer ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:11px}
.offer li{font-size:.96rem;color:var(--muted);padding-inline-start:18px;position:relative;line-height:1.5}
.offer li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:6px;height:6px;background:var(--accent);border-radius:1px}
.devis-cta{margin-top:var(--sp-6);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.devis-note{color:var(--neutral);font-size:.98rem;max-width:50ch;line-height:1.6}

.rescue{margin-top:var(--sp-6);padding:var(--sp-6);border:1px solid var(--rule);border-inline-start:3px solid var(--accent);background:var(--paper-2)}
.rescue h3{font-size:var(--text-lg);max-width:34ch;line-height:1.4}
.rescue p{margin-top:12px;color:var(--muted);max-width:70ch;line-height:1.7}
.rescue a{margin-top:16px;display:inline-block;color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:3px}

.proof{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--sp-8);align-items:start;margin-top:var(--sp-4)}
@media(max-width:760px){.proof{grid-template-columns:1fr;gap:var(--sp-6)}}
.proof h2{font-size:var(--text-2xl);max-width:22ch;line-height:1.3}
.proof p{margin-top:16px;color:var(--muted);max-width:56ch;line-height:1.8}
.proof .sig{margin-top:22px;font-size:.9rem;color:var(--neutral);font-weight:600}
.facts{border-top:1px solid var(--rule)}
.fact{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule-2)}
.fact .v{font-family:var(--font-display);font-size:var(--text-md);font-weight:700;color:var(--ink);white-space:nowrap}
.fact .k{font-size:.95rem;color:var(--neutral);text-align:start}

.faq{margin-top:var(--sp-6);max-width:800px}
details{border-top:1px solid var(--rule-2)}
.faq details:last-of-type{border-bottom:1px solid var(--rule-2)}
summary{list-style:none;cursor:pointer;padding:20px 0;font-size:var(--text-md);font-family:var(--font-display);font-weight:700;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-weight:700}
details[open] summary::after{content:"\2013"}
details p{padding:0 0 22px;color:var(--muted);max-width:70ch;line-height:1.8}

.contact{border-top:1px solid var(--rule-2)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-8);align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:var(--sp-6)}}
.contact h2{font-size:var(--text-2xl);max-width:18ch;line-height:1.3}
.contact .intro{margin-top:16px;color:var(--muted);max-width:46ch;line-height:1.8}
.contact .direct{margin-top:22px;font-size:.95rem;color:var(--neutral);line-height:2.2}
.contact .direct a{color:var(--accent)}
.contact .direct .em{direction:ltr;unicode-bidi:isolate}
form{display:flex;flex-direction:column;gap:16px}
.frow{display:flex;gap:16px}
.frow>*{flex:1}
@media(max-width:520px){.frow{flex-direction:column}}
label{display:block;font-size:.85rem;color:var(--neutral);margin-bottom:7px;font-weight:600}
input,textarea{width:100%;background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;color:var(--ink);font-family:var(--font-body);font-size:1rem;padding:13px 14px}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical;min-height:130px;line-height:1.6}
.hp{position:absolute;inset-inline-start:-9999px;width:0;height:0;opacity:0}
button.send{align-self:flex-start;background:var(--accent);color:#fff;font-weight:700;padding:14px 28px;border-radius:3px;border:none;cursor:pointer;font-family:var(--font-body);box-shadow:0 1px 2px rgba(14,143,126,.25);transition:background .15s,transform .12s var(--ease-out)}
button.send:hover{background:var(--accent-2);transform:translateY(-1px)}
button.send[disabled]{opacity:.6;cursor:not-allowed}
.fnote{font-size:.9rem;color:var(--neutral)}
.fmsg{display:none;padding:13px 15px;border-radius:2px;font-size:.98rem}
.fmsg.ok{display:block;background:oklch(78% 0.13 155 / .12);color:var(--good);border:1px solid oklch(78% 0.13 155 / .3)}
.fmsg.err{display:block;background:oklch(72% 0.15 30 / .10);color:oklch(50% 0.18 30);border:1px solid oklch(72% 0.15 30 / .3)}
.offer.mid .ok{color:var(--gold)}
.offer.mid{box-shadow:inset 0 2px 0 var(--accent)}

footer{border-top:1px solid var(--rule);padding-block:var(--sp-8)}
.foot{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.foot .statement{font-family:var(--font-display);font-size:var(--text-md);font-weight:700;max-width:36ch;line-height:1.5}
.foot .meta{font-size:.85rem;color:var(--neutral);text-align:start;line-height:1.9}
.foot .meta .u{direction:ltr;unicode-bidi:isolate;display:inline-block}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* intentional rhythm: sections do not share one padding */
#apports{padding-block:var(--sp-8)}
#work{padding-block:var(--sp-12) var(--sp-8)}
#proof{padding-block:var(--sp-8) var(--sp-12)}
#faq{padding-block:var(--sp-8)}


/* portfolio / real work */
.works{margin-top:var(--sp-6);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
@media(max-width:820px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.works{grid-template-columns:1fr}}
.work{min-width:0;display:block;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--paper-2);transition:transform .15s var(--ease-out),box-shadow .15s}
.work img{max-width:100%}
.work:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(20,50,45,.10)}
.work .shot{aspect-ratio:1280/760;overflow:hidden;border-bottom:1px solid var(--rule)}
.work .shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.work .wt{font-family:var(--font-display);font-weight:700;font-size:1.05rem;padding:16px 16px 4px;direction:ltr;text-align:start}
.work .wd{color:var(--muted);font-size:.92rem;padding:0 16px 18px;line-height:1.6}