/* The text leads the composition in both reading directions. */
.hero-headline{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(190px,1fr);align-items:center;gap:clamp(12px,3vw,60px);margin-bottom:38px}
.hero-headline h1{margin:0;font-size:clamp(48px,5.7vw,94px)}
html[lang=ar] .hero-headline h1{font-size:clamp(46px,5.8vw,92px);line-height:1.45}
.hero-building{color:#0339a6;margin:0;width:100%;max-width:390px;justify-self:center;pointer-events:none}
html[data-theme=dark] .hero-building{color:#fff}
.hero-building svg{display:block;width:100%;height:auto;overflow:visible}
.hero-building path{stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.building-halo{fill:currentColor;opacity:.045;filter:blur(8px)}
.building-glazing{fill:currentColor;opacity:.05}.building-glazing path{stroke:none}
.building-mullions{opacity:.6}.building-landscape{opacity:.55}
@media(prefers-reduced-motion:no-preference){
.building-draw path{stroke-dasharray:1;stroke-dashoffset:1}
.hero-building.is-building .building-draw path{animation:build-line .9s cubic-bezier(.22,.61,.36,1) var(--delay) both}
.building-glazing{opacity:0}.hero-building.is-building .building-glazing{animation:build-glass 1.2s ease 3.8s both}
@keyframes build-line{to{stroke-dashoffset:0}}
@keyframes build-glass{to{opacity:.055}}
}
@media(max-width:767px){
.hero-headline{grid-template-columns:minmax(0,1.8fr) minmax(94px,.85fr);gap:8px;margin-bottom:30px}
.hero-headline h1{font-size:clamp(30px,7.4vw,52px);line-height:1.22;letter-spacing:-.045em}
html[lang=ar] .hero-headline h1{font-size:clamp(29px,7.6vw,54px);line-height:1.5}
.hero-building{align-self:center;transform:scale(1.08);transform-origin:center}
.hero-building path{stroke-width:1.35}
}
@media(max-width:370px){.hero-headline{grid-template-columns:minmax(0,1fr) 85px}.hero-headline h1,html[lang=ar] .hero-headline h1{font-size:28px}}
@media(min-width:768px){.hero{padding-top:110px;padding-bottom:26px}.hero-building{max-width:min(350px,calc((100svh - 440px)*.857))}.hero-headline{margin-bottom:24px}.hero .scene-foot{margin-top:30px}}