/* ==========================================================================
   v7: artwork (hero head, page-head art, focus image, education / journal imagery, CTA art,
   research area art). Cut-outs are transparent WebP in /img/art/.
   ========================================================================== */

/* ---- home hero: copy + head artwork ---- */
.sc-hero{padding-bottom:0}
.sc-hero-in.hero-split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:20px;align-items:end;text-align:start}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:88px;align-self:center}
.hero-split .sc-h1{font-size:clamp(2.4rem,4.7vw,4.3rem);max-width:12.5ch;margin-top:22px}
html[dir=rtl] .hero-split .sc-h1{max-width:14ch}
.hero-split .sc-lead{max-width:540px;margin-top:22px}
.hero-split .sc-cta{justify-content:flex-start;margin-top:30px}
.hero-art{position:relative;align-self:end;min-height:560px;display:flex;align-items:flex-end;justify-content:center}
.hero-art .halo{position:absolute;inset:6% 4% 8%;border-radius:50%;background:radial-gradient(circle at 55% 45%,rgba(224,184,114,.30),rgba(5,73,138,.38) 52%,transparent 72%);filter:blur(26px)}
.ha-main{position:relative;z-index:1;width:min(100%,540px);height:auto;margin-bottom:-4px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.hero-art .sc-stage{position:absolute;inset:0;width:100%;height:auto;margin:0;display:block;z-index:2;pointer-events:none;-webkit-mask-image:none;mask-image:none}
.hero-art .sc-card{position:absolute;width:40%;max-width:230px;padding:11px 13px}
.hero-art .sc-card.c-forest{left:-7%;top:3%;bottom:auto;margin:0}
.hero-art .sc-card.c-results{right:-4%;bottom:7%;top:auto;margin:0}
.hero-art .sc-note{inset-inline-start:50%;bottom:6px;opacity:.7}
@media(max-width:1100px){.hero-art .sc-card{width:40%}.hero-art .sc-card.c-forest{left:0}.hero-art .sc-card.c-results{right:0}}
@media(max-width:900px){
  .sc-hero-in.hero-split{grid-template-columns:1fr;gap:0}
  .hero-copy{padding-bottom:10px;align-items:center;text-align:center}
  .hero-split .sc-cta{justify-content:center}
  .hero-art{min-height:0;margin-top:6px}.ha-main{width:min(74%,380px)}
  .hero-art .sc-stage{display:none}
}
@media(max-width:640px){.hero-split .sc-h1{font-size:2.15rem}.ha-main{width:min(70%,300px)}}

/* ---- page heads with artwork ---- */
.pagehead.has-art{min-height:330px}
.pagehead .wrap{position:relative;z-index:1}
.pagehead.has-art .wrap>*{max-width:min(100%,640px)}
.ph-art{position:absolute;inset-inline-end:3%;bottom:0;z-index:0;height:min(92%,400px);width:auto;max-width:46%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 26px 44px rgba(0,0,0,.42));pointer-events:none}
@media(max-width:900px){.pagehead.has-art .wrap>*{max-width:100%}.ph-art{height:70%;max-width:50%;opacity:.35}}
@media(max-width:640px){.pagehead.has-art{min-height:0}.ph-art{height:62%;max-width:54%;opacity:.28}}

/* ---- CTA band with artwork ---- */
.sc-cta-sec.has-art{padding:84px 0}
.sc-cta-sec.has-art .cta-art{position:absolute;inset-inline-end:2%;bottom:-8%;height:116%;width:auto;max-width:46%;object-fit:contain;z-index:0;pointer-events:none;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.sc-cta-sec.has-art .wrap{position:relative;z-index:1}
.sc-cta-sec.has-art .sc-cta-box{margin-inline:0;max-width:600px;text-align:start}
.sc-cta-sec.has-art .sc-cta,.sc-cta-sec.has-art .sc-reach{justify-content:flex-start}
.sc-cta-sec.has-art .sc-cta-box p{margin-inline:0}
@media(max-width:900px){
  .sc-cta-sec.has-art .cta-art{opacity:.18;inset-inline-end:50%;translate:50% 0;max-width:80%}
  html[dir=rtl] .sc-cta-sec.has-art .cta-art{translate:-50% 0}
  .sc-cta-sec.has-art .sc-cta-box{margin-inline:auto;text-align:center}.sc-cta-sec.has-art .sc-cta,.sc-cta-sec.has-art .sc-reach{justify-content:center}
}

/* ---- focus image card ---- */
.focus-art{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/3.1;box-shadow:0 30px 70px rgba(4,22,50,.28);max-width:520px;width:100%;margin-inline:auto;background:#041632}
.focus-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--ease)}
.focus-art:hover img{scale:1.05}
.fchip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(4,22,50,.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);color:#fff;font:700 .8rem var(--f);animation:chipf 7s ease-in-out infinite}
.fchip i{width:9px;height:9px;border-radius:50%}
.fchip.c1{top:12%;left:6%}.fchip.c1 i{background:#7fb8ff}
.fchip.c2{top:34%;right:6%;animation-delay:-2s}.fchip.c2 i{background:#3ba6c4}
.fchip.c3{bottom:12%;left:12%;animation-delay:-4s}.fchip.c3 i{background:#e0b872}
@keyframes chipf{50%{translate:0 -8px}}
html[dir=rtl] .fchip{font-family:'Cairo',sans-serif}

/* ---- journal image ---- */
.sc-jempty{background:transparent;border:0;padding:0}
.sc-jempty img{width:min(100%,380px);height:auto;filter:drop-shadow(0 20px 36px rgba(4,22,50,.22))}

/* ---- education (home) image ---- */
.sc-edu-in{grid-template-columns:1fr 1fr;grid-template-areas:"txt img" "tiles tiles";gap:34px 48px}
.sc-etxt{grid-area:txt}.edu-side{grid-area:img;display:grid;place-items:center}.sc-etiles{grid-area:tiles}
.edu-kit{width:100%;max-width:520px;max-height:340px;object-fit:contain;filter:drop-shadow(0 26px 40px rgba(4,22,50,.3))}
@media(max-width:1100px){.sc-edu-in{grid-template-columns:1fr;grid-template-areas:"txt" "img" "tiles"}.edu-kit{max-height:240px}}
@media(max-width:640px){.edu-kit{max-height:190px}}

/* ---- education page hero (photo background) + institutions art ---- */
.edu-bgimg{background:linear-gradient(90deg,#041632 0,#041632 32%,rgba(4,22,50,.72) 58%,rgba(4,22,50,.18) 100%),var(--bg) right center/cover no-repeat,#041632}
.edu-bgimg .edu-hero-in{grid-template-columns:1fr}
.edu-bgimg .sc-glow{opacity:.5}
.inst-art{width:min(44%,440px);height:auto;flex:none;filter:drop-shadow(0 22px 40px rgba(0,0,0,.45))}
@media(max-width:900px){.edu-bgimg{background:linear-gradient(180deg,rgba(4,22,50,.9),rgba(4,22,50,.78)),var(--bg) center/cover no-repeat,#041632}.inst-art{width:min(70%,320px)}.sc-inst-in{flex-direction:column;align-items:flex-start}}

/* ---- research page art ---- */
.res-art{position:relative;display:grid;place-items:center;min-height:300px}
.res-art .halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(224,184,114,.26),rgba(5,73,138,.3) 55%,transparent 72%);filter:blur(28px)}
.res-art img{position:relative;width:min(100%,520px);height:auto;filter:drop-shadow(0 26px 44px rgba(0,0,0,.4))}
@media(max-width:1100px){.res-art{min-height:0}.res-art img{max-width:340px}}
@media(max-width:640px){.res-art{display:none}}
.corec-art{position:absolute!important;inset-inline-end:-8px;bottom:-12px;height:84%;width:auto;max-width:48%;object-fit:contain;opacity:.95;pointer-events:none;filter:drop-shadow(0 16px 26px rgba(0,0,0,.35))}
.sc-corec h3,.sc-corec p,.sc-corec .more{max-width:62%}
.sc-corec .corec-art ~ *{position:relative;z-index:1}
@media(max-width:640px){.sc-corec h3,.sc-corec p,.sc-corec .more{max-width:100%}.corec-art{opacity:.22;max-width:60%}}
.sc-area.with-art .n{display:none}
.area-art{position:absolute;inset-inline-end:10px;top:10px;width:92px;height:72px;display:block}
.area-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(4,22,50,.25))}
.sc-area.with-art h3{padding-inline-end:0}

/* large drop-shadow filters on big cut-outs are expensive and can fail to paint: rely on the halo instead */
.ha-main,.ph-art,.cta-art,.res-art img,.edu-kit,.corec-art,.sc-jempty img,.inst-art,.area-art img{filter:none!important}

.hero-art .sc-card.c-forest{display:none}
.hero-art .sc-card.c-results{right:-2%;bottom:10%}