.smart-city{position:relative;background:#fff8ec;padding:0;isolation:isolate}
.smart-city-scene{position:relative;width:100%;aspect-ratio:1920/640;overflow:hidden;background:#e7d9b5;container-type:inline-size}
.smart-city-background{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.smart-city-traffic{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.smart-city-vehicle{position:absolute;display:block;width:var(--vehicle-width);height:auto;top:var(--vehicle-y);transform:translateY(-100%);left:0;animation:c3-city-drive var(--vehicle-duration) linear infinite;animation-delay:var(--vehicle-delay);filter:drop-shadow(0 3px 2px #33291824);will-change:transform;pointer-events:none}
/* Constant road speed avoids braking at the viewport edges; resets happen fully offstage. */
@keyframes c3-city-drive{from{transform:translate3d(var(--travel-start),-100%,0)}to{transform:translate3d(var(--travel-end),-100%,0)}}
.smart-city-vehicle[data-direction="left"]{animation-direction:reverse}
.smart-city-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1180px;margin:auto;padding:16px 24px;color:#5a1d1a;pointer-events:none}
.smart-city-caption span{font-size:clamp(9px,1.1cqw,17px);font-weight:600;letter-spacing:.16em;color:#785329}
.smart-city-caption p{font-size:clamp(13px,1.6vw,20px);line-height:1.35;margin:0;font-weight:500}
.smart-city-pause{position:absolute;right:22px;bottom:16px;display:flex;align-items:center;gap:8px;min-height:38px;border:1px solid #b5934c80;border-radius:30px;padding:7px 13px;color:#5d3026;background:#fff8eceb;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;box-shadow:0 2px 12px #3f271a18;backdrop-filter:blur(6px)}
.smart-city-pause:hover{background:#fff;border-color:#b5934c}
.smart-city-pause:focus-visible{outline:3px solid #98151b;outline-offset:3px}
.smart-city-pause-icon{font-size:15px;line-height:1}
@media(max-width:700px){.smart-city-scene{aspect-ratio:1920/640}.smart-city-caption{top:7%;left:5%}.smart-city-caption span{font-size:7px;letter-spacing:.1em}.smart-city-caption p{font-size:13px;margin-top:3px}.smart-city-pause{right:8px;bottom:8px;padding:5px 9px;min-height:30px}.smart-city-pause-label{display:none}}
@media(prefers-reduced-motion:reduce){.smart-city-vehicle{animation:none!important;will-change:auto;transform:translate3d(var(--park-x),-100%,0)}.smart-city-pause{backdrop-filter:none}}
#c3-smart-city + #c2-exec{margin-top:0!important;mask-image:none!important;-webkit-mask-image:none!important}



.smart-city-sign{position:absolute;height:auto;transform:translate(-50%,-100%);filter:drop-shadow(0 2px 2px #392a1930)}
.smart-city-vehicle-body{position:relative;width:100%;animation:c3-city-suspension 2s ease-in-out infinite;animation-delay:var(--bounce-delay)}
.smart-city-vehicle-body img{display:block;width:100%;height:auto}
.smart-city-beacon{position:absolute;width:3.5%;aspect-ratio:1;border-radius:50%;background:var(--beacon-color);box-shadow:0 0 5px 2px var(--beacon-color);animation:c3-city-beacon 1s ease-in-out infinite;animation-delay:var(--beacon-delay);transform:translate(-50%,-50%);opacity:.25}
@keyframes c3-city-suspension{0%,100%{transform:translateY(0)}50%{transform:translateY(-.052083cqw)}}
@keyframes c3-city-beacon{0%,100%{opacity:.25}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.smart-city-vehicle-body,.smart-city-beacon{animation:none!important}.smart-city-beacon{opacity:.3}}

/* Join the photograph and illustrated sky along one shallow curve. */
#c2-hero>svg{display:none!important}
#c3-smart-city{--city-curve-height:clamp(40px,6.7cqw,96px);margin-top:calc(-1 * var(--city-curve-height));z-index:1;background:transparent}
.smart-city-scene{mask-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 96%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 70 C220 70 400 22 660 20 C920 18 1060 52 1200 64 C1300 72 1390 68 1440 64 L1440 96 L0 96 Z%22 fill=%22white%22/%3E%3C/svg%3E'),linear-gradient(white,white);mask-size:100% var(--city-curve-height),100% calc(100% - var(--city-curve-height) + 1px);mask-position:top,bottom;mask-repeat:no-repeat}
.smart-city-curve{position:absolute;left:0;top:0;width:100%;height:var(--city-curve-height);pointer-events:none;z-index:2}

/* Owner-approved street-only scene, square join and municipal branding. */
#c3-smart-city{margin:0!important;background:#fff8ec!important;--city-curve-height:0px;z-index:initial}
#c3-smart-city .smart-city-scene{aspect-ratio:1920/480;mask-image:none!important;-webkit-mask-image:none!important;background:#fff8ec;overflow:hidden}
#c3-smart-city .smart-city-background,#c3-smart-city .smart-city-curve,#c3-smart-city .smart-city-sign,#c3-smart-city .smart-city-caption{display:none!important}
#c2-hero{margin-bottom:0!important;border-radius:0!important}#c2-hero>svg{display:none!important}
.civic-street{position:absolute;inset:0;pointer-events:none}.civic-sidewalk{position:absolute;left:0;right:0;top:42%;height:15%;background:repeating-linear-gradient(90deg,transparent 0,transparent 6.1cqw,#beb8a655 6.15cqw,transparent 6.2cqw),linear-gradient(#ddd7c7,#ebe6d9 18%,#ddd7c7 21%,#e6e0d1 75%,#c7bda6 76%,#b7ae99 95%);border-top:1px solid #f5f0df;box-shadow:0 3px 3px #4f493c25}
.civic-road{position:absolute;left:0;right:0;top:57%;bottom:0;background:linear-gradient(#696d6c,#7c807f 3%,#777b7a 50%,#707573);border-top:2px solid #4b504d;border-bottom:3px solid #c4bba7}
.civic-road:before,.civic-road:after{content:'';position:absolute;left:0;right:0;height:2px;background:#f9f2d4b0}.civic-road:before{top:5%}.civic-road:after{bottom:6%}
.civic-road-divider{position:absolute;left:0;right:0;top:48%;height:3px;background:repeating-linear-gradient(90deg,#fff8db 0,#fff8db 4cqw,transparent 4cqw,transparent 8cqw);opacity:.8}
.civic-lamp{position:absolute;bottom:55%;width:.35%;height:39%;background:linear-gradient(90deg,#828a88,#d4dbd5 45%,#6e7976);border-radius:5px 5px 0 0;box-shadow:2px 0 1px #6b604527}
.civic-lamp:before{content:'';position:absolute;top:0;left:0;width:5cqw;height:1.2cqw;border-top:3px solid #9ca8a1;border-radius:65% 0 0 0;transform:translateX(-90%)}
.civic-lamp i{position:absolute;width:2.6cqw;height:.6cqw;top:.15cqw;right:3.2cqw;border-radius:60%;background:#b8c1b6;box-shadow:0 2px 0 #f4eac8}
.civic-lamp b{position:absolute;bottom:-1px;left:-.35cqw;width:1cqw;height:.6cqw;background:#9d9e8d;border-radius:3px 3px 0 0}
.civic-monument{position:absolute;width:21.5%;left:50%;bottom:54%;transform:translateX(-50%);aspect-ratio:2;filter:drop-shadow(0 4px 2px #58504130)}.civic-monument>svg{display:block;width:100%;height:100%}.civic-monument-copy{position:absolute;inset:18% 4% 16%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e4bf69;line-height:1.4;text-align:center;text-shadow:0 1px 1px #000;font-family:'Noto Serif Thai',serif}
.civic-monument-copy img{height:33%;aspect-ratio:1;object-fit:cover;border-radius:50%;filter:sepia(1) saturate(.8);mix-blend-mode:screen;margin-bottom:1%}.civic-monument-copy span{font-size:1.3cqw}.civic-monument-copy strong{font-size:1.55cqw;font-weight:600;white-space:nowrap}
.smart-city-vehicle-body>img:first-child{position:relative}.smart-city-vehicle-body .civic-vehicle-seal{position:absolute;display:block;height:auto;aspect-ratio:1;object-fit:contain;border-radius:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid #d1bb87;box-shadow:0 0 1px #0005;z-index:2}
.civic-wheel{position:absolute;width:8%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.65}.civic-wheel svg{width:100%;height:100%;display:block;animation:civic-wheel-roll 1.1s linear infinite;animation-delay:var(--vehicle-delay)}
.smart-city-vehicle[data-direction=left] .civic-wheel svg{animation-direction:reverse;animation-duration:1.35s}
@keyframes civic-wheel-roll{to{transform:rotate(360deg)}}
@keyframes c3-city-suspension{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-.09cqw) rotate(.12deg)}65%{transform:translateY(.025cqw) rotate(-.1deg)}}
.smart-city-vehicle-body{animation-duration:2.4s;transform-origin:50% 85%}.smart-city-vehicle[data-vehicle=water] .smart-city-vehicle-body{animation-duration:2.8s}
@keyframes c3-city-beacon{0%,28%,65%,100%{opacity:.12}12%,42%{opacity:.85}18%,48%{opacity:.2}}
#c3-smart-city .smart-city-pause{bottom:auto!important;height:auto!important;z-index:4;right:16px;bottom:auto;top:12px;background:#fffcf1e8}
@media(max-width:700px){#c3-smart-city .smart-city-scene{min-height:180px;aspect-ratio:1920/600}.civic-monument{width:42%}.civic-monument-copy span{font-size:2.3cqw}.civic-monument-copy strong{font-size:2.5cqw}.civic-lamp{height:40%;width:.6%}.civic-lamp:before{border-top-width:2px}.smart-city-pause{right:7px;top:7px;bottom:auto}}
@media(prefers-reduced-motion:reduce){.civic-wheel svg{animation:none!important}.smart-city-vehicle-body{transform:none!important}}

#c3-smart-city .civic-street{z-index:0}#c3-smart-city .smart-city-traffic{z-index:2}


/* Self-contained office illustration: no repeated hero monument, no hero-image dependency. */
#c3-smart-city .smart-city-scene{aspect-ratio:1920/620;background:linear-gradient(180deg,#eef3eb 0%,#fff8ec 55%);border-top:1px solid #dccca9}
#c3-smart-city .civic-monument{display:none!important}
.civic-office-backdrop{position:absolute;display:block;left:50%;bottom:55%;width:94%;height:43%;object-fit:contain;object-position:center bottom;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 3px 2px #5b6b4320)}
.civic-street:before{content:'';position:absolute;left:0;right:0;bottom:58%;height:9%;background:radial-gradient(ellipse at 12% 100%,#ccd7ad55,transparent 35%),radial-gradient(ellipse at 87% 100%,#cad5aa55,transparent 35%);pointer-events:none}
.civic-lamp{z-index:1}.civic-sidewalk{z-index:2}.civic-road{z-index:2}.civic-office-backdrop{z-index:0}
@media(max-width:700px){#c3-smart-city .smart-city-scene{aspect-ratio:1920/850;min-height:240px}.civic-office-backdrop{width:96%;height:45%;bottom:55%}.civic-lamp{height:34%}}

@media(min-width:701px){.civic-office-backdrop{transform:translateX(-50%) scale(1.2);transform-origin:center bottom}}

/* One coherent miniature streetscape fixes architectural scale and shared perspective. */
#c3-smart-city{overflow:hidden}
#c3-smart-city .smart-city-scene{width:100%;aspect-ratio:3;min-height:0;background:#eef0de;border-top:1px solid #decda7}
#c3-smart-city .unified-street:before{display:none}
.civic-street-panorama{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}
.civic-building-name{position:absolute;left:24.5%;top:22.3%;width:18.5%;height:5.5%;display:flex;align-items:center;justify-content:center;font-family:'Noto Sans Thai',sans-serif;font-size:.95cqw;font-weight:500;line-height:1.1;white-space:nowrap;color:#f5d786;text-shadow:0 1px 1px #4f241c;pointer-events:none}
#c3-smart-city .smart-city-pause{top:10px;background:#fffdf1e8;box-shadow:0 2px 10px #55411620}
@media(max-width:700px){#c3-smart-city .smart-city-scene{width:760px;min-height:0;aspect-ratio:3;left:50%;transform:translateX(-50%)}#c3-smart-city .smart-city-pause{right:8px;top:8px}}

/* Frame the fence, footpath and road only, preserving their shared perspective. */
#c3-smart-city .smart-city-scene{aspect-ratio:20/3}
#c3-smart-city .civic-street-panorama{top:-122.2222%;height:222.2222%;bottom:auto;object-fit:fill}
.civic-vehicle-name{position:absolute;left:32%;top:47%;width:59%;font-size:.43cqw;font-weight:700;line-height:1.3;white-space:nowrap;text-align:center;color:#fff;text-shadow:0 1px 1px #0008;z-index:3}
[data-vehicle=ambulance] .civic-vehicle-name{left:27%;top:55%;width:52%;font-size:.37cqw;color:#a6141b;text-shadow:0 1px #fff}
[data-vehicle=fire] .civic-vehicle-name{left:11%;top:27%;width:48%;font-size:.43cqw}
[data-vehicle=water] .civic-vehicle-name{left:16%;top:43%;width:52%;font-size:.43cqw}
@media(max-width:700px){#c3-smart-city .smart-city-scene{aspect-ratio:20/3}}