/*
 * Responsive layouts keyed to the supplied 1189px desktop, 807px mobile content
 * and 585px interior panels. Background photos remain real, replaceable <picture>s.
 */
.sf-canvas {display:block;width:100%;height:100%;overflow:hidden}
.sf-canvas>img {display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
.hero-art:has(.sf-hero-canvas),.inner-banner-art:has(.sf-inner-canvas){inset:0}
.hero-art .sf-hero-canvas>img,.inner-banner-art .sf-inner-canvas>img,.region-art .sf-region-canvas>img {object-fit:cover;opacity:1}
.sf-hero-canvas,.sf-inner-canvas,.sf-region-canvas{background:radial-gradient(ellipse at 34% 53%,#0a3b67 0%,#041e39 45%,#03192e 80%)}
.detail-banner .inner-banner-art:has(.sf-inner-canvas)::before{display:none}

@media(min-width:641px) {
  .home-hero .slide .hero-art:has(.sf-hero-canvas){inset:0}
  .home-hero .slide:not([hidden]):has(.sf-hero-canvas){min-height:clamp(260px,25.48cqw,385px)}
  .home-hero .slide:has(.sf-hero-canvas) .hero-copy{width:49%;height:auto;padding:clamp(15px,1.7cqw,26px) 0 clamp(18px,2.05cqw,32px) clamp(26px,4.95cqw,77px)}
  .home-hero .slide:has(.sf-hero-canvas) .kicker{margin:0 0 clamp(6px,.68cqw,10px);color:#ffce51;font-size:clamp(13px,1.5cqw,22px);letter-spacing:.055em;line-height:1.14;font-weight:750}
  .home-hero .slide:has(.sf-hero-canvas) .kicker::before{display:none}
  .home-hero .slide:has(.sf-hero-canvas) .hero-copy :is(h1,h2){font-size:clamp(30px,3.65cqw,54px);line-height:1.035;letter-spacing:-.015em;text-wrap:wrap}
  .home-hero .slide:has(.sf-hero-canvas) .hero-desc{width:min(31.5cqw,450px);margin:clamp(7px,.68cqw,12px) 0 0;max-width:100%;font-size:clamp(13px,1.28cqw,18px);font-weight:550;line-height:1.26;color:#f2f5fa}
  .home-hero .slide:has(.sf-hero-canvas) .desktop-hero-cta{margin-top:clamp(9px,.85cqw,15px)}
  .home-hero .slide:has(.sf-hero-canvas) .desktop-hero-cta .button{min-height:44px;font-size:clamp(14px,1.38cqw,20px);padding:.58em 1.07em;gap:.61em}
  .home-hero .slide:has(.sf-hero-canvas) .desktop-hero-cta .button .icon{width:1.55em;height:1.55em}
  .region-band:has(.sf-region-canvas){aspect-ratio:1189/275;min-height:205px;max-height:340px;align-items:flex-start;padding:clamp(16px,1.72vw,28px) 4.35% 2.5%}
  .region-band:has(.sf-region-canvas) .band-region-copy{width:31%}
  .region-band:has(.sf-region-canvas) .band-region-copy p{max-width:21em}
  .inner-banner:has(.sf-inner-canvas){display:grid;align-items:center;aspect-ratio:auto;min-height:clamp(145px,20.8vw,250px);max-height:none}
  .inner-banner:has(.sf-inner-canvas) .inner-banner-copy{height:auto;min-height:inherit;width:50%;padding:clamp(14px,1.8vw,25px) 0 clamp(14px,1.8vw,25px) max(4%,calc((100% - var(--wrap))/2))}
  .inner-banner:has(.sf-inner-canvas) .inner-banner-copy h1{font-size:clamp(30px,4.8vw,64px);text-wrap:wrap}
  .inner-banner:has(.sf-inner-canvas) .inner-banner-copy p{font-size:clamp(13px,1.56vw,20px);line-height:1.32;font-weight:550}
  .about-lead:has(.g2-body-photo),.area-lead:has(.g2-body-photo){grid-template-columns:minmax(175px,34%) minmax(0,1fr)}
  .about-lead .g2-body-photo,.area-lead .g2-body-photo{width:min(100%,calc(var(--body-native) * 1.38))}
}
/* Avoid magnifying the original reference slice indefinitely on ultrawide displays. */
@media(min-width:1550px){
  .home-hero .slide:has(.sf-hero-canvas) .hero-copy{padding-left:calc((100% - 1410px)/2);width:calc((100% - 1410px)/2 + 640px)}
  .hero-art .sf-hero-canvas>img,.region-art .sf-region-canvas>img{width:min(100%,1550px);height:100%;margin-inline:auto;mask-image:linear-gradient(90deg,transparent,#000 1%,#000 97%,transparent)}
  .inner-banner-art .sf-inner-canvas>img{width:min(100%,1440px);height:100%;margin-inline:auto;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 96%,transparent)}
  .region-band:has(.sf-region-canvas){padding-inline:max(4.35%,calc((100% - 1370px)/2))}
}
@media(max-width:640px){
  .hero-art:has(.sf-hero-canvas){inset:0}
  .hero-art .sf-hero-canvas>img{object-position:center center}
  .home-hero .slide:has(.sf-hero-canvas) .hero-copy{padding-left:4.35%;width:49%}
  .home-hero .slide:has(.sf-hero-canvas) .kicker{font-size:clamp(10px,2.6cqw,17px);letter-spacing:.055em;line-height:1.14}
  .home-hero .slide:has(.sf-hero-canvas) .hero-copy :is(h1,h2){font-size:clamp(21px,5.75cqw,37px);line-height:1.01}
  .home-hero .slide:has(.sf-hero-canvas) .mobile-hero-cta{margin-top:2%;margin-inline:4.15%}
  .inner-banner:has(.sf-inner-canvas){min-height:clamp(123px,31.5vw,174px)}
  .inner-banner:has(.sf-inner-canvas) .inner-banner-copy{width:54%;padding:14px 0 14px 4%}
  .inner-banner-art .sf-inner-canvas>img{object-position:55% center}
}
@media(min-width:641px) and (max-width:850px){
  .home-hero .slide:has(.sf-hero-canvas) .hero-copy{width:51%;padding-left:3.8%}
  .home-hero .slide:has(.sf-hero-canvas) .hero-desc{width:34.3cqw}
  .home-hero .slide:has(.sf-hero-canvas) .hero-art{right:-9%}
}
/* In the reference, the four badges / map and district grid precede the long article. */
.sf-continuation.prose{max-width:76ch;margin:clamp(25px,3.5vw,52px) auto 0;line-height:1.65}