/* /staff/alaa/ + /ar/staff/alaa/ — Ala'a Olayan profile.
   Everything is scoped to #ao and prefixed .ao- so it can't collide with
   the site's shared styles (styles.css / service-styles.css / dark-mode.css),
   which still own the header, footer, WhatsApp button and preloader.
   Dark mode follows the site rule: html[data-theme="dark"] only. */

html{scroll-behavior:smooth;scroll-padding-top:110px}

#ao{
  --navy:#1F2550; --navy-2:#161B3D; --navy-3:#2A316A;
  --green:#85BB33; --purple:#913791; --pink:#E33069; --blue:#4FB9C2; --orange:#FFAD27;
  --pink-text:#C2185B; --purple-text:#913791;
  --bg:#FFFFFF; --bg-tint:#F7F9FC; --surface:#FFFFFF; --text:#1F2550; --muted:#555B7A;
  --line:rgba(31,37,80,.12); --shadow:0 18px 40px -22px rgba(31,37,80,.35);
  --radius:18px; --maxw:1180px;
  --f-display:"Fraunces",Georgia,serif; --f-body:"Fraunces",Georgia,serif;
  display:block;background:var(--bg);color:var(--text);font:400 1.0625rem/1.7 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;text-align:start
}
html[data-theme="dark"] #ao{
  --bg:#12172F; --bg-tint:#161C38; --surface:#1E2440; --text:#EEF0FA; --muted:#AAB0D0;
  --pink-text:#FF6F9A; --purple-text:#D07BD0;
  --line:rgba(255,255,255,.1); --shadow:0 18px 40px -22px rgba(0,0,0,.7);
}
html[lang="ar"] #ao{--f-display:"Cairo",Tahoma,sans-serif;--f-body:"Cairo",Tahoma,sans-serif}

#ao [data-c="green"]{--c:var(--green)} #ao [data-c="purple"]{--c:var(--purple)} #ao [data-c="pink"]{--c:var(--pink)}
#ao [data-c="blue"]{--c:var(--blue)} #ao [data-c="orange"]{--c:var(--orange)}

#ao *,#ao *::before,#ao *::after{box-sizing:border-box}
#ao section{padding:0;text-align:start}
#ao img{max-width:100%;height:auto;display:block}
#ao a{color:inherit}
#ao p{margin:0 0 1em}
#ao svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#ao :focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
#ao .ao-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ---------- type ---------- */
#ao .ao-h2{display:block;font:600 clamp(2rem,4.2vw,3.1rem)/1.1 var(--f-display);letter-spacing:-.02em;margin:.2em 0 .35em;color:inherit}
#ao .ao-h2::after{content:none}
#ao .ao-h3{font:600 1.45rem/1.25 var(--f-display);margin:.2em 0 .3em}
#ao .ao-h4{font:600 1.15rem/1.3 var(--f-display);margin:0 0 .3em}
html[lang="ar"] #ao .ao-h2,html[lang="ar"] #ao .ao-h3,html[lang="ar"] #ao .ao-h4{letter-spacing:0;font-weight:800}
#ao .ao-lead{font-size:1.2rem;color:var(--text)}
#ao .ao-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font:700 .78rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--pink-text)}
#ao .ao-eyebrow::before{content:"";width:28px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--purple),var(--pink),var(--blue),var(--orange))}
#ao .ao-eyebrow--light{color:#fff}
html[lang="ar"] #ao .ao-eyebrow{letter-spacing:0;font-size:.9rem}

/* ---------- buttons ---------- */
#ao .ao-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font:600 1rem/1 var(--f-body);text-decoration:none;border:2px solid transparent;transition:transform .2s,background .2s,box-shadow .2s;cursor:pointer;transform:translate(var(--mx,0px),var(--my,0px))}
#ao .ao-btn:hover{transform:translate(var(--mx,0px),var(--my,0px)) translateY(-2px)}
#ao .ao-btn--primary{background:var(--orange);color:var(--navy);box-shadow:0 10px 24px -10px rgba(255,173,39,.8)}
#ao .ao-btn--ghost{border-color:rgba(255,255,255,.5);color:#fff}
#ao .ao-btn--ghost:hover{background:rgba(255,255,255,.1)}

/* ---------- hero (clears the site's fixed header) ---------- */
#ao .ao-hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 85% -10%,#2E3680 0%,transparent 60%),linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:calc(100px + clamp(40px,7vw,90px)) 0 clamp(72px,10vw,120px)}
#ao .ao-hero__waves{position:absolute;inset:auto 0 0 0;height:60%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round' stroke-opacity='.35'%3E%3Cpath stroke='%23e33069' d='M0 70C150 70 150 25 300 25S450 70 600 70 750 115 900 115 1050 70 1200 70'/%3E%3Cpath stroke='%234fb9c2' d='M0 95C150 95 150 57 300 57S450 95 600 95 750 133 900 133 1050 95 1200 95'/%3E%3Cpath stroke='%23ffad27' d='M0 110C75 110 75 90 150 90S225 110 300 110 375 130 450 130 525 110 600 110 675 90 750 90 825 110 900 110 975 130 1050 130 1125 110 1200 110'/%3E%3Cpath stroke='%23913791' d='M0 130C150 130 150 100 300 100S450 130 600 130 750 160 900 160 1050 130 1200 130'/%3E%3Cpath stroke='%2385bb33' d='M0 120C75 120 75 98 150 98S225 120 300 120 375 142 450 142 525 120 600 120 675 98 750 98 825 120 900 120 975 142 1050 142 1125 120 1200 120'/%3E%3C/g%3E%3C/svg%3E") bottom/100% 100% no-repeat;pointer-events:none}
#ao .ao-hero__waves--soft{opacity:.45;height:45%}
#ao .ao-hero__in{position:relative;display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(32px,6vw,80px);align-items:center}
#ao .ao-hero__title{font:600 clamp(3rem,8vw,6rem)/.98 var(--f-display);letter-spacing:-.035em;margin:.25em 0 .2em;color:#fff}
html[lang="ar"] #ao .ao-hero__title{letter-spacing:0;font-weight:800;line-height:1.15}
#ao .ao-hero__role{font:500 clamp(1.1rem,2vw,1.35rem)/1.4 var(--f-body);color:var(--orange);margin:0 0 1em}
#ao .ao-hero__lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:rgba(255,255,255,.82);max-width:36em}
#ao .ao-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
#ao .ao-hero__meta{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 22px;color:rgba(255,255,255,.75);font-size:.95rem}
#ao .ao-hero__meta li{display:flex;align-items:center;gap:8px}
#ao .ao-hero__meta svg{font-size:1.1rem;color:var(--blue)}

/* in-page shortcuts (replaces the mini-site's own header menu) */
#ao .ao-jump{position:static;width:auto;padding:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
#ao .ao-jump a{padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.9);text-decoration:none;font-size:.9rem;font-weight:600;transition:background .2s,border-color .2s}
#ao .ao-jump a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}

#ao .ao-portrait{position:relative;margin:0;max-width:400px;justify-self:center;width:100%}
#ao .ao-portrait__stripes{position:absolute;inset:-26px -26px auto auto;width:62%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-40deg);transform-origin:center;z-index:0;opacity:.95}
#ao .ao-portrait__stripes i{display:block;height:12px;border-radius:12px;background:var(--c);width:100%}
#ao .ao-portrait__stripes i:nth-child(odd){width:78%;margin-inline-start:auto}
#ao .ao-portrait__frame{position:relative;z-index:1;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:linear-gradient(150deg,#2B3272,#1A1F48);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);display:grid;place-items:center}
#ao .ao-portrait__mono{font:600 clamp(5rem,12vw,8rem)/1 "Fraunces",serif;background:linear-gradient(135deg,var(--green),var(--purple) 30%,var(--pink) 55%,var(--blue) 78%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em}
#ao .ao-portrait__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
#ao .ao-portrait__cap{position:absolute;z-index:2;inset-inline-start:-18px;bottom:28px;background:var(--surface);color:var(--text);padding:14px 20px;border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;line-height:1.3}
#ao .ao-portrait__cap strong{font:600 1.05rem var(--f-display)}
#ao .ao-portrait__cap span{font-size:.85rem;color:var(--muted)}
[dir="rtl"] #ao .ao-portrait__stripes{inset:-26px auto auto -26px;transform:rotate(40deg) scaleX(-1)}

@media (max-width:900px){
  #ao .ao-hero__in{grid-template-columns:1fr}
  #ao .ao-hero__visual{order:-1;width:min(250px,72%);margin:0 auto 34px}
  #ao .ao-portrait__stripes{inset:-18px -18px auto auto}
  [dir="rtl"] #ao .ao-portrait__stripes{inset:-18px auto auto -18px}
  #ao .ao-portrait__cap{inset-inline-start:50%;transform:translateX(-50%);bottom:-22px;white-space:nowrap}
  [dir="rtl"] #ao .ao-portrait__cap{transform:translateX(50%)}
}

/* ---------- glance ---------- */
#ao .ao-glance{position:relative;z-index:2;margin-top:-44px}
#ao .ao-glance__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
#ao .ao-glance__item{padding:24px 26px;border-inline-start:1px solid var(--line);position:relative;display:flex;flex-direction:column-reverse;gap:6px}
#ao .ao-glance__item:first-child{border-inline-start:0}
#ao .ao-glance__item::before{content:"";position:absolute;top:0;inset-inline:26px;height:4px;border-radius:0 0 4px 4px;background:var(--c)}
#ao .ao-glance dt{font:700 .75rem/1.3 var(--f-body);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
html[lang="ar"] #ao .ao-glance dt{letter-spacing:0;font-size:.85rem}
#ao .ao-glance dd{margin:0;display:flex;align-items:baseline;gap:2px}
#ao .ao-stat{font:600 clamp(2.4rem,4vw,3.2rem)/1 "Fraunces",serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#ao .ao-stat__plus{font:600 1.8rem/1 "Fraunces",serif;color:var(--c)}
@media (max-width:900px){#ao .ao-glance__grid{grid-template-columns:1fr 1fr}#ao .ao-glance__item:nth-child(3){border-inline-start:0}#ao .ao-glance__item:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:480px){#ao .ao-glance__grid{grid-template-columns:1fr}#ao .ao-glance__item{border-inline-start:0!important}#ao .ao-glance__item+.ao-glance__item{border-top:1px solid var(--line)}}

/* ---------- sections ---------- */
#ao .ao-section{position:relative;padding:clamp(72px,10vw,120px) 0}
#ao .ao-section--tint{background:var(--bg-tint)}
#ao .ao-section--navy{background:linear-gradient(170deg,var(--navy),var(--navy-2));color:#fff;overflow:hidden}
#ao .ao-section--navy .ao-section__sub{color:rgba(255,255,255,.75)}
#ao .ao-section__head{max-width:720px;margin-bottom:clamp(36px,5vw,56px)}
#ao .ao-section__head--center{text-align:center;margin-inline:auto}
#ao .ao-section__sub{color:var(--muted);font-size:1.1rem;margin:0}

#ao .ao-about{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(28px,6vw,90px)}
#ao .ao-about__head{position:sticky;top:120px;align-self:start}
#ao .ao-about__body p{color:var(--muted)}
#ao .ao-about__body .ao-lead{color:var(--text)}
#ao .ao-quote{margin:36px 0 0;padding:28px 32px;border-radius:var(--radius);background:var(--bg-tint);border-inline-start:5px solid var(--pink);position:relative}
#ao .ao-quote p{font:500 clamp(1.25rem,2.2vw,1.55rem)/1.4 var(--f-display);color:var(--text);margin:0 0 .6em}
#ao .ao-quote .ao-quote__by{font:600 .9rem/1.4 var(--f-body);color:var(--muted);margin:0}
#ao .ao-quote__by::before{content:"— "}
@media (max-width:900px){#ao .ao-about{grid-template-columns:1fr}#ao .ao-about__head{position:static}}

#ao .ao-chips{list-style:none;padding:0;margin:18px 0 20px;display:flex;flex-wrap:wrap;gap:8px}
#ao .ao-chips li{padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:600;border:1px solid var(--line);background:var(--surface)}
#ao .ao-chips--skills{margin-top:28px}
#ao .ao-chips--skills li{background:var(--bg-tint)}

/* ---------- timeline ---------- */
#ao .ao-timeline{list-style:none;padding:0;margin:0;position:relative;display:grid;gap:22px}
#ao .ao-timeline::before{content:"";position:absolute;top:8px;bottom:8px;inset-inline-start:180px;width:2px;background:linear-gradient(var(--pink),var(--orange),var(--purple),var(--blue),var(--green),var(--pink));opacity:.5}
#ao .ao-tl{display:grid;grid-template-columns:180px 1fr;gap:0 44px;position:relative}
#ao .ao-tl::before{content:"";position:absolute;inset-inline-start:173px;top:26px;width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px var(--bg-tint)}
#ao .ao-tl__when{margin:20px 0 0;font-weight:700;font-size:.92rem;color:var(--muted);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#ao .ao-tl__now{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--c);color:var(--navy)}
html[lang="ar"] #ao .ao-tl__now{letter-spacing:0;font-size:.8rem}
#ao .ao-tl__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;transition:box-shadow .3s,transform .3s}
#ao .ao-tl__card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
#ao .ao-tl__card .ao-h3{margin-top:0}
#ao .ao-tl__org{font-weight:600;color:var(--text);margin:0 0 .7em;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#ao .ao-tl__org::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--c)}
#ao .ao-tl__card p:last-child{color:var(--muted);margin:0}
@media (max-width:760px){
  #ao .ao-timeline::before{inset-inline-start:7px}
  #ao .ao-tl{grid-template-columns:1fr;padding-inline-start:34px}
  #ao .ao-tl::before{inset-inline-start:0;top:4px}
  #ao .ao-tl__when{margin:0 0 10px;flex-direction:row;align-items:center}
}

/* ---------- leadership pillars ---------- */
#ao .ao-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#ao .ao-pillar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
#ao .ao-pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
#ao .ao-pillar::after{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
#ao .ao-pillar__num{font:600 3rem/1 var(--f-display);color:var(--c);opacity:.9}
#ao .ao-pillar__tag{font-weight:600;color:var(--muted);margin:0 0 1em;font-size:.95rem}
#ao .ao-pillar>p:not(.ao-pillar__tag){color:var(--muted)}
#ao .ao-ticks{list-style:none;padding:18px 0 0;margin:0;border-top:1px dashed var(--line);display:grid;gap:10px}
#ao .ao-ticks li{display:flex;gap:10px;font-size:.97rem;font-weight:500}
#ao .ao-ticks li::before{content:"";flex:0 0 8px;height:8px;margin-top:.62em;border-radius:50%;background:var(--c)}
@media (max-width:900px){#ao .ao-pillars{grid-template-columns:1fr}}

/* ---------- ventures ---------- */
#ao .ao-sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
#ao .ao-sector{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .3s,box-shadow .3s}
#ao .ao-sector:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
#ao .ao-sector p{color:var(--muted);margin:0}
#ao .ao-sector__icon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;font-size:1.5rem;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);margin-bottom:14px}
#ao .ao-sector--feature{grid-column:1/-1;display:grid;grid-template-columns:260px 1fr;gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(28px,4vw,44px);background:linear-gradient(135deg,var(--surface),var(--bg-tint))}
#ao .ao-sector__logo{background:#fff;border-radius:16px;padding:18px;border:1px solid var(--line)}
#ao .ao-sector p.ao-sector__kicker{font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
#ao .ao-sector--feature p.ao-sector__kicker{color:var(--purple-text)}
html[lang="ar"] #ao .ao-sector p.ao-sector__kicker{letter-spacing:0;font-size:.9rem}
#ao .ao-sector__link{margin-top:18px}
#ao .ao-link-arrow{font-weight:700;text-decoration:none;display:inline-flex;gap:8px;align-items:center;border-bottom:2px solid var(--pink);padding-bottom:2px}
#ao .ao-link-arrow::after{content:"→"}
[dir="rtl"] #ao .ao-link-arrow::after{content:"←"}
@media (max-width:900px){#ao .ao-sectors{grid-template-columns:1fr}#ao .ao-sector--feature{grid-template-columns:1fr}#ao .ao-sector__logo{max-width:220px}}

/* ---------- playbook ---------- */
#ao .ao-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
#ao .ao-step{padding:26px 22px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(4px)}
#ao .ao-step__n{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--c);color:var(--navy);font:700 1rem var(--f-body);margin-bottom:16px}
#ao .ao-step h3{font:600 1.15rem/1.3 var(--f-display);margin:0 0 .4em;color:#fff}
#ao .ao-step p{color:rgba(255,255,255,.75);font-size:.95rem;margin:0}
@media (max-width:1000px){#ao .ao-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){#ao .ao-steps{grid-template-columns:1fr}}

/* ---------- clients ---------- */
#ao .ao-logos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
#ao .ao-logos li{background:#fff;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;padding:16px;aspect-ratio:2/1}
#ao .ao-logos img{max-height:56px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
#ao .ao-logos li:hover img{filter:none;opacity:1}
@media (max-width:900px){#ao .ao-logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){#ao .ao-logos{grid-template-columns:repeat(2,1fr)}}

/* ---------- why ---------- */
#ao .ao-why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
#ao .ao-why__item{padding-top:22px;border-top:3px solid var(--c)}
#ao .ao-why__item p{color:var(--muted);margin:0}
@media (max-width:900px){#ao .ao-why{grid-template-columns:1fr 1fr}}
@media (max-width:520px){#ao .ao-why{grid-template-columns:1fr}}

/* ---------- contact ---------- */
#ao .ao-contact{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:#fff}
#ao .ao-contact .ao-section__sub{color:rgba(255,255,255,.78);margin-bottom:28px}
#ao .ao-contact__in{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,80px);align-items:center}
#ao .ao-contact__list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
#ao .ao-cline{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
#ao .ao-cline__icon{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:1.25rem;color:var(--orange)}
#ao .ao-cline__body{display:flex;flex-direction:column;min-width:0;flex:1}
#ao .ao-cline__label{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.7);font-weight:600}
html[lang="ar"] #ao .ao-cline__label{letter-spacing:0;font-size:.85rem}
#ao .ao-cline__body a,#ao .ao-cline__body>span:last-child{font-weight:600;font-size:1.05rem;text-decoration:none;overflow-wrap:anywhere}
#ao .ao-cline__body a:hover{text-decoration:underline;text-underline-offset:4px}
[dir="rtl"] #ao .ao-cline__body a[dir="ltr"]{text-align:right}
#ao .ao-copy{flex:0 0 auto;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:600 .85rem var(--f-body);cursor:pointer}
#ao .ao-copy:hover{background:rgba(255,255,255,.12)}
#ao .ao-contact .back-cta{margin-top:clamp(48px,7vw,72px)}
@media (max-width:900px){#ao .ao-contact__in{grid-template-columns:1fr}}

#ao .ao-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,200%);opacity:0;visibility:hidden;background:var(--orange);color:var(--navy);padding:12px 20px;border-radius:999px;font-weight:700;box-shadow:var(--shadow);transition:transform .3s;z-index:1100;pointer-events:none}
#ao .ao-toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}

/* the site's shared footer sits right under the navy contact band */
#ao + .whatsapp-float + footer{margin-top:0}

/* ---------- motion ---------- */
.ao-js #ao .ao-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.ao-js #ao .ao-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #ao *,#ao *::before,#ao *::after{transition:none!important;animation:none!important}
  .ao-js #ao .ao-reveal{opacity:1;transform:none}
}
@media print{
  nav,.whatsapp-float,#ao .ao-hero__waves,#ao .ao-toast,#ao .ao-copy,#ao .ao-hero__ctas,#ao .ao-jump,#ao .back-cta{display:none!important}
  #ao .ao-hero,#ao .ao-section--navy,#ao .ao-contact{background:#fff!important;color:#000!important}
  #ao .ao-hero{padding-top:24px}
  .ao-js #ao .ao-reveal{opacity:1;transform:none}
}

/* ---------- card visual effects (same as the AI section) ----------
   3D tilt toward the cursor, colour spotlight, light sweep, glowing border
   and icon pop. Positions come from /assets/js/card-fx.js. */
#ao .ao-fx{position:relative;isolation:isolate;transform-style:preserve-3d;will-change:transform;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
#ao .ao-fx::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s ease;
  background:
    radial-gradient(240px circle at var(--px,50%) var(--py,50%),color-mix(in srgb,var(--c,#4FB9C2) 22%,transparent),transparent 70%),
    linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%) no-repeat;
  background-size:100% 100%,250% 100%;background-position:center,150% 0}
#ao .ao-fx:hover,#ao .ao-fx:focus-within{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
  border-color:color-mix(in srgb,var(--c,#4FB9C2) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c,#4FB9C2) 35%,transparent),0 22px 44px -18px color-mix(in srgb,var(--c,#4FB9C2) 55%,transparent)}
#ao .ao-fx:hover::after,#ao .ao-fx:focus-within::after{opacity:1;background-position:center,-50% 0;transition:opacity .35s ease,background-position .9s ease}
#ao .ao-fx .ao-sector__icon,#ao .ao-fx .ao-cline__icon,#ao .ao-fx .ao-step__n,#ao .ao-fx .ao-pillar__num,#ao .ao-fx .ao-stat{transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
#ao .ao-fx:hover .ao-sector__icon,#ao .ao-fx:hover .ao-cline__icon,#ao .ao-fx:hover .ao-step__n{transform:scale(1.14) rotate(-6deg);box-shadow:0 10px 22px -8px color-mix(in srgb,var(--c,#4FB9C2) 70%,transparent)}
#ao .ao-fx:hover .ao-pillar__num,#ao .ao-fx:hover .ao-stat{transform:scale(1.08)}
#ao .ao-cline.ao-fx::after,#ao .ao-step.ao-fx::after{background:radial-gradient(240px circle at var(--px,50%) var(--py,50%),rgba(255,173,39,.18),transparent 70%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%) no-repeat;background-size:100% 100%,250% 100%;background-position:center,150% 0}
#ao .ao-cline.ao-fx:hover::after,#ao .ao-step.ao-fx:hover::after{background-position:center,-50% 0}
#ao .ao-cline.ao-fx:hover,#ao .ao-step.ao-fx:hover{background:rgba(255,255,255,.1)}
#ao .ao-chips li.ao-fx:hover,#ao .ao-logos li.ao-fx:hover{transform:translateY(-3px)}
#ao .ao-tl__card.ao-fx:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.ao-js #ao .ao-reveal{transition-delay:calc(var(--i,0) * 70ms)}
@media (prefers-reduced-motion:reduce){
  #ao .ao-fx,#ao .ao-fx:hover{transform:none!important}
  #ao .ao-fx::after{display:none}
  .ao-js #ao .ao-reveal{transition-delay:0s}
}

/* ---------- slightly larger icons ---------- */
#ao .ao-sector__icon{width:60px;height:60px;font-size:1.75rem;border-radius:16px}
#ao .ao-cline__icon{flex-basis:50px;height:50px;font-size:1.45rem}
#ao .ao-step__n{width:52px;height:52px;font-size:1.08rem}
#ao .ao-hero__meta svg{font-size:1.3rem}

/* ---------- moving waves at the end of the page (same as the homepage) ---------- */
#ao .ao-waves{position:relative;width:auto;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);height:200px;margin-top:30px;margin-bottom:0;background-image:var(--wave-bg);background-repeat:repeat-x;background-position:center;background-size:1200px 200px;animation:wave-flow 30s linear infinite;pointer-events:none}
/* the waves sit inside the navy contact band, so one continuous background in light and dark mode */
#ao .ao-contact{padding-bottom:0}
#ao .ao-contact .ao-waves{margin-top:clamp(28px,5vw,48px);filter:brightness(1.6) saturate(1.15)}
@media (prefers-reduced-motion:reduce){#ao .ao-waves{animation:none}}

/* hero name typewriter (staff-alaa.js) — untyped part keeps its space so nothing shifts */
#ao .ao-tw-rest{visibility:hidden}
#ao .ao-tw-caret{display:inline-block;width:4px;height:.8em;margin-inline:3px;vertical-align:-.02em;border-radius:2px;background:linear-gradient(var(--orange),var(--pink));animation:ao-caret .8s step-end infinite}
@keyframes ao-caret{50%{opacity:0}}