/* LVL29 theme 8 hero 
   SECTION: HERO BANNER (IMAGE SLIDER) — START
   ============================================================ */
/* ===== HERO BANNER (image slider) ===== */
.hero-banner {
  position: relative;
  overflow: hidden;
  background: #000000;
}

.hero-container {
  position: relative;
}

/* the slider is hidden until slick initialises so un-styled slides never flash */
.hero-slider {
  height: 100vh;
  min-height: 560px;
  visibility: hidden;
}

.hero-slider.slick-initialized {
  visibility: visible;
}

.hero-slider .slick-list,
.hero-slider .slick-track {
  height: 100%;
}

.hero-slider .slick-slide {
  height: 100vh;
  min-height: 560px;
}

.slide-outer {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* image wrappers — never a CSS background-image */
.slide-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.slide-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.slide-bg.mob-bg {
  display: none;
}

/* overlay is a real div — backend sets its colour inline */
.slide-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* caption sits low in the frame, centred, like the live site */
.slide-flex-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  padding-bottom: 130px;
}

.slide-content-box {
  text-align: center;
}

/* per-slide entrance — driven by slick's active class, no AOS */
.slide-content {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.8s ease 0.5s,
    transform 0.8s ease 0.5s;
}

.slick-slide.slick-active .slide-content {
  opacity: 1;
  transform: translateY(0);
}

.hero-banner .hero-content p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.hero-banner .section-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 25px;
}

.hero-banner .btn {
  min-width: 190px;
}

/* ============================================================
   SECTION: HERO BANNER (IMAGE SLIDER) — END
   ============================================================ */

/* ============================================================
   SECTION: HERO BANNER (VIDEO BACKGROUND) — START
   ============================================================ */
/* =========================================================
   HERO BANNER — VIDEO BACKGROUND
   Same shell as the slider hero: full-bleed 100vh, real <div> overlay whose
   colour the backend sets inline, caption low and centred. The embed is
   oversized and centred so it fills the frame edge-to-edge at any aspect
   ratio (an iframe cannot object-fit), and it is dropped entirely below 767
   in favour of the .mob-bg still.
   ========================================================= */
.hero-banner.video-banner .video-wrapper {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}

/* poster + mobile still share the same box */
.hero-banner.video-banner .vimeo-thumbnail,
.hero-banner.video-banner .slide-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero-banner.video-banner .vimeo-thumbnail img,
.hero-banner.video-banner .slide-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-banner.video-banner .slide-bg.mob-bg {
  display: none;
}

/* the embed sits above the poster once it paints */
.hero-banner.video-banner .video-iframe-wrapp {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

/* Full-bleed cover for a 16:9 embed. An iframe cannot object-fit, so the box is
   sized to the viewport on one axis and to the 16:9 partner value on the other,
   with min-* forcing whichever axis would come up short — the result always
   covers, never letterboxes, and never over-zooms the way a flat 200% does.
   56.25vw = 9/16 of the width, 177.78vh = 16/9 of the height. */
.hero-banner.video-banner .video-iframe-wrapp iframe,
.hero-banner.video-banner .wistia_responsive_wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.hero-banner.video-banner .slide-overlay {
  z-index: 3;
}

.hero-banner.video-banner .video-container {
  position: absolute;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.hero-banner.video-banner .video-content {
  text-align: center;
}

/* ============================================================
   SECTION: HERO BANNER (VIDEO BACKGROUND) — END

   SECTION: HERO DOTS — START
   ============================================================ */
/* ===== Hero dots (slick-generated markup — colours cannot be class-driven) ===== */
.hero-slider .slick-dots {
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 100%;
  display: flex !important;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 6;
}

/* The dot is drawn on the <li>, not the <button>: component-common.css sets
   `section.hero-banner .slider-container .slick-dots>li button { display:none }`
   with a more specific selector, so anything styled on the button collapses to
   0x0 and the dots vanish. */
.hero-slider .slick-dots li {
  width: 10px;
  height: 10px;
  line-height: 0;
  border: 1px solid #9f662d;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-slider .slick-dots li.slick-active {
  background: #9f662d;
}

/* ============================================================
   SECTION: HERO DOTS — END
   ============================================================ */

/* ============================================================
   SECTION: SCROLL-TO-NEXT ARROW — START
   ============================================================ */
/* ===== Scroll-to-next arrow =====
   The white circle and its bounce come from component-common.css
   (section.hero-banner .bottom-section-link .arrow — 45x45, bounce-arrow).
   Styling .bottom-section-link here too produced a SECOND white circle around
   that one, which is why the arrow appeared twice. Only the wrapper position
   and the svg inside the circle are set here — component-common defines
   neither.

.bottom-section-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  animation: heroBounce 2s infinite;
}

@keyframes heroBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}
*/

.bottom-section-link-wrapper {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}

.bottom-section-link .arrow svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #9f662d;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   SECTION: SCROLL-TO-NEXT ARROW — END
   ============================================================ */

/* ============================================================
   SECTION: RESPONSIVE — START
   ============================================================ */
/* =========================================================
   RESPONSIVE — one merged block per breakpoint, largest first
   ========================================================= */

@media (max-width: 1024px) {
  /* --- Header --- */
  /* --- Footer: contact stacks to a column, lower bar wraps (footer-3's
     992 behaviour, applied at this theme's 1024 breakpoint) --- */
  .footer .footer-top-wraper {
    padding: 25px 20px;
  }

  .footer .footer-address-wraper,
  .footer .footer-email-wrap a,
  .footer .footer-contact-wrap a,
  .footer .footer-address-wrap a,
  .footer .footer-time-wrap,
  .footer .footer-time-wrap .footer-time {
    flex-direction: column;
    text-align: center;
  }

  .footer .footer-email-wrap,
  .footer .footer-contact-wrap,
  .footer .footer-address-wrap,
  .footer .footer-time-wrap {
    width: 100%;
  }

  .footer .footer-address-wraper {
    padding: 24px 0 0;
  }

  .footer .footer-lower {
    flex-flow: wrap;
    padding: 16px 20px;
  }

  .footer .footer-policy-nav {
    order: 0;
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
    border: none;
  }

  .footer ul.policy-nav {
    justify-content: center;
  }

  .footer .footer-property-icons {
    width: 100%;
    justify-content: center;
    padding-left: 0;
    padding-bottom: 10px;
  }

  .footer .footer-copyright {
    order: 1;
    width: 100%;
    padding-right: 0;
    text-align: center;
  }

  .footer .attribution {
    order: 1;
    margin-left: auto;
  }

  .footer .cb-logo-wrap {
    margin: initial;
  }

  /* --- Home map: map and copy stack, box rides up less --- */
  .home-map {
    padding-bottom: 40px;
  }

  .home-map .container {
    transform: translateY(-50px);
    border-radius: 0 100px 0 0;
    padding: 40px 0;
  }

  .home-map .map-wrapper,
  .home-map .global-map-content {
    width: 100%;
  }

  .home-map .global-map-content {
    padding: 30px 30px 0;
  }

  .home-map .map-section-header {
    padding: 0 30px;
  }

  .home-map .map-contact {
    padding: 40px 30px 0;
  }

  .home-map .map-contact .address,
  .home-map .map-contact .contact {
    width: 50%;
  }

  .home-map .map-contact .address {
    padding-right: 25px;
  }

  .home-map .map-contact .contact {
    padding-left: 25px;
  }

  ._header .logo-wrapper a.logo img {
    height: 46px;
  }

  ._header .inner-header {
    min-height: 60px;
  }

  ._header .inner-header > * {
    margin-left: 8px;
    margin-right: 8px;
  }

  ._header ul.main-menu li.menu-item .menu-item-link {
    padding: 10px 8px;
  }


  /* --- Hero --- */
  .slide-flex-wrapper {
    padding-bottom: 115px;
  }

  .hero-banner.video-banner .video-container {
    bottom: 115px;
  }

  .hero-banner .btn {
    min-width: 170px;
  }
}

@media (max-width: 767px) {
  /* --- Header: below the squeeze range, CSS hides the same three blocks the
     JS would have hidden. main.js strips .hidden here, so these must be
     unconditional. The burger stays visible at every width. --- */
  ._header .header-menu,
  ._header .header-contact,
  ._header .header-cta {
    display: none;
  }

  ._header {
    padding: 12px 0;
  }

  ._header .logo-wrapper a.logo img {
    height: 40px;
  }

  /* --- Footer: policy links stack, separators off (footer-3's 767) --- */
  .footer ul.policy-nav {
    flex-direction: column;
    justify-content: center;
  }

  .footer ul.policy-nav li a::after {
    display: none;
  }

  .footer.new-section ul.policy-nav li a {
    text-decoration: underline;
  }

  .footer .footer-menu {
    gap: 1rem;
  }

  .footer .footer-submenu {
    text-align: left;
  }

  .footer .footer-menu.submenu-wrap .footer-menu-item {
    text-align: left;
  }

  .footer .footer-address-wraper {
    gap: 20px;
  }

  .footer .footer-top-wraper {
    padding: 25px 12px;
  }

  .footer .footer-lower {
    padding: 16px 12px;
  }

  .footer .footer-policy-nav,
  .footer .footer-property-icons {
    padding-left: 0;
    padding-right: 0;
  }

  .footer .cb-logo-wrap {
    padding-left: 0;
  }

  /* --- Home map: shorter map, address blocks stack full width --- */
  .home-map .map-wrapper,
  .home-map .map-wrapper iframe {
    min-height: 400px;
    height: 400px;
  }

  .home-map .map-contact .address,
  .home-map .map-contact .contact {
    width: 100%;
    margin-bottom: 25px;
    padding: 0;
    border: none;
  }

  /* --- Footer CTA: tighter padding, like v1. Parallax is dropped here —
     a fixed background is janky on touch devices, which is why v1 also
     switches to background-attachment:scroll at this breakpoint. --- */
  .footer-cta {
    padding: 165px 0 75px;
    clip-path: none;
  }

  .footer-cta .right-col {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
  }

  .footer-cta .footer-cta-wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }

  .footer-cta .cta-buttons {
    margin-top: 25px;
  }

  .footer-cta .cta-buttons > a {
    margin: 40px 0;
  }

  .footer-cta .footer-cta-content .cta-text {
    font-size: 1.143rem;
    line-height: 1.5;
  }

  /* --- Additional content 3: stacks here (not at 992), like v1 --- */
  .additional-content-3 .container {
    display: block;
    padding: 75px 20px 30px;
    border-bottom-left-radius: 100px;
    text-align: center;
  }

  .additional-content-3 .section-details,
  .additional-content-3 .section-counters {
    width: 100%;
  }

  .additional-content-3 .container h2 {
    font-size: 1.714rem;
  }

  .additional-content-3 .section-details .section-content p {
    font-size: 1.143rem;
  }

  .additional-content-3 .single-counter-item {
    padding: 10px;
  }

  .additional-content-3 .single-counter-item span.counter-number {
    font-size: 1.571rem;
  }

  .additional-content-3 .single-counter-item span.counter-detail {
    font-size: 1rem;
  }

  /* --- Home gallery: shorter images and a smaller arrow block, like v1 --- */
  .home-gallery {
    padding-top: 55px;
    padding-bottom: 55px;
  }

  .home-gallery .gallery-content {
    margin-bottom: 30px;
  }

  .home-gallery .magnific-img img {
    height: 260px;
  }

  .home-gallery .gallery-arrows {
    margin: -54px auto 0;
  }

  .home-gallery .gallery-arrows .slick-prev-arrow,
  .home-gallery .gallery-arrows .slick-next-arrow {
    width: 64px;
    height: 54px;
  }


  /* --- Hero --- */
  .hero-slider,
  .hero-slider .slick-slide {
    height: 100vh;
    min-height: 480px;
  }

  /* slick's default `rows: 1` wraps each slide's contents in an extra unstyled
     div. .slide-outer's height:100% then resolves against that auto-height
     wrapper and collapses to content height, so the background image stopped
     short of the slide and left a black strip above the dots. */
  .hero-slider .slick-slide > div {
    height: 100%;
  }

  .slide-bg.desktop-bg {
    display: none;
  }

  .slide-bg.mob-bg {
    display: block;
  }

  /* Needs the full selector to outrank the base
     .hero-banner.video-banner .slide-bg.mob-bg { display: none } above. */
  .hero-banner.video-banner .slide-bg.mob-bg {
    display: block;
  }

  /* Video hero: SHOW the embed on phones.
     Two rules hid it here, both deliberate "save bandwidth" swaps to the still:
       1. this file's own `.video-iframe-wrapp { display: none }` (removed), and
       2. component-common.css:3737 (inside its @767 block),
          `section.hero-banner.video-banner .desktop-bg { display: none }` — the
          wrapper AND the iframe both carry .desktop-bg in the markup
          (swifty-components.php:1291), so this one hid the video on its own.
     Rule 2 is 0-3-1, so the overrides below add a class to reach 0-4-x.
     The embed URL already carries autoplay=1&mute=1&playsinline=1, which is
     what iOS and Android need for muted inline autoplay, and the inline reveal
     script (opacity 0 -> 1 on YouTube's "playing" message) is not
     viewport-gated — so un-hiding is all that was missing. */
  section.hero-banner.video-banner .video-iframe-wrapp.desktop-bg,
  section.hero-banner.video-banner .video-iframe-wrapp iframe.desktop-bg,
  section.hero-banner.video-banner .wistia_responsive_padding {
    display: block;
  }

  /* The mobile still stays as the poster while the player loads (it covers the
     black ground), then steps aside once the inline script marks the wrapper
     .is-video-ready after the first frame paints. If autoplay is refused — iOS
     Low Power Mode, data saver — the class never lands and the still simply
     remains, which is the right fallback. The Vimeo poster stays hidden: the
     still already does that job here. */
  section.hero-banner.video-banner .video-wrapper.is-video-ready .slide-bg.mob-bg {
    display: none;
  }

  .hero-banner.video-banner .vimeo-thumbnail {
    display: none;
  }

  .hero-banner.video-banner .video-wrapper {
    height: 100vh;
    min-height: 480px;
  }

  .hero-banner.video-banner .video-container {
    bottom: 100px;
  }

  /* The caption is bottom-aligned with no top clearance, so a tall mobile
     caption grows upward and runs under the fixed header. Reserve the header's
     height (70px min-height + 2x12px padding) and centre the caption in what is
     left, so it stays clear whatever the content length. flex-end cannot be
     kept here: when a flex item overflows, it escapes past the start edge and
     padding-top is ignored, which is exactly the overlap being fixed. */
  .slide-flex-wrapper {
    justify-content: center;
    padding-top: 110px;
    padding-bottom: 64px;
  }

  /* Long captions now scroll inside the reserved area instead of growing out
     of it in both directions. */
  .slide-flex-wrapper .slide-container {
    max-height: 100%;
    overflow-y: auto;
  }

  .hero-banner .section-buttons {
    gap: 12px;
    margin-top: 18px;
  }

  .hero-slider .slick-dots {
    bottom: 28px;
  }

  /* component-common.css hides .bottom-section-link entirely at this
     breakpoint, so no sizing is needed here. */
  .bottom-section-link-wrapper {
    bottom: 16px;
  }
  section.hero-banner .slick-slide {
        height: 100%;
    }
}

@media (max-width: 575px) {

  /* --- Footer menu: flat list drops from column-flow to a single column,
     and the submenu divider tightens. footer-3 does this at 480; folded into
     this theme's nearest existing breakpoint rather than adding a new one. --- */
  .footer .footer-menu.no-submenu-wrap {
    grid-auto-flow: row;
  }

  .footer .footer-menu.submenu-wrap {
    padding-right: 12px;
  }

  .footer .footer-menu-wraper {
    gap: 12px;
  }

  /* --- Hero --- */
  .slide-flex-wrapper {
    padding-bottom: 92px;
  }

  .hero-banner.video-banner .video-container {
    bottom: 92px;
  }

  .hero-banner .section-buttons {
    flex-flow: column;
    align-items: center;
  }

  .hero-banner .btn {
    width: 100%;
    max-width: 280px;
  }
}

/* ============================================================
   SECTION: RESPONSIVE — END