*{box-sizing:border-box}html{background:#172540;color:#fff;font-family:Arial,Helvetica,sans-serif}body{margin:0}a{color:inherit}header{position:absolute;top:20px;inset-inline-end:24px;z-index:3}nav{display:flex;flex-wrap:wrap;gap:5px;padding:6px 12px;border-radius:30px;background:#132440a6;backdrop-filter:blur(12px)}nav a{padding:8px;font-size:12px;text-decoration:none}nav a[aria-current]{color:#c4ff25}.landscape{position:relative;min-height:100svh;display:grid;align-content:center}.landscape>img{width:100%;height:auto;display:block}.hero-copy{position:absolute;inset-inline:8%;bottom:10%;text-shadow:0 2px 20px #102036,0 1px 4px #102036}.hero-copy h1{font-size:clamp(26px,4.3vw,66px);font-weight:400;letter-spacing:-.03em;margin:0 0 12px;max-width:850px;line-height:1.08}.hero-copy p{font-size:clamp(16px,1.7vw,25px);margin:0 0 28px}.contact-link{font-size:18px;text-underline-offset:8px;text-decoration-thickness:1px}.contact-link:hover{color:#d4ff69}#contact{display:none;position:fixed;inset:0;z-index:5;overflow:auto;background:linear-gradient(90deg,#0b234d20,#0b234d15),url('/assets/city-approved-v5.webp') center/cover no-repeat;padding:85px 6% 40px}#contact:target{display:grid;place-items:center}.back{position:absolute;top:25px;inset-inline-start:30px;padding:10px 16px;background:#132440c7;border-radius:30px;text-decoration:none;font-size:14px}.glass{width:min(100%,470px);background:#102449cf;backdrop-filter:blur(16px);border:1px solid #ffffff70;border-radius:22px;padding:32px;box-shadow:0 20px 80px #00173f60}.glass h2{font-size:32px;font-weight:400;margin:0 0 25px}label{display:block;font-size:14px;margin:0 0 17px}input,textarea,button{font:inherit}input:not([type=checkbox]),textarea{display:block;width:100%;margin-top:8px;border:1px solid #ffffff85;border-radius:8px;padding:12px;background:#ffffffed;color:#132440}textarea{resize:vertical}.consent{display:flex;gap:10px;font-size:12px;line-height:1.5}.consent input{width:18px;min-width:18px;height:18px}.send{padding:12px 24px;border:1px solid #fff8;border-radius:25px;background:#ffcf80;color:#142440;cursor:pointer}.send:disabled{opacity:.5}details{font-size:12px;line-height:1.6;margin-top:12px}summary{cursor:pointer}#receipt{font-size:14px;line-height:1.5}.trap{display:none}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #c4ff25;outline-offset:4px}body:has(#contact:target){overflow:hidden}@media(max-width:700px){header{top:12px;inset-inline:12px}nav{justify-content:center;gap:0}nav a{font-size:11px;padding:8px}.landscape{min-height:100svh;overflow:hidden}.landscape>img{height:100svh;object-fit:cover;object-position:52% center}.hero-copy{inset-inline:7%;bottom:9%;padding:20px 0;background:linear-gradient(90deg,#12254070,transparent)}.hero-copy h1{font-size:38px}.hero-copy p{font-size:17px}.glass{padding:25px}#contact{padding:82px 18px 24px}.back{inset-inline-start:18px}.glass h2{font-size:28px}}

.email-address{display:block;margin:-10px 0 24px;color:#ffdc9d;text-underline-offset:4px}

/* Owner rule: all interface text uses lowercase on both screens. */
body,h1,h2,h3,p,a,span,label,button,summary,nav,details,footer{text-transform:lowercase}input,textarea{text-transform:none}

/* Complete artwork on every screen: never crop either image. */
.landscape>img{height:auto;object-fit:contain;object-position:center}
#contact{background-color:#172540;background-size:contain;background-attachment:fixed}
.contact-art{display:none}
@media(max-aspect-ratio:4/3){
 header{position:relative;top:auto;inset-inline:auto;padding:12px}
 nav{justify-content:center;gap:2px}nav a{padding:10px 8px;min-height:36px}
 .landscape{min-height:0;display:block;overflow:visible}
 .landscape>img{width:100%;height:auto;object-fit:contain}
 .hero-copy{position:relative;inset:auto;bottom:auto;padding:30px 7% 48px;background:none;text-shadow:none}
 .hero-copy h1{font-size:clamp(27px,4.5vw,48px);line-height:1.15;margin-bottom:12px}
 .hero-copy p{font-size:clamp(16px,2.5vw,22px);margin-bottom:22px}
 .contact-link{display:inline-block;padding:10px 0;min-height:44px}
 #contact{background:#172540;padding:0 0 32px;align-content:start;gap:0}
 #contact:target{display:block}
 .back{position:relative;top:auto;inset:auto;display:inline-block;margin:12px 18px;min-height:40px}
 .contact-art{display:block;width:100%;height:auto}
 .glass{margin:24px auto 0;width:calc(100% - 36px);max-width:570px;padding:24px}
 input:not([type=checkbox]),textarea{font-size:16px}
}
@media(max-height:550px) and (min-aspect-ratio:4/3){#contact{place-items:start center}.glass{margin:auto}}

/* Full-screen portrait phone experience; dedicated vertical artwork. */
@media(max-width:700px) and (orientation:portrait){
 html,body{height:100%;overflow:hidden}
 header{position:fixed;top:env(safe-area-inset-top,0px);inset-inline:0;padding:10px;z-index:3}
 nav{background:#1324408f;gap:0;padding:5px}nav a{font-size:10px;padding:8px 7px}
 .landscape{position:fixed;inset:0;height:100dvh;min-height:100dvh;overflow:hidden;background:url('/assets/phone-landscape.webp') center/cover no-repeat}
 .landscape>img{display:none}
 .hero-copy{position:absolute;inset-inline:7%;bottom:max(6%,env(safe-area-inset-bottom,0px));padding:18px 0;background:none;text-shadow:0 2px 10px #101c37,0 1px 3px #101c37}
 .hero-copy h1{font-size:clamp(26px,7vw,38px);line-height:1.12;max-width:330px;margin-bottom:12px}
 .hero-copy p{font-size:16px;margin-bottom:16px}.contact-link{font-size:18px;padding:10px 0}
 #contact{height:100dvh;padding:66px 18px max(18px,env(safe-area-inset-bottom,0px));background:#172540 url('/assets/phone-city.webp') center/cover no-repeat;background-attachment:local;overflow:auto}
 #contact:target{display:grid;place-items:center;align-content:center}
 .contact-art{display:none}.back{position:absolute;top:12px;inset-inline-start:12px;margin:0;font-size:12px;padding:10px 12px}
 .glass{width:100%;max-width:420px;margin:0;padding:22px;background:#102449c7;backdrop-filter:blur(9px)}
 .glass h2{font-size:27px;margin-bottom:22px}.email-address{margin-bottom:19px}label{margin-bottom:14px}.consent{font-size:11px}textarea{height:100px;min-height:76px}.send{min-height:44px}#receipt:empty{display:none}
}
@media(max-width:700px) and (orientation:portrait) and (max-height:700px){#contact:target{align-content:start}.glass{padding:18px}.glass h2{margin-bottom:18px}label{margin-bottom:10px}textarea{height:78px}.email-address{margin-bottom:14px}}

/* Compact contact overlay: leave the city visible. */
#contact:target{display:grid;place-items:end center;align-content:end;padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
.glass{position:relative;width:min(260px,calc(100% - 36px));max-width:260px;margin:0;padding:12px;border-radius:14px;background:#102449b8;backdrop-filter:blur(5px);box-shadow:0 8px 24px #00173f30}
.glass h2{display:none}.email-address{font-size:12px;line-height:18px;margin:0 0 7px}
.glass label:not(.consent){margin:0 0 6px}.field-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.glass input:not([type=checkbox]),.glass textarea{font-size:16px;margin:0;padding:7px 9px;border-radius:6px}
.glass input:not([type=checkbox]){height:36px}.glass textarea{height:44px;min-height:44px;resize:vertical}
.glass .consent{font-size:10px;line-height:12px;gap:6px;margin:5px 0 3px;align-items:center;min-height:30px}
.glass .consent input{margin:0;width:18px;min-width:18px;height:18px}
.glass .send{font-size:13px;min-height:40px;padding:8px 16px}
.glass details{position:absolute;bottom:20px;inset-inline-end:12px;font-size:11px;margin:0}
.glass details[open]{position:relative;bottom:auto;inset-inline-end:auto;margin-top:8px}
#receipt:empty{display:none}#receipt{font-size:12px;margin:8px 0 0}

/* v8: both scenes follow the viewport on desktop, tablet and phone. */
html,body{width:100%;height:100%;overflow:hidden}
header{position:fixed;top:0;inset-inline:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right));display:flex;justify-content:flex-end}
nav{width:max-content;max-width:100%;justify-content:center}
.landscape{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;min-height:0;display:block;overflow:hidden;background:#172540 url('/assets/landscape-v4.webp') center/cover no-repeat}
.landscape>img,.contact-art{display:none}
.hero-copy{position:absolute;inset-inline:7%;bottom:max(6%,env(safe-area-inset-bottom));padding:0;background:none;text-shadow:0 2px 10px #101c37,0 1px 3px #101c37}
.hero-copy h1{font-size:clamp(26px,4.3vw,66px);max-width:850px;line-height:1.12}
#contact{height:100vh;height:100dvh;min-height:0;background:#172540 url('/assets/city-approved-v5.webp') center/cover no-repeat;background-attachment:local;padding:66px max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom));overflow:auto}
#contact:target{display:grid;place-items:end center;align-content:end}
.back{position:absolute;top:max(12px,env(safe-area-inset-top));inset-inline-start:max(12px,env(safe-area-inset-left));margin:0;font-size:12px;min-height:40px}
@media(orientation:portrait){
 .landscape{background-image:url('/assets/phone-landscape.webp')}
 #contact{background-image:url('/assets/phone-city.webp')}
 header{justify-content:center}
 .hero-copy h1{max-width:620px}
}
@media(max-width:700px) and (orientation:portrait){.hero-copy h1{font-size:clamp(26px,7vw,38px);max-width:330px}}
@media(orientation:landscape) and (max-height:550px){
 header{padding:8px max(12px,env(safe-area-inset-right))}
 nav{padding:3px 8px}nav a{font-size:10px;padding:6px;min-height:28px}
 .hero-copy{bottom:max(5%,env(safe-area-inset-bottom))}
 .hero-copy h1{font-size:28px;margin-bottom:8px}.hero-copy p{font-size:16px;margin-bottom:8px}
 .contact-link{padding:8px 0;min-height:36px}
 #contact{padding-top:54px}#contact:target{place-items:end end;align-content:end;padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-height:320px){#contact:target{align-content:start}}