/* =========================================================================
 * Services page hero (Arabic) - matches the approved reference banner.
 * v3 2026-10-22: calmer type scale + mobile spacing.
 * Loaded only on page-services.php (AR). Theme tokens from main.css.
 * Image = Media Library ID in option bayan_svcx_hero_image.
 * ====================================================================== */

.page-hero.bxh{
  --bxh-head:94px;
  --bxh-bg:#F4F6F9;
  position:relative;overflow:hidden;
  padding:var(--bxh-head) 0 0;
  background:var(--bxh-bg);
  border-bottom:1px solid var(--line-soft);
}
.bxh-banner{position:relative;overflow:hidden}

.bxh-media{margin:0;overflow:hidden;z-index:0}
.bxh-img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:22% 50%}

.bxh-pattern{
  position:absolute;top:-4%;bottom:-4%;right:-80px;aspect-ratio:328/559;
  background:var(--pattern) center/contain no-repeat;
  opacity:.07;pointer-events:none;z-index:1;
}

.bxh-wrap{position:relative;z-index:2}
.bxh-text{position:relative}

/* ---- Type scale ---- */
.page-hero.bxh .bxh-eyebrow{
  display:flex;width:fit-content;margin:0;gap:.85rem;
  font-size:clamp(.92rem,.95vw,1.05rem);font-weight:700;line-height:1.6;color:var(--emerald);
}
.page-hero.bxh .bxh-eyebrow::before{width:2.75rem;height:2px;background:var(--brass);border-radius:2px}
.page-hero.bxh .bxh-h1{
  margin:.45rem 0 0;max-width:none;
  font-family:"Cairo",var(--font-body);font-weight:800;
  font-size:clamp(2.75rem,3.9vw,4.25rem);line-height:1.25;color:#152E55;
}
.bxh-sub{
  margin:.35rem 0 0;
  font-family:"Cairo",var(--font-body);font-weight:700;
  font-size:clamp(1.15rem,1.3vw,1.5rem);line-height:1.55;color:var(--brass);
}
.bxh-desc{
  margin:.9rem 0 0;max-width:52ch;
  font-size:clamp(.95rem,.92vw,1.04rem);line-height:1.9;color:var(--muted);
}

/* ---- CTA ---- */
.bxh-cta{
  display:inline-flex;align-items:center;gap:.9rem;
  margin-top:1.6rem;
  font-family:"Cairo",var(--font-body);font-weight:700;
  font-size:clamp(.95rem,.95vw,1.05rem);line-height:1.5;color:var(--emerald);text-decoration:none;
}
.bxh-cta-t{
  padding-bottom:.15rem;
  background:linear-gradient(currentColor,currentColor) right bottom/100% 2px no-repeat;
  transition:background-size .45s var(--ease),color .3s;
}
.bxh-arr{width:32px;height:12px;flex:none;overflow:visible;transition:transform .45s var(--ease)}
.bxh-arr path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bxh-cta:hover{color:var(--brass)}
.bxh-cta:hover .bxh-arr{transform:translateX(-7px)}
.bxh-cta:hover .bxh-cta-t{background-size:0% 2px}
.bxh-cta:focus-visible{outline:2px solid var(--brass);outline-offset:6px;border-radius:4px}

/* ---- Desktop: compact banner (v4) ---- */
@media (min-width:1024px){
  .bxh-banner{height:clamp(340px,22vw,430px)}
  .bxh-media{
    position:absolute;left:0;top:0;bottom:0;height:100%;width:min(48%,880px);
    -webkit-mask-image:linear-gradient(to right,#000 70%,transparent 99%);
            mask-image:linear-gradient(to right,#000 70%,transparent 99%);
  }
  .bxh-img{object-position:22% 32%}
  .bxh-wrap{height:100%;display:flex;align-items:center;width:min(1240px,90vw)}
  .bxh-text{width:min(31rem,44%)}
  .page-hero.bxh .bxh-eyebrow{font-size:clamp(.875rem,.78vw,.95rem);gap:.75rem}
  .page-hero.bxh .bxh-eyebrow::before{width:2.4rem}
  .page-hero.bxh .bxh-h1{font-size:clamp(2.3rem,2.75vw,3.25rem);margin-top:.3rem;line-height:1.3}
  .bxh-sub{font-size:clamp(1rem,1vw,1.2rem);margin-top:.2rem;white-space:nowrap}
  .bxh-desc{font-size:clamp(.9rem,.78vw,.95rem);line-height:1.85;margin-top:.7rem}
  .bxh-cta{font-size:clamp(.9rem,.78vw,.95rem);margin-top:1.15rem;gap:.75rem}
  .bxh-arr{width:28px}
  .bxh-pattern{right:-70px}
}
@media (min-width:1024px) and (max-width:1279px){
  .bxh-media{width:50%}
  .bxh-text{width:46%}
  .bxh-sub{white-space:normal;text-wrap:balance}
  .bxh-br{display:none}
  .bxh-pattern{right:-100px}
}
/* ---- Tablet & mobile ---- */
@media (max-width:1023px){
  .bxh-media{
    position:relative;height:clamp(200px,50vw,380px);
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);
  }
  .bxh-img{object-position:30% 55%}
  .bxh-wrap{width:calc(100% - 80px);margin-inline:auto;padding:1.25rem 0 3.5rem}
  .bxh-text{max-width:38rem}
  .page-hero.bxh .bxh-h1{font-size:3.1rem}
  .bxh-sub{font-size:1.3rem;text-wrap:balance}
  .bxh-desc{font-size:1rem}
  .bxh-br{display:none}
  .bxh-pattern{top:auto;bottom:-2%;height:60%;right:-70px;opacity:.05}
}
@media (max-width:640px){
  .page-hero.bxh{--bxh-head:70px}
  .bxh-wrap{width:calc(100% - 48px);padding:1rem 0 2.75rem}
  .page-hero.bxh .bxh-eyebrow{font-size:.9rem}
  .page-hero.bxh .bxh-eyebrow::before{width:2rem}
  .page-hero.bxh .bxh-h1{font-size:clamp(2.3rem,10vw,2.75rem);margin-top:.3rem}
  .bxh-sub{font-size:clamp(1.05rem,4.6vw,1.2rem);margin-top:.25rem}
  .bxh-desc{font-size:.96rem;line-height:1.9;margin-top:.75rem}
  .bxh-cta{margin-top:1.35rem;font-size:.98rem}
  .bxh-pattern{display:none}
}
@media (max-width:380px){
  .bxh-wrap{width:calc(100% - 40px)}
}

/* ---- Motion (only when JS adds .bxh-pre; reduced motion never hides) ---- */
.bxh-pre .bxh-a{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease);
  transition-delay:calc(var(--i,0) * 100ms + 250ms);
}
.bxh-pre .bxh-media{
  -webkit-clip-path:inset(0 0 0 100%);clip-path:inset(0 0 0 100%);
  transition:clip-path 1.6s cubic-bezier(.65,0,.15,1),-webkit-clip-path 1.6s cubic-bezier(.65,0,.15,1);
}
.bxh-pre .bxh-img{transform:scale(1.08);transition:transform 2.4s var(--ease)}
.bxh-pre .bxh-pattern{opacity:0;transition:opacity 1.4s ease .9s}
.bxh-pre.is-in .bxh-a{opacity:1;transform:none}
.bxh-pre.is-in .bxh-media{-webkit-clip-path:inset(0);clip-path:inset(0)}
.bxh-pre.is-in .bxh-img{transform:none}
.bxh-pre.is-in .bxh-pattern{opacity:.07}
.bxh.is-in .bxh-img{animation:bxhBreath 24s ease-in-out 2.6s infinite alternate}
@keyframes bxhBreath{from{transform:scale(1)}to{transform:scale(1.03)}}
@media (max-width:1023px){
  .bxh-pre .bxh-media{-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0)}
  .bxh-pre.is-in .bxh-pattern{opacity:.05}
}
@media (prefers-reduced-motion:reduce){
  .bxh .bxh-a,.bxh .bxh-img{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .bxh .bxh-media{-webkit-clip-path:none!important;clip-path:none!important;transition:none!important}
  .bxh-cta-t,.bxh-arr{transition:none}
}
/* =========================================================================
 * Services page palette (AR) - one cohesive brand system, page-scoped.
 * Navy #1A4279 (primary) / Deep navy #152E55 (headings, footer)
 * Brand blue #2F6FDB (accents, hover) / Neutral #F4F6F9 (surfaces)
 * ====================================================================== */
main.svcx{
  --sx-bg:#F4F6F9; --sx-navy:#1A4279; --sx-deep:#152E55; --sx-blue:#2F6FDB;
  --sx-text:#5D6A80; --sx-line:rgba(26,66,121,.12); --sx-line-soft:rgba(26,66,121,.08);
  background:var(--sx-bg);
}
main.svcx .page-hero.bxh{border-bottom-color:var(--sx-line-soft)}

/* Section heading with brand accent */
main.svcx .svcx-head{position:relative;border-bottom-color:var(--sx-line)}
main.svcx .svcx-head::after{
  content:"";position:absolute;bottom:-1px;inset-inline-start:0;
  width:64px;height:2px;background:var(--sx-blue);border-radius:2px;
}
main.svcx .svcx-head h2{color:var(--sx-deep)}

/* Service cards */
main.svcx .svcx-card{
  background:#fff;border-color:var(--sx-line-soft);
  box-shadow:0 1px 2px rgba(21,46,85,.04);
}
main.svcx .svcx-card-media{background:#E9EEF5}
main.svcx .svcx-card-body::before{height:2px;border-radius:2px;background:var(--sx-blue)}
main.svcx .svcx-card h3{color:var(--sx-deep)}
main.svcx .svcx-card p{color:var(--sx-text)}
main.svcx .svcx-more{color:var(--sx-navy);transition:color .3s}
main.svcx .svcx-card:hover,
main.svcx .svcx-card:focus-visible{
  border-color:rgba(47,111,219,.30);
  box-shadow:0 22px 44px -28px rgba(21,46,85,.32);
}
main.svcx .svcx-card:hover .svcx-more{color:var(--sx-blue)}

/* Closing call: light panel with the Albayan motif (no dark backgrounds) */
main.svcx .svc-cta-card .wrap{
  position:relative;overflow:hidden;isolation:isolate;
  background:#fff;border:1px solid var(--sx-line);
  box-shadow:0 20px 44px -34px rgba(21,46,85,.30);
}
main.svcx .svc-cta-card .wrap::before,
main.svcx .svc-cta-card .wrap::after{
  content:"";position:absolute;z-index:-1;top:-12%;bottom:-12%;aspect-ratio:328/559;
  background:var(--pattern) center/contain no-repeat;pointer-events:none;
}
main.svcx .svc-cta-card .wrap::before{inset-inline-start:-40px;opacity:.08}
main.svcx .svc-cta-card .wrap::after{inset-inline-end:-40px;opacity:.05;transform:scaleX(-1)}
main.svcx .svc-cta-card h2{color:var(--sx-deep)}
main.svcx .svc-cta-card .btn{
  background:var(--sx-navy);color:#fff;
  box-shadow:0 12px 24px -16px rgba(26,66,121,.55);
}
main.svcx .svc-cta-card .btn:hover,
main.svcx .svc-cta-card .btn:focus-visible{
  background:var(--sx-blue);color:#fff;
  box-shadow:0 16px 28px -16px rgba(47,111,219,.55);
}
main.svcx .svc-cta-card .btn:focus-visible{outline:2px solid var(--sx-blue);outline-offset:3px}
@media (max-width:640px){
  main.svcx .svc-cta-card .wrap::after{display:none}
  main.svcx .svc-cta-card .wrap::before{inset-inline-start:-70px;opacity:.06}
}