/* Breadcrumb */
.story-hero-breadcrumb-wrapper{ position: absolute; top: 0; left: 0;right: 0; height: min-content; z-index: 9;}
.story-hero-container .breadcrumb-wrapper { position: relative;width: calc(100% + 30px);height: 60px; background: var(--kal-black); }
.story-hero-container .breadcrumb-wrapper::after { content: ''; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; background-color: var(--kal-black); z-index: 0; }
.story-hero-container .breadcrumb-icon { width: 60px; height: 60px; background-color: var(--kal-blue); padding: 12px;}
.story-hero-content-box{margin-top: 120px;}
.story-hero-content{padding: 88px 12% 30px 0;}
.story-hero-content h1{font-size: 70px;font-weight: 700;line-height:0.85;letter-spacing: -0.01em;margin-bottom: 35px;}
.story-hero-text{gap: 30px;font-size: 20px;font-weight: 600;line-height: 1.5;letter-spacing: -0.01em;}
.story-hero-logo{width: 130px;height: 130px;border: 1px solid currentColor;}
.story-hero-cta{margin-top: 40px;}
.story-hero-img-box{width: calc(100% + 15px);}
.story-hero-img{width: 100%;height: 100%;}
.story-single-head{position: sticky;top:60px;z-index: 99;background: var(--kal-grey);}
.story-single-head nav ul li{width: 20%;text-align: center;}
.story-single-head nav ul li a.nav-link, .story-single-head nav ul li a.nav-link:focus{font-size: 18px;font-weight: 600;line-height: 1;color: var(--kal-black);text-transform: uppercase;padding: 0;}
.story-single-head nav ul li a.nav-link.active, .story-single-head nav ul li a.nav-link:hover{background: transparent;color: var(--kal-blue);}
.story-single-content h2{font-size: 30px;font-weight: 700;line-height: 1.25;letter-spacing: -0.025em;margin-bottom: 16px;}
.story-single-content p:has(+ img){margin-bottom: 54px; }
.story-single-content img{margin-bottom: 50px; width: 100%;}
.story-single-box{padding: 100px 0;position: relative; }
.story-single-box:not(:last-child).story-single-box::after{content: '';width: 100vw;height: 1px;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);background: var(--kal-grey);}
.story-single-upper, .story-single-lower {max-width: 75%;}
.story-single-inner + .story-single-inner{margin-top: 50px;}
.blockquote-wrapper{position: relative;padding-left: 13%;}
.blockquote-inner{padding: 50px 52px; background: var(--kal-blue-light);}
.blockquote-wrapper::before{content: '';width: 8%;aspect-ratio: 1.1/1;position: absolute;top: 0; left: 0;background: url("../../assets/images/quote-icon.svg") no-repeat center/contain;}
.blockquote-wrapper blockquote{font-size: 30px;font-weight: 700;line-height: 1.3;letter-spacing: -0.025em;margin-bottom: 0;}
.blockquote-wrapper blockquote:not(:last-child){margin-bottom: 36px;}
.blockquote-wrapper p:not(:last-child){margin-bottom: 20px;}
.ss-bottom-right{gap: 20px;}
.ss-bottom-right > span{font-size: 18px;font-weight: 600;line-height: 1.35;letter-spacing: 0;}

/* ========================================== 
! Large devices (desktops, less than 1400px)
=========================================== */
@media (max-width:1399.98px){
.story-hero-content{padding: 48px 0 30px;}
.story-hero-content h1{font-size: 50px;}
.story-hero-text{gap: 24px;line-height: 1.25;}
.story-hero-logo{width: 102px;height: 102px;}
.story-single-upper, .story-single-lower {max-width: 80%;}
.blockquote-wrapper{padding-left: 10.75%;}
.blockquote-inner{padding: 50px 42px;}
.blockquote-wrapper::before{width: 7.35%;}
}

/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px){
    .story-hero-container .breadcrumb-icon{position: relative;inset: 0;}
    .story-hero-content{padding: 35px 0 30px;}
    .story-hero-logo{width: 122px;height: 122px;}
    .story-single-head::before{content: '';width: 100vw;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);background: inherit;}
    .story-single-upper, .story-single-lower {max-width: 90%;}
    .blockquote-inner{padding: 32px 40px;}
    .blockquote-wrapper::before{width: 6.75%;}
}

/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px){
    .story-hero-container .breadcrumb-wrapper{width: calc(100% + 135px);}
    .story-hero-content{padding: 30px 0 0px;}
    .story-hero-content h1{letter-spacing: -0.025em;}
    .story-hero-text {max-width: 630px;gap: 36px;}
    .story-hero-cta{margin-top: 25px;}
    .story-hero-img-box{width: calc(100% + 30px);margin-left: -15px;}
    .story-single-box{padding: 50px 0;}
    .story-single-upper, .story-single-lower {max-width: 100%;}
    .blockquote-wrapper{padding-left: 13%;}
    .blockquote-inner{padding: 32px 30px;}
    .blockquote-wrapper::before{width: 9%;}
    .blockquote-wrapper blockquote:not(:last-child){margin-bottom: 24px;}
}

/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px){
    .story-hero-container .breadcrumb-wrapper {width: calc(100% + 15px); height: 60px; }
    .story-hero-container .breadcrumb-icon { width: 80px; height: 80px; padding: 19px 0;}
    .story-hero-content-box{margin: 0;}
    .story-hero-content{padding: 48px 0 0;}
    .story-hero-text {gap: 30px;}
    .story-hero-img-box{margin-top: 60px;} 
    .story-single-upper, .story-single-lower {max-width: 100%;}
    .blockquote-wrapper{padding: 90px 0 0;}
    .blockquote-wrapper::before{width: 66px;}
}

/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width:575.98px){

}

/* ======================================================
! Extra small devices (portrait phones, less than 370px)
====================================================== */
@media (max-width:369.98px){}