.skyline-background{display:none;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#041022 url('assets/manchester-central-night.jpg') center/cover no-repeat}
.skyline-mode .skyline-background{display:block}.skyline-mode .climb-background,.skyline-mode .story-background{display:none}
.skyline-background canvas{width:100%;height:100%;display:block}
.skyline-shade{position:absolute;inset:0;background:linear-gradient(90deg,#031021e8 0%,#031021a3 33%,#03102120 69%,#03102112),linear-gradient(0deg,#03102155,transparent 50%)}
.skyline-mode .hero{background:transparent;min-height:calc(100svh - 96px)}
.skyline-mode .hero h1 em{color:#82bcff}
.skyline-mode .problem{background:linear-gradient(90deg,#06172bbb,#06172b40)}
.skyline-mode .platforms{background:#eaf2fca8}.skyline-mode .approach{background:#05132699}.skyline-mode .contact{background:#eaf3fcb0}
@media(max-width:700px){.skyline-shade{background:linear-gradient(90deg,#031021e6,#03102190 65%,#03102140)}.skyline-mode .hero{min-height:calc(100svh - 78px)}}

.city-photo-label{display:none;position:fixed;left:22px;bottom:18px;z-index:7;color:#e3f3ff;background:#041426c9;padding:8px 12px;border:1px solid #5e94be55;border-radius:5px;font-size:12px;line-height:1.4}.skyline-mode .city-photo-label{display:block}.city-photo-label a{display:block;font-size:11px;color:#a8cce8;text-decoration:underline}.photo-credit{font-size:12px;color:#435775;flex-basis:100%}footer{flex-wrap:wrap}

/* Calm translucent surfaces keep copy distinct from the animated photography. */
.skyline-mode .hero-copy{padding:28px 32px;border-radius:12px;background:linear-gradient(115deg,#051326cf,#05132699);backdrop-filter:blur(8px);box-shadow:0 16px 60px #00000018}
.skyline-mode .problem{background:#06172bbf;backdrop-filter:blur(8px)}
.skyline-mode .approach{background:#051326cf;backdrop-filter:blur(8px)}
.skyline-mode .platforms{background:#edf4fc52;backdrop-filter:none;-webkit-backdrop-filter:none}
.skyline-mode .platforms .section-top{background:#edf4fcb8;border-radius:10px;padding:24px}
.skyline-mode .platforms .disclosure{background:#edf4fcb8;border-radius:6px;padding:12px 16px}
.skyline-mode .contact{background:#edf4fce3;backdrop-filter:blur(9px)}
.skyline-mode .platform-card{background:#ffffffe3}
.skyline-mode .steps p,.skyline-mode .approach .section-top>p,.skyline-mode .problem-list p{color:#d4e0f0}
@media(max-width:700px){.skyline-mode .hero-copy{padding:22px 20px}.skyline-mode .hero h1{font-size:clamp(2.4rem,8vw,4rem)}.skyline-mode .hero-description{max-width:100%}}

/* A glass navigation bar belongs to the same night scene as the page. */
.skyline-mode .header{position:sticky;top:0;z-index:20;height:88px;background:#061426b8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #8fc7ff26;box-shadow:0 8px 32px #00000012;color:#d7e6fa}
.skyline-mode .header .brand img{width:128px;filter:brightness(0) invert(1);opacity:.95}
.skyline-mode .header nav{gap:32px}
.skyline-mode .header nav>a{transition:color .2s,background .2s,border-color .2s}
.skyline-mode .header nav>a:hover{color:#fff}
.skyline-mode .header nav>a:not(.nav-cta){padding:12px 0;border-bottom:1px solid transparent}
.skyline-mode .header nav>a:not(.nav-cta):hover{border-bottom-color:#459cff}
.skyline-mode .header .nav-cta{border:1px solid #579dff66;border-radius:999px;background:#1671e52b;color:#eaf4ff;padding:10px 20px;gap:22px}
.skyline-mode .header .nav-cta:hover{background:#1671e54d;border-color:#71b3ff}
.skyline-mode .header .nav-cta span{color:#78bdff}
@media(max-width:700px){.skyline-mode .header{height:76px}.skyline-mode .header .brand img{width:108px}.skyline-mode .header .nav-cta{padding:9px 16px;gap:16px}}