/* City photography is decorative; the text stays opaque above the green overlay. */
.seo-city-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:360px;
  background:#08362f;
}
.seo-city-hero .city-hero-media {
  position:absolute;
  inset:0;
  z-index:-2;
  display:block;
  pointer-events:none;
}
.seo-city-hero .city-hero-media img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--city-photo-position,50% 50%);
}
.seo-city-hero::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(5,43,35,.94) 0%,rgba(5,43,35,.88) 45%,rgba(5,43,35,.78) 75%,rgba(5,43,35,.7) 100%);
}
.seo-city-hero>.wrap { max-width:790px; }
.seo-city-hero h1 { color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.2); }
.seo-city-hero p { color:#f2faf5; text-shadow:0 1px 8px rgba(0,0,0,.2); }
.seo-city-hero .eyebrow.light { color:#d9f5c8; }
.seo-city-hero .button { text-shadow:none; }
.city-photo-credit {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-left:20px;
  color:#edf6ef;
  text-decoration:underline;
  text-underline-offset:3px;
}
.city-photo-credit:hover { color:#fff; }
.city-photo-credit:focus-visible { outline:2px solid #d9f5c8; outline-offset:4px; }
.city-credit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.city-credit-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; margin-bottom:18px; }
.city-credit-card { padding:22px; scroll-margin-top:24px; }
.city-credit-card h2 { font-size:23px; margin:0 0 14px; }
.city-credit-card p { font-size:14px; overflow-wrap:anywhere; }
@media(max-width:1000px) {
  .seo-city-hero>.wrap { max-width:740px; }
  .city-credit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
  .seo-city-hero { min-height:0; }
  .seo-city-hero::before { background:linear-gradient(180deg,rgba(5,43,35,.86),rgba(5,43,35,.82) 50%,rgba(5,43,35,.94)); }
  .seo-city-hero .city-hero-media img { object-position:var(--city-photo-mobile-position,var(--city-photo-position,50% 50%)); }
  .city-photo-credit { display:flex; width:fit-content; margin:12px 0 0; }
  .city-credit-grid { grid-template-columns:1fr; }
}
@media(forced-colors:active) {
  .seo-city-hero .city-hero-media { display:none; }
  .seo-city-hero::before { display:none; }
  .seo-city-hero { color:CanvasText; background:Canvas; border:1px solid CanvasText; }
  .seo-city-hero h1,.seo-city-hero p,.seo-city-hero .eyebrow.light { color:CanvasText; text-shadow:none; }
}