/* ==========================================================================
   قهوجي الرياض — Main Stylesheet
   RTL Arabic adaptation of the reference layout
   السكين الداكن للرئيسية (skin-dark) + السكين الكريمي للداخلية (skin-light)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* لوحة السكين الكريمي */
  --cream:#F5F4F0;
  --cream-2:#EDE7DF;
  --ink:#1D1B1A;
  --ink-2:#3A3634;
  --body-c:#6E6B67;
  --muted-c:#A39E98;
  --line-c:#DED8D0;
  --coral:#E9613C;
  --coral-2:#F0876A;

  /* لوحة السكين الداكن */
  --dark:#212121;
  --dark-2:#1A1A1A;
  --dark-3:#2A2726;
  --copper:#9B6751;
  --copper-2:#B98368;

  --f-display:'Amiri', 'Times New Roman', serif;
  --f-script:'Aref Ruqaa', 'Amiri', serif;
  --f-body:'Tajawal', system-ui, -apple-system, sans-serif;

  --header-h:78px;
  --wrap:1300px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* السكين الكريمي — الصفحات الداخلية */
body.skin-light{
  --paper:var(--cream);
  --paper-2:var(--cream-2);
  --heading:var(--ink);
  --text:var(--body-c);
  --soft:var(--muted-c);
  --rule:var(--line-c);
  --accent:var(--coral);
  --accent-2:var(--coral-2);
  --on-accent:#ffffff;
}

/* السكين الداكن — الصفحة الرئيسية */
body.skin-dark{
  --paper:var(--dark);
  --paper-2:var(--dark-2);
  --heading:#ffffff;
  --text:rgba(255,255,255,.62);
  --soft:rgba(255,255,255,.44);
  --rule:rgba(255,255,255,.13);
  --accent:var(--copper);
  --accent-2:var(--copper-2);
  --on-accent:#ffffff;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; padding:0;
  font-family:var(--f-body);
  font-size:16px;
  font-weight:400;
  line-height:1.95;
  color:var(--text);
  background:var(--paper);
  direction:rtl;
  text-align:right;
  overflow-x:clip;
}
@supports not (overflow:clip){ body{overflow-x:hidden} }
body.skin-light{
  background-color:var(--cream);
  background-image:radial-gradient(115% 55% at 100% 0%, #F8F1E8 0%, rgba(248,241,232,0) 62%);
  background-repeat:no-repeat;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
ul{list-style:none; margin:0; padding:0}
figure{margin:0}
h1,h2,h3,h4,h5,h6{
  font-family:var(--f-display);
  font-weight:400;
  color:var(--heading);
  margin:0 0 16px;
  line-height:1.4;
}
p{margin:0 0 18px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 26px}

/* ---------- 3. Section heading kit ---------- */
.sec-head{margin-bottom:clamp(38px,4.4vw,62px)}
.sec-head.center{text-align:center}
.sec-title{
  font-size:clamp(28px,3.9vw,54px);
  line-height:1.22;
  margin:0;
  color:var(--heading);
}
.sec-script{
  display:block;
  font-family:var(--f-script);
  color:var(--accent);
  font-size:clamp(19px,2.1vw,30px);
  line-height:1.5;
  margin-top:-.42em;
  position:relative;
  z-index:2;
}
.lead{color:var(--heading); font-weight:500}
body.skin-dark .lead{color:rgba(255,255,255,.86)}

/* ---------- 4. Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-body); font-weight:500; font-size:15px;
  padding:16px 40px; min-height:54px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
/* الزر ذا الإطار المكسور — العنصر المميّز في التصميم المرجعي */
.btn-line{
  color:var(--heading);
  border:1px solid var(--heading);
  border-top-color:transparent;
  background:transparent;
}
.btn-line::before{
  content:''; position:absolute; top:-1px; inset-inline-end:0;
  width:58%; height:1px; background:currentColor;
  transition:width .4s var(--ease);
}
.btn-line:hover{color:var(--accent); border-color:var(--accent)}
.btn-line:hover::before{width:100%}
.btn-solid{background:var(--accent); color:var(--on-accent); border:1px solid var(--accent)}
.btn-solid:hover{background:var(--heading); border-color:var(--heading); color:var(--paper)}
.center-btn{text-align:center; margin-top:clamp(34px,4vw,54px)}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:900;
  background:var(--paper);
  transition:box-shadow .35s var(--ease);
}
.site-header.is-stuck{box-shadow:0 6px 26px rgba(0,0,0,.13)}
body.skin-dark .site-header.is-stuck{box-shadow:0 6px 26px rgba(0,0,0,.5)}
/* الهيدر: عنصران فقط — الشعار في أول السطر (يمين) والهمبرجر في آخره (يسار).
   flex + space-between: لا يمكن أن يتزحزح أي منهما مهما تغيّر المقاس. */
.header-inner{
  max-width:1560px; margin:0 auto; padding:0 22px;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* الشعار — علامة الدلة + الاسم في سطر واحد */
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0}
.brand-mark{width:30px; height:30px; color:var(--accent); flex-shrink:0; transition:transform .4s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-8deg)}
.brand-name{
  font-family:var(--f-display); font-size:clamp(21px,1.9vw,27px);
  color:var(--heading); line-height:1.1; white-space:nowrap;
}

/* زر القائمة */
.burger{
  width:46px; height:46px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--heading); transition:color .3s var(--ease);
}
.burger svg{width:26px; height:26px}
.burger:hover{color:var(--accent)}
.brand-logo{max-height:50px; width:auto}
.brand:hover .brand-name{color:var(--accent)}

/* Drawer */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(370px,88vw); z-index:1000;
  background:var(--dark); color:rgba(255,255,255,.7);
  padding:34px 30px; overflow-y:auto;
  transform:translateX(102%); transition:transform .42s var(--ease);
  --heading:#fff; --rule:rgba(255,255,255,.12); --accent:var(--copper-2);
}
.drawer.open{transform:translateX(0)}
.drawer-close{
  position:absolute; top:20px; inset-inline-start:20px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.drawer-close svg{width:22px; height:22px}
.drawer-brand{margin-bottom:34px; padding-inline:0}
.drawer-brand .brand-name{color:#fff}
.drawer nav a{
  display:block; color:#fff; padding:14px 0; font-size:17px; font-family:var(--f-display);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.drawer nav a:hover{color:var(--copper-2)}
.drawer .sub-menu a{font-size:15px; padding-inline-start:16px; opacity:.8}
.drawer-search{margin-top:26px}
.drawer-search .search-form{flex-direction:column; gap:10px; max-width:none}
.drawer-search input[type="search"]{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff;
}
.drawer-search input[type="search"]::placeholder{color:rgba(255,255,255,.45)}
.drawer-cta{margin-top:22px; display:grid; gap:12px}
.drawer-cta .btn{width:100%}
.drawer-cta .btn-line{color:#fff; border-color:rgba(255,255,255,.45)}
.drawer-contact{margin-top:30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12)}
.drawer-contact li{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:14.5px; line-height:1.8}
.drawer-contact svg{width:18px; height:18px; color:var(--copper-2); flex-shrink:0; margin-top:6px}

.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:999;
  opacity:0; visibility:hidden; transition:.35s var(--ease);
}
.scrim.show{opacity:1; visibility:visible}

/* ==========================================================================
   6. HERO (الرئيسية)
   ========================================================================== */
section.hero{
  position:relative; overflow:hidden;
  height:clamp(420px,52vw,660px);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.05); animation:qhrZoom 16s ease-out forwards;
}
@keyframes qhrZoom{to{transform:scale(1)}}
section.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,14,.50) 0%, rgba(20,16,14,.46) 45%, rgba(20,16,14,.66) 100%);
}
.hero-inner{position:relative; z-index:3; padding:0 26px; max-width:1100px}
.hero-script{
  font-family:var(--f-script); color:#fff; font-weight:400;
  font-size:clamp(40px,8.6vw,132px); line-height:1.5;
  margin:0; text-shadow:0 6px 34px rgba(0,0,0,.4);
}
.hero-label{
  color:#fff; font-size:clamp(13px,1.3vw,17px);
  margin:-.4em 0 0; word-spacing:.28em;
  text-shadow:0 2px 14px rgba(0,0,0,.65);
}
.hero-social{
  position:absolute; z-index:3; bottom:34px; inset-inline-start:34px;
  display:flex; gap:16px; color:#fff;
}
.hero-social a{width:22px; height:22px; opacity:.85; transition:.3s var(--ease)}
.hero-social a:hover{opacity:1; color:var(--copper-2); transform:translateY(-3px)}
.hero-social svg{width:100%; height:100%}
.hero-dots{
  position:absolute; z-index:3; bottom:40px; inset-inline-end:38px; display:flex; gap:10px;
}
.hero-dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.42)}
.hero-dots i.on{background:var(--copper-2); width:18px; border-radius:4px}

/* ==========================================================================
   7. PACKAGES (شبكة الباقات)
   ========================================================================== */
section.packages{padding:clamp(60px,7vw,100px) 0 clamp(50px,6vw,80px)}
.pkg-grid{display:grid; grid-template-columns:repeat(4,1fr); column-gap:46px}
.pkg{display:flex; gap:15px; padding:24px 0; border-top:1px solid var(--rule)}
.pkg-ico{width:44px; height:44px; color:var(--accent-2); flex-shrink:0; margin-top:2px}
.pkg-body{min-width:0}
.pkg h3{font-size:20px; margin:0 0 3px; line-height:1.3}
.pkg p{font-size:13.5px; color:var(--soft); margin:0 0 6px; line-height:1.7}
.pkg-price{font-family:var(--f-display); color:var(--accent); font-size:16px}

/* ==========================================================================
   8. ABOUT
   ========================================================================== */
section.about{padding:clamp(50px,6vw,80px) 0 clamp(60px,7vw,100px)}
.about-grid{display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(36px,5vw,70px)}
.about-photo img{width:100%; aspect-ratio:4/5; object-fit:cover}
.hours-title{font-size:clamp(22px,2.4vw,30px); margin:36px 0 16px}
.hours-list li{
  display:flex; align-items:baseline; gap:12px;
  font-size:14.5px; padding:7px 0;
}
.h-key{color:var(--text); flex-shrink:0}
.h-dots{flex:1; border-bottom:1px dotted var(--rule); transform:translateY(-4px)}
.h-val{color:var(--heading); flex-shrink:0}
.about-actions{margin-top:30px; display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.about-badge{display:inline-flex; align-items:center; gap:11px; color:var(--soft); font-size:13.5px}
.about-badge svg{width:34px; height:34px; color:var(--accent-2)}

.about-copy .sec-head{margin-bottom:26px}
.since{
  font-family:var(--f-display); color:var(--accent);
  font-size:clamp(42px,6.6vw,92px); line-height:1; margin:26px 0 28px;
}
.video-card{position:relative; overflow:hidden}
.video-card img{width:100%; aspect-ratio:4/3; object-fit:cover}
.play{position:absolute; inset:0; display:grid; place-items:center; color:#fff}
.play::before{content:''; position:absolute; inset:0; background:rgba(20,16,14,.32); transition:.4s var(--ease)}
.play:hover::before{background:rgba(20,16,14,.10)}
.play-ring{position:relative; width:132px; height:132px; animation:qhrSpin 18s linear infinite}
.play-ring text{fill:#fff; font-family:var(--f-body); font-size:8.4px; direction:ltr;
  paint-order:stroke; stroke:rgba(0,0,0,.35); stroke-width:.7px}
@keyframes qhrSpin{to{transform:rotate(360deg)}}
.play-ico{
  position:absolute; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--dark);
  display:grid; place-items:center; transition:.35s var(--ease);
}
.play-ico svg{width:18px; height:18px; margin-inline-start:2px}
.play:hover .play-ico{background:var(--accent); color:#fff}

/* ==========================================================================
   9. SERVICES (الكلمة العملاقة + الأيقونات)
   ========================================================================== */
section.services{padding:0 0 clamp(60px,7vw,100px); overflow:hidden}
.brandwall{
  font-family:var(--f-display); color:var(--accent);
  font-size:clamp(46px,12vw,180px); line-height:1.06;
  margin:0 0 20px; white-space:nowrap; user-select:none;
}
section.services .sec-head{position:relative; z-index:2; margin-bottom:clamp(40px,5vw,66px)}
section.services{padding-top:clamp(20px,3vw,40px)}
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px,3.4vw,44px) 30px}
.feat-grid-4{grid-template-columns:repeat(4,1fr)}
.feat{text-align:center}
.feat-ico{width:56px; height:56px; color:var(--accent); margin:0 auto 16px}
.feat h3{font-size:17px; margin:0 0 4px; line-height:1.45}
.feat p{font-size:13px; color:var(--soft); margin:0; line-height:1.7}

/* ==========================================================================
   10. GALLERY (موزاييك)
   ========================================================================== */
section.gallery{padding:0 0 clamp(60px,7vw,100px)}
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1.3fr 1fr;
  gap:14px; height:clamp(520px,58vw,740px);
}
.g-item{position:relative; overflow:hidden; background:var(--paper-2)}
.g-item:first-child{grid-column:span 2}
.g-item img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.g-item:hover img{transform:scale(1.05)}
.g-item figcaption{
  position:absolute; bottom:36px; inset-inline-start:0;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--f-script); font-size:clamp(15px,1.5vw,20px);
  padding:11px 28px 13px; line-height:1.4;
}

/* ==========================================================================
   11. TESTIMONIALS
   ========================================================================== */
section.testimonials{padding:clamp(50px,6vw,86px) 0}
.tst-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,56px); align-items:center}
.tst-copy .sec-head{margin-bottom:26px}
.tst-slides > .tst-slide{margin:0; display:none}
.tst-slide.on{display:block; animation:qhrFade .5s var(--ease)}
@keyframes qhrFade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.tst-mark{width:38px; height:30px; color:var(--accent); opacity:.55; margin-bottom:12px}
.tst-slide p{
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(16px,1.6vw,19px); line-height:2.05; color:var(--text); margin:0 0 20px;
}
.tst-slide footer{display:flex; flex-direction:column; gap:2px}
.tst-name{font-family:var(--f-display); font-size:19px; color:var(--heading)}
.tst-role{font-size:13px; color:var(--soft)}
.tst-dots{display:flex; gap:9px; margin-top:24px}
.tst-dots button{width:7px; height:7px; border-radius:50%; background:var(--rule); transition:.3s var(--ease)}
.tst-dots button.on{background:var(--accent); width:20px; border-radius:4px}
.tst-illus{color:var(--accent-2)}
.tst-illus .illus{width:100%; height:auto; opacity:.9}

.about-media,.footer-brand-col{min-width:0}
.job-head{min-width:0}
.cta-copy{flex:1 1 320px; min-width:0}
.tst-slides{position:relative; min-height:232px}

/* ==========================================================================
   12. BLOG CARDS
   ========================================================================== */
section.blog{padding:clamp(50px,6vw,86px) 0}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,36px)}
.post-card{display:flex; flex-direction:column}
.post-thumb{position:relative; display:block; overflow:hidden; background:var(--paper-2)}
.post-thumb img{width:100%; aspect-ratio:4/3.1; object-fit:cover; transition:transform .8s var(--ease)}
.post-card:hover .post-thumb img{transform:scale(1.05)}
.post-date{
  position:absolute; bottom:0; inset-inline-start:24px;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--f-display); text-align:center; padding:12px 16px 10px; line-height:1.15;
}
.post-date b{display:block; font-size:22px; font-weight:400}
.post-date i{display:block; font-size:13px; font-style:normal; opacity:.9}
.post-body{padding-top:18px}
.post-cat{display:block; font-family:var(--f-script); color:var(--accent); font-size:17px; margin-bottom:4px}
.post-card h3{font-size:21px; line-height:1.6; margin:0 0 8px}
.post-card h3 a:hover{color:var(--accent)}
.post-card p{font-size:14.5px; margin:0; color:var(--soft)}

/* ==========================================================================
   13. SEO COPY BLOCK
   ========================================================================== */
.copy-section{padding:clamp(40px,5vw,70px) 0}
.copy-block{max-width:920px; margin:0 auto}
.copy-block h2{font-size:clamp(25px,3vw,40px); margin-bottom:20px}
.copy-block h3{font-size:clamp(21px,2.2vw,28px); margin:34px 0 12px}
.copy-block p{font-size:16px; line-height:2.05}
.copy-block strong{color:var(--heading)}
.copy-block ul{margin:0 0 20px}
.copy-block li{position:relative; padding-inline-start:22px; margin-bottom:9px; font-size:15.5px; line-height:1.95}
.copy-block li::before{
  content:''; position:absolute; inset-inline-start:0; top:15px;
  width:7px; height:7px; border:1px solid var(--accent); border-radius:50%;
}

/* ==========================================================================
   14. FAQ
   ========================================================================== */
section.faq{padding:clamp(40px,5vw,70px) 0 clamp(60px,7vw,100px)}
.faq-list{max-width:920px; margin:0 auto; border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{
  width:100%; display:flex; align-items:center; gap:16px; text-align:start;
  padding:22px 0; font-family:var(--f-display); font-size:clamp(17px,1.8vw,21px);
  color:var(--heading); line-height:1.55; transition:color .3s var(--ease);
}
.faq-q:hover{color:var(--accent)}
.faq-q .chev{
  margin-inline-start:auto; width:20px; height:20px; color:var(--accent);
  flex-shrink:0; transition:transform .35s var(--ease);
}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
.faq-a-inner{padding:0 0 22px; font-size:15.5px; line-height:2}

/* ==========================================================================
   15. CTA STRIP
   ========================================================================== */
.cta-strip{background:var(--accent); padding:clamp(40px,5vw,64px) 0; color:rgba(255,255,255,.9)}
.cta-strip .wrap{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.cta-strip h2{color:#fff; font-size:clamp(24px,3vw,38px); margin:0 0 6px}
.cta-strip p{color:rgba(255,255,255,.88); margin:0; font-size:15.5px}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap}
.cta-strip .btn-solid{background:#fff; color:var(--accent); border-color:#fff}
.cta-strip .btn-solid:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.cta-strip .btn-line{color:#fff; border-color:rgba(255,255,255,.55)}
.cta-strip .btn-line:hover{color:#fff; border-color:#fff}

/* ==========================================================================
   16. PAGE HERO (الصفحات الداخلية)
   ========================================================================== */
.page-hero{
  position:relative; display:flex; align-items:center;
  height:clamp(230px,32vw,410px); background:var(--dark);
}
.page-hero-bg{position:absolute; inset:0; background-size:cover; background-position:center}
.page-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(18,15,13,.62) 0%, rgba(18,15,13,.20) 70%);
}
.page-hero .wrap{position:relative; z-index:4}
.page-hero-title{
  color:#fff; font-size:clamp(32px,5.4vw,72px); line-height:1.15; margin:0 0 10px;
  text-shadow:0 4px 26px rgba(0,0,0,.35);
}
.crumbs{color:rgba(255,255,255,.78); font-size:14px}
.crumbs a{color:#fff}
.crumbs a:hover{color:var(--copper-2)}
.crumbs span{margin:0 7px}
.crumbs > span:last-child{margin:0}

/* الكلمة المفرّغة العملاقة التي تعبر حدّ الصورة */
.outline-word{
  position:absolute; z-index:3; bottom:-.19em; inset-inline-end:1.5%;
  font-family:var(--f-display); font-size:clamp(70px,16vw,248px); line-height:.86;
  color:transparent; -webkit-text-stroke:1px var(--coral); text-stroke:1px var(--coral);
  white-space:nowrap; pointer-events:none; user-select:none; opacity:.8;
}
body.skin-dark .outline-word{-webkit-text-stroke-color:var(--copper-2)}

.page-body{padding:clamp(52px,7vw,100px) 0}
.post-meta-bar{
  display:flex; gap:24px; flex-wrap:wrap; max-width:920px; margin:0 auto 26px;
  font-size:13.5px; color:var(--soft);
}
.post-meta-bar span{display:inline-flex; align-items:center; gap:8px}
.post-meta-bar svg{width:16px; height:16px; color:var(--accent)}
.related-head{margin-top:clamp(50px,6vw,80px)}
.empty-state{text-align:center}
.empty-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px}

/* ---------- Entry content ---------- */
.entry-content{max-width:920px; margin:0 auto; font-size:16.5px; line-height:2.05}
.entry-content h1{font-size:clamp(32px,5vw,60px); margin:34px 0 16px}
.entry-content h2{font-size:clamp(25px,3vw,40px); margin:38px 0 14px}
.entry-content h3{font-size:clamp(21px,2.2vw,29px); margin:30px 0 12px}
.entry-content h4{font-size:23px; margin:26px 0 10px}
.entry-content h5{font-size:20px; margin:22px 0 10px}
.entry-content h6{font-size:18px; margin:20px 0 10px}
.entry-content strong{color:var(--heading)}
.entry-content a{color:var(--accent); font-weight:500}
.entry-content a:hover{text-decoration:underline}
.entry-content img{margin:26px 0}
.entry-content ul,.entry-content ol{margin:0 0 20px; padding-inline-start:0}
.entry-content ul{list-style:none}
.entry-content ul li{position:relative; padding-inline-start:22px; margin-bottom:9px}
.entry-content ul li::before{
  content:''; position:absolute; inset-inline-start:0; top:15px;
  width:7px; height:7px; border:1px solid var(--accent); border-radius:50%;
}
.entry-content ol{padding-inline-start:22px}
.entry-content ol li{margin-bottom:9px}
.entry-content blockquote{
  margin:28px 0; padding:24px 28px; background:var(--paper-2);
  border-inline-start:2px solid var(--accent);
  font-family:var(--f-display); font-size:18px; font-style:italic;
}
.entry-content blockquote p:last-child{margin:0}
.entry-content table{width:100%; border-collapse:collapse; margin:26px 0; font-size:15px}
.entry-content th,.entry-content td{border:1px solid var(--rule); padding:13px 16px; text-align:start}
.entry-content th{background:var(--heading); color:var(--paper); font-family:var(--f-display); font-weight:400}
.entry-content tr:nth-child(even) td{background:var(--paper-2)}
.entry-content figcaption,.wp-caption-text{font-size:13.5px; color:var(--soft); text-align:center; margin-top:8px}
.alignwide{max-width:1120px; margin-inline:auto}

.pagination{display:flex; gap:8px; justify-content:center; margin-top:clamp(40px,5vw,60px); flex-wrap:wrap}
.pagination .page-numbers{
  min-width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); color:var(--heading); font-size:15px; padding:0 12px;
  transition:.3s var(--ease);
}
.pagination .page-numbers:hover,
.pagination .current{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}

/* ==========================================================================
   17. قوالب الصفحات: الخدمات / الباقات / الوظائف
   ========================================================================== */
.svc-icons{padding:clamp(50px,6vw,86px) 0 clamp(30px,4vw,50px)}
.split{padding:clamp(36px,4.5vw,64px) 0}
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4.6vw,64px); align-items:center}
.split-media img{width:100%; aspect-ratio:1/1; object-fit:cover}
.split-copy .sec-head{margin-bottom:24px}
.split-alt .split-media{order:2}
.split-alt .split-copy{order:1}
.dot-list{margin:0 0 26px}
.dot-list li{position:relative; padding-inline-start:22px; margin-bottom:9px; font-size:15.5px}
.dot-list li::before{
  content:''; position:absolute; inset-inline-start:0; top:14px;
  width:7px; height:7px; border:1px solid var(--accent); border-radius:50%;
}

.menu-page{padding:clamp(52px,7vw,100px) 0}
.menu-block{
  display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(32px,5vw,66px);
  align-items:center; margin-bottom:clamp(56px,7vw,100px);
}
.menu-block.img-end .oval-media{order:2}
.menu-block.img-end .menu-list{order:1}
.oval-media{position:relative}
.oval-media img{
  position:relative; z-index:2; width:100%; aspect-ratio:3/3.8; object-fit:cover;
  border-radius:50% / 44%;
}
.oval-media::before{
  content:''; position:absolute; z-index:1;
  top:-14px; bottom:14px; inset-inline-start:-14px; inset-inline-end:14px;
  border:1px solid var(--accent); border-radius:50% / 44%;
}
.menu-list .sec-head{margin-bottom:30px}
.menu-row{padding:14px 0}
.mr-top{display:flex; align-items:baseline; gap:14px}
.mr-name{font-family:var(--f-display); font-size:clamp(18px,2vw,24px); color:var(--heading); flex-shrink:0}
.mr-lead{flex:1; border-bottom:1px solid var(--rule); transform:translateY(-6px)}
.mr-price{font-family:var(--f-display); color:var(--accent); font-size:clamp(16px,1.7vw,20px); flex-shrink:0; white-space:nowrap}
.mr-desc{font-size:14.5px; color:var(--soft); margin:4px 0 0; line-height:1.8}
.menu-note{
  max-width:920px; margin:0 auto; font-size:14.5px; color:var(--soft);
  border-top:1px solid var(--rule); padding-top:22px;
}

.careers{padding:clamp(52px,7vw,100px) 0 0}
.job-list{border-top:1px solid var(--rule)}
.job{
  display:grid; grid-template-columns:1.05fr 1.35fr auto auto;
  gap:clamp(18px,2.4vw,34px); align-items:center;
  padding:30px 0; border-bottom:1px solid var(--rule);
}
.job-type{
  display:inline-block; background:var(--accent); color:var(--on-accent);
  font-size:12px; padding:4px 13px; vertical-align:middle;
}
.job-city{color:var(--accent); font-size:13px; margin-inline-start:12px}
.job-title{font-size:clamp(23px,2.6vw,34px); margin:10px 0 0; line-height:1.2}
.job-desc{font-size:14.5px; margin:0; line-height:1.85}
.job-pay{font-family:var(--f-display); color:var(--accent); font-size:clamp(19px,2.2vw,28px); white-space:nowrap}
.job-btn{min-height:50px; padding:14px 30px; font-size:14px; white-space:nowrap}

/* ==========================================================================
   18. FOOTER (داكن دائمًا)
   ========================================================================== */
.site-footer{
  --paper:var(--dark); --paper-2:var(--dark-2);
  --heading:#ffffff; --text:rgba(255,255,255,.62); --soft:rgba(255,255,255,.44);
  --rule:rgba(255,255,255,.12); --accent:var(--copper-2); --on-accent:#fff;
  background:var(--dark); color:var(--text); padding-top:clamp(50px,6vw,80px);
}
.logos-strip{
  display:grid; grid-template-columns:repeat(6,1fr); gap:26px; align-items:center;
  padding-bottom:clamp(46px,5.5vw,74px); color:rgba(255,255,255,.42);
}
.logos-strip img{
  width:100%; height:auto; max-height:64px; object-fit:contain;
  opacity:.55; transition:opacity .3s var(--ease);
}
.logos-strip img:hover{opacity:1}

.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr .9fr;
  gap:clamp(28px,3.4vw,48px); padding-bottom:clamp(40px,5vw,64px);
}
.footer-brand{padding-inline:0; margin-bottom:18px}
.footer-brand .brand-name{color:#fff}
.footer-about{font-size:14.5px; line-height:2; margin:0 0 20px}
.trust-chips{display:flex; flex-wrap:wrap; gap:8px}
.trust-chips li{
  font-size:12.5px; color:rgba(255,255,255,.72);
  border:1px solid var(--rule); padding:5px 13px;
}
.footer-col h4{
  font-family:var(--f-body); font-size:12.5px; font-weight:500;
  margin:0 0 14px; color:rgba(255,255,255,.52);
}
.footer-col h4.mt{margin-top:26px}
.f-line{margin:0 0 6px; font-size:14.5px; line-height:1.85; color:rgba(255,255,255,.78)}
.f-line a:hover{color:var(--copper-2)}
.f-mail{color:var(--copper-2); border-bottom:1px solid rgba(185,131,104,.5); padding-bottom:2px}
.f-links .menu li{margin-bottom:9px}
.f-links a{font-size:14.5px; color:rgba(255,255,255,.78); transition:color .3s var(--ease)}
.f-links a:hover,
.f-links .current-menu-item > a{color:var(--copper-2)}
.socials{display:flex; gap:9px; flex-wrap:wrap}
.socials a{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); color:rgba(255,255,255,.8); transition:.3s var(--ease);
}
.socials svg{width:16px; height:16px}
.socials a:hover{background:var(--copper); border-color:var(--copper); color:#fff}
.socials a.is-wa:hover{background:#25d366; border-color:#25d366}

.footer-bottom{
  border-top:1px solid var(--rule); padding:20px 0; font-size:13.5px;
  color:rgba(255,255,255,.5);
}
.footer-bottom a{color:var(--copper-2)}

/* ==========================================================================
   19. FLOATING ACTIONS
   ========================================================================== */
.float-wa{
  position:fixed; bottom:26px; inset-inline-start:24px; z-index:850;
  width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.4); transition:transform .3s var(--ease);
}
.float-wa svg{width:28px; height:28px}
.float-wa:hover{transform:scale(1.08)}
.to-top{
  position:fixed; bottom:26px; inset-inline-end:24px; z-index:850;
  width:46px; height:46px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:.3s var(--ease);
}
.to-top svg{width:19px; height:19px}
.to-top.show{opacity:1; visibility:visible}
.to-top:hover{background:var(--coral)}
.mobile-bar{display:none}

/* ==========================================================================
   20. WP UTILITIES
   ========================================================================== */
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.screen-reader-text:focus{
  position:fixed!important; top:14px; inset-inline-end:14px; width:auto; height:auto;
  clip:auto; background:var(--accent); color:#fff; padding:12px 22px; z-index:2000;
}
.search-form{display:flex; gap:10px; max-width:560px; margin:0 auto}
.search-form input[type="search"]{
  flex:1; border:1px solid var(--rule); background:var(--paper); color:var(--heading);
  padding:14px 18px; font-family:var(--f-body); font-size:15px; min-height:54px;
}
.search-form input[type="search"]:focus{outline:none; border-color:var(--accent)}
.search-form .btn{padding:14px 28px}
.empty-state .search-form{margin-top:26px}

.widget{margin-bottom:34px}
.widget-title{font-size:19px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--accent)}
.widget ul li{padding:8px 0; border-bottom:1px solid var(--rule)}
.widget ul li a:hover{color:var(--accent)}

/* ==========================================================================
   21. ANIMATION
   ========================================================================== */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ==========================================================================
   22. RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .pkg-grid{column-gap:34px}
}

@media (max-width:1024px){
  .pkg-grid{grid-template-columns:repeat(2,1fr); column-gap:40px}
  .about-grid,.split-grid,.tst-grid,.menu-block{grid-template-columns:1fr}
  .split-alt .split-media,.split-alt .split-copy,
  .menu-block.img-end .oval-media,.menu-block.img-end .menu-list{order:0}
  .oval-media{max-width:460px; margin-inline:auto}
  .tst-illus{max-width:420px; margin-inline:auto}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .logos-strip{grid-template-columns:repeat(3,1fr); gap:22px}
  .job{grid-template-columns:1fr 1fr; row-gap:16px}
  .job-btn{grid-column:1/-1; justify-self:start}
}

@media (max-width:760px){
  :root{--header-h:64px}
  body{font-size:15.5px; line-height:1.9}
  section.hero{height:clamp(360px,74vw,480px)}
  .hero-social{bottom:24px; inset-inline-start:22px; gap:13px}
  .hero-dots{bottom:28px; inset-inline-end:22px}
  .pkg-grid,.blog-grid{grid-template-columns:1fr}
  .feat-grid,.feat-grid-4{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{
    grid-template-columns:repeat(2,1fr); grid-template-rows:none;
    height:auto; gap:10px;
  }
  .g-item{aspect-ratio:4/3.2}
  .g-item:first-child{grid-column:span 2; aspect-ratio:16/10}
  .g-item figcaption{bottom:18px; font-size:15px; padding:9px 18px}
  .about-actions{gap:18px}
  .cta-strip .wrap{flex-direction:column; text-align:center; align-items:center}
  .cta-actions{justify-content:center}
  .cta-actions .btn{flex:1 1 100%}
  .job{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr; gap:32px}
  .logos-strip{grid-template-columns:repeat(2,1fr)}
  .entry-content{font-size:16px}
  /* زر واتساب العائم مخفي على الهاتف — الشريط السفلي الأفقي يغطي نفس الوظيفة */
  .float-wa{display:none}
  .to-top{bottom:76px; inset-inline-end:16px; width:42px; height:42px}
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; inset:auto 0 0 0;
    z-index:860; box-shadow:0 -6px 20px rgba(0,0,0,.2);
  }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:15px 8px; font-weight:500; font-size:15px; color:#fff;
  }
  .mobile-bar svg{width:18px; height:18px}
  .mb-call{background:var(--copper)}
  .mb-wa{background:#25d366}
  .site-footer{padding-bottom:64px}
}

@media (max-width:420px){
  .feat-grid,.feat-grid-4{grid-template-columns:1fr}
  .brand-name{font-size:20px}
}

/* شريط أدوات ووردبريس */
.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  .admin-bar .site-header{top:46px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  .hero-bg{animation:none; transform:none}
  .play-ring{animation:none}
}