/* A spatial first viewport, with the brand and concept status kept in the foreground. */
.hero{grid-template-columns:.95fr 1.1fr;gap:35px;padding-top:12px;padding-bottom:42px;align-items:center}.hero-copy{padding-top:12px}h1{font-size:clamp(56px,5.7vw,84px);margin:23px 0;line-height:1.06}.hero .intro{font-size:16px;line-height:1.7;max-width:475px}.hero-actions{margin-top:25px}.hero-foot{margin-top:24px}.scene-picker{margin-top:24px}.header{padding-block:24px}
.map-hero,html[lang=ar] .map-hero{height:580px;min-height:580px;border-radius:30px;background:radial-gradient(ellipse at 70% 30%,#47294780,transparent 60%),radial-gradient(ellipse at 20% 70%,#30244466,transparent 65%),#15111d;box-shadow:0 35px 100px #0002,inset 0 1px #e9c4ff13;overflow:hidden;position:relative;isolation:isolate}
.map-hero #city-map{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;direction:ltr}.map-hero #city-map.dragging{cursor:grabbing}.map-hero .map-fallback{opacity:.35}.map-hero.map-ready .map-fallback{display:none}.map-top{position:absolute;inset:24px 23px auto;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;pointer-events:none}.map-eyebrow{font-size:10px;letter-spacing:1.6px;color:#e2c3f7}.map-preview{font-size:11px;color:#b0a1bd;margin-top:4px}.map-pause,.map-reset{font:400 11px var(--font);color:#dccce9;background:#2c2137cc;border:1px solid #88679c55;border-radius:24px;padding:8px 11px;min-height:36px;cursor:pointer;pointer-events:auto;white-space:nowrap}.map-pause:hover,.map-reset:hover{border-color:#c7a4e0}.map-pause:disabled{opacity:.7;cursor:default}.map-markers{position:absolute;inset:0;pointer-events:none;direction:ltr;display:none}.map-ready .map-markers{display:block}.map-pin{position:absolute;display:flex;align-items:center;gap:7px;pointer-events:auto;border:1px solid #9470b377;background:#25182fef;color:#efe1ff;border-radius:30px;padding:9px 13px;min-height:40px;transform:translate(-50%,-100%);font:500 12px var(--font);white-space:nowrap;cursor:pointer;box-shadow:0 6px 18px #0003;transition:background 200ms,border-color 200ms,box-shadow 200ms}.map-pin:hover{background:#44304e;border-color:#ebbeff}.map-pin[aria-pressed=true]{border-color:#f2bbe5;background:#4e2949;box-shadow:0 0 25px #de86c12e}.pin-core{width:5px;height:5px;border-radius:50%;background:#d1b1ef;flex:none}.map-pin[data-place=outdoors] .pin-core{background:#b6dbca}.map-pin[data-place=cafe] .pin-core{background:#ffafd6}.map-tools{position:absolute;inset:auto 25px 136px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.map-hint{font-size:11px;color:#b8a7c4}.map-hero .signal-card{inset:auto 22px 22px;padding:17px 19px;min-height:86px;gap:14px;pointer-events:none}.map-hero .signal-card strong{font-size:16px}.map-hero .signal-card p{font-size:12px}.map-hero .signal-symbol{width:43px;height:43px}.map-hero .card-label{font-size:9px;letter-spacing:1px}
html[lang=ar] .map-eyebrow{letter-spacing:0}html[lang=ar] .map-pin{direction:rtl}html[lang=ar] h1{font-size:clamp(50px,5.1vw,70px);line-height:1.38}.map-pause:focus-visible,.map-reset:focus-visible{outline:3px solid #e6c3ff;outline-offset:3px}.map-pin:focus-visible{outline:3px solid #e6c3ff;outline-offset:4px}
@media(min-width:1600px){.map-hero{height:620px;min-height:620px}}
@media(max-width:1100px) and (min-width:761px){.hero{gap:22px;grid-template-columns:1fr 1.1fr}h1{font-size:58px;letter-spacing:-3px}.map-hero,html[lang=ar] .map-hero{height:575px;min-height:575px}.map-top{inset:19px 17px auto}.map-eyebrow{font-size:9px;letter-spacing:1px}.map-preview{font-size:10px}.map-pause{font-size:10px;padding:7px 9px}.map-pin{font-size:10px;padding:7px 9px;gap:5px}.map-hero .signal-card{inset:auto 16px 20px;padding:14px}.map-hero .signal-card strong{font-size:13px}.map-hero .signal-card p{font-size:11px}.map-tools{inset:auto 18px 128px}.hero-foot{font-size:9px}.hero-foot span:last-child{display:none}}
@media(max-width:760px){.header{padding-block:17px;gap:12px}.hero{display:flex;flex-direction:column;gap:17px;padding-top:6px;padding-bottom:30px;align-items:stretch}.hero-copy{display:contents}.hero-copy>.eyebrow{order:0;margin-top:2px}#hero-title{order:1;font-size:clamp(42px,10vw,64px);letter-spacing:-2px;line-height:1.02;margin:0}#hero-title br:first-of-type{display:none}#hero-title br:first-of-type::after{content:' '}.map-hero,html[lang=ar] .map-hero{order:2;height:340px;min-height:340px;border-radius:21px}.hero-copy>.intro{order:3;font-size:15px;line-height:1.7}.hero-actions{order:4;margin-top:0}.scene-picker{order:5;margin-top:5px;gap:8px}.hero-foot{display:none}.map-top{inset:14px 14px auto}.map-eyebrow{font-size:9px;letter-spacing:1px}.map-preview{font-size:9px;margin-top:1px}.map-pause{font-size:10px;min-height:32px;padding:6px 8px}.map-pin{font-size:10px;min-height:34px;padding:6px 8px;gap:5px}.map-hero .signal-card{inset:auto 12px 12px;padding:11px 13px;min-height:64px;border-radius:12px;gap:10px}.map-hero .signal-symbol{width:33px;height:33px;border-radius:8px}.map-hero .signal-card strong{font-size:12px;margin:2px 0}.map-hero .signal-card p{font-size:10px}.map-hero .card-label{font-size:8px}.map-tools{inset:auto 15px 91px}.map-hint{font-size:10px}.map-reset{font-size:10px;min-height:30px;padding:4px 8px}html[lang=es] #hero-title{font-size:clamp(38px,9vw,60px);letter-spacing:-1.8px}html[lang=ar] #hero-title{font-size:clamp(38px,9vw,58px);line-height:1.45;letter-spacing:0}html[lang=ar] .map-hero .signal-card strong{font-size:12px}.scene-options{gap:6px}.scene-options button{font-size:11px;min-height:36px;padding:7px 12px}}
@media(max-width:440px){.header nav{width:auto;flex:1;justify-content:flex-end}.header .nav-status{display:none}.header .wordmark{font-size:30px}.header .brand-logo{width:35px;height:35px}.header .language-picker select{max-width:105px}.hero-copy>.eyebrow{font-size:8px}.map-hero,html[lang=ar] .map-hero{height:330px;min-height:330px}#hero-title br:first-of-type{display:block}#hero-title{font-size:45px;line-height:1.05}.map-preview{max-width:175px}.map-hero .card-label{display:none}}

.map-hero:not(.map-ready) .map-tools,.map-hero:not(.map-ready) .map-pause{display:none}@media(max-width:760px){#hero-title br:first-of-type{display:block}}
