/* City arrival: a photographic place, a dimensional real guide, a useful next step. */
.city{padding:0;overflow:visible;background:#041f33;color:var(--cream);color-scheme:dark}
.city-journey{position:relative}
.city-stage{position:relative;isolation:isolate;min-height:calc(100svh - var(--header-h));padding:1.5rem var(--gutter);overflow:clip;display:flex;flex-direction:column;gap:1rem;background:var(--deepest)}
.city-journey.is-pinned{height:calc(225svh - var(--header-h))}
.city-journey.is-pinned .city-stage{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));min-height:0}
.city-backdrop,.city-veil{position:absolute;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.city-backdrop picture{position:absolute;inset:-8%;transform-origin:50% 58%}
.city-backdrop img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.city-veil{z-index:-2;background:linear-gradient(90deg,#041f33f5 0%,#041f33d9 24%,#041f3340 58%,#041f3338),linear-gradient(0deg,#041f33 0%,#041f33a8 12%,#041f3300 57%,#041f33d9 100%)}
.city-arrival-top,.city-arrival-bottom{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;position:relative;z-index:3;flex-shrink:0}
.city-arrival-top{padding-bottom:.5rem}.city-edition{font-size:1rem;line-height:1.5;color:var(--cream)}
.city h2.city-title{font-size:clamp(4rem,calc(2rem + 9vw),11rem);letter-spacing:-.065em;line-height:1.02;font-weight:650;color:var(--cream);position:relative;z-index:2;margin-left:-.055em;text-shadow:0 4px 35px #041f3377;overflow-wrap:anywhere}
.city-title>span{color:var(--gold)}
.city-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.45fr);align-items:center;gap:2.8rem;flex:1;min-height:0}
.city-content{max-width:29rem;padding:1.6rem 0;position:relative;z-index:5}
.city-invitation{font-size:clamp(2rem,3.3vw,3.25rem);line-height:1.13;letter-spacing:-.045em;font-weight:550;overflow-wrap:anywhere}
.city-invitation em{color:var(--gold)}
.city .body-copy{color:var(--cream);font-size:1.125rem;line-height:1.7;max-width:24rem;margin-top:1.4rem}
.city .button{margin-top:1.7rem;box-shadow:0 8px 50px #041f334d}
.city-note{font-size:1rem;color:var(--cream);margin-top:.8rem;line-height:1.5}
.city-visual-track{position:relative;width:100%;min-width:0;max-width:none;margin:0;padding:0;perspective:none}
.city-depth{position:relative;isolation:isolate;perspective:1500px;padding:2.2rem 2.5rem 0 0}
.city-aura{position:absolute;inset:-25% -10%;z-index:-1;background:radial-gradient(ellipse closest-side,#2fa8a238,transparent);pointer-events:none}
.city-thread{position:absolute;inset:-4% -7%;width:115%;height:110%;fill:none;stroke-width:2;pointer-events:none;overflow:visible;z-index:-1}
.city-thread-base{stroke:#f5a62326}.city-thread-draw{stroke:url(#city-route-color);stroke-dasharray:1;stroke-dashoffset:0}
.city .portal{position:relative;top:auto;width:95%;z-index:2}
.city .portal-shell{border:1px solid #b4d1ce;border-radius:.7rem;background:#0b292e;box-shadow:0 40px 90px #010e1be6,0 0 0 6px #041f3390;transform-origin:52% 60%;overflow:hidden}
.city .portal-screen{height:clamp(20rem,30vw,26rem);min-height:0;max-height:none;overflow:hidden}
.city .portal-screen img{display:block;width:100%;height:auto;max-width:none}
.city .portal figcaption{position:relative;display:block;font-size:1rem;line-height:1.55;padding:1.25rem 0 0;color:#d9e6e8;max-width:85%}
.city .capture-label{font-size:1rem;display:block;max-width:none;color:var(--cream);font-weight:600;margin-bottom:.35rem}
.city .portal figcaption>span:last-child{display:block;font-size:1rem}
.city-pocket{position:absolute;right:-.2rem;bottom:6.2rem;width:25%;max-width:12.5rem;padding:.32rem;border-radius:1.2rem;background:linear-gradient(135deg,#9db5b7,#082e49 40%,#617e87);box-shadow:0 22px 45px #0009,0 0 0 1px #b3cac688;z-index:4;pointer-events:none;transform:rotateZ(6deg)}
.city-pocket-screen{overflow:hidden;border-radius:.95rem;background:#041f33;border:3px solid #041f33}
.city-pocket img{width:100%;height:auto}
.city-moment{position:absolute;right:1.3rem;top:-1rem;z-index:4;display:flex;align-items:center;gap:.75rem;font-size:1.125rem;line-height:1.35;padding:.7rem 1rem;background:#041f33f2;box-shadow:0 12px 35px #041f3366;border-left:2px solid var(--gold)}
.city-moment strong{font-weight:600;color:var(--gold)}.moment-line{width:1.6rem;height:1.6rem;border:1px solid var(--teal);border-radius:50%;position:relative}.moment-line:before{content:'';position:absolute;inset:35%;background:var(--gold);border-radius:50%}
.city-arrival-bottom{border-top:1px solid #a3bcbe55;padding-top:1.1rem;font-size:1rem;line-height:1.5;margin-top:1rem}
.city-arrival-bottom>p:last-child{color:#d9e6e8}
.city .local-proof{display:block;position:relative;margin:0;padding:5rem var(--gutter) 2.5rem;border:0;background:linear-gradient(145deg,#041f33,#082e49);overflow:clip}
.proof-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem}
.proof-heading .eyebrow{font-size:1.125rem;color:var(--cream);max-width:15rem}
.city .proof-intro{font-size:clamp(2.4rem,4.4vw,4.5rem);line-height:1.1;text-align:right;color:var(--cream);letter-spacing:-.05em}
.city .proof-intro strong{color:var(--gold);font-weight:600}
.city .proof-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
.city .proof-list li{padding:1.6rem 0 0;border:0;border-top:1px solid #719297;display:grid;grid-template-columns:auto 1fr;gap:1.5rem}
.city .proof-list li>span{font-size:1.125rem;line-height:1.5;color:var(--gold);margin:.25rem 0 0}
.city .proof-list h3{font-size:clamp(1.9rem,2.8vw,3rem);line-height:1.08;letter-spacing:-.04em;font-weight:550;margin:0 0 1.3rem}
.city .proof-list h3 em{color:#80d1ca}
.city .proof-list p{font-size:1.125rem;color:#d9e6e8;line-height:1.65;max-width:23rem}
.city-photo-credit{padding:0 var(--gutter) 2.5rem;font-size:1rem;line-height:1.6;color:#d9e6e8;background:linear-gradient(145deg,#041f33,#082e49)}
.source-credit{text-decoration:underline;text-underline-offset:.2em}.source-credit:hover{color:var(--gold)}
.cinematic .city-backdrop picture,.cinematic .city-pocket{will-change:transform}
@media(max-width:1200px){
 .city-stage{padding-top:1.5rem}.city-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.25fr);gap:2rem}
 .city h2.city-title{font-size:clamp(4rem,calc(2rem + 8vw),9rem)}.city-invitation{font-size:2.25rem}.city-depth{padding-right:1.4rem}
 .city .portal-screen{height:23rem}.city-pocket{bottom:7.5rem;right:-.4rem;width:30%}
 .city .portal figcaption{max-width:100%}.city .proof-list{gap:1.6rem}.city .proof-list li{gap:1rem}
}
@media(max-width:850px){
 .city-stage{display:block;padding:2.25rem var(--gutter) 1.5rem;min-height:0}
 .city-backdrop{height:55rem}.city-backdrop picture{inset:-5% -30%}.city-backdrop img{object-position:43% 55%}
 .city-veil{background:linear-gradient(90deg,#041f33e3,#041f33b8),linear-gradient(0deg,#041f33 0%,#041f33 25%,#041f3300 80%,#041f33c9)}
 .city-arrival-top{gap:1rem}.city-edition{max-width:10rem;text-align:right}
 .city h2.city-title{font-size:clamp(3rem,calc(1.5rem + 7.5vw),6rem);margin:1rem 0 0 -.055em;line-height:1.1}
 .city-grid{display:block}.city-content{max-width:35rem;padding:2rem 0 1rem}
 .city-invitation{font-size:clamp(2.2rem,5vw,3rem)}.city .body-copy{max-width:32rem}
 .city-visual-track{max-width:30rem;margin:1.5rem auto 0;padding:0}
 .city-depth{padding:1.5rem .6rem 0;min-height:0}
 .city .portal{width:100%;max-width:23rem;margin:auto;position:relative;top:auto}
 .city .portal-shell{border-radius:1.15rem;border-width:3px;box-shadow:0 24px 60px #010d1ae6,0 0 0 6px #183e4e}
 .city .portal-screen{height:29rem;max-height:55svh;min-height:20rem}
 .city .portal figcaption{max-width:none;padding-top:1.35rem}
 .city-pocket,.city-moment{display:none}
 .city-thread{inset:0 -20%;width:140%;height:100%}
 .city-visual-track.is-pinned:after{content:'';display:block;height:45svh}
 .city-visual-track.is-pinned{padding-bottom:0}
 .city-visual-track.is-pinned .city-depth{position:sticky;top:calc(var(--header-h) + 1rem)}
 .city-visual-track.is-pinned .portal{position:relative;top:auto}
 .city-arrival-bottom{margin-top:2rem;display:block}.city-arrival-bottom>p:last-child{margin-top:.5rem}
 .city .local-proof{padding-top:3.5rem}.proof-heading{display:block;margin-bottom:2.5rem}
 .city .proof-intro{text-align:left;font-size:clamp(2.5rem,6vw,4rem);margin-top:1.5rem}
 .city .proof-list{gap:2rem;grid-template-columns:1fr}
 .city .proof-list li{grid-template-columns:2.8rem 1fr;padding-top:1.5rem;gap:1rem}
 .city .proof-list li>span{font-size:1.25rem}.city .proof-list h3{font-size:2rem;margin-bottom:.8rem}
 .city .proof-list h3 br{display:none}
}
@media(max-width:430px){
 .city-edition{display:none}.city-stage{padding-top:2rem}
 .city .portal-screen{height:26rem}.city h2.city-title{font-size:clamp(2rem,calc(1.125rem + 7vw),4rem)}
 .city .button{width:100%;gap:1rem}.city-invitation{font-size:2.2rem}
}
/* Quiet/failed/short layouts retain every real product detail in native flow. */
.static-motion .city-journey{height:auto}
.static-motion .city-stage{height:auto;position:relative;min-height:0}
.static-motion .city-visual-track{padding-bottom:0}
.static-motion .city-depth{position:relative;top:auto}
.static-motion .city .portal-screen{height:auto;max-height:none}
.static-motion .city-backdrop picture,.static-motion .city-pocket,.static-motion .city-moment{transform:none!important;will-change:auto}
@media(prefers-reduced-motion:reduce){
 .city-journey{height:auto!important}.city-stage{position:relative!important;height:auto!important}
 .city-visual-track{padding-bottom:0!important}.city-depth{position:relative!important;top:auto!important}
 .city .portal-screen{height:auto;max-height:none}
}