/* Two city photographs frame the original homepage copy. */
@media screen {
  .city-hero {
    --hero-paper:250,249,246;
    isolation:isolate;
    padding:calc(var(--header-height) + 4rem) 0 10rem;
    min-height:850px;
    background:var(--bg);
  }
  [data-theme="dark"] .city-hero {--hero-paper:11,22,35}
  .city-backdrop {position:absolute;inset:var(--header-height) 0 0;z-index:-1;pointer-events:none;overflow:hidden}
  .city-photo {position:absolute;top:0;width:57%;height:100%;object-fit:cover}
  .city-minneapolis {left:0;object-position:50% 57%;mask-image:linear-gradient(to right,#000 58%,transparent 100%)}
  .city-mexico {right:0;object-position:50% 42%;mask-image:linear-gradient(to left,#000 58%,transparent 100%)}
  .city-backdrop::after {
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(var(--hero-paper),.35),transparent 75%),
      linear-gradient(to right,rgba(var(--hero-paper),.04),rgba(var(--hero-paper),.94) 27%,rgba(var(--hero-paper),.98) 50%,rgba(var(--hero-paper),.94) 73%,rgba(var(--hero-paper),.04));
  }
  .city-hero .hero-split {max-width:850px}
  .city-hero h1 {font-size:clamp(2.8rem,4.6vw,4.5rem);line-height:1.12}
  .city-hero .hero-sub {max-width:47ch;color:var(--ink)}
  .city-hero .hero-credentials {max-width:690px;gap:1.25rem}
  .city-hero .hc-k,.city-hero .hero-counsel-note {color:var(--ink-soft)}
  .city-hero .hero-counsel-note {max-width:52ch}
  [data-theme="dark"] .city-photo {filter:brightness(.7) saturate(.8)}
}
@media screen and (max-width:1000px) and (min-width:761px) {
  .city-hero .hero-credentials {grid-template-columns:repeat(3,1fr)}
}
@media screen and (max-width:760px) {
  .city-hero {padding:calc(var(--header-height) + 2.5rem) 0 14rem;min-height:0}
  .city-hero .hero-split {max-width:100%}
  .city-hero h1 {font-size:clamp(2rem,7.7vw,3.4rem);line-height:1.15}
  .city-hero .hero-sub {font-size:1.05rem}
  .city-hero .hero-credentials {gap:1rem}
  .city-backdrop::after {background:linear-gradient(to bottom,rgba(var(--hero-paper),.97) 0%,rgba(var(--hero-paper),.96) 65%,rgba(var(--hero-paper),.85) 77%,rgba(var(--hero-paper),.12) 100%)}
  .city-photo {object-position:50% bottom}
}
@media print {.city-backdrop {display:none}}
@media screen and (min-width:761px) {
  .city-mexico {width:44%;object-position:50% 18%}
}
@media screen and (max-width:760px) {
  .city-photo {top:auto;bottom:0;height:440px;object-position:50% 35%}
}