/* Reflector Media — shared styles for every page.
   Light studio: white ground, the logo's magenta and sky blue, its orange dotted arc as
   the recurring ornament. Medium, elegant headings; the photos carry the energy.
   One committed light look. */
:root{
  --bg:#ffffff; --tint:#f6f7fb; --card:#ffffff; --ink:#1e1b29; --soft:#666377; --line:#ebe9f1;
  --magenta:#e3007c; --magenta-ink:#b80065; --magenta-soft:#fde6f2; --sky:#00a8e8; --sky-ink:#0092d0; --sky-text:#007db0; --sky-soft:#e3f5fd; --orange:#f39200;
  --bar:rgb(255 255 255 / .9); --wa:#15803d; --faint:var(--line);
  --spectrum:linear-gradient(92deg,var(--magenta),var(--sky));
  --shadow:0 24px 50px -24px rgb(40 20 70 / .28);
  --display:"Noto Kufi Arabic","Urbanist",system-ui,sans-serif;
  --latin:"Urbanist","Noto Kufi Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;background:var(--bg)}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--bg)}
a{color:inherit}
img{display:block;max-width:100%}
button{touch-action:manipulation;font-family:inherit}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.35;text-wrap:balance;font-weight:600}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{font-family:var(--latin);line-height:1.15;font-weight:700}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:#fff;padding:8px 14px;z-index:90;border-radius:8px}
.skip:focus{top:12px}
.pink,.grad{color:var(--magenta)} .blue{color:var(--sky-ink)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;color:var(--soft);font-weight:500}
.eyebrow::before{content:"";width:34px;height:6px;background:radial-gradient(circle,var(--orange) 2.2px,transparent 2.6px) 0 50%/8.5px 6px repeat-x}

/* the logo's dotted arc, used as a quiet ornament */
.dots-arc{position:absolute;pointer-events:none;width:220px;height:116px;opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 116'%3E%3Cpath d='M8 110 A102 102 0 0 1 212 110' fill='none' stroke='%23f39200' stroke-width='7' stroke-linecap='round' stroke-dasharray='0 14'/%3E%3C/svg%3E") center/contain no-repeat}

/* header */
header.top{position:fixed;inset:0 0 auto;top:env(safe-area-inset-top,0px);z-index:60;transition:background-color .3s,box-shadow .3s}
header.top.scrolled{background:var(--bar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;padding-block:10px}
.brand{margin-inline-end:auto;display:flex}
.brand img{height:50px;width:auto}
nav.links{display:flex;gap:2px}
nav.links a{text-decoration:none;padding:8px 14px;border-radius:999px;font-size:.95rem;color:var(--soft);font-weight:500;transition:color .2s,background-color .2s}
nav.links a:hover{color:var(--ink);background:var(--tint)}
nav.links a[aria-current="page"]{color:var(--magenta-ink);background:var(--magenta-soft)}
.pill-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 14px;font-size:.88rem;font-weight:500;cursor:pointer;transition:border-color .2s}
.pill-btn:hover{border-color:var(--ink)}
.menu-btn{display:none}
@media (max-width:900px){nav.links{display:none}.menu-btn{display:inline-flex}.brand img{height:44px}}

/* full-screen menu (phones) */
.menu{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;gap:20px;padding:calc(18px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));opacity:0;pointer-events:none;transition:opacity .3s;overscroll-behavior:contain}
.menu.open{opacity:1;pointer-events:auto}
.menu .close{align-self:flex-end}
.menu nav{display:flex;flex-direction:column;margin-block:auto}
.menu nav a{text-decoration:none;font:600 1.6rem var(--display);padding-block:12px;border-bottom:1px solid var(--line);transform:translateY(16px);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.menu.open nav a{transform:none;opacity:1}
.menu.open nav a:nth-child(2){transition-delay:.04s}.menu.open nav a:nth-child(3){transition-delay:.08s}
.menu.open nav a:nth-child(4){transition-delay:.12s}.menu.open nav a:nth-child(5){transition-delay:.16s}.menu.open nav a:nth-child(6){transition-delay:.2s}
.menu nav a[aria-current="page"]{color:var(--magenta)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;border-radius:999px;font:500 1rem var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none}
.btn.wa{background:var(--wa);color:#fff}
.btn.primary{background:var(--magenta);color:#fff}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--card)}
.btn.ghost:hover{border-color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}

/* headline: words rise in */
.stack{display:block}
.stack .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.stack .w + .w{margin-inline-start:.28em}
.stack .w > span{display:inline-block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.stack .w:nth-child(2) > span{animation-delay:.1s}
.stack .w:nth-child(3) > span{animation-delay:.2s}
.stack .w:nth-child(4) > span{animation-delay:.3s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}

/* inner page hero */
.page-hero{position:relative;padding-block:calc(116px + env(safe-area-inset-top,0px)) 30px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--tint),transparent)}
.page-hero h1{font-size:clamp(2rem,5vw,3.2rem);margin-top:10px}
.page-hero p.lead{color:var(--soft);max-width:60ch;margin:14px 0 0;font-size:clamp(1rem,1.8vw,1.1rem)}
.page-hero .dots-arc{inset-inline-end:4%;top:96px;transform:rotate(-12deg)}
@media (max-width:640px){.page-hero .dots-arc{width:130px;height:70px;opacity:.5;top:86px}}

/* sections */
section.block{padding-block:clamp(52px,7vw,96px)}
section.tinted{background:var(--tint)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.sec-head p{color:var(--soft);max-width:48ch;margin:6px 0 0}
.more{color:var(--magenta);text-decoration:none;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.more:hover{text-decoration:underline}

/* session cards: ordered grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
.svc{text-decoration:none;display:flex;flex-direction:column;gap:10px}
.svc .im{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--tint)}
.svc .im video{display:block;width:100%;height:100%;object-fit:cover}
.svc .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.svc:hover .im img{transform:scale(1.05)}
.svc .tag{position:absolute;inset-block-start:12px;inset-inline-start:12px;background:#fff;color:var(--magenta);font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:999px}
.svc h3{font-size:1.15rem;display:flex;align-items:center;justify-content:space-between;gap:8px}
.svc h3 svg{width:18px;height:18px;color:var(--magenta);transition:transform .3s}
html[dir="rtl"] .svc h3 svg{transform:scaleX(-1)}
.svc:hover h3 svg{transform:translateX(4px)}
html[dir="rtl"] .svc:hover h3 svg{transform:scaleX(-1) translateX(4px)}
.svc span{color:var(--soft);font-size:.92rem;margin-top:-6px}
.svc .im.icon{display:grid;place-items:center;background:linear-gradient(150deg,var(--magenta-soft),var(--sky-soft))}
.svc .im.icon svg{width:34%;height:34%;fill:none;stroke:var(--magenta);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transform:translateZ(40px)}

/* CTA band */
.cta-band{position:relative;overflow:hidden;border-radius:28px;padding:clamp(28px,5vw,52px);background:var(--magenta);color:#fff;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;isolation:isolate}
.cta-band::after{content:"";position:absolute;inset-inline-end:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:var(--sky);opacity:.9;z-index:-1}
.cta-band h2{font-size:clamp(1.5rem,3.4vw,2.2rem);max-width:20ch}
.cta-band .btn.wa{background:#fff;color:var(--ink)}

/* footer */
footer.site{border-top:1px solid var(--line);padding-block:28px;color:var(--soft);font-size:.9rem}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
footer.site nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--magenta)}

.fab{position:fixed;inset-block-end:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-end:calc(18px + env(safe-area-inset-right,0px));z-index:50;width:56px;height:56px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 12px 26px -10px rgb(21 128 61 / .7);transition:transform .2s}
.fab:hover{transform:scale(1.07)}
.fab svg{width:28px;height:28px;color:#fff}

/* ---------- 3D motion ---------- */
/* sections fold up into place as they scroll in */
.reveal{transition:opacity .9s ease-out,transform 1s cubic-bezier(.2,.8,.2,1);transform-origin:50% 0}
.reveal.pre{opacity:.001;transform:perspective(1000px) rotateX(22deg) translateY(40px) scale(.97)}

/* cards tilt toward the pointer, with a soft light sweep */
[data-tilt]{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px))}
[data-tilt].tilting{transition:transform .08s linear;--tz:16px}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgb(255 255 255 / .45),transparent 55%)}
[data-tilt].tilting::after{opacity:1}
[data-tilt] .pop{transform:translateZ(36px)}

/* page transitions: the page swings in, and swings away when you leave */
main{animation:pageIn .8s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 0}
@keyframes pageIn{from{opacity:0;transform:perspective(1400px) rotateX(10deg) translateY(30px)}to{opacity:1;transform:none}}
body.leaving main{animation:pageOut .38s cubic-bezier(.6,0,.8,.4) both}
@keyframes pageOut{to{opacity:0;transform:perspective(1400px) rotateY(var(--out,-14deg)) translateX(var(--outx,-40px)) scale(.96)}}
html[dir="rtl"] body.leaving{--out:14deg;--outx:40px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal.pre{opacity:1;transform:none}.menu nav a{opacity:1;transform:none}[data-tilt]{transform:none}}

/* ---------- decorative shapes: the logo's dots, arcs and circles, drifting behind the content ---------- */
main,footer.site{position:relative;z-index:1}
.deco{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.deco i{position:absolute;display:block;will-change:transform;animation:decoFloat var(--t,11s) ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.deco .soft{border-radius:50%;background:var(--c);opacity:.55}
.deco .ring{border-radius:50%;border:2px solid var(--c);opacity:.4}
.deco .dot{border-radius:50%;background:var(--c);opacity:.75}
.deco .arc{opacity:.6;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 116'%3E%3Cpath d='M8 110 A102 102 0 0 1 212 110' fill='none' stroke='%23f39200' stroke-width='7' stroke-linecap='round' stroke-dasharray='0 14'/%3E%3C/svg%3E") center/contain no-repeat;animation-name:decoSway}
@keyframes decoFloat{from{translate:0 -14px}to{translate:10px 16px}}
@keyframes decoSway{from{translate:0 -10px;rotate:-14deg}to{translate:8px 12px;rotate:12deg}}
@media (max-width:640px){.deco .hide-sm{display:none}}
@media (max-width:640px){.deco .arc{opacity:.35}footer.site{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
/* easy to hit with a thumb */
nav.links a,footer.site a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.pill-btn{min-height:44px}
.nojs{padding:16px;text-align:center}
.spark{position:fixed;z-index:75;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none}
@media (prefers-reduced-motion:reduce){.deco i{animation:none}}