@charset "UTF-8";

/* ==========================================================================
   SETPERCEPTION CRITICAL CSS
   Blocks needed for the first viewport and early cookie/hero stability.
   Load this as a normal stylesheet in the Webflow head.
   ========================================================================== */

/* ==========================================================================
   == HOMEPAGE HERO PREHIDE (PREVENT FIRST-FRAME FLASH) ==
   --------------------------------------------------------------------------
   JS adds/removes `html.sp-hero-prehide` around custom hero load setup.
   ========================================================================== */
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .t-heading,
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .c-heading,
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .p-home-hero__actions,
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .p-home-hero__cta-pair,
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .c-button-group-wrapper,
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .p-home-hero__lead,
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .t-lead,
html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .c-text-body.is-loud-regular.c-text-body--subtle,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .t-heading,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .c-heading,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .p-home-hero__actions,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .p-home-hero__cta-pair,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .c-button-group-wrapper,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .p-home-hero__lead,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .t-lead,
html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .c-text-body.is-loud-regular.c-text-body--subtle {
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 768px) {
  html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .p-home-hero__content-wrapper {
    transform: scale(1.08);
    transform-origin: 50% 50%;
  }
}


/* VP BENEFITS ACCORDION visuals are controlled in Webflow. */

  [data-anim-text]{
    display: inline-block;          /* stabilises the box for transforms */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Hero lead paragraph must stay block-level for stable wrapping/splitting. */
  .p-home-hero .p-home-hero__body-wrapper .p-home-hero__lead[data-anim-text],
  .p-home-hero .p-home-hero__body-wrapper .t-lead[data-anim-text],
  .p-home-hero .p-home-hero__body-wrapper .c-text-body.is-loud-regular.c-text-body--subtle[data-anim-text]{
    display: block;
    width: 100%;
  }

  .p-home-hero .sp-hero-lead-line {
    display: block;
  }

  .will-transform {
    will-change: transform;
    transform-origin: 50% 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
  }

  /* Firefox: prefer flatter compositing for scroll-scale content */
  @supports (-moz-appearance: none) {
    .will-transform {
      will-change: auto;
      transform-style: flat;
      perspective: none;
      -webkit-backface-visibility: visible;
      backface-visibility: visible;
      contain: layout paint;
    }

    .will-transform * {
      -webkit-backface-visibility: visible;
      backface-visibility: visible;
    }

    .p-home-hero.will-transform {
      transform-origin: 50% 0%;
    }

    /* During scroll scaling, reduce glow/filter work on hero accent text in Firefox. */
    .p-home-hero.is-scroll-scaling .u-anim-load::after {
      filter: none;
    }

    .p-home-hero.is-firefox.is-scroll-scaling [data-anim-text],
    .p-home-hero.is-firefox.is-scroll-scaling .t-heading,
    .p-home-hero.is-firefox.is-scroll-scaling .t-lead,
    .p-home-hero.is-firefox.is-scroll-scaling .p-home-hero__lead,
    .p-home-hero.is-firefox.is-scroll-scaling .c-heading,
    .p-home-hero.is-firefox.is-scroll-scaling .c-text-body,
    .p-home-hero.is-firefox.is-scroll-scaling [class*="gsap_split_line"] {
      will-change: auto !important;
    }
  }

  :root {
    /* Restored Original Glass Vars */
    --glass-border-w: 1px;
    --glass-border-hi: rgba(255,255,255,0.5);
    --glass-border-mid: rgba(255,255,255,0.15);
    --glass-border-lo: rgba(0,0,0,0.25);
    
    --btn-bg: rgba(255, 255, 255, 0.03);
    --btn-text: rgba(255, 255, 255, 0.6);
    --btn-text-hover: #ffffff;
  }

  .c-button.is-quiet {
    background: var(--btn-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    
    /* STATIC BORDER RESTORED: This creates the permanent visible border */
    box-shadow:
      inset 0 0 0 var(--glass-border-w) var(--glass-border-mid),
      inset 0 1px 0 var(--glass-border-hi),
      inset 0 -1px 0 var(--glass-border-lo);
    
    color: var(--btn-text);  
    transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; 
  }

  /* Hover State */
  .c-button.is-quiet:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--btn-text-hover);
    /* Slightly crispier border on hover */
    box-shadow:
      inset 0 0 0 var(--glass-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);
  }

  /* 
    * THE ROTATING LIGHT (Subtle Overlay)
    * - Slower speed
    * - Wider spread to cover more of the border
    */
  .c-button.is-quiet::after {
    /* 
        WIDER GRADIENT:
        Instead of a small dot, we have a long tail.
        The light covers roughly 200 degrees (over 50%) of the circle now.
    */
    background: conic-gradient(
      from var(--angle, 0deg), 
      transparent 0deg, 
      rgba(255, 255, 255, 0.1) 60deg,
      rgba(255, 255, 255, 0.8) 180deg, /* Brightest point */
      rgba(255, 255, 255, 0.1) 300deg,
      transparent 360deg
    );

    /* Mask keeps it only on the border */
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    pointer-events: none;
    opacity: 0.6; /* Always slightly visible */
    transition: opacity 0.4s ease;
    mix-blend-mode: overlay; /* Blends with the static box-shadow */
  }

  .c-button.is-quiet:hover::after {
    opacity: 1; 
  }

  /* The Internal Sheen */
  .c-button.is-quiet::before {

    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);
  }

  /* ---------------------------------------------------------
      2. LET'S TALK (The Primary Gradient Button)
      --------------------------------------------------------- */
    .c-button.is-primary-large {
    /* 
        UPDATED GRADIENT 
        Stops: #F0FF6C (1%) -> #D9F79B (33%) -> #CDEDC1 (66%) -> #F4FF94 (100%)
    */
    background: linear-gradient(92deg, 
      #F0FF6C 0%, 
      #D9F79B 33%, 
      #CDEDC1 66%, 
      #F4FF94 100%
    );
    background-size: 200% auto;
    
    border-radius: 9999px;
    text-decoration: none;
    /* Glow matching the new lime colors */
    box-shadow: 
      0 4px 15px rgba(217, 247, 155, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
      
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    z-index: 2; 
  }
  
    .c-button.is-primary-large:hover {
      transform: scale(1.05);
      /* Shift gradient to show more of the lighter yellow/mint */
      background-position: right center;
      
      box-shadow: 
        0 8px 25px rgba(240, 255, 108, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

  .c-header__cta-wrapper .c-button,
  .c-button[data-sheen="true"] {
    position: relative;
    overflow: hidden; /* keeps the sheen inside the button */
    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;

    /* Narrow light band, clipped by the button pill. */
    background: linear-gradient(
      90deg,
      transparent,
      rgba(244, 255, 144, 0.3),
      transparent
    );

    /* Skew it for the dynamic look */
    transform: translate3d(0, 0, 0) skewX(-20deg);

    /* Run the animation infinitely */
    animation: sheenPass 4.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    mix-blend-mode: screen;
  }

  @keyframes sheenPass {
    0% { transform: translate3d(0, 0, 0) skewX(-20deg); }
    40%, 100% { transform: translate3d(430%, 0, 0) skewX(-20deg); }
  }

  /* ---------------------------------------------------------
      3b. NAV CTA BUTTON (No animated rings)
      Markup:
      <div class="c-nav-button-container c-header__cta-wrapper">
        <a class="c-button">...</a>
      </div>
      Sheen is scoped by the header wrapper above, not by a button variant class.
      --------------------------------------------------------- */
  .c-nav-button-container{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 1) Entrance animations split so opacity can be 2s */
  /*@keyframes accent-opacity-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }*/

  @keyframes accent-blur-in {
    0% {
      filter: blur(24px);
      transform: scale(0.98);
    }
    100% {
      filter: blur(0);
      transform: scale(1);
    }
  }

  /* 2) Existing gradient breathe */
  @keyframes gradient-breathe {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }

  .u-anim-load {
    position: relative;
    display: inline-block;

    background-image: linear-gradient(
      90deg,
      #F0FF6C 0%,
      #D9F79B 33%,
      #CDEDC1 66%,
      #F4FF94 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* IMPORTANT: remove filter here so it doesn't override blur animation */
    /* filter: drop-shadow(...); */

    /* Run opacity for 2s, blur/scale for 4s, breathe forever */
    animation:
      accent-opacity-in 3.5s ease forwards,
      accent-blur-in 3.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
      gradient-breathe 8s ease-in-out infinite alternate;
  }

  /* Glow on a separate layer so blur animation stays intact */
  .u-anim-load::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* Make the glow layer visually match the gradient text */
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* The "glow" */
    filter: drop-shadow(0 0 25px rgba(240, 255, 108, 0.25));
    opacity: 1;
  }   

  /* Accordion styles are managed in Webflow (removed from this file). */

  /* Mobile hero performance: show hero immediately and bypass load/scroll animation */
  @media (max-width: 767px) {
    html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .t-heading,
    html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .c-heading,
    html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .p-home-hero__actions,
    html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .p-home-hero__cta-pair,
    html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .c-button-group-wrapper,
    html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .p-home-hero__lead,
    html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .t-lead,
    html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .c-text-body.is-loud-regular.c-text-body--subtle,
    html.sp-hero-prehide .p-home-hero[data-hero-load="custom"] .p-home-hero__content-wrapper,
    html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .t-heading,
    html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .c-heading,
    html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .p-home-hero__actions,
    html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .p-home-hero__cta-pair,
    html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .c-button-group-wrapper,
    html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .p-home-hero__lead,
    html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .t-lead,
    html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .c-text-body.is-loud-regular.c-text-body--subtle,
    html:not(.sp-hero-ready) .p-home-hero[data-hero-load="custom"] .p-home-hero__content-wrapper {
      opacity: 1 !important;
      visibility: visible !important;
    }

    .p-home-hero[data-hero-load="custom"] .t-heading,
    .p-home-hero[data-hero-load="custom"] .c-heading,
    .p-home-hero[data-hero-load="custom"] .p-home-hero__actions,
    .p-home-hero[data-hero-load="custom"] .p-home-hero__cta-pair,
    .p-home-hero[data-hero-load="custom"] .c-button-group-wrapper,
    .p-home-hero[data-hero-load="custom"] .p-home-hero__lead,
    .p-home-hero[data-hero-load="custom"] .t-lead,
    .p-home-hero[data-hero-load="custom"] .c-text-body.is-loud-regular.c-text-body--subtle,
    .p-home-hero[data-scroll-scale="custom"],
    .p-home-main__container,
    .p-home-main-container,
    .p-home-hero[data-hero-load="custom"] .p-home-hero__content-wrapper {
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
      will-change: auto !important;
    }

    .p-home-hero .u-anim-load {
      animation: none !important;
      background-position: 50% 50%;
      will-change: auto !important;
    }

    .p-home-hero .u-anim-load::after {
      filter: none !important;
      opacity: 0;
    }
  }

  /* Mobile LCP optimisation: do not prehide post-hero content */
  @media (max-width: 767px) {
    html.sp-hero-prehide .p-home-main__container,
    html.sp-hero-prehide .p-home-main-container,
    html:not(.sp-hero-ready) .p-home-main__container,
    html:not(.sp-hero-ready) .p-home-main-container {
      opacity: 1 !important;
      visibility: visible !important;
    }
  }

  /* Value-pillars poster/video handoff: this section is visible in the first mobile viewport. */
  .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;
  }

  /* Stabilise cookie banner position on mobile to reduce CLS */
  @media (max-width: 767px) {
    #cookie-banner.c-cookie {
      left: 0 !important;
      right: 0 !important;
      bottom: 25px !important;
      box-sizing: border-box;
      transform: translateZ(0);
    }
  }

  @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;
    }
  }