/* -------------------------
   Sections
------------------------- */
.impact-support-wrapper section {scroll-margin-top:125px;}
.impact-support-wrapper section>.container {padding-top:70px; padding-bottom:70px; padding-right:20px; padding-left:20px;}
.impact-support-wrapper section a:hover {color:var(--clr-neutral-700);}
.impact-support-wrapper section .btn {margin-bottom:1.25rem; display:inline-flex; gap:.5rem;}
.impact-support-wrapper section .btn img {width:32px;}
.impact-support-wrapper section .btn:hover {background-color:var(--clr-neutral-700) !important; border-color:var(--clr-neutral-700) !important;}
.impact-support-wrapper section ul.cta-links {list-style:none; margin-left:0;}

@media (min-width:768px) {
    .impact-support-wrapper section>.container {padding-top:100px; padding-bottom:100px;} 
}



/* -------------------------
   GSAP Animation set elements to hidden on load
------------------------- */
[data-animate] {visibility:hidden;}



/* -------------------------
   Images
------------------------- */
.impact-support-wrapper svg,
.impact-support-wrapper img {display:block; width:100%; height:auto;}
.img-fit {object-fit:cover; width:100%; height:auto;}
.img-rounded {border-radius:1rem;}



/* -------------------------
   Backgrounds
------------------------- */
[data-background='white'] {background-color:var(--clr-neutral-100);}
[data-background='grey'] {background-color:var(--clr-neutral-200);}
[data-background='red'] {background-color:var(--clr-red-400); color:var(--clr-neutral-100);}
[data-background='dust-grey'] {background-color:#E1DBD4;}



/* -------------------------
   Fonts
------------------------- */
.sectionTitle {font-size:30px; line-height:1.1;}

/* Default */
.impact-support-wrapper {color:var(--clr-red-700);}
.impact-support-wrapper .sectionTitle {color:var(--clr-red-700); max-width:628px}
.impact-support-wrapper .sectionTitle span {color:var(--clr-red-400);}
.impact-support-wrapper .sectionTitleH3 {color: var(--clr-red-700);}
.impact-support-wrapper .sectionTitleH3 span {color: var(--clr-red-400);}
.impact-support-wrapper strong {font-family:'Circular Std Black';}

@media (max-width:420px) {
    .sectionTitle br {display:none;}
}

@media (min-width:768px) {
    .sectionTitle {font-size:38px;}
}




/* -------------------------
   Scroll Indicator
------------------------- */
#scroll-progress-bar {background-color:var(--clr-neutral-700); position:fixed; top:0; left:0; width:100vw; padding:4px 0; z-index:1035;}
#scroll-progress-bar-indicator {background-color:var(--clr-red-400); width:0; height:4px;}



/* -------------------------
   Quick Links
------------------------- */
#quick-links {background-color:var(--clr-neutral-700); color:var(--clr-neutral-100); position:sticky; top:90px; z-index:99; padding:0;}
.quick-links-toggle {display:flex; width:100%; background:none; border:0; color:var(--clr-neutral-100); text-align:left; font:inherit; cursor:pointer; padding:12px 0; transition:color .3s ease-out;}
.quick-links-toggle:hover {color:var(--clr-red-400);}
.quick-links-toggle svg path {transition:fill .3s ease-out;}
.quick-links-toggle:hover svg path {fill:var(--clr-red-400)}
.quick-links-toggle svg {width:14px; margin-left:auto; transition:transform .3s ease-out;}
.quick-links-toggle[aria-expanded='true'] svg {transform:rotate(180deg);}
.quick-links-list {display:none; margin:12px 0 0; padding:0; list-style:none; flex-direction:column; row-gap:12px;}
#quick-links.open .quick-links-list {display:flex;}
#quick-links a {color:var(--clr-neutral-100); text-decoration:none; display:block;}
#quick-links a:hover {color:var(--clr-red-400);}
#quick-links .container {padding-right:20px; padding-left:20px;}

@media (min-width:576px) {
.quick-links-container {display:flex; column-gap:3.5rem;}
}

@media (min-width:768px) {
.quick-links-container {column-gap:7rem;}
}

#quick-links.open .quick-links-container {padding-bottom:2rem;}


/* -------------------------
   Hero
------------------------- */
.impact-report-hero {overflow-X:clip;}
.impact-report-hero .container {position:relative; padding-bottom:0 !important; padding-top:70px;}
.impact-report-hero-title {max-width:540px; margin:0 auto;}
.impact-report-hero .level-1-title {margin-bottom:0.5rem;}
.impact-report-hero .level-1-title span {color:var(--clr-red-700);}
.impact-report-hero p {font-size:20px;}
.impact-report-hero-people {display:flex; position:relative; z-index:1; left:50%; transform:translateX(-50%); align-items:flex-end; justify-content:center;}
.impact-report-hero-people img {display:block; width:auto; height:80vw;}
.impact-report-hero-people .ppl-1 img {transform:translateX(30%);}
.impact-report-hero-people .ppl-2 img {transform:translateX(-30%);} 
.impact-report-year {position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:100%; max-width:540px;}
.impact-report-year img {width:100%; height:auto; display:block;} 
.impact-report-hero-association {font-size:0.8rem}
.impact-report-hero-association img {max-width:105px;}

@media (min-width:576px) {
     .impact-report-hero-people img {height:400px;}
     .impact-report-hero-association {position:absolute; top:100px; left:20px;}
}

@media (min-width:992px) {
    .impact-report-hero-title {margin-left:50%;}
    .impact-report-hero-people {margin-top:-5rem;}
    .impact-report-hero-people img {height:480px;}
    .impact-report-hero p {font-size:24px;}
    .impact-report-year {left:auto; right:0; transform:none;}
    .impact-report-hero-people {transform:none; left:5%; justify-content:flex-start;}
    .impact-report-hero-people .ppl-1 img {transform:none;}
    .impact-report-hero-people .ppl-2 img {transform:translateX(-50%);}  
}

@media (min-width:1200px) { 
    .impact-report-year {max-width:580px; right:8%;} 
}

@media ((min-width:576px) and (max-width:991px)) {
    .impact-report-hero-association {left:auto; right:20px;}
}

@media ((min-width:576px) and (max-width:767px)) {
    .impact-report-hero-association {top:70px;}
}


/* -------------------------
   Speech Bubbles
------------------------- */
.speech-bubble-outline {border:5px solid var(--clr-neutral-100); font-family:var(--ff-bold); border-radius:20px; margin-top:0.3rem; margin-bottom:1.5rem; padding:1rem; border-bottom-right-radius:0; color:var(--clr-neutral-100); position:relative;}
.speech-bubble-outline span {font-family:'Circular Std Book',sans-serif;}
.speech-bubble-outline svg {width:40px; height:auto; position:absolute; bottom:-24.5px; right:-3.2px; z-index:1; overflow:visible;}
.speech-bubble-outline svg path {fill:var(--clr-red-400); stroke:var(--clr-neutral-100); stroke-width:4px;}
.speech-bubble-outline[data-bubble='yellow'] svg path {fill:var(--clr-yellow-400);}
.speech-bubble-outline[data-bubble='blue'] svg path {fill:var(--clr-blue-400);}
.speech-bubble-outline[data-bubble-colour='400'] {border-color:var(--clr-red-400); color:var(--clr-red-400);}
.speech-bubble-outline[data-bubble-colour='400'] svg path {stroke:var(--clr-red-400); fill:var(--clr-neutral-100);}
.speech-bubble-outline[data-bubble-colour='700'] {border-color:var(--clr-red-700); color:var(--clr-red-700);}
.speech-bubble-outline[data-bubble-colour='700'] svg path {stroke:var(--clr-red-700); fill:var(--clr-neutral-100);}

[data-background='dust-grey'] .speech-bubble-outline[data-bubble-colour='400'] svg path {
    fill: #E1DBD4;
}


/* -------------------------
   Taking the Temeprature
------------------------- */
.ttt-intro {position:relative; z-index:3; overflow-x:clip;}





/* -------------------------
   Section Progress
------------------------- */
.ttt-progress {position:relative; z-index:3; overflow-x:clip;}
.numbers-carousel-container {position:relative; line-height:1; border:1px solid var(--clr-red-400); display:flex; align-items:center; border-radius:1rem; height:400px;}
.numbers-carousel-container .swiper {width:100%; height:100%;}
.numbers-carousel-container .swiper-wrapper {height:100%; align-items:stretch;}
.numbers-carousel-container .swiper-slide {height:100%; display:flex; justify-content:center; align-items:center; padding:3rem;}
.swiper-slide.slide-important {background:var(--clr-red-400); color:var(--clr-neutral-100); border-radius:1rem;}

.numbers-container {display:flex; gap:1rem; width:100%; font-size:24px; align-items:center; flex-direction:column; text-align:center;}
.numbers-container>div:first-child {font-size:90px; color:var(--clr-red-400); text-align:right;}
.numbers-container>div:nth-child(2) {max-width:480px}
.numbers-container>div:nth-child(3) {position:absolute; top:2rem; right:2rem;}
.swiper-slide.slide-important .numbers-container>div:first-child {color:#fff;}

.swiper-pagination-bullet {opacity:1 !important; background:var(--clr-neutral-400) !important;}
.swiper-pagination-bullet:hover,
.swiper-pagination-bullet-active {background:var(--clr-red-400) !important;}
.swiper-pagination {position:relative; display:inline-flex; justify-content:center; gap:6px;}
.swiper-pagination[data-align="left"] {justify-content:flex-start;}
.swiper-pagination[data-align="right"] {justify-content:flex-end;}
.numbers-slider-pagination {position:relative !important; margin-top:2rem;}

.new-2026 {background-color:#fff; color:var(--clr-red-400); font-size:16px; border-radius:100vw; width:100px; aspect-ratio:1/1; display:flex; justify-content:center; align-items:center; flex-direction:column; line-height:0.9;}
.new-2026 span {font-size:34px; display:block;}

@media (min-width:480px) {
    .numbers-container {font-size:30px;}
}

@media (max-width:1199px) {
    .numbers-container br {display:none;}
}

@media (min-width:768px) {
    .numbers-container>div:first-child {font-size:180px;}
}

@media (min-width:1200px) {
    .numbers-container {font-size:36px;flex-direction:row; text-align:left; align-items:center}
    .numbers-container>div:first-child {flex:0 0 50%; justify-self:flex-end;}
    .numbers-container>div:last-child {flex:0 0 50%;} 
    .numbers-container .text-sm {font-size:36px;}
    .numbers-container {font-size:44px;}
}



/* -------------------------
   Section Stats
------------------------- */
.flourish-credit {display:none;}



/* -------------------------
   Section Stats
------------------------- */
#mental-health-progress .sectionTitle {max-width:500px}
#open-conversations .sectionTitle {max-width:540px}
#discussing-mental-health .sectionTitle {max-width:690px}
#who-to-talk-too .sectionTitle {max-width:650px}
#listening-to-employees .sectionTitle {max-width:540px}
#managers-need-support .sectionTitle {max-width:690px}

/* -------------------------
   Section Stats
------------------------- */

    .chart-placeholder {background-color:#f7f7f7; aspect-ratio:2/1;}

    .ttt-stats-text-container {flex:stretch;}
    .ttt-stats-text {padding-left:calc(1rem + 5px); padding-right:calc(1rem + 5px); margin-bottom:70px;}
    .ttt-question {position:relative; padding-left:2rem; max-width:450px; margin-bottom:1rem;}
    .ttt-question::before {content:''; position:absolute; top;0; left:0; width:26px; height:24px; background:url(/images/taking-the-temperature-2026/icon-ttt-question.svg) no-repeat 0 0; background-size:contain;} 

    @media(min-width:992px) {
    .ttt-question.ttt-question-full-width {max-width:unset}
        .ttt-stats .col-lg-3 {flex:0 0 28%; max-width:28%;}
        .ttt-stats .col-lg-9 {flex:0 0 72%; max-width:72%;}
        .ttt-stats-text {margin-bottom:0;}
    }
    @media(max-width:991px) {
        .ttt-stats .mt-auto img {margin-left:-2rem; width:calc(100% + 4rem);}
    }
    @media((min-width:441px) and (max-width:575px)) {
        .ttt-stats .mt-auto img {margin-left:-4rem; width:calc(100% + 8rem);}
        .col-xs-8 {-webkit-box-flex:0; -ms-flex:0 0 66.666667%; flex:0 0 66.666667%; max-width:66.666667%;}
        .col-xs-4 {flex:0 0 33.333337%; max-width:33.333337%;}
    }
    @media(max-width:440px) {
        .ttt-stats .mt-auto img {max-width:200px; margin:0 auto;}
        .ttt-stats-text {margin-bottom:0;}
    }
    
    
    /* -------------------------
Taking the Temperature
------------------------- */
    #taking-the-temperature .container {position:relative;}
    .thermometer::before {background:#ECECEC; content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; border-top-right-radius:100vw; border-bottom-right-radius:100vw;}
    
    .thermometer { position:relative;
        --pink-start: 1%;
        --fade-end: 3%;
        background: linear-gradient(
            90deg,
            rgba(130, 26, 51, 1) 0%,
            rgba(255, 44, 80, 1) var(--pink-start),
            rgba(255, 44, 80, 0) var(--fade-end)
        );
    }
    .thermometer-section {color:var(--clr-red-700); position:relative; padding-top:1.5rem;}
    .thermometer-section-line {width:4px; height:44px; border-radius:100vw; position:absolute; top:0; left:0; background:#fff; transform:translateY(-50%);}
    .thermometer-section-title {font-size:0.8rem; font-family:'Circular Std Black';}
   
    
    @media (max-width:767px) {
        .thermometer { position:relative;
            background: linear-gradient(
                180deg,
                rgba(130, 26, 51, 1) 0%,
                rgba(255, 44, 80, 1) var(--pink-start),
                rgba(255, 44, 80, 0) var(--fade-end)
            );
        }
        .thermometer {width:26px; height:calc(100% - 70px); position:absolute; top:0; left:20px; border-bottom-left-radius:100vw; border-bottom-right-radius:100vw;}
        .thermometer-section,
        .thermometer-base,
        #taking-the-temperature .sectionTitle {padding-left:3.25rem;}
        .thermometer-section-line {transform:translateX(22px) translateY(16px) rotate(-90deg); height:26px;}
        .thermometer::before {border-bottom-left-radius:100vw; border-bottom-right-radius:100vw;}
    }
    
    @media (min-width:380px) {
        #taking-the-temperature .sectionTitle {font-size:34px;}
        #taking-the-temperature .sectionTitle span {font-size:44px;}
    }
    
    @media (min-width:768px) {
        .thermometer {--container-width:680px; height:40px; border-top-right-radius:100vw; 
        border-bottom-right-radius:100vw; left:calc(((100vw - var(--container-width)) / 2) * -1); 
        width:calc(var(--container-width) + (100vw - var(--container-width)) / 2);}
    }
    
    @media (min-width:992px) {
        .thermometer {--container-width:920px;}
    }
    
    @media (min-width:1200px) {
        .thermometer {--container-width:1100px;}
    }
    
}