/* Hero-only study. The portrait file and all page content are unchanged. */
.hero .portrait img{filter:saturate(.76) brightness(.85) contrast(.96) sepia(.015) drop-shadow(-3px 4px 11px #0c15182b)}
.glass-layer{backdrop-filter:blur(.65px);background:linear-gradient(112deg,transparent 12%,#dce9eb05 36%,#dce9eb13 57%,transparent 76%),repeating-linear-gradient(90deg,#ffffff02 0px,#ffffff0a 2px,#101a200c 5px,transparent 11px,transparent 19px,#ffffff08 23px)}
.glass-layer:after{background:linear-gradient(180deg,#adb9c008,transparent 55%)}
.hero:after{background:linear-gradient(90deg,#16191bd4 0%,#16191b8a 27%,#16191b05 57%,transparent 80%),linear-gradient(0deg,#181918c9 0,transparent 22%)}
@media(max-width:760px){
 .glass-layer{backdrop-filter:blur(.45px);background:linear-gradient(112deg,transparent 30%,#dce9eb08 67%,transparent 90%),repeating-linear-gradient(90deg,#ffffff02 0px,#ffffff0a 2px,#101a200c 5px,transparent 11px,transparent 19px,#ffffff08 23px)}
 .hero:after{background:linear-gradient(0deg,#181918 0%,#181918 13%,#18191800 43%),linear-gradient(180deg,#14181b75,transparent 38%)}
 .hero .portrait img{filter:saturate(.79) brightness(.87) contrast(.95) sepia(.01) drop-shadow(-2px 3px 8px #0c151824)}
}
/* Interior perspective study: glass remains on the window, not across the room. */
.hero .glass-layer{backdrop-filter:none;background:linear-gradient(115deg,transparent 15%,#dce7ef0a 55%,transparent 75%);clip-path:polygon(0 16%,100% 5%,100% 63%,0 78%)}
.hero .glass-layer:after{background:repeating-linear-gradient(90deg,transparent 0,transparent 36px,#dce8ed05 38px,transparent 41px);backdrop-filter:none}
.hero:after{background:linear-gradient(90deg,#16191bc9 0%,#16191b88 25%,#16191b05 52%,transparent 80%),linear-gradient(0deg,#181918aa,transparent 17%)}
@media(max-width:760px){
 .hero .glass-layer{clip-path:polygon(0 5%,100% 10%,100% 46%,0 53%)}
 .hero:after{background:linear-gradient(0deg,#181918 0%,#181918 12%,#18191800 40%),linear-gradient(180deg,#14181b70,transparent 34%)}
}
/* Keep the interior floor and offered plate in the first desktop view. */
@media(min-width:761px){.hero{height:100svh;min-height:720px;max-height:1100px}}
/* Illustrated gathering: opaque figures, original photographic portrait. */
.room-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-4;pointer-events:none}
.tower-illumination{animation:tower-light 7.5s ease-in-out infinite;opacity:.28}
.city-illumination{animation:city-light 11s ease-in-out -3s infinite;opacity:.18}
@keyframes tower-light{0%,100%{opacity:.16}50%{opacity:.65}}
@keyframes city-light{0%,100%{opacity:.12}50%{opacity:.4}}
.hero.motion-paused .tower-illumination,.hero.motion-paused .city-illumination{animation-play-state:paused}
.hero .portrait img{filter:saturate(.82) brightness(.90) contrast(.94) sepia(.025) drop-shadow(-5px 5px 14px #11172028)}
.hero:after{background:linear-gradient(90deg,#111c2bc4 0%,#111c2b8c 24%,#111c2b10 46%,transparent 74%),linear-gradient(0deg,#181b2199,transparent 22%)}
@media(max-width:760px){
 .hero:after{background:linear-gradient(0deg,#181918 0%,#181918 12%,#18191800 40%),linear-gradient(180deg,#14181b38,transparent 30%)}
 .hero .portrait img{filter:saturate(.85) brightness(.92) contrast(.94) sepia(.025) drop-shadow(-3px 4px 10px #11172020)}
}
@media(prefers-reduced-motion:reduce){.tower-illumination,.city-illumination{animation:none;opacity:.2}}
/* Original bold skyline, casual silhouette gathering, original portrait pixels. */
.hero .glass-layer{z-index:-3;clip-path:none;backdrop-filter:blur(.7px);background:repeating-linear-gradient(90deg,#ffffff02 0px,#ffffff12 3px,#101a2016 6px,transparent 11px,transparent 19px,#ffffff09 23px)}
.hero .glass-layer:after{background:none}
.casual-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none;filter:blur(.45px)}
.crowd-mobile{display:none}
.gesture{transform-origin:91px 127px;animation:conversation-gesture var(--period) ease-in-out var(--delay) infinite}
.listener{transform-origin:52px 61px;animation:conversation-listen var(--period) ease-in-out var(--delay) infinite}
@keyframes conversation-gesture{0%,28%,68%,100%{transform:rotate(0)}38%{transform:rotate(-8deg)}49%{transform:rotate(-5deg)}58%{transform:rotate(-10deg)}}
@keyframes conversation-listen{0%,35%,63%,100%{transform:rotate(0)}43%{transform:rotate(2deg)}50%{transform:rotate(.2deg)}56%{transform:rotate(1.5deg)}}
.hero.motion-paused .gesture,.hero.motion-paused .listener{animation-play-state:paused}
.hero .portrait{bottom:-30px;height:92%;}
.portrait-composite{width:100%;height:100%;overflow:visible;filter:saturate(.83) brightness(.91) contrast(.96);mask-image:linear-gradient(#000 0%,#000 95%,transparent 100%)}
.hero:after{background:linear-gradient(90deg,#16191bc9 0%,#16191b85 26%,#16191b08 58%,transparent 85%),linear-gradient(0deg,#18191877 0,transparent 16%)}
@media(max-width:760px){
 .crowd-mobile{display:block}.crowd-desktop{display:none}
 .casual-scene{filter:blur(.25px)}
 .hero .portrait{top:203px;right:-14%;height:460px;width:110%;bottom:auto}
 .portrait-composite{filter:saturate(.86) brightness(.94) contrast(.95)}
 .hero:after{background:linear-gradient(0deg,#181918 0%,#181918 12%,#18191800 39%),linear-gradient(180deg,#14181b55,transparent 32%)}
}
@media(max-width:370px){.hero .portrait{top:207px;height:435px}}
@media(prefers-reduced-motion:reduce){.gesture,.listener{animation:none}}
.casual-scene{filter:blur(1.25px)}
@media(max-width:760px){.casual-scene{filter:blur(.75px)}}
.natural-listener{animation:conversation-listen var(--period) ease-in-out var(--delay) infinite}
.natural-gesture{animation:casual-hand 11.5s ease-in-out -2s infinite}
@keyframes casual-hand{0%,22%,68%,100%{transform:rotate(0)}35%{transform:rotate(-4deg)}45%{transform:rotate(-2deg)}54%{transform:rotate(-5deg)}}
.hero.motion-paused .natural-listener,.hero.motion-paused .natural-gesture{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.natural-listener,.natural-gesture{animation:none}}
/* Final gathering pass: quiet, uneven gestures and natural fabric shading. */
.natural-gesture{animation-duration:18.5s}
@keyframes conversation-listen{0%,35%,63%,100%{transform:rotate(0)}43%{transform:rotate(.8deg)}50%{transform:rotate(.1deg)}56%{transform:rotate(.5deg)}}
@keyframes casual-hand{0%,22%,68%,100%{transform:rotate(0)}35%{transform:rotate(-1.8deg)}45%{transform:rotate(-.7deg)}54%{transform:rotate(-2.2deg)}}

/* A small conversational gesture, with pauses and planted bodies. */
@keyframes conversation-listen{0%,32%,68%,100%{transform:rotate(0)}43%{transform:rotate(1.3deg)}51%{transform:rotate(.2deg)}58%{transform:rotate(.85deg)}}
@keyframes casual-hand{0%,20%,70%,100%{transform:rotate(0)}35%{transform:rotate(-3.5deg)}46%{transform:rotate(-1.2deg)}56%{transform:rotate(-2.8deg)}}

/* Separate the CN Tower spire from the descender in Tarique on phones. */
@media(max-width:760px){.hero .gathering-video{height:calc(100% + 120px);object-position:calc(49% - 40px) top}}