/* B3: تحسين التصميم (2026-11-10): هيرو فيديو، نشاطات، علامات VRF، قبل/بعد، شريط الفيديو. Cairo 700 كحد أقصى، مقياس هادئ. */
.hero h1{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.4;max-width:15em}
.hero-sub{max-width:36em}
/* الهيرو: فيديو الرافعة أفقي وأكبر، وعلى الجوال يأتي أولًا قبل العنوان */
.hero-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.hero-photo .hero-vid{aspect-ratio:16/10;max-height:none;border-radius:0 120px 0 0;overflow:hidden;background:var(--navy)}
.hero-vid .vid{width:100%;height:100%;object-fit:cover}
@media (max-width:960px){.hero-in{grid-template-columns:1fr}.hero-photo{order:-1}.hero-photo .hero-vid{aspect-ratio:16/10;max-height:none;border-radius:0 64px 0 0}.hero{padding-top:20px}}
.vid{display:block;background:var(--navy)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;position:relative}
.chips li{font-size:.88rem;font-weight:500;border:1.5px solid rgba(249,249,249,.55);border-radius:999px;padding:1px 12px;line-height:1.7}
.tiles3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles3 .tile{min-height:300px}
@media (max-width:960px){.tiles3{grid-template-columns:1fr}.tiles3 .tile{min-height:0}}

/* علامات VRF */
.brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.brand figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:24px;background:var(--navy)}
.brand picture{display:contents}
.brand img{width:100%;height:100%;object-fit:cover}
.brand h3{font-size:1.25rem;font-weight:700;margin:14px 0 2px;text-align:start}
.brand p{color:var(--navy-70);font-size:1rem;line-height:1.8}
@media (max-width:760px){.brands{grid-template-columns:1fr}.brand figure{aspect-ratio:4/3}}

/* قبل وبعد: مقارنة واحدة كبيرة بتبويبين. «قبل» يمين (بداية القراءة في RTL) و«بعد» يسار. */
.ba-sec{background:var(--light);padding-block:clamp(40px,6vw,72px)}
.ba-sec .h-sec{margin-bottom:14px}
.ba-sec .lead{margin-bottom:18px}
.bax{max-width:980px;margin-inline:auto}
.bax-tabs{display:none;gap:8px;margin-bottom:18px}
.bax.is-js .bax-tabs{display:flex;flex-wrap:wrap}
.bax-tabs button{font:inherit;font-weight:700;min-height:48px;padding:4px 22px;border-radius:999px;border:1.5px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.bax-tabs button:hover{border-color:var(--blue);color:var(--blue)}
.bax-tabs button[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:var(--light)}
.bax-panel[hidden]{display:none}
.bax-h{font-size:1.15rem;font-weight:700;margin:0 0 12px}
.bax.is-js .bax-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bax:not(.is-js) .bax-panel+.bax-panel{margin-top:36px}
.ba,.ba-pair{margin:0}
.ba figcaption,.ba-pair figcaption{margin-top:12px;color:var(--navy-70);font-size:.95rem;line-height:1.8}
.ba-img{position:relative;overflow:hidden;background:var(--navy)}
.ba-img picture{display:contents}
.ba-img img{width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;inset-block-start:12px;inset-inline-start:12px;background:var(--navy);color:var(--light);font-size:.85rem;font-weight:700;line-height:1.5;padding:2px 14px;border-radius:999px;z-index:4;pointer-events:none}
/* الشريحة */
.ba-stage{position:relative;aspect-ratio:var(--r);width:min(100%,calc(50svh * 812 / 648));margin-inline:auto;border-radius:24px;overflow:hidden;background:var(--navy);--ba:50%}
.ba-stage .ba-img{position:absolute;inset:0}
.ba-after .ba-tag{inset-inline-start:auto;inset-inline-end:12px}   /* بعد: يسار */
.ba-ctl,.ba-handle{display:none}
.ba:not(.ba-on) .ba-stage{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;background:none;overflow:visible;width:100%}
.ba:not(.ba-on) .ba-stage .ba-img{position:relative;aspect-ratio:var(--r);border-radius:18px}
.ba-on .ba-before{z-index:2;clip-path:inset(0 0 0 calc(100% - var(--ba)))}   /* RTL: قبل يُكشف من اليمين */
[dir="ltr"] .ba-on .ba-before{clip-path:inset(0 calc(100% - var(--ba)) 0 0)}   /* LTR: Before on the left */
.ba-on .ba-ctl{display:block;position:absolute;inset:0;margin:0;cursor:ew-resize;z-index:5}
.ba-on .ba-ctl input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-on .ba-handle{display:block;position:absolute;inset-block:0;inset-inline-start:var(--ba);width:4px;margin-inline-start:-2px;background:var(--light);z-index:4;pointer-events:none;box-shadow:0 0 0 1px rgba(11,32,51,.4)}
.ba-on .ba-handle::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M20 18l-9 8 9 8M32 18l9 8-9 8' fill='none' stroke='%23F9F9F9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;border:3px solid var(--light);box-shadow:0 2px 10px rgba(11,32,51,.35)}
.ba-stage:focus-within{outline:3px solid var(--blue);outline-offset:3px}
/* الوحدة كاملة: صورتان متجاورتان بالارتفاع نفسه، قبل يمين وبعد يسار */
.ba-pair-in{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,calc(50svh * 2 * .75));margin-inline:auto}
.ba-pair-in .ba-img{aspect-ratio:3/4;border-radius:20px}
.ba-pair-in .ba-img:last-child .ba-tag{inset-inline-start:auto;inset-inline-end:12px}
.ba-pair figcaption{text-align:center}
@media (max-width:760px){.ba-tag{font-size:.8rem;padding:1px 12px}}

/* شاهد شغلنا */
.watch{background:var(--navy);color:var(--light)}
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.vids figure{margin:0}
.vids .vid{width:100%;height:auto;border-radius:24px}
.vids figcaption{margin-top:10px;color:var(--light-75);font-size:1rem}
@media (max-width:760px){.vids{grid-template-columns:1fr}.vids .vid{max-height:70svh;object-fit:cover}}
.pd-video{margin-bottom:18px;max-width:360px}.pd-video .vid{width:100%;height:auto;border-radius:20px}

/* من نحن/فريق: صور رأسية */
.photo-about img{object-position:center 35%}
.photo-team img{object-position:center 28%}
.pcard-fig img{object-position:center 40%}
@media (prefers-reduced-motion:reduce){.hero-vid .vid{object-fit:cover}}

/* LTR (English): انعكاس الزخارف الفيزيائية */
[dir="ltr"] .hero-sym{left:auto;right:-9%}
[dir="ltr"] .tile-sym{left:auto;right:-6%}
[dir="ltr"] .hero-photo .photo,[dir="ltr"] .hero-photo .hero-vid{border-radius:120px 0 0 0}
@media (max-width:960px){[dir="ltr"] .hero-photo .photo,[dir="ltr"] .hero-photo .hero-vid{border-radius:64px 0 0 0}}
[dir="ltr"] .ba-handle::after{margin:-26px 0 0 -26px}
