/* About, Services and Blog keep their supplied photo behind the full page. */
@layer immersive-pages {
  body[data-page="about"] { --about-services-photo: url("assets/about-background.webp?v=asset-q85-20260928"); }
  body[data-page="services"] { --about-services-photo: url("assets/services-plane-sunset.webp?v=asset-q85-20260928"); }
  body[data-page="blog"] { --about-services-photo: url("assets/blog-toledo-panorama-background.webp?v=asset-q85-20260928"); }
  body:has(main.about-services-immersive, main.blog-immersive) .shell {
    position: relative !important;
    isolation: isolate !important;
  }
  body:has(main.about-services-immersive, main.blog-immersive) .shell::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100lvh !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: linear-gradient(rgba(0, 0, 0, .16), rgba(0, 0, 0, .22)), var(--about-services-photo) center / cover no-repeat !important;
  }
  body[data-page="blog"] .shell::before {
    background-image: var(--blog-continuation-shade, linear-gradient(rgba(0, 0, 0, .24), rgba(0, 0, 0, .34))), var(--about-services-photo) !important;
    filter: var(--blog-continuation-filter, contrast(1.12)) !important;
  }
  @media (min-width: 960px) {
    body[data-page="blog"] {
      --blog-continuation-shade: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .34));
      --blog-continuation-filter: none;
    }
    body[data-page="blog"] .page-banner::before {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 0 !important;
      pointer-events: none !important;
      background-image: linear-gradient(rgba(0, 0, 0, .24), rgba(0, 0, 0, .34)), var(--about-services-photo) !important;
      background-position: center !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-attachment: fixed !important;
      filter: contrast(1.12) !important;
    }
  }
  body[data-page="services"] .shell::before {
    background-image: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .44)), var(--about-services-photo) !important;
    filter: brightness(.84) contrast(1.08) !important;
  }
  :is(main.about-services-immersive, main.blog-immersive) {
    isolation: auto !important;
    clip-path: none !important;
    background: transparent !important;
    background-image: none !important;
  }
  :is(main.about-services-immersive, main.blog-immersive) .page-banner {
    height: 100vh !important;
    height: 100svh !important;
    background: transparent !important;
    clip-path: none !important;
    isolation: auto !important;
  }
  :is(main.about-services-immersive, main.blog-immersive) :is(.page-banner__image, .page-banner__shade, .page-banner-transition) { display: none !important; }
  main.about-services-immersive > .story-section {
    position: relative !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    clip-path: none !important;
    border: 0 !important;
  }
  main.about-services-immersive > .story-section::before,
  main.about-services-immersive > .story-section::after { display: none !important; content: none !important; }
  main.blog-immersive > .blog-list-section {
    position: relative !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    clip-path: none !important;
    border: 0 !important;
  }
  main.about-services-immersive > .most-booked-tours {
    position: relative !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  main.about-services-immersive > .most-booked-tours :is(.section-head h2, .section-head p, .eyebrow) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  main.about-services-immersive .google-reviews-section {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
  }
  main.blog-immersive .google-reviews-section--editorial {
    position: relative !important;
    z-index: 1 !important;
    min-height: 0 !important;
    padding: clamp(32px, 4vw, 56px) 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: var(--paper, #f5f5f7) !important;
    background-image: none !important;
  }
  main.blog-immersive .google-reviews-section--editorial::before,
  main.blog-immersive .google-reviews-section--editorial::after,
  main.blog-immersive .google-reviews-section--editorial > .sk-ww-google-reviews::before,
  main.blog-immersive .google-reviews-section--editorial > .sk-ww-google-reviews::after,
  main.blog-immersive .google-reviews-section--editorial > .sk-ww-google-reviews > div::before,
  main.blog-immersive .google-reviews-section--editorial > .sk-ww-google-reviews > div::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  main.blog-immersive .google-reviews-section--editorial > .sk-ww-google-reviews,
  main.blog-immersive .google-reviews-section--editorial > .sk-ww-google-reviews > div {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  main.blog-immersive .google-reviews-section--editorial hr {
    display: none !important;
    border: 0 !important;
  }
  body:has(main.about-services-immersive, main.blog-immersive) .mobile-footer-composition { background: transparent !important; }
  body:has(main.about-services-immersive, main.blog-immersive) section.site-contact-cta {
    position: relative !important;
    z-index: 0 !important;
    background: transparent !important;
    background-image: none !important;
  }
  body:has(main.about-services-immersive, main.blog-immersive) section.site-contact-cta::before,
  body:has(main.about-services-immersive, main.blog-immersive) section.site-contact-cta::after { display: none !important; content: none !important; }
  body:has(main.about-services-immersive, main.blog-immersive) :is(nav.prefooter-nav, footer.site-footer) {
    position: relative !important;
    z-index: 1 !important;
    background: var(--paper, #f5f5f7) !important;
  }
  @media (max-width: 959px) {
    main.blog-immersive .google-reviews-section--editorial { padding-block: 28px !important; }
    body:has(main.about-services-immersive, main.blog-immersive) .shell::before {
      background-position: 50% 58% !important;
    }
    main.about-services-immersive > .story-section,
    main.blog-immersive > .blog-list-section { padding-block: 48px !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    body:has(main.about-services-immersive, main.blog-immersive) .shell::before { position: absolute !important; height: 100% !important; }
  }
}
@layer mobile-footer {
  html body:has(main.about-services-immersive, main.blog-immersive) .mobile-footer-composition,
  html body:has(main.about-services-immersive, main.blog-immersive) section.site-contact-cta {
    background: transparent !important;
    background-image: none !important;
  }
  html body:has(main.about-services-immersive, main.blog-immersive) section.site-contact-cta::before,
  html body:has(main.about-services-immersive, main.blog-immersive) section.site-contact-cta::after {
    display: none !important;
    content: none !important;
  }
}