
:root{
    --rbas-navy:#0A1A2F;
    --rbas-midnight:#12233F;
    --rbas-gold:#CF9F55;
    --rbas-warm-gold:#C8A55A;
    --rbas-champagne:#E6DCC1;
    --rbas-stone:#F5F2EC;
    --rbas-white:#FFFFFF;
    --rbas-ink:#1A1A1A;
    --rbas-serif:"Cormorant Garamond",Georgia,serif;
    --rbas-sans:"Barlow",system-ui,sans-serif;
}

/* =========================================================
   SHARED SECTION HEADING
   ========================================================= */
.rbas-section,
.rbas-section *{
    box-sizing:border-box;
}

.rbas-section{
    overflow:hidden;
}

.rbas-heading-row{
    margin-bottom:54px!important;
}

.rbas-eyebrow{
    margin-bottom:20px!important;
}

.rbas-eyebrow p{
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    margin:0!important;
    padding:0!important;
    color:var(--rbas-warm-gold)!important;
    font-family:var(--rbas-sans)!important;
    font-size:12px!important;
    line-height:1.35!important;
    font-weight:500!important;
    letter-spacing:3.5px!important;
    text-transform:uppercase!important;
}

.rbas-eyebrow p::before{
    content:"";
    width:38px;
    height:1px;
    flex:none;
    background:currentColor;
    opacity:.75;
}

.rbas-main-heading h2{
    margin:0!important;
    padding:0!important;
    color:var(--rbas-ink)!important;
    font-family:var(--rbas-serif)!important;
    font-size:clamp(32px,4vw,46px)!important;
    line-height:1.12!important;
    font-weight:600!important;
    letter-spacing:-.012em!important;
}

.rbas-intro{
    margin-top:18px!important;
    max-width:560px;
}

.rbas-intro p{
    margin:0!important;
    padding:0!important;
    color:#555!important;
    font-family:var(--rbas-sans)!important;
    font-size:17px!important;
    line-height:1.7!important;
    font-weight:300!important;
}

/* Strip default margins Divi can add around nested Group modules. */
.rbas-card-rail,
.rbas-card-rail .et_pb_module{
    margin-top:0!important;
}

/* =========================================================
   CORE VALUES - DESKTOP
   ========================================================= */
.rbas-values-rail{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:46px 40px!important;
    align-items:start!important;
}

.rbas-value-card{
    min-width:0!important;
    padding-top:26px!important;
    border-top:1px solid var(--rbas-gold)!important;
}

.rbas-card-number{
    margin-bottom:16px!important;
}

.rbas-card-number p{
    margin:0!important;
    padding:0!important;
    color:var(--rbas-warm-gold)!important;
    font-family:var(--rbas-sans)!important;
    font-size:10px!important;
    line-height:1.3!important;
    font-weight:600!important;
    letter-spacing:2.3px!important;
}

.rbas-card-heading{
    margin-bottom:15px!important;
}

.rbas-card-heading h3{
    margin:0!important;
    padding:0!important;
    color:var(--rbas-ink)!important;
    font-family:var(--rbas-serif)!important;
    font-size:23px!important;
    line-height:1.22!important;
    font-weight:600!important;
    letter-spacing:-.01em!important;
}

.rbas-card-lead{
    margin-bottom:17px!important;
}

.rbas-card-lead p{
    margin:0!important;
    padding:0!important;
    color:var(--rbas-navy)!important;
    font-family:var(--rbas-sans)!important;
    font-size:15px!important;
    line-height:1.65!important;
    font-weight:600!important;
}

.rbas-card-list ul{
    list-style:none!important;
    margin:0!important;
    padding:0!important;
}

.rbas-card-list li{
    position:relative!important;
    margin:0 0 10px!important;
    padding:0 0 0 18px!important;
    color:#787878!important;
    font-family:var(--rbas-sans)!important;
    font-size:14.5px!important;
    line-height:1.65!important;
    font-weight:300!important;
}

.rbas-card-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:7px;
    height:1px;
    background:var(--rbas-gold);
}

/* Make the final two values sit naturally as a second row. */
@media (min-width:981px){
    .rbas-values-rail > .rbas-value-card:nth-child(4),
    .rbas-values-rail > .rbas-value-card:nth-child(5){
        margin-top:2px!important;
    }
}

/* =========================================================
   WHAT SETS DSB APART - DESKTOP
   ========================================================= */
.rbas-difference-rail{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:34px!important;
    align-items:start!important;
}

.rbas-difference-card{
    min-width:0!important;
    padding-top:26px!important;
    border-top:1px solid rgba(207,159,85,.70)!important;
}

.rbas-diff-heading{
    margin-bottom:14px!important;
}

.rbas-diff-heading h3{
    margin:0!important;
    padding:0!important;
    color:var(--rbas-gold)!important;
    font-family:var(--rbas-serif)!important;
    font-size:22px!important;
    line-height:1.3!important;
    font-weight:500!important;
    letter-spacing:-.01em!important;
}

.rbas-diff-copy p{
    margin:0!important;
    padding:0!important;
    color:#686868!important;
    font-family:var(--rbas-sans)!important;
    font-size:15px!important;
    line-height:1.72!important;
    font-weight:300!important;
}

/* =========================================================
   TABLET - HEADING FIXED, CARDS SWIPE
   ========================================================= */
@media (min-width:601px) and (max-width:980px){

    .rbas-section{
        overflow:hidden!important;
    }

    .rbas-heading-row{
        margin-bottom:42px!important;
    }

    .rbas-card-rail{
        display:flex!important;
        flex-wrap:nowrap!important;
        align-items:stretch!important;
        gap:20px!important;

        overflow-x:auto!important;
        overflow-y:visible!important;
        scroll-snap-type:x mandatory!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-x:contain!important;
        scrollbar-width:none!important;

        margin-left:-6.82vw!important;
        margin-right:-6.82vw!important;
        padding-left:6.82vw!important;
        padding-right:6.82vw!important;
        padding-bottom:12px!important;
    }

    .rbas-card-rail::-webkit-scrollbar{
        display:none!important;
    }

    .rbas-rail-card{
        flex:0 0 46%!important;
        width:46%!important;
        max-width:46%!important;
        min-width:0!important;
        scroll-snap-align:start!important;
        scroll-snap-stop:normal!important;
    }
}

/* =========================================================
   MOBILE - EXACT BEHAVIOUR FROM ORIGINAL:
   TITLE/INTRO REMAIN FIXED; ONLY CARDS MOVE HORIZONTALLY
   ========================================================= */
@media (max-width:600px){

    .rbas-section{
        overflow:hidden!important;
    }

    .rbas-heading-row{
        margin-bottom:38px!important;
    }

    .rbas-eyebrow{
        margin-bottom:19px!important;
    }

    .rbas-eyebrow p{
        font-size:10.5px!important;
        letter-spacing:3px!important;
    }

    .rbas-eyebrow p::before{
        width:34px;
    }

    .rbas-main-heading h2{
        font-size:30px!important;
        line-height:1.12!important;
    }

    .rbas-intro{
        margin-top:17px!important;
        max-width:290px!important;
    }

    .rbas-intro p{
        font-size:15px!important;
        line-height:1.65!important;
    }

    .rbas-card-rail{
        display:flex!important;
        flex-wrap:nowrap!important;
        align-items:stretch!important;
        gap:14px!important;

        overflow-x:auto!important;
        overflow-y:visible!important;
        scroll-snap-type:x mandatory!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-x:contain!important;
        scrollbar-width:none!important;

        /* Row is 88% wide, so this visually lets the rail reach the screen edge
           while keeping the fixed heading aligned to the normal content rail. */
        margin-left:-6.82vw!important;
        margin-right:-6.82vw!important;
        padding-left:6.82vw!important;
        padding-right:6.82vw!important;
        padding-bottom:12px!important;
    }

    .rbas-card-rail::-webkit-scrollbar{
        display:none!important;
    }

    .rbas-rail-card{
        flex:0 0 84%!important;
        width:84%!important;
        max-width:84%!important;
        min-width:84%!important;
        scroll-snap-align:start!important;
        scroll-snap-stop:normal!important;
    }

    .rbas-value-card,
    .rbas-difference-card{
        padding-top:23px!important;
    }

    .rbas-card-heading h3{
        font-size:21px!important;
    }

    .rbas-card-lead p{
        font-size:14.5px!important;
    }

    .rbas-card-list li{
        font-size:14px!important;
    }

    .rbas-diff-heading h3{
        font-size:21px!important;
    }

    .rbas-diff-copy p{
        font-size:14.5px!important;
        line-height:1.7!important;
    }
}

/* A duplicated Group automatically becomes another rail card.
   No JS and no duplicated desktop/mobile content are required. */


/* =========================================================
   0.1.2 — CORE VALUES PHONE SLIDER
   Same behaviour as the accepted Four Departments mobile rail:
   - fixed section heading/intro
   - only cards swipe
   - one main card visible
   - next card peeks in from the right
   - equal-height cards
   - Divi 5 Group wrappers handled by JS
   Desktop + tablet remain unchanged.
   ========================================================= */
@media (max-width:600px){

    .rbas-values-section{
        overflow:hidden!important;
    }

    .rbas-values-section .rbas-heading-row{
        position:relative!important;
        z-index:2!important;
    }

    .rbas-values-section .rbas-cards-row,
    .rbas-values-section .rbas-cards-row > *,
    .rbas-values-section .rbas-values-rail{
        overflow:visible!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
    }

    /* JS adds this to the real Divi wrapper that contains all five cards. */
    .rbas-values-section .rbas-values-live-rail{
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        align-items:stretch!important;
        justify-content:flex-start!important;

        overflow-x:auto!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-x:contain!important;
        touch-action:pan-x pan-y!important;

        scroll-snap-type:x mandatory!important;
        scrollbar-width:none!important;

        gap:14px!important;

        /* Normal Divi row is 88% wide. These offsets let the slider reach
           the viewport edge while the title remains aligned to the row. */
        margin-left:-6.82vw!important;
        margin-right:-6.82vw!important;
        padding-left:6.82vw!important;
        padding-right:6.82vw!important;
        padding-bottom:12px!important;

        width:auto!important;
        max-width:none!important;
    }

    .rbas-values-section .rbas-values-live-rail::-webkit-scrollbar{
        display:none!important;
    }

    /* JS applies this class to the actual direct child under the live rail,
       not merely to the nested Divi Group module. */
    .rbas-values-section .rbas-values-live-root{
        flex:0 0 84%!important;
        width:84%!important;
        min-width:84%!important;
        max-width:84%!important;
        align-self:stretch!important;
        scroll-snap-align:start!important;
        scroll-snap-stop:normal!important;
        margin:0!important;
    }

    .rbas-values-section .rbas-values-live-card{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        height:100%!important;

        display:flex!important;
        flex-direction:column!important;
        justify-content:flex-start!important;
        align-items:stretch!important;
        align-self:stretch!important;

        margin:0!important;
        padding-top:23px!important;
    }

    /* Keep the original mobile typography instead of the accidental
       ultra-narrow 0.1.1 typography. */
    .rbas-values-section .rbas-card-heading h3{
        font-size:21px!important;
        line-height:1.28!important;
        color:var(--rbas-ink)!important;
        font-weight:600!important;
        -webkit-text-fill-color:var(--rbas-ink)!important;
        opacity:1!important;
    }

    .rbas-values-section .rbas-card-lead p{
        font-size:14.5px!important;
        line-height:1.65!important;
    }

    .rbas-values-section .rbas-card-list li{
        padding-left:18px!important;
        margin-bottom:10px!important;
        font-size:14px!important;
        line-height:1.65!important;
    }
}


/* =========================================================
   0.1.3 — MOBILE RAIL FIDELITY FIX
   Based on the supplied original About Us mobile reference.

   IMPORTANT:
   - Desktop untouched.
   - Tablet untouched.
   - Fixed headings stay on the standard Divi content rail.
   - Mobile cards START at the normal left gutter (~24px).
   - Rails are allowed to travel only toward the RIGHT edge.
   - Core Values + What Sets DSB Apart both swipe horizontally.
   ========================================================= */
@media (max-width:600px){

    /* The normal Divi row is ~88% wide, giving us the desired page gutter.
       Do NOT cancel the left gutter. */
    .rbas-values-section .rbas-values-live-rail,
    .rbas-difference-section .rbas-difference-live-rail,
    .rbas-values-section .rbas-card-rail,
    .rbas-difference-section .rbas-card-rail{
        margin-left:0!important;
        padding-left:0!important;

        /* Let the following cards peek/reach toward the device edge only. */
        margin-right:-6.82vw!important;
        padding-right:6.82vw!important;

        width:auto!important;
        max-width:none!important;
    }

    /* ---------------- Core Values ---------------- */
    .rbas-values-section .rbas-values-live-rail{
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        justify-content:flex-start!important;
        align-items:flex-start!important;

        overflow-x:auto!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-x:contain!important;
        touch-action:pan-x pan-y!important;

        gap:14px!important;
        scroll-snap-type:x mandatory!important;
        scrollbar-width:none!important;

        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        padding-bottom:12px!important;
    }

    .rbas-values-section .rbas-values-live-rail::-webkit-scrollbar{
        display:none!important;
    }

    .rbas-values-section .rbas-values-live-root{
        flex:0 0 84%!important;
        width:84%!important;
        min-width:84%!important;
        max-width:84%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        align-self:flex-start!important;
        scroll-snap-align:start!important;
        scroll-snap-stop:normal!important;
        margin:0!important;
    }

    .rbas-values-section .rbas-values-live-card{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        align-self:flex-start!important;
        margin:0!important;
    }

    /* ---------------- What Sets DSB Apart ---------------- */
    .rbas-difference-section,
    .rbas-difference-section .rbas-cards-row,
    .rbas-difference-section .rbas-cards-row > *,
    .rbas-difference-section .rbas-difference-rail{
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
    }

    .rbas-difference-section .rbas-difference-live-rail{
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        justify-content:flex-start!important;
        align-items:flex-start!important;

        overflow-x:auto!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-x:contain!important;
        touch-action:pan-x pan-y!important;

        gap:14px!important;
        scroll-snap-type:x mandatory!important;
        scrollbar-width:none!important;

        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        padding-bottom:8px!important;
    }

    .rbas-difference-section .rbas-difference-live-rail::-webkit-scrollbar{
        display:none!important;
    }

    .rbas-difference-section .rbas-difference-live-root{
        flex:0 0 84%!important;
        width:84%!important;
        min-width:84%!important;
        max-width:84%!important;

        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        align-self:flex-start!important;

        scroll-snap-align:start!important;
        scroll-snap-stop:normal!important;
        margin:0!important;
    }

    .rbas-difference-section .rbas-difference-live-card{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;

        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        align-self:flex-start!important;

        margin:0!important;
        padding-top:23px!important;
    }

    /* Match the original compact mobile Difference cards.
       No forced tall white card area. */
    .rbas-difference-section .rbas-diff-heading{
        margin-bottom:14px!important;
    }

    .rbas-difference-section .rbas-diff-heading h3{
        font-size:21px!important;
        line-height:1.28!important;
        font-weight:500!important;
        color:var(--rbas-gold)!important;
        opacity:1!important;
        -webkit-text-fill-color:var(--rbas-gold)!important;
    }

    .rbas-difference-section .rbas-diff-copy p{
        font-size:14.5px!important;
        line-height:1.72!important;
        color:#686868!important;
    }
}
