body.khattab-about-page{background:#fbf5e8;color:#2c1712}
body.khattab-about-page .site-content,body.khattab-about-page .ast-container{max-width:none!important;padding:0!important}
.kh-about{--kh-red:#b5121b;--kh-red2:#7f0d13;--kh-gold:#d8a72e;--kh-cream:#fffaf0;--kh-ink:#2b1712;--kh-muted:#765b4e;max-width:1180px;margin:0 auto;padding:clamp(10px,2vw,24px) 14px 90px;font-family:"Cairo",system-ui,sans-serif}
.kh-about__hero{position:relative;min-height:clamp(270px,42vw,510px);overflow:hidden;border-radius:0 0 34px 34px;background:linear-gradient(135deg,#3b130f,#7b1716);isolation:isolate;box-shadow:0 24px 70px rgba(74,33,22,.16)}
.kh-about__hero::before{content:"";position:absolute;inset:0;background-image:url('../images/optimized/branch-borg-900.webp');background-size:cover;background-position:center 40%;z-index:-2;transform:scale(1.02)}
.kh-about__hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,9,6,.18),rgba(42,13,10,.82) 76%,rgba(61,15,13,.94));z-index:-1}
.kh-about__hero-inner{min-height:inherit;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:48px 20px 34px;color:#fff}
.kh-about__eyebrow{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 15px;border:1px solid rgba(216,167,46,.48);border-radius:999px;background:rgba(255,250,240,.92);color:var(--kh-red);font-size:13px;font-weight:900;box-shadow:0 8px 25px rgba(0,0,0,.08)}
.kh-about__hero h1{margin:12px 0 6px;font-size:clamp(30px,5vw,58px);line-height:1.18;color:#fff;font-weight:900;text-wrap:balance}
.kh-about__hero p{margin:0;max-width:660px;color:#fbe9d3;font-size:clamp(14px,2vw,18px);font-weight:700;line-height:1.9}
.kh-about__logo{width:78px;height:78px;object-fit:contain;margin-top:16px;filter:drop-shadow(0 10px 15px rgba(0,0,0,.24))}
.kh-about__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:-24px auto 42px;position:relative;z-index:3;width:min(880px,94%)}
.kh-about__stat{min-height:125px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:15px;border:1px solid rgba(216,167,46,.25);border-radius:22px;background:rgba(255,250,240,.95);box-shadow:0 16px 38px rgba(73,38,23,.11);backdrop-filter:blur(8px)}
.kh-about__stat-icon{color:var(--kh-red);font-size:19px}.kh-about__stat strong{font-size:clamp(23px,4vw,34px);line-height:1;color:var(--kh-red2);font-weight:900;margin:8px 0}.kh-about__stat small{font-size:12px;font-weight:900;color:var(--kh-muted)}
.kh-about__intro{text-align:center;margin:0 auto 34px}.kh-about__intro h2{margin:10px 0 0;font-size:clamp(27px,4vw,44px);color:var(--kh-ink);font-weight:900}
.kh-about__timeline{position:relative;display:grid;gap:24px;max-width:980px;margin:0 auto}.kh-about__timeline::before{content:"";position:absolute;top:8px;bottom:8px;right:50%;width:2px;background:linear-gradient(var(--kh-gold),var(--kh-red),var(--kh-gold));opacity:.38;transform:translateX(50%)}
.kh-about__event{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:300px;border:1px solid rgba(130,82,46,.13);border-radius:28px;overflow:hidden;background:#fffdf8;box-shadow:0 16px 42px rgba(71,38,23,.08);transform-origin:center}
.kh-about__event:nth-child(even) .kh-about__media{order:2}.kh-about__event:nth-child(even) .kh-about__content{order:1}
.kh-about__media{min-height:300px;background:#eee}.kh-about__media img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:4/3}
.kh-about__content{display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,4vw,40px)}
.kh-about__year{align-self:flex-start;padding:6px 12px;border-radius:999px;background:#fdf0d1;color:var(--kh-red);font-weight:900;font-size:13px}.kh-about__content h3{margin:12px 0 8px;color:var(--kh-red2);font-size:clamp(22px,3vw,31px);font-weight:900}.kh-about__content p{margin:0;color:#533c31;font-size:14px;line-height:2;font-weight:700;text-align:right}
.kh-about__cta{display:flex;gap:12px;justify-content:center;margin:38px auto 0}.kh-about__cta a{display:inline-flex;align-items:center;justify-content:center;min-width:150px;min-height:48px;padding:10px 22px;border-radius:16px;background:linear-gradient(135deg,var(--kh-red),var(--kh-red2));color:#fff!important;text-decoration:none!important;font-weight:900;box-shadow:0 12px 26px rgba(181,18,27,.18);transition:transform .18s ease,box-shadow .18s ease}.kh-about__cta a:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(181,18,27,.22)}.kh-about__cta .is-outline{background:#fffaf0;color:var(--kh-red2)!important;border:1px solid rgba(181,18,27,.18);box-shadow:none}
.kh-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}.kh-reveal.is-visible{opacity:1;transform:none}
@media(max-width:720px){.kh-about{padding-inline:8px}.kh-about__hero{border-radius:0 0 26px 26px;min-height:330px}.kh-about__hero-inner{padding-inline:16px}.kh-about__hero h1{font-size:clamp(28px,9vw,40px);white-space:nowrap}.kh-about__hero p{font-size:13px}.kh-about__stats{gap:7px;margin-top:-18px}.kh-about__stat{min-height:100px;padding:10px 6px;border-radius:18px}.kh-about__stat small{font-size:10px}.kh-about__timeline{gap:16px}.kh-about__timeline::before{display:none}.kh-about__event{grid-template-columns:1fr;min-height:0;border-radius:22px}.kh-about__event:nth-child(even) .kh-about__media,.kh-about__event:nth-child(even) .kh-about__content{order:initial}.kh-about__media{min-height:0}.kh-about__media img{aspect-ratio:16/10}.kh-about__content{padding:18px}.kh-about__content p{font-size:13px;line-height:1.9}.kh-about__cta{flex-direction:column;align-items:stretch}.kh-about__cta a{width:100%}}
@media(max-width:390px){.kh-about__hero h1{font-size:clamp(24px,8vw,31px)}.kh-about__stats{width:98%}.kh-about__stat strong{font-size:21px}.kh-about__stat-icon{font-size:16px}}
@media(prefers-reduced-motion:reduce){.kh-reveal{opacity:1!important;transform:none!important;transition:none!important}.kh-about__cta a{transition:none!important}}
/* vNext.8: the WhatsApp panel closes via FAB, outside click or Escape; no X button. */
.khattab-wa__close{display:none!important}


/* =========================================================
 * vNext.9 — premium About hero refinement
 * ========================================================= */
.kh-about__hero{
  min-height:clamp(330px,48vw,580px);
  border-radius:0 0 42px 42px;
  background:#3a120f;
  box-shadow:0 28px 80px rgba(74,33,22,.18);
}
.kh-about__hero::before{
  background-position:center 42%;
  filter:saturate(1.03) contrast(1.03);
}
.kh-about__hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(45deg,transparent 43%,rgba(242,198,83,.7) 43% 47%,transparent 47% 53%,rgba(242,198,83,.7) 53% 57%,transparent 57%),
    linear-gradient(-45deg,transparent 43%,rgba(242,198,83,.7) 43% 47%,transparent 47% 53%,rgba(242,198,83,.7) 53% 57%,transparent 57%);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);
}
.kh-about__hero-overlay{
  background:
    radial-gradient(circle at 50% 18%,rgba(207,157,45,.18),transparent 34%),
    linear-gradient(180deg,rgba(24,9,6,.12),rgba(42,13,10,.68) 60%,rgba(61,15,13,.95));
}
.kh-about__hero-inner{padding:64px 20px 42px}
.kh-about__eyebrow{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.12)}
.kh-about__hero h1{text-shadow:0 4px 22px rgba(0,0,0,.34);letter-spacing:-.03em}
.kh-about__hero p{max-width:760px;text-shadow:0 2px 14px rgba(0,0,0,.28)}
.kh-about__logo{width:88px;height:88px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.32))}
@media(max-width:720px){
  .kh-about__hero{min-height:390px;border-radius:0 0 30px 30px}
  .kh-about__hero::after{background-size:52px 52px;opacity:.13}
  .kh-about__hero-inner{padding:52px 14px 34px}
}

/* vNext.10 — hard integration guard for Elementor/Astra wrappers. */
body.khattab-about-page .elementor-widget-shortcode,
body.khattab-about-page .elementor-shortcode{width:100%!important;max-width:none!important;}
body.khattab-about-page .kh-about{display:block!important;width:min(1180px,100%)!important;visibility:visible!important;opacity:1;}
body.khattab-about-page .kh-about__hero{background-color:#3a120f!important;}
