/* Portrait collage hero; all Arabic type remains editable HTML. */
.collage-hero{width:100%;padding-top:0;overflow:hidden;background:var(--paper)}
.hero-stage{position:relative;isolation:isolate;min-height:760px;height:min(850px,calc(100svh - 64px));max-width:1600px;margin:auto;overflow:hidden}
.collage-hero #hero-title{position:absolute;inset:20px 3% auto;margin:0;text-align:center;white-space:nowrap;font:900 clamp(70px,13.8vw,210px)/1.5 ThmanyahDisplay,serif;letter-spacing:0;word-spacing:0;color:var(--green);z-index:0}
.hero-art{position:absolute;width:620px;height:auto;max-width:none;bottom:-120px;left:50%;transform:translateX(-50%);z-index:1;filter:drop-shadow(0 16px 18px #172e1812);animation:collage-enter .8s ease-out both}
.hero-statement{position:absolute;right:4%;bottom:75px;width:270px;z-index:2}
.hero-statement h2{font:900 32px/1.7 ThmanyahDisplay,serif;color:var(--green);white-space:nowrap}
.hero-statement p{font:400 16px/1.9 Thmanyah,Arial,sans-serif;margin-top:12px}
.collage-hero .social-strip{width:min(calc(100% - 56px),1180px);margin:auto}
@keyframes collage-enter{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media(max-width:1200px){.hero-stage{min-height:690px;height:750px}.hero-art{width:570px;left:43%;bottom:-105px}.hero-statement{right:3%;width:225px;bottom:65px}.hero-statement h2{font-size:27px}.hero-statement p{font-size:15px}}
@media(max-width:760px){.hero-stage{min-height:0;height:auto;padding-top:110px;display:flex;flex-direction:column;align-items:center}.collage-hero #hero-title{top:10px;font-size:14vw}.hero-art{position:relative;left:auto;bottom:auto;transform:none;width:min(95%,500px);margin-bottom:-70px}.hero-statement{position:relative;right:auto;bottom:auto;width:100%;padding:28px 24px;background:var(--paper);text-align:center;z-index:2}.hero-statement h2{font-size:30px}.hero-statement p{max-width:470px;margin:8px auto 0;font-size:16px}.collage-hero .social-strip{width:calc(100% - 28px)}}
@media(prefers-reduced-motion:reduce){.hero-art{animation:none}}

/* Objects live behind the portrait; the torn edge conceals their bases. */
.hero-art{aspect-ratio:4/5}
.hero-portrait{position:relative;z-index:10;width:100%;height:auto;display:block;pointer-events:none}
.hero-object{position:absolute;display:block;transform:rotate(var(--tilt,0deg));transform-origin:50% 90%;transition:transform .3s ease;filter:drop-shadow(0 8px 8px #14221a20)}
.hero-object img{display:block;width:100%;height:auto;pointer-events:none}
.hero-youtube{z-index:3;width:35%;left:22%;top:16%;--tilt:-12deg}
.hero-coding{z-index:2;width:31%;left:43%;top:17%;--tilt:12deg}
.hero-contact{z-index:1;width:30%;left:45%;top:10%;--tilt:12deg}
.hero-object:hover,.hero-object:focus-visible{transform:translateY(-5px) rotate(0deg) scale(1.04)}
.hero-object:focus-visible{outline:3px solid var(--green);outline-offset:5px;border-radius:12px}
.hero-contact:hover,.hero-contact:focus-visible{animation:hand-wave .65s ease-in-out infinite alternate}
@keyframes hand-wave{from{transform:rotate(5deg)}to{transform:rotate(17deg)}}
@media(prefers-reduced-motion:reduce){.hero-object{transition:none}.hero-object:hover,.hero-object:focus-visible{animation:none;transform:rotate(var(--tilt,0deg))}}

/* Wider portrait and a staggered fan give each destination a visible silhouette. */
.hero-art{width:760px;bottom:-250px}
.hero-portrait{width:116%;max-width:none;margin-left:-8%}
.hero-youtube{width:32%;left:19%;top:14%;--tilt:-16deg;z-index:3}
.hero-coding{width:32%;left:48%;top:12%;--tilt:13deg;z-index:2}
.hero-contact{width:26%;left:35%;top:1%;--tilt:-5deg;z-index:1}
.hero-metrics{width:23%;left:18%;top:28%;--tilt:-12deg;z-index:4}
.hero-quotes{width:23%;left:62%;top:26%;--tilt:14deg;z-index:4}
.hero-symbol{display:block;width:100%;aspect-ratio:1.22;background-image:url('/assets/media/hero-metrics-quotes.png');background-repeat:no-repeat;background-size:200% 100%;pointer-events:none}
.hero-chart{background-position:left center}
.hero-quote{background-position:right center}
@media(max-width:1200px) and (min-width:761px){.hero-art{width:700px;left:42%;bottom:-250px}.hero-statement{width:190px}.hero-statement h2{font-size:24px}}
@media(max-width:760px){.hero-art{width:100%;bottom:auto;margin-bottom:-95px}.hero-portrait{width:116%}.hero-statement{padding-top:24px}}
.hero-youtube{top:20%;left:19%}
.hero-coding{top:19%;left:45%}
.hero-contact{top:12%;left:35%;width:31%}
.hero-metrics{top:14%;left:21%;width:22%;z-index:1}
.hero-quotes{top:28%;left:54%;width:22%}
.hero-coding{left:42%;width:30%}
.hero-quotes{top:24%;left:53%;width:22%}

/* Keep the visual centered; the introduction follows outside its cropped stage. */
.hero-art{left:50%}
.hero-statement{position:relative;right:auto;bottom:auto;width:100%;max-width:680px;margin:0 auto;padding:32px 24px 40px;text-align:center}
.hero-statement h2{font-size:32px}
.hero-statement p{font-size:17px;max-width:600px;margin:10px auto 0}
@media(max-width:760px){.hero-art{left:auto}.hero-stage{max-height:640px}.hero-statement{padding:28px 24px 32px}.hero-statement h2{font-size:30px}.hero-statement p{font-size:16px}}
.hero-art{direction:ltr}

html{scroll-padding-top:24px}

/* Clip horizontal artwork without creating a scroll container above sticky. */
.collage-hero{overflow:clip}
.hero-scroll{position:relative}
.hero-scroll .hero-stage{position:sticky;top:0}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:auto!important}.hero-scroll .hero-stage{position:relative}}

/* Let the mobile stage contain the full portrait before pinning it. */
@media(max-width:760px){
  .hero-stage{display:block;height:auto;max-height:none;padding-top:110px}
  .hero-art{width:min(100%,500px);margin:0 auto;aspect-ratio:auto}
  .collage-hero #hero-title{inset:10px 3% auto;font-size:12.5vw}
}