```css
/*
================================================================
  FORTEIA — Branding Overrides
  File    : forteia-overrides.css
  Version : 1.3
  Date    : May 2026

  PURPOSE
  -------
  Overrides Haswell theme defaults with FORTEIA brand colours.
  Load this file after Haswell style.css.
================================================================
*/
/* 1. HEADER BACKGROUND */
.grey-dark-bg,
.header.no-transparent .header-wrapper.grey-dark-bg,
.header-wrapper,
.header.no-transparent .header-wrapper {
    background-color: #1a3d2b !important;
}


/* 2. STICKY / SCROLLED HEADER */

.affix .header-wrapper,
.affix.header .header-wrapper,
.is-sticky .header-wrapper {
    background: #1a3d2b !important;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .25) !important;
}


/* 3. SUB-MENU PANEL BACKGROUNDS */

#main-menu .sub,
#main-menu .parent .sub,
#main-menu .parent:hover .sub,
#main-menu .megamenu > .sub,
#header-left #main-menu .sub,
#header-left #main-menu .parent .sub,
#header-left #main-menu .parent:hover .sub {
    background: #1a3d2b !important;
}


/* 4. DESKTOP MEGA-MENU CLEANUP */

@media (min-width: 1025px) {

    #main-menu .megamenu > .sub,
    #main-menu .megamenu > .sub .clearfix,
    #main-menu .megamenu > .sub .menu-sub-container {
        background: #1a3d2b !important;
    }

        #main-menu .megamenu > .sub ul,
        #main-menu .megamenu > .sub li {
            background: transparent !important;
        }

            #main-menu .megamenu > .sub li a {
                color: rgba(255, 255, 255, .85) !important;
            }

            #main-menu .megamenu > .sub li:hover,
            #main-menu .megamenu > .sub li:hover > a {
                background: transparent !important;
                color: #ffffff !important;
            }
}


/* 5. MOBILE / TABLET MENU BACKGROUND */

@media (max-width: 1024px) {

    .main-menu-container {
        background-color: #1a3d2b !important;
    }

    #main-menu .navbar .nav > li > a {
        color: rgba(255, 255, 255, .85) !important;
        border: none !important;
    }

    #main-menu .navbar .nav > li.current > a,
    #main-menu .navbar .nav > li:hover > a {
        color: #ffffff !important;
    }

    .hamb-mob-icon {
        color: #ffffff !important;
    }

    #main-menu .sub,
    #main-menu .parent .sub,
    #main-menu .parent:hover .sub,
    #main-menu .megamenu > .sub {
        background: #1a3d2b !important;
    }

        /* Third level and deeper: fixes grey mobile band */
        #main-menu .sub .sub,
        #main-menu .sub .sub .sub,
        #main-menu .navbar .nav li ul li ul,
        #main-menu .navbar .nav li ul li ul li ul {
            background: #143221 !important;
        }

            #main-menu .sub .sub li,
            #main-menu .sub .sub .sub li,
            #main-menu .navbar .nav li ul li ul li,
            #main-menu .navbar .nav li ul li ul li ul li {
                background: #143221 !important;
            }

                #main-menu .sub li a,
                #main-menu .sub .sub li a,
                #main-menu .sub .sub .sub li a,
                #main-menu .navbar .nav li ul li a,
                #main-menu .navbar .nav li ul li ul li a,
                #main-menu .navbar .nav li ul li ul li ul li a {
                    color: rgba(255, 255, 255, .85) !important;
                }

                #main-menu .sub li:hover,
                #main-menu .sub .sub li:hover,
                #main-menu .sub .sub .sub li:hover,
                #main-menu .navbar .nav li ul li:hover,
                #main-menu .navbar .nav li ul li ul li:hover,
                #main-menu .navbar .nav li ul li ul li ul li:hover {
                    background: #1a3d2b !important;
                }

                    #main-menu .sub li:hover > a,
                    #main-menu .sub .sub li:hover > a,
                    #main-menu .sub .sub .sub li:hover > a {
                        color: #ffffff !important;
                    }
}

/* Mobile closed header strip only */
@media (max-width: 1024px) {

    .header.black-header.mobile-no-transparent,
    .header.header-black.mobile-no-transparent-2 {
        background: #1a3d2b !important;
        background-color: #1a3d2b !important;
    }

        .header.black-header.mobile-no-transparent .header-wrapper,
        .header.header-black.mobile-no-transparent-2 .header-wrapper {
            background: #1a3d2b !important;
            background-color: #1a3d2b !important;
        }
}

/* Mobile menu animation/separator cleanup */
@media (max-width: 1024px) {

    #main-menu,
    #main-menu .navbar,
    #main-menu .navbar-collapse,
    #main-menu .navbar-collapse.collapse,
    #main-menu .navbar-collapse.collapsing,
    #main-menu .navbar-collapse.in,
    #main-menu .navbar .nav,
    #main-menu .navbar .nav > li,
    #main-menu .sub,
    #main-menu .parent .sub,
    #main-menu .parent:hover .sub,
    #main-menu .megamenu > .sub,
    #main-menu .megamenu > .sub > li,
    #main-menu .megamenu > .sub .menu-sub-container,
    #main-menu .megamenu > .sub .box {
        background-color: #1a3d2b !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

        #main-menu .navbar .nav > li > a,
        #main-menu .sub li,
        #main-menu .sub li a,
        #main-menu .megamenu .title {
            border: 0 !important;
            box-shadow: none !important;
            outline: 0 !important;
        }
}


/* 6. NAV LINK COLOUR — TOP LEVEL */

#main-menu .navbar .nav > li > a {
    color: rgba(255, 255, 255, .82) !important;
    border-bottom: 2px solid transparent !important;
}

#main-menu .navbar .nav > li:hover > a {
    color: #ffffff !important;
}

#main-menu .navbar .nav > li.current > a,
.header-1 #main-menu .navbar .nav > li.current > a {
    color: #ffffff !important;
    border-bottom: 2px solid transparent !important;
}


/* 7. AFFIX NAV LINK COLOURS */

.affix.header-1 #main-menu .navbar .nav > li > a {
    color: rgba(255, 255, 255, .82) !important;
}

.affix.header-1 #main-menu .navbar .nav > li.current > a {
    color: #ffffff !important;
    border-bottom-color: transparent !important;
}


/* 8. SEARCH TRIGGER ICON */

.cd-search-trigger::before {
    border-color: rgba(255, 255, 255, .80) !important;
}

.cd-search-trigger::after {
    background: rgba(255, 255, 255, .80) !important;
}


/* 9. ACCORDION / TOGGLE BRANDING */
.ui-accordion-header {
    background-color: transparent !important;
}

    .ui-accordion-header a,
    .accordion-no-bg .ui-accordion-header a {
        color: #326d4d !important;
    }

    /* Plus / minus square */
    .ui-accordion-header span {
        background-color: #326d4d !important;
    }

        /* Plus / minus symbol */
        .ui-accordion-header span::before {
            color: #ffffff !important;
        }

    /* Hover state */
    .ui-accordion-header:hover span {
        background-color: #3a7a56 !important;
    }

        .ui-accordion-header:hover span::before {
            color: #ffffff !important;
        }

    .ui-accordion-header:hover a,
    .accordion-no-bg .ui-accordion-header:hover a {
        color: #3a7a56 !important;
    }

/* Active / open state */
.ui-accordion-header-active span {
    background-color: #326d4d !important;
}

    .ui-accordion-header-active span::before {
        color: #ffffff !important;
    }

/* Accordion connector line */
.accordion-no-bg .ui-accordion-content,
.accordion-no-bg .ui-accordion-content-active,
.ui-accordion .ui-accordion-content,
.ui-accordion .ui-accordion-content-active {
    border-left: 5px solid #326d4d !important;
    border-right: none !important;
}

/* Toggle connector line: Haswell also uses this structure */
.toggle-no-bg.toggle-view-custom .panel,
.toggle-view-custom .panel {
    border-left: 5px solid #326d4d !important;
    border-right: none !important;
}

/* Toggle plus / minus square, when the page uses toggle markup */
.toggle-view-custom li > span,
.toggle-view-custom .toggle {
    background-color: #326d4d !important;
    color: #ffffff !important;
}

    .toggle-view-custom li:hover > span,
    .toggle-view-custom .toggle:hover {
        background-color: #3a7a56 !important;
        color: #ffffff !important;
    }

/* Catch pseudo connector lines */
.accordion-no-bg .ui-accordion-content::before,
.accordion-no-bg .ui-accordion-content::after,
.ui-accordion .ui-accordion-content::before,
.ui-accordion .ui-accordion-content::after,
.toggle-no-bg.toggle-view-custom .panel::before,
.toggle-no-bg.toggle-view-custom .panel::after,
.toggle-view-custom .panel::before,
.toggle-view-custom .panel::after {
    background-color: #326d4d !important;
    border-color: #326d4d !important;
}

/* ==========================================================
   TYPOGRAPHY CORRECTION — brings the site into line with the
   official Design & Content Review Guidelines:
     "Font Families: Inter, Segoe UI, Roboto, Source Sans Pro"
     "Use one font family. Avoid thin or decorative fonts."

   Append this block to the very end of /css/forteia-overrides.css
   — after everything already there, including the AI Strategy and
   How We Work additions. Because it loads last, these rules win
   the cascade at equal specificity without needing !important.

   Requires the PPS.Master <head> Google Fonts link to be swapped
   to load Inter — see the accompanying master-page-fonts-fix.html
   snippet. Without that change, every rule below silently falls
   back to Segoe UI (Windows only) or the browser's generic
   sans-serif, so the two changes must ship together.
   ========================================================== */

/* ---------- 1. Site-wide base: one font family everywhere ----------
   Covers legacy Haswell theme elements (nav, body copy, buttons)
   that were rendering in Lato/Open Sans from the old Google Fonts
   import, not just the new fo- components. */
body,
input,
textarea,
select,
button {
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}

/* ---------- 2. Every selector previously hard-set to Cambria ----------
   Full list pulled programmatically from the live stylesheet —
   nothing hand-picked, nothing missed. */
.fo-hero-section h1,
.fo-challenge-section h2,
.fo-journey-head h2,
.fo-section-head h2,
.fo-final-cta-section h2,
.fo-executive-copy h3,
.fo-expertise-card .fo-card-body h3,
.fo-executive-visual-inner h4,
.fo-engage-circle,
.fo-engage-step h4,
.fo-evidence-item,
.fo-qcard p,
.fo-accel-flow,
.fo-accel-badge span,
.fo-acard h3,
.fo-ocard h3,
.fo-ocard .fo-num,
.fo-wcard h3,
.fo-rcard h3,
.fo-dcol-body h3,
.fo-dcol .fo-bignum,
.fo-journey-card .fo-journey-caption h4,
.fo-step-num,
.fo-step-title,
.fo-loop-note h4,
.fo-mgs h3,
.fo-evidence-label {
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}

/* ---------- 3. Heading sizes: bring the three oversized h2s into the
   22–26px "Headings" range (they were at 28px). Title-level h1/h2
   (40px hero, 32px final CTA) already sit inside the 32–40px
   "Titles" range, so those are untouched. ---------- */
.fo-challenge-section h2,
.fo-journey-head h2,
.fo-section-head h2 {
    font-size: 26px;
}

/* ---------- 4. NOT included here: body-copy sizing ----------
   The guideline's 16–18px body range is bigger than most of the
   card/paragraph text across these pages today (12.5–15.5px in
   places — accelerator cards, related-offering blurbs, deliverable
   list items). Bumping ~20 separate font-size declarations at once
   without visually re-checking every card grid risks overflow or
   cramped spacing, so that's intentionally left as a follow-up
   pass rather than bundled into this drop-in fix. Flag when ready
   and it can be done card-grid by card-grid with a visual check
   each time, rather than blind.
   ========================================================== */

/* ==========================================================
   CORE EXPERTISE — image-topped cards
   Add this block to /css/forteia-overrides.css

   NOTE: this section is now nested inside the existing
   .testimonial-2 blockquote (reusing the hero block's
   typography for the "Core Expertise" label / intro copy),
   so the old .fo-core-section / .fo-section-heading /
   .fo-section-label / .fo-heading-line / .fo-section-title /
   .fo-section-intro rules are no longer needed for this
   block — drop them if nothing else on the site uses them.

   Everything below only targets the card grid itself, plus a
   small reset so .testimonial-2's quote styling (italics,
   centering, generated quote marks, etc.) doesn't bleed into
   the cards.
   ========================================================== */

/* Reset: neutralize testimonial typography inside the card grid */
.testimonial-2 .fo-expertise-row,
.testimonial-2 .fo-expertise-row * {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-expertise-row::before,
    .testimonial-2 .fo-expertise-row::after {
        content: none;
    }

.fo-expertise-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.fo-expertise-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(18, 48, 31, .06), 0 10px 30px rgba(18, 48, 31, .06);
    border: 1px solid rgba(18, 48, 31, .06);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .fo-expertise-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(18, 48, 31, .10), 0 18px 40px rgba(18, 48, 31, .10);
    }

.fo-card-media {
    position: relative;
    display: block;
    line-height: 0;
    background: linear-gradient(155deg, #1B4332 0%, #12301F 100%);
}

    .fo-card-media svg {
        width: 100%;
        height: auto;
        display: block;
    }

.fo-expertise-card .fo-card-body {
    padding: 26px 26px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .fo-expertise-card .fo-card-body h3 {
        font-family: Cambria, Georgia, serif;
        font-size: 21px;
        margin: 0 0 10px;
        color: #12301F;
        font-weight: 700;
    }

    .fo-expertise-card .fo-card-body p {
        font-size: 15px;
        line-height: 1.65;
        color: #5B6660;
        margin: 0 0 18px;
        flex: 1;
    }

.fo-expertise-card .fo-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1B4332;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
}

    .fo-expertise-card .fo-card-link:hover {
        border-bottom-color: #C9A84C;
        color: #12301F;
    }

    .fo-expertise-card .fo-card-link i {
        transition: transform .2s ease;
    }

    .fo-expertise-card .fo-card-link:hover i {
        transform: translateX(3px);
    }

@media (max-width: 767px) {
    .fo-expertise-card {
        margin-bottom: 0;
    }
}
/* Enabling Technology — fes8-box inside .testimonial-2 */
.testimonial-2 .fes8-box h3 {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: inherit;
    margin: 0 0 4px;
}

.testimonial-2 .fes8-box > div {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.testimonial-2 .fes8-title-cont {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.testimonial-2 .fes8-box .fo-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.9em;
    font-weight: 600;
    color: #1B4332;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

    .testimonial-2 .fes8-box .fo-card-link:hover {
        border-bottom-color: #C9A84C;
        color: #12301F;
    }

    .testimonial-2 .fes8-box .fo-card-link i {
        transition: transform .2s ease;
    }

    .testimonial-2 .fes8-box .fo-card-link:hover i {
        transform: translateX(3px);
    }
/* Executive Advisory — nested inside .testimonial-2 */
.testimonial-2 .fo-executive-block,
.testimonial-2 .fo-executive-block * {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-executive-block::before,
    .testimonial-2 .fo-executive-block::after {
        content: none;
    }

.fo-executive-panel {
    margin-top: 24px;
    align-items: stretch;
}

.fo-executive-copy h3 {
    font-family: Cambria, Georgia, serif;
    font-size: 22px;
    color: #12301F;
    margin: 0 0 16px;
}

.fo-executive-copy p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0 0 16px;
}

.fo-executive-copy .fo-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    font-weight: 600;
    color: #1B4332;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-top: 4px;
}

    .fo-executive-copy .fo-card-link:hover {
        border-bottom-color: #C9A84C;
        color: #12301F;
    }

    .fo-executive-copy .fo-card-link i {
        transition: transform .2s ease;
    }

    .fo-executive-copy .fo-card-link:hover i {
        transform: translateX(3px);
    }

.fo-executive-visual {
    background: #F5F1E8;
    border-radius: 14px;
    display: flex;
    align-items: center;
}

.fo-executive-visual-inner {
    padding: 32px 30px;
}

    .fo-executive-visual-inner .icon_compass_alt {
        font-size: 32px;
        color: #C9A84C;
        display: inline-block;
        margin-bottom: 16px;
    }

    .fo-executive-visual-inner h4 {
        font-family: Cambria, Georgia, serif;
        font-size: 18px;
        line-height: 1.4;
        color: #12301F;
        margin: 0 0 12px;
    }

    .fo-executive-visual-inner .fo-muted {
        font-size: 14px;
        line-height: 1.55;
        color: #5B6660;
        margin: 0;
    }

@media (max-width: 767px) {
    .fo-executive-visual {
        margin-top: 24px;
    }
}
/* How We Engage — nested inside .testimonial-2 */
.testimonial-2 .fo-engage-panel,
.testimonial-2 .fo-engage-panel p,
.testimonial-2 .fo-engage-panel span,
.testimonial-2 .fo-engage-panel strong {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-engage-panel::before,
    .testimonial-2 .fo-engage-panel::after {
        content: none;
    }

.fo-engage-panel {
    background: #F0EEE7;
    border-radius: 16px;
    padding: 40px;
    margin-top: 4px;
}

.fo-engage-flow {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

    .fo-engage-flow::before {
        content: "";
        position: absolute;
        top: 32px;
        left: 32px;
        right: 32px;
        height: 1px;
        background: rgba(18,48,31,.18);
        z-index: 0;
    }

.fo-engage-step {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    text-align: center;
    padding: 0 10px;
}

.fo-engage-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(18,48,31,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-family: Cambria, Georgia, serif;
    font-weight: 700;
    font-size: 18px;
    color: #12301F;
}

.fo-engage-step h4 {
    font-family: Cambria, Georgia, serif;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #12301F;
    margin: 0 0 10px;
}

.fo-engage-step p {
    font-size: 14px;
    line-height: 1.55;
    color: #5B6660;
    margin: 0;
    text-align: center;
}

@media (max-width: 991px) {
    .fo-engage-flow {
        flex-wrap: wrap;
        row-gap: 40px;
    }

        .fo-engage-flow::before {
            display: none;
        }

    .fo-engage-step {
        flex: 1 1 45%;
    }
}

@media (max-width: 480px) {
    .fo-engage-step {
        flex: 1 1 100%;
    }
}
/* Enabling Technology — panel background for contrast */
.fo-tech-panel {
    background: #F0EEE7;
    border-radius: 16px;
    padding: 40px;
    margin-top: 4px;
}
/* Evidence-First by Design — nested inside .testimonial-2 */
.testimonial-2 .fo-evidence-block,
.testimonial-2 .fo-evidence-block * {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-evidence-block::before,
    .testimonial-2 .fo-evidence-block::after {
        content: none;
    }

.fo-evidence-chain {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.fo-evidence-item {
    flex: 1 1 140px;
    background: #1B4332;
    color: #F5F1E8;
    border-radius: 8px;
    padding: 20px 16px;
    font-family: Cambria, Georgia, serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fo-evidence-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C9A84C;
    font-size: 16px;
}

@media (max-width: 767px) {
    .fo-evidence-chain {
        flex-direction: column;
    }

    .fo-evidence-arrow {
        transform: rotate(90deg);
        padding: 4px 0;
    }

    .fo-evidence-item {
        flex: 1 1 auto;
    }
}
/* ==========================================================
   AI STRATEGY & EXECUTIVE ADVISORY — page components
   Append this block to the end of /css/forteia-overrides.css

   Reuses the same colour values already used elsewhere in this
   file (#1B4332, #12301F, #C9A84C, #5B6660, #F5F1E8) so the new
   page matches Core Expertise / Executive Advisory / How We
   Engage without introducing a second palette.

   NOTE: "How We Work" on this page reuses the EXISTING
   .fo-engage-panel / .fo-engage-flow / .fo-engage-circle /
   .fo-engage-step classes already defined above — no new CSS
   needed for that block, just the matching markup in the .aspx.
   ========================================================== */

/* ---------- HERO ---------- */
.fo-hero-section {
    padding: 60px 0 55px;
}

.fo-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5B6660;
    margin: 0 0 14px;
}

.fo-hero-section h1 {
    font-family: Cambria, Georgia, serif;
    font-size: 40px;
    line-height: 1.2;
    color: #12301F;
    max-width: 760px;
    margin: 0 0 22px;
}

.fo-hero-lede {
    font-size: 17px;
    line-height: 1.65;
    color: #5B6660;
    max-width: 620px;
    margin: 0 0 30px;
}

.fo-btn-gold {
    display: inline-block;
    background: #C9A84C;
    color: #12301F;
    padding: 14px 30px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background .2s ease, box-shadow .2s ease;
}

    .fo-btn-gold:hover {
        background: #dab962;
        color: #12301F;
        box-shadow: 0 8px 20px rgba(0,0,0,.18);
    }

/* ---------- EXECUTIVE CHALLENGE ---------- */
.fo-challenge-section {
    background: #1B4332;
    color: #fff;
    padding: 64px 0;
}

    .fo-challenge-section h2 {
        color: #fff;
        font-family: Cambria, Georgia, serif;
        font-size: 28px;
        max-width: 760px;
        margin: 0 0 18px;
    }

.fo-challenge-body {
    color: #CFE0D4;
    font-size: 16px;
    line-height: 1.75;
    max-width: 720px;
    margin: 0 0 40px;
}

.fo-qgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.fo-qcard {
    flex: 1 1 260px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    padding: 24px 22px;
}

    .fo-qcard p {
        font-family: Cambria, Georgia, serif;
        font-style: italic;
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
        color: #fff;
    }

/* ---------- INTERACTIVE STRATEGY JOURNEY ---------- */
.fo-journey-head {
    max-width: 680px;
    margin: 0 0 40px;
}

    .fo-journey-head h2 {
        font-family: Cambria, Georgia, serif;
        font-size: 28px;
        color: #12301F;
        margin: 0 0 14px;
    }

    .fo-journey-head p {
        font-size: 15.5px;
        color: #5B6660;
        line-height: 1.6;
        margin: 0;
    }

.fo-journey-split {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.fo-journey-list {
    flex: 1 1 380px;
}

.fo-journey-visual {
    flex: 1 1 460px;
    background: linear-gradient(135deg, #E7EEE8, #fff);
    border-radius: 20px;
    padding: 22px;
    min-height: 440px;
    position: relative;
    overflow: hidden;
}

.fo-journey-stage {
    position: relative;
    width: 100%;
    height: 440px;
    border-radius: 14px;
    overflow: hidden;
}

.fo-journey-item {
    border-bottom: 1px solid rgba(18,48,31,.12);
    padding: 26px 0;
}

    .fo-journey-item button {
        all: unset;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
        cursor: pointer;
        gap: 14px;
    }

.fo-step-num {
    font-family: Cambria, Georgia, serif;
    font-style: italic;
    color: #C9A84C;
    font-size: 14.5px;
    flex: 0 0 auto;
}

.fo-step-title {
    font-family: Cambria, Georgia, serif;
    font-size: 21px;
    color: #12301F;
    flex: 1;
}

.fo-journey-item.active {
    border-left: 3px solid #1B4332;
}

    .fo-journey-item.active .fo-step-title {
        color: #1B4332;
        font-weight: 700;
        padding-left: 16px;
    }

    .fo-journey-item.active .fo-step-num {
        padding-left: 16px;
    }

.fo-journey-chev {
    font-size: 14px;
    color: #5B6660;
    transition: transform .2s ease;
}

.fo-journey-item.active .fo-journey-chev {
    transform: rotate(90deg);
    color: #1B4332;
}

.fo-journey-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    padding-left: 16px;
}

.fo-journey-item.active .fo-journey-body {
    max-height: 160px;
    padding-top: 14px;
}

.fo-journey-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #5B6660;
    max-width: 440px;
}

.fo-journey-card {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(27,67,50,.18);
    transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
    will-change: transform, opacity;
}

    .fo-journey-card img,
    .fo-journey-card svg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .fo-journey-card .fo-journey-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 24px 26px 22px;
        background: linear-gradient(to top, rgba(15,26,20,.75), rgba(15,26,20,0) 72%);
    }

    .fo-journey-card .fo-journey-tag {
        display: inline-block;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #12301F;
        background: #C9A84C;
        padding: 4px 10px;
        border-radius: 20px;
        margin-bottom: 10px;
    }

    .fo-journey-card .fo-journey-caption h4 {
        font-family: Cambria, Georgia, serif;
        color: #fff;
        font-size: 19px;
        margin: 0;
        line-height: 1.35;
    }

    .fo-journey-card.fo-enter-from-right {
        transform: translateX(100%);
        opacity: 1;
    }

    .fo-journey-card.fo-enter-active {
        transform: translateX(0);
        opacity: 1;
    }

    .fo-journey-card.fo-exit-to-left {
        transform: translateX(-30%);
        opacity: 0;
    }

/* ---------- SHARED SECTION HEAD ---------- */
.fo-section-head {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 42px;
}

    .fo-section-head h2 {
        font-family: Cambria, Georgia, serif;
        font-size: 28px;
        color: #12301F;
        margin: 0 0 12px;
    }

    .fo-section-head p {
        font-size: 15px;
        color: #5B6660;
        margin: 0;
    }

/* ---------- BUSINESS OUTCOMES ---------- */
.fo-outcomes-section {
    background: #F5F1E8;
    padding: 64px 0 46px;
}

.fo-ogrid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.fo-ocard {
    flex: 1 1 220px;
    background: #fff;
    border: 1px solid rgba(18,48,31,.12);
    border-radius: 10px;
    padding: 26px 22px;
}

    .fo-ocard .fo-num {
        font-family: Cambria, Georgia, serif;
        font-style: italic;
        color: #C9A84C;
        font-size: 13px;
        display: block;
        margin-bottom: 10px;
    }

    .fo-ocard h3 {
        font-family: Cambria, Georgia, serif;
        font-size: 17px;
        color: #12301F;
        margin: 0 0 10px;
    }

    .fo-ocard p {
        font-size: 13.5px;
        line-height: 1.6;
        color: #5B6660;
        margin: 0;
    }

/* ---------- FORTEIA ACCELERATORS ---------- */
.fo-accel-section {
    padding-top: 36px;
}

.fo-accel-flow {
    text-align: center;
    font-family: Cambria, Georgia, serif;
    font-style: italic;
    color: #326d4d;
    font-size: 14px;
    margin: 0 0 8px;
}

.fo-accel-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 32px;
}

    .fo-accel-badge img {
        width: 34px;
        height: 34px;
        display: block;
    }

    .fo-accel-badge span {
        font-family: Cambria, Georgia, serif;
        font-weight: 700;
        font-size: 15px;
        color: #12301F;
    }

.fo-agrid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.fo-acard {
    position: relative;
    overflow: hidden;
    flex: 1 1 190px;
    border: 1px solid rgba(18,48,31,.12);
    border-left: 3px solid #C9A84C;
    border-radius: 6px;
    padding: 22px 20px 20px;
    background: #fff;
}

    .fo-acard::after {
        content: '';
        position: absolute;
        top: -14px;
        right: -14px;
        width: 76px;
        height: 76px;
        background-image: url('/images/forteia-accelerator-icon.png');
        background-size: contain;
        background-repeat: no-repeat;
        opacity: .07;
        pointer-events: none;
    }

.fo-acc-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #C9A84C;
}

    .fo-acc-tag img {
        width: 13px;
        height: 13px;
        display: block;
    }

.fo-acard h3 {
    font-family: Cambria, Georgia, serif;
    font-size: 14.5px;
    line-height: 1.35;
    margin: 0 0 8px;
    color: #12301F;
}

    .fo-acard h3 .fo-tm {
        color: #C9A84C;
        font-size: 11px;
        vertical-align: super;
    }

.fo-acard p {
    font-size: 12.5px;
    line-height: 1.55;
    color: #5B6660;
    margin: 0;
}

/* ---------- HOW WE WORK (link only — circles reuse .fo-engage-* above) ---------- */
.fo-how-link {
    text-align: center;
    margin-top: 24px;
}

    .fo-how-link a {
        font-size: 14px;
        font-weight: 600;
        color: #1B4332;
        text-decoration: none;
        border-bottom: 1px solid #C9A84C;
        padding-bottom: 2px;
    }

/* ---------- DELIVERABLES ---------- */
.fo-deliverables-section {
    background: #12301F;
    color: #fff;
    padding: 60px 0 46px;
}

    .fo-deliverables-section .fo-section-head h2 {
        color: #fff;
    }

    .fo-deliverables-section .fo-section-head p {
        color: #9DB6A5;
    }

.fo-dgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 32px;
}

.fo-dcol {
    flex: 1 1 260px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

    .fo-dcol .fo-bignum {
        font-family: Cambria, Georgia, serif;
        font-weight: 700;
        font-size: 52px;
        line-height: 1;
        color: #fff;
        flex: 0 0 auto;
    }

.fo-dcol-body {
    flex: 1;
    padding-top: 6px;
}

    .fo-dcol-body h3 {
        font-family: Cambria, Georgia, serif;
        font-weight: 700;
        font-size: 16px;
        color: #fff;
        margin: 0 0 14px;
    }

    .fo-dcol-body ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .fo-dcol-body li {
        font-size: 14px;
        color: #C9CFC9;
        padding: 9px 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

        .fo-dcol-body li:first-child {
            padding-top: 0;
        }

        .fo-dcol-body li:last-child {
            border-bottom: none;
        }

/* ---------- WHY FORTEIA ---------- */
.fo-why-section {
    background: #F5F1E8;
    padding: 50px 0 64px;
}

.fo-wgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.fo-wcard {
    flex: 1 1 260px;
    background: #fff;
    border-radius: 10px;
    padding: 32px 26px;
    border-top: 3px solid #C9A84C;
}

    .fo-wcard h3 {
        font-family: Cambria, Georgia, serif;
        font-size: 18px;
        color: #12301F;
        margin: 0 0 12px;
    }

    .fo-wcard p {
        font-size: 14.5px;
        line-height: 1.65;
        color: #5B6660;
        margin: 0;
    }

.fo-why-footnote {
    text-align: center;
    margin-top: 36px;
    font-size: 14px;
    color: #5B6660;
}

/* ---------- RELATED OFFERINGS ---------- */
.fo-rgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.fo-rcard {
    flex: 1 1 220px;
    border: 1px solid rgba(18,48,31,.12);
    border-radius: 10px;
    padding: 22px 20px;
    text-decoration: none;
    display: block;
    transition: border-color .2s ease, transform .2s ease;
}

    .fo-rcard:hover {
        border-color: #1B4332;
        transform: translateY(-2px);
    }

    .fo-rcard h3 {
        font-family: Cambria, Georgia, serif;
        font-size: 14.5px;
        color: #12301F;
        margin: 0 0 8px;
    }

    .fo-rcard span.fo-go {
        font-size: 12px;
        color: #326d4d;
        font-weight: 600;
    }

/* ---------- FINAL CTA ---------- */
.fo-final-cta-section {
    text-align: center;
}

    .fo-final-cta-section h2 {
        color: #fff;
        font-family: Cambria, Georgia, serif;
        font-size: 32px;
        max-width: 680px;
        margin: 0 auto 18px;
        line-height: 1.3;
    }

    .fo-final-cta-section p {
        color: #C9CFC9;
        font-size: 16px;
        max-width: 560px;
        margin: 0 auto 34px;
        line-height: 1.6;
    }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 820px) {
    .fo-journey-split {
        flex-direction: column;
    }

    .fo-journey-visual,
    .fo-journey-stage {
        min-height: 340px;
        height: 340px;
    }
}

@media (max-width: 600px) {
    .fo-hero-section h1 {
        font-size: 30px;
    }

    .fo-challenge-section h2,
    .fo-journey-head h2,
    .fo-section-head h2,
    .fo-final-cta-section h2 {
        font-size: 24px;
    }

    .fo-dcol .fo-bignum {
        font-size: 40px;
    }
}
/* ==========================================================
   HOW WE WORK — page-specific additions
   Append this block to the end of /css/forteia-overrides.css
   (after the AI Strategy & Executive Advisory block already there)

   This page reuses more existing components than it introduces:
     - .fo-challenge-section / .fo-qgrid / .fo-qcard  → Evidence-First
       Delivery + Accelerators "mechanism" quote blocks
     - .fo-engage-panel / .fo-engage-flow / .fo-engage-circle /
       .fo-engage-step → the 5-stage delivery methodology
     - .fo-agrid / .fo-acard → the 8-capability Accelerator System
       grid (cards used WITHOUT the .fo-acc-tag icon markup, since
       these are capability families, not named Accelerator™ products)
     - .fo-tech-panel → background wrapper for the evidence chain
     - .fo-deliverables-section / .fo-dgrid / .fo-dcol / .fo-bignum →
       the Advisory → Continuous Governance lifecycle cards
     - .fo-rgrid / .fo-rcard → Explore Our Expertise cards
     - .fo-final-cta-section → Final CTA
     - .fo-why-footnote / .fo-how-link → closing lines and links

   Only five things below are genuinely new to this page.
   ========================================================== */

/* ---------- HERO: secondary bold lede line ---------- */
.fo-hero-lede-strong {
    font-weight: 700;
    color: #12301F;
    margin-bottom: 14px;
}

/* ---------- METHODOLOGY: continuous improvement loop note ---------- */
.fo-loop-note {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 680px;
    margin: 30px auto 0;
    background: #F5F1E8;
    border: 1px solid rgba(18,48,31,.12);
    border-radius: 10px;
    padding: 22px 24px;
}

.fo-loop-icon {
    flex: 0 0 auto;
    font-size: 26px;
    line-height: 1;
    color: #C9A84C;
}

.fo-loop-note h4 {
    font-family: Cambria, Georgia, serif;
    font-size: 15px;
    color: #12301F;
    margin: 0 0 6px;
}

.fo-loop-note p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #5B6660;
    margin: 0;
}

/* ---------- EVIDENCE CHAIN: vertical stepped variant ----------
   (the existing .fo-evidence-chain is a horizontal pill/arrow row
   with no room for supporting text; this page's content pairs each
   step with a question, so it needs a vertical reading order) */
.fo-evidence-vertical {
    max-width: 620px;
    margin: 0 auto;
}

.fo-evidence-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    padding: 6px 0;
}

.fo-evidence-label {
    flex: 0 0 200px;
    font-family: Cambria, Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #1B4332;
}

.fo-evidence-question {
    flex: 1 1 300px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #5B6660;
}

.fo-evidence-connector {
    text-align: center;
    color: #C9A84C;
    font-size: 15px;
    padding: 2px 0;
    padding-left: 200px;
}

@media (max-width: 560px) {
    .fo-evidence-label {
        flex: 1 1 100%;
    }

    .fo-evidence-connector {
        padding-left: 0;
    }
}

/* ---------- LIFECYCLE CARDS: focus sub-label + body paragraph ----------
   (.fo-dcol-body already styles <ul>/<li>; this page uses a short
   paragraph instead, plus one bold "Focus:" line) */
.fo-dcol-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #C9CFC9;
    margin: 0 0 8px;
}

.fo-dcol-body .fo-focus-label {
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

/* ---------- MANAGED GOVERNANCE SERVICES mini-block ---------- */
.fo-mgs {
    max-width: 480px;
    margin: 46px auto 0;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: 36px;
}

    .fo-mgs h3 {
        font-family: Cambria, Georgia, serif;
        font-size: 16px;
        color: #fff;
        margin: 0 0 14px;
    }

    .fo-mgs ul {
        list-style: none;
        margin: 0 0 6px;
        padding: 0;
    }

    .fo-mgs li {
        font-size: 14px;
        color: #C9CFC9;
        padding: 4px 0;
    }

    .fo-mgs .fo-how-link {
        margin-top: 14px;
    }

        .fo-mgs .fo-how-link a {
            color: #C9A84C;
            border-bottom-color: #C9A84C;
        }

/* ---------- RELATED CARDS: one-line description ----------
   (.fo-rcard currently only styles h3 + .fo-go; this page's cards
   also carry a short description line) */
.fo-rcard p {
    font-size: 13px;
    line-height: 1.55;
    color: #5B6660;
    margin: 0 0 10px;
}
/* ==========================================================
   HOW WE WORK — v2 layout fixes
   Append this block to the end of /css/forteia-overrides.css,
   after the typography-fix block.

   1. Evidence-First Delivery (01) — centered, matching the rest
      of the page's centered sections instead of left-aligned.
   2. Delivery Methodology (02) — Continuous Improvement moved
      inside the same .fo-engage-panel as a footer band, instead
      of a second box stacked below it.
   3 & 4. Powered by Accelerators (03) — entire section content
      (heading, both paragraphs, quote) wrapped in one card
      instead of only the quote being visibly boxed.
   ========================================================== */

/* ---------- 1. Evidence-First Delivery: centered ---------- */
.fo-challenge-centered {
    text-align: center;
}

    .fo-challenge-centered .fo-eyebrow,
    .fo-challenge-centered h2 {
        text-align: center;
    }

    .fo-challenge-centered .fo-challenge-body {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

/* Narrower, centered quote card — used on both section 01 and 03
   so the box no longer stretches full-bleed edge to edge. */
.fo-qcard-narrow {
    flex: 0 1 720px;
    margin: 0 auto;
    text-align: center;
}

/* ---------- 2. Continuous Improvement: inline footer band ---------- */
.fo-loop-note-inline {
    max-width: none;
    margin: 34px 0 0;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(18,48,31,.14);
    border-radius: 0;
    padding: 26px 0 0;
    justify-content: center;
    text-align: left;
}

/* ---------- 3 & 4. Powered by Accelerators: one unified card ---------- */
.fo-mechanism-card {
    background: #fff;
    border: 1px solid rgba(18,48,31,.10);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(18,48,31,.05), 0 10px 30px rgba(18,48,31,.05);
    padding: 46px 40px 40px;
}

    .fo-mechanism-card .fo-section-head {
        margin-bottom: 26px;
    }

@media (max-width: 600px) {
    .fo-mechanism-card {
        padding: 34px 24px 30px;
    }

    .fo-loop-note-inline {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
/* ==========================================================
   HOW WE WORK — v3 layout fixes
   Append this block to the end of /css/forteia-overrides.css,
   after the v2 block.

   1. Managed Governance Services — now a visible bordered card
      (matching the rest of the site's card language) instead of
      plain text divided only by a top border. Each service name
      also links to its real page.
   2. Evidence as the Connecting Layer — no new CSS needed; it now
      reuses .fo-journey-* wholesale (see v2 notes / the how-we-work
      base addition file for what was removed).
   ========================================================== */

.fo-mgs-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 34px 30px 30px;
    border-top: 1px solid rgba(255,255,255,.14); /* keep from v2's border-top, now doubles as the card's top edge */
}

.fo-mgs li a {
    color: #C9CFC9;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

    .fo-mgs li a:hover {
        color: #fff;
        border-bottom-color: #C9A84C;
    }

/* Centered journey header variant, used by the Evidence tab section
   since .fo-journey-head is left-aligned by default elsewhere */
.fo-journey-head-centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
/* ==========================================================
   HOW WE WORK — page-specific additions
   Append this block to the end of /css/forteia-overrides.css
   (after the AI Strategy & Executive Advisory block already there)

   This page reuses more existing components than it introduces:
     - .fo-challenge-section / .fo-qgrid / .fo-qcard  → Evidence-First
       Delivery + Accelerators "mechanism" quote blocks
     - .fo-engage-panel / .fo-engage-flow / .fo-engage-circle /
       .fo-engage-step → the 5-stage delivery methodology
     - .fo-agrid / .fo-acard → the 8-capability Accelerator System
       grid (cards used WITHOUT the .fo-acc-tag icon markup, since
       these are capability families, not named Accelerator™ products)
     - .fo-tech-panel → background wrapper for the evidence chain
     - .fo-deliverables-section / .fo-dgrid / .fo-dcol / .fo-bignum →
       the Advisory → Continuous Governance lifecycle cards
     - .fo-rgrid / .fo-rcard → Explore Our Expertise cards
     - .fo-final-cta-section → Final CTA
     - .fo-why-footnote / .fo-how-link → closing lines and links

   Only five things below are genuinely new to this page.
   ========================================================== */

/* ---------- HERO: secondary bold lede line ---------- */
.fo-hero-lede-strong {
    font-weight: 700;
    color: #12301F;
    margin-bottom: 14px;
}

/* ---------- METHODOLOGY: continuous improvement loop note ---------- */
.fo-loop-note {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 680px;
    margin: 30px auto 0;
    background: #F5F1E8;
    border: 1px solid rgba(18,48,31,.12);
    border-radius: 10px;
    padding: 22px 24px;
}

.fo-loop-icon {
    flex: 0 0 auto;
    font-size: 26px;
    line-height: 1;
    color: #C9A84C;
}

.fo-loop-note h4 {
    font-family: Cambria, Georgia, serif;
    font-size: 15px;
    color: #12301F;
    margin: 0 0 6px;
}

.fo-loop-note p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #5B6660;
    margin: 0;
}

/* ---------- EVIDENCE AS CONNECTING LAYER ----------
   Rebuilt as a tab + sliding-visual panel reusing the existing
   .fo-journey-* classes from the AI Strategy page (see that page's
   CSS block) — no new rules needed here, only the item markup and
   this page's own #fo-evidence-list/#fo-evidence-stage JS. */

/* ---------- LIFECYCLE CARDS: focus sub-label + body paragraph ----------
   (.fo-dcol-body already styles <ul>/<li>; this page uses a short
   paragraph instead, plus one bold "Focus:" line) */
.fo-dcol-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #C9CFC9;
    margin: 0 0 8px;
}

.fo-dcol-body .fo-focus-label {
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

/* ---------- MANAGED GOVERNANCE SERVICES mini-block ---------- */
.fo-mgs {
    max-width: 480px;
    margin: 46px auto 0;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: 36px;
}

    .fo-mgs h3 {
        font-family: Cambria, Georgia, serif;
        font-size: 16px;
        color: #fff;
        margin: 0 0 14px;
    }

    .fo-mgs ul {
        list-style: none;
        margin: 0 0 6px;
        padding: 0;
    }

    .fo-mgs li {
        font-size: 14px;
        color: #C9CFC9;
        padding: 4px 0;
    }

    .fo-mgs .fo-how-link {
        margin-top: 14px;
    }

        .fo-mgs .fo-how-link a {
            color: #C9A84C;
            border-bottom-color: #C9A84C;
        }

/* ---------- RELATED CARDS: one-line description ----------
   (.fo-rcard currently only styles h3 + .fo-go; this page's cards
   also carry a short description line) */
.fo-rcard p {
    font-size: 13px;
    line-height: 1.55;
    color: #5B6660;
    margin: 0 0 10px;
}
/* ==========================================================
   HOW WE WORK — redesigned to match our-offerings.aspx
   Append this block to the end of /css/forteia-overrides.css

   The page now uses the SAME structural pattern as our-offerings.aspx:
   each section is a <blockquote class="testimonial-2"> separated by
   <div class="divider divider-center">, instead of full-width fo-
   section wrappers. Components that were already designed to nest
   inside .testimonial-2 (.fo-engage-panel, .fo-tech-panel) are reused
   as-is with no new CSS. The four components below are newly nested
   and need the same italic/center reset pattern already established
   for .fo-executive-block / .fo-evidence-block / .fo-expertise-row.
   ========================================================== */

/* ---------- 03: Accelerators mechanism panel, in brand green ----------
   Same shape as .fo-tech-panel, but on the deep-green background with
   white/gold text instead of the cream panel used elsewhere. */
.testimonial-2 .fo-mechanism-panel-green,
.testimonial-2 .fo-mechanism-panel-green * {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-mechanism-panel-green::before,
    .testimonial-2 .fo-mechanism-panel-green::after {
        content: none;
    }

.fo-mechanism-panel-green {
    background: #1B4332;
    border-radius: 16px;
    padding: 40px;
    margin-top: 4px;
    color: #CFE0D4;
}

    .fo-mechanism-panel-green p {
        color: #CFE0D4;
    }

    .fo-mechanism-panel-green strong,
    .fo-mechanism-panel-green .bold {
        color: #fff;
    }

    .fo-mechanism-panel-green .fo-mechanism-quote {
        font-style: italic;
        color: #F5F1E8;
        border-left: 3px solid #C9A84C;
        padding-left: 18px;
        margin-top: 20px;
    }

/* ---------- 04: Accelerator System grid, nested ---------- */
.testimonial-2 .fo-accelsys-block,
.testimonial-2 .fo-accelsys-block * {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-accelsys-block::before,
    .testimonial-2 .fo-accelsys-block::after {
        content: none;
    }

/* ---------- 05: Evidence journey tab panel, nested ---------- */
.testimonial-2 .fo-evidence-journey-block,
.testimonial-2 .fo-evidence-journey-block * {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-evidence-journey-block::before,
    .testimonial-2 .fo-evidence-journey-block::after {
        content: none;
    }

/* ---------- 06: Continuous Governance (dark deliverables panel), nested ---------- */
.testimonial-2 .fo-contgov-block,
.testimonial-2 .fo-contgov-block * {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-contgov-block::before,
    .testimonial-2 .fo-contgov-block::after {
        content: none;
    }

/* .fo-deliverables-section is normally a full-bleed dark section;
   nested here it becomes a rounded, contained dark panel instead */
.fo-deliverables-nested {
    border-radius: 16px;
    padding: 40px;
    margin-top: 20px;
}

/* ---------- 07: Explore Our Expertise cards, nested ---------- */
.testimonial-2 .fo-expertise2-block,
.testimonial-2 .fo-expertise2-block * {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-expertise2-block::before,
    .testimonial-2 .fo-expertise2-block::after {
        content: none;
    }
/* ==========================================================
   WHO WE ARE — redesigned to match how-we-work.aspx / our-offerings.aspx
   Append this block to the end of /css/forteia-overrides.css

   Hero (static media image) is untouched. Below it, every section is
   now a <blockquote class="testimonial-2"> separated by dividers, same
   rhythm as the other rebuilt pages. Plain label/text sections (Intro,
   Vision/Mission/Company Profile, Our Commitment) need no new CSS —
   they're identical in shape to our-offerings.aspx's Hero block, which
   already renders fine with testimonial-2's default italic/center
   styling. Only the two card-grid sections (Strategic Foundation's 4
   pillars, What We Stand For's 6 principles) need a reset, since card
   content should read left-aligned and upright, not centered/italic.

   Both grids intentionally reuse .fo-ogrid/.fo-ocard (Business Outcomes
   pattern) rather than .fo-agrid/.fo-acard — the gold-left-border +
   icon-watermark treatment on .fo-acard is reserved for FORTEIA
   Accelerators only, so it must not be reused here.
   ========================================================== */

.testimonial-2 .fo-card-grid-block,
.testimonial-2 .fo-card-grid-block * {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-card-grid-block::before,
    .testimonial-2 .fo-card-grid-block::after {
        content: none;
    }
/* ---------- WHAT WE STAND FOR: cream card treatment ----------
   Scoped to .fo-card-grid-block so plain .fo-ocard usage
   elsewhere (Business Outcomes, etc.) stays untouched. */
.fo-card-grid-block .fo-ocard {
    background: #F5F1E8;
    border-color: transparent;
}

.fo-card-grid-block .fo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid #C9A84C;
    border-radius: 50%;
    font-style: normal;
    font-size: 12px;
}
/* WHY FORTEIA: only 3 items, so the standard 5-item journey panel height
   (440px) leaves a gap under the list. Meet in the middle — panel comes
   down a bit, items get a bit more breathing room. */
#fo-whyforteia-stage,
.fo-whyforteia-visual {
    min-height: 420px !important;
    height: 420px !important;
}

#fo-whyforteia-list .fo-journey-item {
    padding: 40px 0 !important;
}

#fo-evidence-stage {
    min-height: 500px;
    height: 500px;
}
/* Fix: on mobile, .fo-journey-visual's flex-basis (460px, meant to set
   WIDTH in the desktop row layout) silently becomes a HEIGHT hint once
   .fo-journey-split switches to flex-direction:column, leaving the
   panel's actual width uncontrolled and collapsed to near-zero.
   Affects every page using the .fo-journey-* pattern. */
@media (max-width: 820px) {
    .fo-journey-split {
        align-items: stretch;
    }

    .fo-journey-list,
    .fo-journey-visual {
        flex-basis: auto;
        width: 100%;
    }
}
/* ==========================================================
   WHY FORTEIA — redesigned to match how-we-work.aspx / our-offerings.aspx
   Append this block to the end of /css/forteia-overrides.css

   Section 01 (4 pillars) reuses .fo-expertise-row/.fo-expertise-card
   as-is — already testimonial-2-compatible, no new CSS needed, and
   the same SVG illustrations as Who We Are's Strategic Foundation.

   Three sections below are newly nested inside testimonial-2 for the
   first time and need the same italic/center reset already
   established for .fo-executive-block, .fo-evidence-block, etc.
   ========================================================== */

.testimonial-2 .fo-operatingmodel-block,
.testimonial-2 .fo-operatingmodel-block *,
.testimonial-2 .fo-whytrust-block,
.testimonial-2 .fo-whytrust-block *,
.testimonial-2 .fo-iso-block,
.testimonial-2 .fo-iso-block * {
    font-style: normal;
    text-align: left;
}

    .testimonial-2 .fo-operatingmodel-block::before,
    .testimonial-2 .fo-operatingmodel-block::after,
    .testimonial-2 .fo-whytrust-block::before,
    .testimonial-2 .fo-whytrust-block::after,
    .testimonial-2 .fo-iso-block::before,
    .testimonial-2 .fo-iso-block::after {
        content: none;
    }

/* ---------- Compact card variant ----------
   Used for the 8-item "Why Clients Trust" list and the 5-item ISO
   scope list — these are single short statements with no heading,
   so the card needs less vertical padding than the standard .fo-ocard
   (which reserves space for an h3). */
.fo-ogrid-compact .fo-ocard {
    padding: 20px 20px 18px;
}

    .fo-ogrid-compact .fo-ocard p {
        margin-top: 4px;
    }

.fo-iso-logo {
    margin: 4px 0 18px;
}

/* ---------- 02: Philosophy — bulleted, not a run-on paragraph ---------- */
.fo-philosophy-list {
    list-style: none;
    margin: 22px 0;
    padding: 0;
}

    .fo-philosophy-list li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 16px;
        font-size: 16px;
        line-height: 1.6;
        color: #12301F;
    }

        .fo-philosophy-list li::before {
            content: '\2713';
            position: absolute;
            left: 0;
            top: 1px;
            color: #C9A84C;
            font-weight: 700;
            font-size: 15px;
        }

        .fo-philosophy-list li:last-child {
            margin-bottom: 0;
        }

/* ---------- 03: Govern · Build · Secure — cream card, ringed number badge ----------
   Same treatment as Who We Are's "What We Stand For" section
   (.fo-card-grid-block .fo-ocard): cream background, no border, a
   white circle with a thin gold ring around the number instead of a
   filled badge. Scoped to .fo-operatingmodel-block only. */
.fo-operatingmodel-block .fo-ocard {
    background: #F5F1E8;
    border-color: transparent;
}

.fo-operatingmodel-block .fo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #fff;
    border: 1.5px solid #C9A84C;
    color: #C9A84C;
    border-radius: 50%;
    font-style: normal;
    font-size: 12px;
    margin-bottom: 6px;
}

/* ---------- 05: Why Clients Trust FORTEIA — deep green ----------
   Scoped to .fo-whytrust-block only. */
.fo-whytrust-block .fo-ocard {
    background: #1B4332;
    border-color: transparent;
}

    .fo-whytrust-block .fo-ocard p {
        color: #E7EEE8;
    }

.fo-whytrust-block .fo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid #C9A84C;
    color: #C9A84C;
    border-radius: 50%;
    font-style: normal;
    font-size: 11px;
}

/* ---------- 07: ISO 27001 scope items — same cream/ringed treatment as 03 ---------- */
.fo-iso-block .fo-ocard {
    background: #F5F1E8;
    border-color: transparent;
}

.fo-iso-block .fo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #fff;
    border: 1.5px solid #C9A84C;
    color: #C9A84C;
    border-radius: 50%;
    font-style: normal;
    font-size: 12px;
    margin-bottom: 6px;
}

/* ---------- 08: Our Commitment — reuses .fo-engage-panel/.fo-engage-flow/
   .fo-loop-note-inline wholesale from section 02, no new component CSS
   needed for the panel itself. Only the closing statement below the
   panel needs its own style. ---------- */
.fo-commitment-closing {
    font-size: 17px;
    font-weight: 600;
    color: #12301F;
    line-height: 1.6;
}

.fo-iso-logo-link {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 18px;
}
/* ---------- Architecture Focus Areas — deep green, gold-ring badge ----------
   Same visual treatment as .fo-whytrust-block on the Why FORTEIA page,
   scoped under its own name here since it's a different section on a
   different page — avoids a confusingly-named class showing up in markup
   that has nothing to do with "why clients trust FORTEIA". */
.fo-architecture-focus-block .fo-ocard {
    background: #1B4332;
    border-color: transparent;
}

.fo-architecture-focus-block .fo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1.5px solid #C9A84C;
    color: #C9A84C;
    border-radius: 50%;
    font-style: normal;
    font-size: 12px;
    margin-bottom: 10px;
}

.fo-architecture-focus-block .fo-ocard h3 {
    color: #fff;
}

.fo-architecture-focus-block .fo-ocard p {
    color: #CFE0D4;
}

.fo-architecture-focus-block .fo-ocard {
    background: #1B4332;
    border-color: transparent;
}

.fo-architecture-focus-block .fo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1.5px solid #C9A84C;
    color: #C9A84C;
    border-radius: 50%;
    font-style: normal;
    font-size: 12px;
    margin-bottom: 10px;
}

.fo-architecture-focus-block .fo-ocard h3 {
    color: #fff;
}

.fo-architecture-focus-block .fo-ocard p {
    color: #CFE0D4;
}

.fo-resilience-focus-block .fo-ocard {
    background: #1B4332;
    border-color: transparent;
}

.fo-resilience-focus-block .fo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1.5px solid #C9A84C;
    color: #C9A84C;
    border-radius: 50%;
    font-style: normal;
    font-size: 12px;
    margin-bottom: 10px;
}

.fo-resilience-focus-block .fo-ocard h3 {
    color: #fff;
}

.fo-resilience-focus-block .fo-ocard p {
    color: #CFE0D4;
}
/*FORTEIA-OVERRIDES.CSS — CSS DIFF FOR grc-strategy-governance-advisory.aspx
=============================================================================*/
.fo-grc-focus-block .fo-ocard {
    background: #1B4332;
    border: none;
    color: #F5F1E8;
}

    .fo-grc-focus-block .fo-ocard .fo-num {
        font-family: inherit;
        font-style: normal;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1.5px solid #C9A84C;
        border-radius: 50%;
        color: #C9A84C;
        font-size: 13px;
        margin-bottom: 14px;
    }

    .fo-grc-focus-block .fo-ocard h3 {
        color: #F5F1E8;
    }

    .fo-grc-focus-block .fo-ocard p {
        color: rgba(245, 241, 232, .72);
    }
/* FORTEIA-OVERRIDES.CSS — CSS DIFF ADDITION FOR ISO 27001 page
=============================================================================
"ISMS Advisory Focus Areas" section: corrects the earlier
.fo-expertise-row/.fo-expertise-card version. Reuses the confirmed-live
.fo-ogrid/.fo-ocard/.fo-num markup, scoped to a dark-green variant via the
.fo-isms-focus-block wrapper — same pattern verified working on the GRC
Strategy page. Scoping to the wrapper means this cannot affect the plain
white .fo-ocard cards used by Business Outcomes anywhere else on the site.*/

.fo-isms-focus-block .fo-ocard {
    background: #1B4332;
    border: none;
    color: #F5F1E8;
}

    .fo-isms-focus-block .fo-ocard .fo-num {
        font-family: inherit;
        font-style: normal;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1.5px solid #C9A84C;
        border-radius: 50%;
        color: #C9A84C;
        font-size: 13px;
        margin-bottom: 14px;
    }

    .fo-isms-focus-block .fo-ocard h3 {
        color: #F5F1E8;
    }

    .fo-isms-focus-block .fo-ocard p {
        color: rgba(245, 241, 232, .72);
    }
/* Suppresses the decorative quote-mark glyph testimonial-2 normally shows,
   scoped to this block only — every other testimonial-2 on the site keeps it. */
.fo-crosscutting-block blockquote.testimonial-2::before {
    content: none;
}

.fo-crosscutting-block blockquote.testimonial-2 {
    background-image: none;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

    .fo-crosscutting-block blockquote.testimonial-2::before {
        content: none;
    }

.fo-crosscutting-block .fo-mechanism-panel-green {
    text-align: center;
}

.fo-crosscutting-block blockquote.testimonial-2 {
    background-image: none;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

    .fo-crosscutting-block blockquote.testimonial-2::before {
        content: none;
    }

.fo-crosscutting-block .fo-mechanism-panel-green {
    text-align: center;
}

.fo-crosscutting-section {
    padding-bottom: 5px !important;
}
/* =========================================================
   HOW WE WORK — EVIDENCE JOURNEY TYPOGRAPHY
   Scoped to avoid affecting offering-page journeys
   ========================================================= */

#how-we-work-page .fo-evidence-journey-block .fo-journey-split,
#how-we-work-page .fo-evidence-journey-block .fo-journey-list,
#how-we-work-page .fo-evidence-journey-block .fo-journey-item,
#how-we-work-page .fo-evidence-journey-block .fo-journey-item button {
    font-family: Inter, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
}

#how-we-work-page .fo-evidence-journey-block .fo-step-num {
    font-family: Cambria, Georgia, serif;
    font-size: 14.5px;
    font-style: italic;
    font-weight: 400;
    line-height: 25px;
}

#how-we-work-page .fo-evidence-journey-block .fo-step-title {
    font-family: Cambria, Georgia, serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
}

#how-we-work-page .fo-evidence-journey-block .fo-journey-body p {
    font-family: Inter, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.5px;
}


/* =========================================================
   HOW WE WORK — SECTIONS 02, 04 AND 07
   ========================================================= */

#how-we-work-page .fo-engage-panel,
#how-we-work-page .fo-accelsys-block,
#how-we-work-page .fo-expertise2-block {
    font-family: Inter, "Segoe UI", Roboto, sans-serif;
    font-weight: 400;
    line-height: 25px;
}

    #how-we-work-page .fo-engage-panel > p,
    #how-we-work-page .fo-accelsys-block > p,
    #how-we-work-page .fo-expertise2-block > p {
        font-family: Inter, "Segoe UI", Roboto, sans-serif;
        font-weight: 400;
        line-height: 25.5px;
    }

        #how-we-work-page .fo-engage-panel > p:first-child,
        #how-we-work-page .fo-accelsys-block > p:first-child,
        #how-we-work-page .fo-expertise2-block > p:first-child {
            color: #4b4e53;
            font-size: 21px;
            font-weight: 600;
            line-height: 30px;
        }
/* =========================================================
   WHO WE ARE — TYPOGRAPHY ALIGNMENT
   ========================================================= */

#who-we-are-page blockquote.testimonial-2,
#who-we-are-page blockquote.testimonial-2 p {
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 400 !important;
}

    /* Main narrative content */
    #who-we-are-page blockquote.testimonial-2 > p {
        font-size: 18px !important;
        line-height: 30px !important;
    }

    /* Brand and principle card headings */
    #who-we-are-page blockquote.testimonial-2 h3 {
        font-family: Cambria, Georgia, serif !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }

        /* Smaller supporting/card descriptions */
        #who-we-are-page blockquote.testimonial-2 h3 + p {
            font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
            font-size: 15px !important;
            font-weight: 400 !important;
            line-height: 25px !important;
        }
/* =========================================================
   WHO WE ARE — WHY FORTEIA JOURNEY
   ========================================================= */

#who-we-are-page #fo-whyforteia-list,
#who-we-are-page #fo-whyforteia-list button {
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 400 !important;
}

    #who-we-are-page #fo-whyforteia-list .fo-step-num {
        font-family: Cambria, Georgia, serif !important;
        font-size: 14.5px !important;
        font-weight: 400 !important;
        line-height: 25px !important;
    }

    #who-we-are-page #fo-whyforteia-list .fo-step-title {
        font-family: Cambria, Georgia, serif !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 25px !important;
    }

    #who-we-are-page #fo-whyforteia-list .fo-journey-body p {
        font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 25.5px !important;
    }

    #who-we-are-page #fo-whyforteia-list .fo-journey-chev {
        font-weight: 400 !important;
    }
/* WHY FORTEIA — CARD DESCRIPTIONS ONLY */

/* Trust, Governance, Security and AI descriptions */
#why-forteia-page .fo-expertise-card .fo-card-body p {
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 25px !important;
}

/* Govern, Build and Secure descriptions */
#why-forteia-page .fo-operatingmodel-block .fo-ocard p {
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}
/* WHY FORTEIA — SELECTED CARD DESCRIPTIONS ONLY */

/* Trust, Governance, Security and AI */
#why-forteia-page .fo-expertise-card .fo-card-body p,
/* Govern, Build and Secure */
#why-forteia-page .fo-operatingmodel-block .fo-ocard p,
/* ISO/IEC 27001 controls and capabilities */
#why-forteia-page .fo-iso-block .fo-ocard p {
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 25px !important;
}
/* WHY FORTEIA — OUR COMMITMENT CLOSING STATEMENT */

#why-forteia-page .fo-loop-quote {
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 25px !important;
}
/* OUR OFFERINGS — SMALL DESCRIPTIONS ONLY */

/* Core Expertise cards */
#our-offerings-page .fo-expertise-card .fo-card-body p,
/* Executive Advisory supporting description */
#our-offerings-page .fo-executive-panel .fo-muted,
/* How We Engage descriptions */
#our-offerings-page .fo-engage-panel .fo-engage-step p {
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 400 !important;
    line-height: 25px !important;
}

/* Preserve their existing sizes */
#our-offerings-page .fo-expertise-card .fo-card-body p {
    font-size: 15px !important;
}

#our-offerings-page .fo-executive-panel .fo-muted,
#our-offerings-page .fo-engage-panel .fo-engage-step p {
    font-size: 14px !important;
}
/* HOW WE WORK — CONTINUOUS IMPROVEMENT STATEMENT */

#how-we-work-page .fo-continuous-improvement p {
    font-family: Inter, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 25px !important;
}
/* =========================================================
   OFFERING CARD TYPOGRAPHY
   ========================================================= */

.fo-ocard p,
.fo-acard p,
.fo-wcard p {
    font-size: 14px;
    font-weight: 400;
    line-height: 25.5px;
}
/* ---------- FORTEIA Platform Accelerators — green, scoped ----------
   .fo-tech-panel is shared with "Enabling Technology" above it, so the
   color override lives in its own class rather than touching fo-tech-panel
   itself — Enabling Technology stays cream. */
.fo-platform-accel-panel {
    background: #1B4332;
    color: #CFE0D4;
}

    .fo-platform-accel-panel .fes8-box h3 {
        color: #fff;
    }

    .fo-platform-accel-panel .fes8-box > div {
        color: #CFE0D4;
    }

    .fo-platform-accel-panel .fes8-box-icon span,
    .fo-platform-accel-panel .fes8-box-icon .icon {
        color: #C9A84C;
    }

    .fo-platform-accel-panel .fo-card-link {
        color: #C9A84C;
    }

        .fo-platform-accel-panel .fo-card-link:hover {
            color: #fff;
            border-bottom-color: #fff;
        }
    .fo-platform-accel-panel > p {
        color: #CFE0D4;
    }

        .fo-platform-accel-panel > p strong,
        .fo-platform-accel-panel > p .bold {
            color: #fff;
        }
    .fo-platform-accel-panel .fo-card-link {
        color: #fff !important;
        border-bottom-color: #C9A84C !important;
    }

        .fo-platform-accel-panel .fo-card-link:hover {
            color: #C9A84C !important;
            border-bottom-color: #C9A84C !important;
        }