/* City / service-area pages */
.city-hero{min-height:426px;padding:174px 160px 0}
.city-hero h1{margin:0;padding:2px 0;font-size:50px;line-height:57px;color:#fff}
.city-hero h1+.page-hero__eyebrow{margin:10px 0 0}

.city-main{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);padding:35px 40px 50px}
.city-main__text{padding:10px 20.39px 10px 0}
.city-h1{margin:0 0 12px;font-size:30px;line-height:35px}
.city-h2{margin:27px 0 10px;padding:2px 0;font-size:30px;line-height:normal}
.city-h3{margin:22px 0 10px;padding:2px 0;font-size:24px;line-height:normal}
.fs-22{font-size:22px}
.city-p{margin:0;font-size:16px;line-height:25px}
.city-p--22{line-height:22.08px}
.city-p--24{line-height:24px}
.city-p--25{line-height:24.96px}

.city-side{padding:40px 30px 20px;background:#f3f3f3}
.city-side__title{margin:0 0 15px;font-size:22px;line-height:22px;letter-spacing:2.2px;font-weight:500;color:var(--green);text-transform:uppercase}
.city-side__p{margin:0;font-size:16px;line-height:25px}
.city-side__p--22{line-height:22.08px}
.city-side__p--24{line-height:24px}
.city-side__title--wide{letter-spacing:2.35px}
.city-side__b{margin:0;font-weight:700;font-size:16px;line-height:22.08px}
.city-side__b--gap{margin-top:22.08px}
.city-side__d{margin:0;font-size:16px;line-height:25px}
.city-side__d--22{line-height:22.08px}
.city-side__d--24{line-height:24px}
.city-call{display:flex;align-items:flex-start;margin-top:42px;padding:15px 5px;border-radius:15px;background:#fff}
.city-call img{flex:0 0 auto;width:65px;height:47px;margin:16px 23px 0 12px}
.city-call__text{padding:10px 0}
.city-call__text p{margin:0;font-size:16px;line-height:25px}
.city-call__text .city-call__big{font-size:20px;line-height:30px}
.city-call a{font-weight:500;color:var(--teal);text-decoration:none}

.city-feature{display:flex;min-height:460px}
.city-feature__photo{flex:0 0 659px;padding:10px 0 0 92px}
.city-feature__photo img{display:block;width:567px;height:400px;object-fit:cover}
.city-feature__text{flex:1;min-width:0;padding:30px 50px 0 61px}
.city-feature__text .eyebrow{margin:0;line-height:26px}
.city-feature__h{margin:12px 0 19px;font-family:var(--font-body);font-size:30px;line-height:46px}
.city-feature__text p:not(.eyebrow){margin:0;font-size:16px;line-height:25px}

/* Hero variants */
.city-hero--dallas{background-image:url('/images/city/hero-dallas.webp');background-position:50% 100%}
.city-hero--tall{min-height:483px;padding-top:176px}
.city-hero--tall .page-hero__eyebrow{margin:0 0 10px}
.city-hero--dental{background-image:url('/images/city/hero-dental.webp');background-position:50% 100%}
.city-hero--fw{background-image:url('/images/city/hero-fw.webp');background-position:50% 100%}

/* Tall-banner pages: more room above the text */
.city-main--tall{padding-top:60px;padding-bottom:60px}
.city-main--gp .city-main__text{padding-top:8px}
.city-main--gp .city-h2{margin:10px 0 10px}
.city-main--gp .city-h2:first-child{margin-top:0}

/* Full-height photo band (photo left, text right) */
.city-band{display:grid;grid-template-columns:600px minmax(0,1fr);min-height:453px}
.city-band__img{position:relative;min-height:100%}
.city-band__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.city-band__panel{padding:60px 50px 60px 60px}
.city-band__eyebrow{margin:0;font-size:17px;line-height:26px;letter-spacing:1.7px;text-transform:uppercase;color:var(--green)}
.city-band__h2{margin:10px 0 10px;padding:2px 0;font-size:30px;line-height:normal}
.city-band__p{margin:0;font-size:16px;line-height:25px}
.city-band__p--22{line-height:22.08px}
.city-band--green .city-band__panel{color:#fff;background:linear-gradient(135deg,#27631e 5%,#52a745 100%)}
.city-band--green .city-band__eyebrow,.city-band--green .city-band__h2{color:#fff}

/* Dental page: text and photo rows inside the left column */
.city-row{display:grid}
.city-row--photo-right{grid-template-columns:467px 369px;column-gap:50px;margin-top:11px}
.city-row--photo-left{grid-template-columns:369px 437px;column-gap:30px;margin-top:25px}
.city-row__photo{display:block;width:369px;object-fit:cover;object-position:50% 0}
.city-row--photo-right .city-row__photo{height:648px}
.city-row--photo-left .city-row__photo{height:579px}
.city-main--dental .city-main__text{padding-top:8px}
.city-main--dental .city-h2{margin:8px 0 10px}
.city-main--dental .city-main__text>.city-h2{margin-top:0}
.city-main--dental{padding-bottom:59px}
.city-main--dental .city-main__text{padding-bottom:0}
.city-row .city-h2:first-child{margin-bottom:13px}
.city-row--photo-right p+.city-h2{margin-top:9px}
.city-row--photo-left p+.city-h2{margin-top:10px}

.city-band__h2--mb17{margin-bottom:17px}
.city-band__h2--mt17{margin-top:17px}

/* Bold text inside the light body weight must be real bold */
.city-main strong,.city-band strong{font-weight:700}

@media (max-width:1180px){
  .city-feature{min-height:0}
  .city-feature__photo{flex:0 0 46%;padding-left:0}
  .city-feature__photo img{width:100%;max-width:567px;margin-left:auto}
  .city-feature__text{padding-left:40px}
}
@media (max-width:1024px){
  .city-hero,.city-hero--tall{min-height:320px;padding:120px 20px 0}
  .city-hero h1{font-size:40px;line-height:46px}
  .city-main{grid-template-columns:1fr;padding:30px 20px}
  .city-main--tall{padding-top:30px;padding-bottom:30px}
  .city-main__text,.city-main--gp .city-main__text,.city-main--dental .city-main__text{padding:0 0 30px}
  .city-side{padding:30px 20px}
  .city-feature{flex-direction:column}
  .city-feature__photo{flex:none;padding:0}
  .city-feature__photo img{width:100%;max-width:none;height:auto;aspect-ratio:567/400;margin:0}
  .city-feature__text{padding:30px 20px 40px}
  .city-band{grid-template-columns:1fr;min-height:0}
  .city-band__img{min-height:300px}
  .city-band__panel{padding:40px 20px}
  .city-row--photo-right,.city-row--photo-left{grid-template-columns:1fr;row-gap:20px;margin-top:20px}
  .city-row__photo{width:100%;height:auto;aspect-ratio:369/460}
  .city-row--photo-right .city-row__photo,.city-row--photo-left .city-row__photo{height:auto}
}
@media (max-width:767px){
  .city-hero,.city-hero--tall{min-height:260px;padding-top:100px}
  .city-hero h1{font-size:30px;line-height:36px}
  .city-h1,.city-h2{font-size:26px}
  .city-side__title{font-size:18px;line-height:20px;letter-spacing:1.8px}
}
