@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

/*section: crown story -start*/
.cs-wrap {
    padding: 3em 0em 5em 0em;
}
.cs-wrap::after { /* Clearfix so container wraps around the float */
    content: '';
    display: table;
    clear: both;
}
.cs-float-right { /* Float the photo right — ALL text flows around it */
    float: right;
    width: clamp(280px, 45vw, 560px);
    margin: 0em 0em 1.5em clamp(1em, 3vw, 2.5em);
}
.cs-story-tab {
    display: block;
    text-align: center;
    background: #FFFF00;
    color: #1C1917;
    font-family: 'Inter';
    font-weight: 800;
    font-size: 1.2em;
    padding: 0.5em 1.2em;
    border-radius: 0.6em;
    margin-bottom: -1.3em;
    right: 40%;
    position: relative;
    z-index: 1;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.cs-photo-wrap {
    position: relative;
    border-radius: 0.8em;
    overflow: hidden;
    background: #1C2D6B;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.cs-photo-wrap img {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: top;
}
.cs-badge {
    position: absolute;
    top: 1em;
    right: 1em;
    background: #E4E4E4;
    color: #1C1917;
    font-family: 'Inter';
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4em 0.9em;
    border-radius: 0.6em;
}
.cs-wrap .careers-back-btn { 
    order: 1; 
}
.careers-back-btn {
    background: transparent;
    width: max-content;
    margin: 0em 0em 2em 0em;
    color: #1C1917;
    border: 2px solid transparent;
    border-radius: 0.6em;
    padding: 0.8em 1em;
    font-family: 'Inter';
    font-weight: 700;
    font-size: 1em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    text-decoration: none;
    box-shadow: none;
    transition: all ease-out 0.1s;
}
.careers-back-btn:hover {
    border: 2px solid #1C1917;
    transform: translateY(2px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
}
.cs-wrap .cs-header-group {
    order: 2;
    display: flex; 
    flex-direction: column; 
    gap: 0.5em;
    margin: 0em 0em 2em 0em;
}
.cs-name {
    font-family: 'Inter';
    font-weight: 800;
    font-size: 3em;
    color: #1C1917;
    margin: 0em 0em 0.15em 0em;
    line-height: 1.1;
}
.cs-role {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 1.3em;
    color: #78716C;
    margin: 0em 0em 1.2em 0em;
}
.cs-joined {
    display: flex;
    align-items: center;
    gap: 0.8em;
    font-family: 'Inter';
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #78716C;
    margin: 0 0 1.5em 0;
}
.cs-joined::before {
    content: '';
    width: 36px;
    height: 2px;
    background: #78716C;
    flex-shrink: 0;
}
.cs-para {
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;
    font-size: 1.4em;
    color: #121111;
    line-height: 1.4;
    word-spacing: 3px;
    margin: 0 0 1.2em 0;
}
.cs-quote-block {
    border-left: 20px solid #FFFF00;
    background: #FAFAF9;
    border-radius: 0 0.5em 0.5em 0;
    padding: 1.5em 1.8em;
    margin: 0em 0em 1.2em 0em;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.cs-quote-text {
    font-family: 'Merriweather', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
    font-size: 1.4em;
    color: #121111;
    line-height: 1.4;
    word-spacing: 6px;
    margin: 0;
}
/*section: crown story -end*/

/*section: explore other story -start*/
.exp-more-cs-main {
    background-color: #FFFF00;
    padding: 0;
}
.exp-more-cs {
    padding: 4.5em 0em;
}
.exp-more-cs .story-grid {
    padding: 4.5em 0em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* default: centers 1-3 cards */
    gap: 1.5em;
    max-width: 100%;
    margin: 0 auto;
}
.exp-more-cs .story-grid.has-overflow { /* Applied by JS when 4+ cards */
    justify-content: flex-start;
}
.exp-more-cs .story-grid .story-card {
    flex: 0 0 calc(33.333% - 1em);
    min-width: 280px;
}
.exp-more-cs-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 2.5em;
}
.exp-more-cs-title {
    font-family: 'Inter';
    font-weight: 800;
    font-size: 2.4em;
    /*font-size: clamp(1.6em, 3vw, 2.4em);*/
    color: #1C1917;
    margin: 0em 0em 0.4em 0em;
}
.exp-more-cs-subtitle {
    font-family: 'Inter';
    font-size: 1.2em;
    /*font-size: clamp(0.95em, 1.5vw, 1.15em);*/
    color: #1C1917;
    max-width: 34em;
    margin: 0;
}
.story-card {
    background: #fff;
    border-radius: 0.8em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
.story-card:has(.read-story-link:hover) {
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    text-decoration: none;
    color: #1C1917;
}
.story-card:has(.read-story-link:hover) .story-image-wrap img {
    transform: scale(1);
    text-decoration: none;
    color: #1C1917;
}
.story-card:has(.read-story-link:hover) .story-badge {
    background: #FFF000;
    font-weight: 800;
    text-decoration: none;
    color: #1C1917;
}
.story-card:has(.read-story-link:hover) .story-name {
    font-size: 1.5em;
    text-decoration: none;
    color: #1C1917;
}
.story-image-wrap {
    position: relative;
    height: 280px;
    background-color: #1C2D6B;
    overflow: hidden;
    flex-shrink: 0;
}
.story-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 0.2s ease-out;
}
.story-badge {
    position: absolute;
    top: 1em;
    right: 1em;
    background: #E7E5E4;
    color: #1C1917;
    font-family: 'Inter';
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4em 0.9em;
    border-radius: 0.6em;
    z-index: 2;
    transition: all ease-out 0.2s;
}
.story-content {
    padding: 2em;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.story-name {
    font-family: 'Inter';
    font-weight: 800;
    font-size: 1.4em;
    color: #1C1917;
    margin: 0 0 0.2em 0;
    transition: all ease-out 0.2s;
}
.story-role {
    font-family: 'Inter';
    font-size: 0.9em;
    color: #78716C;
    line-height: 1.4;
    margin: 0em 0em 1.5em 0em;
}
.story-quote {
    font-family: 'Roboto';
    font-style: italic;
    font-size: 1.1em;
    color: #1C1917;
    line-height: 1.6;
    margin: 0 0 1.2em 0;
    flex-grow: 1;
}
.read-story-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: 'Inter';
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1C1917;
    text-decoration: none;
    border-bottom: 2px solid #1C1917;
    padding-bottom: 0.3em;
    width: fit-content;
    transition: gap 0.15s ease-out;
}
.read-story-link:hover {
    gap: 0.8em;
    text-decoration: none;
    color: #1C1917;
}
/*section: explore other story -end*/

@media(max-width:1199px) {
    /*section: crown story -start*/
    .cs-wrap {
            padding: 2em 0em;
        }
    /*section: crown story -end*/
}
@media(max-width:991px) {
    /*section: explore other story -start*/
    .exp-more-cs .story-grid .story-card {
        flex: 0 0 100%;
    }
    .exp-more-cs .story-grid {
        max-width: 100%;
    }
    .exp-more-cs-title {
        font-size: 2em;
    }
    .exp-more-cs-subtitle {
        font-size: 1em;
    }
    .story-image-wrap {
        height: clamp(220px, 55vw, 420px);
    }
    /*section: explore other story -end*/
    
    /*section: crown story -start*/
    .cs-wrap {
        display: flex;
        flex-direction: column;
    }
    .cs-float-right {
        order: 3;
        float: none;
        width: 100%;
        margin: 0em 0em 2em 0em;
        position: relative;
    }
    .cs-story-tab {
        position: absolute;
        top: -1.3em;
        left: 0;          /* tab starts at the container's left edge */
        margin: 0;
        font-size: 1em;
        border-radius: 0.5em;
        z-index: 3;
        font-size: clamp(0.7em, 3vw, 1em);
        padding: 0.6em 1.1em;
    }
    .cs-photo-wrap {
        margin-left: 2em; /* pushes image right, tab pokes out to the left of it */
    }
    .careers-back-btn {
        margin: 0em 0em 1.2em 0em;
    }
    .cs-name {
        font-size: 2.5em;
        margin: 0;
    }
    .cs-role {
        font-size: 1.1em;
        margin: 0em 0em 1em 0em;
    }
    .cs-joined {
        font-size: 0.8em;
    }
    .cs-joined::before {
        width: 25px;
        height: 1.5px;
    }
    .cs-para {
        font-size: 1.2em;
    }
    .cs-para, .cs-quote-block { 
        order: 4; 
    }
    .cs-quote-text {
        font-size: 1.2em;
    }
    /*section: crown story -end*/
    
    /*section: role details -start*/
    .career-content {
        grid-template-columns: 1fr;
    }
    .cd-article {
        padding-top: 0;
    }
    .cd-questions-card-inline {
        display: flex;
    }
    .cd-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-bottom: 0;
        order: -1; /* sidebar moves above content on mobile */
    }
    /*section: role details -end*/
    
    /*section: other open roles -start*/
    .other-roles-header {
        flex-direction: column;
        justify-content: center;
    }
    .other-roles-title {
        text-align: center;
    }
    .other-roles-grid {
        grid-template-columns: 1fr;
    }
    /*section: other open roles -end*/
}
@media(max-width:575px) {
    /*section: explore other story -start*/
    .exp-more-cs {
        padding: 2em 2em 4em 2em;
    }
    .exp-more-cs-title {
        font-size: 1.6em;
    }
    .story-content {
        padding: 1.5em 1.5em 2em 1.5em;
    }
    /*section: explore other story -end*/
    
    /*section: crown story -start*/
    .cs-wrap {
        padding: 1em 2em;
    }
    .cs-header-group {
        margin: 0em 0em 1em 0em;
    }
    /*section: crown story -end*/
    
    /*section: role banner -start*/
    .banner-sub-cd {
        padding: 1em 2em;
    }
    .career-location {
        font-size: 1em;
    }
    /*section: role banner -end*/
    
    /*section: role details -start*/
    .career-content {
        padding: 0em 2em;
    }
    /*section: role details -end*/
    
    /*section: other open roles -start*/
    .other-career-content {
        padding: 2em;
    }
    /*section: other open roles -end*/
}
@media (max-width:554px) {
    /*section: role banner -start*/
    .career-location {
        align-items: start;
    }
    /*section: role banner -end*/
}
@media (max-width:500px) {
    /*section: crown story -start*/
    .career-location {
    .cs-float-right {
        margin: 0em 0em 1em 0em;
    }
    .cs-badge {
        font-size: 0.6em;
    }
    .cs-name {
        font-size: 2.1em;
        margin: 0;
    }
    .cs-role {
        font-size: 1em;
        margin: 0em 0em 1em 0em;
    }
    .cs-joined {
        font-size: 0.7em;
    }
    .cs-joined::before {
        width: 25px;
        height: 1.5px;
    }
    .cs-para {
        font-size: 1em;
    }
    .cs-quote-text {
        font-size: 1em;
    }
    /*section: crown story -end*/
@media (max-width:485px) {
    /*section: other open roles -start*/
    .break-line-job {
        display: block;
    }
    /*section: other open roles -end*/
}
@media (max-width:440px) {
    /*section: crown story -start*/
    .cs-float-right {
        margin: 0em 0em 1em 0em;
    }
    .cs-badge {
        font-size: 0.6em;
    }
    .cs-name {
        font-size: 1.9em;
        margin: 0;
    }
    .cs-role {
        font-size: 0.9em;
        margin: 0em 0em 1em 0em;
    }
    .cs-joined {
        font-size: 0.6em;
    }
    .cs-joined::before {
        width: 25px;
        height: 1.5px;
    }
    .cs-para {
        font-size: 1em;
    }
    .cs-quote-text {
        font-size: 1em;
    }
    /*section: crown story -end*/
}