/* Landing selector only: no studio or fulfillment styles. */
.city-hero { position:relative; min-height:900px; height:100svh; overflow:hidden; isolation:isolate; background:#031426; }
.city-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(3,20,38,.62),rgba(3,20,38,.24) 45%,rgba(3,20,38,.9)),url('./assets/landing-city-convex.png') center/cover; }
.city-landing .landing-nav { top:24px; right:4%; left:auto; }
.city-copy { position:absolute; top:125px; left:6%; width:48%; padding:0; }
.city-copy h1 { font-size:clamp(3.6rem,5.2vw,5.8rem); line-height:.9; }
.city-copy .landing-hero-lead { font-size:1rem; font-weight:400; margin-top:20px; }
.city-message { position:absolute; top:160px; right:6%; width:30%; font-size:.95rem; line-height:1.7; color:rgba(247,244,237,.8); }
.city-scene { position:absolute; top:360px; bottom:190px; left:0; right:0; perspective:1500px; }
.city-carousel { position:absolute; inset:0; transform-style:preserve-3d; transition:transform 1.5s cubic-bezier(.22,.61,.36,1); }
.city-pole { position:absolute; left:50%; top:0; bottom:0; width:20px; transform:translateX(-50%); pointer-events:none; background:linear-gradient(90deg,#101317 0%,#686c6f 16%,#c2c3bc 27%,#454b50 43%,#141a20 58%,#a77b44 76%,#31383e 87%,#080d13 100%); border:1px solid rgba(222,205,166,.42); border-radius:10px; box-shadow:inset 2px 0 3px rgba(255,255,255,.22),8px 0 18px rgba(0,0,0,.35); }
.city-pole::before,.city-pole::after { content:""; position:absolute; left:50%; transform:translateX(-50%); width:34px; height:14px; border:1px solid rgba(222,205,166,.5); border-radius:3px; background:linear-gradient(180deg,#aeb0a6,#494d4e 32%,#131a20 56%,#a77b44 84%,#34383a); box-shadow:0 3px 5px rgba(0,0,0,.3); }
.city-pole::before { top:24%; }.city-pole::after { bottom:16%; }
.city-arm { position:absolute; left:50%; top:50%; width:clamp(30px, 5vw, 72px); height:5px; transform-origin:0 50%; transform-style:preserve-3d; transform:translateY(-50%) rotateY(var(--panel-angle)); background:linear-gradient(180deg,#b6ac94,#434b50 45%,#141a20 70%,#8d7653); box-shadow:0 3px 5px rgba(0,0,0,.35); }
.city-arm::before { content:""; position:absolute; left:-17px; top:50%; width:34px; height:24px; transform:translateY(-50%); border:1px solid rgba(226,195,144,.65); border-radius:4px; background:linear-gradient(180deg,#c1b79c,#525958 30%,#182129 58%,#a77b44 87%,#333b41); box-shadow:inset 0 1px 2px rgba(255,255,255,.35),0 4px 8px rgba(0,0,0,.35); }
.city-arm::after { content:""; position:absolute; right:-5px; top:50%; width:12px; height:34px; transform:translateY(-50%); border-radius:3px; background:linear-gradient(90deg,#2b343d,#b4a382 50%,#40474b); }
.city-panel { position:absolute; width:min(510px,40vw); aspect-ratio:16/9; left:100%; top:50%; transform:translateY(-50%); display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:20px; padding:28px; border:1px solid rgba(226,195,144,.66); border-radius:12px; background:linear-gradient(135deg,rgba(24,47,70,.9),rgba(5,18,32,.88)); box-shadow:0 22px 48px rgba(0,0,0,.28); color:var(--ink); text-align:left; cursor:pointer; backface-visibility:hidden; }
.city-panel-copy { display:block; }
.city-panel-title { display:block; font-size:1.65rem; font-weight:500; margin-bottom:10px; }
.city-panel-description { display:block; font-size:.85rem; line-height:1.6; color:rgba(247,244,237,.75); }
.city-panel-arrow { display:grid; place-items:center; margin-top:16px; width:32px; height:32px; border:1px solid var(--gold); border-radius:50%; }
.city-visual { display:block; position:relative; width:100%; height:140px; }
.city-flip { height:115px; background:url('./assets/seasons-reel/autumn.png') center/cover; border:7px solid #090c10; outline:1px solid #9b7542; box-shadow:-8px 8px #11161b; }
.city-flip::before { content:""; position:absolute; left:-16px; top:0; bottom:0; width:9px; background:repeating-linear-gradient(#a27a45 0 12px,#15191e 12px 20px); }
.city-book::before,.city-book::after { content:""; position:absolute; top:10%; width:50%; height:80%; background:linear-gradient(140deg,#eee7dd,#b4a28f); border:1px solid #514a43; }
.city-book::before { left:0; transform:skewY(-7deg); }.city-book::after { right:0; transform:skewY(7deg); }
.city-envelope { height:100px; background:#d8c7b5; border:1px solid #ac9171; }
.city-envelope::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,#eadfd2,#9b856e); clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%); }
.city-envelope::after { content:"CD"; position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#efd192,#9c692b); color:#513414; font:14px Georgia,serif; border:1px solid #ac792e; }
.city-image { background:url('./assets/reference-reel-source.png') center/cover; border:8px solid #eee7de; transform:rotate(4deg); }
.city-footer { position:absolute; bottom:24px; left:6%; right:6%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.city-controls { display:flex; align-items:center; gap:12px; }
.city-controls button { width:42px; height:42px; border-radius:50%; border:1px solid rgba(220,176,107,.8); background:rgba(3,17,31,.8); color:var(--ink); cursor:pointer; font-size:20px; }
.city-controls span { min-width:110px; text-align:center; font-size:.85rem; }
.city-footer .landing-actions { margin:0; }
.city-note { margin:0; max-width:620px; text-align:center; font-size:.8rem; line-height:1.5; color:rgba(247,244,237,.65); }
.city-detail { max-width:760px; }.city-detail-copy { padding:24px; }.city-detail-copy p { line-height:1.7; }.city-detail-copy a { margin-top:16px; }
@media(max-width:1100px) { .city-copy { width:52%; }.city-copy h1 { font-size:clamp(3.2rem,6vw,5.5rem); }.city-panel { width:38vw; } }
@media(max-width:720px) {
 .city-hero { height:auto; min-height:850px; }
 .city-landing .landing-nav { left:22px; right:22px; top:20px; }
 .city-copy { top:155px; left:6%; width:88%; }.city-copy h1 { font-size:clamp(2.6rem,11vw,4.2rem); }.city-copy .landing-hero-lead { font-size:.95rem; margin-top:16px; }
 .city-message { top:330px; left:6%; right:auto; width:88%; font-size:.85rem; }
 .city-scene { top:440px; bottom:auto; height:220px; perspective:none; }
 .city-pole { left:4%; top:0; bottom:0; width:14px; }.city-carousel { transform:none !important; }
 .city-arm { left:6%; top:0; width:88%; height:100%; transform:none; background:none; box-shadow:none; opacity:0; visibility:hidden; transition:opacity 1s ease; }
 .city-arm.is-active { opacity:1; visibility:visible; }
 .city-arm::before { left:calc(-2vw - 12px); width:24px; height:22px; }
 .city-arm::after { left:-2vw; right:auto; width:2vw; height:4px; }
 .city-panel { left:0; top:0; width:100%; height:100%; aspect-ratio:auto; transform:none; padding:20px; gap:16px; }
 .city-panel-title { font-size:1.4rem; }.city-panel-description { font-size:.8rem; }
 .city-footer { bottom:20px; gap:12px; }.city-footer .landing-actions { flex-direction:row; }.city-footer .landing-actions a { width:auto; min-height:42px; padding:0 14px; font-size:.75rem; }.city-note { font-size:.7rem; }
 .city-detail { width:calc(100% - 24px); max-height:90svh; }
}
@media(prefers-reduced-motion:reduce) { .city-carousel,.city-arm { transition:none; } }