/* ============================================================
       GENERAL SCROLL ANIMATION SYSTEM
       Add .anim + a direction class to any element.
       The IntersectionObserver adds .visible to trigger transition.
    ============================================================ */
.anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim.visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.anim-left {
    transform: translateX(-50px);
}

.anim-right {
    transform: translateX(50px);
}

.anim-up {
    transform: translateY(40px);
}

.anim-scale {
    transform: scale(0.85);
}

/* Stagger delays */
.delay-1 {
    transition-delay: 0.10s;
}

.delay-2 {
    transition-delay: 0.20s;
}

.delay-3 {
    transition-delay: 0.30s;
}

.delay-4 {
    transition-delay: 0.40s;
}

.delay-5 {
    transition-delay: 0.50s;
}

.delay-6 {
    transition-delay: 0.60s;
}

.delay-7 {
    transition-delay: 0.70s;
}

/* ============================================================
       HEXAGON ANIMATIONS (scroll-triggered, from previous step)
    ============================================================ */
.hex-animate {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.hex-1b {
    transform: translate(3.5rem, -2.5rem);
}

.hex-1a {
    transform: translate(-0.5rem, 1rem);
}

.hex-2b-left {
    transform: translateX(-3.75rem);
}

.hex-2a-right {
    transform: translateX(3rem);
}

.hex-3b-left {
    transform: translateX(-3.75rem);
}

.hex-3a-right {
    transform: translateX(3rem);
}

.hex-4a {
    transform: translate(-2rem, -3rem);
}

.hex-4b {
    transform: translate(2rem, 3.5rem);
}

.hex-needhelp {
    transform: translateY(2rem);
}

.hex-animate.in-view {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* ============================================================
       HERO — page-load animation (fires immediately, no scroll)
    ============================================================ */
.hero-text {
    opacity: 0;
    transform: translateX(-50px);
    animation: heroLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.hero-image {
    opacity: 0;
    transform: translateX(50px);
    animation: heroRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes heroLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
       CHAT POPUP — smooth scale+fade (replaces hard hidden toggle)
    ============================================================ */
#chatPopup {
    transition: opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: bottom right;
}

#chatPopup.chat-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92) translateY(12px);
}

#chatPopup.chat-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

/* ==========================================
   AUTO-MERGED MISSING CSS 
========================================== */
.w-mod-js:not(.w-mod-ix) [data-w-id="87287056-6263-c122-4ee6-6188c4f3ed24"] {
                opacity: 0;
            }

.delay-8 {
      transition-delay: 0.80s;
    }

.delay-9 {
      transition-delay: 0.90s;
    }

.delay-10 {
      transition-delay: 1.00s;
    }

.hero-up {
      opacity: 0;
      transform: translateY(30px);
      animation: heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
    }

@keyframes heroUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hex-cascade {
      opacity: 0;
      transform: translateY(25px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }

.hex-cascade.in-view {
      opacity: 1;
      transform: translateY(0);
    }


        .anim {
            opacity: 0;
            transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
        }

.clip-hex {
            clip-path: polygon(50% 0%,
                    100% 25%,
                    100% 75%,
                    50% 100%,
                    0% 75%,
                    0% 25%);
        }

.hero-left {
      opacity: 0;
      transform: translateX(-50px);
      animation: heroLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
    }

.hero-right {
      opacity: 0;
      transform: translateX(50px);
      animation: heroRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
    }

.map-image {
      opacity: 0;
      transform: scale(0.96);
      transition: opacity 1s ease, transform 1s ease;
    }

.map-image.map-visible {
      opacity: 1;
      transform: scale(1);
    }

.map-pin {
      opacity: 0;
      transform: translateY(-60px) scale(0.4);
      transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

.map-pin.pin-dropped {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

.clip-hexagon {
            clip-path: polygon(25% 6.7%,
                    75% 6.7%,
                    100% 50%,
                    75% 93.3%,
                    25% 93.3%,
                    0% 50%);
        }


        .chart-bar {
            transition: height 1.1s cubic-bezier(0.22, 1, 0.36, 1);
            height: 0 !important;
        }

.chart-bar.bar-animated {
            height: var(--bar-h) !important;
        }

.donut-animate {
            opacity: 0;
            transform: scale(0.7) rotate(-90deg);
            transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
        }

.donut-animate.visible {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

/* ==========================================================
   INDEXPAGE CSS
   ========================================================== */
/* ============================================================
    INDEX.BLADE.PHP CUSTOM ANIMATION SYSTEM
============================================================ */
.idx-anim {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.idx-anim.idx-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1) !important;
}

.idx-left { transform: translateX(-50px); }
.idx-right { transform: translateX(50px); }
.idx-up { transform: translateY(40px); }
.idx-scale { transform: scale(0.85); }

/* Stagger delays */
.idx-delay-1 { transition-delay: 0.10s; }
.idx-delay-2 { transition-delay: 0.20s; }
.idx-delay-3 { transition-delay: 0.30s; }
.idx-delay-4 { transition-delay: 0.40s; }
.idx-delay-5 { transition-delay: 0.50s; }
.idx-delay-6 { transition-delay: 0.60s; }
.idx-delay-7 { transition-delay: 0.70s; }

/* HEXAGON ANIMATIONS */
.idx-hex {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.idx-hex-1b { transform: translate(3.5rem, -2.5rem); }
.idx-hex-1a { transform: translate(-0.5rem, 1rem); }
.idx-hex-2b-left { transform: translateX(-3.75rem); }
.idx-hex-2a-right { transform: translateX(3rem); }
.idx-hex-3b-left { transform: translateX(-3.75rem); }
.idx-hex-3a-right { transform: translateX(3rem); }
.idx-hex-4a { transform: translate(-2rem, -3rem); }
.idx-hex-4b { transform: translate(2rem, 3.5rem); }
.idx-hex-needhelp { transform: translateY(2rem); }

.idx-hex.idx-in-view {
  opacity: 1;
  transform: translate(0, 0) !important;
}

/* HERO ANIMATION */
.idx-hero-txt {
  opacity: 0;
  transform: translateX(-50px);
  animation: idxHeroLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.idx-hero-img {
  opacity: 0;
  transform: translateX(50px);
  animation: idxHeroRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes idxHeroLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes idxHeroRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* CHAT POPUP */
#chatPopup {
  transition: opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: bottom right;
}

#chatPopup.chat-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92) translateY(12px);
}

#chatPopup.chat-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}


/* ==========================================================
   WHO-WE-ARE CSS
   ========================================================== */
.wwa-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.wwa-anim.wwa-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.wwa-left {
    transform: translateX(-50px);
}

.wwa-right {
    transform: translateX(50px);
}

.wwa-up {
    transform: translateY(40px);
}

.wwa-scale {
    transform: scale(0.85);
}

/* Stagger delays */
.wwa-delay-1 {
    transition-delay: 0.10s;
}

.wwa-delay-2 {
    transition-delay: 0.20s;
}

.wwa-delay-3 {
    transition-delay: 0.30s;
}

.wwa-delay-4 {
    transition-delay: 0.40s;
}

.wwa-delay-5 {
    transition-delay: 0.50s;
}

.wwa-delay-6 {
    transition-delay: 0.60s;
}

/* HERO */
.wwa-hero-text {
    opacity: 0;
    transform: translateX(-50px);
    animation: wwa-heroLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

@keyframes wwa-heroLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================
   WHAT-WE-DO CSS
   ========================================================== */
.wwd-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.wwd-anim.wwd-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.wwd-left { transform: translateX(-50px); }
.wwd-right { transform: translateX(50px); }
.wwd-up { transform: translateY(40px); }
.wwd-scale { transform: scale(0.85); }

/* Stagger delays */
.wwd-delay-1 { transition-delay: 0.10s; }
.wwd-delay-2 { transition-delay: 0.20s; }
.wwd-delay-3 { transition-delay: 0.30s; }
.wwd-delay-4 { transition-delay: 0.40s; }
.wwd-delay-5 { transition-delay: 0.50s; }
.wwd-delay-6 { transition-delay: 0.60s; }
.wwd-delay-7 { transition-delay: 0.70s; }

/* ============================================================
   HEXAGON ANIMATIONS
============================================================ */
.wwd-hex-animate {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.wwd-hex-needhelp { transform: translateY(2rem); }

.wwd-hex-animate.wwd-in-view {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* ==========================================================
   WHAT-WE-DO-2 CSS
   ========================================================== */
.wwd2-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.wwd2-anim.wwd2-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.wwd2-left { transform: translateX(-50px); }
.wwd2-right { transform: translateX(50px); }
.wwd2-up { transform: translateY(40px); }
.wwd2-scale { transform: scale(0.85); }

/* Stagger delays */
.wwd2-delay-1 { transition-delay: 0.10s; }
.wwd2-delay-2 { transition-delay: 0.20s; }
.wwd2-delay-3 { transition-delay: 0.30s; }
.wwd2-delay-4 { transition-delay: 0.40s; }
.wwd2-delay-5 { transition-delay: 0.50s; }
.wwd2-delay-6 { transition-delay: 0.60s; }
.wwd2-delay-7 { transition-delay: 0.70s; }

/* ============================================================
   HEXAGON ANIMATIONS
============================================================ */
.wwd2-hex-animate {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.wwd2-hex-animate.wwd2-in-view {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* ==========================================================
   WHAT-WE-DO-3 CSS
   ========================================================== */
.wwd3-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.wwd3-anim.wwd3-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.wwd3-left { transform: translateX(-50px); }
.wwd3-right { transform: translateX(50px); }
.wwd3-up { transform: translateY(40px); }
.wwd3-scale { transform: scale(0.85); }

/* Stagger delays */
.wwd3-delay-1 { transition-delay: 0.10s; }
.wwd3-delay-2 { transition-delay: 0.20s; }
.wwd3-delay-3 { transition-delay: 0.30s; }
.wwd3-delay-4 { transition-delay: 0.40s; }
.wwd3-delay-5 { transition-delay: 0.50s; }
.wwd3-delay-6 { transition-delay: 0.60s; }
.wwd3-delay-7 { transition-delay: 0.70s; }

/* ============================================================
   HEXAGON ANIMATIONS
============================================================ */
.wwd3-hex-animate {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.wwd3-hex-animate.wwd3-in-view {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* ==========================================================
   HOW-WE-DO CSS
   ========================================================== */
.hwd-clip-hexagon {
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}

.hwd-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.hwd-anim.hwd-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.hwd-left { transform: translateX(-50px); }
.hwd-right { transform: translateX(50px); }
.hwd-up { transform: translateY(40px); }
.hwd-scale { transform: scale(0.85); }

/* Stagger delays */
.hwd-delay-1 { transition-delay: 0.10s; }
.hwd-delay-2 { transition-delay: 0.20s; }
.hwd-delay-3 { transition-delay: 0.30s; }
.hwd-delay-4 { transition-delay: 0.40s; }
.hwd-delay-5 { transition-delay: 0.50s; }
.hwd-delay-6 { transition-delay: 0.60s; }
.hwd-delay-7 { transition-delay: 0.70s; }




/* ==========================================================
   MARKETPLACE CSS
   ========================================================== */


.mkt-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* visible state */
.mkt-anim.mkt-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

/* directions */
.mkt-left { transform: translateX(-50px); }
.mkt-right { transform: translateX(50px); }
.mkt-up { transform: translateY(40px); }
.mkt-scale { transform: scale(0.85); }

/* delays */
.mkt-delay-1 { transition-delay: 0.10s; }
.mkt-delay-2 { transition-delay: 0.20s; }
.mkt-delay-3 { transition-delay: 0.30s; }
.mkt-delay-4 { transition-delay: 0.40s; }

/* ==========================================================
   HIV-AIDS CSS
   ========================================================== */
.hiv-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.hiv-anim.hiv-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.hiv-left { transform: translateX(-50px); }
.hiv-right { transform: translateX(50px); }
.hiv-up { transform: translateY(40px); }
.hiv-scale { transform: scale(0.82); }

/* Stagger delays */
.hiv-delay-1 { transition-delay: 0.10s; }
.hiv-delay-2 { transition-delay: 0.20s; }
.hiv-delay-3 { transition-delay: 0.30s; }
.hiv-delay-4 { transition-delay: 0.40s; }
.hiv-delay-5 { transition-delay: 0.50s; }
.hiv-delay-6 { transition-delay: 0.60s; }
.hiv-delay-7 { transition-delay: 0.70s; }
.hiv-delay-8 { transition-delay: 0.80s; }
.hiv-delay-9 { transition-delay: 0.90s; }
.hiv-delay-10 { transition-delay: 1.00s; }

/* HERO — page-load */
.hiv-hero-up {
    opacity: 0;
    transform: translateY(30px);
    animation: hiv-heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

@keyframes hiv-heroUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* BAR CHART ANIMATION */
.hiv-chart-bar {
    transition: height 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    height: 0 !important;
}

.hiv-chart-bar.hiv-bar-animated {
    height: var(--bar-h) !important;
}

/* DONUT CHART ANIMATION */
.hiv-donut-animate {
    opacity: 0;
    transform: scale(0.7) rotate(-90deg);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.hiv-donut-animate.hiv-visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* HEXAGON cascade */
.hiv-hex-cascade {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.hiv-hex-cascade.hiv-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
   STD CSS
   ========================================================== */
.std-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.std-anim.std-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.std-left { transform: translateX(-50px); }
.std-right { transform: translateX(50px); }
.std-up { transform: translateY(40px); }
.std-scale { transform: scale(0.82); }

/* Stagger delays */
.std-delay-1 { transition-delay: 0.10s; }
.std-delay-2 { transition-delay: 0.20s; }
.std-delay-3 { transition-delay: 0.30s; }
.std-delay-4 { transition-delay: 0.40s; }
.std-delay-5 { transition-delay: 0.50s; }
.std-delay-6 { transition-delay: 0.60s; }
.std-delay-7 { transition-delay: 0.70s; }
.std-delay-8 { transition-delay: 0.80s; }

/* HERO — page-load */
.std-hero-up {
    opacity: 0;
    transform: translateY(30px);
    animation: std-heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

@keyframes std-heroUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hexagon cascade */
.std-hex-cascade {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.std-hex-cascade.std-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
   OTHER CSS (HEALTHCARE)
   ========================================================== */
.oth-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.oth-anim.oth-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.oth-left { transform: translateX(-50px); }
.oth-right { transform: translateX(50px); }
.oth-up { transform: translateY(40px); }
.oth-scale { transform: scale(0.82); }

/* Stagger delays */
.oth-delay-1 { transition-delay: 0.10s; }
.oth-delay-2 { transition-delay: 0.20s; }
.oth-delay-3 { transition-delay: 0.30s; }
.oth-delay-4 { transition-delay: 0.40s; }
.oth-delay-5 { transition-delay: 0.50s; }
.oth-delay-6 { transition-delay: 0.60s; }
.oth-delay-7 { transition-delay: 0.70s; }
.oth-delay-8 { transition-delay: 0.80s; }
.oth-delay-9 { transition-delay: 0.90s; }
.oth-delay-10 { transition-delay: 1.00s; }

/* HERO — page-load */
.oth-hero-up {
    opacity: 0;
    transform: translateY(30px);
    animation: oth-heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

@keyframes oth-heroUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hexagon cascade */
.oth-hex-cascade {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.oth-hex-cascade.oth-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
   STORIES CSS
   ========================================================== */
.story-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-anim.story-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.story-left { transform: translateX(-50px); }
.story-right { transform: translateX(50px); }
.story-up { transform: translateY(40px); }
.story-scale { transform: scale(0.85); }

/* Stagger delays */
.story-delay-1 { transition-delay: 0.10s; }
.story-delay-2 { transition-delay: 0.20s; }
.story-delay-3 { transition-delay: 0.30s; }
.story-delay-4 { transition-delay: 0.40s; }

/* HERO — page-load */
.story-hero-up {
    opacity: 0;
    transform: translateY(30px);
    animation: story-heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

@keyframes story-heroUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================
   JOBS CSS
   ========================================================== */
.job-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.job-anim.job-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.job-left { transform: translateX(-50px); }
.job-right { transform: translateX(50px); }
.job-up { transform: translateY(40px); }
.job-scale { transform: scale(0.85); }

/* Stagger delays */
.job-delay-1 { transition-delay: 0.10s; }
.job-delay-2 { transition-delay: 0.20s; }
.job-delay-3 { transition-delay: 0.30s; }
.job-delay-4 { transition-delay: 0.40s; }


/* ==========================================================
   RESOURCES CSS
   ========================================================== */
.res-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.res-anim.res-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.res-left { transform: translateX(-50px); }
.res-right { transform: translateX(50px); }
.res-up { transform: translateY(40px); }
.res-scale { transform: scale(0.85); }

/* Stagger delays */
.res-delay-1 { transition-delay: 0.10s; }
.res-delay-2 { transition-delay: 0.20s; }
.res-delay-3 { transition-delay: 0.30s; }
.res-delay-4 { transition-delay: 0.40s; }


/* ==========================================================
   NEWS ARTICLES CSS
   ========================================================== */
.news-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.news-anim.news-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.news-left { transform: translateX(-50px); }
.news-right { transform: translateX(50px); }
.news-up { transform: translateY(40px); }
.news-scale { transform: scale(0.85); }

/* Stagger delays */
.news-delay-1 { transition-delay: 0.10s; }
.news-delay-2 { transition-delay: 0.20s; }
.news-delay-3 { transition-delay: 0.30s; }
.news-delay-4 { transition-delay: 0.40s; }


/* ==========================================================
   FCRA CSS
   ========================================================== */
.fcra-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.fcra-anim.fcra-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.fcra-left { transform: translateX(-50px); }
.fcra-right { transform: translateX(50px); }
.fcra-up { transform: translateY(40px); }
.fcra-scale { transform: scale(0.85); }

/* Stagger delays */
.fcra-delay-1 { transition-delay: 0.10s; }
.fcra-delay-2 { transition-delay: 0.20s; }
.fcra-delay-3 { transition-delay: 0.30s; }
.fcra-delay-4 { transition-delay: 0.40s; }
.fcra-delay-5 { transition-delay: 0.50s; }
.fcra-delay-6 { transition-delay: 0.60s; }
.fcra-delay-7 { transition-delay: 0.70s; }


/* ==========================================================
   CONTACT US CSS
   ========================================================== */
.con-clip-hex {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.con-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.con-anim.con-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.con-left { transform: translateX(-50px); }
.con-right { transform: translateX(50px); }
.con-up { transform: translateY(40px); }
.con-scale { transform: scale(0.82); }

/* Stagger delays */
.con-delay-1 { transition-delay: 0.10s; }
.con-delay-2 { transition-delay: 0.20s; }
.con-delay-3 { transition-delay: 0.30s; }
.con-delay-4 { transition-delay: 0.40s; }
.con-delay-5 { transition-delay: 0.50s; }
.con-delay-6 { transition-delay: 0.60s; }

.con-hero-left {
    opacity: 0;
    transform: translateX(-50px);
    animation: con-heroLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.con-hero-right {
    opacity: 0;
    transform: translateX(50px);
    animation: con-heroRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes con-heroLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes con-heroRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.con-map-image {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 1s ease, transform 1s ease;
}

.con-map-image.con-map-visible {
    opacity: 1;
    transform: scale(1);
}

.con-map-pin {
    opacity: 0;
    transform: translateY(-60px) scale(0.4);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.con-map-pin.con-pin-dropped {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.con-hex-cascade {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.con-hex-cascade.con-in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Specific focus inputs on contact page, kept scoped optionally but since global, leave raw */
input:focus,
textarea:focus {
    box-shadow: 0 0 0 2px rgba(241, 154, 189, 0.4);
    transition: box-shadow 0.25s ease;
}


/* ============================================================
   STICKY SIDE ICONS
   1. Entrance: slides in from the right after page loads
   2. Float: each icon bobs up/down continuously,
      offset in phase so they never move in sync
============================================================ */
.sticky-icon {
  opacity: 0;
  transform: translateX(70px);
}

/* ENTER (controlled by JS) */
.sticky-icon.show {
  animation: stickyEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
             stickyFloat 3s ease-in-out 1s infinite;
}

/* EXIT (float + right) */
.sticky-icon.hide {
  animation: stickyExit 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ENTER */
@keyframes stickyEnter {
  from {
    opacity: 0;
    transform: translateX(70px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* FLOAT */
@keyframes stickyFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}

/* EXIT (FLOAT + RIGHT) */
@keyframes stickyExit {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(30px) translateY(-4px);
  }
  100% {
    opacity: 0;
    transform: translateX(70px) translateY(0);
  }
}