@font-face{font-family:CityGlass;src:url('fonts/city-glass-grotesk.ttf') format('truetype');font-display:swap}
.city-showcase{--city-glass-ink:#23332f;--city-glass-muted:#52675d;--city-glass-accent:#006a5d;font-family:CityGlass,'Trebuchet MS',sans-serif;letter-spacing:0}
.city-showcase{position:relative;isolation:isolate;box-sizing:border-box;min-width:0;height:540px;overflow:hidden;background:#dce9e2;color:var(--city-glass-ink);border-block:1px solid #cbd9d1}
.city-showcase *{box-sizing:border-box;letter-spacing:0}
.city-showcase-picture{position:absolute;top:0;right:0;bottom:0;left:0;display:block;z-index:0}
.city-showcase-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.city-showcase-heading{position:relative;z-index:1;display:flex;align-items:center;gap:14px;min-width:0;padding:18px 22px;background:#fffffff2;border-bottom:1px solid #ffffffb3}
.city-showcase-heading>img{width:52px;height:52px;object-fit:contain;flex:none;border-radius:6px}
.city-showcase-heading>div{min-width:0}
.city-showcase-eyebrow{color:var(--city-glass-muted);font-size:12px;line-height:1.4;margin:0 0 5px}
.city-showcase h2{font-family:inherit;font-size:28px;line-height:1.2;font-weight:600;text-shadow:none;text-transform:none;margin:0;overflow-wrap:anywhere;color:var(--city-glass-ink)}
.city-showcase-dock{position:absolute;z-index:1;left:20px;right:20px;bottom:20px;margin:0 auto;max-width:420px;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 16px;background:#fffffff2;border:1px solid #fff;border-radius:8px;box-shadow:0 4px 22px #23332f1f}
.city-showcase-state{min-width:0;font-size:14px;line-height:1.4}
.city-showcase-state small{display:block;color:var(--city-glass-muted);font-size:11px;margin-top:3px}
.city-showcase-play{display:grid;grid-template-columns:auto 20px;align-items:center;justify-content:center;gap:12px;min-width:112px;height:48px;min-height:48px;padding:0 16px;background:var(--city-glass-accent);border:0;border-radius:6px;color:#fff;font-size:15px;font-weight:600;text-decoration:none;flex:none}
.city-showcase-play img{display:block;width:20px;height:20px;flex:none}
.city-showcase-play-label{display:block;flex:none}
.city-showcase-play:hover{background:#00584e}
.city-showcase-play:focus-visible{outline:3px solid #006a5d;outline-offset:4px}
@supports(backdrop-filter:blur(8px)){.city-showcase-dock{background:#ffffffe8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}}
@media(max-width:600px){
 .city-showcase{height:480px}
 .city-showcase-heading{padding:16px 14px;gap:10px}
 .city-showcase-heading>img{width:42px;height:42px}
 .city-showcase h2{font-size:24px;line-height:1.2}
 .city-showcase-eyebrow{font-size:11px}
 .city-showcase-dock{left:12px;right:12px;bottom:12px;gap:8px;padding:8px 8px 8px 12px}
 .city-showcase-state{font-size:12px}
 .city-showcase-state small{font-size:10px}
 .city-showcase-play{min-width:96px;padding-inline:12px;font-size:14px;gap:8px}
}
@media(max-width:340px){.city-showcase h2{font-size:21px}.city-showcase-heading>img{width:36px;height:36px}.city-showcase-dock{left:8px;right:8px}.city-showcase-play{min-width:84px}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.city-showcase-dock,.city-showcase-heading{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#52675d}}
@media(prefers-reduced-motion:reduce){.city-showcase *{animation:none!important;transition:none!important}}