/* Homepage hero slider: GTA projects map, 3D view around the CN Tower, AI outlook report. */
.hs{background:#0A1640;color:#fff;position:relative}
/* Slides sit on top of each other (the hero is as tall as the tallest); the script slides them in and out sideways. */
.hs-track{display:grid;overflow:hidden}
.hs-slide{grid-area:1/1;display:flex;transition:transform .7s cubic-bezier(.65,0,.35,1);will-change:transform}
.hs-slide:not(.is-active){visibility:hidden}
.hs-slide>.gm-hero{flex:1;display:flex;align-items:center;padding-bottom:64px}
.hs-slide>.gm-hero>.gm-wrap{width:100%}
.gm-copy h2{color:#fff;font-size:clamp(2.1rem,3.9vw,3.2rem);line-height:1.05;margin:0;font-weight:800}
.gm-copy h2 em{font-style:normal;color:#9ec3f2}

/* Dots: which slide is showing; each one moves to its slide */
.hs-dots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:4px;z-index:5}
.hs-dot{all:unset;box-sizing:border-box;cursor:pointer;height:28px;min-width:28px;display:flex;align-items:center;justify-content:center;border-radius:999px}
.hs-dot::before{content:"";width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.35);transition:width .3s,background .3s}
.hs-dot:hover::before{background:rgba(255,255,255,.65)}
.hs-dot.is-on::before{width:30px;background:#fff}
.hs-dot:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* Slide 2: the 3D view */
.hs-keys{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;color:rgba(255,255,255,.85)}
.hs-keys li{display:inline-flex;align-items:center;gap:8px}
.hs-keys b{color:#fff;font-weight:700}
.hs-sw{width:12px;height:12px;border-radius:3px;background:var(--c);box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.hs-3d{position:relative;display:block;aspect-ratio:860/720;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4);border:1px solid rgba(158,195,242,.18);background:radial-gradient(circle at 50% 40%,#1B2F6E,#0B1745 75%);color:#fff;text-decoration:none}
.hs-3d .hs-3d-map{position:absolute;inset:0;display:block;width:100%;height:100%}
.hs-3d-map canvas{outline:none}
.hs-3d-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 .9rem var(--font-body);color:rgba(255,255,255,.7);transition:opacity .4s}
.hs-3d[data-state="ready"] .hs-3d-msg{opacity:0;pointer-events:none}
.hs-3d[data-state="loading"] .hs-3d-msg::before{content:"";width:16px;height:16px;margin-right:10px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:hsSpin .9s linear infinite}
@keyframes hsSpin{to{transform:rotate(360deg)}}
.hs-3d-tag,.hs-3d-open{position:absolute;z-index:2;font:600 .8rem var(--font-body);padding:8px 12px;border-radius:999px;background:rgba(10,22,64,.72);border:1px solid rgba(158,195,242,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hs-3d-tag{left:14px;top:14px;color:rgba(255,255,255,.9)}
.hs-3d-open{right:14px;top:14px;color:#fff;display:inline-flex;align-items:center;gap:6px;transition:background .2s}
.hs-3d:hover .hs-3d-open{background:#8B1A1A;border-color:#8B1A1A}
.hs-3d:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hs-3d .maplibregl-ctrl-attrib{font-size:10px}

/* Slide 3: the report */
.hs-report{position:relative;display:flex;flex-direction:column;gap:18px;aspect-ratio:860/720;padding:clamp(22px,3.4vw,40px);border-radius:18px;overflow:hidden;text-decoration:none;color:#fff;background:linear-gradient(155deg,#1D3A84 0%,#10225C 55%,#0B1745 100%);box-shadow:0 30px 70px rgba(0,0,0,.4);border:1px solid rgba(158,195,242,.18)}
.hs-report::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(158,195,242,.22),transparent 70%);pointer-events:none}
.hs-report-kicker{font:700 .72rem var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:#E0786A}
.hs-report-title{font:800 clamp(1.3rem,2.2vw,1.85rem)/1.15 var(--font-head);max-width:30ch}
.hs-chart{display:grid;gap:12px;margin-top:auto}
.hs-chart-cap{font-size:.8rem;color:rgba(255,255,255,.7)}
.hs-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:4px 12px;align-items:center;font-size:.85rem}
.hs-row>span:first-child{grid-row:span 2;color:rgba(255,255,255,.85)}
.hs-row.is-ca>span:first-child{color:#fff;font-weight:700}
.hs-b{display:flex;align-items:center;gap:8px;font-size:.78rem;color:rgba(255,255,255,.75)}
.hs-b i{display:block;height:10px;border-radius:3px;width:var(--w);background:rgba(255,255,255,.28)}
.hs-b.c i{background:#9ec3f2}
.hs-row.is-ca .hs-b.c i{background:#E0786A}
.hs-b.c{color:#fff;font-weight:600}
.hs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid rgba(158,195,242,.2);padding-top:16px}
.hs-stats span{font-size:.76rem;line-height:1.35;color:rgba(255,255,255,.72)}
.hs-stats b{display:block;font:800 1.25rem var(--font-head);color:#fff;margin-bottom:2px}
.hs-report-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:#fff}
.hs-report:hover .hs-report-cta{text-decoration:underline}
.hs-report:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (max-width:980px){
 .hs-slide>.gm-hero{padding-top:32px;padding-bottom:60px;align-items:flex-start}
 .hs-3d,.hs-report{aspect-ratio:auto}
 .hs-3d{height:min(78vw,520px)}
 .hs-dots{bottom:14px}
}
@media (max-width:600px){
 .hs-row{grid-template-columns:92px minmax(0,1fr)}
 .hs-stats b{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){
 .hs-slide{transition:none}
}