@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* === ELEMENTS === */

html { font-size: 16px; font-family: var(--font-primary); }

/* ── Typography ──────────────────────────────────────────────────────── */
:root {
    --font-primary:           'DM Sans', sans-serif;
    --text-h1:                5rem;
    --text-h1-weight:         700;
    --text-h2:                3.5rem;
    --text-h2-weight:         400;
    --text-h3:                2rem;
    --text-h3-weight:         500;
    --text-h4:                1.75rem;
    --text-h4-weight:         700;
    --text-h5:                1.375rem;
    --text-h5-weight:         400;
    --text-body:              1.125rem;
    --text-body-weight:       400;
    --text-eyebrow:           1rem;
    --text-eyebrow-weight:    500;
    --text-eyebrow-transform: uppercase;
    --text-eyebrow-spacing:   0.06em;
}

/* ── Shadows ─────────────────────────────────────────────────────────── */
:root {
    --shadow-dark:          0 0 24px rgba(0, 0, 0, 0.25);
    --shadow-light:         0 0 24px rgba(0, 0, 0, 0.13);
}

/* ── Effects ─────────────────────────────────────────────────────────── */
:root {
    --effect-navy-glass-bg:     rgba(0, 46, 71, 0.45);
    --effect-navy-glass-blur:   blur(14px);
    --effect-navy-glass-border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ── Brand colours ────────────────────────────────────────────────────── */
:root {
    --color-primary-navy:       #002E47;
    --color-primary-coral:      #FF6867;
    --color-secondary-yellow:   #FFE000;
    --color-secondary-blue:     #3483AC;
    --color-coral-deep:         #E8504C;

    --color-tint-pink:          #FFE1E1;
    --color-tint-blue:          #9BBBCE;
    --color-tint-blue-light:    #A6D1EA;

    --color-navy-gradient:      linear-gradient(135deg, #3483AC, #1E516D);
    --color-coral-gradient:     linear-gradient(135deg, #FF7878, #E96261, #C74847);
    --color-navy-radial:        radial-gradient(ellipse at 75% 50%, #0d4a6b 0%, #002E47 65%);
}




/* ── Section Tag ─────────────────────────────────────────────────────── */
.section-tag-track {
    position:       absolute;
    inset:          0;
    overflow:       hidden;
    pointer-events: none;
    z-index:        0;
}

.section-tag {
    position:        absolute;
    top:             0;
    width:           0;
    overflow:        visible;
    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;
    user-select:     none;
    will-change:     transform, opacity;
}

.section-tag--left  { left: 2rem; }
.section-tag--right { right: 2rem; }

.section-tag__text {
    white-space:  nowrap;
    font-family: "Sora", sans-serif;
    font-size:    7.333rem;
    font-weight:  700;
    letter-spacing: 0.08em;
    line-height:  1;
    color:        transparent;
    paint-order:  stroke fill;
    text-transform: uppercase;
}



.section-tag--left  .section-tag__text { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }
.section-tag--right .section-tag__text { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); }

.section-tag--navy       .section-tag__text { -webkit-text-stroke: 4px rgba(0, 46, 71, .5); }
.section-tag--light      .section-tag__text { -webkit-text-stroke: 4px rgba(255, 255, 255, 0.5); }
.section-tag--white      .section-tag__text { -webkit-text-stroke: 4px rgba(255, 255, 255, 0.5); }
.section-tag--tint-blue  .section-tag__text { -webkit-text-stroke: 4px  rgba(166, 209, 234, 1); }
.section-tag--light-blue .section-tag__text { -webkit-text-stroke: 4px  rgba(166, 209, 234, 1); }

@media (max-width: 1300px) {
    .section-tag__text { font-size: 4.5rem; }
    .section-tag--navy       .section-tag__text { -webkit-text-stroke: 2px rgba(0, 46, 71, .5); }
    .section-tag--light      .section-tag__text { -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5); }
    .section-tag--white      .section-tag__text { -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5); }
    .section-tag--tint-blue  .section-tag__text { -webkit-text-stroke: 2px  rgba(166, 209, 234, 1); }
    .section-tag--light-blue .section-tag__text { -webkit-text-stroke: 2px  rgba(166, 209, 234, 1); }
}

/* ── Icons ───────────────────────────────────────────────────────────── */

.icon {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    border-radius: 12px;
    padding:       10px;
    background:    #ffffff;
    box-shadow:    var(--shadow-light);
    flex-shrink:   0;
}

.icon img {
    display:    block;
    object-fit: contain;
}

.icon--sm img { width: 40px; height: 40px; }
.icon--md img { width: 70px; height: 70px; }
.icon--lg img { width: 100px; height: 100px; }


/* ── Headings ────────────────────────────────────────────────────────── */

.heading {
    font-family:    var(--font-primary);
    line-height:    1.1;
    color:          var(--color-primary-navy);
    margin:         0;
    text-transform: none;
    letter-spacing: normal;
}

.heading--h1 {
    font-size:        var(--text-h1);
    font-weight:      var(--text-h1-weight);
    text-transform:   capitalize;
}

.heading--h2 {
    font-size:        var(--text-h2);
    font-weight:      var(--text-h2-weight);
    text-transform:   capitalize;
}

.heading--h3 {
    font-size:   var(--text-h3);
    font-weight: var(--text-h3-weight);
}

.heading--h4 {
    font-size:   var(--text-h4);
    font-weight: var(--text-h4-weight);
}

.heading--h5 {
    font-size:   var(--text-h5);
    font-weight: var(--text-h5-weight);
}

.heading--white { color: #ffffff; }
.heading--navy  { color: var(--color-primary-navy); }
.heading--coral { color: var(--color-primary-coral); }

.heading__highlight                  { font-weight: 700; }
.heading__highlight--coral           { color: var(--color-primary-coral); }
.heading__highlight--yellow          { color: var(--color-secondary-yellow); }
.heading__highlight--white           { color: #ffffff; }
.heading__highlight--navy            { color: var(--color-primary-navy); }
.heading__highlight--blue            { color: var(--color-secondary-blue); }
.heading__highlight--underline       { text-decoration: underline; text-underline-offset: 4px; }
.heading__highlight--underline-coral { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-primary-coral); }


/* ── Eyebrow ─────────────────────────────────────────────────────────── */

.eyebrow {
    display:         block;
    font-family:     var(--font-primary);
    font-size:       var(--text-eyebrow);
    font-weight:     var(--text-eyebrow-weight);
    text-transform:  var(--text-eyebrow-transform);
    letter-spacing:  var(--text-eyebrow-spacing);
    line-height:     1;
    color:           #ffffff;
}

.eyebrow--blue {
    color: var(--color-secondary-blue);
}

.eyebrow--navy {
    color: var(--color-primary-navy);
}

.eyebrow--coral {
    color: var(--color-primary-coral);
}

.eyebrow--tint-blue,
.eyebrow--light-blue {
    color: var(--color-secondary-blue);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.4em;
    font-family:     var(--font-primary);
    font-size:       var(--text-eyebrow);
    font-weight:     600;
    line-height:     1;
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
    border:          2px solid transparent;
    border-radius:   100px;
    padding:         0.8em 1.6em;
    transition:      background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn--primary {
    background:   var(--color-primary-coral);
    color:        #ffffff;
    border-color: var(--color-primary-coral);
}

.btn--primary:hover {
    background:   var(--color-coral-deep);
    border-color: var(--color-coral-deep);
    color:        #ffffff;
}

.btn--secondary {
    background:  var(--color-primary-navy);
    color:       #ffffff;
    border-color: var(--color-primary-navy);
}

.btn--secondary:hover {
    background:  #001f30;
    border-color: #001f30;
    color:       #ffffff;
}


.btn--outline {
    background:   transparent;
    color:        var(--color-primary-navy);
    border-color: var(--color-primary-navy);
}

.btn--outline:hover {
    background:   var(--color-primary-navy);
    color:        #ffffff;
}


.btn--outline.btn--white {
    border-color: #fff;
    color:        #fff;
}
.btn--outline.btn--white:hover {
    background:   #fff;
    color:        var(--color-primary-navy);
}
.btn--outline.btn--coral {
    border-color: var(--color-primary-coral);
    color:        var(--color-primary-coral);
}
.btn--outline.btn--coral:hover {
    background:   var(--color-primary-coral);
    border-color: var(--color-primary-coral);
    color:        #fff;
}
.btn--outline.btn--navy {
    border-color: var(--color-primary-navy);
    color:        var(--color-primary-navy);
}
.btn--outline.btn--navy:hover {
    background:   var(--color-primary-navy);
    color:        #fff;
}

.btn--text {
    background:   transparent;
    color:        var(--color-primary-navy);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
}

.btn--text:hover {
    color: var(--color-primary-coral);
}

.btn--text .btn__chevron {
    display:     inline-flex;
    align-items: center;
    font-size:   0.75em;
    transition:  transform 160ms ease;
}

.btn--text:hover .btn__chevron {
    transform: translateX(3px);
}

.btn--white      { color: #ffffff; }
.btn--white:hover { color: rgba(255, 255, 255, 0.75); }

.btn--coral      { color: var(--color-primary-coral); }
.btn--coral:hover { color: var(--color-coral-deep); }

.btn--light-blue      { color: var(--color-tint-blue-light); }
.btn--light-blue:hover { color: #ffffff; }

.btn--navy      { color: var(--color-primary-navy); }
.btn--navy:hover { color: rgba(0, 46, 71, 0.75); }

.btn.btn--bg-navy  { background: var(--color-primary-navy);  border-color: var(--color-primary-navy);  color: #fff; }
.btn.btn--bg-navy:hover  { background: #001f30; border-color: #001f30; }
.btn.btn--bg-coral { background: var(--color-primary-coral); border-color: var(--color-primary-coral); color: #fff; }
.btn.btn--bg-coral:hover { background: var(--color-coral-deep); border-color: var(--color-coral-deep); }
.btn.btn--bg-white { background: #fff; border-color: #fff; color: var(--color-primary-navy); }
.btn.btn--bg-white:hover { background: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.85); }
.btn.btn--bg-light-blue { background: var(--color-tint-blue-light); border-color: var(--color-tint-blue-light); color: var(--color-primary-navy); }
.btn.btn--bg-light-blue:hover { background: #8fc4e0; border-color: #8fc4e0; }

.btn--arrow {
    width:        2.8em;
    height:       2.8em;
    padding:      0;
    border-radius: 50%;
    font-size:    var(--text-eyebrow);
}

.btn--arrow-navy {
    background:  var(--color-primary-navy);
    color:       #ffffff;
    border-color: var(--color-primary-navy);
}

.btn--arrow-coral {
    background:  var(--color-primary-coral);
    color:       #ffffff;
    border-color: var(--color-primary-coral);
}

.btn--arrow-blue {
    background:  var(--color-secondary-blue);
    color:       #ffffff;
    border-color: var(--color-secondary-blue);
}

.btn--arrow-white {
    background:  #ffffff;
    color:       var(--color-primary-navy);
    border-color: #ffffff;
}

/* ── Sizes ───────────────────────────────────────────────────────────── */
.btn--sm {
    font-size: 0.933rem;  
    padding:   0.7em 1.3em;
}

.btn--lg {
    font-size: 1.2rem;
    padding:   0.9em 2em;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .section-tag-track { display: none; }
}

@media (min-width: 769px) {
    .eyebrow { margin-bottom: 0.75rem; }
}

@media (max-width: 768px) {
    .heading.heading--h2 {
        font-size: clamp(2rem, 5vw, 2.25rem);
    }
}

/* === COMPONENTS === */

/* ── Card ────────────────────────────────────────────────────────────── */

.card-item {
    display:        flex;
    flex-direction: column;
    gap:            1.2rem;
    border-radius:  12px;
    padding:        2rem;
    position:       relative;
    overflow:       hidden;
}

.card-item--dark {
    background: var(--color-primary-navy);
}

.card-item--light {
    background: #ffffff;
}

.card-item--coral {
    background: var(--color-coral-gradient);
}

.card-item--gradient {
    background: linear-gradient(135deg, #f8eef6, #e8f0f8);
}

.card-item--horizontal {
    flex-direction: row;
    flex-wrap:      wrap;
    align-items:    flex-start;
    gap:            1rem;
}

.card-item--horizontal .card-item__header {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex:        1 1 100%;
}

.card-item--horizontal .card-item__body {
    flex: 1 1 calc(100% - 4rem);
}

.card-item--horizontal .card-item__arrow {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2.8rem;
    height:          2.8rem;
    border-radius:   50%;
    background:      var(--color-primary-coral);
    color:           #ffffff;
    flex-shrink:     0;
    align-self:      center;
    margin-left:     auto;
    text-decoration: none;
    transition:      background 160ms ease;
}

.card-item--horizontal .card-item__arrow:hover {
    background: var(--color-coral-deep);
}

.card-item__title {
    font-family:  var(--font-primary);
    font-size:    var(--text-h5);
    font-weight:  700;
    line-height:  1.2;
    margin:       0;
}

.card-item--dark  .card-item__title,
.card-item--coral .card-item__title { color: #ffffff; }

.card-item--light    .card-item__title,
.card-item--gradient .card-item__title { color: var(--color-primary-navy); }

.card-item__body {
    font-family:  var(--font-primary);
    font-size:    var(--text-body);
    font-weight:  var(--text-body-weight);
    line-height:  1.6;
    margin:       0;
    color:        var(--color-primary-navy);
}

.card-item__body--light {
    color: rgba(255, 255, 255, 0.8);
}

.card-item__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      auto;
}

.card-item__step {
    font-family:  var(--font-primary);
    font-size:    var(--text-body);
    font-weight:  400;
    color:        rgba(255, 255, 255, 0.6);
    margin-left:  auto;
}

.card-item--dark  .card-item__step { color: rgba(255, 255, 255, 0.6); }
.card-item--light .card-item__step { color: rgba(0, 46, 71, 0.4); }

.card-item__step strong {
    font-size:   1.6rem;
    font-weight: 700;
    color:       inherit;
}

.card-item--dark  .btn--text,
.card-item--coral .btn--text { color: #ffffff; }

.card-item--dark  .btn--text:hover,
.card-item--coral .btn--text:hover { color: var(--color-primary-coral); }


/* ── Section Header ──────────────────────────────────────────────────── */

.section-header {
    display:        flex;
    flex-direction: column;
    gap:            0.8rem;
}

.section-header--center {
    align-items: center;
    text-align:  center;
}

.section-header__body {
    font-family: var(--font-primary);
    font-size:   var(--text-body);
    font-weight: var(--text-body-weight);
    line-height: 1.6;
    color:       var(--color-primary-navy);
    margin:      0;
    max-width:   60ch;
}

.section-header--center .section-header__body {
    margin-inline: auto;
}




/* ── Stat Item ───────────────────────────────────────────────────────── */

.stat-item {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    padding:        1.6rem;
}

.stat-item__headline {
    display:     flex;
    align-items: baseline;
    gap:         0.4rem;
}

.stat-item__number {
    font-family:  var(--font-primary);
    font-size:    var(--text-h2);
    line-height:  1;
    color:        var(--color-primary-navy);
}

.stat-item__unit {
    font-family:  var(--font-primary);
    font-size:    var(--text-h4);
    font-weight:  400;
    color:        var(--color-secondary-blue);
}

.stat-item__label {
    font-family:  var(--font-primary);
    font-size:    var(--text-eyebrow);
    color:        var(--color-primary-navy);
    margin:       0;
}

.stat-item__description {
    font-family:  var(--font-primary);
    font-size:    var(--text-body);
    font-weight:  var(--text-body-weight);
    line-height:  1.5;
    color:        rgba(0, 46, 71, 0.65);
    margin:       0;
}


/* ── Quote Item ──────────────────────────────────────────────────────── */

.quote-item {
    display:        flex;
    flex-direction: column;
    gap:            1.6rem;
}

.quote-item__text {
    font-family:  var(--font-primary);
    font-size:    var(--text-h5);
    font-weight:  400;
    line-height:  1.5;
    color:        #ffffff;
    margin:       0;
}

.quote-item__attribution {
    display:     flex;
    align-items: center;
    gap:         1rem;
}

.quote-item__logo {
    height:     32px;
    width:      auto;
    object-fit: contain;
    filter:     brightness(0) invert(1);
    opacity:    0.8;
}

.quote-item__meta {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.quote-item__name {
    font-family:  var(--font-primary);
    font-size:    var(--text-eyebrow);
    font-weight:  600;
    color:        #ffffff;
}

.quote-item__role {
    font-family:  var(--font-primary);
    font-size:    var(--text-eyebrow);
    font-weight:  400;
    color:        rgba(255, 255, 255, 0.6);
}


/* ── Case Study Row ──────────────────────────────────────────────────── */
.case-study-row {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            1.5rem;
    padding:        3rem 1.5rem;
    border-radius:  0px;
    transition:
        background        300ms ease,
        border-color      300ms ease,
        box-shadow        300ms ease,
        backdrop-filter   300ms ease;
    cursor:         pointer;
}

.case-study-row:hover {
    background:              linear-gradient(143deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter:         blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color:            rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0    1px 0 rgba(255, 255, 255, 0.15),
        inset -1px 0  0 rgba(255, 255, 255, 0.06),
        0 4px 20px     rgba(0, 0, 0, 0.20);
}

.case-study-row__body {
    flex:           1 1 auto;
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

.case-study-row__main {
    display:     flex;
    align-items: center;
    gap:         2rem;
}

.case-study-row__logo-col {
    flex:            1 1 30px;
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
}

.case-study-row__logo {
    height:     55px;
    width:      auto;
    max-width:  100px;
    object-fit: contain;
    filter:     brightness(0) invert(1);
}

.case-study-row__company {
    flex:         1 1 110px;
    font-family:  var(--font-primary);
    font-size:    var(--text-h5);
    font-weight:  700;
    line-height:  1.3;
    color:        #ffffff;
}

.case-study-row__tagline {
    flex:         1 1 120px;
    font-family:  var(--font-primary);
    font-size:    1rem;
    font-weight:  400;
    line-height:  1.4;
    color:        rgba(255, 255, 255, 0.80);
    margin:       0;
}

.case-study-row__description {
    font-family:  var(--font-primary);
    font-size:    0.875rem;
    font-weight:  var(--text-body-weight);
    line-height:  1.6;
    color:        rgba(255, 255, 255, 0.65);
    margin:       0;
    max-height:   0;
    overflow:     hidden;
    opacity:      0;
    transition:
        max-height 350ms ease,
        opacity    250ms ease,
        margin-top 300ms ease;
}

.case-study-row:hover .case-study-row__description {
    max-height: 200px;
    opacity:    1;
    margin-top: 0.75rem;
}

.case-study-row__arrow {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           2.25rem;
    height:          2.25rem;
    border-radius:   50%;
    background:      var(--color-secondary-blue);
    color:           #000;
    text-decoration: none;
    transition:      background 160ms ease;
}

.case-study-row__arrow:hover {
    background: transparent;
    border: 1px solid var(--color-secondary-blue);
    color: #fff;
}

/* ── Case Study Row — mobile (≤500px) ───────────────────────────────── */
@media (max-width: 500px) {
    .case-study-row {
        padding: 1rem 0.75rem;
    }

    .case-study-row__main {
        flex-wrap: wrap;
        gap:       0.5rem 0.75rem;
    }

    .case-study-row__logo-col {
        flex:  0 0 auto;
        order: 1;
    }

    .case-study-row__company {
        flex:  1 1 auto;
        order: 2;
    }

    .case-study-row__arrow {
        order: 3;
    }

    .case-study-row__tagline {
        flex:       0 0 100%;
        order:      4;
        margin-top: 0.125rem;
    }
}

/* ── Proof Section ───────────────────────────────────────────────────── */

.proof-section {
    position:   relative;
    overflow:   hidden;
    padding:    5rem 0;
    background: var(--color-primary-navy);
}

.proof-section--bg-white {
    background: #fff;
}

.proof-section__watermark {
    position:       absolute;
    left:           0;
    top:            50%;
    transform:      translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-size:      clamp(5rem, 10vw, 9rem);
    font-weight:    800;
    letter-spacing: 0.12em;
    color:          rgba(255, 255, 255, 0.04);
    pointer-events: none;
    user-select:    none;
    white-space:    nowrap;
    line-height:    1;
}

.proof-section--bg-white .proof-section__watermark {
    color: rgba(0, 46, 71, 0.04);
}

.proof-section__inner {
    display:     flex;
    align-items: stretch;
    gap:         3rem;
}

.proof-section__content {
    flex:     1;
    min-width: 0;
    display:   flex;
    flex-direction: column;
    gap:       2rem;
}

.proof-section__header {
    margin-bottom: 0;
}

.proof-section__cards {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.proof-section__footer {
    display:     flex;
    align-items: center;
    gap:         1.75rem;
    flex-wrap:   wrap;
}

.proof-section__secondary-cta {
    color:           rgba(255, 255, 255, 0.85);
    font-size:       0.9375rem;
    font-weight:     500;
    text-decoration: none;
    transition:      color 160ms ease;
}

.proof-section__secondary-cta:hover {
    color: #fff;
}

.proof-section--bg-white .proof-section__secondary-cta {
    color: var(--color-primary-navy);
}

.proof-section__image-col {
    flex-shrink:   0;
    width:         clamp(220px, 25%, 300px);
    border-radius: 12px;
    overflow:      hidden;
    align-self:    stretch;
}

.proof-section__image-col img {
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
}

@media (max-width: 1023px) {
    .proof-section__watermark { display: none; }

    .proof-section__inner {
        flex-direction: column;
    }

    .proof-section__image-col {
        width:      100%;
        max-height: 320px;
        align-self: auto;
    }
}

/* ── Logo Item ───────────────────────────────────────────────────────── */

.logo-item {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem;
}

.logo-item img {
    height:     40px;
    width:      auto;
    max-width:  140px;
    object-fit: contain;
    filter:     grayscale(1);
    opacity:    0.6;
    transition: opacity 200ms ease, filter 200ms ease;
}

.logo-item:hover img {
    filter:  grayscale(0);
    opacity: 1;
}


/* === MEGA NAV === */

/* ── Variables ───────────────────────────────────────────────────────── */
:root {
    --mn-bg-bar:        linear-gradient(135deg, var(--color-primary-navy), var(--color-primary-navy));
    --mn-bg-panel:      var(--color-primary-navy);
    --mn-border:        rgba(255, 255, 255, 0.12);
    --mn-text-primary:  #ffffff;
    --mn-text-muted:    rgba(255, 255, 255, 0.65);
    --mn-accent:        var(--color-primary-coral);
    --mn-accent-hover:  var(--color-coral-deep);
    --mn-tertiary:      var(--color-secondary-blue);
    --mn-heading-color: var(--color-primary-coral);
    --mn-btn-bg:        var(--color-primary-coral);
    --mn-btn-color:     #ffffff;
    --mn-shadow:        0 8px 32px rgba(0, 0, 0, 0.15);
    --mn-height-bar:    106px;
    --mn-panel-top:     var(--mn-height-bar);
    --mn-radius:        8px;
    --mn-z:             1000;
    --mn-transition:    160ms ease;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
#site-navigation a,
#site-navigation .navbar-item {
    font-family: 'DM Sans', sans-serif;
}

.mega-nav {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: var(--mn-z);
    font-family: 'DM Sans', sans-serif;
}

.home .mega-nav {
    position: fixed;
    left: 0;
    right: 0;
}

.mega-nav.mega-nav--mobile-open {
    position: fixed;
    top:      0;
    left:     0;
    right:    0;
}

/* ── Main bar ─────────────────────────────────────────────────────────── */
.mega-nav__bar {
    height: var(--mn-height-bar);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    background: var(--mn-bg-bar);
}

@media screen and (min-width: 1024px) {
    .home .mega-nav__bar {
        background: transparent;
        transition: background-color 700ms ease 400ms;
    }

    .home .mega-nav--scrolled .mega-nav__bar,
    .home .mega-nav:hover .mega-nav__bar,
    .home .mega-nav--search-open .mega-nav__bar {
        background-color: var(--color-primary-navy);
        transition: background-color 250ms ease;
    }
}

.mega-nav__bar-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;

    @media screen and (max-width: 1024px) {
        gap: 0;
    }
}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.mega-nav__logo {
    flex-shrink: 0;
    min-width: 80px;
}

.mega-nav__logo a {
    display: flex;
    align-items: center;
}

.mega-nav__logo img {
    height: 44px;
    width: auto;
}

/* ── Nav list ─────────────────────────────────────────────────────────── */
.mega-nav__nav {
    display: flex;
    justify-content: center;
}

.mega-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* ── Nav item ─────────────────────────────────────────────────────────── */
.mega-nav__item {
    position: static;

    i{
        transition: color var(--mn-transition);
        -webkit-transition: color var(--mn-transition);
        -moz-transition: color var(--mn-transition);
        -ms-transition: color var(--mn-transition);
        -o-transition: color var(--mn-transition);
}

    a:hover,
    a:hover i{
        color: var(--mn-accent);
    }
}

/* ── Trigger ──────────────────────────────────────────────────────────── */
.mega-nav__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .25rem .5rem;
    font-size: 1.15rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    color: var(--mn-text-primary);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--mn-transition), color var(--mn-transition);
    white-space: nowrap;
    -webkit-transition: background-color var(--mn-transition), color var(--mn-transition);
    -moz-transition: background-color var(--mn-transition), color var(--mn-transition);
    -ms-transition: background-color var(--mn-transition), color var(--mn-transition);
    -o-transition: background-color var(--mn-transition), color var(--mn-transition);

    @media screen and (max-width: 1440px) {
        font-size: 1rem;
    }

    @media screen and (max-width: 1200px) {
        font-size: 0.875rem;
        padding: .25rem .35rem;
    }
}

.mega-nav__trigger:hover,
.mega-nav__item--open .mega-nav__trigger {
    color: var(--mn-accent);
}

.mega-nav__chevron {
    transition: transform var(--mn-transition);
    flex-shrink: 0;
    font-weight: 400;
}

.mega-nav__item--open .mega-nav__chevron {
    transform: rotate(180deg);
}

/* Mobile: bigger tap target on the chevron so it toggles the panel without
   hitting the text link (negative margin keeps the layout unchanged). */
@media (max-width: 1023px) {
    .mega-nav__trigger .mega-nav__chevron {
        padding: 0.85rem 1rem;
        margin:  -0.85rem -1rem -0.85rem 0;
    }
}

/* ── Panel ────────────────────────────────────────────────────────────── */
.mega-nav__panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--mn-bg-panel);
    z-index: 1;
    clip-path: inset(0 0 calc(100% + 2px) 0);
    transform: translateY(-10px);
    visibility: hidden;
    /* `pointer-events` is deliberately NOT in this transition list.
       clip-path only hides the panel VISUALLY — the element keeps its full
       layout box (absolute, full width, ~450px tall) hanging below the bar.
       This used to carry `pointer-events 0ms linear 400ms`, and because
       pointer-events animates as a discrete property, that delay kept the
       closed panel hit-testable for 400ms. Since the panel is a DOM child of
       the <li>, hovering that invisible strip fired the <li>'s mouseenter
       (mouseenter fires for descendants too) -> openPanel() -> the mega menu
       appeared when hovering empty space under the header. Flipping
       pointer-events to none immediately makes the closing panel inert at
       once, while visibility stays delayed so the clip-path animation still
       plays out. */
    transition:
        clip-path 400ms cubic-bezier(0.4, 0, 0.8, 0),
        transform 400ms cubic-bezier(0.4, 0, 0.8, 0),
        visibility 0ms linear 400ms;
    pointer-events: none;
}

.mega-nav__panel-inner {
    opacity: 0;
    transition: opacity 380ms ease;
}

.mega-nav__item--switching .mega-nav__panel {
    transition:
        clip-path 0ms,
        transform 0ms,
        visibility 0ms;
}

.mega-nav__item--switching .mega-nav__panel-inner {
    transition: opacity 0ms;
}

.mega-nav__item--open .mega-nav__panel {
    clip-path: inset(0 0 0% 0);
    transform: translateY(0);
    visibility: visible;
    transition:
        clip-path 650ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 0ms,
        visibility 0ms linear 0ms;
    pointer-events: auto;
}

.mega-nav__item--open .mega-nav__panel-inner {
    opacity: 1;
    transition: opacity 0ms;
}

.mega-nav__panel-inner {
    width: 100%;
    display: flex;
    align-items: stretch;
}

.mega-nav__panel-main {
    flex: 1;
    min-width: 0;
    padding: 3rem max(24px, calc((100vw - 1440px) / 2 + 24px));
    padding-right: 3rem;
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(52, 131, 172, 0.3) 0%, transparent 80%);
}

/* ── Group ────────────────────────────────────────────────────────────── */
.mega-nav__group {
    flex: 1;
    min-width: 200px;
}

.mega-nav__group-heading {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--mn-heading-color);
    padding-bottom: 8px;
}

/* ── Links ────────────────────────────────────────────────────────────── */
.mega-nav__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mega-nav__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: .5rem 0.25rem 0.5rem 0rem;
    border-radius: var(--mn-radius);
    text-decoration: none;
    color: var(--mn-text-primary);
    transition: background-color var(--mn-transition);
}

.mega-nav__link:hover .mega-nav__link-icon,
.mega-nav__link:hover .mega-nav__link-title {
    color: var(--mn-accent);
    transition: color var(--mn-transition);
}

.mega-nav__link-title .mega-nav__contact-bar-inner{
    display: none;
}

.mega-nav__link-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 3px;
    width: 12px;
    text-align: center;
    color: var(--mn-btn-color);
    transition: color var(--mn-transition);
}

.mega-nav__link-title {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.3;
    transition: color var(--mn-transition);
}

.mega-nav__link-desc {
    display: block;
    font-size: 12px;
    color: var(--mn-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

/* ── Panel aside ──────────────────────────────────────────────────────── */
.mega-nav__panel-aside {
    flex: 0 0 auto;
    width: calc(325px + max(0px, (100vw - 1440px) / 2));
    padding: 3rem max(24px, calc((100vw - 1440px) / 2 + 24px)) 3rem 32px;
    background: var(--mn-tertiary);
    display: flex;
    flex-direction: column;

    .mega-nav__group{
        margin-bottom: 1.5rem;
    }

    .mega-nav__links li a{
        padding-top: 0;
    }
}

.mega-nav__group-heading--light {
    color: var(--mn-text-primary);
}

/* ── Aside animations ────────────────────────────────────────────────── */
@keyframes asideSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes asideLogoIn {
    from { opacity: 0;    transform: translateY(-10px); }
    to   { opacity: 0.12; transform: translateY(0); }
}

.mega-nav__item--open .mega-nav__panel-aside .mega-nav__group {
    animation: asideSlideIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 80ms;
}

.mega-nav__item--open .mega-nav__panel-aside .mega-nav__group:nth-child(2) {
    animation-delay: 200ms;
}

.mega-nav__item--open .mega-nav__panel-aside .mega-nav__group:nth-child(3) {
    animation-delay: 320ms;
}

.mega-nav__item--open .mega-nav__panel-aside .mega-nav__panel-aside-logo {
    animation: asideLogoIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 370ms;
}

.mega-nav__panel-aside .mega-nav__group,
.mega-nav__panel-aside .mega-nav__panel-aside-logo {
    opacity: 0;
    transition: opacity 200ms ease;
}

.mega-nav__panel-aside-logo {
    margin-top: auto;
    padding-top: 1.5rem;
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
}

.mega-nav__panel-aside-logo img {
    height: auto;
    width: 150px;
    filter: brightness(0) invert(1);
}

/* ── Contact bar ──────────────────────────────────────────────────────── */
.mega-nav__contact-bar {
    background: var(--mn-tertiary);
}

.mega-nav__nav > .mega-nav__contact-bar {
    display: none;
}

.mega-nav__panel .mega-nav__contact-bar {
    opacity: 0;
    transition: opacity 380ms ease;
}

.mega-nav__item--switching .mega-nav__panel .mega-nav__contact-bar {
    transition: opacity 0ms;
}

.mega-nav__item--open .mega-nav__panel .mega-nav__contact-bar {
    opacity: 1;
    transition: opacity 0ms;
}

.mega-nav__contact-bar-inner {
    max-width: 1440px; 
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    justify-content: center;
    gap: 48px;
}

.mega-nav__contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mn-text-primary);
    text-decoration: none;
    transition: color var(--mn-transition);
}

.mega-nav__contact-item i {
    color: var(--mn-btn-color);
    font-size: 14px;
}

.mega-nav__contact-item:hover {
    color: var(--mn-accent);
}

.mega-nav__panel-aside .mega-nav__group-heading{
    color: #fff;
}

/* ── Nav end ──────────────────────────────────────────────────────────── */
.mega-nav__end {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

.mega-nav__end-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--mn-text-primary);
    text-decoration: none;
    transition: color var(--mn-transition);
}

.mega-nav__end-link:hover {
    color: var(--mn-accent);
}

.mega-nav__end-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mn-btn-color);
    background-color: var(--mn-btn-bg);
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--mn-transition);
}

.mega-nav__end-btn:hover {
    background-color: var(--mn-accent-hover);
    color: var(--mn-btn-color);
}

/* ── Search button ────────────────────────────────────────────────────── */
.mega-nav__search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mn-text-primary);
    border-radius: 6px;
    transition: background-color var(--mn-transition), color var(--mn-transition);
    font-size: 0.875rem;
}

.mega-nav__search:hover {
    color: var(--mn-accent);
}

.mega-nav--search-open .mega-nav__search {
    color: var(--mn-accent);
}

/* ── Search panel ─────────────────────────────────────────────────────── */
.mega-nav__search-panel {
    overflow: hidden;
    max-height: 0;
    background: var(--mn-bg-bar);
    transition: max-height 240ms ease, padding 240ms ease;
    padding: 0;
}

.mega-nav--search-open .mega-nav__search-panel {
    max-height: 120px;
    padding-bottom: 16px;
}

.mega-nav__search-panel-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px;
}

.mega-nav__search-panel .asl_m,
.mega-nav__search-panel div[id*='ajaxsearchlite'] {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.mega-nav__search-panel .asl_m input[type=search],
.mega-nav__search-panel .asl_m input[type=text] {
    color: #ffffff !important;
    background: transparent !important;
}

.mega-nav__search-panel .asl_m input[type=search]::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

body:has(#mega-nav:not(.mega-nav--search-open)) .wpdreams_asl_results {
    display: none !important;
}

/* ── Hamburger ────────────────────────────────────────────────────────── */
.mega-nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color var(--mn-transition);
}

.mega-nav__hamburger:hover {
    background-color: transparent;
}

.mega-nav__hamburger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: transform var(--mn-transition), opacity var(--mn-transition);
}

.mega-nav--mobile-open .mega-nav__hamburger .mega-nav__hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mega-nav--mobile-open .mega-nav__hamburger .mega-nav__hamburger-bar:nth-child(2) {
    opacity: 0;
}
.mega-nav--mobile-open .mega-nav__hamburger .mega-nav__hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile (< 1024px) ────────────────────────────────────────────────── */
@media screen and (max-width: 1023px) {

    :root {
        --mn-height-bar: 72px;
    }

    .mega-nav__logo img {
        height: 36px;
    }

    .mega-nav__topbar-contact {
        display: none;
    }

    .mega-nav__topbar-inner {
        justify-content: flex-end;
    }

    .mega-nav__hamburger {
        display: flex;
    }

    .mega-nav__nav,
    .mega-nav__end-link {
        display: none;
    }

    .mega-nav--mobile-open .mega-nav__nav {
        display: block;
        position: absolute;
        top: var(--mn-height-bar);
        left: 0;
        right: 0;
        height: calc(100vh - var(--mn-height-bar));
        background-color: var(--mn-bg-panel);
        overflow-y: auto;
        padding: 16px 24px 40px;
        border-top: 1px solid var(--mn-border);
        z-index: calc(var(--mn-z) - 1);
    }

    .mega-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    @keyframes mobileNavItemIn {
        from { opacity: 0; transform: translateY(-10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes mobileNavItemOut {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(-8px); }
    }

    @keyframes mobileNavSlideOut {
        from { clip-path: inset(0 0 0% 0); }
        to   { clip-path: inset(0 0 100% 0); }
    }

    .mega-nav--mobile-open .mega-nav__item {
        animation: mobileNavItemIn 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .mega-nav--mobile-open .mega-nav__item:nth-child(1) { animation-delay: 50ms; }
    .mega-nav--mobile-open .mega-nav__item:nth-child(2) { animation-delay: 100ms; }
    .mega-nav--mobile-open .mega-nav__item:nth-child(3) { animation-delay: 150ms; }
    .mega-nav--mobile-open .mega-nav__item:nth-child(4) { animation-delay: 200ms; }
    .mega-nav--mobile-open .mega-nav__item:nth-child(5) { animation-delay: 250ms; }
    .mega-nav--mobile-open .mega-nav__item:nth-child(6) { animation-delay: 300ms; }
    .mega-nav--mobile-open .mega-nav__contact-bar {
        animation: mobileNavItemIn 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: 350ms;
    }

    .mega-nav--mobile-closing .mega-nav__item {
        animation: mobileNavItemOut 200ms cubic-bezier(0.4, 0, 0.8, 0) both;
    }
    .mega-nav--mobile-closing .mega-nav__contact-bar {
        animation: mobileNavItemOut 200ms cubic-bezier(0.4, 0, 0.8, 0) both;
        animation-delay: 0ms;
    }
    .mega-nav--mobile-closing .mega-nav__item:nth-child(6) { animation-delay: 50ms; }
    .mega-nav--mobile-closing .mega-nav__item:nth-child(5) { animation-delay: 100ms; }
    .mega-nav--mobile-closing .mega-nav__item:nth-child(4) { animation-delay: 150ms; }
    .mega-nav--mobile-closing .mega-nav__item:nth-child(3) { animation-delay: 200ms; }
    .mega-nav--mobile-closing .mega-nav__item:nth-child(2) { animation-delay: 250ms; }
    .mega-nav--mobile-closing .mega-nav__item:nth-child(1) { animation-delay: 300ms; }

    .mega-nav--mobile-closing .mega-nav__nav {
        animation: mobileNavSlideOut 500ms cubic-bezier(0.4, 0, 0.8, 0) both;
        animation-delay: 150ms;
    }

    .mega-nav__trigger {
        width: 100%;
        justify-content: space-between;
        padding: 14px 0;
        border-radius: 0;
        border-bottom: 1px solid var(--mn-border);
        font-size: 16px;
    }

    .mega-nav__trigger:hover,
    .mega-nav__item--open .mega-nav__trigger {
        background: none;
        color: var(--mn-accent);
    }

    .mega-nav__panel {
        position:   static;
        height:     0;
        overflow:   hidden;
        visibility: visible;
        clip-path:  none;
        transform:  none;
        opacity:    1;
        transition: none;
        border:     none;
        box-shadow: none;
    }

    .mega-nav__item--open .mega-nav__panel {
        clip-path:  none;
        transform:  none;
        visibility: visible;
    }

    .mega-nav__panel-inner {
        opacity:    1;
        transition: none;
    }

    .mega-nav__panel-main .mega-nav__group {
        opacity:   0;
        transform: translateY(-6px);
    }

    .mega-nav__item--open .mega-nav__panel-main .mega-nav__group {
        animation: mobileNavItemIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .mega-nav__item--open .mega-nav__panel-main .mega-nav__group:nth-child(1) { animation-delay:  80ms; }
    .mega-nav__item--open .mega-nav__panel-main .mega-nav__group:nth-child(2) { animation-delay: 160ms; }
    .mega-nav__item--open .mega-nav__panel-main .mega-nav__group:nth-child(3) { animation-delay: 240ms; }
    .mega-nav__item--open .mega-nav__panel-main .mega-nav__group:nth-child(4) { animation-delay: 320ms; }

    .mega-nav__item--closing .mega-nav__panel-main .mega-nav__group {
        animation: mobileNavItemOut 150ms ease both;
    }
    .mega-nav__item--closing .mega-nav__panel-main .mega-nav__group:nth-child(4) { animation-delay:  0ms; }
    .mega-nav__item--closing .mega-nav__panel-main .mega-nav__group:nth-child(3) { animation-delay: 20ms; }
    .mega-nav__item--closing .mega-nav__panel-main .mega-nav__group:nth-child(2) { animation-delay: 40ms; }
    .mega-nav__item--closing .mega-nav__panel-main .mega-nav__group:nth-child(1) { animation-delay: 60ms; }

    .mega-nav__panel .mega-nav__contact-bar {
        display: none;
    }

    .mega-nav__nav > .mega-nav__contact-bar {
        display: block;
        margin-top: 16px;
        border: 2px solid var(--mn-accent);
        background: transparent;
    }

    .mega-nav__nav > .mega-nav__contact-bar .mega-nav__contact-bar-inner {
        flex-wrap: nowrap;
        justify-content: space-around;
        padding: 16px;
    }

    .mega-nav__nav > .mega-nav__contact-bar .mega-nav__contact-item {
        font-size: 13px;
    }

    .mega-nav__panel-inner {
        flex-direction: column;
    }

    .mega-nav__panel-main {
        padding: 16px 0 8px;
        gap: 24px;
        flex-direction: column;
    }

    .mega-nav__group {
        min-width: unset;
    }

    .mega-nav__panel-aside {
        display: none;
    }

}

/* ── Small mobile (< 375px) ──────────────────────────────────────────── */
@media screen and (max-width: 474px) {

    .mega-nav__end-btn {
        display: none;
    }

}

/* ── Container padding override ──────────────────────────────────────── */
@media screen and (max-width: 1090px) {
    .container,
    #header #site-navigation .navbar-brand {
        padding-left:  1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

/* @media screen and (max-width: 600px) {
    .container {
        padding-left:  0 !important;
        padding-right: 0 !important;
    }
} */


/* === HERO === */

.hero {
    position:   relative;
    overflow:   hidden;
    background: var(--color-navy-radial);
}

/* ── Video background ────────────────────────────────────────────────── */

.hero__video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    z-index:    0;
}

.hero--video::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.65) 100%
    );
    z-index: 1;
}

.hero--video .hero__inner {
    position: relative;
    z-index:  2;
}

.hero--video .hero__stats {
    position: relative;
    z-index:  2;
}

/* ── Split variant ───────────────────────────────────────────────────── */

.hero--split {
    padding-top:    6rem;
    padding-bottom: 6rem;
}

.hero--split.hero--bg-navy,
.hero--fullscreen.hero--bg-navy  { background: var(--color-primary-navy); }
.hero--split.hero--bg-white,
.hero--fullscreen.hero--bg-white { background: #ffffff; }

.hero--split.hero--bg-light,
.hero--fullscreen.hero--bg-light { background: #C5CFEA; }

.hero--split.hero--bg-white .hero__body,
.hero--split.hero--bg-white .hero__footer-text,
.hero--fullscreen.hero--bg-white .hero__body,
.hero--fullscreen.hero--bg-white .hero__footer-text,
.hero--split.hero--bg-light .hero__body,
.hero--split.hero--bg-light .hero__footer-text,
.hero--fullscreen.hero--bg-light .hero__body,
.hero--fullscreen.hero--bg-light .hero__footer-text {
    color: var(--color-primary-navy);
}

.hero--text-white .hero__body,
.hero--text-white .hero__footer-text {
    color: rgba(255, 255, 255, 0.85) !important;
}
.hero--text-navy .hero__body,
.hero--text-navy .hero__footer-text {
    color: var(--color-primary-navy) !important;
}

.hero--split .hero__inner {
    display:   block;
    position:  relative;
    z-index:   1;
}

@media screen and (min-width: 1025px) {
    .hero--split .hero__inner > .columns{
        justify-content: space-between;
    }
}

@media (max-width: 768px){
    .hero__inner.container{
        padding-left: 0 !important;
        padding-right: 0 !important; 
    }
}

/* ── Fullscreen variant ──────────────────────────────────────────────── */

.hero--fullscreen {
    min-height:          clamp(600px, 56.25vw, 100vh);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    display:             flex;
    flex-direction:      column;
    padding-top:         var(--mn-height-bar);
    padding-bottom:      80px;
}

.hero--pos-top    .hero__inner { margin-bottom: auto; }
.hero--pos-center .hero__inner { margin-top: auto; margin-bottom: auto; }
.hero--pos-bottom .hero__inner { margin-top: auto; }

.hero--pos-top    .columns { align-items: flex-start; }
.hero--pos-center .columns { align-items: center; }
.hero--pos-bottom .columns { align-items: flex-end; }

.hero .columns.is-flex-direction-row-reverse { flex-direction: row-reverse; }

.hero__col-v--top    { align-self: flex-start; }
.hero__col-v--center { align-self: center; }
.hero__col-v--bottom { align-self: flex-end; }

.hero__col--left:has(.hero__card),
.hero__col--right:has(.hero__card) {
    align-self:     stretch !important;
    display:        flex;
    flex-direction: column;
}

.hero__col--left:has(.hero__card) .hero__content,
.hero__col--right:has(.hero__card) .hero__right-content {
    flex:   1;
    height: 100%;
}

.hero--fullscreen::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.65) 100%
    );
    z-index: 0;
}

.hero--fullscreen .hero__inner {
    position:    relative;
    z-index:     1;
    width:       100%;
}

.hero.hero--overlay-none::after,
.hero.hero--overlay-blue-top::after { display: none; }


.hero__overlay {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 46, 71, 0.92) 0%,
        rgba(0, 46, 71, 0.75) 25%,
        rgba(0, 46, 71, 0.35) 45%,
        rgba(0, 46, 71, 0) 65%
    );
    z-index: 1;
}

.hero__bg-half {
    position:            absolute;
    top:                 0;
    bottom:              0;
    width:               50%;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    z-index:             0;
}
.hero--half-bg-right .hero__bg-half { right: 0; left: auto; }
.hero--half-bg-left  .hero__bg-half { left:  0; right: auto; }

.hero--half-bg .hero__overlay { width: 50%; }
.hero--half-bg-right .hero__overlay { right: 0; left: auto; }
.hero--half-bg-left  .hero__overlay { left:  0; right: auto; }

.hero--overlay-blue-top .hero__inner{
    margin-top: unset;
}

.hero.hero--overlay-blue-top .hero__inner,
.hero.hero--half-bg .hero__inner { position: relative; z-index: 2; }

@media screen and (max-width: 900px) {
    .hero__bg-half { position: relative; width: 100%; height: 260px; }
    .hero--half-bg .hero__overlay { width: 100%; }
}

@media screen and (max-width: 768px){
    .hero__overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 46, 71, 0.92) 0%,
            rgba(0, 46, 71, 0.75) 25%,
            rgba(0, 46, 71, 0.35) 100%,
            rgba(0, 46, 71, 0) 100%
        );
    }
    
    .hero__bg-half { height: 100%; }
}

/* ── Content ─────────────────────────────────────────────────────────── */

.hero__inner {
    width:    100%;
    position: relative;
    z-index:  1;
}

.hero .heading--h1 {
    font-size:   clamp(2.5rem, 5vw, 5rem);
    line-height: 1.05;
}

.hero .heading--h2 {
    font-size:   clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.1;
}

.hero .heading--h3 {
    font-size:   clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
}

.hero__header-row {
    width:         100%;
    margin-bottom: 2.5rem;
}

.hero__header-row--has-cta {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             1.5rem;
}

.hero__header-row--has-cta .hero__header-content {
    flex: 1 1 0;
    min-width: 0;
}

.eyebrow,
.hero__header-content .eyebrow
.stacked-columns-block .eyebrow {
    margin-bottom: 0.75rem;
}


.hero__header-cta {
    flex-shrink: 0;
}

.hero__content{
    gap:            1.5rem;
}

.hero__right-content {
    gap:            1rem;
}

.hero__right-content:has(.hero__icon-cards + .hero__icon-cards) {
    gap:            3rem;
}

.hero__content,
.hero__right-content {
    display:        flex;
    flex-direction: column;
}

.hero__col--left.has-text-left      .hero__content,
.hero__col--right.has-text-left     .hero__right-content { align-items: flex-start; }

.hero__col--left.has-text-centered  .hero__content,
.hero__col--right.has-text-centered .hero__right-content { align-items: center; }

.hero__col--left.has-text-right     .hero__content,
.hero__col--right.has-text-right    .hero__right-content { align-items: flex-end; }

.hero__btn-group {
    display:   flex;
    flex-wrap: wrap;
    gap:       1rem;
}

.hero__body {
    font-family:  var(--font-primary);
    font-size:    var(--text-body);
    font-weight:  var(--text-body-weight);
    line-height:  1.6;
    color:        rgba(255, 255, 255, 0.85);
    margin:       0;
    width:        100%;
}

.hero__body p {
    color:   inherit;
    margin:  0;
}

.hero__actions {
    display:     flex;
    gap:         1rem;
    flex-wrap:   wrap;
    align-items: center;
    flex-shrink: 0;
}

.hero__social-proof {
    font-family:  var(--font-primary);
    font-size:    0.875rem;
    font-weight:  400;
    font-style:   italic;
    line-height:  1.5;
    color:        rgba(255, 255, 255, 0.55);
    margin:       0;
    max-width:    44ch;
}

.btn--outline-white {
    border-color: rgba(255, 255, 255, 0.5);
    color:        #ffffff;
}

.btn--outline-white:hover {
    background:  rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color:        #ffffff;
}

@media (min-width: 769px){
    .hero__btn-group,
    .hero__btn-wrap{
        margin-top: 3rem;
    }
}

/* ── Media (split) ───────────────────────────────────────────────────── */
.hero__image {
    display:       block;
    width:         100%;
    height:        auto;
    object-fit:    cover;
}

.hero__video-wrap {
    position: relative;
    cursor:   pointer;
}

.hero__play-btn {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    padding:         0;
}

.hero__play-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           72px;
    height:          72px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.15);
    border:          2px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    transition:      background 0.2s ease, border-color 0.2s ease;
}

.hero__play-icon::after {
    content:       '';
    display:       block;
    width:         0;
    height:        0;
    border-top:    12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left:   20px solid #ffffff;
    margin-left:   4px;
}

.hero__play-btn:hover .hero__play-icon {
    background:   rgba(255, 255, 255, 0.25);
    border-color: #ffffff;
}

/* ── Stats row ───────────────────────────────────────────────────────── */

.hero__stats {
    display:       grid;
    grid-template-columns: repeat(3, 1fr);
    gap:           2px;
    margin-top:    2rem;
}

.hero__stats .stat-item__number,
.hero__stats .stat-item__label {
    color: #ffffff;
    font-weight: 400;
}

.hero__stats .stat-item__unit {
    color: var(--color-secondary-blue);
}

.hero__stats .stat-item__description {
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px){
    .hero__stats{
        grid-template-columns: 1fr;
    }

    .stat-item{
        padding: 0.75rem;
    }
}


/* ── Footer row ──────────────────────────────────────────────────────── */
.hero__footer-row:has(.hero__footer-cta){
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3rem;
}


@media screen and (min-width: 769px) {
    .hero--split .hero__footer-row--spaced {
        margin-top:  3rem;
        padding-top: 3rem;
    }

    .hero--split:has(.hero__stats) .hero__footer-row{
        margin-top:  0rem;
        padding-top: 0rem;
    }
}

.hero__footer-row:has(.hero__steps),
.hero__footer-row:has(.hero__lsg){
    border-top: none;
}

.hero__footer-text {
    font-size:   0.875rem;
    color:       rgba(255, 255, 255, 0.55);
    margin:      1.5rem 0 1rem 0 ;
}

.hero .hero__footer-text.hero__footer-text--white { color: #ffffff; }
.hero .hero__footer-text.hero__footer-text--navy  { color: var(--color-primary-navy); }

.hero__footer-cta {
    margin-top: 1.25rem;
}
.hero .hero__footer-text.hero__footer-text--coral { color: var(--color-primary-coral); }

/* ── Footer step cards ───────────────────────────────────────────────── */

.hero__steps {
    margin-top:   2rem;
    display:      flex !important;
    flex-wrap:    wrap;
    gap:          1rem;
    align-items:  flex-end !important;
    min-height:   580px;
    margin-left:  0 !important;
    margin-right: 0 !important;
}

.hero__step.column {
    padding: 0;
    padding-top: 3rem;
}

.hero__step {
    position:                  relative;
    overflow:                  hidden;
    cursor:                    pointer;
    background:                rgba(0, 46, 71, 0.2);
    backdrop-filter:           blur(13px) saturate(160%);
    -webkit-backdrop-filter:   blur(13px) saturate(160%);
    border:                    1px solid rgba(255, 255, 255, 0.12);
    border-radius:             0;
    padding:                   1.75rem 1.5rem;
    display:                   flex;
    flex-direction:            column;
    gap:                       0.75rem;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition:                background 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__step::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    radial-gradient(ellipse 80% 25% at 50% 0%, rgba(52, 131, 172, 0.7) 0%, transparent 100%);
    pointer-events: none;
    z-index:       0;
}

.hero__step--active::before {
    display: none;
}

.hero__step > * {
    position: relative;
    z-index:  1;
}

.hero__steps .hero__step:nth-child(1) { min-height: 520px; }
.hero__steps .hero__step:nth-child(2) { min-height: 580px; }
.hero__steps .hero__step:nth-child(3) { min-height: 460px; }
.hero__steps .hero__step:nth-child(4) { min-height: 500px; }
.hero__steps .hero__step--active      { min-height: 520px; }

.hero__step--active {
    border-color:            transparent;
    box-shadow:              0 16px 40px rgba(200, 60, 40, 0.35);
    backdrop-filter:         none;
    -webkit-backdrop-filter: none;
}

.hero__step::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:
        linear-gradient(rgba(232, 96, 74, 0.7), rgba(232, 96, 74, 0.7)),
        url('https://rebranding.infigo.net/wp-content/uploads/2026/07/Frame-61.png') center / cover no-repeat;
    opacity:        0;
    transition:     opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index:        0;
    pointer-events: none;
}

.hero__step--active::after { opacity: 1; }

/* ── Step card auto-cycle (mirrors hover grow/shrink via JS class) ───── */
@media (hover: hover) and (pointer: fine) {

    .hero__steps--cycling .hero__step                  { min-height: 340px !important; }
    .hero__steps--cycling .hero__step--active          { min-height: 520px !important; }

    .hero__steps--cycling .hero__step--active::after   { opacity: 1; }
    .hero__steps--cycling .hero__step--active::before  { display: none; }

    .hero__steps--cycling .hero__step:not(.hero__step--active) {
        border-color:            rgba(255, 255, 255, 0.12);
        box-shadow:              0 8px 40px rgba(0, 0, 0, 0.35),
                                 inset 0 1px 0 rgba(255, 255, 255, 0.18);
        backdrop-filter:         blur(13px) saturate(160%);
        -webkit-backdrop-filter: blur(13px) saturate(160%);
    }
    .hero__steps--cycling .hero__step:not(.hero__step--active)::after  { opacity: 0; }
    .hero__steps--cycling .hero__step:not(.hero__step--active)::before { display: block; }
}

/* ── Step card hover ─────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {

    .hero__step:not(.hero__step--active):hover::after  { opacity: 1; }
    .hero__step:not(.hero__step--active):hover::before { display: none; }

    .hero__step:not(.hero__step--active):hover {
        border-color:            transparent;
        box-shadow:              0 16px 40px rgba(200, 60, 40, 0.35);
        backdrop-filter:         none;
        -webkit-backdrop-filter: none;
    }

    .hero__steps:has(.hero__step:not(.hero__step--active):hover) .hero__step--active {
        border-color:            rgba(255, 255, 255, 0.12);
        box-shadow:
            0 8px 40px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
        backdrop-filter:         blur(13px) saturate(160%);
        -webkit-backdrop-filter: blur(13px) saturate(160%);
    }
    .hero__steps:has(.hero__step:not(.hero__step--active):hover) .hero__step--active::after  { opacity: 0; }
    .hero__steps:has(.hero__step:not(.hero__step--active):hover) .hero__step--active::before { display: block; }

    .hero__steps:has(.hero__step:hover) .hero__step { min-height: 340px; }
    .hero__steps .hero__step:hover                   { min-height: 520px !important; }

    .hero__steps:has(.hero__step:not(.hero__step--active):hover) .hero__step--active .hero__step-btn {
        opacity:        0;
        pointer-events: none;
    }

    .hero__step:hover .hero__step-btn {
        opacity:        1;
        pointer-events: auto;
    }

}

.hero__step-icon {
    width:  48px;
    height: 48px;
    flex-shrink: 0;
}

.hero__step-icon img {
    width:  100%;
    height: 100%;
    object-fit: contain;
}

.hero__step-heading {
    font-family: var(--font-primary);
    font-size:   1.05rem;
    font-weight: 600;
    color:       #ffffff;
    margin:      0;
    line-height: 1.3;
}
.hero__step-body {
    font-family: var(--font-primary);
    font-size:   1rem;
    color:       rgba(255, 255, 255, 0.7);
    line-height: 1.55;
    flex:        1;
}
.hero__step-body p { margin: 0; }
.hero__step-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      auto;
    padding-top:     1rem;
    padding-bottom:  1.5rem;
    border-top:      1px solid rgba(255, 255, 255, 0.15);
}
.hero__step-label {
    display:     flex;
    align-items: baseline;
    gap:         0.3rem;
    font-family:    var(--font-primary);
    font-size:      0.85rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 1);
}
.hero__step--active .hero__step-footer {
    border-top-color: rgba(255, 255, 255, 0.25);
}
.hero__step--active .hero__step-label {
    color: rgba(255, 255, 255, 0.8);
}
.hero__step-number {
    font-size:      2.2rem;
    font-weight:    400;
    line-height:    1;
    vertical-align: middle;
}
.hero__step--active .hero__step-body {
    color: rgba(255, 255, 255, 0.85);
}
.hero__step-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    border:          1.5px solid #ffffff;
    color:           var(--color-primary-coral);
    background:      #ffffff;
    text-decoration: none;
    transition:      background 0.2s, border-color 0.2s, transform 0.2s, opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink:     0;
    opacity:         0;
    pointer-events:  none;
}
.hero__step-btn:hover {
    transform: scale(1.08);
}
.hero__step--active .hero__step-btn {
    opacity:        1;
    pointer-events: auto;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media screen and (max-width: 600px) {
    .hero--fullscreen {
        min-height: clamp(90vh, 56.25vw, 100vh);
    }

    .hero--fullscreen.hero--overlay-blue-top,
    .hero--fullscreen.hero--half-bg{
        min-height: clamp(50vh, 56.25vw, 100vh);
    }
}

@media screen and (min-width: 768px) {
    .hero__header-content .hero__body,
    .stacked-columns-block__header .stacked-columns-block__body {
        margin-top: 3rem;
    }
}

@media (max-width: 899px){
    .hero--split:has(.hero__icon-cards--cols-2) .hero__col--left,
    .hero--split:has(.hero__icon-cards--cols-2) .hero__col--right{
        width: 100% !important;
        max-width: 100%;
    }
}


@media screen and (max-width: 768px) {
    .hero--fullscreen {
        padding-left:  1.25rem;
        padding-right: 1.25rem;
    }

    .hero--split {
        padding: 3rem 1.25rem;
    }

    .hero--split .hero__col--left,
    .hero--split .hero__col--right {
        flex:      none;
        width:     100% !important;
        max-width: 100%;
    }

    .hero:has(.hero__card) .column:has(.hero__card) {
        max-width: 100%;
    }

    .hero__header-row--has-cta {
        flex-direction: column;
        align-items:    flex-start;
    }

    .hero__header-row--has-cta .hero__header-cta {
        align-self: center;
    }
    .hero__header-row--has-cta .hero__header-cta .btn,
    .stacked-columns-block__header .btn,
    .faq-section__left .btn,
    .content-accordion-section__left .btn {
        display:       flex;
        width:         fit-content;
        margin-left:   auto;
        margin-right:  auto;
        align-self:    center;
    }

    .hero .heading--h4 {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
}

@media (max-width: 1023px) {
    .hero__footer-row:has(.hero__steps) {
        margin-top:  0;
        padding-top: 0;
    }
}

/* ── Responsive: 600–1023px ──────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 1023px) {
    .hero__steps {
        display:       grid !important;
        grid-template-columns: repeat(2, 1fr);
        align-items:   stretch !important;
        min-height:    unset;
    }

    .hero__step.column {
        padding-top: 3rem;
    }

    .hero__steps .hero__step:nth-child(1),
    .hero__steps .hero__step:nth-child(2),
    .hero__steps .hero__step:nth-child(3),
    .hero__steps .hero__step:nth-child(4),
    .hero__steps .hero__step--active {
        min-height: 360px;
    }
}

/* ── Responsive: ≤599px ─────────────────────────────────────────────── */
@media (max-width: 599px) {
    .hero__steps {
        display:       grid !important;
        grid-template-columns: 1fr;
        align-items:   stretch !important;
        min-height:    unset;
    }

    .hero__step.column {
        padding-top: 3rem;
    }

    .hero__steps .hero__step:nth-child(1),
    .hero__steps .hero__step:nth-child(2),
    .hero__steps .hero__step:nth-child(3),
    .hero__steps .hero__step:nth-child(4),
    .hero__steps .hero__step--active {
        min-height: 360px;
    }
}



/* === STATS LOGOS BLOCK === */

/* ── Layout ───────────────────────────────────────────────────────────── */

.slb {
    padding: 5rem 0;
}

.slb__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.slb__header {
    margin-bottom: 3rem;
}

.slb__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* ── Logo grid (left column) ──────────────────────────────────────────── */

.slb__logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: rgba(0, 46, 71, 0.1);
    border: 1px solid rgba(0, 46, 71, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.slb__logo-item {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         2rem 1.5rem;
    background:      #fff;
    border:          none;
    cursor:          pointer;
    position:        relative;
    transition:      background 0.3s ease;
    min-height:      100px;
}

.slb__logo-item::after {
    content:    '';
    position:   absolute;
    inset:      0;
    border:     2px solid var(--color-primary-coral);
    opacity:    0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.slb__logo-item:hover::after,
.slb__logo-item--active::after {
    opacity: 1;
}

.slb__logo-item:hover,
.slb__logo-item--active {
    background: rgba(255, 104, 103, 0.05);
    z-index: 1;
}

.slb__logo-item img {
    width:      100%;
    max-width:  120px;
    height:     auto;
    max-height: 48px;
    object-fit: contain;
    filter:     grayscale(100%);
    opacity:    0.5;
    transition: filter 0.3s ease, opacity 0.3s ease;
    display:    block;
    margin:     0 auto;
}

.slb__logo-item:hover img,
.slb__logo-item--active img {
    filter:  none;
    opacity: 1;
}

/* ── Stat panels (right column) ───────────────────────────────────────── */

.slb__stats-col {
    position:   relative;
    min-height: 280px;
}

.slb__stat-panel {
    display:        grid;
    grid-template-columns: repeat(2, 1fr);
    gap:            2.5rem 3rem;
    position:       absolute;
    inset:          0;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    align-content:  center;
}

.slb__stat-panel--active {
    opacity:        1;
    pointer-events: auto;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media screen and (max-width: 1024px) {
    .slb__body {
        gap: 3rem;
    }
}

@media screen and (max-width: 768px) {
    .slb__body {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .slb__stats-col {
        min-height: unset;
        position:   static;
    }

    .slb__stat-panel {
        position:   static;
        opacity:    0;
        max-height: 0;
        overflow:   hidden;
        transition: opacity 0.4s ease, max-height 0.4s ease;
    }

    .slb__stat-panel--active {
        opacity:    1;
        max-height: 800px;
    }
}

@media screen and (max-width: 540px) {
    .slb__logos {
        grid-template-columns: repeat(2, 1fr);
    }

    .slb__stat-panel {
        gap: 2rem 1.5rem;
    }
}
.cb--white { background-color: #ffffff; }
.cb--navy  { background-color: var(--color-primary-navy); }
.cb--grey  { background-color: #f5f5f5; }
.cb--gradient-light  { background: linear-gradient(120deg, #f7e9ec 0%, #e8edf4 45%, #dde6f1 100%); }
.cb--light_arc       { background: linear-gradient(120deg, #f7e9ec 0%, #e8edf4 55%, #dde6f1 100%); }
.cb--light_arc_left  { background: linear-gradient(to bottom left, #FFE1E1 0%, #C5CFEA 51%, #9BBBCE 100%); }

.cb--arc-left .cb__bg-shape {
    left:      0;
    right:     auto;
    transform: scaleX(-1);
}

.cb__columns--vbottom { align-items: flex-end !important; }

.cb { position: relative; }
.cb--has-shape { overflow: hidden; }
.cb__bg-shape {
    position:       absolute;
    top:            0;
    right:          0;
    left:           auto;
    width:          40%;
    height:         100%;
    line-height:    0;
    z-index:        0;
    pointer-events: none;
}
.cb__bg-shape svg {
    display: block;
    width:   100%;
    height:  100%;
}
.cb > .container { position: relative; z-index: 1; }

.cb--no-bottom-padding { padding-bottom: 0 !important; }

.cb__title-row {
    margin-bottom: 3rem;
}

.cb__slide { height: auto; }
.cb__columns--slider { position: relative; margin-top: 9rem; }
.cb__columns--slider .cb__item { height: 100%; }
/* .cb-slider .owl-item > div { min-height: 0 !important; } */
.cb-slider .owl-stage { display: flex; align-items: flex-end; }        
.cb-slider .owl-item { display: flex; }
.cb .cb__columns--slider:has(.cb__item--quote) .owl-nav{display: none !important;}

.cb .cb-slider .owl-nav {
    position: absolute !important;
    top:      -3.75rem !important;
    right:    0 !important;
    left:     auto !important;
    bottom:   auto !important;
    display:  flex !important;
    gap:      0.85rem;
    margin:   0 !important;
    z-index:  4;
}
.cb .cb-slider .owl-nav button.owl-prev,
.cb .cb-slider .owl-nav button.owl-next {
    width:           40px !important;
    height:          40px !important;
    border-radius:   50% !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    font-size:       0;           
    background:      rgba(255, 255, 255, 0.12) !important;
    color:           #ffffff !important;
    margin:          0 !important;
    position:        relative !important;  
    left:            auto !important;        
    right:           auto !important;        
    transition:      background 0.2s ease;
}

.cb-slider .owl-nav button.owl-prev :is(svg, span),
.cb-slider .owl-nav button.owl-next :is(svg, span) { display: none; }

.cb-slider .owl-nav button.owl-prev::before,
.cb-slider .owl-nav button.owl-next::before {
    content:       '';
    display:       block;
    width:         8px;
    height:        8px;
    border-right:  2px solid currentColor;
    border-bottom: 2px solid currentColor;
}
.cb-slider .owl-nav button.owl-prev::before { transform: rotate(135deg); margin-left: 3px; }
.cb-slider .owl-nav button.owl-next::before { transform: rotate(-45deg); margin-right: 3px; }
/* coral only on hover / active (both grey by default) */
.cb .cb-slider .owl-nav button.owl-prev:hover,
.cb .cb-slider .owl-nav button.owl-next:hover,
.cb .cb-slider .owl-nav button.owl-prev:active,
.cb .cb-slider .owl-nav button.owl-next:active {
    background: var(--color-primary-coral) !important;
}

.cb .cb-slider .owl-dots {
    display:         flex !important;
    justify-content: center;
    gap:             0.5rem;
    margin-top:      1.75rem;
}
.cb .cb-slider .owl-dots .owl-dot span {
    display:       block;
    width:         12px !important;
    height:        12px !important;
    margin:        0 !important;
    border-radius: 50% !important;
    border:        1px solid rgba(255, 255, 255, 0.5) !important;
    background:    rgba(255, 255, 255, 0.5) !important;
    transition:    background 0.2s ease;
}
.cb .cb-slider .owl-dots .owl-dot.active span { background: var(--color-primary-navy) !important; }

/* ── Image-overlay card ── */
.cb__item--overlay {
    padding: 0;
    gap:     0;
}
.cb__overlay-media {
    position:   relative;
    height:     100%;
    min-height: 500px;
    overflow:   hidden;
}
.cb__overlay-media img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.cb__overlay-content {
    position:   absolute;
    inset:      auto 0 0 0;
    z-index:    2;
    padding:    1.75rem 1.5rem 1.5rem;
    height: 35%;
    background: linear-gradient(180deg, rgba(0, 46, 71, 0) 5%, rgba(0, 46, 71, 0.75) 55%, rgba(0, 46, 71, 1) 100%)
}
/* overlay text/background at the top instead of the bottom */
.cb__item--overlay-top .cb__overlay-content {
    inset:      0 0 auto 0;
    background:  linear-gradient(180deg, rgba(0, 46, 71, 1) 0%, rgba(0, 46, 71, 0.75) 45%, rgba(0, 46, 71, 0) 95%);
}
.cb__overlay-title {
    margin:      0 0 0.5rem;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size:   1.15rem;
    line-height: 1.3;
    color:       #ffffff;
}
.cb__overlay-text {
    font-family: var(--font-primary);
    font-size:   0.9rem;
    line-height: 1.55;
    color:       rgba(255, 255, 255, 0.85);
}
.cb__overlay-text p { margin: 0; }

/* ── Outcome card ── */
.cb__item--outcome {
    padding:                 3rem 1.5rem;
    gap:                     1rem;
    height:                  100%;
    min-height:              520px;
    background:
        radial-gradient(130% 90% at 50% 0%, rgba(52, 131, 172, 0.45) 0%, rgba(52, 131, 172, 0) 55%),
        rgba(255, 255, 255, 0.01);
    border:                  1px solid rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter:         blur(20px);
}
.cb__item--outcome .cb__icon {
    width:  40px;
    height: 40px;
}
.cb__item--outcome .cb__icon img {
    width:      100%;
    height:     100%;
    object-fit: contain;
}
.cb__item--outcome .cb__text { color: rgba(255, 255, 255, 0.72); }
.cb__outcome {
    margin-top:  auto;
    padding:     1rem 1.25rem;
    background:  rgba(0, 0, 0, 0.2);
    font-family: var(--font-primary);
    font-size:   1rem;
    line-height: 1.55;
    color:       rgba(255, 255, 255, 0.75);
}
.cb__outcome-label {
    font-weight: 700;
    color:       #ffffff;
}

.cb__item--result {
    padding:                 2rem;
    gap:                     1rem;
    height:                  100%;
    min-height:              470px;
    background:              rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter:         blur(12px);
}
.cb__result-logo {
    height: 40px;
}
.cb__result-logo img {
    height:     100%;
    width:      auto;
    max-width:  70%;
    object-fit: contain;
}
.cb__result-title {
    margin:      0;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size:   1.1rem;
    color:       var(--color-primary-navy);
}
.cb__result-body {
    font-family: var(--font-primary);
    font-size:   0.9rem;
    line-height: 1.6;
    color:       var(--color-primary-navy);
    opacity:     0.8;
}
.cb__result-body p { margin: 0; }
.cb__result-box {
    margin-top:  auto;
    padding:     1.25rem 2rem;
    background:  var(--color-primary-coral);
    font-family: var(--font-primary);
    font-size:   0.85rem;
    line-height: 1.5;
    color:       #ffffff;
}
.cb__result-label { font-weight: 700; }

@media (max-width: 1024px) {
    .cb__item--result {
        height: auto;
        min-height: unset;

        .cb__result-box{
            margin-top: unset;
        }
    }
}

/* ── Quote card (quote mark · body · name · role · company) ── */
.cb__item--quote {
    gap:                     1.25rem;
    height:                  100%;
    padding:                 2.5rem;
    background:              linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.35) 100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter:         blur(12px);
}
.cb__quote-mark {
    color:       var(--color-primary-coral);
    line-height: 0;
}
.cb__quote-body {
    font-family: var(--font-primary);
    font-size:   .95rem;
    font-weight: 500;
    line-height: 1.65;
    color:       var(--color-primary-navy);
    opacity:     0.85;
}
.cb__quote-body p { margin: 0 0 0.85rem; }
.cb__quote-body p:last-child { margin-bottom: 0; }
.cb__quote-name {
    margin-bottom:         .5rem;
    padding-bottom: .5rem;
    border-bottom:  2px solid rgba(255, 104, 103, 0.5);
    font-family:    var(--font-primary);
    font-weight:    700;
    font-size:      var(--text-h5);
    color:          var(--color-primary-navy);
}
.cb__quote-meta {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
    margin-top:     auto;
}
.cb__quote-role {
    font-family:    var(--font-primary);
    font-size:      0.875rem;
    font-weight:    500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--color-primary-coral);
}
.cb__quote-company {
    font-family: var(--font-primary);
    font-size:   0.8rem;
    color:       var(--color-primary-navy);
    opacity:     0.7;
}

.cb__item--person { padding: 0; gap: 0; height: 100%; }
.cb__person {
    position: relative;
    display:  block;
    width:    100%;
    height:   100%;
}
.cb__person-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb__person-tag {
    position:       absolute;
    left:           20%;
    bottom:         5%;
    display:        flex;
    flex-direction: column;
    gap:            0.1rem;
    padding:        0.85rem 1.5rem;
    background:     var(--color-coral-deep);
    color:          #ffffff;
    font-family:    var(--font-primary);
}
.cb__person-name { font-weight: 700; font-size: 1.05rem; }
.cb__person-role { font-size: 0.8rem; opacity: 0.9; }

.cb__item--stacked { padding: 0; gap: 0; height: 100%; }
.cb__stacked {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    width:          100%;
    height:         100%;
}
.cb__stacked-box {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            1;
    padding:         1rem;
    background:      rgba(255, 255, 255, 0.5);
}
.cb__stacked-img {
    display:    block;
    max-width:  100%;
    height:     auto;
}

@media (max-width: 1439px) {
    .cb .columns.cb__columns--grid:has(.cb__item--stacked),
    .cb .columns.cb__columns--grid:has(.cb__item--result){
        flex-direction: row;

        .column:not(.cb__item--image){
            width: 50%;
        }

        .column:has(.cb__item--result),
        .column:has(.cb__item--image){
            width: 100%;
        } 
    }
}

@media (max-width: 768px){
    .column:has(.cb__item--stacked){
        display: none;
    }

    .column:has(.cb__item--person){
        align-self: flex-start;
    }

    .cb .columns.cb__columns--grid:has(.cb__item--stacked),
    .cb .columns.cb__columns--grid:has(.cb__item--result){

        .column:not(.cb__item--image){
            width: 100%;
        }
    }
}

.cb__item--image {
    padding:    0;
    gap:        0;
    height:     100%;
    min-height: 480px;
}

.cb__columns--grid .column:has(.cb__item--image) {
    min-height: 480px;
}
.cb__columns--grid .column:has(.cb__item--image) .cb__item--image {
    width:    100%;
    height:   100%;
}

.cb__item--image .cb__cover-img {
    display:    block;
    width:      100%;
    height:     100%;
    min-height: 600px;
    object-fit: cover;
}

.cb__item--image-overlap {
    padding:    0;
    gap:        0;
    height:     100%;
}

.cb__columns--grid .column:has(.cb__item--image-overlap) {
    position: relative;
}
.cb__columns--grid .column:has(.cb__item--image-overlap) .cb__item--image-overlap {
    position: absolute;
    width:    95%;
    height:   100%;
    min-height: 600px;
}

.cb__item--image-overlap .cb__overlap-img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

@media (min-width: 769px){
    .cb__columns--grid:has(.cb__item--image-overlap) + .cb__stat--text-only{
        width: 60%;
    }
}

@media (max-width: 768px){
    .cb__columns--grid:has(.cb__item--image-overlap) .column {
        width: 100%;
    }

    .cb__columns--grid .column:has(.cb__item--image-overlap){
        display: none;
    }
}

.cb__stat {
    display:     flex;
    align-items: center;
    gap:         2rem;
    margin-top:  3rem;
}
.cb__stat-value {
    flex:        0 0 auto;
    font-family: var(--font-primary);
    font-size:   clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 400;
    line-height: 1;
    color:       #ffffff;
}
.cb__stat-text {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    padding-left:   2rem;
    border-left:    1px solid rgba(255, 255, 255, 0.25);
    font-family:    var(--font-primary);
    font-size:      0.9rem;
    line-height:    1.55;
    color:          var(--color-primary-navy);
}
.cb__stat-label { font-weight: 400; font-size: 1rem; }
.cb__stat--text-only .cb__stat-text { padding-left: 0; border-left: none; }
.cb--navy .cb__stat-value { color: #ffffff; }
.cb--navy .cb__stat-text { color: rgba(255, 255, 255, 0.8); }
.cb--navy .cb__stat-label { color: #ffffff; }

@media (max-width: 600px) {
    .cb__stat { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .cb__stat-text { padding-left: 0; border-left: none; }
}

.cb__item--card-light {
    padding:                 2rem;
    background:              linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.1) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter:         blur(16px) saturate(1.4);
    border:                  1px solid rgba(255, 255, 255, 0.55);
    box-shadow:              inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 24px rgba(0, 46, 71, 0.06);
    height:                  100%;
}

.cb__columns .column .cb__item--icon.cb__item--card-light,
.cb__columns .column .cb__item--icon.cb__item--card-dark,
.cb__columns .column .cb__item--icon.cb__item--card-glass {
    border-right:  none;
    padding-right: 2rem;
}

.cb__item--icon {
    gap: 0.85rem;
}
.cb__item--icon .cb__iconcard-head {
    display:       flex;
    align-items:   center;
    gap:           0.85rem;
}

.cb--icon-top .cb__item--icon .cb__iconcard-head {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.85rem;
}
.cb__item--icon .cb__iconcard-icon {
    flex:       0 0 auto;
    width:      36px;
    height:     36px;
    display:    inline-flex;
    align-items: center;
    justify-content: center;
}
.cb__item--icon .cb__iconcard-icon img {
    width:      100%;
    height:     100%;
    object-fit: contain;
}
.cb__item--icon .cb__iconcard-title {
    margin:      0;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size:   var(--text-h5);
    line-height: 1.25;
    color:       var(--color-primary-navy);
}
.cb__item--icon .cb__iconcard-body {
    font-family: var(--font-primary);
    font-size:   0.9rem;
    line-height: 1.6;
    color:       var(--color-primary-navy);
    opacity:     0.8;
}
.cb__item--icon .cb__iconcard-body p { margin: 0; }
.cb--navy .cb__item--icon .cb__iconcard-title,
.cb--navy .cb__item--icon .cb__iconcard-body,
.cb__item--icon.cb__item--card-dark .cb__iconcard-title,
.cb__item--icon.cb__item--card-dark .cb__iconcard-body,
.cb__item--icon.cb__item--card-glass .cb__iconcard-title,
.cb__item--icon.cb__item--card-glass .cb__iconcard-body { color: #ffffff; }

.cb__item--icon.cb__item--card-dark .cb__iconcard-icon img,
.cb__item--icon.cb__item--card-glass .cb__iconcard-icon img {
    filter: brightness(0) invert(1);
}

.cb__columns .column .cb__item--icon:not(.cb__item--card-dark):not(.cb__item--card-light):not(.cb__item--card-glass) {
    height:        100%;
    padding-right: 2rem;
    border-right:  1px solid rgba(0, 46, 71, 0.14);
}
.cb__columns .column:nth-child(3n) .cb__item--icon:not(.cb__item--card-dark):not(.cb__item--card-light):not(.cb__item--card-glass),
.cb__columns .column:last-child .cb__item--icon:not(.cb__item--card-dark):not(.cb__item--card-light):not(.cb__item--card-glass) {
    border-right:  none;
    padding-right: 0;
}
.cb--navy .cb__columns .column .cb__item--icon:not(.cb__item--card-dark):not(.cb__item--card-light):not(.cb__item--card-glass) { border-right-color: rgba(255, 255, 255, 0.14); }

/* ── Glass Card (Icon Card) — frosted navy glass panel, for icon cards sitting
   directly on a dark navy section background (e.g. "How Print Businesses Use
   MegaEdit"). Distinct from Dark Card's solid opaque gradient and Light Card's
   frosted white glass — reuses the same navy-glass treatment as Hero's
   .hero__icon-cards--bg-glass and Stacked Columns' .sc-card--glass. ── */
.cb__item--icon.cb__item--card-glass {
    /* Opaque-enough navy base (not the earlier 0.2 alpha) so this reads as rich
       navy glass on ANY section background, light or dark — the low-opacity
       version bled through to a pale wash on cb--gradient-light sections.
       Soft blue corner glow is the same accent pattern as .hero__integration-row. */
    padding:                 1rem;
    background:
        radial-gradient( ellipse 60% 70% at 20% 15%, rgba(52, 131, 172, 0.35) 0%, rgba(52, 131, 172, 0) 100% ),
        rgba(0, 46, 71, 0.92);
    border:                  1px solid rgba(255, 255, 255, 0.25);
    border-right:            1px solid rgba(255, 255, 255, 0.25) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter:         blur(20px);
    border-radius:           0;
}
.cb__columns .column .cb__item--icon.cb__item--card-glass {
    padding-right: 1rem;
}

@media (max-width: 768px) {
    .cb.section{
       padding: 3rem 1.25rem; 
    }

    .cb__columns .column .cb__item--icon {
        border-right:  none;
        padding-right: 0;
    }
}

/* ── Header ── */
.cb__header {
    margin-bottom: 3rem;
}
.cb__header--split {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.5rem 3rem;
    align-items:           center;
}
.cb__header-body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color:       var(--color-primary-navy);
}
.cb__header-body--light { color: rgba(255, 255, 255, 0.8); }

.cb__sub-heading {
    margin:      0 0 2rem;
    text-align:  center;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size:   1.5rem;
    color:       var(--color-primary-navy);
}
.cb__sub-heading--light { color: #ffffff; }

@media (max-width: 768px) {
    .cb__header--split {
        grid-template-columns: 1fr;
        gap:                   1rem;
    }
}

@media (max-width: 500px){
    .cb__item--icon .cb__iconcard-head{
        flex-direction: column;
        align-items: flex-start;
    }
}

.cb__columns {
    row-gap: 0;
    margin-top: 3rem;
}


@media (min-width: 1025px) {
    .columns.cb__columns--grid:not(:has(.cb__item--image-overlap)) {
        row-gap: 3rem;
    }

    .cb__columns:has(.cb__item--card-light),
    .cb__columns:has(.cb__item--card-dark ),
    .cb__columns:has(.cb__item--card-glass) {
        row-gap: 0rem !important;
    }
}

@media (max-width: 900px) {
    .cb__columns--grid .column{
        width: 100%;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    /* .cb__columns--grid:has(.cb__item--icon) .column {
        width: 33.3333%;
    } */

    .cb__columns--grid:has(.cb__item--image-overlap) .column {
        width: 100%;
    }
}

@media (min-width: 900px) {
    .cb__columns.cb__columns--slider{
        margin-top: 6rem;
    }
}

@media (max-width: 768px) {
    .cb__columns.cb__columns--slider{
        margin-top: 6rem;
    }
}

.cb__item {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    height:         100%;
}

.cb__item--center {
    align-items: center;
}

.cb__img img {
    width:         100%;
    height:        auto;
    border-radius: 4px;
}

.cb__img--icon img {
    width:      70px;
    height:     70px;
    object-fit: contain;
}

.cb__text {
    font-family:  var(--font-primary);
    font-size:    var(--text-body);
    font-weight:  var(--text-body-weight);
    line-height:  1.6;
    color:        var(--color-primary-navy);
}

.cb__text--light {
    color: rgba(255, 255, 255, 0.85);
}

.cb__item--card-dark {
    background-color: var(--color-primary-navy);
    border-radius:    8px;
    padding:          1rem;
    color:            #fff;
}

.cb__item--card-dark .heading {
    color: #fff;
}

.cb__item--icon.cb__item--card-dark {
    background-color: var(--color-primary-navy);
    background-image: linear-gradient(180deg, #3483AC 0%, var(--color-primary-navy) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important; 
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.cb__columns .column .cb__item--icon.cb__item--card-dark{
    padding-right: 1rem;
}

.btn--circle {
    width:         48px;
    height:        48px;
    border-radius: 50%;
    padding:       0;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}


/* ── Responsive ──────────────────────────────────────────────────────── */

@media screen and (max-width: 480px) {
    .hero__media {
        display: none;
    }

    .hero__stats {
        grid-template-columns: 1fr;
    }

    .hero__stats .stat-item {
        border-right:  none;
    }

    .hero__stats .stat-item:last-child {
        border-bottom: none;
    }
}

/* ── Hero gradients ──────────────────────────────────────────────────── */

/* Background Colour = Light — one configurable diagonal (C5CFEA base,
   FFE1E1 accent corner) instead of separate fixed-direction presets. The
   "direction" value is which corner FFE1E1 (0% stop) should visually land
   in, so the CSS `to <side>` keyword is the OPPOSITE corner (a linear-
   gradient's "to X" endpoint is where the LAST colour stop ends up, not the
   first) — e.g. direction "top-left" (FFE1E1 at top-left) needs
   `to bottom right`. Get this backwards and the accent corner ends up
   diagonally opposite from what was picked in wp-admin. */
.hero.hero--gradient-light-top-left,
.hero__gradient-wash.hero--gradient-light-top-left {
    background: linear-gradient(to bottom right, #FFE1E1 0%, #C5CFEA 51%, #9BBBCE 100%);
}
.hero.hero--gradient-light-bottom-left,
.hero__gradient-wash.hero--gradient-light-bottom-left {
    background: linear-gradient(to top right, #FFE1E1 0%, #C5CFEA 51%, #9BBBCE 100%);
}
.hero.hero--gradient-light-top-right,
.hero__gradient-wash.hero--gradient-light-top-right {
    background: linear-gradient(to bottom left, #FFE1E1 0%, #C5CFEA 51%, #9BBBCE 100%);
}
.hero.hero--gradient-light-bottom-right,
.hero__gradient-wash.hero--gradient-light-bottom-right {
    background: linear-gradient(to top left, #FFE1E1 0%, #C5CFEA 51%, #9BBBCE 100%);
}
.hero.hero--gradient-light-top-left .hero__body,
.hero.hero--gradient-light-bottom-left .hero__body,
.hero.hero--gradient-light-top-right .hero__body,
.hero.hero--gradient-light-bottom-right .hero__body,
.hero.hero--gradient-light-top-left .hero__footer-text,
.hero.hero--gradient-light-bottom-left .hero__footer-text,
.hero.hero--gradient-light-top-right .hero__footer-text,
.hero.hero--gradient-light-bottom-right .hero__footer-text {
    color: var(--color-primary-navy);
}

/* Kept for backward compatibility only — pages built before this reorg may
   still have one of these older fixed-direction light gradients stored in
   the (now-trimmed) bg_gradient field. Not offered as a choice going
   forward; see content-hero-section.php's resolution comment. */
.hero.hero--gradient-coral-light,
.hero__gradient-wash.hero--gradient-coral-light {
    background: linear-gradient(to top right, #FFE8E8 20%, #CADFEB 80%);
}

.hero--bg-coral-dark {
    background: linear-gradient(180deg, #FF7878 0%, #E45A59 49%, #B23C3B 100%);
}

.hero.hero--gradient-navy-light,
.hero__gradient-wash.hero--gradient-navy-light {
    background: linear-gradient(160deg, #e8f2f8 0%, #d0e8f5 40%, #fff 100%);
}

.hero.hero--gradient-coral-blue-dark,
.hero__gradient-wash.hero--gradient-coral-blue-dark {
    background:
        radial-gradient(ellipse 50% 25% at 65% 40%, rgba(255, 104, 103, 0.8) 0%, transparent 100%),
        radial-gradient(ellipse 50% 28% at 60% 60%, rgba(62, 150, 196, 0.75) 0%, transparent 100%),
        var(--color-primary-navy)
}

.hero.hero--gradient-radial_glow,
.hero__gradient-wash.hero--gradient-radial_glow {
    background-color: var(--color-primary-navy);
    background-image: radial-gradient(circle at 85% 55%, #040c16 0%, #040c16 10%, transparent 20%), radial-gradient(ellipse 38% 70% at 82% 55%, rgba(145, 205, 245, 0.95) 0%, rgba(100, 170, 225, 0.80) 25%, rgba(50, 120, 185, 0.45) 47%, rgba(20, 70, 135, 0.18) 60%, transparent 78%);
}

/* Two ring glows — bottom-left + top-right */
.hero.hero--gradient-rings,
.hero__gradient-wash.hero--gradient-rings {
    background-color:  #002E47;
    background-repeat: no-repeat;
    background-image:
        radial-gradient( circle 210px at 100% 0%,
            transparent 0 56%,
            rgba(62, 150, 196, 0.55) 63%,
            rgba(62, 150, 196, 0.12) 80%,
            transparent 92%
        ),
        radial-gradient( circle 210px at 0% 100%,
            transparent 0 56%,
            rgba(62, 150, 196, 0.55) 63%,
            rgba(62, 150, 196, 0.12) 80%,
            transparent 92%
        );
}

.hero.hero--gradient-radial_bottom,
.hero__gradient-wash.hero--gradient-radial_bottom {
    background: var(--color-primary-navy);
    background-image: radial-gradient(ellipse 70% 95% at 50% 85%, rgba(3, 25, 37, 1.00) 0%, rgba(3, 25, 37, .4) 35%, rgba(3, 73, 97, .4) 41%, rgba(124, 201, 227, .3) 48%, rgba(3, 73, 97, 0.4) 51%, rgba(3, 25, 37, .2) 56%, transparent 80%)
}

@media screen and (max-width: 1024px){
    .hero.hero--gradient-radial_bottom { 
        background-image: radial-gradient(ellipse 140% 47% at 50% 85%, rgba(3, 25, 37, 1.00) 0%, rgba(3, 25, 37, .4) 35%, rgba(3, 73, 97, .4) 41%, rgba(124, 201, 227, .3) 48%, rgba(3, 73, 97, 0.4) 51%, rgba(3, 25, 37, .2) 56%, transparent 80%);
    }
}

.hero.hero--gradient-coral-light .hero__body,
.hero.hero--gradient-navy-light  .hero__body {
    color: var(--color-primary-navy);
}

/* ── Blue ellipse glow right (layer blur behind image) ───────────────── */

.hero.hero--gradient-blue-glow-right,
.hero__gradient-wash.hero--gradient-blue-glow-right {
    background: var(--color-primary-navy);
}

.hero.hero--gradient-blue-glow-right::after,
.hero__gradient-wash.hero--gradient-blue-glow-right::after {
    content:        '';
    position:       absolute;
    right:          0;
    top:            0;
    width:          55%;
    height:         100%;
    background:     radial-gradient(ellipse 100% 80% at 50% 50%, rgba(52, 131, 172, 0.65) 0%, rgba(52, 131, 172, 0.2) 45%, transparent 70%);
    filter:         blur(55px);
    pointer-events: none;
    z-index:        0;
}

/* ── Hero background shape ───────────────────────────────────────────── */

.hero--has-shape {
    overflow: hidden;
}

.hero__bg-shape {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
}

.hero__bg-shape--arc-coral {
    top:   0;
    right: 0;
    left:  auto;
    width: 40%;
}

.hero__bg-shape--arc-coral svg {
    position: absolute;
    top:      0;
    right:    0;
    width:    100%;
    height:   100%;
}

/* Mirror the arc onto the left edge — same technique as Columns Block's
   .cb--arc-left: flip the whole shape box with scaleX(-1) rather than
   redrawing the SVG path. */
.hero--shape-left .hero__bg-shape--arc-coral {
    left:      0;
    right:     auto;
    transform: scaleX(-1);
}

.hero--has-shape .hero__inner,
.hero--has-shape .hero__header-row {
    position: relative;
    z-index: 1;
}

/* ── Gradient wash (gradient layered over a full-cover photo) ────────────
   When a Background Image AND a Background Gradient are both set, the
   gradient can't be painted as the section's own `background` — a photo
   set via inline style always wins that property, so the gradient would
   simply vanish. Instead it's rendered as its own semi-transparent element
   stacked above the photo. Reuses the same `.hero--gradient-*` modifier
   classes/values as the solid section background (see each variant's rule
   further below, extended to also match `.hero__gradient-wash`). */
.hero__gradient-wash {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
    opacity:        0.7;
}

/* ── Hero card component ─────────────────────────────────────────────── */
.hero:has(.hero__card){

    .columns{
        justify-content: space-between;
    }

    .column:has(.hero__card){

        @media screen and (min-width: 900px){
            max-width: 400px;
        }
        
        @media screen and (min-width: 769px){
            max-width: 400px;

        }

        @media screen and (max-width: 768px){
            margin-top: 3rem;
        }
    }
}

@media screen and (max-width: 900px){
    .hero:has(.hero__card) .columns{
        justify-content: center;
    }

    .hero .hero__col--left:has(.hero__card){
        width: 100%;
        max-width: unset !important;
        height: 450px;
    }

    .hero:has(.hero__card) .hero__col--left .hero__card-content{
        height: 100%;
    }

    .hero:has(.hero__card) .hero__col--left,
    .hero:has(.hero__card) .hero__col--right{
        width: 100%;
    }

    .hero .hero__col--right:has(.hero__card) {
        max-width: unset !important;
        margin-top: 3rem;
    }
}

.hero__card {
    border-radius:  0;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    width:          100%;
    height:         100%;
    min-height:     380px;
    isolation:      isolate;
}

.hero__card--navy  { background-color: var(--color-primary-navy); }
.hero__card--coral { background-color: var(--color-primary-coral); }

/* ── Quote Row (hero card_list, type = quote) ── */
.hero__card-list--quote {
    display:        flex;
    flex-direction: column;
    gap:            3rem;
    padding-right: 1.5rem;
}

@media (max-width: 1200px){
    .columns:has(.hero__card-list--quote) .hero__col--left{
        display: none;
    }

    .columns:has(.hero__card-list--quote) .hero__col--right{
        width: 100%;
    }
}

.quote-row {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
    width:       100%;
}

.quote-row__mark {
    flex:        0 0 auto;
    display:     flex;
    color:       var(--color-coral-deep);
    line-height: 0;
}
.quote-row__mark svg,
.quote-row__mark img {
    display:    block;
    width:      140px;
    height:     60px;
    object-fit: contain;
}

.quote-row__content {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    flex:           1 1 auto;
    min-width:      0;
}

.quote-row__label {
    font-family: var(--font-primary);
    font-size:   0.85rem;
    color:       rgba(255, 255, 255, 0.75);
    margin:      0;
}

.quote-row__panel {
    padding:         1.75rem 2rem;
    background:      rgba(255, 255, 255, 0.08);
    border:          1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
}

.quote-row__body {
    color:       #ffffff;
    font-size:   var(--text-body);
    line-height: 1.6;
    opacity:     0.92;
    margin:      0;
}
.quote-row__body p { margin: 0; }

@media (max-width: 600px){
    .hero__card-list--quote{
        padding-right: 0;
    }

    .quote-row{
        flex-direction:     column;
        text-align:         center;
    }
}

.hero__card--navy  .hero__card-image { background-color: var(--color-primary-navy); }
.hero__card--coral .hero__card-image { background-color: var(--color-primary-coral); }
.hero__card--white .hero__card-image { background-color: #f0f0f0; }

.hero__card--white { background-color: #ffffff; box-shadow: var(--shadow-light); }

.hero__card-content {
    padding: 1rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
}

.hero__card--navy  .hero__card-content,
.hero__card--coral .hero__card-content {
    color: #ffffff;
}

.hero__card--white .hero__card-content {
    color: var(--color-primary-navy);
}

.hero__card-heading {
    font-family: var(--font-primary);
    font-size:   var(--text-h4);
    font-weight: var(--text-h4-weight);
    line-height: 1.2;
    margin: 0;
    color: inherit;
}

.hero__card-text-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
}

.hero__card-body {
    font-size:   var(--text-body);
    line-height: 1.6;
    opacity:     0.85;
    margin:      0;
    flex:        1;
}

.hero__card-body p { margin: 0; }

.hero__card-btn--circle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    flex-shrink:     0;
    border-radius:   50%;
    border:          2px solid currentColor;
    color:           inherit;
    text-decoration: none;
    transition:      background-color 200ms ease, transform 200ms ease;
    margin-top:      2px;
}

.hero__card-btn--circle:hover {
    transform: scale(1.08);
}

.hero__card--navy  .hero__card-btn--circle:hover,
.hero__card--coral .hero__card-btn--circle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.hero__card--white .hero__card-btn--circle:hover {
    background-color: var(--color-primary-navy);
    color:            #ffffff;
}

.hero__card-btn--circle.hero__card-btn--filled {
    background-color: #ffffff;
    border-color:     #ffffff;
    color:            var(--color-primary-navy);
}

.hero__card-btn--circle.hero__card-btn--filled:hover {
    background-color: transparent;
    color:            #ffffff;
    border-color:     #ffffff;
    transform:        scale(1.08);
}

.hero__card--white .hero__card-btn--circle.hero__card-btn--filled {
    background-color: var(--color-primary-navy);
    border-color:     var(--color-primary-navy);
    color:            #ffffff;
}

.hero__card--white .hero__card-btn--circle.hero__card-btn--filled:hover {
    background-color: transparent;
    color:            var(--color-primary-navy);
}

.hero__card-image {
    width:        100%;
    line-height:  0;
    overflow:     hidden;
    flex-shrink:  0;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

.hero__card--img-top .hero__card-image {
    height: 350px;
}

.hero__card:not(.hero__card--img-top) .hero__card-image {
    flex:       1;
    min-height: 200px;
}

.hero__card-image img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center center;
    display:         block;
}

.hero__card-btn--full {
    display:         block;
    width:           100%;
    padding:         0.75rem 1.5rem;
    border-radius:   999px;
    text-align:      center;
    font-family:     var(--font-primary);
    font-size:       0.9375rem;
    font-weight:     600;
    text-decoration: none;
    transition:      opacity 200ms ease, transform 200ms ease;
    margin-top:      auto;
}

.hero__card-btn--full:hover {
    opacity:   0.9;
}

.hero__card-btn--coral {
    background-color: var(--color-primary-coral);
    color:            #ffffff;
}

.hero__card-btn--white {
    background-color: #ffffff;
    color:            var(--color-primary-navy);
}

.hero__card-btn--navy {
    background-color: var(--color-primary-navy);
    color:            #ffffff;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .hero__card-content {
        padding: 1rem 1rem 1.5rem;
    }

    .hero__card:not(.hero__card--img-top) .hero__card-image {
        min-height: 160px;
    }
}

/* === STEPS BLOCK === */

/* ── Section ──────────────────────────────────────────────────────────── */

.steps-block {
    position:        relative;
    padding:         5rem 0;
    background-color: var(--color-primary-navy);
    overflow:         hidden;
    color:            #ffffff;
}

.steps-block--bg-coral-dark {
    background:
        radial-gradient( ellipse at 65% 40%, rgba(180, 40, 40, 0.55) 0%, transparent 60% ),
        var(--color-primary-navy);
}

.steps-block--bg-navy-dark {
    background:
        radial-gradient( ellipse at 50% 50%, rgba(0, 20, 40, 0.8) 0%, transparent 70% ),
        var(--color-primary-navy);
}

/* ── Header row ────────────────────────────────────────────────────────── */

.steps-block__header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             3rem;
    margin-bottom:   3rem;
}

.steps-block__header-content {
    flex: 1;
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.steps-block__header-text {
    font-size:   var(--text-body);
    line-height: 1.6;
    opacity:     0.8;
    margin:      0;
    max-width:   600px;
}

.steps-block__header-cta {
    flex-shrink: 0;
}

/* ── Steps row ─────────────────────────────────────────────────────────── */

.steps-block__steps {
    align-items: stretch;
}

.steps-block__step {
    display:          flex;
    flex-direction:   column;
    gap:              1rem;
    padding:          1.75rem;
    background-color: rgba(255, 255, 255, 0.07);
    border:           1px solid rgba(255, 255, 255, 0.1);
    border-radius:    4px;
    transition:       background-color 200ms ease;
}

.steps-block__step--active {
    background-color: var(--color-primary-coral);
    border-color:     var(--color-primary-coral);
}

.steps-block__step-icon {
    width:  40px;
    height: 40px;
}

.steps-block__step-icon img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
    filter:     brightness(0) invert(1);
}

.steps-block__step-heading {
    font-family: var(--font-primary);
    font-size:   var(--text-h5);
    font-weight: 700;
    color:       #ffffff;
    margin:      0;
    line-height: 1.3;
    flex:        1;
}

.steps-block__step-body {
    font-size:   0.9375rem;
    line-height: 1.6;
    opacity:     0.85;
    margin:      0;
}

.steps-block__step-body p { margin: 0; }

.steps-block__step-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      auto;
    padding-top:     1rem;
    border-top:      1px solid rgba(255, 255, 255, 0.15);
}

.steps-block__step-label {
    font-size:      var(--text-eyebrow);
    font-weight:    var(--text-eyebrow-weight);
    letter-spacing: var(--text-eyebrow-spacing);
    text-transform: var(--text-eyebrow-transform);
    opacity:        0.7;
}

.steps-block__step-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    flex-shrink:     0;
    border-radius:   50%;
    background-color: #ffffff;
    color:           var(--color-primary-navy);
    text-decoration: none;
    transition:      transform 200ms ease, opacity 200ms ease;
}

.steps-block__step-btn:hover {
    transform: scale(1.08);
    opacity:   0.9;
}

.steps-block__step--active .steps-block__step-btn {
    background-color: #ffffff;
    color:            var(--color-primary-coral);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media screen and (max-width: 1023px) {
    .steps-block__header {
        flex-direction: column;
        align-items:    flex-start;
        gap:            1.5rem;
    }
}

@media screen and (max-width: 768px) {
    .steps-block {
        padding: 3.5rem 0;
    }

    .steps-block__steps {
        flex-direction: column;
    }

    .steps-block__step {
        width: 100% !important;
    }
}

/* === FEATURE CARDS === */




/* === SPLIT SECTION === */

/* ── Backgrounds ─────────────────────────────────────────────────────── */

.split-section--navy {
    background: var(--color-navy-radial);
}

.split-section--white {
    background: #ffffff;
}

/* ── Content column ──────────────────────────────────────────────────── */

.split-section__content {
    display:        flex;
    flex-direction: column;
    gap:            1.6rem;
}

.split-section__body {
    font-family: var(--font-primary);
    font-size:   var(--text-body);
    line-height: 1.6;
    margin:      0;
    max-width:   52ch;
}

.split-section--navy .split-section__body {
    color: rgba(255, 255, 255, 0.85);
}

.split-section--white .split-section__body {
    color: var(--color-navy);
}

.split-section__actions {
    display:     flex;
    gap:         1rem;
    flex-wrap:   wrap;
    align-items: center;
}

/* ── Media column ────────────────────────────────────────────────────── */

.split-section__media {
    position: relative;
}


.split-section__image {
    display:       block;
    width:         100%;
    height:        auto;
    object-fit:    cover;
    border-radius: 8px;
}

/* ── Video wrapper ───────────────────────────────────────────────────── */

.split-section__video-wrap {
    position: relative;
    cursor:   pointer;
}

.split-section__play-btn {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    padding:         0;
}

.split-section__play-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           72px;
    height:          72px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.15);
    border:          2px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    transition:      background 0.2s ease, border-color 0.2s ease;
}

.split-section__play-icon::after {
    content:       '';
    display:       block;
    width:         0;
    height:        0;
    border-top:    12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left:   20px solid #ffffff;
    margin-left:   4px;
}

.split-section__play-btn:hover .split-section__play-icon {
    background:    rgba(255, 255, 255, 0.25);
    border-color:  #ffffff;
}

/* ── Footer bar ──────────────────────────────────────────────────────── */

.split-section__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             2rem;
    margin-top:      2rem;
    padding-top:     2rem;
    border-top:      1px solid rgba(255, 255, 255, 0.12);
    flex-wrap:       wrap;
}

.split-section__social-proof {
    font-size:   0.875rem;
    font-style:  italic;
    color:       rgba(255, 255, 255, 0.55);
    margin:      0;
    max-width:   44ch;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media screen and (max-width: 768px) {
    .split-section__content {
        gap: 1.2rem;
    }
}




/* === STATS ROW === */


/* === LOGO SLIDER === */


/* === CTA BAND === */


/* === TESTIMONIALS === */


/* === TABBED CONTENT === */

.tabbed-content-section {
    position:   relative;
    overflow:   hidden;
    padding:    5rem 0;
    font-family: var(--font-primary);
}

.tabbed-content-section--gradient-light { background: linear-gradient(to bottom left, #FFE1E1 0%, #C5CFEA 51%, #9BBBCE 100%); color: var(--color-primary-navy); }
.tabbed-content-section--white          { background: #fff; color: var(--color-primary-navy); }
.tabbed-content-section--navy           { background: var(--color-primary-navy); color: #fff; }

.tabbed-content-section__bg-shape {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    overflow:       hidden;
}

.tabbed-content-section__bg-shape--arc-coral {
    top:    0;
    bottom: 0;
    right:  0;
    left:   auto;
    width:  40%;
}

.tabbed-content-section__bg-shape--arc-coral svg {
    display: block;
    width:   100%;
    height:  auto;
}

.tabbed-content-section--has-shape .tabbed-content-section__inner {
    position: relative;
    z-index:  1;
}

.tabbed-content-section__inner {
    display:        flex;
    flex-direction: column;
    gap:            3rem;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.tabbed-content-section__heading {
    font-size:    var(--text-h2);
    font-weight:  400;
    line-height:  1.15;
    color:        var(--color-primary-navy);
    margin-top:   0.5rem;
    margin-bottom: 0.75rem;
}

.tabbed-content-section--navy .tabbed-content-section__heading { color: #fff; }

.tabbed-content-section__body {
    font-size:   var(--text-body);
    line-height: 1.6;
    color:       var(--color-primary-navy);
    opacity:     0.75;

    @media (min-width: 769px){
        margin-top: 3rem;
    }
}

.tabbed-content-section--navy .tabbed-content-section__body { color: #fff; }

/* ── Tabs layout ─────────────────────────────────────────────────────── */
.tabbed-content-section__tabs {
    display:               grid;
    grid-template-columns: 1fr 1.1fr 1.4fr;
    gap:                   0 2rem;
    align-items:           start;
}

/* ── Tab nav ─────────────────────────────────────────────────────────── */
.tabbed-content-nav {
    display:                 flex;
    flex-direction:          column;
    background:              rgba(255, 255, 255, 0.25);
    backdrop-filter:         blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius:           0rem;
    overflow:                hidden;
    -webkit-border-radius:           0rem;
    -moz-border-radius:           0rem;
    -ms-border-radius:           0rem;
    -o-border-radius:           0rem;
}

.tabbed-content-nav::before{
    content: '';
    position: absolute;
    bottom: -15%;
    left: -15%;
    width: 50%;
    height: 80%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(255, 130, 160, 0.20) 0%, transparent 75%);
}

.tabbed-content-nav__item {
    display:       block;
    width:         100%;
    text-align:    left;
    background:    none;
    border:        none;
    border-left:   none;
    padding:       1.35rem 1.75rem;
    font-family:   var(--font-primary);
    font-size:     var(--text-body);
    font-weight:   600;
    color:         var(--color-primary-navy);
    cursor:        pointer;
    transition:    color 0.2s ease;
    line-height:   1.3;
    border-bottom: 1px solid #FFE1E1;
}

.tabbed-content-nav__item:last-child {
    border-bottom: none;
}

.tabbed-content-nav__item:hover {
    color: #5a6270;
}

.tabbed-content-nav__item--active {
    color:       var(--color-primary-coral);
    font-weight: 700;
}

/* ── Images ──────────────────────────────────────────────────────────── */
.tabbed-content-section__images {
    position: relative;
    border-radius: 0rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: rgba(0,46,71,0.06);
    -webkit-border-radius: 0rem;
    -moz-border-radius: 0rem;
    -ms-border-radius: 0rem;
    -o-border-radius: 0rem;
}

.tabbed-content-section__image {
    position:   absolute;
    inset:      0;
    opacity:    0;
    transition: opacity 0.35s ease;
}

.tabbed-content-section__image--active {
    opacity: 1;
}

.tabbed-content-section__image:nth-child(odd)::before{
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    width: 44px;
    height: 44px;
    border-top: 14px solid var(--color-primary-coral);
    border-left: 14px solid var(--color-primary-coral);
    z-index: 999999;
    transform: rotate(90deg);
}

.tabbed-content-section__image:nth-child(even)::before{
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    width: 44px;
    height: 44px;
    border-top: 14px solid var(--color-secondary-yellow);
    border-left: 14px solid var(--color-secondary-yellow);
    z-index: 999999;
    transform: rotate(90deg);
}

.tabbed-content-section__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ── Content panels ──────────────────────────────────────────────────── */
.tabbed-content-section__panels {
    display:     grid;
    align-items: center;
    height:      100%;
}

.tabbed-content-section__panel {
    grid-area:      1 / 1; 
    align-self:     center;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.35s ease;
    visibility:     hidden;
}

@media screen and (max-width: 768px) {
    .tabbed-content-section__panel{
        align-self:     flex-start;
    }
}

.tabbed-content-section__panel--active {
    opacity:        1;
    pointer-events: auto;
    visibility:     visible;
}

.tabbed-content-section__panel-title {
    font-size:     var(--text-h4);
    font-weight:   700;
    color:         var(--color-primary-navy);
    margin-bottom: 0.75rem;
    line-height:   1.2;
}

.tabbed-content-section--navy .tabbed-content-section__panel-title { color: #fff; }

.tabbed-content-section__panel-body {
    font-size:     var(--text-body);
    line-height:   1.65;
    color:         var(--color-primary-navy);
    opacity:       0.8;
    margin-bottom: 1.25rem;
}

.tabbed-content-section--navy .tabbed-content-section__panel-body { color: #fff; }


/* ── Panel layout (icon nav | panel with why + image) ───────────────── */
.tabbed-content-section:has(.tabbed-content-section__tabs--panel){
    padding-bottom: 0;
}

.tabbed-content-section__tabs--panel {
    grid-template-columns: minmax(260px, 34%) 1fr;
    gap:                   0 2.5rem;
    align-items:           stretch;
}

/* icon nav items: icon · number · label */
.tabbed-content-nav--icons .tabbed-content-nav__item {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    padding:     1.5rem;
    flex:        1 1 auto;
}
.tabbed-content-nav--icons .tabbed-content-nav__icon {
    flex:             0 0 auto;
    width:            32px;
    height:           32px;
    display:          inline-block;
    margin-top:       1px;
    background-color: var(--color-primary-navy);
    -webkit-mask:     var(--icon) center / contain no-repeat;
            mask:     var(--icon) center / contain no-repeat;
}
.tabbed-content-nav--icons .tabbed-content-nav__item--active .tabbed-content-nav__icon {
    background-color: var(--color-primary-coral);
}
.tabbed-content-nav--icons .tabbed-content-nav__num {
    flex:        0 0 auto;
    font-weight: 700;
}
.tabbed-content-nav--icons .tabbed-content-nav__label {
    flex: 1;
}
.tabbed-content-nav--icons .tabbed-content-nav__item--active {
    background: linear-gradient(90deg, rgba(255, 104, 103, 0.12) 0%, rgba(255, 104, 103, 0) 100%);
}

@media (max-width: 768px) {
    .tabbed-content-nav--icons .tabbed-content-nav__item{
        padding: 1rem;
    }

    .tabbed-content-nav--icons .tabbed-content-nav__label{
        text-align: left;
        font-size: 0.75rem;
    }
}

.tabbed-content-nav__item:focus:not(:focus-visible) { outline: none; }

.tabbed-content-panel__stub { display: none; }

.tabbed-content-section__panel--feature {
    align-self: start;
}
.tabbed-content-panel__head {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    margin-bottom: 1rem;
}
.tabbed-content-panel__icon {
    width:            44px;
    height:           44px;
    display:          inline-block;
    flex:             0 0 auto;
    background-color: var(--color-primary-coral);
    -webkit-mask:     var(--icon) center / contain no-repeat;
            mask:     var(--icon) center / contain no-repeat;
}
.tabbed-content-panel__num {
    font-family: var(--font-primary);
    font-size:   1.25rem;
    font-weight: 700;
    color:       var(--color-primary-navy);
}
.tabbed-content-section--navy .tabbed-content-panel__num { color: #fff; }

.tabbed-content-panel__figure {
    position:   relative;
    margin-top: 1.5rem;
}
.tabbed-content-panel__figure .tabbed-content-panel__image {
    margin-top: 0;
}

/* caption = dark gradient overlay across the top of the image */
.tabbed-content-panel__caption {
    position:    absolute;
    top:         0;
    left:        0;
    right:       0;
    z-index:     2;
    padding:     1.25rem 1.5rem 2.5rem;
    background:  linear-gradient(180deg, rgba(0, 46, 71, 0.88) 0%, rgba(0, 46, 71, 0.55) 55%, rgba(0, 46, 71, 0) 100%);
    font-family: var(--font-primary);
    font-size:   0.9rem;
    line-height: 1.5;
    color:       #ffffff;
}

/* standalone (no image) falls back to a solid navy box */
.tabbed-content-panel__caption--standalone {
    position:    static;
    margin-top:  1.5rem;
    padding:     1.15rem 1.5rem;
    background:  var(--color-primary-navy);
    color:       rgba(255, 255, 255, 0.85);
}

.tabbed-content-panel__image {
    margin-top: 1.5rem;
}
.tabbed-content-panel__image img {
    display: block;
    width:   100%;
    height:  auto;
}

@media (max-width: 768px) {
    .tabbed-content-section__tabs--panel {
        grid-template-columns: 1fr;
        gap:                   1.5rem 0;
    }
}

/* ── Panel link ──────────────────────────────────────────────────────── */
.tabbed-content-section__panel-footer {
    margin-top: 1.25rem;
}

.tabbed-content-section__panel-link {
    display:         inline-flex;
    align-items:     center;
    gap:             0.65rem;
    font-family:     var(--font-primary);
    font-size:       var(--text-body);
    font-weight:     500;
    color:           var(--color-primary-navy);
    text-decoration: none;
    transition:      opacity 0.2s ease;
    width: 100%;
    justify-content: space-between;
}

.tabbed-content-section__panel-link:hover { opacity: 0.7; }

.tabbed-content-section__panel-circle-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           2rem;
    height:          2rem;
    border-radius:   50%;
    background:      var(--color-primary-coral);
    color:           #fff;
    flex-shrink:     0;
    transition:      transform 0.2s ease;
}

.tabbed-content-section__panel-link:hover .tabbed-content-section__panel-circle-btn {
    transform: translateX(3px);
}

.tabbed-content-section--navy .tabbed-content-section__panel-link { color: #fff; }

.tabbed-content-section__ctas {
    display:    flex;
    gap:        1rem;
    flex-wrap:  wrap;
    margin-top: 0.5rem;
}

@media (max-width: 1024px) {
    .tabbed-content-section__inner { gap: 1.5rem; }

    .tabbed-content-section__tabs {
        grid-template-columns: minmax(160px, 0.8fr) 1.7fr;
        grid-template-rows:    auto auto;
        column-gap:            2rem;
        align-items:           start;
    }

    .tabbed-content-nav {
        grid-column:    1;
        grid-row:       1 / -1;    
        flex-direction: column;    
        flex-wrap:      nowrap;
        padding:        0;
        margin-bottom:  0;
    }

    .tabbed-content-nav__item {
        flex:          0 0 auto;
        border-left:   none;
        border-right:  none;
        text-align:    center;
        padding:       1.25rem 1.5rem;
        font-size:     0.95rem;
        border-bottom: 1px solid #FFE1E1;
    }
    .tabbed-content-nav__item:last-child { border-bottom: none; }

    .tabbed-content-section__images {
        grid-column:  2;
        grid-row:     1;           
        aspect-ratio: 16 / 9;       
        max-height:   360px;
        width:        100%;
        margin-bottom: 1.5rem;
    }

    .tabbed-content-section__panels {
        grid-column: 2;
        grid-row:    2;            /* text below the image */
        /* Drop the crossfade overlay on responsive so the container fits the ACTIVE
           panel (not the tallest one) — removes the gap before the CTA. */
        display: block;
        height:  auto;
    }
    .tabbed-content-section__panel {
        grid-area:  auto;
        align-self: auto;
    }
    .tabbed-content-section__panel:not( .tabbed-content-section__panel--active ) {
        display: none;
    }

    .tabbed-content-section__ctas{
        justify-content: center !important;
    }
}

/* Phones: everything stacks — nav, then image, then text. */
@media (max-width: 600px) {
    .tabbed-content-section__tabs {
        grid-template-columns: 1fr;
        grid-template-rows:    auto auto auto;
    }

    .tabbed-content-nav {
        grid-column: 1;
        grid-row:    1;
        margin-bottom: 1.5rem;
    }

    .tabbed-content-section__images {
        grid-column:  1;
        grid-row:     2;
        aspect-ratio: 16 / 9;
        max-height:   320px;
        width:        100%;
        margin-bottom: 1.5rem;
    }

    .tabbed-content-section__panels {
        grid-column: 1;
        grid-row:    3;
    }
}


/* === CASE STUDY CARDS === */




/* === FOOTER === */

/* ── Hero: Logo Items (footer_content type = logo_item) ───────────────── */

.hero__logo-items {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    width:          100%;
}

.hero__logo-item {
    display:     grid;
    grid-template-columns: 220px 1fr;
    gap:         0;
    align-items: stretch;
    background:  rgba(255, 255, 255, 0.04);
    border:      1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow:    hidden;
}

.hero__logo-item__logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         2rem 1.75rem;
    border-right:    1px solid rgba(255, 255, 255, 0.1);
    background:      rgba(255, 255, 255, 0.06);
}

.hero__logo-item__logo img {
    width:      100%;
    max-width:  140px;
    height:     auto;
    max-height: 56px;
    object-fit: contain;
    display:    block;
}

.hero__logo-item__content {
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hero__logo-item__heading {
    font-family: var(--font-primary);
    font-size:   1.125rem;
    font-weight: 600;
    color:       #fff;
    margin:      0;
}

.hero__logo-item__sub {
    font-family: var(--font-primary);
    font-size:   0.9rem;
    font-weight: 500;
    color:       var(--color-secondary-blue);
    margin:      0;
}

.hero__logo-item__body {
    font-family: var(--font-primary);
    font-size:   0.95rem;
    color:       rgba(255, 255, 255, 0.7);
    margin-top:  0.25rem;
}

.hero__logo-item__body p {
    margin: 0;
}

.hero--bg-white .hero__logo-item {
    background: #f8f9fa;
    border-color: rgba(0, 46, 71, 0.1);
}

.hero--bg-white .hero__logo-item__logo {
    background:   #fff;
    border-color: rgba(0, 46, 71, 0.1);
}

.hero--bg-white .hero__logo-item__heading { color: var(--color-primary-navy); }
.hero--bg-white .hero__logo-item__body    { color: rgba(0, 46, 71, 0.7); }

@media screen and (max-width: 768px) {
    .hero__logo-item {
        grid-template-columns: 1fr;
    }

    .hero__logo-item__logo {
        border-right:  none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding:       1.5rem;
    }

    .hero--bg-white .hero__logo-item__logo {
        border-color: rgba(0, 46, 71, 0.1);
    }

    .hero__logo-item__content {
        padding: 1.5rem;
    }
}

/* ── Hero: gradient background variant ───────────────────────────────── */

.hero.hero--gradient-blue-pink,
.hero__gradient-wash.hero--gradient-blue-pink {
    background: linear-gradient(180deg, rgba(225, 232, 239, 0.4) 37%, rgba(52, 131, 172, 0.8) 75%)
}

.hero.hero--gradient-blue-pink .hero__body,
.hero.hero--gradient-blue-pink .hero__footer-text {
    color: var(--color-primary-navy);
}

.hero.hero--gradient-blue-pink .hero__footer-row {
    border-top-color: rgba(0, 46, 71, 0.12);
}

/* ── Hero: Logo Stats Grid (footer_content type = logo_stats_grid) ────── */

.hero__lsg {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
    width: 100%;
    align-items: stretch;
}

/* ── Logo grid (left) ─────────────────────────────────────────────────── */

.hero__lsg__logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
    min-height: 550px;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.13);
}

.hero__lsg__logos::after {
    content:        '';
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        2;
    background-image:
        repeating-linear-gradient(to bottom,
            transparent 0px, transparent 4px,
            rgba(0, 46, 71, 0.18) 4px, rgba(0, 46, 71, 0.18) 8px),
        repeating-linear-gradient(to bottom,
            transparent 0px, transparent 4px,
            rgba(0, 46, 71, 0.18) 4px, rgba(0, 46, 71, 0.18) 8px),
        repeating-linear-gradient(to right,
            transparent 0px, transparent 4px,
            rgba(0, 46, 71, 0.18) 4px, rgba(0, 46, 71, 0.18) 8px),
        repeating-linear-gradient(to right,
            transparent 0px, transparent 4px,
            rgba(0, 46, 71, 0.18) 4px, rgba(0, 46, 71, 0.18) 8px);
    background-size:
        1px 100%,
        1px 100%,
        100% 1px,
        100% 1px;
    background-position:
        33.33% 0,
        66.67% 0,
        0 33.33%,
        0 66.67%;
    background-repeat: no-repeat;
}

.hero__lsg__logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1.5rem 1.25rem;
    background:      rgba(255, 255, 255, 0.4);
    border:          none;
    cursor:          pointer;
    position:        relative;
    transition:      background 0.3s ease;
    min-height:      90px;
}

.hero__lsg__logo:hover, .hero__lsg__logo--active {
    background: rgba(255, 255, 255, 0.35);
    z-index: 3;
}

.hero__lsg__logo img {
    width:      100%;
    max-width:  110px;
    height:     auto;
    max-height: 44px;
    object-fit: contain;
    display:    block;
    filter:     none;
    opacity:    1;
    transition: transform 0.3s ease;
}

.hero__lsg__logo:hover img,
.hero__lsg__logo--active img {
    transform: scale(1.12);
}

/* ── Stat panels (right) ──────────────────────────────────────────────── */

.hero__lsg__panels {
    position:   relative;
    min-height: 380px;
}

.hero__lsg__panel {
    display:        grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:    repeat(2, 1fr);
    gap:            1rem;
    position:       absolute;
    inset:          0;
    pointer-events: none;
}

.hero__lsg__panel--active {
    pointer-events: auto;
}

.hero__lsg__panel .hero__stat-box {
    opacity:    0;
    transition: opacity 0.2s ease;
}

.hero__lsg__panel--active .hero__stat-box:nth-child(1) {
    opacity: 1; transition: opacity 0.5s ease; transition-delay: 0s;
}
.hero__lsg__panel--active .hero__stat-box:nth-child(2) {
    opacity: 1; transition: opacity 0.5s ease; transition-delay: 0.15s;
}
.hero__lsg__panel--active .hero__stat-box:nth-child(3) {
    opacity: 1; transition: opacity 0.5s ease; transition-delay: 0.3s;
}
.hero__lsg__panel--active .hero__stat-box:nth-child(4) {
    opacity: 1; transition: opacity 0.5s ease; transition-delay: 0.45s;
}

/* ── Stat box ─────────────────────────────────────────────────────────── */

.hero__stat-box {
    background:      rgba(250, 250, 250, 0.5);
    border:          none;
    border-radius:   0;
    padding:         1.5rem 1.75rem 5.5rem;
    display:         flex;
    flex-direction:  column;
    gap:             0.35rem;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    position:        relative;
    overflow:        hidden;
}

.hero__stat-box::before {
    content:        '';
    position:       absolute;
    top:            -30%;
    right:          -35%;
    width:          90%;
    height:         80%;
    border-radius:  50%;
    pointer-events: none;
    z-index:        0;

    @media (max-width: 768px) {
        top: -15%;
        right: -10%;
        width: 30%;
        height: 80%;
        border-radius: 100%;
    }
}

.hero__lsg__panel .hero__stat-box:nth-child(1)::before {
    background: radial-gradient(circle, rgba(255, 213, 120, 0.2) 0%, transparent 65%);

    @media (max-width: 768px) {
        background: radial-gradient(circle, rgba(255, 213, 120, 0.6) 0%, transparent 65%);
    }
}

.hero__lsg__panel .hero__stat-box:nth-child(2)::before {
    background: radial-gradient(circle, rgba(120, 155, 230, 0.2) 0%, transparent 65%);

     @media (max-width: 768px) {
        background: radial-gradient(circle, rgba(120, 155, 230, 0.6) 0%, transparent 65%);
    }
}

.hero__lsg__panel .hero__stat-box:nth-child(3)::before {
    background: radial-gradient(circle, rgba(90, 195, 195, 0.2) 0%, transparent 65%);
    @media (max-width: 768px) {
        background: radial-gradient(circle, rgba(90, 195, 195, 0.6) 0%, transparent 65%);
    }
}

.hero__lsg__panel .hero__stat-box:nth-child(4)::before {
    background: radial-gradient(circle, rgba(255, 130, 160, 0.2) 0%, transparent 65%);
    @media (max-width: 768px) {
        background: radial-gradient(circle, rgba(255, 130, 160, 0.6) 0%, transparent 65%);
    }
}

.hero__stat-box > * {
    position: relative;
    z-index:  1;
}

.hero__stat-box__headline {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
}

.hero__stat-box__number {
    font-family: var(--font-primary);
    font-size:   3.5rem;
    font-weight: 500;
    color:       var(--color-primary-navy);
    line-height: 1;
}

.hero__stat-box__unit {
    font-family: var(--font-primary);
    font-size:   2rem;
    font-weight: 600;
    color:       var(--color-secondary-blue);
}

.hero__stat-box__label {
    font-family: var(--font-primary);
    font-size:   1. 75rem;
    font-weight: 700;
    color:       var(--color-primary-navy);
    margin:      0;
}

.hero__stat-box__detail {
    font-family:  var(--font-primary);
    font-size:    0.875rem;
    font-weight:  400;
    color:        rgba(0, 46, 71, 1);
    line-height:  1.5;
    position:     absolute;
    bottom:       0;
    left:         0;
    right:        0;
    padding:      0.85rem 1.75rem 1.5rem;
    border-top:   1px solid rgb(255, 255, 255);
    z-index:      1;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .hero__lsg {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hero__lsg__logos {
        min-height: 450px;
    }

    .hero__lsg__logo {
        min-height: 75px;
        padding: 1.25rem 1rem;
    }

    .hero__lsg__panels {
        display:    grid;
        position:   static;
        min-height: unset;
    }

    .hero__lsg__panel {
        grid-area:             1 / 1;
        grid-template-columns: 1fr;
        grid-template-rows:    auto;
        position:              static;
        opacity:               1;
        max-height:            unset;
        overflow:              visible;
        pointer-events:        none;
        transition:            none;
    }

    .hero__lsg__panel--active {
        pointer-events: auto;
    }

    .hero__stat-box {
        padding: 1.5rem 1.75rem 5.5rem;
    }

    .hero__stat-box__number { font-size: 1.875rem; }
}

@media (max-width: 374px) {
    .hero__stat-box {
        padding: 1rem 1.25rem 6rem;
    }

    .hero__stat-box__number { font-size: 1.5rem; }
    .hero__stat-box__unit   { font-size: 0.95rem; }
    .hero__stat-box__label  { font-size: 0.85rem; }
    .hero__stat-box__detail { font-size: 0.8rem;  }
}


/* ── Integration list (hero left column) ─────────────────────────────── */
.hero__integrations {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    width:          100%;
}

.hero__integration-row {
    display:                 flex;
    align-items:             center;
    gap:                     1.5rem;
    padding:                 1.5rem;
    border-radius:           0;
    border:                  1px solid rgba(255, 255, 255, 0.05);
    background:
        radial-gradient( ellipse 25% 100% at 25% 18%, rgba(52, 131, 172, 0.3) 0%, rgba(52, 131, 172, 0) 100% ),
        rgba(0, 46, 71, 0.2);
    backdrop-filter:         blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero__integration-row:first-of-type{
     background:
        radial-gradient( ellipse 75% 90% at 50% 50%, rgba(52, 131, 172, 0.3) 0%, rgba(52, 131, 172, 0) 100% ),
        rgba(0, 46, 71, 0.2);
}

.hero__integration-label {
    flex:        0 0 9rem;
    font-size:   0.95rem;
    font-weight: 600;
    color:       #ffffff;
}

.hero__integration-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
}

.hero__integration-pill {
    display:       inline-flex;
    align-items:   center;
    padding:       0.4rem 1rem;
    border-radius: 2rem;
    border:        1px solid rgba(255, 255, 255, 0.18);
    background:    rgba(255, 255, 255, 0.2);
    color:         rgba(255, 255, 255, 0.90);
    font-family:   var(--font-primary);
    font-size:     0.8rem;
    font-weight:   500;
    white-space:   nowrap;
}

@media (max-width: 600px) {
    .hero__integration-row {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.6rem;
    }
    .hero__integration-label { flex: none; }
}

@media (min-width: 769px) {
    .hero--split .columns:has(.hero__integrations) {
        align-items: stretch;
    }
    .hero--split .columns:has(.hero__integrations) .hero__col--left,
    .hero--split .columns:has(.hero__integrations) .hero__col--right {
        align-self: stretch;
    }
    .hero--split .columns:has(.hero__integrations) .hero__content,
    .hero--split .columns:has(.hero__integrations) .hero__right-content {
        position: relative;
        height:   100%;
    }
    .hero--split .columns:has(.hero__integrations) .hero__media {
        position:   absolute;
        inset:      0;
        height:     100%;
        width:      100%;
        max-height: none;
    }
    .hero--split .columns:has(.hero__integrations) .hero__media .media-bracket {
        height: 100%;
        width:  100%;
    }
    .hero--split .columns:has(.hero__integrations) .hero__image,
    .hero--split .columns:has(.hero__integrations) .hero__inline-image {
        height:     100%;
        width:      100%;
        object-fit: cover;
        max-height: none;
    }

    .hero .columns > .column.is-5  { width: 40%; }
    .hero .columns > .column.is-7  { width: 60%; }
    .hero .columns > .column.is-10 { width: 80%; }
    .hero .columns > .column.is-11 { width: 90%; }
}


/* ── Hero cost list (numbered_list card type) ────────────────────────── */
.hero__cost-list {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    height:         100%;
    padding:        1.5rem;
    background:      linear-gradient( 135deg, #3483AC 0%, #1E516D 100% );
    color:          #ffffff;
    font-family:    var(--font-primary);
}

.hero__cost-list-heading {
    margin:      0 0 0.5rem;
    font-family: var(--font-primary);
    font-size:   var(--text-h4);
    font-weight: 500;
    color:       #ffffff;
}

.hero__cost-list-intro {
    margin:      0 0 1.75rem;
    font-size:   0.9rem;
    line-height: 1.5;
    color:       #ffffff;
}

.hero__cost-list-items {
    list-style: none;
    margin:     0 0 1.75rem;
    padding:    0;
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}

.hero__cost-item-title {
    margin:      0 0 0.4rem;
    font-family: var(--font-primary);
    font-size:   1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color:       #ffffff;
}

.hero__cost-item-num {
    font-weight: 700;
    color:       #ffffff;
}

.hero__cost-item-body {
    font-size:   0.9rem;
    line-height: 1.5;
    color:       #ffffff;
}

.hero__cost-stat {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
}

.hero__cost-stat-value {
    font-family: var(--font-primary);
    font-size:   clamp( 2.5rem, 5vw, 3.5rem );
    font-weight: 400;
    line-height: 1;
    color:       #ffffff;
    flex:        0 0 auto;
}

.hero__cost-stat-label {
    font-size:   1.2rem;
    line-height: 1.5;
    color:       #ffffff;
}


/* ── Hero card carousel (card_carousel type) ─────────────────────────── */
.hero__card-carousel { width: 100%; }

.hero__carousel-slide {
    padding:     2rem 2.25rem;
    color:       #ffffff;
    font-family: var(--font-primary);
    background:  linear-gradient( 135deg, #3483AC 0%, #1E516D 100% );
}

.hero__carousel-slide-img {
    display:       block;
    width:         100%;
    height:        auto;
    margin-bottom: 1.25rem;
}
.hero__carousel-slide-heading {
    margin:      0 0 0.75rem;
    font-family: var(--font-primary);
    font-size:   var(--text-h4);
    font-weight: 700;
    color:       #ffffff;
}
.hero__carousel-slide-body {
    font-size:   0.95rem;
    line-height: 1.6;
    color:       rgba(255, 255, 255, 0.85);
}

.hero__card-carousel .owl-dots {
    display:         flex;
    justify-content: center;
    gap:             0.5rem;
    margin-top:      1rem;
}

.hero__card-carousel .owl-dot span {
    display:       block;
    width:         9px;
    height:        9px;
    margin:        0;
    border-radius: 50%;
    background:    rgba(0, 46, 71, 0.25);
    transition:    background 0.2s ease;
}
.hero__card-carousel .owl-dot.active span {
    background: var(--color-primary-navy);
}

.hero-card-carousel .owl-item > div {
    min-height: 0 !important;
}

.hero-card-carousel .owl-stage {
    display: flex;
}
.hero-card-carousel .owl-item {
    display: flex;
}
.hero-card-carousel .owl-item > div,
.hero-card-carousel .hero__carousel-slide {
    width:  100%;
    height: 100%;
}

@media (min-width: 769px) {
    .hero--split .columns:has(.hero__cost-list) {
        align-items: stretch;
    }
    .hero--split .columns:has(.hero__cost-list) .hero__col--left,
    .hero--split .columns:has(.hero__cost-list) .hero__col--right {
        align-self: stretch;
    }
    /* both column content wrappers fill the (stretched) column height */
    .hero--split .columns:has(.hero__cost-list) .hero__content,
    .hero--split .columns:has(.hero__cost-list) .hero__right-content {
        height: 100%;
    }
    /* right panel fills the column so it matches the left */
    .hero--split .columns:has(.hero__cost-list) .hero__cost-list {
        height: 100%;
    }
    /* left image fills the space under the carousel */
    .hero--split .columns:has(.hero__cost-list) .hero__content .hero__inline-image,
    .hero--split .columns:has(.hero__cost-list) .hero__content .hero__media {
        flex:       1 1 auto;
        min-height: 0;
        width:      100%;
        object-fit: cover;
    }
}

@media (max-width: 768px){
    .hero__carousel-slide {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding:     1.5rem 1rem;
    }

    .hero__cost-stat{
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ── Scrollable cards ────────────────────────────────────────────────── */


.hero--scroll-wrapper {
}

.hero--sticky-left {
    position: relative;
    overflow: clip;
}

.hero--sticky-left .columns {
    align-items: flex-start;   /* required for the sticky column to release correctly */
}

.hero--sticky-left .hero__col--left {
    position: sticky;
    top: var( --hero-pin-top, 136px );
    align-self: flex-start;
}

/* Right column fills whatever the left column leaves, so mismatched Bulma
   is-* widths (e.g. is-4 + is-9 = 108%) can never overflow / clip the section. */
.hero--sticky-left .hero__col--right {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;   /* allow long content to shrink instead of forcing overflow */
}

.hero--sticky-left .hero__col--left .hero__inline-image {
    max-height: 600px;
}

/* Keep the sticky scroll effect active while the layout is still two columns
   (769–1024px). Columns only stack — and the effect turns off — at ≤768px. */
@media (max-width: 768px) {
    .hero--sticky-left .columns          { align-items: stretch; }
    .hero--sticky-left .hero__col--left  { position: static; top: auto; }
}

/* ── Card list wrapper ───────────────────────────────────────────────── */

.hero__card-list {
    display:        flex;
    flex-direction: column;
    width:          100%;
}

.hero__card-list--grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.5rem;
}

@media (max-width: 599px) {
    .hero__card-list--grid {
        grid-template-columns: 1fr;
    }
}

.hero__steps-list {
    list-style: none;
    margin:     0;
    padding:    0;
    width:      100%;
}

.hero__steps-item {
    display:               grid;
    grid-template-columns: 56px minmax(150px, 200px) 1fr;
    column-gap:            3rem;
    align-items:           center;
    padding:               3rem 0;
    border-top:            1px solid rgba(255, 255, 255, 0.15);
}
.hero__steps-item:first-child { border-top: none; }

.hero__steps-num {
    font-family: var(--font-primary);
    font-size:   1.5rem;
    font-weight: 500;
    line-height: 1.2;
    color:       #ffffff;
}

.hero__steps-heading {
    margin:      0;
    font-family: var(--font-primary);
    font-size:   1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color:       #ffffff;
}

.hero__steps-body {
    margin:      0;
    font-family: var(--font-primary);
    font-size:   0.9rem;
    line-height: 1.55;
    color:       rgba(255, 255, 255, 0.72);
}

.hero__steps-body p { margin: 0; }

@media (max-width: 1200px){
    .columns:has(.hero__steps-list) .hero__col--left{
        display: none;
    }

    .columns:has(.hero__steps-list) .hero__col--right {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .hero__steps-item {
        grid-template-columns: 48px 1fr;
        column-gap:            1rem;
        row-gap:               0.5rem;
    }
    .hero__steps-num     { grid-row: 1; grid-column: 1; }
    .hero__steps-heading { grid-row: 1; grid-column: 2; }
    .hero__steps-body    { grid-row: 2; grid-column: 2; }
}


.hero__step-timeline-list {
    --step-gap:     3rem; /* single source of truth — the connecting line reads this too, so they can't drift out of sync */
    position:       relative;
    list-style:     none;
    margin:         0;
    padding:        0;
    width:          100%;
    display:        flex;
    flex-direction: column;
    gap:            var(--step-gap);
}

.hero__step-timeline-item {
    position:    relative;
    display:     flex;
    align-items: flex-start;
    gap:         3rem;
}


.hero__step-timeline-item:not(:first-child) .hero__step-timeline-num::before {
    content:    '';
    position:   absolute;
    left:       50%;
    bottom:     100%; 
    width:      4px;
    height:     var(--connector-height, var(--step-gap));
    background: var(--color-primary-navy);
    opacity:    0.7;
    transform:  translateX(-50%);
}

.hero__step-timeline-num {
    position:        relative;
    z-index:         1;
    flex:            0 0 auto;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2.5rem;
    height:          2.5rem;
    background:      var(--color-primary-coral);
    font-family:     var(--font-primary);
    font-size:       0.95rem;
    font-weight:     700;
    line-height:     1.2;
    color:           #ffffff;
}

.hero__step-timeline-panel {
    flex:                    1 1 auto;
    min-width:               0;
    padding:                 1.5rem 1.75rem;
    background:              rgba(255, 255, 255, 0.55);
    border:                  1px solid rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter:         blur(20px);
}

.hero__step-timeline-heading {
    margin:      0 0 0.4rem;
    font-family: var(--font-primary);
    font-size:   1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color:       var(--color-primary-navy);
}

.hero__step-timeline-body {
    margin:      0;
    font-family: var(--font-primary);
    font-size:   0.9rem;
    line-height: 1.55;
    color:       rgba(0, 46, 71, 0.65);
}
.hero__step-timeline-body p { margin: 0; }

@media (max-width: 600px) {
    .hero__step-timeline-list::before { left: 1rem; }
    .hero__step-timeline-num {
        width:     2rem;
        height:    2rem;
        font-size: 0.85rem;
    }
    .hero__step-timeline-item   { gap: 1rem; }
    .hero__step-timeline-panel  { padding: 1.25rem; }
}

.hero__milestone-timeline {
    position: relative;
    list-style: none;
    margin:   0;
    padding:  0;
    width:    100%;
}

.hero__milestone-timeline::before {
    content:    '';
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       50%;
    width:      4px;
    background: var(--color-secondary-blue);
    transform:  translateX(-50%);
    z-index:    0;
}

.hero__milestone-item {
    position:              relative;
    display:               grid;
    grid-template-columns: 1fr 1.5rem 1fr;
    align-items:           start;
    column-gap:            2rem;
    padding:               1rem 0;
}

.hero__milestone-dot {
    grid-column:   2;
    justify-self:  center;
    position:      relative;
    z-index:       1;
    width:         1.5rem;
    height:        1.5rem;
    margin-top:    0.3rem;
    border-radius: 50%;
    background:    var(--color-primary-coral);

    &::before {
        content: '';
        position: absolute;
        top:      50%;
        left:     50%;
        width:    2rem;
        height:   2rem;
        border-radius: 50%;
        background: rgba(255, 104, 103, .2);
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
    }   
}

.hero__milestone-content {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.hero__milestone-item--right .hero__milestone-content {
    grid-column: 3;
    align-items: flex-start;
    text-align:  left;
}

.hero__milestone-item--left .hero__milestone-content {
    grid-column: 1;
    align-items: flex-end;
    text-align:  right;
}

.hero__milestone-pill {
    display:       inline-block;
    padding:       0.5rem 1rem;
    background:    rgba(255, 104, 103, .12);
    color:         var(--color-primary-coral);
    border-radius: 999px;
    font-family:   var(--font-primary);
    font-size:     0.8rem;
    font-weight:   400;
}

.hero__milestone-body {
    margin:      0;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    line-height: 1.3;
    color: rgba(0, 46, 71, 0.75);
    font-weight: 500;
}

.hero__milestone-body p { margin: 0; }

.hero__footer-row:has(.hero__milestone-timeline) .hero__footer-text {
    margin-top: 3rem;
    text-align: center;
}

@media (max-width: 768px) {
    .hero__milestone-timeline::before {
        left:      .7rem;
        transform: none;
    }
    .hero__milestone-item {
        grid-template-columns: 1.5rem 1fr;
        column-gap:            1.5rem;
    }
    .hero__milestone-dot { grid-column: 1; }
    .hero__milestone-item--left .hero__milestone-content,
    .hero__milestone-item--right .hero__milestone-content {
        grid-column: 2;
        align-items: flex-start;
        text-align:  left;
    }
}

@media (min-width: 769px) {
    .hero .columns:has(.hero__steps-list) {
        align-items: stretch;
    }
    .hero .columns:has(.hero__steps-list) .hero__col--left,
    .hero .columns:has(.hero__steps-list) .hero__col--right {
        align-self: stretch;
    }
    .hero .columns:has(.hero__steps-list) .hero__content,
    .hero .columns:has(.hero__steps-list) .hero__right-content {
        height: 100%;
    }
    .hero .columns:has(.hero__steps-list) .hero__steps-list {
        height: 100%;
    }

    .hero .columns:has(.hero__steps-list) .hero__content .hero__media,
    .hero .columns:has(.hero__steps-list) .hero__content .hero__inline-image,
    .hero .columns:has(.hero__steps-list) .hero__right-content .hero__media,
    .hero .columns:has(.hero__steps-list) .hero__right-content .hero__inline-image {
        flex:       1 1 auto;
        min-height: 0;
        width:      100%;
        object-fit: cover;
    }
    .hero .columns:has(.hero__steps-list) .hero__media .media-bracket {
        height: 100%;
    }
    .hero .columns:has(.hero__steps-list) .hero__media .hero__image {
        width:      100%;
        height:     100%;
        object-fit: cover;
    }
}

@media (max-width: 1200px){
    .hero .columns:has(.hero__media) > .column {
        width: 50%;
    }

    .hero .columns:has(.hero__card) > .column {
        width: 100%;
    }
}

/* ── Icon Cards (stacked navy panels: icon · heading · body) ─────────── */

.hero__icon-cards {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    width:          100%;
}


.hero__icon-card {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    background:     linear-gradient(135deg, #3483AC 0%, #002E47 100%);
    padding:        1.5rem 1.75rem;
}

.hero__icon-card-head {
    display:     flex;
    align-items: center;
    gap:         1rem;
}

.hero__icon-cards--top .hero__icon-card-head {
    flex-direction: column;
    align-items:    flex-start;
}

.hero__btn-wrap { display: flex; width: 100%; }
.hero__btn-wrap--left,
.hero__btn-group--left   { align-self: flex-start; justify-content: flex-start; }
.hero__btn-wrap--center,
.hero__btn-group--center { align-self: center;     justify-content: center; }
.hero__btn-wrap--right,
.hero__btn-group--right  { align-self: flex-end;    justify-content: flex-end; }

.hero__callout {
    padding:                 1.5rem 1.75rem;
    background:
        radial-gradient(70% 130% at 25% 10%, rgba(52, 131, 172, 0.45) 0%, rgba(52, 131, 172, 0) 60%),
        rgba(0, 46, 71, 0.2);
    border:                  1px solid rgba(52, 131, 172, 0.35);
    box-shadow:              inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter:         blur(24px) saturate(1.4);
    font-family:             var(--font-primary);
    font-size:               0.95rem;
    line-height:             1.6;
    color:                   rgba(255, 255, 255, 0.85);
}
.hero__callout p { margin: 0; }

/* two-column grid within the column */
.hero__icon-cards--cols-2 {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem;
}

@media (max-width: 600px) {
    .hero__icon-cards--cols-2 { grid-template-columns: 1fr, 1fr; }
}

@media (max-width: 500px) {
    .hero__icon-cards--cols-2 { grid-template-columns: 1fr; }
}


.hero__icon-cards--bg-glass .hero__icon-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background:              rgba(0, 46, 71, 0.2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter:         blur(20px);
}

.hero__icon-cards--bg-plain .hero__icon-card {
    background:   transparent;
    border:       none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    padding:      1.25rem 0;
}
.hero__icon-cards--bg-plain .hero__icon-card-title,
.hero__icon-cards--bg-plain .hero__icon-card-body {
    color: #ffffff;
}

.hero__icon-card-icon {
    flex:            0 0 auto;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           60px;
    height:          60px;
}

.hero__icon-card--icon-center{
    .hero__icon-card-icon{
        width:           150px;
        height:          70px;
    }

    .hero__icon-card-title{
        width:           100%;
        text-align:      left;
    }
}

.hero__icon-cards--top .hero__icon-card--icon-center .hero__icon-card-head { align-items: center; }
.hero__icon-card-icon img {
    width:      100%;
    height:     100%;
    object-fit: contain;
}

.hero__icon-card-title {
    flex:        1 1 auto;
    min-width:   0;
    margin:      0;
    font-family: var(--font-primary);
    font-size:   1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color:       #ffffff;
}

.hero__icon-cards--bg-plain .hero__icon-card .hero__icon-card-title,
.hero__icon-cards--bg-plain .hero__icon-card .hero__icon-card-body {
    color: var(--color-primary-navy);
}

.hero__icon-card-body {
    margin:      0;
    font-family: var(--font-primary);
    font-size:   0.95rem;
    line-height: 1.55;
    color:       rgba(255, 255, 255, 0.75);
}

.hero__icon-card-body p { margin: 0; }

@media (max-width: 1024px){
    .columns:has(.hero__icon-cards--bg-plain) .hero__col--left {
        display: none;
    }

    .hero__col--right:has(.hero__icon-cards--bg-plain){
        width: 100%;
    }
}

/* ── List-mode card separation ───────────────────────────────────────── */

.hero__card-list--list .card-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding:    1.75rem 0;
    margin:     0;
}

.hero__card-list--list .card-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.card-item--feature,
.card-item--proof {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding:    1.75rem 0;
}

.card-item--feature:last-child,
.card-item--proof:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-item--feature .card-item__row,
.card-item--proof .card-item__row {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
}


.card-item--feature .card-item__icon-wrap,
.card-item--proof .card-item__icon-wrap {
    flex-shrink: 0;
    width:       40px;
    display:     flex;
    align-items: center;
    justify-content: center;
}

.card-item--feature .card-item__icon-wrap .icon,
.card-item--proof .card-item__icon-wrap .icon {
    background:    transparent;
    box-shadow:    none;
    border-radius: 0;
    padding:       0;
    width: 2.5rem;
}

.card-item--feature .card-item__logo,
.card-item--proof .card-item__logo {
    flex-shrink: 0;
    width:       90px;
}

.card-item--feature .card-item__logo img,
.card-item--proof .card-item__logo img {
    display:          block;
    width:            100%;
    height:           auto;
    max-height:       48px;
    object-fit:       contain;
    object-position:  left center;
}

.card-item--feature .card-item__text,
.card-item--proof .card-item__text {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    min-width:      0;
}

.card-item--feature .card-item__title,
.card-item--proof .card-item__title {
    font-size:   0.9375rem;
    font-weight: 600;
    color:       #fff;
    margin:      0;
}

.card-item--feature .card-item__body,
.card-item--proof .card-item__body {
    font-size:   0.75rem;
    color:       rgba(255, 255, 255, 0.6);
    margin:      0;
    line-height: 1.5;
}


.card-item__circle-btn {
    flex-shrink:      0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            38px;
    height:           38px;
    border-radius:    50%;
    background-color: #fff;
    color:            var(--color-primary);
    text-decoration:  none;
    transition:       background-color 180ms ease, transform 180ms ease;
    margin-left:      auto;
}

.card-item__circle-btn:hover {
    background-color: transparent;
    border:           1px solid #fff;
    color:            #fff;
    transform:        scale(1.08);
}



@media (max-width: 768px) {
    .card-item--feature .card-item__row,
.card-item--proof .card-item__row{
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 599px) {
    .card-item--feature .card-item__logo,
.card-item--proof .card-item__logo {
        width: 64px;
    }

    .card-item--feature .card-item__text,
.card-item--proof .card-item__text {
        grid-template-columns: 1fr;
        gap:                   0.25rem;
    }

    .card-item__circle-btn {
        width:  32px;
        height: 32px;
    }
}
    
    
    .hero__card-list--proof.hero__card-list--list .card-item,
    .hero__card-list--proof.hero__card-list--list .card-item:last-child {
        border-top:    none;
        border-bottom: none;
        padding:       2rem .75rem;
    }

    .hero__card-list--feature,
    .hero__card-list--proof {
        gap: 1rem;
    }

    .hero__card-list--feature .card-item--feature,
    .hero__card-list--proof   .card-item--proof {
        padding:                 1.125rem 1.25rem;
        border-radius:           0px;
        background:              linear-gradient(143deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.1) 60%,rgba(255, 255, 255, 0.01) 100%);
        backdrop-filter:         blur(12px);
        -webkit-backdrop-filter: blur(12px);
        -webkit-border-radius:           0px;
        -moz-border-radius:           0px;
        -ms-border-radius:           0px;
        -o-border-radius:           0px;
    }

    @media (min-width: 769px) {
        .hero__card-list--feature.hero__card-list--list .card-item,
        .hero__card-list--feature.hero__card-list--list .card-item:last-child,
        .hero .columns:has(.hero__card-list--proof) .hero__col--left {
            padding: 3rem 1.5rem;
        }
    }

    @media (min-width: 768px) {
        .hero__card-list--feature.hero__card-list--list .card-item,
        .hero__card-list--feature.hero__card-list--list .card-item:last-child,
        .hero .columns:has(.hero__card-list--proof) .hero__col--left {
            padding: 1.5rem 1rem;
        }
    }
    


/* ── Base section ─────────────────────────────────────────────────────── */
.stacked-columns-block {
    position:    relative;
    padding:     5rem 1.5rem;
    overflow:    hidden;
    background:  linear-gradient(180deg, #002E47 0%, #004671 100%);
    color:       #fff;
    font-family: var(--font-primary);
}

.stacked-columns-block .container{
    padding: 0 !important;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.stacked-columns-block__header {
    max-width:     100%;
    margin-bottom: 3rem;
}

.stacked-columns-block__heading {
    font-size:      var(--text-h2);
    font-weight:    var(--text-h2-weight);
    line-height:    1.1;
    color:          #fff;
    margin:         0.5rem 0 1rem;
    text-transform: capitalize;
}

.stacked-columns-block__body {
    font-size:   var(--text-body);
    line-height: 1.6;
    color:       rgba(255, 255, 255, 0.75);
    margin:      0;
}

.stacked-columns-block__heading--white { color: #fff; }
.stacked-columns-block__heading--navy  { color: var(--color-primary-navy); }
.stacked-columns-block__heading--coral { color: var(--color-primary-coral); }

/* ── Heading highlight modifiers ──────────────────────────────────────── */
.heading-highlight { display: inline; }

.heading-highlight--bold          { font-weight: 700; }
.heading-highlight--coral         { color: var(--color-primary-coral); }
.heading-highlight--yellow        { color: var(--color-secondary-yellow); }
.heading-highlight--white         { color: #fff; }
.heading-highlight--navy          { color: var(--color-primary-navy); }
.heading-highlight--blue          { color: var(--color-secondary-blue); }
.heading-highlight--underline     {
    text-decoration:       underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}
.heading-highlight--underline-coral {
    text-decoration:            underline;
    text-decoration-color:      var(--color-primary-coral);
    text-underline-offset:      4px;
    text-decoration-thickness:  2px;
}

/* ── Background gradient modifiers ───────────────────────────────────── */
.stacked-columns-block.sc--gradient-navy,
.stacked-columns-block.sc--gradient-none,
.stacked-columns-block {
    background: linear-gradient(130deg, #002E47 0%, #004671 100%);
}

/* ── Grid ─────────────────────────────────────────────────────────────── */
.stacked-columns-block__grid {
    align-items: stretch;
}

.stacked-columns-block__col {
    display:        flex;
    flex-direction: column;
    align-self:     stretch;
}

@media (max-width: 900px){
    .stacked-columns-block__grid .stacked-columns-block__col{
        width: 100%;
    }
}

@media (max-width: 768px){
    .stacked-columns-block__header{
        width: 100%;
    }

    .stacked-columns-block__header .is-variable{
        --columnGap: .75rem
    }

    .stacked-columns-block__header--split .column,
    .stacked-columns-block__header .stacked-columns-block__header-body{
        padding-right: 0 !important;
    }
}

/* ── sc-card (stacked columns inline card) ────────────────────────────── */
.sc-card {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    height:         100%;
    padding:        1.75rem;
    border-radius:  0px;
}

@media (max-width: 1024px){
    .sc-card{
        padding: 1rem;
    }
}

.sc-card--dark {
    background: rgba(255, 255, 255, 0.05);
    border:     1px solid rgba(255, 255, 255, 0.12);
    color:      #fff;
}

.sc-card--light {
    background: #fff;
    border:     1px solid rgba(0, 46, 71, 0.10);
    color:      var(--color-primary-navy);
}

.sc-card--glass {
    background:              rgba(255, 255, 255, 0.07);
    backdrop-filter:         blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border:                  1px solid rgba(255, 255, 255, 0.14);
    color:                   #fff;
}

.sc-card--glass .sc-card__title { color: #fff; }
.sc-card--glass .sc-card__body  { color: rgba(255, 255, 255, 0.75); }

.sc-card--navy-gradient,
.sc-card--navy_gradient {
    background: linear-gradient(135deg, #3483AC 0%, #1E516D 100%);
    color:      #fff;
}

.sc-card--navy-gradient .sc-card__title,
.sc-card--navy_gradient .sc-card__title { color: #fff; }

.sc-card--navy-gradient .sc-card__body,
.sc-card--navy_gradient .sc-card__body  { color: rgba(255, 255, 255, 0.80); }

.sc-card__icon {
    width:  48px;
    height: 48px;
    flex-shrink: 0;
}

.sc-card__icon img {
    width:      100%;
    height:     100%;
    object-fit: contain;
}

.sc-card__header {
    display:     flex;
    align-items: center;
    gap:         0.875rem;
}

.sc-card__header .sc-card__icon {
    width:  36px;
    height: 36px;
}

.sc-card__title {
    font-size:   var(--text-h5);
    font-weight: 700;
    line-height: 1.2;
    margin:      0;
}

.sc-card--dark  .sc-card__title { color: #fff; }
.sc-card--light .sc-card__title { color: var(--color-primary-navy); }

.sc-card__body {
    flex:        1;
    font-size:   var(--text-body);
    line-height: 1.6;
    margin:      0;
}

.sc-card--dark  .sc-card__body { color: rgba(255, 255, 255, 0.72); }
.sc-card--light .sc-card__body { color: rgba(0, 46, 71, 0.72); }

.sc-card__body p { margin: 0 0 0.75rem; }
.sc-card__body p:last-child { margin-bottom: 0; }

.sc-card__footer {
    display:     flex;
    align-items: center;
    gap:         1rem;
    margin-top:  .75rem;

    @media (max-width: 768px) {
        margin-top: 1rem;
        padding-top: 1.5rem;
        border-top: 1px solid #fff;
    }
}

.sc-card__read-more {
    display:       inline-flex;
    align-items:   center;
    gap:           0.375rem;
    font-size:     var(--text-h5);
    font-weight:   600;
    text-decoration: none;
    transition:    opacity 200ms ease;
}

.sc-card__read-more--circle {
    display:         flex;
    width:           100%;
    justify-content: space-between;
    align-items:     center;
}

.sc-card--dark  .sc-card__read-more { color: #fff; }
.sc-card--light .sc-card__read-more { color: var(--color-primary-navy); }

.sc-card__circle-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          1px solid transparent;
    background:      #fff;
    color:           var(--color-primary-navy);
    flex-shrink:     0;
    transition:      background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.sc-card--light .sc-card__circle-btn {
    background: var(--color-primary-navy);
    color:      #fff;
}

.sc-card__read-more:hover .sc-card__circle-btn {
    background:   transparent;
    border-color: var(--color-primary-navy);
    color:        var(--color-primary-navy);
}

.sc-card--navy_gradient .sc-card__read-more:hover .sc-card__circle-btn{
    background:   transparent;
    border-color:   #fff;
    color:          #fff;
}

.sc-card--light .sc-card__read-more:hover .sc-card__circle-btn {
    background:   transparent;
    border-color: #fff;
    color:        #fff;
}

/* ── Gradient Multi Colour style (mirrors hero__stat-box) ────────────── */
.sc-card--gradient,
.sc-card--gradient-multi-colour,
.sc-card--gradient_multi_colour {
    position:   relative;
    overflow:   hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.10) 100%);
    color:      var(--color-primary-navy);
}

.sc-card--gradient::before,
.sc-card--gradient-multi-colour::before,
.sc-card--gradient_multi_colour::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -15%;
    width: 50%;
    height: 80%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(120, 155, 230, 0.40) 0%, transparent 65%);


    @media (max-width: 768px) {
        height: 50%
    }
}

.stacked-columns-block__col:nth-child(2) .sc-card--gradient::before,
.stacked-columns-block__col:nth-child(2) .sc-card--gradient-multi-colour::before,
.stacked-columns-block__col:nth-child(2) .sc-card--gradient_multi_colour::before {
    background: radial-gradient(circle, rgba(255, 130, 160, 0.40) 0%, transparent 65%);
}
.stacked-columns-block__col:nth-child(3) .sc-card--gradient::before,
.stacked-columns-block__col:nth-child(3) .sc-card--gradient-multi-colour::before,
.stacked-columns-block__col:nth-child(3) .sc-card--gradient_multi_colour::before {
    background:     radial-gradient(circle, rgba(255, 213, 120, 0.40) 0%, transparent 78%);
}
.stacked-columns-block__col:nth-child(4) .sc-card--gradient::before,
.stacked-columns-block__col:nth-child(4) .sc-card--gradient-multi-colour::before,
.stacked-columns-block__col:nth-child(4) .sc-card--gradient_multi_colour::before {
    background: radial-gradient(circle, rgba(90, 195, 195, 0.40) 0%, transparent 65%);
}

.sc-card--gradient .sc-card__icon,
.sc-card--gradient .sc-card__header,
.sc-card--gradient .sc-card__title,
.sc-card--gradient .sc-card__body,
.sc-card--gradient .sc-card__footer,
.sc-card--gradient-multi-colour .sc-card__icon,
.sc-card--gradient-multi-colour .sc-card__header,
.sc-card--gradient-multi-colour .sc-card__title,
.sc-card--gradient-multi-colour .sc-card__body,
.sc-card--gradient-multi-colour .sc-card__footer,
.sc-card--gradient_multi_colour .sc-card__icon,
.sc-card--gradient_multi_colour .sc-card__header,
.sc-card--gradient_multi_colour .sc-card__title,
.sc-card--gradient_multi_colour .sc-card__body,
.sc-card--gradient_multi_colour .sc-card__footer { position: relative; z-index: 1; }

.sc-card--gradient .sc-card__title,
.sc-card--gradient-multi-colour .sc-card__title,
.sc-card--gradient_multi_colour .sc-card__title { color: var(--color-primary-navy); }

.sc-card--gradient .sc-card__body,
.sc-card--gradient-multi-colour .sc-card__body,
.sc-card--gradient_multi_colour .sc-card__body  { color: rgba(0, 46, 71, 0.75); }

/* ── Content colour override (overrides all child text, icons, buttons) ─ */
.sc-card--content-white .sc-card__title,
.sc-card--content-white .sc-card__body,
.sc-card--content-white .sc-card__body *,
.sc-card--content-white .sc-card__read-more,
.sc-card--content-white .sc-card__circle-btn { color: #fff; }
.sc-card--content-white .sc-card__circle-btn { background: #fff; color: var(--color-primary-navy); }
.sc-card--content-white .sc-card__icon img   { filter: brightness(0) invert(1); }

.sc-card--content-navy .sc-card__title,
.sc-card--content-navy .sc-card__body,
.sc-card--content-navy .sc-card__body *,
.sc-card--content-navy .sc-card__read-more,
.sc-card--content-navy .sc-card__circle-btn { color: var(--color-primary-navy); }
.sc-card--content-navy .sc-card__circle-btn { background: var(--color-primary-navy); color: #fff; }
.sc-card--content-navy .sc-card__icon img   { filter: brightness(0) saturate(100%) invert(11%) sepia(97%) saturate(709%) hue-rotate(176deg) brightness(87%) contrast(106%); }

/* ── Button colour modifiers ──────────────────────────────────────────── */
.sc-card__footer--white .sc-card__read-more,
.sc-card__footer--white .sc-card__circle-btn { color: #fff; }
.sc-card__footer--white .sc-card__circle-btn { border-color: rgba(255, 255, 255, 0.40); }
.sc-card__footer--white .sc-card__circle-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.70); }

.sc-card__footer--navy .sc-card__read-more,
.sc-card__footer--navy .sc-card__circle-btn { color: var(--color-primary-navy); }
.sc-card__footer--navy .sc-card__circle-btn { border-color: rgba(0, 46, 71, 0.35); }
.sc-card__footer--navy .sc-card__circle-btn:hover { background: rgba(0, 46, 71, 0.08); border-color: var(--color-primary-navy); }

.sc-card__footer--coral .sc-card__read-more,
.sc-card__footer--coral .sc-card__circle-btn { color: var(--color-primary-coral); }
.sc-card__footer--coral .sc-card__circle-btn { border-color: rgba(255, 104, 103, 0.40); }
.sc-card__footer--coral .sc-card__circle-btn:hover { background: rgba(255, 104, 103, 0.12); border-color: var(--color-primary-coral); }

.sc-card__footer--light-blue .sc-card__read-more,
.sc-card__footer--light-blue .sc-card__circle-btn { color: var(--color-tint-blue-light); }
.sc-card__footer--light-blue .sc-card__circle-btn { border-color: rgba(166, 209, 234, 0.40); }
.sc-card__footer--light-blue .sc-card__circle-btn:hover { background: rgba(166, 209, 234, 0.12); border-color: var(--color-tint-blue-light); }

/* ── Gradient modifiers (mirror hero gradients) ───────────────────────── */
.stacked-columns-block.sc--gradient-navy {
    background: linear-gradient(180deg, #002E47 0%, #004671 100%);
}

.stacked-columns-block.sc--gradient-dark {
    background: linear-gradient(180deg, #001828 0%, var(--color-primary-navy) 100%);
}

.stacked-columns-block.sc--gradient-radial_bottom {
    background-color:  var(--color-primary-navy);
    background-image:  radial-gradient(
        ellipse 110% 90% at 50% 118%,
        rgba(0, 46, 71, 1.00)     0%,
        rgba(0, 46, 71, 1.00)     35%,
        rgba(3, 73, 97, 1.00)     36%,
        rgba(124, 201, 227, 1.00) 48%,
        rgba(3, 73, 97, 1.00)     51%,
        rgba(0, 46, 71, 1.00)     60%,
        transparent               80%
    );
}

.stacked-columns-block.sc--gradient-radial_top {
    background-color: #002E47;
    background-image: radial-gradient(
        ellipse 125% 62% at 50% 50%,
        rgba(62, 150, 196, 0.75) 0%,
        rgba(52, 131, 172, 0.35) 38%,
        transparent 68%
    );
}

.stacked-columns-block.sc--gradient-light_arc {
    position:         relative;
    overflow:         hidden;   
    color:            var(--color-primary-navy);
    background-color: #EEF2FB;
    background-image:
        radial-gradient( ellipse 55% 35% at 50% 80%, rgba(255, 104, 103, 0.20) 0%, transparent 65% ),

        linear-gradient( to bottom, #EEF2FB 0%, #FDECEC 100% );
}
.stacked-columns-block.sc--gradient-light_arc .stacked-columns-block__heading,
.stacked-columns-block.sc--gradient-light_arc .stacked-columns-block__body {
    color: var(--color-primary-navy);
}


.stacked-columns-block__bg-shape {
    position:       absolute;
    top:            0;
    right:          0;
    width:          40%;
    max-width:      700px;
    line-height:    0;
    pointer-events: none;
    z-index:        0;
}
.stacked-columns-block__bg-shape svg {
    display: block;
    width:   100%;
    height:  auto;
}
.stacked-columns-block.sc--gradient-light_arc > .container {
    position: relative;
    z-index:  1;
}

.stacked-columns-block.sc--gradient-navy_gradient {
    background: var(--color-navy-gradient);
}

.stacked-columns-block.sc--gradient-light {
    background: linear-gradient(to bottom left, #FFE1E1 0%, #C5CFEA 51%, #9BBBCE 100%);
    color:      var(--color-primary-navy);
}

.stacked-columns-block.sc--gradient-light .stacked-columns-block__heading {
    color: var(--color-primary-navy);
}

.stacked-columns-block.sc--gradient-light .stacked-columns-block__body {
    color: var(--color-primary-navy);
}


@media screen and (max-width: 1024px) {
    .stacked-columns-block{
        padding-left:  1.25rem;
        padding-right: 1.25rem;

         .container{
            padding: 0px;
        }
    }
}

/* ── Custom section styling ──────────────────────────────────────────── */

/* ── Homepage Hero ───────────────────────────────────────────────────── */
#homepageBanner.hero{

    @media screen and (max-width: 1024px) {
        .columns{
            flex-direction: column;
        }

        .column{
            width: 100%;
        }

        .hero__right-content{
            align-items: flex-start;
        }
    }
}

/* ── About Section ───────────────────────────────────────────────────── */
#aboutSection.hero .column.is-9{
    @media screen and (max-width: 1440px) {
        width: 66.666666% !important;
    }

    @media screen and (max-width: 900px) {
        width: 100% !important;
    }
}

#aboutSection.hero .column.is-3{
     @media screen and (max-width: 1440px) and (min-width: 901px) {
        width: 33.333333% !important;
    }
}

@media screen and (max-width: 768px) {
    #aboutSection.hero .hero__col--left .hero__card {
        min-height: auto;

        .hero__card-content{
            max-height: auto;
        }
    }
}

/* ── Proof Section ───────────────────────────────────────────────────── */
#proof .hero__header-row{
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}

#proof.hero .columns:has(.hero__card-list--proof)  .hero__content {
    position: relative;
}


#proof.hero .columns:has(.hero__card-list--proof) .hero__content:has(.hero__inline-image)::before {
    content: '';
    position: absolute;
    top:            -12px;
    left:           -14px;
    width:          48px;
    height:         48px;
    border-top:     14px solid var(--color-primary-coral);
    border-left:    14px solid var(--color-primary-coral);
    z-index:        -1;
}

#proof .case-study-row:nth-child(2) {
    background:              linear-gradient(143deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter:         blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color:            rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0    1px 0 rgba(255, 255, 255, 0.15),
        inset -1px 0  0 rgba(255, 255, 255, 0.06),
        0 4px 20px     rgba(0, 0, 0, 0.20);
}

#proof .case-study-row:nth-child(2) .case-study-row__description {
    max-height: 200px;
    opacity:    1;
    margin-top: 0.75rem;
}

#proof .hero__card-list--proof:hover .case-study-row:nth-child(2):not(:hover) {
    background:              transparent;
    backdrop-filter:         none;
    -webkit-backdrop-filter: none;
    box-shadow:              none;
    border-color:            transparent;
}

#proof .hero__card-list--proof:hover .case-study-row:nth-child(2):not(:hover) .case-study-row__description {
    max-height: 0;
    opacity:    0;
    margin-top: 0;
}

#proof  .hero__btn-group{
    margin-top: 1.25rem;
}

@media screen and (max-width: 1024px) {
    #proof .hero__header-row{
        padding-bottom: 0rem;
    }
}

@media (max-width: 800px) {
    #proof .hero__col--left {
        display: none;
    }

    #proof .hero__col--right{
        width: 100%;
    }
}

/* ── Ready Section ───────────────────────────────────────────────────── */

#ready.hero .hero__content{
    gap:    .75rem;
}

#ready.hero .columns:has(.hero__card-content) .hero__card-content{
    background: radial-gradient(ellipse at 50% 43%, #FF6867 0%, #FF6867 9%, #002E47 70%)
}

#ready.hero .columns  .hero__right-content{
    gap:    3rem;
}

#ready.hero .columns:has(.hero__card-content)  .hero__right-content{
    position:   relative;
}

#ready.hero .columns:has(.hero__card-content) .hero__right-content:has(.hero__card-image)::before {
    content: '';
    position: absolute;
    top:            -12px;
    left:           -14px;
    width:          48px;
    height:         48px;
    border-top:     14px solid var(--color-secondary-yellow);
    border-left:    14px solid var(--color-secondary-yellow);
    z-index:        -1;
}

.hero__media--bracket {
    position: relative;
}
.hero__media--bracket::before {
    content:     '';
    position:    absolute;
    top:         -12px;
    left:        -14px;
    width:       48px;
    height:      48px;
    border-top:  14px solid var(--bracket-color, var(--color-secondary-yellow));
    border-left: 14px solid var(--bracket-color, var(--color-secondary-yellow));
    z-index:     -1;
}
.hero__media--bracket-coral   { --bracket-color: var(--color-primary-coral); }
.hero__media--bracket-yellow  { --bracket-color: var(--color-secondary-yellow); }

.hero__media--tagged .media-bracket {
    position: relative;
    display:  block;
}
.hero__media-tag {
    position:       absolute;
    left:           25%;
    bottom:         5%;
    display:        flex;
    flex-direction: column;
    gap:            0.1rem;
    padding:        0.85rem 1.5rem;
    background:     var(--color-coral-deep);
    color:          #ffffff;
    font-family:    var(--font-primary);
}
.hero__media-tag-name { font-weight: 700; font-size: 1.05rem; }
.hero__media-tag-role { font-size: 0.8rem; opacity: 0.9; }

#ready.hero .columns:has(.hero__card-content) .hero__col--left .hero__btn-group{
    margin-top: 1.5rem;
}

#ready .yellow-text{
    color: var(--color-secondary-yellow);
}

/* === Solution Page === */

/* ── Problem ───────────────────────────────────────────────────── */
#problem.hero.hero--gradient-coral-light{
    background: linear-gradient(to bottom left, #CADFEB 0%, #FFE8E8 100%);
}

/* ── Solution ───────────────────────────────────────────────────── */
#solution.stacked-columns-block.sc--gradient-light{
    background: linear-gradient(to bottom right, #FFE8E8 0%, #CADFEB 100%);
}

@media (max-width: 900px){
    .hero__header-content .hero__body,
    .stacked-columns-block__header .stacked-columns-block__body{
        margin-top: 0;
    }
}

/* ── Differences ───────────────────────────────────────────────────── */
#differences.stacked-columns-block.sc--gradient-light{
    background: linear-gradient(to bottom right, #FFE1E1 0%, #C5CFEA 51%, #9BBBCE 100%)
}

/* ── Integration ───────────────────────────────────────────────────── */
@media (max-width: 1023px){
    #integration.hero .hero__col--left{
        display: none;
    }

    #integration.hero .hero__col--right{
        width: 100%;
    }
}

/* === Platform Page === */
@media (max-width: 1200px){
    #problem.hero .hero__col--left,
    #problem.hero .hero__col--right{
        width: 100%;
    }
}

@media (max-width: 1023px){
    #howItWorks.hero .hero__col--left{
        display: none;
    }

    #howItWorks.hero .hero__col--right{
        width: 100%;
    }
}

@media (max-width: 900px){
    
    #whatItIs.cb .cb__columns .column:nth-child(1),
    #whatItIs.cb .cb__columns .column:nth-child(2) {
        width: 50%;
    }

    #whatItIs.cb .cb__columns .column:nth-child(3){
        width: 100%;
    }
}

@media (max-width: 800px){
    #ready .hero__footer-row:has(.hero__footer-cta){
        flex-direction: column;
        align-items: center;
        gap: 0rem;
    }
}

@media (max-width: 768px){

    #whatItIs.cb .cb__columns .column:nth-child(1),
    #whatItIs.cb .cb__columns .column:nth-child(2),
    #whatItIs.cb .cb__columns .column{
        width: 100%;
    }
}


/* === Ecosystem Page === */
@media (min-width: 1500px){
    #ecosystem.hero .columns:has(.hero__icon-cards--cols-2) .hero__col--left .hero__inline-image{
        max-height: 430px;
    }
}

@media (max-width: 900px){
    #ecosystem.hero .columns{
        flex-direction: column;

        .hero__col--left{
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem
        }

        .hero__col--right,
        .hero__col--left{
            width: 100%;
        }

        .hero__btn-group--right{
            align-self: center;
        }
    }
}

/* === Case-Study Page === */
@media (max-width: 768px) {
    #workflows .cb__columns--grid{
        display: flex;
        flex-direction: column-reverse;
    }
}

/* === FAQ SECTION === */
.content-accordion-section {
    padding:     5rem 1.5rem;
    position:    relative;
    overflow:    hidden;
    font-family: var(--font-primary);
}

/* ── Backgrounds ─────────────────────────────────────────────────────── */
.content-accordion-section--gradient-light {
    background: linear-gradient(to top left, #FFE1E1 0%, #C5CFEA 51%, #9BBBCE 100%);
    color:      var(--color-primary-navy);
}
.content-accordion-section--white {
    background: #fff;
    color:      var(--color-primary-navy);
}
.content-accordion-section--navy {
    background: var(--color-primary-navy);
    color:      #fff;
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.content-accordion-section__inner {
    display:   flex;
    gap:       4rem;
    align-items: flex-start;
}

/* ── Left column ─────────────────────────────────────────────────────── */
.content-accordion-section__left {
    flex: 0 0 300px;
    max-width: 300px;
    position:    sticky;
}

.content-accordion-section__heading {
    font-size:      var(--text-h2);
    font-weight:    700;
    line-height:    1.1;
    margin:         0.75rem 0 1.5rem;
    text-transform: capitalize;
    color:          var(--color-primary-navy);
}

.content-accordion-section--navy .content-accordion-section__heading { color: #fff; }

.content-accordion-section__heading .heading-initial {
    font-size:   1.2em;
    font-weight: 700;
    line-height: 1;
}
.content-accordion-section__heading .heading-word {
    display:      inline-block;
    font-weight:  400;
}

.content-accordion-section__contact {
    margin-top: 3em;
    margin-bottom: 3rem;
}

.content-accordion-section--navy .content-accordion-section__contact {
    background: rgba(255,255,255,0.08);
}

.content-accordion-section__sub-heading {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--color-primary-navy);
    margin:      0 0 1.5rem;
}

.content-accordion-section--navy .content-accordion-section__sub-heading { color: #fff; }

.content-accordion-section__body {
    font-size:   0.9375rem;
    line-height: 1.6;
    color:       var(--color-primary-navy);
    opacity:     0.8;
    margin:      0;
}

.content-accordion-section--navy .content-accordion-section__body { color: rgba(255,255,255,0.75); }

/* ── Right column ────────────────────────────────────────────────────── */
.content-accordion-section__right {
    flex: 1;
    min-width: 0;
}

/* ── FAQ list ────────────────────────────────────────────────────────── */
.content-accordion-list,
.content-accordion-list .content-accordion-item {
    list-style: none;
    margin:     0;
    padding:    0;
}

.content-accordion-item {
    border-bottom: 1px solid rgba(0, 46, 71, 0.15);
}

.content-accordion-item:first-child { border-top: 1px solid rgba(0, 46, 71, 0.15); }

.content-accordion-section--navy .content-accordion-item,
.content-accordion-section--navy .content-accordion-item:first-child {
    border-color: rgba(255,255,255,0.15);
}

/* ── Trigger ─────────────────────────────────────────────────────────── */
.content-accordion-item__trigger {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    width:          100%;
    padding:        .75rem 0;
    background:     none;
    border:         none;
    cursor:         pointer;
    text-align:     left;
    font-family:    var(--font-primary);
    color:          inherit;
}

.content-accordion-item__number {
    font-size:   var(--text-body);
    font-weight: 400;
    color:       var(--color-primary-navy);
    flex-shrink: 0;
    min-width:   1.5rem;
}

.content-accordion-item__question {
    flex:        1;
    font-size:   var(--text-body);
    font-weight: 600;
    line-height: 1.4;
    color:       var(--color-primary-navy);
}

.content-accordion-section--navy .content-accordion-item__question { color: #fff; }

/* ── Toggle icon ─────────────────────────────────────────────────────── */
.content-accordion-item__toggle {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    width:           55px;
    height:          54px;
    margin-left:     auto;
    overflow:        visible;
}

.content-accordion-item__brand-mark {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
}

.content-accordion-item__icon {
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index:    1;
}

.content-accordion-item__icon--minus {
    opacity:   0;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.content-accordion-item--open .content-accordion-item__icon--plus {
    opacity:   0;
    transform: translate(-50%, -50%) rotate(90deg);
}
.content-accordion-item--open .content-accordion-item__icon--minus {
    opacity:   1;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* ── Answer panel ────────────────────────────────────────────────────── */
.content-accordion-item__answer {
    overflow:   hidden;
    max-height: 1000px;
    transition: max-height 0.4s ease;
}

.content-accordion-item__answer.is-closed {
    max-height: 0;
}

.content-accordion-item__answer-inner {
    padding:     0 1.5rem 1.25rem 2.25rem;
    font-size:   var(--text-body);
    line-height: 1.7;
    color:       var(--color-primary-navy);
    opacity:     0.85;
}

.content-accordion-section--navy .content-accordion-item__answer-inner { color: rgba(255,255,255,0.75); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media screen and (max-width: 900px) {
    .content-accordion-section .content-accordion-section__left,
    .content-accordion-section .content-accordion-section__right {
        flex:      unset;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    :root {
        --text-body: 1rem;
    }

    .stacked-columns-block {
        padding: 3rem 1.25rem;
    }

    .stacked-columns-block__heading {
        font-size: var(--text-h3);
    }

    .stacked-columns-block__header {
        margin-bottom: 2rem;
    }

    .sc-card__header {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.5rem;
    }

    .sc-card__body {
        font-size: 0.875rem;
    }

    .slb,
    .steps-block,
    .tabbed-content-section,
    .proof-section {
        padding: 3rem 1.25rem;
    }

    .content-accordion-section {
        padding: 3rem 1.25rem;
    }

    .content-accordion-section__inner {
        flex-direction: column;
        gap:            2.5rem;
    }

    .content-accordion-section__left {
        flex:      unset;
        max-width: 100%;
        position:  static;
    }

    .content-accordion-section__heading {
        font-size: var(--text-h3);
    }
}

/* ── Button centering on mobile ──────────────────────────────────────────── */

@media screen and (max-width: 768px) {
    .hero__actions,
    .hero__btn-group,
    .tabbed-content-section__ctas {
        justify-content: center !important;
        align-self: center !important;
    }
}


/* === REBRAND FOOTER === */


/* ── Footer shell ────────────────────────────────────────────────────────── */

.rebrand-footer {
    position:    relative;
    background:  var(--color-primary-navy);
    color:       rgba(255, 255, 255, 0.7);
    font-family: var(--font-primary);
    overflow:    hidden;
}

/* ── Watermark ───────────────────────────────────────────────────────────── */

.rebrand-footer__watermark {
    position:       absolute;
    bottom:         0;
    left:           50%;
    transform:      translateX(-50%) scale(0.8);
    width:          clamp(320px, 70%, 600px);
    height:         auto;
    opacity:        0;
    pointer-events: none;
    user-select:    none;
    z-index:        0;
    transition:     opacity 2.5s ease-out, transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.rebrand-footer__watermark.is-visible {
    opacity:   0.07;
    transform: translateX(-50%) scale(1);
}

/* ── Main area ───────────────────────────────────────────────────────────── */

.rebrand-footer__main {
    position: relative;
    padding:  4rem 0 3.5rem;
    padding-bottom: 0;
}

.rebrand-footer__inner {
    display:               grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap:                   3rem;
    align-items:           start;   
    position:              relative;
    z-index:               1;
}

/* ── Brand column ────────────────────────────────────────────────────────── */
.rebrand-footer__brand{
    display: flex;
    flex-direction: column;
}

/* Logo + tagline grouped side by side; stacks (tagline under logo) on mobile */
.rebrand-footer__brand-intro {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         1.25rem 2rem;
}

.rebrand-footer__brand-intro .rebrand-footer__logo-link {
    margin-bottom: 0;
}

.rebrand-footer__logo-link {
    display:       block;
    margin-bottom: 1.5rem;
}

.rebrand-footer__logo {
    display:   block;
    max-width: 200px;
    height:    auto;
}

.rebrand-footer__tagline {
    font-size:     var(--text-h3);
    font-weight:   400;
    line-height:   1.25;
    color:         #ffffff;
    margin:        0 0 1.5rem;
}

.rebrand-footer__cta {
    display: inline-flex;
    width: 150px;
}

/* ── Nav columns ─────────────────────────────────────────────────────────── */

.rebrand-footer__col-title {
    font-size:      var(--text-h5);
    font-weight:    700;
    color:          #ffffff;
    letter-spacing: 0.01em;
    margin:         0 0 1.25rem;
}

.rebrand-footer__links {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            0.7rem;
}

.rebrand-footer__links a {
    color:           rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size:       1rem;
    transition:      color 0.2s;
}

.rebrand-footer__links a:hover {
    color: #ffffff;
}

/* ── Contact ─────────────────────────────────────────────────────────────── */

.rebrand-footer__address {
    font-style:    normal;
    font-size:     1rem;
    line-height:   1.75;
    color:         rgba(255, 255, 255, 0.65);
    margin:        0 0 1.25rem;
}

.rebrand-footer__region {
    display:       block;
    color:         var(--color-primary-coral);
    font-weight:   600;
    font-size:     1rem;
    margin-bottom: 0.2rem;
    letter-spacing: 0.02em;
}

.rebrand-footer__contact-line {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    font-size:     1rem;
    margin-bottom: 0.6rem;
    color:         rgba(255, 255, 255, 0.65);
}

.rebrand-footer__contact-line a {
    color:           rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition:      color 0.2s;
}

.rebrand-footer__contact-line a:hover {
    color: #ffffff;
}

.rebrand-footer__contact-icon {
    flex-shrink: 0;
    opacity:     0.55;
}

/* ── Bottom bar ──────────────────────────────────────────────────────────── */

.rebrand-footer__bottom {
    text-align: center;
    padding:    3rem 1.25rem;
    position:   relative;
    z-index:    1;
}

.rebrand-footer__copy {
    font-size: 1rem;
    color:     rgba(255, 255, 255, 0.4);
    margin:    0;
}

/* ── Scroll to top ───────────────────────────────────────────────────────── */

.rebrand-footer__scroll-top {
    position:        fixed;
    bottom:          4rem;
    right:           9rem;
    width:           2.75rem;
    height:          2.75rem;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 1);
    border:          none;
    color:           var(--color-primary-navy);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    opacity:         0;
    transform:       translateY(0.5rem);
    transition:      opacity 0.3s, transform 0.3s, background 0.2s;
    z-index:         999;
}

.rebrand-footer__scroll-top.is-visible {
    opacity:   1;
    transform: translateY(0);
}

.rebrand-footer__scroll-top:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .rebrand-footer__brand {
        gap: 2.5rem;
    }
}

@media screen and (max-width: 1024px) and (min-width: 601px) {
    .rebrand-footer__nav-col,
    .rebrand-footer__contact {
        margin-left:  3rem;
    }

}

@media (max-width: 1024px) {
    .rebrand-footer__inner {
        grid-template-columns: repeat(3, 1fr);
        gap:                   3rem 3rem;
        max-width:             820px;
        margin-inline:         auto;
    }

    .rebrand-footer__brand {
        grid-column:     1 / -1;
        flex-direction:  column;
        align-items:     center;
        text-align:      center;
        gap:             1.5rem;
    }

    .rebrand-footer__brand-intro {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
        gap:            0.75rem;
    }

    .rebrand-footer__brand .rebrand-footer__logo-link { margin-bottom: 0; }
    .rebrand-footer__tagline { margin: 0; }
    .rebrand-footer__cta     { margin-left: 0; }

    
    .rebrand-footer__contact-line { justify-content: center; }
    .rebrand-footer__address      { text-align: center; }

    .rebrand-footer__nav-col:first-of-type,
    .rebrand-footer__contact {
        text-align: left;
    }
    .rebrand-footer__nav-col:first-of-type .rebrand-footer__links {
        align-items: flex-start;
    }
    .rebrand-footer__contact .rebrand-footer__contact-line {
        justify-content: flex-start;
    }
    .rebrand-footer__contact .rebrand-footer__address {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .rebrand-footer__inner {
        gap: 2.5rem 2rem;
    }

    .rebrand-footer__main {
        padding: 3.5rem 0 0;
    }
}

@media (max-width: 600px) {
    .rebrand-footer__inner {
        grid-template-columns: 1fr;
        gap:                   2.5rem;
    }

    .rebrand-footer__main {
        padding: 3rem 1.25rem 0;
    }

    .rebrand-footer__tagline {
        font-size: 1.25rem;
    }

    .rebrand-footer__bottom {
        padding:    1.25rem;
        text-align: center;
    }

    .rebrand-footer__scroll-top {
        bottom: 1.25rem;
        right:  1.25rem;
    }

    .rebrand-footer__brand,
    .rebrand-footer__nav-col,
    .rebrand-footer__contact {
        text-align:  center;
        align-items: center;
    }

    .rebrand-footer__brand {
        display:        flex;
        flex-direction: column;
        align-items:    center;
        gap:            1.25rem;
    }

    .rebrand-footer__brand-intro {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
        gap:            1rem;
    }

    .rebrand-footer__cta { margin-left: 0; }   
    .rebrand-footer__links {
        align-items: center;
    }

    .rebrand-footer__contact-line {
        justify-content: center;
    }

    .rebrand-footer__address {
        text-align: center;
    }

    .rebrand-footer__nav-col:first-of-type,
    .rebrand-footer__contact {
        text-align: center;
    }
    .rebrand-footer__nav-col:first-of-type .rebrand-footer__links {
        align-items: center;
    }
    .rebrand-footer__contact .rebrand-footer__contact-line {
        justify-content: center;
    }
    .rebrand-footer__contact .rebrand-footer__address {
        text-align: center;
    }
}

/* ── Split header ────────────────────────────────────────────────────── */

.stacked-columns-block__header--split {
    align-items: center !important;
}

.stacked-columns-block__header-body {
    display:     flex;
    align-items: center;
}

@media (max-width: 1090px) {
    .stacked-columns-block__header--split.columns {
        flex-direction: column !important;
    }
    .stacked-columns-block__header--split .column {
        width: 100% !important;
    }
    .stacked-columns-block__header-body {
        padding-top: 1.5rem;
    }
}

@media (max-width: 800px){
    .stacked-columns-block__header .stacked-columns-block__header-body{
            padding-bottom: 3rem;
        padding-top: 0;
    }
}

/* ── Cards band (two-zone background) ───────────────────────────────── */

.stacked-columns-block:has(.stacked-columns-block__cards-band) .section-tag-track{
    z-index: 2;
}

.stacked-columns-block__cards-band {
    padding: 3rem 0 4rem;
}

@media (max-width: 900px){
    .stacked-columns-block__cards-band{
        padding-top: 0rem;
    }
}

.stacked-columns-block__cards-band--navy  { background: transparent; }
.stacked-columns-block__cards-band--navy .stacked-columns-block__grid { background: #3483AC; padding: 2rem; }
.stacked-columns-block__cards-band--secondary-blue { background: transparent; }
.stacked-columns-block__cards-band--secondary-blue .stacked-columns-block__grid { background: var(--color-secondary-blue); padding: 2rem; }
.stacked-columns-block__cards-band--white { background: #ffffff; }

@media (max-width: 1024px){
    .stacked-columns-block__cards-band--navy .stacked-columns-block__grid { 
        padding: 1rem;
    }
}


@media (max-width: 600px){
    .stacked-columns-block__cards-band--navy .stacked-columns-block__grid{
        padding: .75rem;
    }
}


/* ── Pillar card ─────────────────────────────────────────────────────── */

.sc-card--pillar {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    height:         100%;
    padding:        .75rem;
}

.sc-card--pillar .sc-card__title { color: #ffffff; }
.sc-card--pillar .sc-card__body  { color: #ffffff; }

.sc-card__pillar-header {
    display:     flex;
    align-items: flex-end;
    gap:         .75rem;
    margin-bottom: 0.25rem;
}

.sc-card__pillar-header-text {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
}

.sc-card__pillar-header .sc-card__eyebrow,
.sc-card__pillar-header-text .sc-card__eyebrow {
    margin: 0;
}

.sc-card__icon-circle {
    width:           60px;
    height:          60px;
    border-radius:   50%;
    background:      transparent;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.sc-card__icon-circle img {
    width:      50px;
    height:     50px;
    object-fit: contain;
}

.sc-card__eyebrow {
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          #ffffff;
    margin:         0;
}

/* ── Stat card ───────────────────────────────────────────────────────── */

.sc-card--stat {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    padding:        2rem;
    height:         100%;
    background:     rgba(255, 255, 255, 0.16);
    box-shadow:     0 0 24px rgba(0, 0, 0, 0.13);
}

.sc-card__stat-row {
    display:     flex;
    align-items: baseline;
    gap:         0.25rem;
    line-height: 1;
}

.sc-card__number {
    font-size:   3rem;
    font-weight: 700;
    color:       #ffffff;
    line-height: 1;
}

.sc-card__unit {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--color-primary-coral);
    line-height: 1;
}

.sc-card__number-label {
    font-size:      1.2rem;
    font-weight:    500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          #ffffff;
    margin:         0;
}

.sc-card__coral-link {
    display:         inline-block;
    margin-top:      auto;
    padding-top:     0.75rem;
    font-size:       0.875rem;
    font-weight:     600;
    color:           var(--color-primary-coral);
    text-decoration: none;
    transition:      opacity 0.2s ease;
}

.sc-card__coral-link:hover { opacity: 0.8; }

/* ── Business case card ──────────────────────────────────────────────── */

.sc-card--business-case {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    padding:        1.75rem;
    height:         100%;
    background:     linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 100% );
    box-shadow:     0 0 24px rgba(0, 0, 0, 0.08);
}

.sc-card__cross-item,
.sc-card__tick-item {
    display:     flex;
    align-items: flex-start;
    gap:         0.5rem;
    font-size:   0.9rem;
    line-height: 1.5;
    margin:      0;
}

/* ── Hub grid (quadrant cards + centre badge) ───────────────────────── */
.stacked-columns-block__grid--hub {
    position: relative;
}
/* gap between the glass tiles via Bulma column padding */
.stacked-columns-block__grid--hub .stacked-columns-block__col {
    padding: 0.75rem;
}

.sc-card--hub {
    display:                 flex;
    flex-direction:          column;
    align-items:             center;
    justify-content:         center;
    text-align:              center;
    height:                  100%;
    padding:                 3.5rem 3rem;
    background:              rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter:         blur(20px);
}
.sc-card--hub .sc-card__hub-icon {
    width:         48px;
    height:        48px;
    margin-bottom: 1.25rem;
}
.sc-card--hub .sc-card__hub-icon img {
    width:      100%;
    height:     100%;
    object-fit: contain;
}
.sc-card--hub .sc-card__title { color: #ffffff; margin-bottom: 0.75rem; }
.sc-card--hub .sc-card__body  { color: rgba(255, 255, 255, 0.72); }

/* centre badge (uploaded circular image, overlaps the gap intersection) */
.stacked-columns-block__hub-badge {
    position:                absolute;
    top:                     50%;
    left:                    50%;
    transform:               translate(-50%, -50%);
    z-index:                 3;
    display:                 flex;
    align-items:             center;
    justify-content:         center;
    width:                   100px;
    height:                  100px;
    padding:                 .75rem;
    border-radius:           50%;
    background:              rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter:         blur(20px);
}
.stacked-columns-block__hub-badge img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: contain;
}

@media (max-width: 900px){
    .stacked-columns-block__hub-badge { display: none; }
}

@media (max-width: 768px) {
    .stacked-columns-block__grid--hub .sc-card--hub {
        padding: 2.5rem 1.5rem;
    }
}

.sc-card__cross-item svg,
.sc-card__tick-item svg {
    flex-shrink: 0;
    margin-top:  0.1rem;
}

/* ── Shared tag chip (pillar + business case) ────────────────────────── */

.sc-card__tag {
    display:         inline-flex;
    align-items:     center;
    padding:         0.35rem 0.875rem;
    border-radius:   2rem;
    font-size:       0.8125rem;
    font-weight:     400;
    text-decoration: none;
    background:      rgba(255, 255, 255, 0.1);
    color:           rgba(255, 255, 255, 0.85);
    transition:      background 0.2s ease;
}

a.sc-card__tag:hover { background: rgba(255, 255, 255, 0.18); }

.sc-card__tag--navy {
    gap:        0.5rem;
    padding:    0.3rem 1rem 0.3rem 0.3rem;   
    background: var(--color-primary-navy);
    color:      #ffffff;
}

a.sc-card__tag--navy:hover { background: #013a5a; }

/* Up-arrow icon in a circle inside the navy tag chip */
.sc-card__tag-arrow {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           1.5rem;
    height:          1.5rem;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 1);
    color:           var(--color-primary-navy);
    flex-shrink:     0;
}

/* ── Comparison layout ───────────────────────────────────────────────── */
.stacked-columns-block:has(.sc-comparison){
    position: relative;
}

.stacked-columns-block:has(.sc-comparison)::before,
.stacked-columns-block:has(.sc-comparison)::after {
    content:                 '';
    position:                absolute;
    top:                     var(--sc-comparison-top, 35%);
    width:                   calc(50% - 12px);
    height:                  calc(100% - var(--sc-comparison-top, 35%));
    z-index:                 1;
    backdrop-filter:         blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.stacked-columns-block:has(.sc-comparison)::before {
    left:       0;
    background: linear-gradient(-45deg, rgba(197, 207, 234, 0) 0%, rgba(197, 207, 234, 0.8) 52%);
    border-right: 2px solid rgba(255, 255, 255, .2);
}

.stacked-columns-block:has(.sc-comparison)::after {
    right:      0;
    background: linear-gradient(-45deg, rgba(197, 207, 234, 0) 0%, rgba(197, 207, 234, 0.8) 52%);
    border-left: 2px solid rgba(255, 255, 255, .2);
}

.sc-comparison {
    position:      relative;
    z-index:       2;
    border-radius: 0;
    overflow:      visible;
    border:        none;
}

.sc-comparison__ellipse {
    position:       absolute;
    width:          500px;
    height:         250px;
    top:            50%;
    transform:      translate(-50%, -50%);
    border-radius:  50%;
    z-index:        0;
    pointer-events: none;
    filter:         blur(60px);
}

.sc-comparison__ellipse--before {
    left:       20%;
    background: linear-gradient(135deg, #002E47 0%, #1E6083 56%, #3E96C4 100%);
}

.sc-comparison__ellipse--after {
    left:       80%;
    background: linear-gradient(135deg, #FF7878 0%, #E96261 49%, #C74847 100%);
}

.stacked-columns-block.stacked-columns-block--no-bottom-padding {
    padding-bottom: 0 !important;
}

.stacked-columns-block.stacked-columns-block--no-bottom-padding .stacked-columns-block__cards-band {
    padding-bottom: 0 !important;
}

.sc-comparison__col-headers {
    display:        grid;
    grid-template-columns: 1fr 1fr;
}

.sc-comparison__col-header {
    padding:     1rem 1.5rem;
    font-size:   var(--text-h3);
    font-weight: 500;
}

.sc-comparison__col-header--before { color: var(--color-primary-navy); }
.sc-comparison__col-header--after  { color: var(--color-primary-coral); }

.sc-comparison__row {
    display:     grid;
    grid-template-columns: 1fr 1fr;
}

.sc-comparison__item {
    display:     flex;
    align-items: center;
    gap:         0.875rem;
    padding:     1rem 1.5rem;
}

.sc-comparison__item--before {
    border-right: none;
}

.sc-comparison__icon {
    width:        36px;
    height:       36px;
    flex-shrink:  0;
    display:      flex;
    align-items:  center;
    justify-content: center;
    opacity:      0.7;
}

.sc-comparison__icon img {
    width:      32px;
    height:     32px;
    object-fit: contain;
}

.sc-comparison__content {
    flex: 1;
    min-width: 0;
}

.sc-comparison__label {
    display:        block;
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          rgba(0, 46, 71, 0.45);
    margin-bottom:  0.2rem;
}

.sc-comparison__text {
    font-size:   1rem;
    line-height: 1.45;
    color:       var(--color-primary-navy);
    margin:      0;
}

.sc-comparison__badge {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}


.sc-comparison .sc-comparison__item .sc-comparison__label { color: var(--color-secondary-blue); }
.sc-comparison .sc-comparison__item .sc-comparison__text  { color: var(--color-primary-navy); }

.sc--gradient-navy .sc-comparison__label,
.stacked-columns-block__cards-band--navy .sc-comparison__label {
    color: rgba(255, 255, 255, 0.45);
}

.sc--gradient-navy .sc-comparison__text,
.stacked-columns-block__cards-band--navy .sc-comparison__text {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px){
    .sc-comparison .sc-comparison__col-headers,
    .sc-comparison .sc-comparison__row{
        gap: 1.5rem;
    }

    .stacked-columns-block.stacked-columns-block--no-bottom-padding .stacked-columns-block__cards-band {
        margin-top:     1.5rem;
    }
}

@media (max-width: 900px){
    .stacked-columns-block:has(.sc-comparison)::before,
    .stacked-columns-block:has(.sc-comparison)::after{
        width: 100%;
    }

    .sc-comparison__ellipse{
        z-index: 1;

    }

    .sc-comparison__ellipse--before{
        top: 25%;
        left: 50%;
    }

    .sc-comparison__ellipse--after{
        top: 75%;
        left: 50%;
    }
}

/* ── Footer columns ──────────────────────────────────────────────────── */

.sc-footer-columns {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.5rem;
    margin:                0;
    padding:               2.5rem 0 0;
}

.sc-footer-col {
    margin: 0;
}

.sc--gradient-light .sc-footer-col,
.sc--gradient-light_arc .sc-footer-col {
    padding:    2rem 2.25rem;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 100% );
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .sc-footer-columns { grid-template-columns: 1fr; }
}

.sc-footer-col__heading {
    font-size:   1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.sc-footer-col__body {
    font-size:   0.9375rem;
    line-height: 1.7;
}

.sc-footer-columns--statement {
    display:               flex;
    flex-direction:        column;
    grid-template-columns: none;
    gap:                   1.25rem;
    width:                 100%;
}
.sc-footer-columns--statement .sc-footer-col,
.sc--gradient-light .sc-footer-columns--statement .sc-footer-col,
.sc--gradient-light_arc .sc-footer-columns--statement .sc-footer-col {
    display:               grid;
    grid-template-columns: minmax(200px, 34%) 1fr;
    align-items:           start;
    gap:                   0;
    padding:               1.5rem 3rem;
    background:            linear-gradient(135deg, #3483AC 0%, #002E47 100%);
    box-shadow:            0 0 24px rgba(0, 0, 0, 0.13);
}

.sc-footer-columns--statement .sc-footer-col__heading {
    margin:        0;
    padding-right: 3rem;
    font-family:   var(--font-primary);
    font-size:     var(--text-h5);
    font-weight:   700;
    line-height:   1.3;
    color:         #ffffff;
}
.sc-footer-columns--statement .sc-footer-col__body {
    margin:       0;
    padding-left: 3rem;
    border-left:  1px solid rgba(255, 255, 255, 0.18);
    font-family:  var(--font-primary);
    font-size:    0.95rem;
    line-height:  1.6;
    color:        rgba(255, 255, 255, 0.8);
}
.sc-footer-columns--statement .sc-footer-col__body p { margin: 0; }

@media (max-width: 768px) {
    .sc-footer-columns--statement .sc-footer-col,
    .sc--gradient-light .sc-footer-columns--statement .sc-footer-col,
    .sc--gradient-light_arc .sc-footer-columns--statement .sc-footer-col {
        grid-template-columns: 1fr;
        padding:               1.5rem;
    }
    .sc-footer-columns--statement .sc-footer-col__heading { padding-right: 0; margin-bottom: 1rem; }
    .sc-footer-columns--statement .sc-footer-col__body {
        border-left:  none;
        padding-left: 0;
        border-top:   1px solid rgba(255, 255, 255, 0.18);
        padding-top:  1rem;
    }
}

.sc-footer-columns--steps {
    display:               flex;
    flex-direction:        column;
    grid-template-columns: none;
    gap:                   1rem;
    width:                 100%;
}
.sc-footer-columns--steps .sc-footer-col,
.sc--gradient-light .sc-footer-columns--steps .sc-footer-col,
.sc--gradient-light_arc .sc-footer-columns--steps .sc-footer-col {
    display:               grid;
    grid-template-columns: auto 1fr;
    column-gap:            1.5rem;
    align-items:           center;
    padding:               3rem 1.5rem;
    box-shadow:            none;
}

.sc--gradient-light .sc-footer-columns--steps .sc-footer-col:nth-child(odd),
.sc--gradient-light_arc .sc-footer-columns--steps .sc-footer-col:nth-child(odd),
.sc-footer-columns--steps .sc-footer-col:nth-child(odd) {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 104, 103, 0.13) 100%);
}
.sc--gradient-light .sc-footer-columns--steps .sc-footer-col:nth-child(even),
.sc--gradient-light_arc .sc-footer-columns--steps .sc-footer-col:nth-child(even),
.sc-footer-columns--steps .sc-footer-col:nth-child(even) {
    background:   linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(52, 131, 172, 0.15) 100%);
    margin-left:  12%;
}
.sc-footer-columns--steps .sc-footer-col__num {
    grid-column:     1;
    grid-row:        1 / span 2;
    align-self:      center;
    width:           48px;
    height:          48px;
    border-radius:   50%;
    background:      var(--color-primary-coral);
    color:           #ffffff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-primary);
    font-weight:     700;
    font-size:       1rem;
}
.sc-footer-columns--steps .sc-footer-col__heading {
    grid-column: 2;
    grid-row:    1;
    margin:      0 0 0.25rem;
    font-size:   var(--text-h5);
    font-weight: 700;
    color:       var(--color-primary-navy);
}
.sc-footer-columns--steps .sc-footer-col__body {
    grid-column: 2;
    grid-row:    2;
    font-size:   0.9rem;
    line-height: 1.55;
    color:       var(--color-primary-navy);
    opacity:     0.8;
}
@media (max-width: 768px) {
    .sc-footer-columns--steps .sc-footer-col:nth-child(even),
    .sc--gradient-light .sc-footer-columns--steps .sc-footer-col:nth-child(even),
    .sc--gradient-light_arc .sc-footer-columns--steps .sc-footer-col:nth-child(even) { margin-left: 0; }

    .sc--gradient-light .sc-footer-columns--steps .sc-footer-col,
    .sc--gradient-light_arc .sc-footer-columns--steps .sc-footer-col {
        grid-template-columns: 1fr;
        justify-items:         center;
        text-align:            center;
        gap:                   0.85rem 0;
        padding:               2.25rem 1.5rem;
    }
    .sc-footer-columns--steps .sc-footer-col__num {
        grid-column: 1;
        grid-row:    auto;
    }
    .sc-footer-columns--steps .sc-footer-col__heading,
    .sc-footer-columns--steps .sc-footer-col__body {
        grid-column: 1;
        grid-row:    auto;
    }

}

@media (max-width: 768px){
    .sc-footer-col{
        flex-direction: column;
        display: flex;
        text-align: left;
        justify-content: flex-start;
        gap: .75rem;
    }
}

.sc-footer-note {
    margin-top:  1.75rem;
    font-family: var(--font-primary);
    font-size:   0.85rem;
    line-height: 1.55;
    color:       var(--color-primary-navy);
    opacity:     0.8;
}

.sc-footer-columns--panels {
    grid-template-columns: 6fr 4fr;
    gap:                   0;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.13);
}
@media (max-width: 768px) {
    .sc-footer-columns--panels { grid-template-columns: 1fr; }
}

.sc-footer-columns--panels .sc-footer-col {
    display:        flex;
    flex-direction: column;
    background:     rgba(255, 255, 255, 0.16);
    padding:        2rem 2.25rem;
    position:       relative;
}

.sc-footer-columns--panels .sc-footer-col__heading {
    order:  2;
    margin: 1.25rem 0 0;
}

.sc-footer-columns--panels .sc-footer-col:first-child{
    justify-content: center;

    .sc-footer-col__heading{
        font-weight: 500;
        color: var(--color-primary-coral);
    }
}

.sc-footer-columns--panels .sc-footer-col:last-child{
    position: relative;
}

.sc-footer-columns--panels .sc-footer-col:last-child::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 0;
    width: 1px;
    height: 80%;
    background: rgba(255, 255, 255, 0.16);
}


.sc-footer-columns--panels .sc-footer-col__body :is( h2, h3, h4 ) {
    font-size:   clamp( 2rem, 4vw, 3rem );
    font-weight: 700;
    line-height: 1.05;
    color:       #ffffff;
    margin:      1.5rem 0 0.25rem;
}
.sc-footer-columns--panels .sc-footer-col__body :is( h2, h3, h4 ):first-child {
    margin-top: 0;
}

.sc-footer-columns--panels .sc-footer-col__body p {
    margin: 0 0 1rem;
    color:  rgba(255, 255, 255, 1);
}
.sc-footer-columns--panels .sc-footer-col__body p:last-child { margin-bottom: 0; }


.sc-footer-columns--panels .sc-footer-col__body a {
    color:           var(--color-primary-coral);
    font-weight:     600;
    text-decoration: none;
}
.sc-footer-columns--panels .sc-footer-col__body a:hover { text-decoration: underline; }

.sc-footer-col__metrics {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}

.sc-footer-col__metric {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.sc-footer-col__metric-value {
    font-size:   clamp( 2rem, 4vw, 3rem );
    font-weight: 700;
    line-height: 1.05;
    color:       #ffffff;
}

.sc-metric-arrow {
    color:   var(--color-primary-coral);
    padding: 0 0.15em;
}

.sc-footer-col__metric-caption {
    font-size:   0.9375rem;
    line-height: 1.5;
    color:       rgba(255, 255, 255, 1);
}


/* === SOLUTIONS BRANDS (logo strip — new look) ============================= */
.solutions-brands-section--bg-gradient-light { background: linear-gradient(to  right, #f4e6e9 0%, #CBDFEB 20%);}
.solutions-brands-section--bg-navy           { background: var(--color-primary-navy); }
.solutions-brands-section--bg-white          { background: #ffffff; }

.solutions-brands-section--logos{
    padding: 1.5rem 0; 
}

.solutions-brands-section--split{
    padding: 3rem 0;
}

.solutions-brands-section__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            2rem;
}

/* Split layout: heading left, logos right */
.solutions-brands-section--split .solutions-brands-section__inner {
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
    gap:             3rem;
}

.solutions-brands-section__text {
    flex:        0 0 30%;
    max-width:   30%;
    margin:      0;
    font-family: var(--font-primary);
    font-size:   1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color:       var(--color-primary-navy);
}
.solutions-brands-section--bg-navy .solutions-brands-section__text { color: #ffffff; }

.solutions-brands-section__logos {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
}

.solutions-brands-section--split .solutions-brands-section__logos {
    flex:            1;
    justify-content: flex-end;
}

/* Slider variant: owl-carousel controls the layout, so drop the flex row */
.solutions-brands-section__logos--slider {
    display: block;
    width:   100%;
}

.solutions-brands-section--split .solutions-brands-section__logos--slider {
    flex:      0 0 70%;
    max-width: 70%;
    min-width: 0;
}
.solutions-brands-section__logos--slider .solutions-brands-section__logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      60px;
    padding-inline:  1.75rem;
    box-sizing:      border-box;
}

.solutions-brands-section__logos--slider .owl-item > div {
    min-height: 60px !important;
}

.solutions-brands-section__logos--slider .owl-item img,
.solutions-brands-section__logos--slider .solutions-brands-section__logo img {
    width:      auto !important;
    max-width:  100%;
    max-height: 44px;
    margin:     0 auto;
}

.solutions-brands-section__logo img {
    display:    block;
    max-height: 44px;
    width:      auto;
    filter:     grayscale(100%);
    opacity:    0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.solutions-brands-section__logo:hover img {
    filter:  grayscale(0);
    opacity: 1;
}

@media (max-width: 1024px) {
    .solutions-brands-section--split .solutions-brands-section__inner {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
        gap:            2rem;
    }
    .solutions-brands-section--split .solutions-brands-section__logos {
        justify-content: center;
    }
    .solutions-brands-section__logo img { max-height: 36px; }

    .solutions-brands-section__text,
    .solutions-brands-section--split .solutions-brands-section__logos--slider {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 1025px) {
    .sc-comparison__row,
    .sc-comparison__col-headers{
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .sc-comparison {
        display:        flex;
        flex-direction: column;
        gap:            0.5rem;
    }
    .sc-comparison__col-headers,
    .sc-comparison__row {
        display: contents;
    }
    .sc-comparison__col-header--before { order: 1; }
    .sc-comparison__item--before       { order: 2; }
    .sc-comparison__col-header--after  { order: 3; margin-top: 1.5rem; }
    .sc-comparison__item--after        { order: 4; }

    .sc-comparison__item--before {
        border-right:  none;
        border-bottom: none;
    }
    .sc-card--pillar,
    .sc-card--stat,
    .sc-card--business-case {
        padding: 1.5rem 1.25rem;
    }
}

@media (max-width: 768px){
    .sc-card--pillar,
    .sc-card--stat,
    .sc-card--business-case,
    .sc-footer-columns--panels .sc-footer-col:first-child,
    .sc-footer-columns--panels .sc-footer-col:last-child {
        padding: 1rem;
    }

    .sc-card--pillar{
        padding: 0;
    }

    .stacked-columns-block__col:has(.sc-card--pillar) .sc-card--pillar .sc-card__footer{
        padding-top: 0rem;
        border-top: none;
        margin: 1rem 0rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #fff;
    }
}


/* ── Section wrapper ─────────────────────────────────────────────────── */

.pillars {
    overflow: hidden;
    position: relative;
}

/* ── Top header area ─────────────────────────────────────────────────── */

.pillars__top {
    padding: 5rem 0 4rem;
}

.pillars--top-white .pillars__top    { background: #ffffff; }
.pillars--top-light .pillars__top    { background: var(--color-bg-light, #f4f5f8); }
.pillars--top-gradient .pillars__top {
    background: linear-gradient(135deg, #fff9f8 0%, #f5f7ff 100%);
}

.pillars__header {
    align-items: flex-start !important;
}

.pillars__header-right {
    display: flex;
    align-items: center;
}

.pillars__body {
    color: var(--color-primary-navy);
    font-size: 1rem;
    line-height: 1.75;
}

.pillars__body p          { margin-bottom: 1rem; }
.pillars__body p:last-child { margin-bottom: 0; }

/* ── Cards section ───────────────────────────────────────────────────── */

.pillars__cards-section {
    padding: 0 0 4rem;
}

/* Grid uses 1px gap + matching bg on grid = divider lines */
.pillars__grid {
    display: grid;
}

.pillars__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pillars__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pillars__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.pillars--cards-navy .pillars__cards-section { background: var(--color-primary-navy); }
.pillars--cards-navy .pillars__grid          { gap: 1px; background: rgba(255, 255, 255, 0.12); }
.pillars--cards-navy .pillars__card          { background: var(--color-primary-navy); }


.pillars--cards-white .pillars__cards-section { background: #ffffff; }
.pillars--cards-white .pillars__grid          { gap: 1px; background: rgba(0, 46, 71, 0.1); }
.pillars--cards-white .pillars__card          { background: #ffffff; }

/* ── Individual card ─────────────────────────────────────────────────── */

.pillars__card {
    padding:        2.5rem;
    display:        flex;
    flex-direction: column;
    gap:            0.875rem;
}

.pillars__card-icon {
    width:           56px;
    height:          56px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    margin-bottom:   0.25rem;
}

.pillars--cards-navy .pillars__card-icon  { background: rgba(255, 255, 255, 0.08); }
.pillars--cards-white .pillars__card-icon { background: rgba(0, 46, 71, 0.06); }

.pillars__card-icon img {
    width:      32px;
    height:     32px;
    object-fit: contain;
}


.pillars__card-eyebrow {
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-primary-coral);
    margin:         0;
}


.pillars__card-heading {
    font-size:   1.125rem;
    font-weight: 700;
    line-height: 1.35;
    margin:      0;
}

.pillars--cards-navy .pillars__card-heading  { color: #ffffff; }
.pillars--cards-white .pillars__card-heading { color: var(--color-primary-navy); }


.pillars__card-body {
    font-size:   0.9375rem;
    line-height: 1.65;
    flex:        1;
    margin:      0;
}

.pillars--cards-navy .pillars__card-body  { color: rgba(255, 255, 255, 0.72); }
.pillars--cards-white .pillars__card-body { color: rgba(0, 46, 71, 0.72); }

.pillars__card-body p          { margin-bottom: 0.5rem; }
.pillars__card-body p:last-child { margin-bottom: 0; }


.pillars__card-footer {
    margin-top: auto;
    padding-top: 0.75rem;
}

.pillars__card-tag {
    display:         inline-flex;
    align-items:     center;
    padding:         0.35rem 0.875rem;
    border-radius:   2rem;
    font-size:       0.8125rem;
    font-weight:     500;
    text-decoration: none;
    transition:      background 0.2s ease, color 0.2s ease;
}

.pillars--cards-navy .pillars__card-tag {
    background: rgba(255, 255, 255, 0.1);
    color:      rgba(255, 255, 255, 0.85);
}

.pillars--cards-navy a.pillars__card-tag:hover {
    background: rgba(255, 255, 255, 0.18);
    color:      #ffffff;
}

.pillars--cards-white .pillars__card-tag {
    background: rgba(0, 46, 71, 0.07);
    color:      var(--color-primary-navy);
}

.pillars--cards-white a.pillars__card-tag:hover {
    background: rgba(0, 46, 71, 0.14);
}

/* ── Tablet / Mobile ─────────────────────────────────────────────────── */
@media (max-width: 1090px) {
    .pillars__header.columns {
        flex-direction: column !important;
    }

    .pillars__header-left,
    .pillars__header-right {
        width: 100% !important;
    }

    .pillars__header-right {
        padding-top: 1.5rem;
    }
}

@media (max-width: 768px) {
    .pillars__top {
        padding: 3rem 0 2.5rem;
    }

    .pillars__cards-section {
        padding-bottom: 2.5rem;
    }

    .pillars__grid--cols-2,
    .pillars__grid--cols-3,
    .pillars__grid--cols-4 {
        grid-template-columns: 1fr;
    }

    .pillars__card {
        padding: 2rem 1.25rem;
    }
}

/* === LATEST BLOGS SECTION (new look) ================================== */
.content-latest-blogs-section {
    padding: 5rem 0;
}

.content-latest-blogs-section--gradient-light {
    background: linear-gradient(to top left, #FFE1E1 0%, #C5CFEA 51%, #9BBBCE 100%);
    color:      var(--color-primary-navy);
}
.content-latest-blogs-section--white {
    background: #fff;
    color:      var(--color-primary-navy);
}
.content-latest-blogs-section--navy {
    background: var(--color-primary-navy);
    color:      #fff;
}

.content-latest-blogs-section__inner {
    display: flex;
    flex-direction: column;
    gap:     3rem;
}

.content-latest-blogs-section__header {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

/* ── Grid ────────────────────────────────────────────────────────────── */
.content-latest-blogs-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.content-latest-blogs-card {
    display:         flex;
    flex-direction:  column;
    height:          100%;
    text-decoration: none;
    color:           inherit;
}

.content-latest-blogs-card__media {
    position:      relative;
    overflow:      hidden;
    aspect-ratio:  4 / 3;
    margin-bottom: 1.25rem;
}

.content-latest-blogs-card__image {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 300ms ease;
}
.content-latest-blogs-card:hover .content-latest-blogs-card__image {
    transform: scale(1.04);
}

.content-latest-blogs-card__tab {
    position:    absolute;
    top:         0;
    right:       0;
    width:       28px;
    height:      28px;
    background:  var(--color-secondary-yellow);
    clip-path:   polygon(100% 0, 0 0, 100% 100%);
}

.content-latest-blogs-card__body {
    display:        flex;
    flex-direction: column;
    flex:           1 1 auto; 
}

.content-latest-blogs-card__date {
    margin:      0 0 0.35rem;
    font-family: var(--font-primary);
    font-size:   0.875rem;
    font-weight: 500;
    color:       rgba(0, 0, 0, .5);
}

.content-latest-blogs-card__title {
    margin:      0 0 0.6rem;
    font-family: var(--font-primary);
    font-size:   1.25rem;
    font-weight: 700;
    line-height: 1.35;
    color:       var(--color-primary-navy);
    display:             -webkit-box;
    -webkit-line-clamp:  2;
    -webkit-box-orient:  vertical;
    overflow:            hidden;
}
.content-latest-blogs-section--navy .content-latest-blogs-card__title { color: #fff; }

.content-latest-blogs-card__excerpt {
    margin:      0 0 1rem;
    font-family: var(--font-primary);
    font-size:   0.9375rem;
    line-height: 1.6;
    color:       rgba(0, 46, 71, 0.65);
    display:             -webkit-box;
    -webkit-line-clamp:  2;
    -webkit-box-orient:  vertical;
    overflow:            hidden;
}
.content-latest-blogs-section--navy .content-latest-blogs-card__excerpt { color: rgba(255, 255, 255, 0.7); }

.content-latest-blogs-card__read-more {
    display:     inline-flex;
    align-items: center;
    gap:         0.75rem;
    margin-top:  auto;
    font-family: var(--font-primary);
    font-size:   0.9375rem;
    font-weight: 700;
    color:       var(--color-primary-navy);
    border-top: 1px solid rgba(0, 0, 0, .2);
    padding-top: .75rem;
}
.content-latest-blogs-section--navy .content-latest-blogs-card__read-more { color: #fff; }

.content-latest-blogs-card__arrow {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    width:            28px;
    height:           28px;
    border-radius:    50%;
    background-color: var(--color-primary-coral);
    color:            #fff;
    transition:       transform 180ms ease;
}
.content-latest-blogs-card:hover .content-latest-blogs-card__arrow {
    transform: scale(1.1);
}

@media (max-width: 1024px) {
    .content-latest-blogs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .content-latest-blogs-section {
        padding: 3rem 1.25rem;
    }
    .content-latest-blogs-grid {
        grid-template-columns: 1fr;
    }
}

/* === NEWSLETTER SIGNUP SECTION ========================================= */

.content-newsletter-section {
    padding: 4rem 0;
}

.content-newsletter-section--coral-gradient {
    background: var(--color-coral-gradient);
    color:      #fff;
}
.content-newsletter-section--navy {
    background: var(--color-primary-navy);
    color:      #fff;
}

.content-newsletter-section__inner {
    display:        flex;
    flex-direction: column;
    gap:            1.75rem;
}

.content-newsletter-section__header {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    margin-bottom:  3rem;
}

.content-newsletter-section__heading-col {
    display:        flex;
    flex-direction: column;
    width:          50%;
}

.content-newsletter-section__body {
    max-width:   32rem;
    margin:      0;
    margin-top:  0.5rem; 
    font-family: var(--font-primary);
    font-size:   1rem;
    line-height: 1.6;
    color:       rgba(255, 255, 255, 0.85);

    @media (minwidth: 768px) {
        flex:        1 1 320px;
    }
}

.content-newsletter-section__form {
    width: 100%;
}

/* ── HubSpot form reskin ─────────────────────────────────────────────── */
.content-newsletter-hbspt .hs-form {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     flex-start;
    gap:             1rem;
}

.content-newsletter-hbspt .hs-form-field {
    flex:       1 1 200px;
    min-width:  180px;
    max-width:  none !important; 
    margin:     0 !important;

    @media (max-width: 600px) {
        flex:       1 1 100%;
    }
}

.content-newsletter-hbspt .hs-form-field .input {
    width:  100% !important;
    margin: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0px;
}

.content-newsletter-hbspt .hs-form-field > label {
    position: absolute !important;
    width:    1px !important;
    height:   1px !important;
    overflow: hidden !important;
    clip:     rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.content-newsletter-hbspt input[type="text"],
.content-newsletter-hbspt input[type="email"],
.content-newsletter-hbspt input[type="tel"],
.content-newsletter-hbspt .hs-input {
    display:          block;
    width:            100% !important;
    height:           auto !important;
    box-sizing:       border-box;
    padding:          0.95rem 1.1rem !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    background-image: none !important;
    border:           1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow:       none !important;
    font-family:      var(--font-primary);
    font-size:        0.9375rem;
    line-height:      1.3;
    color:            #fff !important;
    -webkit-appearance: none;
    appearance:       none;
}
.content-newsletter-hbspt input::placeholder {
    color:   rgba(255, 255, 255, 0.8);
    opacity: 1;
}

.content-newsletter-hbspt .hs-error-msgs {
    margin:    1rem 0.75rem 0;
    padding:   0;
    list-style: none;
}
.content-newsletter-hbspt .hs-error-msgs label {
    position: static !important;
    width:    auto !important;
    height:   auto !important;
    clip:     auto !important;
    font-size: 0.8rem;
    color: #fff;
    background: rgba(255, 224, 0, .24);
    padding:    0.2rem 0.5rem;
    border-radius: 4px;
    display:    inline-block;
}

.content-newsletter-hbspt .hs_submit,
.content-newsletter-hbspt .hs-submit {
    flex:      0 0 auto;
    margin:    0 !important;
}
.content-newsletter-hbspt .actions {
    margin: 0 !important;
    padding: 0 !important;
}

.content-newsletter-hbspt input[type="submit"],
.content-newsletter-hbspt .hs-button {
    display:          inline-flex;
    align-items:      center;
    white-space:      nowrap;
    padding:          0.9rem 1.75rem !important;
    background-color: var(--color-primary-navy) !important;
    color:            #fff !important;
    border:           none !important;
    border-radius:    999px !important;
    font-family:      var(--font-primary);
    font-size:        0.9375rem;
    font-weight:      700;
    cursor:           pointer;
    transition:       background-color 180ms ease;
    margin-top:       -.5rem;
}
.content-newsletter-hbspt input[type="submit"]:hover,
.content-newsletter-hbspt .hs-button:hover {
    background-color: #001c2d !important;
}

@media (max-width: 900px) {
    .content-newsletter-section__header {
        flex-direction: column;
    }

    .content-newsletter-section__body {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .content-newsletter-section__header {
        align-items: unset;
    }

    .content-newsletter-hbspt .hs-form{
        gap: 3rem;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .content-newsletter-section {
        padding: 3rem 1.25rem;
    }
    .content-newsletter-hbspt .hs-form {
        flex-direction: column;
        align-items:    stretch;
    }
    .content-newsletter-hbspt .hs_submit,
    .content-newsletter-hbspt .hs-submit {
        width: 100%;
    }
    .content-newsletter-hbspt input[type="submit"],
    .content-newsletter-hbspt .hs-button {
        width:           100%;
        justify-content: center;
    }
}