/* =========================================================
   BAYAN CONSULTING /consulting/ (AR) v5 "The Bayan Thread"
   Scoped to .bc5. Flat light surfaces only: white, paper, tint.
   No gradients, no dark sections. The homepage hero pattern
   (assets/img/bayan-a7218342db.svg) is the recurring motif.
   Motion lives in consulting-v5.js (GSAP + ScrollTrigger).
   Everything is visible without JS; html.b5-anim exists only
   while motion can run (set in <head>, failsafe after 4s).
   ========================================================= */
.bc5{
  --ink:#0F2140; --text:#1B2A44; --muted:#5A6880; --soft:#97A2B4;
  --brand:#1A4279; --blue:#206ACA; --blue-2:#2F6FDB;
  --tint:#EAF0F9; --tint-2:#F3F6FB; --paper:#F5F6F8; --white:#fff;
  --line:rgba(15,33,64,.1); --line-2:rgba(15,33,64,.2);
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --head:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic","Cairo",system-ui,sans-serif;
  --pattern:url("https://albayan-sa.com/wp-content/themes/bayan-child/assets/img/bayan-a7218342db.svg");
  --hdr:71px; --gut:32px;
  font-family:var(--body); color:var(--text); background:var(--white);
  font-size:18px; line-height:1.85; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.bc5 *,.bc5 *::before,.bc5 *::after{box-sizing:border-box}
:where(.bc5) :is(h1,h2,h3){font-family:var(--head);color:var(--ink);margin:0;font-weight:800;letter-spacing:0}
:where(.bc5) p{margin:0}
:where(.bc5) :is(ul,ol){margin:0;padding:0;list-style:none}
:where(.bc5) :is(dl,dd,figure){margin:0}
.bc5 a{color:inherit;text-decoration:none}
.bc5 img{display:block;max-width:100%;height:auto}
:where(.bc5) svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bc5 :focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
.b5-wrap{width:min(1280px,100% - var(--gut) * 2);margin-inline:auto}
.b5-sec{padding-block:clamp(88px,10vw,156px);position:relative}
.b5-blue{color:var(--blue)}

/* ---------- Type ---------- */
.b5-eyebrow{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--head);font-weight:700;font-size:1.02rem;color:var(--blue);margin-bottom:1.15rem;line-height:1.4}
.b5-eyebrow i{display:block;width:40px;height:2px;background:currentColor;border-radius:2px;transform-origin:right center}
.b5-eyebrow--center{justify-content:center}
.b5-eyebrow--center i:last-child{transform-origin:left center}
.b5-h2{font-size:clamp(2rem,1.3rem + 2vw,3.05rem);line-height:1.35;text-wrap:balance}
.b5-sub{color:var(--muted);font-size:clamp(1.06rem,1rem + .3vw,1.22rem);line-height:1.95;max-width:54ch}
.b5-ln{display:block;overflow:hidden;padding-block:.06em .2em;margin-block:-.06em -.2em}
.b5-ln__i{display:block}
.b5-wm{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.06em .22em;margin-block:-.06em -.22em}
.b5-wm>span{display:inline-block}

/* ---------- Buttons ---------- */
.b5-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.85rem;min-height:58px;padding:.8rem 1.15rem .8rem 1.9rem;padding-inline:1.9rem 1rem;border-radius:999px;font-family:var(--head);font-weight:700;font-size:1.06rem;line-height:1.2;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),background-color .4s var(--ease)}
.b5-btn>span{position:relative}
.b5-btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .6s var(--ease)}
.b5-btn:hover::before,.b5-btn:focus-visible::before{transform:none}
.b5-btn__ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:1.05rem;overflow:hidden;transition:background-color .4s var(--ease),color .4s var(--ease)}
.b5-btn__ico svg{transition:transform .5s var(--ease)}
.b5-btn:hover .b5-btn__ico svg{animation:b5Nudge .6s var(--ease)}
@keyframes b5Nudge{0%{transform:none}45%{transform:translateX(-140%)}46%{transform:translateX(140%)}100%{transform:none}}
.bc5 .b5-btn--primary{background:var(--blue);color:#fff;box-shadow:0 18px 34px -18px rgba(32,106,202,.85)}
.bc5 .b5-btn--primary::before{background:var(--brand)}
.bc5 .b5-btn--primary .b5-btn__ico{background:#fff;color:var(--blue)}
.bc5 .b5-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);padding-inline:1.9rem}
.bc5 .b5-btn--ghost:has(.b5-btn__ico){padding-inline:1.9rem 1rem}
.bc5 .b5-btn--ghost::before{background:var(--tint)}
.bc5 .b5-btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.bc5 .b5-btn--ghost .b5-btn__ico{background:var(--tint);color:var(--brand)}
.bc5 .b5-btn--ghost:hover .b5-btn__ico{background:var(--white)}
.b5-btn--lg{min-height:64px;font-size:1.12rem}
.b5-wa{font-size:1.3rem}
.b5-link{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--head);font-weight:700;color:var(--blue);font-size:1.05rem;position:relative;padding-bottom:5px;white-space:nowrap}
.b5-link::after{content:"";position:absolute;bottom:0;inset-inline:0;height:1.5px;background:currentColor;transform:scaleX(.3);transform-origin:right center;transition:transform .6s var(--ease)}
.b5-link:hover::after{transform:scaleX(1)}
.b5-link svg{transition:transform .5s var(--ease)}
.b5-link:hover svg{transform:translateX(-5px)}

/* ---------- Brand pattern (exact homepage SVG) ---------- */
.b5-brandpat{position:absolute;pointer-events:none;user-select:none;max-width:none;height:auto}
.b5-flip{scale:-1 1}
/* faint background pair, same behaviour as the homepage hero (.bv-pat) */
.b5-bgpats{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.b5-bgpat{position:absolute;display:block;background:var(--pattern) center/contain no-repeat;opacity:.07;rotate:-9deg;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  animation:b5PatSway 16s ease-in-out infinite}
.b5-bgpat.b5-flip{animation-name:b5PatSwayF}
.b5-bgpat--a{top:-40px;inset-inline-start:-70px;width:360px;height:614px}
.b5-bgpat--b{bottom:-16%;inset-inline-end:-90px;width:320px;height:546px;animation-delay:-8s;animation-duration:22s}
@keyframes b5PatSway{0%,100%{rotate:-9deg}50%{rotate:-3deg}}
@keyframes b5PatSwayF{0%,100%{rotate:9deg}50%{rotate:3deg}}

/* =================== HERO =================== */
.b5-hero{position:relative;background:var(--white);padding-top:calc(var(--hdr) + clamp(36px,5vw,72px));padding-bottom:28px;overflow:hidden}
.b5-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,6vw,96px);align-items:center;min-height:min(calc(100svh - var(--hdr) - 150px),720px)}
.b5-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.92rem;color:var(--soft);margin-bottom:1.6rem}
.b5-crumb a{transition:color .3s}
.b5-crumb a:hover{color:var(--blue)}
.b5-crumb [aria-current]{color:var(--muted)}
.b5-kicker{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--head);font-weight:700;color:var(--brand);font-size:1.1rem;margin-bottom:1.3rem}
.b5-kicker i{display:block;width:44px;height:2px;background:var(--blue);border-radius:2px;transform-origin:right center}
.b5-h1{font-size:clamp(2.45rem,1.3rem + 3.3vw,4.2rem);line-height:1.28;font-weight:800}
@media (min-width:1025px){.b5-h1{font-size:min(3.7rem,3.85vw)}.b5-h1 .b5-ln__i{white-space:nowrap}}
.b5-mark{position:relative;display:inline-block;white-space:nowrap}
.bc5 .b5-mark__svg{position:absolute;inset-inline:-2%;bottom:-.08em;width:104%;height:.28em;stroke:var(--blue);stroke-width:5;opacity:.55;overflow:visible}
.b5-mark__svg path{stroke-dasharray:320;stroke-dashoffset:0}
.b5-lead{margin-top:1.7rem;font-size:clamp(1.08rem,1rem + .35vw,1.26rem);line-height:2;color:var(--muted);max-width:56ch}
.b5-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.3rem}

.b5-hero__visual{position:relative;justify-self:end;width:min(100%,500px);padding:28px 0 40px}
.b5-plate{position:absolute;inset:auto 0 0 auto;inset-inline-start:auto;inset-inline-end:-28px;bottom:0;width:78%;height:78%;background:var(--tint);border-radius:999px 999px 28px 28px;z-index:0}
.b5-arch{position:relative;z-index:1;border-radius:999px 999px 28px 28px;overflow:hidden;aspect-ratio:4/4.75;background:var(--tint);box-shadow:0 40px 80px -48px rgba(15,33,64,.45)}
.b5-arch__in{position:absolute;inset:0}
.b5-arch__in img{width:100%;height:100%;object-fit:cover;object-position:52% 50%}
.b5-brandpat--hero{z-index:2;width:clamp(150px,15vw,210px);top:-6px;inset-inline-start:-36px;opacity:.92;filter:drop-shadow(0 18px 24px rgba(255,255,255,.7))}
.b5-since{position:absolute;z-index:3;top:18%;inset-inline-end:-34px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:14px 20px;box-shadow:0 24px 50px -28px rgba(15,33,64,.35);line-height:1.3}
.b5-since small{display:block;font-size:.78rem;color:var(--muted)}
.b5-since b{font-family:var(--head);font-size:1.45rem;color:var(--brand)}
.b5-chip{position:absolute;z-index:3;bottom:6px;inset-inline-start:-48px;width:min(290px,72%);background:var(--white);border:1px solid var(--line);border-radius:20px;padding:16px 18px 18px;box-shadow:0 28px 60px -30px rgba(15,33,64,.4)}
.b5-chip b{display:block;font-family:var(--head);font-size:.98rem;color:var(--ink);margin-bottom:12px}
.b5-chip ol{display:flex;justify-content:space-between;gap:6px;font-size:.78rem;color:var(--muted);counter-reset:s}
.b5-chip li{position:relative;padding-top:18px}
.b5-chip li::before{content:"";position:absolute;top:0;inset-inline-start:0;width:9px;height:9px;border-radius:50%;background:var(--white);border:2px solid var(--blue)}
.b5-chip li:nth-child(-n+2)::before{background:var(--blue)}
.b5-chip__bar{position:absolute;top:57px;inset-inline:22px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;display:none}
.b5-chip__bar i{display:block;height:100%;width:45%;background:var(--blue);margin-inline-start:0;transform-origin:right center}

.b5-hero__foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--line)}
.b5-facts{display:flex;flex-wrap:wrap;gap:8px 34px;font-size:.98rem;color:var(--muted);font-weight:500}
.b5-facts li{display:flex;align-items:center;gap:10px}
.b5-facts i{display:block;width:8px;height:8px;background:var(--blue);transform:rotate(45deg);border-radius:2px}
.b5-scroll{display:inline-flex;align-items:center;gap:12px;font-size:.92rem;color:var(--muted);transition:color .3s}
.b5-scroll:hover{color:var(--blue)}
.b5-scroll i{position:relative;display:block;width:22px;height:36px;border:1.5px solid var(--line-2);border-radius:20px}
.b5-scroll b{position:absolute;top:7px;left:50%;width:3px;height:7px;margin-left:-1.5px;border-radius:3px;background:var(--blue);animation:b5Wheel 1.9s var(--ease) infinite}
@keyframes b5Wheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}80%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* =================== LOGOS =================== */
.b5-logos{background:var(--paper);border-block:1px solid var(--line)}
.b5-logos__in{display:flex;align-items:center;gap:40px;padding-block:30px}
.b5-logos__title{flex:none;max-width:15ch;font-family:var(--head);font-weight:700;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.b5-marquee{position:relative;flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.b5-marquee__track{display:flex;align-items:center;gap:64px;width:max-content;padding-inline:20px}
.b5-marquee.is-run .b5-marquee__track{animation:b5Marq 38s linear infinite}
.b5-marquee:hover .b5-marquee__track{animation-play-state:paused}
@keyframes b5Marq{to{transform:translateX(50%)}}
.b5-marquee img{height:58px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .5s,opacity .5s}
.b5-marquee li:hover img{filter:none;opacity:1}

/* =================== SERVICES =================== */
.b5-svcs__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px 80px;align-items:end;margin-bottom:clamp(44px,5vw,72px)}
.b5-svcs__intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.b5-count{display:flex;align-items:center;gap:14px;flex:none}
.b5-count b{font-family:var(--head);font-weight:800;font-size:clamp(3.4rem,2.4rem + 3vw,5.4rem);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--blue)}
.b5-count span{font-size:.92rem;color:var(--muted);line-height:1.5;max-width:9ch}

.b5-index{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:start}
.b5-index__list{border-top:1px solid var(--line-2);counter-reset:r}
.b5-row{position:relative;border-bottom:1px solid var(--line)}
.b5-row::after{content:"";position:absolute;bottom:-1px;inset-inline:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right center;transition:transform .7s var(--ease)}
.b5-row.is-on::after{transform:scaleX(1)}
.b5-row__link{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) 52px;align-items:center;gap:22px;padding:28px 18px;isolation:isolate}
.b5-row__link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tint-2);transform:scaleX(0);transform-origin:right center;transition:transform .7s var(--ease)}
.b5-row.is-on .b5-row__link::before{transform:scaleX(1)}
.b5-row__n{font-family:var(--head);font-weight:700;font-size:1rem;color:var(--soft);transition:color .4s}
.b5-row__main{display:block;transition:transform .7s var(--ease)}
.b5-row__t{font-size:clamp(1.38rem,1.05rem + 1.05vw,2rem);line-height:1.4;color:var(--ink);transition:color .4s}
.b5-row__d{display:block;margin-top:.45rem;font-size:1.02rem;line-height:1.85;color:var(--muted);max-width:60ch}
.b5-row__go{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink);font-size:1.15rem;transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),transform .7s var(--ease)}
.b5-row.is-on .b5-row__n{color:var(--blue)}
.b5-row.is-on .b5-row__t{color:var(--brand)}
.b5-row.is-on .b5-row__main{transform:translateX(-10px)}
.b5-row.is-on .b5-row__go{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(45deg) scale(1.04)}
.b5-row__x{display:none}
/* details shown inline when the side panel is not in use */
.b5-row__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--tint);color:var(--brand);font-size:1.3rem}
.b5-tags{display:flex;flex-wrap:wrap;gap:8px}
.b5-tags li{font-size:.9rem;line-height:1.5;color:var(--brand);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.b5-row__cta{display:none}

.b5-panel{position:sticky;top:calc(var(--hdr) + 28px)}
.b5-panel__card{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:30px 32px 32px;min-height:500px;display:flex;flex-direction:column}
.b5-panel__pat{position:absolute;width:170px;bottom:-60px;inset-inline-end:-30px;opacity:.12;rotate:-9deg;pointer-events:none}
.b5-panel__top{display:flex;align-items:flex-start;justify-content:space-between}
.b5-panel__n{font-family:var(--head);font-weight:800;font-size:7.4rem;line-height:.82;color:transparent;-webkit-text-stroke:1.5px var(--blue);letter-spacing:-.02em}
.b5-panel__ico{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--white);border:1px solid var(--line);color:var(--blue);font-size:1.7rem}
.b5-panel__body{margin-top:auto;padding-top:34px}
.b5-panel__k{font-size:.88rem;font-weight:600;color:var(--blue);margin-bottom:.4rem}
.b5-panel__t{font-family:var(--head);font-weight:800;font-size:1.65rem;line-height:1.4;color:var(--ink);min-height:2.8em}
.b5-panel__tags{margin-top:18px;display:grid;gap:10px}
.b5-panel__tags li{display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;line-height:1.65;color:var(--text);padding-bottom:10px;border-bottom:1px dashed var(--line-2)}
.b5-panel__tags li:last-child{border-bottom:0;padding-bottom:0}
.b5-panel__tags li::before{content:"";flex:none;width:8px;height:8px;margin-top:.62em;background:var(--blue);border-radius:2px;transform:rotate(45deg)}
.b5-panel__go{margin-top:26px;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;font-family:var(--head);font-weight:700;color:var(--brand)}
.b5-panel__go i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff}
.b5-panel__prog{position:absolute;bottom:0;inset-inline:0;height:3px;background:var(--line)}
.b5-panel__prog i{display:block;height:100%;width:14.2857%;background:var(--blue);transition:margin .7s var(--ease);margin-inline-start:0}

.b5-help{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:clamp(40px,5vw,64px);padding:28px 34px;border:1px solid var(--line);border-radius:22px;background:var(--white);position:relative;overflow:hidden}
.b5-help::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--blue)}
.b5-help h3{font-size:1.32rem;line-height:1.5}
.b5-help p{color:var(--muted);font-size:1.02rem;margin-top:.25rem}
.b5-related{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:28px;font-size:.98rem;color:var(--muted)}
.b5-related span{font-weight:600;color:var(--ink)}
.b5-related a{color:var(--blue);font-weight:600;border-bottom:1px solid rgba(32,106,202,.3);transition:border-color .3s}
.b5-related a:hover{border-color:var(--blue)}

/* =================== METHOD =================== */
.b5-method{position:relative;background:var(--paper);border-block:1px solid var(--line);overflow:hidden}
.b5-method__pin{position:relative;padding-block:clamp(80px,7vw,110px)}
.b5-brandpat--method{width:240px;top:50%;inset-inline-end:-70px;translate:0 -50%;opacity:.08;rotate:9deg}
.b5-method__head{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px 80px;align-items:end;margin-bottom:clamp(48px,6vw,86px)}
.b5-method__aside{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.b5-method__ctr{display:flex;align-items:baseline;gap:8px;font-family:var(--head);font-weight:800;color:var(--soft);font-size:1.2rem;flex:none}
.b5-method__ctr b{font-size:clamp(3.2rem,2.2rem + 3vw,5rem);line-height:1;color:var(--blue)}

.b5-proc{position:relative}
.bc5 .b5-proc__svg{display:block;width:100%;height:120px;overflow:visible}
.b5-proc__base,.b5-proc__draw{fill:none;stroke-linecap:round}
.b5-proc__base{stroke:var(--line-2);stroke-width:2;stroke-dasharray:2 9}
.b5-proc__draw{stroke:var(--blue);stroke-width:3}
.b5-proc__rail{display:none}
.bc5 .b5-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:-120px}
.b5-step{position:relative;padding-inline-end:36px}
.b5-step__node{position:relative;display:grid;place-items:center;width:34px;height:34px;margin-top:43px;margin-inline-start:4px;border-radius:50%;background:var(--white);border:2px solid var(--blue);z-index:1}
.b5-step__node i{width:10px;height:10px;border-radius:50%;background:var(--blue);transition:transform .5s var(--ease)}
.b5-step__n{display:block;margin-top:44px;font-family:var(--head);font-weight:800;font-size:3.6rem;line-height:1;color:var(--blue);transition:color .5s}
.b5-step h3{margin-top:14px;font-size:clamp(1.3rem,1.05rem + .6vw,1.6rem);line-height:1.45;transition:color .5s}
.b5-step>p:not(.b5-step__out){margin-top:10px;font-size:1.02rem;line-height:1.9;color:var(--muted);transition:color .5s}
.b5-step__out{margin-top:20px;display:flex;flex-direction:column;gap:2px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px 18px;font-size:.98rem;line-height:1.65;color:var(--ink);font-weight:600;transition:border-color .5s,box-shadow .5s}
.b5-step__out b{font-size:.8rem;color:var(--blue);font-weight:700}


/* method live states (JS adds .is-live; without it every stage is fully shown) */
.b5-method.is-live .b5-step__node i{transform:scale(0)}
.b5-method.is-live .b5-step__n{color:#C9D1DD}
.b5-method.is-live .b5-step h3{color:#8C97AA}
.b5-method.is-live .b5-step>p:not(.b5-step__out){color:#A3ADBD}
.b5-method.is-live .b5-step__out{opacity:.55}
.b5-method.is-live .b5-step__node{border-color:#C9D1DD;transition:border-color .5s,transform .6s var(--ease)}
.b5-method.is-live .b5-step.is-on .b5-step__node{border-color:var(--blue)}
.b5-method.is-live .b5-step.is-on .b5-step__node i{transform:scale(1)}
.b5-method.is-live .b5-step.is-on .b5-step__n{color:var(--blue)}
.b5-method.is-live .b5-step.is-on h3{color:var(--ink)}
.b5-method.is-live .b5-step.is-on>p:not(.b5-step__out){color:var(--muted)}
.b5-method.is-live .b5-step.is-on .b5-step__out{opacity:1}
.b5-method.is-live .b5-step.is-cur .b5-step__node{transform:scale(1.18);box-shadow:0 0 0 8px rgba(32,106,202,.12)}
.b5-method.is-live .b5-step.is-cur .b5-step__out{border-color:rgba(32,106,202,.45);box-shadow:0 18px 40px -26px rgba(32,106,202,.55)}
.b5-step__out{transition:opacity .5s,border-color .5s,box-shadow .5s}

/* =================== WHY =================== */
.b5-why__top{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:32px 80px;align-items:end}
.b5-statement{font-family:var(--head);font-weight:600;font-size:clamp(1.3rem,1rem + 1.1vw,1.95rem);line-height:1.75;color:var(--ink)}
.b5-w{transition:color .2s}
.b5-proof{margin-top:clamp(56px,6vw,90px)}
.b5-proof dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.b5-stat{position:relative;padding:34px 28px 30px;display:flex;flex-direction:column;gap:10px}
.b5-stat+.b5-stat{border-inline-start:1px solid var(--line)}
.b5-stat dd{display:flex;align-items:flex-start;justify-content:flex-end;gap:2px;font-family:var(--head);font-weight:800;font-size:clamp(3.2rem,2rem + 3.6vw,5.8rem);line-height:1;color:var(--brand);direction:ltr}
.b5-stat dd sup{font-size:.42em;color:var(--blue);top:0;margin-top:.12em;vertical-align:top}
.b5-stat dt{font-size:1.02rem;color:var(--muted);line-height:1.6}
.b5-proof__src{margin-top:12px;font-size:.82rem;color:var(--soft)}

.b5-why__body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:center;margin-top:clamp(64px,7vw,110px)}
.b5-why__media{position:relative;padding-inline-end:40px}
.b5-why__frame{position:relative;border-radius:999px 999px 28px 28px;overflow:hidden;aspect-ratio:4/4.9;background:var(--tint);box-shadow:0 40px 80px -50px rgba(15,33,64,.45)}
.b5-why__frame img{width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.b5-brandpat--why{width:150px;bottom:-30px;inset-inline-end:-6px;opacity:.9;z-index:2}
.b5-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.b5-reasons li{position:relative;display:grid;gap:6px;padding:26px 0 28px;border-top:1px solid var(--line)}
.b5-reasons li::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:48px;height:2px;background:var(--blue)}
.b5-reasons__n{font-family:var(--head);font-weight:700;font-size:.92rem;color:var(--blue)}
.b5-reasons b{font-family:var(--head);font-size:1.32rem;line-height:1.5;color:var(--ink)}
.b5-reasons li>span:last-child{font-size:1.02rem;line-height:1.85;color:var(--muted)}

/* =================== FAQ =================== */
.b5-faq{border-top:1px solid var(--line)}
.b5-faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.b5-sticky{position:sticky;top:calc(var(--hdr) + 36px)}
.b5-faq__head .b5-sub{margin-top:1.1rem}
.b5-faq__head .b5-btn{margin-top:1.8rem}
.b5-faq__list{border-top:1px solid var(--line-2)}
.b5-faq details{border-bottom:1px solid var(--line);position:relative}
.b5-faq details::before{content:"";position:absolute;bottom:-1px;inset-inline:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right center;transition:transform .7s var(--ease)}
.b5-faq details[open]::before{transform:scaleX(1)}
.b5-faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:20px;padding:26px 4px;font-family:var(--head);font-weight:700;font-size:clamp(1.12rem,1rem + .45vw,1.36rem);line-height:1.55;color:var(--ink);transition:color .3s}
.b5-faq summary::-webkit-details-marker{display:none}
.b5-faq summary:hover{color:var(--brand)}
.b5-q__n{font-size:.92rem;color:var(--soft);font-weight:700}
.b5-faq details[open] .b5-q__n{color:var(--blue)}
.b5-q__ico{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);transition:background-color .45s var(--ease),border-color .45s var(--ease),transform .6s var(--ease)}
.b5-q__ico::before,.b5-q__ico::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--ink);border-radius:2px;transition:transform .5s var(--ease),background-color .3s}
.b5-q__ico::after{transform:rotate(90deg)}
.b5-faq details[open] .b5-q__ico{background:var(--blue);border-color:var(--blue);transform:rotate(180deg)}
.b5-faq details[open] .b5-q__ico::before,.b5-faq details[open] .b5-q__ico::after{background:#fff}
.b5-faq details[open] .b5-q__ico::after{transform:rotate(0)}
.b5-a{overflow:hidden}
.b5-a p{padding:0 0 28px;padding-inline:4px 64px;font-size:1.06rem;line-height:2;color:var(--muted);max-width:68ch}

/* =================== CTA =================== */
.b5-cta-sec{padding-block:0 clamp(88px,9vw,140px)}
.b5-cta{position:relative;overflow:hidden;isolation:isolate;text-align:center;background:var(--tint-2);border:1px solid var(--line);border-radius:36px;padding:clamp(64px,8vw,120px) clamp(24px,5vw,80px)}
.b5-cta__frame{position:absolute;inset:18px;border:1px dashed rgba(32,106,202,.28);border-radius:26px;pointer-events:none;z-index:-1}
.b5-brandpat--cta1,.b5-brandpat--cta2{z-index:-1;width:clamp(120px,14vw,200px);opacity:.16}
.b5-brandpat--cta1{top:-40px;inset-inline-start:4%;rotate:-9deg}
.b5-brandpat--cta2{bottom:-60px;inset-inline-end:4%;rotate:9deg}
.b5-cta__h{font-size:clamp(1.9rem,1.1rem + 2.6vw,3.3rem);line-height:1.25}
.b5-cta__p{margin:1.3rem auto 0;max-width:46ch;color:var(--muted);font-size:clamp(1.06rem,1rem + .3vw,1.22rem);line-height:1.95}
.b5-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:2.3rem}
.b5-cta__meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;margin-top:1.8rem;font-size:1rem;color:var(--muted);font-weight:600}
.b5-cta__meta a:hover{color:var(--blue)}
.b5-cta__meta span{width:5px;height:5px;border-radius:50%;background:var(--soft)}

/* =================== MOTION GATE =================== */
/* Initial states only while motion runs; JS animates them in. */
html.b5-anim .bc5 [data-a="fade"],html.b5-anim .bc5 [data-a="up"],html.b5-anim .bc5 [data-a="pop"]{opacity:0}
html.b5-anim .bc5 .b5-ln__i{transform:translateY(105%)}
html.b5-anim .bc5 [data-a="kicker"]{opacity:0}
html.b5-anim .bc5 .b5-mark__svg path{stroke-dashoffset:320}
html.b5-anim .bc5 .b5-brandpat--hero{clip-path:inset(0 0 100% 0)}
html.b5-anim .bc5 .b5-hero [data-a="arch"]{clip-path:inset(100% 0 0 0 round 999px 999px 28px 28px)}
html.b5-anim .bc5 .b5-plate{transform:scale(.6);opacity:0}
html.b5-anim .bc5 .b5-hero__foot{opacity:0}

/* =================== RESPONSIVE =================== */
@media (min-width:1101px){
  .b5-row__x{display:none!important}
}
@media (max-width:1100px){
  .b5-index{grid-template-columns:1fr}
  .b5-panel{display:none}
  .b5-row__x{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:0 18px 28px;padding-inline:96px 18px}
  .b5-row__ico{display:none}
  .b5-row.is-on .b5-row__main{transform:none}
}
@media (max-width:1024px){
  .b5-hero__grid{grid-template-columns:1fr;min-height:0;gap:56px}
  .b5-hero__visual{justify-self:center;width:min(100%,520px)}
  .b5-svcs__head,.b5-method__head,.b5-why__top{grid-template-columns:1fr;align-items:start}
  .b5-why__body{grid-template-columns:1fr}
  .b5-why__media{max-width:460px;margin-inline:auto;width:100%}
  .b5-faq__grid{grid-template-columns:1fr}
  .b5-sticky{position:static}
  /* method: vertical rail */
  .bc5 .b5-proc__svg{display:none}
  .b5-proc__rail{display:block;position:absolute;top:8px;bottom:8px;inset-inline-start:16px;width:2px;background:var(--line-2)}
  .b5-proc__rail b{display:block;width:100%;height:100%;background:var(--blue);transform-origin:top center}
  .bc5 .b5-steps{grid-template-columns:1fr;gap:44px;margin-top:0}
  .b5-step{padding-inline:64px 0}
  .b5-step .b5-step__node{position:absolute;top:2px;inset-inline-start:0;margin:0}
  .b5-step__n{margin-top:0;font-size:2.6rem}
  .b5-step__out{max-width:440px}
  .b5-proof dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b5-stat:nth-child(3){border-inline-start:0}
  .b5-stat:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .bc5{--gut:16px;font-size:17px}
  .b5-hero{padding-top:calc(var(--hdr) + 26px)}
  .b5-crumb{margin-bottom:1.1rem;font-size:.86rem}
  .b5-actions .b5-btn{flex:1 1 100%}
  .b5-hero__visual{padding:20px 0 34px}
  .b5-brandpat--hero{width:110px;inset-inline-start:-10px;top:-4px}
  .b5-plate{inset-inline-end:-12px}
  .b5-since{inset-inline-end:-6px;top:12%;padding:10px 14px}
  .b5-since b{font-size:1.15rem}
  .b5-chip{inset-inline-start:-6px;width:min(250px,78%);bottom:0}
  .b5-hero__foot{flex-direction:column;align-items:flex-start}
  .b5-scroll{display:none}
  .b5-bgpat{display:none}
  .b5-logos__in{flex-direction:column;align-items:flex-start;gap:16px;padding-block:24px}
  .b5-logos__title{max-width:none}
  .b5-marquee{width:100%}
  .b5-marquee img{height:46px}
  .b5-svcs__intro{flex-direction:column;align-items:flex-start;gap:20px}
  .b5-row__link{grid-template-columns:34px minmax(0,1fr) 42px;gap:12px;padding:22px 4px}
  .b5-row__go{width:42px;height:42px;font-size:1rem}
  .b5-row__t{font-size:1.32rem}
  .b5-row__d{font-size:.98rem}
  .b5-row__x{padding:0 4px 24px;padding-inline:46px 4px}
  .b5-tags li{font-size:.84rem;padding:6px 12px}
  .b5-help{flex-direction:column;align-items:flex-start;padding:24px 22px}
  .b5-method__aside{flex-direction:column;align-items:flex-start}
  .b5-method__ctr{display:none}
  .b5-stat{padding:24px 14px 22px}
  .b5-stat dd{font-size:3rem}
  .b5-stat dt{font-size:.92rem}
  .b5-reasons{grid-template-columns:1fr}
  .b5-why__media{padding-inline-end:20px}
  .b5-brandpat--why{width:100px}
  .b5-faq summary{grid-template-columns:minmax(0,1fr) 38px;gap:14px;padding:22px 0}
  .b5-q__ico{width:38px;height:38px}
  .b5-a p{padding:0 0 24px;padding-inline:0 52px;font-size:1rem}
  .b5-cta{border-radius:26px}
  .b5-cta__frame{inset:10px;border-radius:18px}
  .b5-cta__actions .b5-btn{flex:1 1 100%}
}
@media (max-width:380px){
  .b5-row__t{font-size:1.22rem}
  .b5-stat dd{font-size:2.6rem}
}
@media (prefers-reduced-motion:reduce){
  .b5-bgpat,.b5-marquee__track,.b5-scroll b{animation:none!important}
  .bc5 *{transition-duration:.01ms!important}
}
@media print{html.b5-anim .bc5 *{opacity:1!important;transform:none!important;clip-path:none!important}}
@media (max-width:1380px) and (min-width:761px){.b5-since{inset-inline-end:-6px}.b5-chip{inset-inline-start:-24px}.b5-brandpat--hero{inset-inline-start:-18px}}

/* H1: three fixed lines that never break inside, sized to the viewport */
.b5-h1 .b5-ln__i{white-space:nowrap}
@media (max-width:1024px){.b5-h1{font-size:min(3.7rem,calc((100vw - var(--gut) * 2) / 12.6));line-height:1.4}}

/* =================== TYPE SCALE (healthy Arabic sizes) ===================
   Floor: 14px for labels, 16-17px for secondary copy, 17-20px for body. */
.b5-since small{font-size:.875rem}
.b5-chip li{font-size:.875rem}
.b5-chip b{font-size:1.02rem}
.b5-step__out b{font-size:.875rem}
.b5-proof__src{font-size:.875rem}
.b5-panel__k{font-size:.95rem}
.b5-scroll{font-size:.95rem}
.b5-count span{font-size:.95rem}
.b5-reasons__n{font-size:.95rem}
.b5-tags li{font-size:.95rem}
.b5-facts{font-size:1.04rem}
.b5-related{font-size:1.04rem}
.b5-step__out{font-size:1.04rem}
.b5-row__d{font-size:1.08rem}
.b5-step>p:not(.b5-step__out){font-size:1.08rem}
.b5-stat dt{font-size:1.08rem}
.b5-help p{font-size:1.08rem}
.b5-reasons li>span:last-child{font-size:1.08rem}
.b5-a p{font-size:1.12rem}
.b5-logos__title{font-size:1.06rem}
.b5-br{display:inline}
@media (max-width:760px){
  .bc5{font-size:17px}
  .b5-lead{font-size:1.125rem;line-height:1.95}
  .b5-sub,.b5-cta__p{font-size:1.1rem}
  .b5-tags li{font-size:.9rem}
  .b5-row__t{font-size:clamp(1.3rem,1.05rem + 1.3vw,1.45rem)}
  .b5-row__d,.b5-step>p:not(.b5-step__out),.b5-help p,.b5-reasons li>span:last-child{font-size:1.04rem}
  .b5-stat dt{font-size:1rem}
  .b5-faq summary{font-size:1.15rem}
  .b5-a p{font-size:1.06rem}
  .b5-cta__h{font-size:clamp(1.7rem,1.3rem + 2.4vw,2.1rem)}
}
/* Phones: the first H1 line becomes two intentional lines so the
   headline can stay large (about 33-40px) instead of shrinking to fit. */
@media (max-width:480px){
  .b5-br{display:block}
  .b5-h1{font-size:min(2.5rem,calc((100vw - var(--gut) * 2) / 8.7));line-height:1.42}
}
.bc5 .bayan-floating-contact__label{font-size:14px}
.b5-help::before{content:none;display:none}
/* hero brand pattern sits behind the photo, peeking out from its edge */
.bc5 .b5-brandpat--hero{z-index:0;filter:none;opacity:.9;width:clamp(150px,14vw,200px);top:4%;inset-inline-start:-64px}
@media (max-width:1380px) and (min-width:761px){.bc5 .b5-brandpat--hero{inset-inline-start:-48px}}
@media (max-width:760px){.bc5 .b5-brandpat--hero{width:104px;top:0;inset-inline-start:-14px}}
.bc5 .b5-brandpat--hero{width:clamp(180px,16vw,236px);top:-5%;inset-inline-start:-104px}
@media (max-width:1380px) and (min-width:761px){.bc5 .b5-brandpat--hero{inset-inline-start:-72px}}
@media (max-width:1024px) and (min-width:761px){.bc5 .b5-brandpat--hero{inset-inline-start:-96px}}
@media (max-width:760px){.bc5 .b5-brandpat--hero{width:116px;top:-14px;inset-inline-start:-12px}}

/* FAQ heading: larger eyebrow title */
.b5-faq__head .b5-eyebrow{font-size:clamp(2.1rem,1.5rem + 2vw,3.4rem);line-height:1.25;gap:1.1rem;margin-bottom:0}
.b5-faq__head .b5-eyebrow i{width:56px}
.b5-faq__head .b5-btn{margin-top:2rem}


/* FAQ: contact button sits under the heading */
.b5-faq__head .b5-sticky{display:inline-flex;flex-direction:column;align-items:flex-end}
@media (max-width:1024px){.b5-faq__head .b5-sticky{align-items:flex-start}}


/* Hero heading: logo blue, no underline */
.bc5 .b5-h1 .b5-blue{color:#1A4279}
.bc5 .b5-h1 .b5-mark__svg{display:none!important}