@charset "UTF-8";

/* ==========================================================================
   SETPERCEPTION DEFERRED CSS
   Non-critical custom styles loaded after first paint.
   Critical first-viewport rules live in sp-critical.css.
   ========================================================================== */


/* ==========================================================================
   VP BENEFITS ACCORDION (vp-card-*)
   --------------------------------------------------------------------------
   Intentionally NO accordion styling in this file.
   All visual styles for:
   - .c-accordion__item-button or .c-accordion__trigger / __header / __body or __panel / __footer / __text
   are managed in Webflow Designer.

   Accordion open/close + split-line reveal is handled in `js/sp-site.js`.
   ========================================================================== */

/* VP CARD TITLE NUMBER GRADIENT (open state only) */
.c-accordion__item-button[id^="vp-card-"][aria-expanded="true"] .c-accordion__title-number,
.c-accordion__trigger[id^="vp-card-"][aria-expanded="true"] .c-accordion__index{
  background-image: linear-gradient(
    90deg,
    var(--_color---brand--primary--yl-500),
    #d9f79b 33%,
    var(--_color---brand--secondary--sg-500) 66%,
    var(--_color---brand--primary--yl-400)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* VP CARD TITLE NUMBER HOVER (closed cards only) */
.c-accordion__item-button[id^="vp-card-"]:not([aria-expanded="true"]):hover .c-accordion__title-number,
.c-accordion__trigger[id^="vp-card-"]:not([aria-expanded="true"]):hover .c-accordion__index{
  color: rgba(240, 255, 108, 0.5);
}

/* VP CARD FOOTER COLORS */
.c-accordion__item-button[id^="vp-card-"][aria-expanded="true"] .c-accordion__footer-text,
.c-accordion__trigger[id^="vp-card-"][aria-expanded="true"] .c-accordion__footer-text,
.c-accordion__item-button[id^="vp-card-"]:hover .c-accordion__footer-text,
.c-accordion__trigger[id^="vp-card-"]:hover .c-accordion__footer-text{
  color: var(--colors--text--primary);
}

.c-accordion__item-button[id^="vp-card-"][aria-expanded="true"] .c-accordion__footer-label,
.c-accordion__trigger[id^="vp-card-"][aria-expanded="true"] .c-accordion__footer-label{
  color: var(--colors--text--primary);
}

.c-accordion__item-button[id^="vp-card-"]:hover .c-accordion__footer-label,
.c-accordion__trigger[id^="vp-card-"]:hover .c-accordion__footer-label{
  color: var(--colors--text--secondary);
}

/* VP CARD TOGGLE ICON MOTION (pairs with lottie open/close playhead) */
.c-accordion__item-button[id^="vp-card-"] .c-accordion__toggle-icon,
.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  will-change: transform, filter;
  transition:
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.32s ease;
}

.c-accordion__item-button[id^="vp-card-"][aria-expanded="true"] .c-accordion__toggle-icon,
.c-accordion__trigger[id^="vp-card-"][aria-expanded="true"] .c-accordion__toggle-icon{
  transform: rotateZ(180deg) scale(1.03);
  filter: drop-shadow(0 0 10px rgba(217, 247, 155, 0.24));
}

.c-accordion__item-button[id^="vp-card-"]:not([aria-expanded="true"]) .c-accordion__toggle-icon,
.c-accordion__trigger[id^="vp-card-"]:not([aria-expanded="true"]) .c-accordion__toggle-icon{
  transform: rotateZ(0deg) scale(1);
  filter: none;
}

/* Current Webflow markup autoplays VP Lottie icons before custom JS can sync.
   Draw a deterministic plus/minus state over the Lottie layer until the
   Webflow head autoplay selector is migrated to `.c-accordion__trigger`. */
.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon > svg,
.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon .w-lottie,
.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon .w-lottie > svg,
.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon ._w-lottie,
.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon ._w-lottie > svg,
.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon [data-animation-type="lottie"],
.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon [data-animation-type="lottie"] > svg {
  opacity: 0 !important;
}

.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon::before,
.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: var(--_color---brand--primary--yl-500, #f0ff6c);
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    background-color 0.24s ease;
}

.c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(1);
  opacity: 1;
}

.c-accordion__trigger[id^="vp-card-"][aria-expanded="true"] .c-accordion__toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .c-accordion__item-button[id^="vp-card-"] .c-accordion__toggle-icon,
  .c-accordion__trigger[id^="vp-card-"] .c-accordion__toggle-icon{
    transition: none;
  }
}

/* ==========================================================================
   == FAQ ACCORDION: PANEL + LOTTIE TOGGLE ICON ==
   --------------------------------------------------------------------------
   Scoped only to FAQ triggers/panels so other accordions are unaffected.
   JS controls `aria-expanded` + `[hidden]`; this block mirrors VP icon motion.
   ========================================================================== */
.c-faq__panel[hidden] {
  display: none !important;
}

.c-faq__trigger .c-faq__trigger-icon,
.c-faq__trigger .c-accordion__toggle-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  transform-origin: 50% 50%;
  will-change: transform, filter;
  transition:
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.32s ease;
}

.c-faq__trigger .c-faq__trigger-icon .w-lottie,
.c-faq__trigger .c-accordion__toggle-icon .w-lottie{
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.c-faq__trigger[aria-expanded="true"] .c-faq__trigger-icon,
.c-faq__trigger[aria-expanded="true"] .c-accordion__toggle-icon{
  transform: rotateZ(180deg) scale(1.03);
  filter: drop-shadow(0 0 10px rgba(217, 247, 155, 0.24));
}

.c-faq__trigger[aria-expanded="false"] .c-faq__trigger-icon,
.c-faq__trigger[aria-expanded="false"] .c-accordion__toggle-icon{
  transform: rotateZ(0deg) scale(1);
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .c-faq__trigger .c-faq__trigger-icon,
  .c-faq__trigger .c-accordion__toggle-icon{
    transition: none;
  }
}

/* ==========================================================================
   == SCENARIOS TABS: PANEL VISIBILITY SAFEGUARD ==
   --------------------------------------------------------------------------
   JS toggles `[hidden]` on each `.c-scenarios__panel`.
   ========================================================================== */
.c-scenarios__panel[hidden]{
  display: none !important;
}

/* ==========================================================================
   == TOC SCROLLSPY: ACTIVE LINK COLOR ==
   --------------------------------------------------------------------------
   JS sets `.is-active` + `aria-current="true"` on the current section link.
   ========================================================================== */
.c-toc__list .c-toc__link.is-active,
.c-toc__list .c-toc__link[aria-current="true"]{
  color: #e6e6e6;
}

/* ==========================================================================
   == DELIVERABLES CARDS: TOGGLE ICON MOTION ==
   --------------------------------------------------------------------------
   Mirrors VP/FAQ icon rotation based on `aria-expanded`.
   ========================================================================== */
.card-accordion-trigger .c-accordion__toggle-icon{
  transform-origin: 50% 50%;
  will-change: transform, filter;
  transition:
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.32s ease;
}

.card-accordion-trigger[aria-expanded="true"] .c-accordion__toggle-icon{
  transform: rotateZ(180deg) scale(1.03);
  filter: drop-shadow(0 0 10px rgba(217, 247, 155, 0.24));
}

.card-accordion-trigger[aria-expanded="false"] .c-accordion__toggle-icon{
  transform: rotateZ(0deg) scale(1);
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .card-accordion-trigger .c-accordion__toggle-icon{
    transition: none;
  }
}


  /* ---------------------------------------------------------
      1. EXPLORE BENEFITS (The Quiet Glass Button)
      --------------------------------------------------------- */
  /* ---------------------------------------------------------
      Metallic Border Utility (Reusable)
      - Use on any element: add class `u-metallic-border`
      - Optional: preserve an existing shadow by setting
        `--metallic-shadow-underlay: <your-shadow>;`
      --------------------------------------------------------- */
  .u-metallic-border {
    --metallic-border-w: var(--glass-border-w, 1px);
    --metallic-border-hi: var(--glass-border-hi, rgba(255,255,255,0.35));
    --metallic-border-mid: var(--glass-border-mid, rgba(255,255,255,0.10));
    --metallic-border-lo: var(--glass-border-lo, rgba(0,0,0,0.25));
    position: relative;
  }

  .u-metallic-border::after {
    content: "";
    pointer-events: none;
    border-radius: inherit;
    position: absolute;
    inset: 0;
    box-shadow:
      inset 0 0 0 var(--metallic-border-w) var(--metallic-border-mid),
      inset 0 1px 0 var(--metallic-border-hi),
      inset 0 -1px 0 var(--metallic-border-lo);
  }

  .u-metallic-border:hover::after {
    box-shadow:
      inset 0 0 0 var(--metallic-border-w) rgba(255,255,255,0.25),
      inset 0 1px 0 rgba(255,255,255,0.7),
      inset 0 -1px 0 rgba(0,0,0,0.3);
  }

  /* ---------------------------------------------------------
      Dim Sheen Utility (Reusable)
      - Add class `u-dim-sheen` to any positioned element (works well with
        `u-metallic-border` since it already sets `position: relative`)
      - Per-element controls:
        --sheen-delay: 0.6s;
        --sheen-duration: 3.2s;
        --sheen-opacity: 0.6;
        --sheen-color: rgba(255,255,255,0.08);
      --------------------------------------------------------- */
  @keyframes u-dim-sheen-sweep {
    0% { background-position: -180% 0; opacity: 0; }
    12% { opacity: var(--sheen-opacity, 0.6); }
    55% { background-position: 180% 0; opacity: var(--sheen-opacity, 0.6); }
    100% { background-position: 180% 0; opacity: 0; }
  }

  .u-dim-sheen {
    isolation: isolate;
  }

  .u-dim-sheen::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(
      120deg,
      transparent 35%,
      var(--sheen-color, rgba(255,255,255,0.08)) 50%,
      transparent 65%
    );
    background-size: 260% 100%;
    background-position: -180% 0;
    mix-blend-mode: screen;
    opacity: 0;
    animation: u-dim-sheen-sweep var(--sheen-duration, 3.6s) ease-in-out var(--sheen-delay, 0s) infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .u-dim-sheen::before {
      animation: none;
      opacity: 0;
    }
  }

  /* Convenience delay helpers (override with --sheen-delay if needed) */
  .u-sheen-delay-0 { --sheen-delay: 0s; }
  .u-sheen-delay-200 { --sheen-delay: 0.2s; }
  .u-sheen-delay-400 { --sheen-delay: 0.4s; }
  .u-sheen-delay-600 { --sheen-delay: 0.6s; }
  .u-sheen-delay-800 { --sheen-delay: 0.8s; }
  .u-sheen-delay-1000 { --sheen-delay: 1s; }
  .u-sheen-delay-1200 { --sheen-delay: 1.2s; }
  .u-sheen-delay-1400 { --sheen-delay: 1.4s; }
  .u-sheen-delay-1600 { --sheen-delay: 1.6s; }
  .u-sheen-delay-1800 { --sheen-delay: 1.8s; }
  .u-sheen-delay-2000 { --sheen-delay: 2s; }


  /* Primary gradient shift (reusable, no shadows) */
  .u-primary-gradient-shift {
    background: linear-gradient(92deg,
      #F0FF6C 0%,
      #D9F79B 33%,
      #CDEDC1 66%,
      #F4FF94 100%
    );
    background-size: 200% auto;
    background-position: left center;
    background-repeat: no-repeat;
    transition: background-position 0.3s ease;
  }

  .u-primary-gradient-shift:hover,
  .u-primary-gradient-shift:focus-visible {
    background-position: right center;
  }

  /* Button effect migration
     Webflow Button component variants now emit generated `w-variant-*`
     classes instead of the older effect classes. Sheen is intentionally limited
     to the header CTA and standalone buttons marked with `data-sheen="true"`. */
  :root {
    --sp-button-primary-gradient: linear-gradient(
      92deg,
      #F0FF6C 0%,
      #D9F79B 33%,
      #CDEDC1 66%,
      #F4FF94 100%
    );
  }

  .c-header__cta-wrapper .c-button,
  .c-button[data-sheen="true"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    clip-path: inset(0 round var(--_layout---radius--pill, 99999px));
  }

  .c-header__cta-wrapper .c-button::after,
  .c-button[data-sheen="true"]::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -50%;
    width: 35%;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(244, 255, 144, 0.3),
      transparent
    );
    transform: translate3d(0, 0, 0) skewX(-20deg);
    animation: sheenPass 4.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    mix-blend-mode: screen;
  }

  .c-button.is-quiet {
    position: relative;
    isolation: isolate;
  }

  .c-button.is-quiet::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.05),
      transparent
    );
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    pointer-events: none;
  }

  .c-button.is-quiet:hover::before {
    left: 150%;
    transition: left 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .c-button.is-quiet::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
  }

  .c-button[data-button-effect~="primary-gradient-shift"],
  .u-primary-gradient-shift,
  .c-button.is-primary-large,
  .c-button.c-btn--primary,
  .card-button-primary,
  .form__sumit-button.w-button,
  .c-button:not(.is-quiet):not(.p-home-cta__button):not(.c-btn--secondary):not(.w-variant-2fdcccb9-5ccc-d356-c557-e73fbdf51e4e):not(.w-variant-3baf8488-67cb-fe16-0876-37ab11dd8418) {
    background-image: var(--sp-button-primary-gradient) !important;
    background-size: 200% auto !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    transition:
      background-position 0.3s ease,
      transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.3s ease,
      color 0.2s ease,
      border-color 0.2s ease !important;
  }

  .c-button[data-button-effect~="primary-gradient-shift"]:hover,
  .c-button[data-button-effect~="primary-gradient-shift"]:focus-visible,
  .u-primary-gradient-shift:hover,
  .u-primary-gradient-shift:focus-visible,
  .c-button.is-primary-large:hover,
  .c-button.is-primary-large:focus-visible,
  .c-button.c-btn--primary:hover,
  .c-button.c-btn--primary:focus-visible,
  .card-button-primary:hover,
  .card-button-primary:focus-visible,
  .form__sumit-button.w-button:hover,
  .form__sumit-button.w-button:focus-visible,
  .c-button:not(.is-quiet):not(.p-home-cta__button):not(.c-btn--secondary):not(.w-variant-2fdcccb9-5ccc-d356-c557-e73fbdf51e4e):not(.w-variant-3baf8488-67cb-fe16-0876-37ab11dd8418):hover,
  .c-button:not(.is-quiet):not(.p-home-cta__button):not(.c-btn--secondary):not(.w-variant-2fdcccb9-5ccc-d356-c557-e73fbdf51e4e):not(.w-variant-3baf8488-67cb-fe16-0876-37ab11dd8418):focus-visible {
    background-position: right center !important;
  }

  /* Contact form keyboard focus
     Keep this scoped to the enquiry form so keyboard users can track native
     fields, custom Choices.js selects, the terms toggle, checkbox, and submit. */
  .p-contact__form :is(.form__input-text, .form__textarea, .form__dropdown, .w-input, .w-select):focus,
  .p-contact__form :is(.form__input-text, .form__textarea, .form__dropdown, .w-input, .w-select):focus-visible,
  .p-contact__form .choices.form__dropdown-choices.is-focused .choices__inner,
  .p-contact__form .choices.form__dropdown-choices:focus-within .choices__inner {
    border-color: #f0ff6c !important;
    outline: 2px solid #f0ff6c !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(240, 255, 108, 0.22) !important;
  }

  .p-contact__form :is(.c-form-terms-expand__trigger, .form__sumit-button, .c-form-agreement__checkbox-input):focus,
  .p-contact__form :is(.c-form-terms-expand__trigger, .form__sumit-button, .c-form-agreement__checkbox-input):focus-visible {
    outline: 2px solid #f0ff6c !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 4px rgba(240, 255, 108, 0.22) !important;
  }

  .p-contact__form .c-form-agreement__checkbox-input:focus-visible + .c-form-agreement__label {
    border-radius: 4px;
    box-shadow: 0 0 0 3px rgba(240, 255, 108, 0.18);
  }

  /* ---------------------------------------------------------
      2b. SECONDARY GHOST BUTTON (Hover: two-stage bg + inset depth)
      Targets: `#secondary-ghost-button`
      --------------------------------------------------------- */
  #secondary-ghost-button{
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  #secondary-ghost-button::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.08);
    transition: opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  @keyframes sp-secondary-ghost-bg{
    0%   { opacity: 0; background-color: rgba(255, 255, 255, 0.08); }
    22%  { opacity: 1; background-color: rgba(255, 255, 255, 0.08); }
    100% { opacity: 1; background-color: rgba(13, 13, 13); }
  }

  #secondary-ghost-button:hover{
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.06),
      inset 0 10px 26px rgba(0,0,0,0.26);
  }

  #secondary-ghost-button:hover::before{
    animation: sp-secondary-ghost-bg 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    opacity: 1;
  }

  /* ---------------------------------------------------------
      3. SHEEN BUTTON (Generic utility for Webflow buttons/links)
      --------------------------------------------------------- */

  /* Poster-first benefits video: repeated here as a fallback; critical copy loads first. */
  .sp-poster-first-video {
    background-color: #050505;
    background-position: 50% 50%;
    background-size: cover;
    overflow: hidden;
    pointer-events: none;
  }

  .sp-poster-first-video__poster,
  .sp-poster-first-video > video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sp-poster-first-video__poster {
    display: block;
    opacity: 1;
    z-index: -99;
    transition: opacity 0.28s ease;
  }

  .sp-poster-first-video > video {
    display: block;
    opacity: 0;
    z-index: -100;
    background-position: 50% 50% !important;
    background-size: cover !important;
    transition: opacity 0s linear;
  }

  .sp-poster-first-video.sp-video-active > video {
    opacity: 1;
  }

  .sp-poster-first-video.sp-video-active .sp-poster-first-video__poster {
    opacity: 0;
  }

  .c-accordion__item-button[id^="vp-card-"][aria-expanded="false"],
  .c-accordion__trigger[id^="vp-card-"][aria-expanded="false"] {
    height: 64px;
    overflow: hidden;
  }

  .c-accordion__item-button[id^="vp-card-"][aria-expanded="false"] .c-accordion__body,
  .c-accordion__item-button[id^="vp-card-"][aria-expanded="false"] .c-accordion__panel,
  .c-accordion__trigger[id^="vp-card-"][aria-expanded="false"] .c-accordion__body,
  .c-accordion__trigger[id^="vp-card-"][aria-expanded="false"] .c-accordion__panel {
    height: 0;
    overflow: hidden;
  }

  .c-accordion__item-button[id^="vp-card-"][aria-expanded="false"] .c-accordion__text,
  .c-accordion__trigger[id^="vp-card-"][aria-expanded="false"] .c-accordion__text {
    opacity: 0;
  }

  /* CSS replacement for Webflow "Marquee | Infinite Loop" interaction */
  .p-home-culture .c-marquee__track {
    animation: sp-home-marquee-track-loop 25s linear infinite;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  @keyframes sp-home-marquee-track-loop {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(-187.5%, 0, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .p-home-culture .c-marquee__track {
      animation: none;
      transform: translate3d(0, 0, 0);
      will-change: auto;
    }
  }

  /* Lightweight replacement for Webflow process step scroll reveal */
  [data-sp-reveal-list="process"][data-sp-reveal-mode="custom"] [data-sp-reveal-item] {
    opacity: 1;
  }

  [data-sp-reveal-list="process"][data-sp-reveal-mode="custom"] [data-sp-reveal-item]:not(:last-child) {
    opacity: 0.1;
    will-change: opacity;
  }

  [data-sp-reveal-list="process"][data-sp-reveal-mode="custom"] [data-sp-reveal-item]:last-child .c-process-step__content-wrapper {
    opacity: 0.1;
    will-change: opacity;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-sp-reveal-list="process"][data-sp-reveal-mode="custom"] [data-sp-reveal-item],
    [data-sp-reveal-list="process"][data-sp-reveal-mode="custom"] [data-sp-reveal-item] .c-process-step__content-wrapper {
      opacity: 1 !important;
      will-change: auto;
    }
  }

  @media (max-width: 767px) {
  [data-sp-reveal-list="process"][data-sp-reveal-mode="custom"] [data-sp-reveal-item] {
    opacity: 1 !important;
    will-change: auto;
  }

  [data-sp-reveal-list="process"][data-sp-reveal-mode="custom"] [data-sp-reveal-item] .c-process-step__content-wrapper {
    opacity: 0.1;
    will-change: opacity;
  }
}

  @media (min-width: 768px) {
    .sp-poster-first-video__poster {
      display: none !important;
      opacity: 0 !important;
    }

    .sp-poster-first-video > video {
      opacity: 1 !important;
      background-image: none !important;
    }
  }

  /* Lower-page lazy videos keep Webflow wrapper positioning; only the child layers need normal stacking. */
  .sp-poster-first-video[data-sp-lazy-video] .sp-poster-first-video__poster {
    z-index: 1;
  }

  .sp-poster-first-video[data-sp-lazy-video] > video {
    z-index: 2;
  }

  .sp-poster-first-video[data-sp-lazy-video].sp-video-active .sp-poster-first-video__poster {
    opacity: 0;
    visibility: hidden;
  }

  @media (max-width: 1279px) {
    .c-media-showcase > .culture-applied-bg-video.w-embed,
    .c-media-showcase > .culture-applied-bg-video.w-embed > [data-sp-lazy-video="connected-culture"] {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }