/* ============================================================
   COXINHA EXPRESS — Contact page styles (extends styles.css)
   ============================================================ */

.nav-links a.current { color: var(--fg); background: var(--cx-glass-hi); }

/* ---- header ---- */
.contact-head { position: relative; padding: 168px 0 50px; overflow: hidden; }
.contact-head .bokeh.ch1 { width: 480px; height: 480px; left: -140px; top: -60px; background: radial-gradient(circle, var(--cx-emerald), transparent 65%); }
.contact-head .bokeh.ch2 { width: 460px; height: 460px; right: -120px; top: -20px; background: radial-gradient(circle, var(--cx-blue), transparent 65%); }
.contact-head .wrap { position: relative; z-index: 2; }
.contact-head h1 { font-size: clamp(46px, 8vw, 100px); letter-spacing: -0.035em; line-height: 0.92; margin-top: 20px; }
.contact-head h1 .accent { background: linear-gradient(100deg, var(--cx-lead), var(--cx-lead-3) 55%, var(--cx-lead-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact-head .lede { margin-top: 22px; max-width: 520px; color: var(--fg-2); font-size: 18px; line-height: 1.6; }

/* quick channel chips */
.quick-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.qchip { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 11px 18px 11px 14px; border-radius: var(--r-pill);
  background: var(--cx-glass); border: 1px solid var(--cx-glass-border); backdrop-filter: blur(12px); font-size: 14px; font-weight: 500;
  transition: transform .35s cubic-bezier(.3,.8,.3,1.2), border-color .35s, background .35s; }
.qchip:hover { transform: translateY(-3px); background: var(--cx-glass-hi); border-color: color-mix(in srgb, var(--cx-lead) 40%, transparent); }
.qchip .qi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--cx-lead); background: color-mix(in srgb, var(--cx-lead) 12%, transparent); }
.qchip .qi svg { width: 17px; height: 17px; }
.qchip.wa .qi { color: #25d366; background: rgba(37,211,102,0.12); }
.qchip b { font-weight: 600; }
.qchip .sub { color: var(--fg-3); font-size: 12px; }

/* live open badge */
.open-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; border: 1px solid var(--cx-glass-border); background: var(--cx-glass); }
.open-badge .led { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-4); }
.open-badge.open .led { background: var(--cx-emerald); box-shadow: 0 0 10px var(--cx-emerald); animation: ledPulse 2s ease-in-out infinite; }
.open-badge.closed .led { background: var(--cx-orange); box-shadow: 0 0 10px var(--cx-orange); }
.open-badge .when { color: var(--fg-3); font-weight: 400; }
@keyframes ledPulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ---- main grid ---- */
.contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 26px; align-items: start; }
@media (max-width: 940px){ .contact-grid { grid-template-columns: 1fr; } }

/* form card */
.form-card { padding: 34px; position: relative; }
.form-card h2 { font-size: 30px; letter-spacing: -0.02em; }
.form-card .fc-sub { color: var(--fg-2); font-size: 15px; margin-top: 8px; }

/* order-type segmented */
.seg { display: flex; gap: 6px; padding: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,0.04); border: 1px solid var(--cx-hairline); margin-top: 24px; }
.seg button { flex: 1; appearance: none; border: 0; background: transparent; color: var(--fg-2); font: inherit; font-weight: 600; font-size: 14px;
  padding: 11px 8px; border-radius: var(--r-pill); cursor: pointer; transition: color .25s, background .25s; }
.seg button[aria-pressed="true"] { color: #07140d; background: var(--cx-lead);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--cx-lead) calc(70% * var(--cx-glow)), transparent); }

.form-row { margin-top: 18px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px){ .form-row.two { grid-template-columns: 1fr; } }
.field-label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg-3); margin-bottom: 8px; }
.field-label .req { color: var(--cx-orange); }
.field {
  width: 100%; box-sizing: border-box; padding: 13px 15px; font: inherit; font-size: 15px;
  color: var(--fg); background: rgba(255,255,255,0.035); border: 1px solid var(--cx-hairline);
  border-radius: var(--r-md); outline: none; transition: border-color .25s, background .25s, box-shadow .25s;
}
.field::placeholder { color: var(--fg-4); }
.field:focus { border-color: color-mix(in srgb, var(--cx-lead) 60%, transparent); background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-lead) 16%, transparent); }
textarea.field { resize: vertical; min-height: 96px; line-height: 1.5; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M0 0h12L6 8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; }
.field.bad { border-color: var(--cx-orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-orange) 16%, transparent); }
.err-msg { color: var(--cx-orange); font-size: 12.5px; margin-top: 6px; display: none; }
.err-msg.show { display: block; }
.conditional { display: none; }
.conditional.show { display: block; }

.form-submit { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-note { color: var(--fg-4); font-size: 12.5px; }

/* success state */
.form-success { display: none; text-align: center; padding: 30px 10px; }
.form-success.show { display: block; }
.form-success .check { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--cx-emerald) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cx-emerald) 45%, transparent);
  color: var(--cx-emerald); box-shadow: 0 0 40px -8px var(--cx-emerald); }
.form-success .check svg { width: 36px; height: 36px; }
.form-success h3 { font-size: 26px; }
.form-success p { color: var(--fg-2); margin-top: 10px; font-size: 15px; max-width: 380px; margin-inline: auto; }
.form-success .summary { margin-top: 22px; text-align: left; display: inline-block; min-width: 300px; padding: 16px 20px; border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04); border: 1px solid var(--cx-hairline); font-size: 14px; }
.form-success .summary .row { display: flex; gap: 24px; justify-content: space-between; align-items: baseline; padding: 5px 0; }
.form-success .summary .row span:first-child { color: var(--fg-3); }
.form-success .summary .row span:last-child { text-align: right; }

/* ---- side column ---- */
.side-col { display: flex; flex-direction: column; gap: 18px; }
.info-card { padding: 26px; }
.info-card h3 { font-size: 18px; display: flex; align-items: center; gap: 10px; }
.info-card h3 .hi { color: var(--cx-lead); display: inline-flex; }
.info-card h3 .hi svg { width: 18px; height: 18px; }

/* hours table */
.hours { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.hours .hrow { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--cx-hairline); font-size: 14px; }
.hours .hrow:last-child { border-bottom: 0; }
.hours .hrow.today { color: var(--fg); font-weight: 600; }
.hours .hrow.today .day::after { content: "Today"; margin-left: 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cx-lead); background: color-mix(in srgb, var(--cx-lead) 14%, transparent); padding: 2px 7px; border-radius: var(--r-pill); vertical-align: middle; }
.hours .hrow .day { color: var(--fg-2); }
.hours .hrow.today .day { color: var(--fg); }
.hours .hrow .hr { color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours .hrow.today .hr { color: var(--cx-lead-3); }

/* channel list */
.chan-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.chan { display: flex; align-items: center; gap: 14px; padding: 13px 6px; border-bottom: 1px solid var(--cx-hairline); transition: padding .3s; }
.chan:last-child { border-bottom: 0; }
.chan:hover { padding-left: 10px; }
.chan .ci { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--cx-lead);
  background: var(--cx-glass); border: 1px solid var(--cx-glass-border); }
.chan .ci svg { width: 19px; height: 19px; }
.chan.wa .ci { color: #25d366; }
.chan .cn { font-weight: 600; font-size: 14.5px; }
.chan .cv { color: var(--fg-3); font-size: 13px; margin-top: 1px; white-space: nowrap; }
.chan .cgo { margin-left: auto; color: var(--fg-4); transition: transform .3s, color .3s; }
.chan:hover .cgo { transform: translateX(4px); color: var(--cx-lead); }

/* ---- location / map ---- */
.loc { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: stretch; }
@media (max-width: 880px){ .loc { grid-template-columns: 1fr; } }
.loc-info { padding: 30px; display: flex; flex-direction: column; }
.loc-info h2 { font-size: clamp(28px,3.4vw,40px); letter-spacing: -0.02em; }
.loc-info .addr { margin-top: 18px; color: var(--fg-2); font-size: 16px; line-height: 1.6; }
.loc-info .addr b { color: var(--fg); }
.loc-info .pickup { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.loc-info .pickup .pf { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--fg-2); }
.loc-info .pickup .pf .pfi { flex: none; color: var(--cx-lead); margin-top: 1px; }
.loc-info .pickup .pf .pfi svg { width: 17px; height: 17px; display: block; }
.loc-info .loc-cta { margin-top: auto; padding-top: 24px; }

.loc-map { position: relative; min-height: 360px; border-radius: var(--r-2xl); overflow: hidden;
  background: radial-gradient(120% 120% at 60% 20%, var(--cx-bg-3), var(--cx-ink)); border: 1px solid var(--cx-hairline); }
.loc-map .map-grid { position: absolute; inset: 0; opacity: 0.6;
  background-image: linear-gradient(var(--cx-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--cx-hairline) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(circle at 55% 45%, black, transparent 78%); }
.loc-map .road { position: absolute; background: rgba(255,255,255,0.05); }
.loc-map .road.r1 { left: 0; right: 0; top: 44%; height: 12px; transform: rotate(-4deg); }
.loc-map .road.r2 { top: 0; bottom: 0; left: 38%; width: 10px; transform: rotate(3deg); }
.loc-map .zone { position: absolute; width: 280px; height: 280px; left: 50%; top: 48%; transform: translate(-50%,-50%); border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--cx-lead) 50%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--cx-lead) 12%, transparent), transparent 70%); }
.loc-map .zone-label { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cx-lead); }
.loc-map .store { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.loc-map .store .dotmark { width: 20px; height: 20px; border-radius: 50%; background: var(--cx-lead);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--cx-lead) 22%, transparent), 0 0 26px var(--cx-lead); }
.loc-map .store .tagm { font-size: 12px; font-weight: 600; background: rgba(12,12,16,0.85); padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--cx-glass-border); white-space: nowrap; }

/* ---- FAQ ---- */
.faq-list { max-width: 820px; margin-top: 10px; }
.faq-item { border-bottom: 1px solid var(--cx-hairline); }
.faq-q { width: 100%; appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--fg);
  font-family: var(--cx-display); font-weight: 600; font-size: clamp(17px,2vw,21px); text-align: left;
  padding: 24px 44px 24px 0; position: relative; letter-spacing: -0.01em; }
.faq-q .pm { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; transition: transform .35s; color: var(--cx-lead); }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.faq-q .pm::before { left: 4px; right: 4px; top: 11px; height: 2px; }
.faq-q .pm::after { top: 4px; bottom: 4px; left: 11px; width: 2px; transition: transform .35s; }
.faq-item.open .faq-q .pm::after { transform: scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.open .faq-a { max-height: 280px; }
.faq-a p { color: var(--fg-2); font-size: 15px; line-height: 1.6; padding: 0 50px 24px 0; }

/* ============ ANIMATED CITY-SCENE DELIVERY MAP (from design export) ============ */
.city-scene {
  position: relative; min-height: 480px; border-radius: var(--r-2xl); overflow: hidden;
  background:
    radial-gradient(135% 80% at 72% 6%, #1b2a4d 0%, transparent 52%),
    radial-gradient(120% 90% at 24% 116%, color-mix(in srgb, var(--cx-orange) 30%, #0a0a10) 0%, transparent 58%),
    linear-gradient(180deg, #0a1024 0%, #0a0b14 54%, #0d0a08 100%);
  border: 1px solid var(--cx-glass-border);
  box-shadow: 0 50px 100px -55px #000 inset, 0 1px 0 rgba(255,255,255,.05) inset;
  perspective: 720px;
  isolation: isolate;
  --t: 1; /* motion scale from Tweaks */
}

/* warm light spilling along the far horizon where streets meet sky */
.cs-horizon { position: absolute; left: -10%; right: -10%; top: 26%; height: 150px; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 100%, color-mix(in srgb, var(--cx-orange) 34%, transparent), color-mix(in srgb, var(--cx-gold) 18%, transparent) 38%, transparent 64%);
  filter: blur(16px); opacity: .72; }

/* drifting nightlife bokeh — same visual language as the hero */
.cs-bokeh { position: absolute; border-radius: 50%; filter: blur(48px); mix-blend-mode: screen; will-change: transform; opacity: calc(.5 * var(--cx-glow)); }
.cs-bokeh.em { width: 240px; height: 240px; left: 44%; top: 22%; background: radial-gradient(circle, var(--cx-emerald), transparent 66%); animation: csDriftA calc(15s / var(--t)) ease-in-out infinite; }
.cs-bokeh.or { width: 270px; height: 270px; left: 4%;  bottom: -14%; background: radial-gradient(circle, var(--cx-orange), transparent 66%); opacity: calc(.58 * var(--cx-glow)); animation: csDriftB calc(18s / var(--t)) ease-in-out infinite; }
.cs-bokeh.bl { width: 320px; height: 320px; right: -10%; top: -16%; background: radial-gradient(circle, var(--cx-blue), transparent 68%); animation: csDriftC calc(21s / var(--t)) ease-in-out infinite; }
@keyframes csDriftA { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-26px,18px) scale(1.1);} }
@keyframes csDriftB { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(30px,-14px) scale(1.12);} }
@keyframes csDriftC { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-22px,22px) scale(1.08);} }

/* the tilted aerial city plane */
.cs-ground { position: absolute; left: -28%; right: -28%; top: 33%; bottom: -34%; z-index: 2;
  transform: rotateX(57deg); transform-origin: 50% 0%; will-change: transform;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 15%, #000 86%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0%, #000 15%, #000 86%, transparent 100%); }

/* warm window lights — receding dot field reads as a lit district */
.cs-windows { position: absolute; inset: -24%;
  background-image:
    radial-gradient(circle, rgba(255,206,128,.95) 0 1.1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,234,178,.70) 0 1px,   transparent 1.6px),
    radial-gradient(circle, rgba(124,196,255,.62) 0 1px,   transparent 1.7px),
    radial-gradient(circle, rgba(0,200,120,.52)  0 1px,    transparent 1.7px);
  background-size: 31px 31px, 19px 23px, 47px 53px, 61px 67px;
  background-position: 0 0, 11px 9px, 25px 15px, 7px 34px;
  opacity: .9; animation: csShimmer calc(5.5s / var(--t)) ease-in-out infinite; }
@keyframes csShimmer { 0%,100%{ opacity:.82;} 50%{ opacity:1;} }

/* dark block streets + faint warm/cool wet kerb reflections */
.cs-streets { position: absolute; inset: -24%;
  background-image:
    linear-gradient(0deg,  rgba(4,5,9,.88) 0 2px, transparent 2px),
    linear-gradient(90deg, rgba(4,5,9,.88) 0 2px, transparent 2px),
    linear-gradient(0deg,  color-mix(in srgb, var(--cx-orange) 42%, transparent) 0 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cx-blue) 34%, transparent) 0 1px, transparent 1px);
  background-size: 92px 92px, 92px 92px, 92px 92px, 92px 92px;
  background-position: 0 0, 0 0, 0 3px, 3px 0; opacity: .58; }

/* glowing delivery route + courier */
.cs-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 3; }
.cs-route .route-halo { fill: none; stroke: var(--cx-emerald); stroke-width: 10; opacity: calc(.32 * var(--cx-glow)); stroke-linecap: round; stroke-linejoin: round; filter: url(#cxGlow); }
.cs-route .route-base { fill: none; stroke: color-mix(in srgb, var(--cx-emerald) 72%, #052a1a); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.cs-route .route-flow { fill: none; stroke: #d9ffea; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26 230; filter: drop-shadow(0 0 4px var(--cx-emerald)); animation: routeFlow calc(7s / var(--t)) linear infinite; }
@keyframes routeFlow { from { stroke-dashoffset: 256; } to { stroke-dashoffset: 0; } }

.cs-route .courier { fill: #f3fff9; filter: drop-shadow(0 0 6px var(--cx-emerald)) drop-shadow(0 0 13px var(--cx-emerald)); }
.cs-route .trail { fill: var(--cx-emerald); }
.cs-route .trail.t1 { opacity: .55; } .cs-route .trail.t2 { opacity: .3; } .cs-route .trail.t3 { opacity: .15; }

.cs-route .pin .ring { transform-box: fill-box; transform-origin: center; }
.cs-route .pin.store .ring { fill: var(--cx-emerald); animation: csPulse calc(2.6s / var(--t)) ease-out infinite; }
.cs-route .pin.store .core { fill: #eafff4; }
.cs-route .pin.home  .ring { fill: var(--cx-orange);  animation: csPulse calc(2.6s / var(--t)) ease-out infinite .7s; }
.cs-route .pin.home  .core { fill: #fff3e2; }
@keyframes csPulse { 0% { transform: scale(.5); opacity: .55; } 75%,100% { transform: scale(3); opacity: 0; } }

/* atmospheric fog (warm street haze + cool night up high) + dark edges */
.cs-fog { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(85% 52% at 48% 94%, color-mix(in srgb, var(--cx-orange) 24%, transparent), transparent 72%),
    radial-gradient(62% 40% at 72% 6%,  color-mix(in srgb, var(--cx-blue) 28%, transparent), transparent 70%);
  animation: csFog calc(13s / var(--t)) ease-in-out infinite; }
@keyframes csFog { 0%,100%{ opacity:.85; transform: translateX(0);} 50%{ opacity:1; transform: translateX(-12px);} }
.cs-edge { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(120% 92% at 50% 42%, transparent 54%, rgba(5,5,8,.7) 100%),
    linear-gradient(180deg, rgba(7,9,16,.5) 0%, transparent 18%, transparent 58%, rgba(6,6,9,.92) 100%); }

/* fine drifting rain / ember particles */
.cs-rain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) 0 .7px, transparent 1.4px);
  background-size: 70px 90px; animation: csRain calc(7s / var(--t)) linear infinite; }
@keyframes csRain { from { background-position: 0 -90px; } to { background-position: 14px 90px; } }

/* floating glass labels + WhatsApp order ping */
.cs-tag { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--fg); white-space: nowrap;
  background: rgba(10,11,16,.78); border: 1px solid var(--cx-glass-border); padding: 6px 11px; border-radius: var(--r-pill);
  backdrop-filter: blur(10px); box-shadow: 0 12px 30px -16px #000; }
.cs-tag .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cs-tag.store-tag { top: 19%; right: 7%; }
.cs-tag.store-tag .dot { background: var(--cx-emerald); box-shadow: 0 0 10px var(--cx-emerald); }
.cs-tag.home-tag { bottom: 15%; left: 8%; }
.cs-tag.home-tag .dot { background: var(--cx-orange); box-shadow: 0 0 10px var(--cx-orange); }

.cs-ping { position: absolute; z-index: 7; top: 12%; left: 6.5%; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 10px; border-radius: 16px; background: rgba(12,14,20,.82);
  border: 1px solid var(--cx-glass-border); backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px -20px #000, 0 0 0 1px rgba(255,255,255,.04) inset;
  animation: csFloat calc(6s / var(--t)) ease-in-out infinite; }
.cs-ping .wa { position: relative; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #25d366; background: rgba(37,211,102,.14); }
.cs-ping .wa svg { width: 17px; height: 17px; }
.cs-ping .wa::after { content: ""; position: absolute; inset: 0; border-radius: 9px; border: 1.5px solid #25d366; opacity: 0; animation: csRing calc(2.4s / var(--t)) ease-out infinite; }
.cs-ping .txt b { font-size: 13px; font-weight: 600; display: block; line-height: 1.2; }
.cs-ping .txt span { font-size: 11.5px; color: var(--fg-3); }
@keyframes csFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
@keyframes csRing { 0%{ transform: scale(1); opacity: .7; } 100%{ transform: scale(1.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cs-bokeh, .cs-windows, .cs-route .route-flow, .cs-route .pin .ring, .cs-fog, .cs-rain, .cs-ping, .cs-ping .wa::after, .city-scene svg animateMotion { animation: none !important; }
}
@media (max-width: 880px){ .city-scene { min-height: 380px; } }