/**
 * Paint & scroll performance — keeps pages snappy on mobile and large displays.
 *
 * Do not put content-visibility: auto on main sections or lazy images sitewide.
 * It collapses blocks to contain-intrinsic-size while off-screen and makes
 * visible page content appear to shrink/grow when scrolling.
 */

/* Opt-in only: add class="pcs-defer-section" on heavy below-fold blocks if needed */
.pcs-defer-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

/* Avoid layout shift when Font Awesome / web fonts swap */
.pcs-font-pending body {
  opacity: 1;
}

/*
 * WOW.js scroll-in animations: hidden until scroll, transforms on enter.
 * Sitewide off — same as homepage — so content does not resize while scrolling.
 */
.wow,
.wow.animated,
.animated.wow {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  animation-name: none !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/*
 * Mobile: vh / dvh tracks the browser chrome and makes the page "breathe"
 * when the address bar shows (scroll up) or hides (scroll down).
 * svh uses the stable small viewport instead.
 */
@supports (height: 1svh) {
  @media (max-width: 991.98px) {
    .banner-three-area {
      padding-top: clamp(54px, 9.5svh, 104px) !important;
      padding-bottom: clamp(42px, 8svh, 84px) !important;
    }

    body.pcs-home main > .banner-three-area:first-child,
    body.pcs-svc-page main > .banner-three-area:first-child {
      padding-top: max(
        clamp(54px, 9.5svh, 104px),
        calc(env(safe-area-inset-top, 0px) + clamp(90px, 25vw, 124px))
      ) !important;
    }

    .banner-three__content {
      margin-top: clamp(16px, 4.8svh, 40px) !important;
    }

    body.pcs-home main > .banner-three-area:first-child {
      padding-bottom: clamp(24px, 5.5svh, 44px) !important;
    }

    body.pcs-home .banner-three__content {
      margin-top: clamp(6px, 1.5svh, 14px) !important;
    }
  }

  @media (max-width: 767.98px) {
    .banner-three-area {
      padding-top: clamp(48px, 11svh, 80px) !important;
      padding-bottom: clamp(38px, 9svh, 68px) !important;
    }

    body.pcs-home main > .banner-three-area:first-child,
    body.pcs-svc-page main > .banner-three-area:first-child {
      padding-top: max(
        clamp(48px, 11svh, 80px),
        calc(env(safe-area-inset-top, 0px) + clamp(86px, 24vw, 118px))
      ) !important;
    }

    body.pcs-home main > .banner-three-area:first-child {
      padding-bottom: clamp(20px, 5svh, 36px) !important;
    }
  }

  @media (max-width: 575px) {
    .banner-three__content {
      margin-top: clamp(12px, 4.2svh, 32px) !important;
    }
  }

  @media (max-width: 600px) and (max-height: 780px) and (max-aspect-ratio: 1 / 1) {
    .banner-three-area {
      padding-top: clamp(40px, 8.5svh, 60px) !important;
      padding-bottom: clamp(28px, 7svh, 48px) !important;
    }

    .pcs-hero-slider {
      max-height: min(40svh, 300px) !important;
    }
  }

  @media (max-width: 580px) and (max-height: 760px) and (max-aspect-ratio: 1 / 1) {
    .banner-three-area {
      padding-top: max(
        clamp(32px, 5.5svh, 48px),
        calc(env(safe-area-inset-top, 0px) + clamp(86px, 24vw, 118px))
      ) !important;
      padding-bottom: clamp(20px, 4.2svh, 36px) !important;
    }

    body.pcs-home .banner-three-area {
      padding-bottom: clamp(16px, 4svh, 28px) !important;
    }
  }

  @media (min-width: 992px) and (max-height: 860px) {
    .banner-three-area {
      padding-top: clamp(86px, 13svh, 150px) !important;
      padding-bottom: clamp(48px, 8svh, 96px) !important;
    }

    body.pcs-site--retro .pcs-intro-hero__stage:has(.pcs-intro-hero__body) .pcs-intro-hero__visual .pcs-lottie-host,
    body.pcs-site--retro .pcs-intro-hero__stage:has(.pcs-intro-hero__body) .pcs-intro-hero__visual .pcs-lottie-host svg,
    body.pcs-hub--retro .pcs-intro-hero__stage:has(.pcs-intro-hero__body) .pcs-intro-hero__visual .pcs-lottie-host,
    body.pcs-hub--retro .pcs-intro-hero__stage:has(.pcs-intro-hero__body) .pcs-intro-hero__visual .pcs-lottie-host svg {
      max-height: min(320px, 42svh) !important;
    }
  }

  @media (max-width: 767.98px) {
    body.pcs-site--retro .pcs-intro-hero__stage:has(.pcs-intro-hero__body) .pcs-intro-hero__visual .pcs-lottie-host,
    body.pcs-site--retro .pcs-intro-hero__stage:has(.pcs-intro-hero__body) .pcs-intro-hero__visual .pcs-lottie-host svg,
    body.pcs-hub--retro .pcs-intro-hero__stage:has(.pcs-intro-hero__body) .pcs-intro-hero__visual .pcs-lottie-host,
    body.pcs-hub--retro .pcs-intro-hero__stage:has(.pcs-intro-hero__body) .pcs-intro-hero__visual .pcs-lottie-host svg {
      max-height: min(420px, 52svh) !important;
    }
  }

  body.pcs-site--retro .pcs-intro-hero--promo-slider,
  body.pcs-hub--retro .pcs-intro-hero--promo-slider {
    --pcs-intro-promo-max-h: min(400px, 50svh);
  }
}

@media (max-width: 767px) {
  .pace,
  .pace-progress {
    display: none !important;
  }
}

/*
 * iOS Safari pillarbox fix (scroll up = address bar shows = page zooms out).
 * Caused by horizontal overflow from 100vw, wide decor, and contain on fixed chrome.
 */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  position: relative;
}

main,
.header-area,
.header-two-area,
.header-three-area,
.banner-three-area,
.banner-three__container,
.footer-area {
  max-width: 100%;
}

.header-two-area,
.header-three-area,
.header-area.menu-fixed {
  width: 100% !important;
  max-width: 100% !important;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

.pace,
.pace.pace-inactive,
.pace.pace-inactive .pace-progress,
#preloader {
  width: 100% !important;
  max-width: 100% !important;
}

.sidebar-area {
  width: min(420px, 100%) !important;
  max-width: 100% !important;
}

.banner-three-area .pcs-hero-slider,
.banner-three-area .pcs-hero-track,
.banner-three-area .pcs-hero-slide {
  max-width: 100% !important;
}

.banner-three-area .pcs-hero-slider {
  contain: none !important;
}

@media (max-width: 767.98px) {
  .pcs-hero-slider {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Decorative shapes can extend past the viewport and trigger iOS shrink-to-fit */
  .banner-three__shape-left,
  .banner-three__shape-right,
  .banner-two__shape-left,
  .banner-two__shape-right {
    display: none !important;
  }
}