/* Keep the image-led service pages legible on 2.5K and 4K displays.
   The normal desktop and mobile layouts remain in their page stylesheets. */
@media (min-width: 2200px) {
  :is(.a360-residential-page, .a360-aerial-page).a360-designed-page .a360-shell:not(.a360-res-scroll-copy) {
    max-width: min(80vw, 2440px);
    padding-inline: clamp(72px, 3.4vw, 112px);
  }

  :is(.a360-residential-page, .a360-aerial-page) .a360-page-header .a360-logo {
    font-size: clamp(31px, 1.25vw, 44px);
  }
  :is(.a360-residential-page, .a360-aerial-page) .a360-page-header .a360-logo span {
    font-size: clamp(9px, .38vw, 13px);
  }
  :is(.a360-residential-page, .a360-aerial-page) .a360-page-header .a360-nav a:not(.a360-btn),
  :is(.a360-residential-page, .a360-aerial-page) .a360-page-header .a360-nav summary {
    font-size: clamp(11px, .52vw, 15px);
  }
  :is(.a360-residential-page, .a360-aerial-page) .a360-btn {
    min-height: clamp(48px, 2.2vw, 68px) !important;
    padding: clamp(15px, .8vw, 23px) clamp(28px, 1.35vw, 48px) !important;
    font-size: clamp(11px, .52vw, 15px) !important;
  }
  :is(.a360-residential-page, .a360-aerial-page) .a360-landing-kicker {
    font-size: clamp(10px, .48vw, 14px);
  }
  :is(.a360-residential-page, .a360-aerial-page) .a360-landing-faq summary {
    min-height: 92px;
    font-size: clamp(16px, .7vw, 20px);
  }
  :is(.a360-residential-page, .a360-aerial-page) .a360-landing-faq details > :not(summary) {
    max-width: 900px;
    font-size: clamp(16px, .67vw, 19px);
  }
  :is(.a360-residential-page, .a360-aerial-page) .a360-category-pagination a {
    font-size: clamp(45px, 2.15vw, 76px);
  }

  /* Residential photography */
  .a360-res-hero {
    min-height: 850px;
    height: min(90svh, 1500px);
  }
  .a360-res-hero-inner { padding-block: 190px clamp(92px, 5vw, 145px); }
  .a360-res-hero h1 {
    max-width: 1450px;
    font-size: clamp(118px, 4.65vw, 175px);
  }
  .a360-res-hero-lede { max-width: 750px; font-size: clamp(19px, .83vw, 24px); }
  .a360-res-intro { gap: clamp(110px, 6vw, 200px); padding-block: clamp(125px, 6vw, 190px); }
  .a360-res-intro-copy { max-width: 950px; }
  .a360-res-intro h2 { font-size: clamp(72px, 3.2vw, 112px); }
  .a360-res-intro-copy > p:not(.a360-landing-kicker) {
    max-width: 740px;
    font-size: clamp(18px, .77vw, 23px);
  }
  .a360-res-intro-copy > p.a360-res-intro-lead { max-width: 780px; font-size: clamp(25px, 1vw, 34px); }
  .a360-res-intro-image { width: 100%; max-height: 930px; aspect-ratio: 1.25; }
  .a360-res-intro-image figcaption { font-size: clamp(10px, .45vw, 14px); }
  .a360-res-scroll-scene { height: min(150svh, 2500px); min-height: 0; }
  .a360-res-scroll-frame { top: 4svh; height: min(92svh, 1850px); min-height: 0; }
  .a360-res-scroll-copy.a360-shell { padding-inline: max(13vw, calc((100vw - 2220px) / 2)); }
  .a360-res-scroll-copy h2 { max-width: 1300px; font-size: clamp(112px, 4.4vw, 168px); }
  .a360-res-scroll-copy > p:not(.a360-landing-kicker) { max-width: 670px; font-size: clamp(19px, .75vw, 24px); }
  .a360-res-scroll-index { right: max(13vw, calc((100vw - 2220px) / 2)); font-size: 14px; }
  .a360-res-work-head h2, .a360-res-addons h2, .a360-res-faq h2 { font-size: clamp(84px, 3.2vw, 120px); }
  .a360-res-gallery-grid { grid-auto-rows: clamp(260px, 10vw, 400px); gap: clamp(10px, .42vw, 16px); }
  .a360-res-story { padding-block: clamp(125px, 6vw, 190px); }
  .a360-res-story h2 { max-width: 1180px; font-size: clamp(80px, 3vw, 116px); }
  .a360-res-story-head > p { max-width: 650px; font-size: clamp(17px, .73vw, 22px); }
  .a360-res-story-image { min-height: clamp(680px, 31vw, 900px); }
  .a360-res-story-notes h3 { font-size: clamp(40px, 1.55vw, 57px); }
  .a360-res-story-notes p { max-width: 800px; font-size: clamp(17px, .68vw, 21px); }
  .a360-res-journey { padding-block: clamp(130px, 6vw, 190px); }
  .a360-res-journey h2 { max-width: 1180px; font-size: clamp(92px, 3.65vw, 138px); }
  .a360-res-journey-head > p { max-width: 700px; font-size: clamp(19px, .78vw, 24px); }
  .a360-res-journey-steps h3 { font-size: clamp(40px, 1.55vw, 58px); }
  .a360-res-journey-steps p { max-width: 770px; font-size: clamp(17px, .7vw, 21px); }
  .a360-res-journey-fact strong { font-size: clamp(48px, 2vw, 72px); }
  .a360-res-journey-fact span { font-size: clamp(11px, .46vw, 14px); }
  .a360-res-addon { min-height: clamp(505px, 25vw, 720px); padding: clamp(28px, 1.5vw, 52px); }
  .a360-res-addon h3 { max-width: 450px; font-size: clamp(52px, 2vw, 74px); }
  .a360-res-final { min-height: clamp(810px, 48vw, 1180px); }
  .a360-res-final h2 { max-width: 1200px; font-size: clamp(140px, 5.1vw, 195px); }
  .a360-res-final p:not(.a360-landing-kicker) { max-width: 690px; font-size: clamp(19px, .75vw, 24px); }

  /* Drone photography preview */
  .a360-aerial-hero { min-height: 850px; height: min(90svh, 1500px); }
  .a360-aerial-hero-content { padding-block: 190px clamp(125px, 5.5vw, 195px); }
  .a360-aerial-hero h1 { max-width: 1400px; font-size: clamp(154px, 4.8vw, 184px); }
  .a360-aerial-hero-content > p:not(.a360-landing-kicker) {
    max-width: 750px;
    font-size: clamp(19px, .83vw, 24px);
  }
  .a360-aerial-intro { gap: clamp(110px, 6vw, 200px); padding-block: clamp(125px, 6vw, 190px); }
  .a360-aerial-intro-copy { max-width: 950px; }
  .a360-aerial-intro h2 { font-size: clamp(74px, 3.2vw, 110px); }
  .a360-aerial-intro-copy > p:not(.a360-landing-kicker) {
    max-width: 740px;
    font-size: clamp(18px, .77vw, 23px);
  }
  .a360-aerial-intro-copy > .a360-aerial-intro-lead { font-size: clamp(26px, 1.05vw, 35px); }
  .a360-aerial-work-head h2, .a360-aerial-perspective h2, .a360-aerial-delivery h2,
  .a360-aerial-faq h2 { font-size: clamp(84px, 3.2vw, 120px); }
  .a360-aerial-photo-grid { grid-auto-rows: clamp(245px, 10.7vw, 360px); gap: clamp(10px, .55vw, 18px); }
  .a360-aerial-perspective { padding-block: clamp(70px, 4vw, 125px) clamp(125px, 6vw, 190px); }
  .a360-aerial-perspective-head h2 { max-width: 1170px; }
  .a360-aerial-perspective-head > p { max-width: 650px; font-size: clamp(18px, .73vw, 22px); }
  .a360-aerial-perspective-image { max-height: 960px; }
  .a360-aerial-perspective-grid h3, .a360-aerial-delivery-grid h3 { font-size: clamp(42px, 1.65vw, 60px); }
  .a360-aerial-perspective-grid p, .a360-aerial-delivery-grid p { max-width: 820px; font-size: clamp(17px, .7vw, 21px); }
  .a360-aerial-delivery { padding-block: clamp(130px, 6vw, 190px); }
  .a360-aerial-delivery-head h2 { max-width: 840px; }
  .a360-aerial-delivery-head > p:last-child { max-width: 720px; font-size: clamp(18px, .73vw, 22px); }
  .a360-aerial-offer { min-height: clamp(660px, 42vw, 1120px); }
  .a360-aerial-offer h2 { max-width: 1250px; font-size: clamp(112px, 4.65vw, 176px); }
  .a360-aerial-offer-content > p:not(.a360-landing-kicker) { max-width: 700px; font-size: clamp(18px, .75vw, 23px); }
}