.ot-city-shell {width: min(1160px, calc(100% - 40px)); margin: auto; color: #183e38; padding-block: 1.5rem;}
.ot-city-shell [hidden] {display: none !important;}
.ot-city-shell nav {font-size: .82rem; margin-bottom: .8rem;}
.ot-city-hero {display: grid; grid-template-columns: 1.4fr .9fr; background: #084c3d; color: white; border-radius: 16px; overflow: hidden;}
.ot-city-hero > div {padding: clamp(1.25rem, 3.4vw, 2.5rem);}
.ot-city-hero img {width: 100%; height: 100%; max-height: 260px; object-fit: cover; display: block;}
.ot-city-kicker, .ot-city-provider {font-size: .69rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;}
.ot-city-kicker {color: #b5e29d;}
.ot-city-hero h1 {color: #fff; margin: .45rem 0 .75rem; line-height: 1.04; font-size: clamp(2.2rem, 4.6vw, 3.8rem); letter-spacing: -.05em;}
.ot-city-hero p {color: #edf6ef; max-width: 48ch; font-size: 1.04rem; line-height: 1.48; margin: 0;}
.ot-city-tools {display: flex; align-items: end; gap: 1rem 2rem; justify-content: space-between; padding: 1.3rem 0 .7rem;}
#city-filter {width: min(100%, 32rem);}
#city-filter label {display: block; font-weight: 720; margin-bottom: .35rem;}
.ot-city-input {display: flex; gap: .4rem;}
.ot-city-input input {width: 100%; min-width: 0; border: 1px solid #63887b; border-radius: 8px; font: inherit; height: 2.8rem; padding: .55rem .7rem; background: #fff; color: #163d35;}
.ot-city-input button {border: 1px solid #8aada0; background: white; border-radius: 8px; padding: .5rem .75rem; color: #165644; font: inherit; cursor: pointer;}
.ot-city-date {margin: 0; color: #31584d; font-size: .875rem; font-weight: 650;}
.ot-city-date span {font-weight: 450;}
.ot-city-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); gap: 1rem;}
.ot-city-count {margin: .25rem 0 .6rem; color: #355b4f;}
.ot-city-card {display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; border: 1px solid #d4e4dc; border-radius: 12px; background: #fff; scroll-margin-top: 6rem;}
.ot-city-card:target {outline: 3px solid #4b8c68; outline-offset: 2px;}
.ot-city-provider {color: #47705e; font-size: .64rem;}
.ot-city-card h2 {margin: .25rem 0; font-size: 1.65rem; line-height: 1.15; color: #0c4c3c;}
.ot-city-card p {font-size: .95rem; line-height: 1.45; margin: .58rem 0;}
.ot-city-card .ot-city-areas {font-weight: 650; color: #35554b;}
.ot-city-links {margin-top: .5rem; display: grid; gap: .35rem; justify-items: start;}
.ot-city-links a {color: #086349; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; font-weight: 650;}
.ot-city-links a.ot-city-second {font-size: .85rem;}
.ot-city-help {padding: 1rem 1.2rem; background: #eaf3eb; border-radius: 8px; line-height: 1.5; margin-top: 1.3rem;}
.ot-city-examples summary {cursor: pointer; font-weight: 650;}
.ot-city-examples .eco-section {margin-block: 1rem;}
.ot-city-shell :focus-visible {outline: 3px solid #ad4a12; outline-offset: 3px;}
@media(max-width: 660px) {
  .ot-city-shell {width: calc(100% - 28px); padding-block: .9rem;}
  .ot-city-hero {grid-template-columns: 1fr;}
  .ot-city-hero img {display: none;}
  .ot-city-tools {align-items: start; flex-direction: column;}
  .ot-city-date br {display: none;}
  .ot-city-date span::before {content: ' · ';}
}