@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
    background: #3C3C3B;
    color: #706F6F;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
}

.bg-dark {background: #1d1d1b!important;}
.bg-dark-l {background: #3c3c3b!important;}

.btn-signup,
.btn-login {
    border: 1px solid #88CD2E; /* neon green */
    color: #88CD00;
    font-size:1rem;
    background: transparent;
    border-radius: 12px;    
    transition: 0.3s ease;
}
.btn-signup:hover,
.btn-login:hover {
    background: #88CD00;
    color: #000;
}



a {
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

    a:hover {
        color: #90BED2;
    }

.card-body {
    color: #4D4D4D;
}

.top-40{top:40%;}

.BorderBoxes {
    border-top: 1px solid #88CD2E; /* exact color */
}
.BorderBoxesSuccessBottom {
    border-bottom: 1px solid #88CD2E; /* exact color */
}
.BorderBoxes1 {
    border-bottom: 1px solid #707070; /* exact color */
}

h1 {
    font-size: 70px;
}

h2 {
    font-size: 45px;
    line-height: 1;
    font-weight: 700;
}

/* <img> tags are wrapped in <picture> for WebP/AVIF delivery. display:contents
   makes the wrapper generate no box, so the inner <img> keeps participating in
   its original layout context (utility classes, floats, width:100% all behave
   exactly as before the wrap). */
picture { display: contents; }

h3 {
    font-size: 39px;
}

h4 {
    font-size: 27px;
    font-weight: 700;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}
.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}
.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-24 {
    font-size: 24px;
}

.fs-26 {
    font-size: 26px;
}
.fs-27 {
    font-size: 27px;
}

.fs-32 {
    font-size: 32px;
}
.fs-45 {
    font-size: 45px;
}
.fs-70 {
    font-size: 70px;
}
.fs-84 {
    font-size: 84px;
}

.link-info {
    color: #90BED2 !important;
}

    .link-info:hover {
        color: #3BD2E9 !important;
    }

.bg-info {
    background-color: #deeced !important;
}

.bg-info1 {
    background-color: #F2F1F4 !important;
}


.bg-careers {
    background-color: #09071C !important;
}

.bg-primary {
    background-color: #0E0B2D !important;
}

.bg-light {
    background-color: #eeeeee !important;
}

.bg-light1 {
    background-color: #F0F6ED !important;
}

.bg-light2 {
    background-color: #EEEFF5 !important;
}

.bg-light3 {
    background-color: #EDEDED !important;
}

.bg-color2 {
    background-color: #f4f8f8;
}
.bg-color3 {
    background-color: #f2f2f2;
}
.bg-colorCat {
    background-color: #2C9EBA;
}

.text-success {
    color: #88CD00!important;
}

.text-head {
    color: #0E0B2D !important;
}

.text-head-secondary {
    color: #3BD2E9 !important;
}

.text-body1 {
    color: #4D4D4D !important;
}

.text-info {
    color: #B2B2B2 !important;
}

.text-info1 {
    color: #516390;
}

.text-primary {
    color: #2C9EBA !important;
}

.text-secondary {
    color: #706f6f !important;
}

.text-secondary1 {
    color: #706f6f !important;
    text-decoration: none; /* optional: removes underline */
}

a.text-secondary1:hover {
    color: #fff !important; /* darker shade for hover */
    text-decoration: underline; /* optional: adds underline on hover */
}
.text-secondary2 {
    color: #707070 !important;
}

.text-lightconsent {
    color: #808284;
}

.text-lightemail {
    color: #808080;
}

    .text-lightemail:hover {
        color: #4D4D4D;
    }

.text-semi-light {
    color: #7C8AAC !important;
}

.text-values {
    color: #1D1D1B;
}

.lh-11 {
    line-height: 1.1em;
}

.lh-12 {
    line-height: 1.2em;
}

.border-light1 {
    color: #3BD2E9 !important;
}

.border-light2 {
    color: #0E0B2D !important;
}

.Insightsearch-icon {
    color: #7C8AAC;
    font-size: 2.0rem; /* Increase size */
    transform: rotate(90deg); /* Rotate icon */
}

input.no-border:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.no-border::placeholder {
    font-weight: 400;
}

.btn-lg {
    font-size: 20px;
}

.btn-primary {
    color: #3BD2E9;
    background-color: #0E0B2D;
    border-color: #0E0B2D;
}
.btn-success {
    color: #fff;
    background-color: #88CD00;
    border-color: #88CD00;
}
.btn-success:hover {
    color: #fff;
    background-color: #7AB900; /* slightly darker for hover */
    border-color: #7AB900;
}
.btn-secondary {
    color: #0E0B2D;
    background-color: #253C74;
    border-color: #253C74;
}

.btn-light {
    background-color: #DBE6E9 !important;
    color: #003366; /* Optional: dark text for contrast */
    border: none;
}

    .btn-light:hover,
    .btn-light:focus,
    .btn-light:active {
        background-color: #ffffff !important;
        color: #003366;
        box-shadow: none;
        outline: auto;
    }

.btn-light1 {
    color: #0E0B2D;
    background-color: #DCF2F5;
}

    .btn-light1:hover {
        color: #fff;
        background-color: #000;
        border-color: #0E0B2D;
    }

.btn-light2 {
    background-color: #90BED2 !important;
    color: #ffffff; /* Optional: dark text for contrast */
    border: none;
}

    .btn-light2:hover,
    .btn-light2:focus,
    .btn-light2:active {
        background-color: #0E0B2D !important;
        color: #003366;
        box-shadow: none;
        outline: auto;
    }

.l-light {
    color: #90BED2;
}

    .l-light:hover {
        color: #fff;
    }
.g45{--bs-gutter-x: 2.5rem;}
.CustomPaddingBottom{padding-bottom:2.0rem;}

#by-category .iconSize {
    width: 40px;
    height: 40px;
}
/* Base button style */
.btn-primary1 {
    color: #0E0B2D;
    background-color: #3BD2E9;
    border-color: #3BD2E9;
}
    /* Hover state */
    .btn-primary1:hover {
        color: #fff;
        background-color: #0E0B2D;
        border-color: #0E0B2D;
    }

.btn-secondary1 {
    color: #0E0B2D;
    background-color: #516390;
    border-color: #516390;
}
    /* Hover state */
    .btn-secondary1:hover {
        color: #fff;
        background-color: #0E0B2D;
        border-color: #0E0B2D;
    }
.btn-grey {
    color: #3C3C3B;
    background-color: #B2B2B2;
    border-color: #B2B2B2;
}
    /* Hover state */
    .btn-grey:hover {
        color: #3C3C3B;
        background-color: #B2B2B2;
        border-color: #B2B2B2;
    }

.rounded-top-xl {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}
.rounded-top {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    overflow: hidden !important!; /* ensures corners clip correctly */
}
/********** Header ********************************************************************/


.carousel-indicators {
    justify-content: start;
    margin: 0 0 30px;
}

.carousel-indicators [data-bs-target] {
    background-color: #90BED2 !important;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    opacity: 1;
    margin-right: 15px;
}

.carousel-indicators .active {
    background-color: #fff !important;
}

.bnr-obj {
    object-fit: contain;
    height: 560px;
    object-position: right center;
    background-color: #000;
}
#banner {
    overflow: hidden;
    background-color: #000;
}

.bnr-objFrameworks {
    object-fit: cover;
    height: 650px;
    object-position: right;
    background-color: #1B192E;
}

.bnr-objInsights {
    object-fit: cover;
    height: 650px;
    object-position: right;
    background-color: #1B192E;
}

.BorderRadius025{border-radius:0.25rem;}

a[data-type] {
    color: #fff;
}
#HIWorks .circled-number {
    background-color: #707070;
    color: #fff;
    border-radius: 50%;
    font-size: 40px !important; /* force bigger number */
    font-weight: 400;
    width: 60px; /* bigger circle */
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.AgreeTermsColor{color:#706F6F!important;}
.custom-hr2 {
    position: absolute;
    top: 35%;
    height: 110px;
    width: 1px;
    background-color: #707070;
}
    /********** Content **************************************************************************************************/
    .features {
    font-size: 20px;
}
#TrustedBy .trusted-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

#TrustedBy .trusted-track {
    display: flex;
    gap: 60px;
    width: max-content;
    animation: scrollLeft 45s linear infinite; /* slowed down */
}

#TrustedBy .trusted-track img {
    height: 80px; /* increased size */
    width: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

#TrustedBy .trusted-track img:hover {
    opacity: 1;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
/* Slider wrapper */
#Testimonials .testimonial-slider-wrapper {
    overflow: hidden;
    width: 100%;
}

/* Track that moves left/right */
#Testimonials .testimonial-track {
    display: flex;
    transition: transform 0.6s ease-in-out;
}

/* Each slide contains 2 cards */
#Testimonials .testimonial-slide {
    min-width: 100%;
    display: flex;
    gap: 24px;
}

/* Cards */
#Testimonials .testimonial-box {
    flex: 1;
    padding: 24px 26px;
}

#Testimonials .light-bg {
    background: #EEEEEE;
}

#Testimonials .white-bg {
    background: #ffffff;
}


/* Text */
#Testimonials .t-text {
    font-size: 20px;
    color:#706F6F;
    line-height: 1.55;
    margin-bottom: 16px;
}

#Testimonials .role {
    color: #1d1d1b !important;
    font-size:20px;
    font-weight:bold;
}

/* Dots */
#Testimonials .dots .dot {
    height: 17px;
    width: 17px;
    border: 1px solid #88cd00;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    cursor: pointer;
}

    #Testimonials .dots .dot.active {
        background: #88cd00;
    }


.text-footerT {color:
    #B1B1B1 !important
}
.carousel-caption {
    bottom: auto;
}

.object-fit {
    height: 750px;
    object-fit: cover;
}

.contracts .ico img {
    height: 70px;
}

.list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    color: #808080;
}

    .list li .numb {
        background-color: #253C74;
        color: #fff;
        height: 50px;
        width: 50px;
        font-size: 30px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
    }

.numberColor {
    color: #253C74 !important;
}

#news .card, #news .card .card-img {
    border-radius: 15px 15px 0 0;
}
/* Hide default arrow */
.accordion-button::after {
    display: none;
}

/* Custom toggle icon */
.toggle-icon::before {
    content: "+";
    color: #88CD00;
    font-weight: bold;
    font-size: 1.6rem;
}

/* Show minus when expanded */
.accordion-button:not(.collapsed) .toggle-icon::before {
    content: "−";
    color: #88CD00;    
}
.accordion-button,
.accordion-button:focus,
.accordion-button:active,
.accordion-button:not(.collapsed) {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
}
.AboutBoxHead {
    color: #fff;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    padding: 10px 10px;
}

.AboutBoxDesc {
    color: #706f6f;
    max-width: 401px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
}

.AccountBox {
    width: 75%;
    padding: 35px;
    background-color: #DCF2F5;
    border-radius: 20px;
}

.framework h3 {
    font-size: 22px;
}

    .framework h3:after {
        position: relative;
        width: 85px;
        height: 1px;
        margin: 5px auto;
        display: block;
        z-index: 2;
        background: #656565;
        content: "";
    }

.framework .row p {
    font-size: 15px;
    line-height: 19px;
    color: #DCF2F5;
}

.framework .bg-crl {
    background: url(../images/round-arr.png) no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 255px;
    height: 255px;
}

    .framework .bg-crl .mar {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

.framework .btn {
    font-size: 25px;
}

.govframeworks li {
    list-style-type: none;
    background: url(../images/tick.png) 0px 7px no-repeat;
    padding-left: 35px;
    margin-left: -35px;
}

.KeyBenefits li {
    list-style-type: none;
    background: url(../images/tick.png) 0px 7px no-repeat;
    padding-left: 35px;
    margin-left: -35px;
}

label {
    font-size: 14px;
    color: #0E0B2D;
}

.form-control {
    border: 1px solid #A9A9A9;
    height: 50px;
}

textarea.form-control {
    height: 150px;
    border-radius: 0px;
}

/* Universal placeholder styling */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #7C8AAC !important;
    opacity: 1;
}

/* Vendor-specific fallbacks for full browser coverage */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #7C8AAC !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #7C8AAC !important;
    opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #7C8AAC !important;
    opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #7C8AAC !important;
}

/* Reduce width to match visual proportions */
.custom-select-width {
    max-width: 75%;
}

    /* Placeholder-like option color */
    .custom-select-width option:first-child {
        color: #7C8AAC;
    }

/* Select box text and arrow color */
.custom-select-width {
    color: #fff;
    background-color: #B5B5B5;
    border-color: #ccc;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFFFFF' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

/* Reduce width to match visual proportions */
.custom-select-width1 {
    max-width: 85%;
}

    /* Placeholder-like option color */
    .custom-select-width1 option:first-child {
        color: #7C8AAC;
    }

/* Select box text and arrow color */
.custom-select-width1 {
    color: #fff;
    background-color: #B5B5B5;
    border-color: #ccc;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFFFFF' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: #516390;
    content: var(--bs-breadcrumb-divider, ">");
}

#newsletter input::placeholder {
    font-weight: 700; /* Bold */
    color: #6c757d; /* Optional: match Bootstrap's muted tone */
}

.form-check-input {
    border: 1px solid #B4B4B4;
}

.form-check-label {
    line-height: 1.2;
}

footer .ftr-txt, footer h6 {
    font-size: 22px;
    color: #B2B2B2;
}

footer h4 {
    color: #3BD2E9;
    font-size: 25px;
    font-weight: 700;
}

.border-footer{border-top:1px solid #88CD00;}
.FooterLogo{margin-top:-20px;}
#Footer {color:#C4D7A4;}
#Footer p{color:#C4D7A4;}
#Footer .list-unstyled {color:#fff; list-style:disc; margin-left:30px; font-size:30px; line-height:1;}
#Footer .list-unstyled a {color:#fff; font-size:20px;}
#Footer .list-unstyled a:hover,#Footer .list-unstyled a.active {color:#C4D7A4;}
/****************************Media Tags********************************************/
@media (min-width: 768px) {

    #buy-sell {
        background: linear-gradient(to right, #dcf2f5 0%,#dcf2f5 51%,#dcf2f5 51%,#f4f8f8 51%,#f4f8f8 100%);
    }

    .btn-desktop-width {
        max-width: 245px; /* adjust to taste */
    }

    .search-desktop-width {
        max-width: 400px; /* adjust to taste */
    }
}

@media (min-width: 1600px) {

    .bnr-obj {
        height: 560px;
    }
	.PricingPaddingBottom{padding-bottom:2.0rem;}
}

@media (min-width: 1900px) {
	#fsp {padding:30px 0px;}
}

@media (min-width: 1200px) and (max-width: 1599.98px) {
    .HomeBnr .fs-84{font-size:70px;}
    .HomeBnr .fs-2 {
        font-size: 25px !important;
    }
	.PricingPaddingBottom{padding-bottom:2.0rem;}
    
}
@media (min-width: 1200px) {
    .caret-down {
        width: 0;
        height: 0;
        margin-left: 86px;
        border-left: 35px solid transparent;
        border-right: 35px solid transparent;
        /* Two-layer trick: dark triangle + thin white strip */
        border-top: 28px solid #1a1a1a; /* main dark triangle */
        position: relative;
    }  }

@media (max-width:1199.98px) {
	#banner {
    background-color: #000;
  }
	#banner img.bnr-obj {
    visibility: hidden !important;
  }
  
    .bnr-obj {
        object-fit: cover;
        height: auto;
        height: 500px;
    }

    .HomeBnr .fs-84 {
        font-size: 62px;
    }

    .HomeBnr .fs-2 {
        font-size: 25px !important;
    }

    .PricingPaddingBottom {
        padding-bottom: 0rem !important;
    }

    #Footer .fs-18 {
        font-size: 15px !important;
    }

    #Footer .w-75 {
        width: 100% !important;
    }
}
/* Disable nowrap between 992px and 1399px */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .text-nowrap {
        white-space: normal !important;
    }
}

/* Force w-100 only between 768px and 991px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .custom-w-responsive {
        width: 95% !important;
    }
}
@media (max-width: 991.98px) {
    h1 {
        font-size: 200%;
    }

    h2 {
        font-size: 180%;
    }
    .HomeBnr .fs-2 {
        display:none!important;
    }
}

@media (max-width: 767.98px) {
    .bnr-obj {
        height: 480px;
    }

    .bnr-objFrameworks {
        height: 600px;
    }

    .bnr-objInsights {
        height: 600px;
    }

    #buy-sell .container {
        max-width: 100%;
        padding: 0px;
    }

    .bg-color1 {
        background-color: #dcf2f5;
    }

    .bg-color2 {
        background-color: #f4f8f8;
    }

    .framework .btn {
        font-size: 22px;
    }
    #Testimonials .testimonial-slide {
        flex-direction: column;
    }
    .text-nowrap {
        white-space: normal !important;
    }
    .custom-mobile-padding {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

}

@media (max-width: 575.98px) {
    .framework .btn {
        font-size: 18px;
    }

    .govframeworks li {
        margin-left: 0;
    }
}

@media (max-width: 490.98px) {
    .object-fit {
        height: 1000px;
    }

    .carousel-indicators {
        display: none;
    }

    #supplier .object-fit {
        object-position: 15%;
    }

    footer ul {
        list-style-position: inside;
    }
}

/* ================================================================
   PAGE: Post Vacancy  (consolidated into the shared stylesheet so it
   ships in the already-cached style.css — no extra HTTP request).
   Rules are scoped under #PostVacancy except the shared compat shims.
   ================================================================ */
html, body { overflow-x: hidden; }

/* ---- intl-tel-input critical fallback (if CDN CSS fails to load) ---- */
.iti { position: relative !important; display: block !important; width: 100% !important; }
.iti__flag-container { position: absolute; top: 0; bottom: 0; padding: 1px; }
.iti__selected-flag { position: relative; z-index: 1; display: flex; align-items: center; height: 100%; padding: 0 6px 0 8px; cursor: pointer; }
.iti__arrow { margin-left: 6px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #555; }
.iti__country-list { position: absolute !important; z-index: 1000; list-style: none; text-align: left; padding: 0; margin: 0; box-shadow: 1px 1px 4px rgba(0,0,0,.2); background-color: #fff; border: 1px solid #ccc; white-space: nowrap; max-height: 200px; overflow-y: scroll; display: none !important; }
.iti--open .iti__country-list { display: block !important; }
.iti__country { padding: 5px 10px; }
.iti__country:hover { background-color: rgba(0,0,0,.05); cursor: pointer; }
.iti__country-name, .iti__dial-code { vertical-align: middle; }
.iti__country-name { margin-right: 6px; }
.iti__dial-code { color: #999; }
.iti__flag { display: inline-block; vertical-align: middle; }
.iti__divider { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #ccc; }
.iti input, .iti input[type=tel] { padding-left: 52px; }
.iti__flag-container + input, .iti .form-control { padding-left: 52px !important; }

/* ---- Bootstrap 4 compatibility shim ---- */
.text-left { text-align: left !important; }
.font-weight-normal { font-weight: 400 !important; }
.ml-auto { margin-left: auto !important; }
.form-group { margin-bottom: 1rem; }

/* ---- Post Vacancy signed-off page classes ---- */
#PostVacancy .lh-17 { line-height: 1.7; }
#PostVacancy .fs-23 { font-size: 23px; }
#PostVacancy .fs-35 { font-size: 35px!important; }
#PostVacancy .RadioSearch { max-width: 820px; }
#PostVacancy .account-field {
    max-width: 760px; margin-left: auto; margin-right: auto;
    border-radius: 22px; padding: 44px 64px 30px; overflow: hidden;
}
#PostVacancy .bg-success-l { background-color: #F0F6ED !important; }
#PostVacancy .P2-nav-tabs { border-bottom: 0; margin-bottom: 6px; }
#PostVacancy .P2-nav-tabs .nav-item { padding: 0; }
/* High specificity so Bootstrap 5.3 .nav-tabs .nav-link(.active) cannot square the bottom corners or add a border */
#PostVacancy .P2-nav-tabs .nav-link,
#PostVacancy .P2-nav-tabs .nav-link.active {
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background-color: #1D1D1B !important;
    color: #fff !important;
    padding: 12px;
    font-weight: 400;
    font-size: 19px;
}
#PostVacancy .VacAbtBg { background: #838681; }
#PostVacancy .rounded-top-corner { border-radius: 8px 8px 0 0; }
#PostVacancy label { font-size: 13px; color: #223300; margin-bottom: 4px; }
#PostVacancy .form-control,
#PostVacancy .form-select { border: 1px solid #A9A9A9; border-radius: 8px; min-height: 50px; font-size: 16px; color: #818196; }
#PostVacancy .form-control:focus,
#PostVacancy .form-select:focus { border-color: #88CD00; box-shadow: 0 0 0 .2rem rgba(136,205,0,.15); }
#PostVacancy #Industry,
#PostVacancy #HearAbout,
#PostVacancy #CompanySize,
#PostVacancy #LocationTitle { background-color: #EDEDED; }
#PostVacancy .iti { width: 100%; }
#PostVacancy .iti .form-control { padding-left: 52px; }

/* TinyEditor mimic */
#PostVacancy .pv-editor { border: 1px solid #A9A9A9; border-radius: 4px; background: #fff; overflow: hidden; }
#PostVacancy .pv-editor-toolbar { display: flex; gap: 18px; padding: 10px 14px; border-bottom: 1px solid #E2E2E2; color: #555; font-size: 16px; }
#PostVacancy .pv-editor textarea { border: 0; width: 100%; min-height: 150px; padding: 14px; resize: vertical; outline: none; }

/* file upload button */
#PostVacancy .pv-upload-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;
    background: linear-gradient(#9a9a9a, #7e7e7e); color: #fff; border: 0; border-radius: 4px;
    padding: 12px 18px; font-weight: 600; font-size: 15px;
}
#PostVacancy .pv-upload-btn:hover { background: linear-gradient(#8f8f8f, #6f6f6f); }
#PostVacancy .pv-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* form validation feedback */
#PostVacancy .invalid-feedback { font-size: 13px; }

/* ---- Mobile: full-width form ---- */
@media (max-width: 767.98px) {
    #PostVacancy .account-field {
        max-width: 100%;
        width: 100%;
        border-radius: 12px;
        padding: 28px 20px 24px;
    }
}

/* ================================================================
   PAGE: GovOpportunities  (consolidated into the shared stylesheet —
   no extra HTTP request). Uniquely-named GovOpp classes + shared
   compat shims; .bg-success-l here is overridden on Post Vacancy by
   the higher-specificity #PostVacancy .bg-success-l rule above.
   ================================================================ */
/* ---- Bootstrap 4 compatibility shim ---- */
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }
.text-justify { text-align: justify !important; }
.float-left  { float: left !important; }
.float-right { float: right !important; }
.font-weight-normal { font-weight: 400 !important; }
.form-group  { margin-bottom: 1rem; }
.pl-0 { padding-left: 0 !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-2 { margin-right: .5rem !important; }
@media (min-width: 768px) { .pr-md-0 { padding-right: 0 !important; } }

.card-deck { display: flex; flex-flow: row wrap; margin-right: -15px; margin-left: -15px; }
.card-deck .card { flex: 1 0 0%; margin-right: 15px; margin-left: 15px; margin-bottom: 0; border: 0; }
@media (max-width: 991.98px) { .card-deck { display: block; } .card-deck .card { margin-right: 0; margin-left: 0; } }
.gutter-sm { margin-right: -8px; margin-left: -8px; }
.gutter-sm > [class*="col-"] { padding-right: 8px; padding-left: 8px; }

/* ---- Utility classes (exact live values) ---- */
.fs-25 { font-size: 25px !important; }
.fs-28 { font-size: 28px !important; }
.fs-30 { font-size: 30px !important; }
.fs-40 { font-size: 40px !important; }
.lh-15 { line-height: 1.5; }
.lh-17 { line-height: 1.7 !important; }
.f14    { font-size: 14px; }
.text-black    { color: #000 !important; }
.text-secondary4 { color: #B2B2B2 !important; }
.text-secondary2 { color: #B2B1AA !important; }
.bg-success-l  { background-color: #eef5eb !important; }
.bg-grad       { background: transparent; }

/* ---- GovOpportunities signed-off page classes (exact live values) ---- */
.GovOppFirst { font-size: 48px; font-weight: 700; color: #1D1D1B; line-height: 1.2; }
.GovOppText  { font-size: 48px; font-weight: 100; color: #000; }

/* Key Benefits for Suppliers — exact live rules (icon pinned left in a
   100px box; text indented past it via card-body padding-left:120px).
   !important is added only to win over the global .bg-light shim. */
#hm-benifits .position-absolute { left: 0; top: 0; width: 100px; }
#hm-benifits .card-deck { margin-right: -5px; margin-left: -5px; }
#hm-benifits .card { border-radius: 0; border: 0; margin-left: 5px; margin-right: 5px; }
#hm-benifits .card .card-body { padding: 18px 40px 30px 120px; color: #706F6F; line-height: 1.3; background: #eeeeee !important; }
#hm-benifits .card:first-child .card-body,
#hm-benifits .card:last-child .card-body { background: #eeeeee !important; }
@media (max-width: 767.98px) {
    #hm-benifits .position-absolute { width: 20%; }
    #hm-benifits .card .card-body { padding: 10px 30px 10px 120px; }
}
@media (max-width: 399.98px) {
    #hm-benifits .card .card-body { padding: 10px 30px 10px 80px; }
}
.border-govBox { border: 1px solid #707070; color:#706F6F;}
.ManualBottomPadding { padding-bottom: 50px !important; }
.PaddingTop  { padding-top: 0; }

/* Headings inside the page wrapper — exact live .P2 rules. All headings
   are black + bold; sizes are fixed per level (overrides the global
   h1{70px}/h2{45px}). .text-success on a heading stays green because
   Bootstrap's .text-success is !important. */
.P2 h1, .P2 .h1, .P2 h2, .P2 .h2, .P2 h3, .P2 .h3,
.P2 h4, .P2 .h4, .P2 h5, .P2 .h5, .P2 h6, .P2 .h6 { font-weight: 700; color: #000; }
.P2 h1, .P2 .h1 { font-size: 48px; }
.P2 h2, .P2 .h2 { font-size: 35px; }
.P2 h3, .P2 .h3 { font-size: 30px; }
.P2 h4, .P2 .h4 { font-size: 25px; }
.P2 h5, .P2 .h5 { font-size: 20px; }

/* How It Works step cards — exact live #Flexible rules. The dark
   "Step" header carries rounded top corners (20px); the white body
   box keeps the .border-govBox grey outline with square corners. */
#Flexible .card { border-radius: 40px; background: unset; }
#Flexible .card-header { border-radius: 40px 40px 0 0; }
#Flexible #GovOppHeader .card-header { border-radius: 20px 20px 0 0; }

/* The step columns carry pr-md-0, which strips only the right gutter and
   shoves the 3-card group 12px to the right (card 1 inset, card 3 flush).
   Restore symmetric column padding so the cards are evenly gapped and
   centred under the heading at md+ widths. */
@media (min-width: 768px) {
    #GovOppHeader > [class*="col-"] { padding-right: calc(var(--bs-gutter-x) * .5) !important; }
}

/* When the three steps sit side-by-side (lg+), make the cards equal height
   so the white body boxes bottom-align instead of rendering ragged. The
   header keeps its natural height; the body grows to fill. */
@media (min-width: 992px) {
    #GovOppHeader .card { height: 100%; }
    #GovOppHeader .card > .border-govBox { flex: 1 1 auto; }
}

/* live card-deck overrides deck gutter to -5px (BS4 component re-implemented for BS5) */
.card-deck { display: flex; flex-flow: row wrap; margin-right: -5px; margin-left: -5px; }
.card-deck .card { flex: 1 0 0%; margin-right: 15px; margin-left: 15px; margin-bottom: 0; border: 0; }
@media (max-width: 991.98px) { .card-deck { display: block; } .card-deck .card { margin-right: 0; margin-left: 0; } }

/* ---- Hero banner — exact live values, scoped to #MainBanner2 so
   .carousel-caption does not leak onto the index/capacity heroes ---- */
#MainBanner2 { background: #ebebeb; }
#MainBanner2 .carousel-caption { position: static; padding: 0; text-align: left; right: auto; left: auto; bottom: auto; }
#MainBanner2 .hm-bnr1 {
    background-color: #000;
    background-position: top right;
    background-size: contain;
    background-repeat: no-repeat;
    height: 600px;
}
#MainBanner2 .BgBannerGovOpp {
    position: relative;
    color: #2D2D2D !important;
    background-color: #2D2D2D !important;
}
#MainBanner2 .BgBannerGovOpp::after {
    position: absolute; display: block; content: "";
    box-shadow: 0 1px 15px 15px; z-index: 999;
    top: 0; right: 0; bottom: 0; width: 0;
}
.pt-top-smHomeBanner { padding-top: 70px; padding-bottom: 84px; }
#MainBanner2 .txtbnrGovOpp { width: 60%; text-align: left; padding: 50px 0; }
#MainBanner2 .bnr-title { font-size: 57px; font-weight: 700; color: #1D1D1B; }
#MainBanner2 .bnr-title span.text-success { color: #84D400 !important; }

/* Below the xl breakpoint hide the banner image (live .NoBgImage rule),
   leaving the dark #2D2D2D banner + text — same behaviour as the
   index/capacity heroes which drop their image at ≤1199. */
@media (max-width: 1199.98px) {
    #MainBanner2 .NoBgImage { background-image: none !important; }
    #MainBanner2 .bnr-title { font-size: 190%; }
}
@media (max-width: 991.98px) {
    .GovOppFirst { font-size: 34px; }
    .pt-top-smHomeBanner { padding-top: 36px; padding-bottom: 36px; }
    #MainBanner2 .hm-bnr1 { height: auto !important; }
    #MainBanner2 .txtbnrGovOpp { width: 95%; padding: 30px 0; }
}

/* ================================================================
   PAGE: Home (index.html)  (consolidated from inline <style> blocks
   into the shared stylesheet — no inline CSS, cached site-wide).
   All rules are scoped under section #ids or component prefixes
   (.hiw / .tbo / .rts / .tb-*), so nothing leaks to other pages.
   ================================================================ */
#TrustedBy .tb-eyebrow{
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    gap: 16px;
                    margin-bottom: 4px;
                }
                #TrustedBy .tb-eyebrow-text{
                    color:#7cc11d;
                    font-weight:400;
                    font-size: 20px;
                    text-transform: uppercase;
                    white-space: nowrap;
                }
                #TrustedBy .tb-rule{
                    width: 64px;
                    height: 0;
                    border-top: 1px solid #7cc11d;
                }
                @media (max-width: 575.98px){
                    #TrustedBy .tb-rule{ width: 32px; }
                    #TrustedBy .tb-eyebrow-text{ font-size: 12px; letter-spacing: .14em; }
                }

#ChooseCapacity{
                    background:#1D1D1B;
                }
                #ChooseCapacity .cc-title{
                    font-size: clamp(2.25rem, 4.6vw, 4.5rem);
                    line-height: 1.05;
                    letter-spacing: -0.01em;
                    color:#fff;
                    font-weight: 700;
                    margin: 0 0 14px;
                }
                
                #ChooseCapacity .cc-sub{
                    text-align: center;
                    color:#b5b5b5;
                    font-size: clamp(1rem, 1.2vw, 1.2rem);
                    line-height: 1.55;
                    max-width: 720px;
                    margin: 0 auto 48px;
                }
                #ChooseCapacity .cc-card{
                    display:flex;
                    flex-direction:column;
                    height: 100%;
                    min-height: 250px;
                    padding: 22px 22px 20px;
                    border-radius: 12px;
                    background: #1D1D1B;
                    border: 1px solid #B2B2B2;
                    text-decoration:none;
                    color:#fff;
                    position:relative;
                    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background-color .25s ease;
                }
                #ChooseCapacity .cc-card:hover,
                #ChooseCapacity .cc-card:focus-visible{
                    border-color: #88CD00;
                    box-shadow: 0 0 0 1px #88CD00, 0 0 24px rgba(163,230,53,.25);
                    background:#0f0f0f;
                    outline:none;
                }
                #ChooseCapacity .cc-card:hover .cc-arrow,
                #ChooseCapacity .cc-card:focus-visible .cc-arrow{
                    transform: translateX(6px);
                }
                #ChooseCapacity .cc-card--active{
                    border-color: #88CD00;
                    box-shadow: 0 0 0 1px #88CD00, 0 0 18px rgba(163,230,53,.18);
                }
                #ChooseCapacity .cc-ico{
                    display:inline-flex;
                    align-items:center;
                    justify-content:flex-start;
                    color:#88CD00;
					height:20px;
					padding-bottom:10px;
                    margin-bottom: 20px;
                }
                #ChooseCapacity .cc-name{
                    color:#fff;
                    font-weight:800;
                    font-size: 1.5rem;
                    line-height:1.1;
                    margin: 0 0 4px;
                }
                #ChooseCapacity .cc-kicker{
                    color:#88CD00;
                    font-weight:700;
                    font-size: 1rem;
                    margin-bottom: 14px;
                }
                #ChooseCapacity .cc-desc{
                    color:#b5b5b5;
                    font-size: .8rem;
                    line-height:1.5;
                    margin: 0 0 8px;
                }
                #ChooseCapacity .cc-desc--tag{
                    margin-top: 4px;
                }
                #ChooseCapacity .cc-hl{
                    color:#88CD00;
                    font-weight:500;
                }
                #ChooseCapacity .cc-arrow{
                    color:#88CD00;
                    margin-top: auto;
                    display:inline-flex;
                    transition: transform .25s ease;
                }
                @media (max-width: 991.98px){
                    #ChooseCapacity .cc-card{ min-height: 220px; }
                }

#PlatformCapabilities{ background:#000; }
                /* --- Header bar --- */
                #PlatformCapabilities .pc-headbar{
                    background:#88CD00;
                    padding: 14px 0;
                }
                #PlatformCapabilities .pc-headbar-inner{
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    gap: 18px;
                }
                #PlatformCapabilities .pc-rule{
                    flex: 0 1 90px;
                    height: 0;
                    border-top: 2px solid #fff;
                    opacity:.55;
                }
                #PlatformCapabilities .pc-headbar-text{
                    display:inline-flex;
                    align-items:center;
                    gap: 10px;
                    color:#fff;
                    font-weight: 400;
                    font-size: 20px;
                    text-transform: uppercase;
                    white-space: nowrap;
                }

                /* --- Section intro --- */
                #PlatformCapabilities .pc-intro{
                    padding: 56px 12px 36px;
                    text-align:center;
                }
                #PlatformCapabilities .pc-title{
                    color:#706f6f;
                    font-weight: 300;
                    font-size: clamp(2rem, 3.4vw, 3rem);
                    line-height:1.15;
                    letter-spacing:-0.01em;
                    margin: 0 0 14px;
                }
                #PlatformCapabilities .pc-title-accent{ color:#fff; font-weight:700; }
                #PlatformCapabilities .pc-sub{
                    color:#cfcfcf;
                    font-size: 1.1rem;
                    line-height: 1.55;
                    max-width: 720px;
                    margin: 0 auto;
                }

                /* --- Carousel shell --- */
                #PlatformCapabilities .pc-carousel{
                    background:#0d0d0d;
                    position:relative;
                }
                #PlatformCapabilities .pc-slide{ display:block; }
                /* Slide 2 has a white-ish background — let the section background under it be white so any
                   accidental gaps don't show a black band. Set per-slide if needed; both images are full-bleed. */
                #PlatformCapabilities .carousel-inner > .carousel-item > .pc-slide img{
                    display:block;
                    width:100%;
                    height:auto;
                }

                /* --- Controls --- */
                #PlatformCapabilities .pc-ctrl{
                    width: 44px;
                    height: 44px;
                    top: 50%;
                    transform: translateY(-50%);
                    border-radius: 50%;
                    background: rgba(10,10,10,.55);
                    border: 1px solid rgba(163,230,53,.7);
                    color:#88CD00;
                    opacity: 1;
                    display:inline-flex;
                    align-items:center;
                    justify-content:center;
                    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
                }
                #PlatformCapabilities .pc-ctrl:hover{
                    background:#88CD00;
                    border-color:#88CD00;
                    color:#0a0a0a;
                }
                #PlatformCapabilities .pc-ctrl--prev{ left: 18px; }
                #PlatformCapabilities .pc-ctrl--next{ right: 18px; }
                #PlatformCapabilities .pc-ctrl svg{ display:block; }

                /* --- Dots --- */
                #PlatformCapabilities .pc-dots{
                    bottom: 14px;
                    margin: 0;
                    gap: 8px;
                }
                #PlatformCapabilities .pc-dots [data-bs-target]{
                    width: 9px;
                    height: 9px;
                    border-radius: 50%;
                    background: rgba(255,255,255,.45);
                    border: 0;
                    opacity: 1;
                    transition: background-color .2s ease, transform .2s ease;
                }
                #PlatformCapabilities .pc-dots [data-bs-target].active{
                    background:#88CD00;
                    transform: scale(1.15);
                }

                @media (max-width: 767.98px){
                    #PlatformCapabilities .pc-rule{ flex-basis: 28px; }
                    #PlatformCapabilities .pc-headbar-text{ font-size: 12px; letter-spacing: .1em; }
                    #PlatformCapabilities .pc-ctrl{ width:36px; height:36px; }
                    #PlatformCapabilities .pc-ctrl--prev{ left:8px; }
                    #PlatformCapabilities .pc-ctrl--next{ right:8px; }
                }

.hiw{
                    background:#ededed;
                    padding: 40px 0 70px;
                }
                .hiw-eyebrow{
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    gap: 16px;
                    margin-bottom: 18px;
                }
                .hiw-eyebrow-text{
                    color:#7cc11d;
                    font-weight:500;
                    font-size: 20px;
                    text-transform: uppercase;
                    white-space: nowrap;
                }
                .hiw-rule{
                    width: 64px;
                    height: 0;
                    border-top: 2px solid #88CD2E;
                }
                .hiw-title{
                    text-align:center;
                    color:#706f6f;
                    font-weight: 300;
                    font-size: clamp(2rem, 3.4vw, 3rem);
                    line-height: 1.15;
                    letter-spacing:-0.01em;
                    margin: 0 0 14px;
                }
                .hiw-title-accent{ color:#111; font-weight:700; }
                .hiw-sub{
                    text-align:center;
                    color:#5a5a5a;
                    font-size: 1.1rem;
                    line-height: 1.55;
                    margin: 0 auto 56px;
                    max-width: 720px;
                }
                .hiw-steps{
                    display:grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 0;
                    position: relative;
                }
                .hiw-step{
                    padding: 0 28px;
                    position:relative;
                    text-align:center;
                }
                .hiw-step + .hiw-step::before{
                    /* vertical separator between columns (under bubble) */
                    content:"";
                    position:absolute;
                    left:0; top: 80px; bottom: 0;
                    width: 1px;
                    background:#707070;
                }
                .hiw-bubble{
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    position:relative;
                    height: 64px;
                    margin-bottom: 28px;
                }
                .hiw-num{
                    display:inline-flex;
                    align-items:center;
                    justify-content:center;
                    width: 62px;
                    height: 62px;
                    border-radius: 50%;
                    background:#111;
                    color:#88CD00;
                    font-weight:500;
                    font-size: 1.95rem;
                    z-index: 2;
                }
                .hiw-dash{
                    position:absolute;
                    top: 50%;
                    height: 0;
                    border-top: 4px dotted #88CD00;
                    transform: translateY(-50%);
                    z-index: 1;
                }
                .hiw-dash--left{ left: 0; right: calc(50% + 44px); }
                .hiw-dash--right{ right: -60px; left: calc(50% + 44px); }
                .hiw-step-title{
                    color:#7cc11d;
                    font-weight:700;
                    font-size: 1.75rem;
                    margin: 0 0 14px;
                }
                .hiw-step-desc{
                    color:#1D1D1B;
                    font-size: 1.12rem;
                    line-height:1.55;
                    margin: 0;
                    max-width: 320px;
                    margin-inline: auto;
                }
                .hiw-cta-wrap{
                    text-align:center;
                    margin-top: 56px;
                }
                .hiw-cta{
                    display:inline-flex;
                    align-items:center;
                    gap: .75rem;
                    background:#88CD00;
                    color:#ffffff;
                    font-weight: 700;
                    font-size: 1.21rem;
                    padding: 1rem 1.8rem;
                    border-radius: 10px;
                    text-decoration:none;
                    border: 2px solid #88CD00;
                    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
                }
                .hiw-cta:hover{
                    background:#b6f04a;
                    border-color:#b6f04a;
                    color:#0a0a0a;
                    transform: translateY(-1px);
                }

                @media (max-width: 991.98px){
                    .hiw{ padding: 60px 0 70px; }
                    .hiw-steps{ grid-template-columns: 1fr; gap: 12px; }
                    .hiw-step{ padding: 24px 12px; }
                    .hiw-step + .hiw-step::before{ display:none; }
                    .hiw-dash{ display:none; }
                    .hiw-title{ margin-bottom: 36px; }
                }

.tbo{
                    background:#F0F6ED;
                    padding: 44px 0 56px;
                }
                .tbo-eyebrow{
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    gap: 16px;
                    margin-bottom: 18px;
                }
                .tbo-eyebrow-text{
                    color:#88CD00;
                    font-weight:700;
                    font-size: 20px;
                    letter-spacing: .18em;
                    text-transform: uppercase;
                    white-space: nowrap;
                }
                .tbo-rule{
                    width: 64px;
                    height: 0;
                    border-top: 1px solid #7cc11d;
                }
                .tbo-title{
                    text-align:center;
                    color:#706f6f;
                    font-weight: 300;
                    font-size: clamp(1.85rem, 3.2vw, 2.85rem);
                    line-height: 1.18;
                    letter-spacing:-0.01em;
                    margin: 0 0 18px;
                }
                .tbo-title-accent{ color:#111; font-weight:700; }
                .tbo-sub{
                    text-align:center;
                    color:#706F6F;
                    font-size: 1.05rem;
                    line-height: 1.55;
                    margin: 0 auto 32px;
                    max-width: 760px;
                }

                /* ── White outer card ── */
                .tbo-card{
                    background:#fff;
                    border-radius: 14px;
                    display:flex;
                    align-items: stretch;
                    padding: 12px 18px 12px 12px;
                    gap: 16px;
                    min-height: 320px;
                    height: 100%;
                    box-shadow: none;
                }
                /* ── Photo block – height driven by the text content ── */
                .tbo-photo{
                    position:relative;
                    flex: 0 0 160px;
                    width: 160px;
                    border-radius: 8px;
                    background:#F0F6ED;
                    overflow:hidden;
                    min-height: 160px;
                }
                .tbo-photo--plain{ background:#e8e8e8; }
                .tbo-photo img{
                    position:absolute;
                    inset: 0;
                    width:100%;
                    height:100%;
                    object-fit: cover;
                    object-position: center bottom;
                    display:block;
                    transform: scale(1.3);
                    transform-origin: center 80%;
                }
                .tbo-play{
                    position:absolute;
                    top: 12px;
                    left: 12px;
                    display:inline-flex;
                    align-items:center;
                    gap: 7px;
                    background:transparent;
                    border:0;
                    padding:0;
                    cursor:pointer;
                    color:#7cc11d;
                    font-weight:700;
                    font-size: .82rem;
                    z-index: 2;
                }
                .tbo-play-circle{
                    display:inline-flex;
                    align-items:center;
                    justify-content:center;
                    width: 28px;
                    height: 28px;
                    border-radius: 50%;
                    background:#88CD00;
                    color:#fff;
                    padding-left: 2px;
                }
                /* ── Text side ── */
                .tbo-body{
                    flex: 1 1 auto;
                    padding: 0px 0 0px;
                    display:flex;
                    flex-direction:column;
                }
                .tbo-stars{
                    color:#88CD00;
                    font-size: 1.1rem;
                    letter-spacing: 3px;
                    margin-bottom: 14px;
                }
                .tbo-quote{
                    color:#707070;
                    font-size: 1.3rem;
                    line-height: 1.6;
                    margin: 0 0 auto;
                    padding-bottom: 16px;
                }
                .tbo-meta{
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    gap: 12px;
                    padding-top: 14px;
                    border-top: 0;
                }
                .tbo-meta-name{
                    color:#3C3C3B;
                    font-weight:700;
                    font-size: 1rem;
                }
                .tbo-meta-co{
                    color:#3C3C3B;
                    font-size: .92rem;
                }
                .tbo-logo{
                    display:inline-flex;
                    align-items:center;
                    gap: 6px;
                    font-size: .7rem;
                    line-height: 1;
                    color:#163a5f;
                }
                .tbo-logo strong{ font-weight:800; letter-spacing:.04em; }
                .tbo-logo small{ font-weight:600; color:#7cc11d; }
                .tbo-logo-text{ font-weight:800; color:#1c2b4a; letter-spacing:.06em; font-size:.78rem; }
                .tbo-logo-mark{
                    display:inline-flex;
                    align-items:center;
                    justify-content:center;
                    min-width: 38px;
                    padding: 4px 8px;
                    border-radius: 6px;
                    font-weight:800;
                    font-size: .8rem;
                    letter-spacing:.04em;
                }

                .tbo-controls{
                    position:relative;
                    margin-top: 25px !important;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    min-height: 44px;
                }
                .tbo-dots{
                    position:static;
                    margin: 0;
                    gap: 5px;
                }
                .tbo-dots [data-bs-target]{
                    width: 14px;
                    height: 14px;
                    border-radius: 50% !important;
                    background: #B2B2B2 !important;
                    border: 0 !important;
                    border-top: 0 !important;
                    border-bottom: 0 !important;
                    margin: 0 !important;
                    opacity: 1 !important;
                    flex: 0 0 auto !important;
                    transition: background-color .2s ease, transform .2s ease;
                }
                .tbo-dots [data-bs-target].active{
                    background: #88CD2E !important;
                    transform: scale(1.1);
                }
                .tbo-arrows{
                    position:absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    display:flex;
                    gap: 8px;
                }
                .tbo-arrow{
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    background:#fff;
                    border: 1.5px solid #B2B2B2;
                    color:#B1B1B1;
                    display:inline-flex;
                    align-items:center;
                    justify-content:center;
                    cursor:pointer;
                    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
                }
                .tbo-arrow:hover{ background:#88CD00; color:#fff; border-color:#88CD00; }

                @media (max-width: 991.98px){
                    .tbo-title br, .tbo-sub br{ display:none; }
                    /* Keep side-by-side – just shrink the photo width */
                    .tbo-card{ padding: 10px 14px 10px 10px; gap: 12px; min-height: 240px; }
                    .tbo-photo{ flex: 0 0 115px; width: 115px; }
                    .tbo-photo img{
                        object-position: center bottom;
                        transform: none;
                    }
                    .tbo-arrows{ display: none; }
                    .tbo-controls{ justify-content: center; }
                }
                @media (max-width: 575.98px){
                    .tbo{ padding: 40px 0 32px; }
                    .tbo-card{ padding: 8px 12px 8px 8px; gap: 10px; min-height: 200px; }
                    .tbo-photo{ flex: 0 0 100px; width: 100px; }
                }

.rts{
                    background:#3a3a3a;
                    color:#fff;
                    padding: 25px 0 56px;
                }
                .rts-eyebrow{
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    gap: 16px;
                    margin-bottom: 18px;
                    flex-wrap: nowrap;
                }
                .rts-eyebrow-text{
                    color:#88CD00;
                    font-weight:700;
                    font-size: 14px;
                    letter-spacing: .18em;
                    text-transform: uppercase;
                    white-space: nowrap;
                }
                .rts-rule{
                    flex: 0 1 64px;
                    height: 0;
                    border-top: 1px solid #88CD00;
                }
                .rts-title{
                    text-align:center;
                    color:#c4c4c4;
                    font-weight: 700;
                    font-size: clamp(1.95rem, 3.6vw, 3.1rem);
                    line-height: 1.15;
                    letter-spacing:-0.01em;
                    margin: 0 0 18px;
                }
                .rts-title-accent{ color:#fff; font-weight:700; }
                .rts-sub{
                    text-align:center;
                    color:#B2B2B2;
                    font-size: 1.5rem;
                    line-height: 1.55;
                    margin: 0 auto 40px;
                    max-width: 760px;
                }
                .rts-features{
                    display:grid;
                    grid-template-columns: repeat(3, auto);
                    justify-content:center;
                    gap: 0;
                    max-width: 920px;
                    margin: 0 auto 36px;
                }
                .rts-feature{
                    display:flex;
                    align-items:center;
                    gap: 16px;
                    padding: 8px 28px;
                    position:relative;
                    justify-content:flex-start;
                }
                .rts-feature + .rts-feature::before{
                    content:"";
                    position:absolute;
                    left:0; top: 8px; bottom: 8px;
                    width: 1px;
                    background:#D8D8D8;
                }
                .rts-feature-ico{
                    flex: 0 0 auto;
                    width: 42px;
                    height: 42px;
                    border-radius: 50%;
                    border: 2.5px solid #88CD00;
                    display:inline-flex;
                    align-items:center;
                    justify-content:center;
                    color:#88CD00;
                }
                .rts-feature-title{
                    color:#fff;
                    font-weight:700;
                    font-size: 0.85rem;
                    line-height:1.2;
                }
                .rts-feature-sub{
                    color:#bdbdbd;
                    font-size: .9rem;
                    margin-top: 2px;
                }
                .rts-ctas{
                    display:flex;
                    flex-wrap:wrap;
                    gap: 16px;
                    justify-content:center;
                    margin-bottom: 40px;
                }
                .rts-btn{
                    display:inline-flex;
                    align-items:center;
                    gap: .65rem;
                    padding: .95rem 1.6rem;
                    border-radius: 10px;
                    font-weight: 700;
                    font-size: 1.05rem;
                    text-decoration:none;
                    border: 2px solid transparent;
                    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
                    white-space: nowrap;
                }
                .rts-btn--primary{
                    background:#88CD00;
                    color:#fff;
                    border-color:#88CD00;
                }
                .rts-btn--primary:hover{ background:#b6f04a; border-color:#b6f04a; color:#fff; }
                .rts-btn--ghost{
                    background: transparent;
                    color:#88CD00;
                    border-color:#88CD00;
                }
                .rts-btn--ghost:hover{ background:transparent; color:#88CD00; }

                .rts-trust{
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    gap: 18px;
                    flex-wrap: wrap;
                }
                .rts-trust-avatars{
                    display:flex;
                }
                .rts-av{
                    display:inline-block;
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                    border: 2px solid #3a3a3a;
                    margin-left: -14px;
                    object-fit: cover;
                    object-position: center top;
                    box-shadow: 0 0 0 1px rgba(255,255,255,.08);
                }
                .rts-av:first-child{ margin-left: 0; }
                .rts-trust-text{ text-align:left; }
                .rts-trust-line1{
                    color:#fff;
                    font-size: .95rem;
                    font-weight: 400;
                }
                .rts-trust-line2{
                    color:#88CD00;
                    font-size: .95rem;
                    font-weight: 700;
                }

                @media (max-width: 991.98px){
                    .rts-features{ grid-template-columns: 1fr; gap: 8px; max-width: 480px; margin-inline:auto; }
                    .rts-feature{ padding: 16px 8px; }
                    .rts-feature + .rts-feature::before{
                        top: 0; bottom: auto; height: 1px; width: 100%; left: 0;
                    }
                }
                @media (max-width: 575.98px){
                    .rts{ padding: 48px 0 40px; }
                    .rts-eyebrow-text{ font-size: 11px; letter-spacing:.14em; }
                    .rts-rule{ flex-basis: 22px; }
                    .rts-title br, .rts-sub br{ display:none; }
                    .rts-btn{ width: 100%; justify-content: space-between; }
                    .rts-trust{ text-align:center; flex-direction: column; gap: 12px; }
                    .rts-trust-text{ text-align:center; }
                }

/* ================================================================
   PAGE: Capacity (capacity.html)  (consolidated from inline <style>
   blocks into the shared stylesheet). All rules are scoped under
   #cap* ids or .cap-* component prefixes, so nothing leaks.
   ================================================================ */
/* Capacity hero — dark mockup background */
            .cap-page #banner{ background:#000 !important; overflow:hidden; }
            .cap-page #banner .bnr-obj{ background:#000 !important; width:100%; height:auto !important; object-fit:fill !important; transform:none; margin-top:4.5vw; }
            /* image pushed down 4.5vw; counter-shift the centred caption up by half so the TEXT stays put */
            .cap-page #banner .HomeBnr{ transform: translateY(calc(-50% - 2.4vw)) !important; }
            /* Capacity hero — same subtitle/tagline/spacing as homepage; title sized so the
               longer "as a Service (BCaaS)™" phrase fits 2 clean lines. */
            .cap-page #banner .HomeBnr h1{ font-size:80px !important; line-height:1.08 !important; }
            @media (min-width:1400px) and (max-width:1599.98px){ .cap-page #banner .HomeBnr h1{ font-size:80px !important; } }
            @media (min-width:1200px) and (max-width:1399.98px){ .cap-page #banner .HomeBnr h1{ font-size:72px !important; } .cap-page #banner .HomeBnr{ padding-top:50px !important; } }
            /* Below 1400px the wide monitors would collide with the long title -> hide image (keep its
               height so the hero doesn't collapse), text full-width over the black background */
            /* Below 1200px: hide image, adjust padding and font size */
            @media (max-width:1199.98px){
                .cap-page #banner .bnr-obj{ display:none !important; }
                .cap-page #banner .HomeBnr{ position:static !important; transform:none !important; top:auto !important; bottom:auto !important; padding:120px 0 58px !important; }
                .cap-page #banner .HomeBnr h1{ font-size:72px !important; }
            }
            @media (max-width:991.98px){ .cap-page #banner .HomeBnr h1{ font-size:50px !important; } }
            @media (max-width:991.98px){ .cap-page #banner .HomeBnr h1{ font-size:50px !important; } }
            @media (max-width:575.98px){ .cap-page #banner .HomeBnr h1{ font-size:40px !important; } }
            /* Exact text values from the vector source */
            .cap-page #banner .HomeBnr h1 .text-success{ color:#88CD00 !important; }
            .cap-page #banner .HomeBnr .cap-hero-sub{ color:#B2B2B2 !important; font-weight:400; line-height:1.3 !important; }
            .cap-page #banner .HomeBnr .cap-hero-tag{ color:#88CD2E !important; font-size:clamp(1rem, 1.85vw, 1.65rem); }
            .cap-page #banner .HomeBnr .cap-hero-cta .btn{ font-size:clamp(1rem, 1.25vw, 1.22rem); padding:.85rem 1.6rem; }
            .cap-page #banner .HomeBnr .cap-hero-book{ background:#3C3C3B; color:#fff; border:0; }
            .cap-page #banner .HomeBnr .cap-hero-book:hover{ background:#2b2b2a; color:#fff; }
            /* Keep the 3-line subtitle from wrapping to a 4th line: give it room.
               Below 1400px the image is hidden, so the caption can use full width. */
            .cap-page #banner .HomeBnr .cap-hero-sub{ max-width:none; }
            @media (max-width:1399.98px){
                .cap-page #banner .HomeBnr .wow.fadeInLeft{ max-width:100% !important; flex:0 0 100% !important; width:100% !important; }
            }

/* Dark bar: title line + features line, exactly per the vector source (#3c3c3b, 111px) */
                #capWays{ background:#3C3C3B; padding: clamp(16px,1.7vw,22px) 0; }
                #capWays .capways-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,1.5vw,20px); }
                #capWays .capways-title{ color:#88CD00; font-weight:700; font-size:clamp(1.7rem, 3.4vw, 3rem); line-height:1.1; margin:0; }
                #capWays .capways-title span{ color:#fff; font-weight:700; }
                #capWays .capways-feats{ display:flex; align-items:center; gap:clamp(34px,6.5vw,90px); flex-wrap:wrap; }
                #capWays .capways-feat{ display:inline-flex; align-items:center; gap:12px; color:#F0F6ED; font-size:clamp(1rem,1.3vw,1.2rem); font-weight:500; }
                #capWays .capways-ic{ flex:0 0 auto; }
                @media (max-width: 767.98px){
                    #capWays{ padding:18px 0; }
                    #capWays .capways-feats{ gap:18px 28px; }
                }

.cap-block{ padding: 24px 0px 70px 0px; overflow-x: clip; }
            .cap-block--light{ background:#F0F6ED; }
            .cap-block--white{ background:#fff; }
            .cap-block--dark{ background:#1D1D1B; }
            .cap-badge{ display:inline-flex; align-items:center; gap:7px; background:#88CD00; color:#fff; font-weight:500;
                font-size:clamp(.7rem, .95vw, .85rem); letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:5px; margin-bottom:16px; }
            .cap-badge svg{ color:#fff; }
            .cap-h2{ font-weight:700; font-size: clamp(2.1rem, 4.7vw, 4.2rem); line-height:1.06; margin:0 0 16px; color:#1D1D1B; }
            .cap-block--dark .cap-h2{ color:#fff; }
            .cap-h2-kick{ color:#88CD00; font-weight:300; font-size:.54em; }
            /* vertical separator between the two list columns */
            .cap-col-div{ position:relative; }
            @media (min-width:576px){
                .cap-col-div{ padding-left:34px; }
                .cap-col-div::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:#b2b2b2; }
            }
            .cap-block--dark .cap-col-div::before{ background:#3f3f3c; }
            .cap-lead{ color:#1D1D1B; font-size:clamp(1rem, 1.3vw, 1.28rem); line-height:1.5; max-width:none; margin:0 0 30px; }
            .cap-lead-em{ font-weight:500; }
            .cap-block--dark .cap-lead{ color:#cfcfcf; }
            .cap-tagline{ color:#88CD00; font-weight:700; font-size:1.05rem; margin:0 0 22px; }
            .cap-coltitle{ color:#88CD00; font-weight:700; font-size:clamp(1rem, 1.4vw, 1.3rem); margin-bottom:14px; padding-left:30px; }
            .cap-block--dark .cap-coltitle{ color:#88CD00; }
            .cap-list{ list-style:none; margin:0; padding:0; }
            .cap-list li{ position:relative; padding-left:30px; margin-bottom:6px; color:#3c3c3b; font-size:clamp(.95rem, 1.32vw, 1.2rem); line-height:1.4; }
            .cap-block--dark .cap-list li{ color:#707070; }
            .cap-list li::before{ content:""; position:absolute; left:0; top:2px; width:20px; height:20px;
                background:url("../images/check2.png") center/contain no-repeat; }
            .cap-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-top:30px; }
            .cap-btn{ display:inline-flex; align-items:center; gap:10px; padding:.9rem 1.7rem; border-radius:8px; font-weight:700; font-size:clamp(1.05rem, 1.5vw, 1.15rem); text-decoration:none; border:1.5px solid transparent; transition:all .2s ease; white-space:nowrap; }
            .cap-btn .cap-arr{ display:inline-flex; align-items:center; flex-shrink:0; }
            .cap-btn .cap-arr svg{ width:1em; height:1em; }
            .cap-btn--primary{ background:#88CD00; color:#fff; border-color:#88CD00; }
            .cap-btn--primary:hover{ background:#76b800; color:#fff; }
            .cap-btn--dark{ background:#3C3C3B; color:#fff; border-color:#3C3C3B; }
            .cap-btn--dark:hover{ background:#2b2b2a; color:#fff; }
            .cap-btn--ghost{ background:transparent; color:#88CD00; border-color:#88CD2E; }
            .cap-btn--ghost:hover{ background:#88CD00; color:#fff; }
            .cap-block--dark .cap-btn--ghost{ color:#88CD00; }
            /* On-demand two-column grid: lists + bottom-aligned buttons, matching the PDF */
            .cap-od-grid{ display:flex; margin-top:30px; }
            .cap-od-col{ display:flex; flex-direction:column; min-width:0; }
            .cap-od-col--best{ flex:0 0 46%; max-width:46%; padding-right:26px; }
            .cap-od-col--get{ flex:1 1 auto; }
            /* even (50/50) split for the image+content sections (Interim/Permanent) */
            .cap-od-grid--even .cap-od-col--best{ flex:0 0 50%; max-width:50%; padding-right:30px; }
            .cap-od-grid--even + .cap-ctas{ margin-top:8px; }
            .cap-od-body{ margin-bottom:18px; }
            /* divider lives on the list wrapper, so it ends at the last list item (not under the buttons) */
            .cap-od-col--get .cap-od-body{ border-left:1px solid #b2b2b2; padding-left:30px; }
            .cap-od-grid .cap-list{ margin-bottom:0; }
            .cap-od-col .cap-btn{ align-self:flex-start; margin-top:auto; margin-left:30px; }
            .cap-od-col--get .cap-btn{ margin-left:61px; }
            /* buttons below the grid align with list text (30px = li padding-left) */
            .cap-od-grid + .cap-ctas{ padding-left:30px; }
            @media (max-width:575.98px){
                .cap-block{ padding:32px 0; overflow-x:hidden; }
                .cap-h2{ font-size:1.85rem !important; }
                .cap-lead{ font-size:1.05rem !important; line-height:1.55 !important; }
                .cap-od-grid{ flex-direction:column; gap:24px; }
                .cap-od-col--best,
                .cap-od-grid--even .cap-od-col--best{ flex:0 0 auto; max-width:100%; padding-right:0; margin-bottom:0; }
                .cap-od-col--get .cap-od-body{ border-left:0; padding-left:0; }
                .cap-od-col .cap-btn{ margin-top:16px; margin-left:0; width:100%; justify-content:center; white-space:normal; }
                .cap-ctas{ flex-direction:column; }
                .cap-ctas .cap-btn{ width:100%; justify-content:center; white-space:normal; }
                .cap-btn{ white-space:normal; }
                .cap-badge{ font-size:.78rem; padding:4px 10px; }
                .cap-coltitle{ font-size:1.1rem; margin-bottom:10px; }
                .cap-list li{ font-size:1.05rem; line-height:1.5; }
            }
            /* Live availability card (exact reproduction of approved vector design) */
            .cap-live-svg{ display:block; width:100%; height:auto; margin-left:auto; margin-top:clamp(64px, 10vw, 140px); }
            @media (max-width:991.98px){ .cap-live-svg{ width:100%; max-width:420px; margin:26px auto 0; } }
            /* image blocks */
            .cap-img-fluid{ width:100%; height:auto; display:block; }
            .cap-side-img{ width:100%; height:100%; object-fit:cover; display:block; }
            /* Interim: full-width laptop strip as the section background (laptop left, blending into
               white on the right), with the content overlaid on the white area — exactly per the SVG. */
            #capInterim{ position:relative; overflow:hidden; background:#f3f3f3; }
            #capInterim .cap-interim-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left center; z-index:0; }
            /* fade the image into the same grey on the right so the content sits cleanly on it */
            #capInterim::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
                background:linear-gradient(90deg, rgba(243,243,243,0) 20%, rgba(243,243,243,1) 42%); }
            #capInterim .container{ position:relative; z-index:2; }
            @media (max-width:991.98px){
                #capInterim{ background:#fff; }
                #capInterim .cap-interim-bg{ display:none; }
                #capInterim::after{ display:none; }
            }
            /* Permanent: device mockup (transparent PNG) bleeds off the RIGHT edge — mirror of Interim */
            #capPermanent{ position:relative; overflow:hidden; }
            #capPermanent .cap-perm-bg{ position:absolute; right:-2vw; top:clamp(60px,8.6vw,100px);
                height:clamp(330px,33vw,510px); width:auto; z-index:0; }
            #capPermanent .container{ position:relative; z-index:1; }
            @media (max-width:991.98px){
                #capPermanent .cap-perm-bg{ position:static; transform:none; height:auto; width:100%; max-width:460px; margin:26px auto 0; display:block; }
            }
            /* keep the On-demand lead at 2 lines on narrower laptops */
            @media (min-width:992px) and (max-width:1199.98px){
                #capOnDemand .cap-lead{ font-size:.9rem; }
            }
            @media (max-width: 991.98px){
                .cap-block{ padding: 44px 0; }
                .cap-side-wrap{ margin-bottom: 24px; }
                #capOnDemand .cap-lead br, #capInterim .cap-lead br, #capPermanent .cap-lead br, #capBidFunction .cap-lead br{ display:none; }
            }

#capBidFunction{ position:relative; }
                #capBidFunction .bf-wheel-svg{ position:absolute; left:clamp(8px,3.5vw,56px); top:50%; transform:translateY(-50%);
                    width:clamp(340px,36vw,560px); height:auto; z-index:0; }
                #capBidFunction .container{ position:relative; z-index:1; }
                #capBidFunction .cap-lead{ color:#F0F6ED; }
                #capBidFunction .cap-tagline{ color:#707070; font-weight:500; }
                /* role-pill hover */
                .bf-wheel-svg .bf-pill { cursor:pointer; }
                .bf-wheel-svg .bf-pill rect { transition:fill .2s ease; }
                .bf-wheel-svg .bf-pill:hover rect { fill:#88cd2e; }
                /* container overlaps SVG on desktop — pass pointer events through to the pills */
                #capBidFunction .container { pointer-events:none; }
                #capBidFunction .container a,
                #capBidFunction .container button { pointer-events:auto; }
                /* button sits just under the Best-for list (not pushed to the column bottom) */
                #capBidFunction .cap-od-col--best .cap-btn{ margin-top:26px; margin-left:30px; width:calc(100% - 30px); align-self:flex-start; justify-content:space-between; }
                @media (min-width:992px) and (max-width:1399.98px){
                    #capBidFunction .cap-od-col--best .cap-btn{ font-size:clamp(0.82rem,1.15vw,1.05rem); padding:.75rem 0.5rem; }
                }
                @media (max-width:991.98px){
                    #capBidFunction .bf-wheel-svg{ position:static; transform:none; width:100%; max-width:360px; margin:0 auto 28px; display:block; }
                    #capBidFunction .cap-od-col--best .cap-btn{ margin-top:16px; }
                }

#capLogos .cap-logos-eyebrow{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:32px; }
                #capLogos .cap-logos-text{ color:#1D1D1B; font-weight:500; font-size:18px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; text-align:center; }
                #capLogos .cap-logos-rule{ flex:0 1 64px; height:0; border-top:1px solid #3C3C3B; }
                /* infinite logo marquee — same behaviour as the homepage "Trusted by" strip */
                #capLogos .cap-logos-slider{ overflow:hidden; position:relative; width:100%; }
                #capLogos .cap-logos-track{ display:flex; width:max-content; animation: capLogosScroll 40s linear infinite; }
                #capLogos .cap-logos-slider:hover .cap-logos-track{ animation-play-state:paused; }
                #capLogos .cap-logos-track img{ height:50px; width:auto; display:block; flex:0 0 auto; margin-right:48px; }
                @keyframes capLogosScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
                @media (max-width: 767.98px){
                    #capLogos .cap-logos-text{ font-size:15px; white-space:normal; }
                    #capLogos .cap-logos-rule{ flex-basis:20px; }
                    #capLogos .cap-logos-track img{ height:38px; margin-right:30px; }
                }

/* left-aligned header (per SVG: eyebrow grey #706f6f, dark title, dark subtitle) */
                #capFAQ .capfaq-head{ max-width:860px; }
                #capFAQ .capfaq-eyebrow-text{ color:#706F6F; font-weight:400; font-size:20px; margin-bottom:2px; }
                #capFAQ .capfaq-title{ font-weight:700; font-size:clamp(2rem,3.6vw,3rem); color:#1D1D1B; margin:0 0 12px; }
                #capFAQ .capfaq-sub{ color:#1D1D1B; font-size:1.2rem; margin:0 0 30px; max-width:720px; }
                /* accordion: flat rows separated by thin grey dividers (no card borders) */
                #capFAQ .capfaq-acc{ max-width:860px; margin:0; display:block; border-top:none; }
                #capFAQ .accordion-item{ border:0; border-bottom:1px solid rgba(112,112,112,.35); border-radius:0 !important; background:transparent; }
                #capFAQ .accordion-button{ font-family:Roboto,sans-serif; font-weight:500; font-size:clamp(1rem,1.3vw,1.35rem); color:#1D1D1B; background:transparent; padding:18px 40px 18px 0; box-shadow:none; }
                #capFAQ .accordion-button:not(.collapsed){ color:#1D1D1B; background:transparent; }
                #capFAQ .accordion-button:focus{ box-shadow:none; border-color:transparent; }
                /* green chevron */
                #capFAQ .accordion-button::after{ display:inline-block; content:"\f282"; font-family:"bootstrap-icons" !important; font-style:normal; font-weight:600 !important; font-variant:normal; text-transform:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#88CD2E; font-size:24.5px; line-height:1; width:auto; height:auto; flex-shrink:0; margin-left:auto; background-image:none !important; transition:transform .2s ease; }
                #capFAQ .accordion-button:not(.collapsed)::after{ transform:rotate(180deg); }
                @media (max-width:575.98px){ #capFAQ .accordion-button::after{ font-size:14px; } }
                @media (min-width:576px) and (max-width:767.98px){ #capFAQ .accordion-button::after{ font-size:16px; } }
                /* answer indented with a thin grey left accent line (SVG Line_1723, #707070) */
                #capFAQ .accordion-body{ color:#1D1D1B; font-size:1.1rem; line-height:1.55; margin-left:19px;
                    padding:2px 40px 20px 14px; border-left:none; position:relative; }
                #capFAQ .accordion-body::before{ content:""; position:absolute; left:0; top:0; bottom:18px; width:2px; background:#707070; }
                /* Still have questions card (white, rounded, left-aligned) */
                #capFAQ .capfaq-still{ max-width:90%; margin:36px 0 0; background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.05);
                    padding:36px 28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
                #capFAQ .capfaq-still-ico{ width:81px; height:81px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
                #capFAQ .capfaq-still-text{ flex:1 1 240px; }
                #capFAQ .capfaq-still-title{ font-weight:700; color:#1D1D1B; font-size:1.8625rem; }
                #capFAQ .capfaq-still-sub{ color:#707070; font-size:1.1875rem; }
                #capFAQ .capfaq-still-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
                @media (max-width: 575.98px){
                    #capFAQ .capfaq-still{ flex-direction:column; align-items:center; text-align:center; gap:12px; max-width:100%; margin:36px auto 0; }
                    #capFAQ .capfaq-still-text{ flex:0 0 auto; width:100%; }
                    #capFAQ .capfaq-still-ctas{ width:100%; flex-direction:column; gap:10px; margin-top:4px; }
                    #capFAQ .capfaq-still-ctas .cap-btn{ width:100%; justify-content:center; }
                }

#capReady{ background:#1D1D1B; color:#fff; padding:84px 0 0 0; }
                #capReady .col-lg-7{ transform:translateY(-14%); }
                #capReady .cap-ready-title{ font-weight:700; font-size:clamp(2rem,3.7vw,4.1rem); line-height:1.5; margin:0 0 18px; color:#88CD00; }
                #capReady .cap-ready-sub{ color:#B2B2B2; font-size:clamp(1.05rem,1.4vw,1.70rem); line-height:1.55; font-weight:200; margin:0 0 65px; }
                #capReady .cap-ctas{ flex-wrap:nowrap; }
                #capReady .cap-ctas .cap-btn{ white-space:nowrap; }
                #capReady .cap-ready-feats{ display:flex; gap:clamp(14px,2.8vw,38px); flex-wrap:nowrap; margin-top:60px; align-items:center; }
                #capReady .cap-ready-feats span{ display:inline-flex; align-items:center; gap:10px; color:#F0F6ED; font-size:clamp(1rem,1.3vw,1.2rem); font-weight:500; white-space:nowrap; }
                #capReady .rf-ic{ flex:0 0 auto; }
                #capReady .col-lg-5{ transform:translateY(-7%); }
                #capReady .cap-ready-img{ width:100%; height:auto; display:block; }
                @media (min-width:992px) and (max-width:1199.98px){
                    #capReady{ padding-top:44px; }
                    #capReady .col-lg-7{ transform:translateY(-14%); }
                    #capReady .col-lg-5{ transform:translateY(-7%); }
                    #capReady .cap-ready-sub{ margin:0 0 28px; }
                    #capReady .cap-ready-feats{ margin-top:28px; }
                }
                @media (max-width: 767.98px){
                    #capReady .col-lg-7{ transform:none; }
                    #capReady .cap-ready-feats{ flex-direction:column; align-items:flex-start; gap:14px; margin-top:20px; }
                    #capReady .cap-ready-feats span{ white-space:normal; }
                }

/* ================================================================
   PAGE: Company (company.html)  (consolidated from inline <style>
   blocks into the shared stylesheet). All rules use .co-* classes
   or #co* section ids (unique prefixes) — nothing leaks.
   ================================================================ */

        /* ── shared ───────────────────────────────────── */
        .co-label {
            display: inline-block;
            font-size: .95rem;
            font-weight: 500;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #88CD00;
            margin-bottom: 0;
        }
        .co-arr { display:inline-flex; align-items:center; flex-shrink:0; }
        .co-arr svg { width:1em; height:1em; }

        /* ── shared button ────────────────────────────── */
        .co-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: .85rem 1.6rem;
            border-radius: 8px;
            font-weight: 700;
            font-size: clamp(.95rem, 1.2vw, 1.15rem);
            text-decoration: none;
            border: 2px solid transparent;
            transition: all .2s ease;
            white-space: nowrap;
        }
        .co-btn--green  { background:#88CD00; color:#fff; border-color:#88CD00; }
        .co-btn--green:hover  { background:#76b800; color:#fff; }
        .co-btn--dark   { background:#3C3C3B; color:#fff; border-color:#3C3C3B; }
        .co-btn--dark:hover   { background:#2a2a29; color:#fff; }
        .co-btn--outline { background:transparent; color:#88CD2E; border-color:#88CD2E; }
        .co-btn--outline:hover { background:#88CD00; color:#fff; }
        @media (max-width:575.98px){
            .co-ctas { flex-direction:column; }
            .co-ctas .co-btn { width:100%; justify-content:center; }
        }

#coHero {
                    background: #1D1D1B;
                    position: relative;
                    overflow: hidden;
                }
                .co-hero-map {
                    position: absolute;
                    inset: 0;
                    z-index: 0;
                    pointer-events: none;
                }
                .co-hero-map img {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 170%;
                    width: auto;
                    opacity: .92;
                }
                .co-hero-inner {
                    position: relative;
                    z-index: 1;
                    padding-top: 66px;
                    padding-bottom: 100px;
                }
                .co-hero-title {
                    font-size: clamp(2.6rem, 5vw, 5.1rem);
                    font-weight: 400;
                    line-height: 1.08;
                    color: #fff;
                    margin: 0 0 15px;
                }
                .co-hero-title span {
                    color: #88CD00;
                    font-weight: 400;
                    display: block;
                }
                .co-hero-sub {
                    font-size: clamp(1.05rem, 1.5vw, 1.6rem);
                    color: #fff;
                    line-height: 1.5;
                    margin: 0 0 30px;
                    font-weight: 300;
                    max-width: 480px;
                }
                .co-hero-sub strong { color: #fff; font-weight: 500; }
                .co-hero-tags {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 26px;
                    margin-bottom: 36px;
                }
                .co-hero-tags > span {
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    color: #F0F6ED;
                    font-size: 1.045rem;
                    font-weight: 400;
                }
                .co-tag-ico {
                    width: 33px;
                    height: 33px;
                    border-radius: 50%;
                    border: 1px solid #88CD2E;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                }
                @media (max-width: 1199.98px) {
                    .co-hero-map { display: none; }
                }
                @media (max-width: 575.98px) {
                    .co-hero-inner { padding-top: 60px; padding-bottom: 52px; }
                    .co-hero-tags { gap: 14px; }
                }

#coWhy {
                    background: #121212;
                    padding: 72px 0 110px;
                    position: relative;
                    overflow: hidden;
                }
                .co-why-mockup {
                    position: absolute;
                    bottom: 200px;
                    right: calc(-6% + -40px);
                    width: 54%;
                    max-width: 1020px;
                    z-index: 0;
                    pointer-events: none;
                }
                .co-why-mockup img {
                    width: 100%;
                    display: block;
                    mix-blend-mode: lighten;
                }
                #coWhy .container { z-index: 1; }
                #coWhy .co-label { margin-bottom: 22px; display: block; font-size: 1.1rem; }
                .co-why-statement {
                    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
                    font-weight: 300;
                    color: #fff;
                    line-height: 1.4;
                    margin: 0 0 30px;
                    max-width: 560px;
                }
                .co-why-num { color: #88CD00; font-weight: 100; }
                .co-quote-wrap {
                    display: flex;
                    align-items: flex-start;
                    gap: 4px;
                    max-width: 720px;
                }
                .co-qmark {
                    font-size: clamp(3rem, 5.2vw, 4.6rem);
                    font-weight: 700;
                    color: #3C3C3B;
                    line-height: .6;
                }
                .co-qmark--open { margin-left: -.55em; padding-top: 0.1em; }
                .co-qmark--close { vertical-align: -.42em; line-height: 0; }
                .co-quote-headline {
                    font-size: clamp(1.7rem, 3.2vw, 3.8rem);
                    font-weight: 700;
                    color: #88CD00;
                    line-height: 1.18;
                    margin: 0;
                }
                .co-quote-block {
                    flex: 0 0 auto;
                    width: fit-content;
                    max-width: 720px;
                    min-width: 0;
                }
                .co-quote-rule {
                    width: 100%;
                    height: 1px;
                    background: #88CD00;
                    margin: 26px 0 22px;
                }
                .co-quote-body {
                    font-size: clamp(1.05rem, 1.5vw, 1.50rem);
                    color: #706F6F;
					font-weight:200;
                    line-height: 1.7;
                    margin: 0 0 56px;
                }
                .co-stats-box {
                    display: flex;
                    align-items: stretch;
                    border: 1px solid #3C3C3B;
                    border-radius: 5px;
                    flex-wrap: wrap;
                    position: relative;
                    background: #121212;
                }
                .co-stat { flex: 1 1 220px; padding: 26px 34px; }
                .co-stat--center .co-stat-top { justify-content: center; align-items: flex-start; }
                .co-stat--center .co-stat-lbl { text-align: left; padding-left: 64px; }
                .co-stat-num-wrap { display: flex; flex-direction: column; }
                .co-stat-num-wrap .co-stat-lbl { padding-left: 0; margin-top: 6px; }
                .co-stat-top {
                    display: flex;
                    align-items: center;
                    gap: 14px;
                    margin-bottom: 6px;
                }
                .co-stat-ico { flex: 0 0 50px; display: inline-flex; align-items: center; }
                .co-stat-num {
                    font-size: clamp(2.6rem, 3.77vw, 3.25rem);
                    font-weight: 400;
                    color: #88CD00;
                    line-height: 1;
                }
                .co-stat-lbl {
                    font-size: clamp(0.9rem, 1.5vw, 0.50rem);
                    font-weight: 200;
                    color: #fff;
                    line-height: 1.7;
                    padding-left: 64px;
                }
                .co-stat-sep { width: 2px; background: #3C3C3B; flex-shrink: 0; margin: 34px 0; }
                @media (min-width: 1100px) {
                    .co-why-mockup { bottom: 191px; }
                }
                @media (min-width: 1280px) {
                    .co-why-mockup { bottom: 184px; }
                }
                @media (min-width: 1440px) {
                    .co-why-mockup { bottom: 177px; }
                }
                @media (min-width: 1600px) {
                    .co-why-mockup { bottom: 165px; }
                }
                @media (min-width: 1920px) {
                    #coWhy { padding-top: 150px; }
                    .co-why-mockup { width: 48%; bottom: 157px; }
                }
                @media (max-width: 991.98px) {
                    .co-why-mockup { display: none; }
                }
                @media (max-width: 767.98px) {
                    .co-quote-block { flex: 1; width: auto; }
                    .co-quote-body br { display: none; }
                    .co-qmark--open { margin-left: 0; }
                    .co-quote-headline { font-size: 2rem; }
                    .co-stats-box { flex-direction: column; }
                    .co-stat-sep { width: auto; height: 1px; }
                    .co-stat { flex: none; padding: 24px 24px; }
                    .co-stat .co-stat-top { justify-content: center; align-items: center; flex-direction: column; }
                    .co-stat .co-stat-lbl { text-align: center; padding-left: 0; }
                    .co-stat-num-wrap { align-items: center; }
                }

#coFounders {
                    background: #EDEDED;
                    padding: 72px 0;
                }
                #coFounders .co-label { margin-bottom: 18px; display: block; font-size: 1.1rem; }
                .co-flabel {
                    font-size: 1.1rem;
                    font-weight: 500;
                    letter-spacing: .1em;
                    text-transform: uppercase;
                    color: #1D1D1B;
                    margin-bottom: 18px;
                }
                .co-founders-h2 {
                    font-size: clamp(2rem, 3.2vw, 2.5rem);
                    font-weight: 700;
                    color: #706F6F;
                    line-height: 1.25;
                    margin: 0 0 18px;
                }
                .co-founders-body {
                    font-size: 1.1rem;
                    color: #1D1D1B;
                    line-height: 1.7;
                    margin: 0;
                }
                /* carousel wrapper */
                .co-founder-carousel {
                    position: relative;
                    padding-right: 44px;
                }
                .co-founder-viewport {
                    overflow: hidden;
                }
                .co-founder-track {
                    display: flex;
                    gap: 6px;
                    transition: transform .4s ease;
                    will-change: transform;
                    align-items: stretch;
                }
                .co-founder-card {
                    background: #fff;
                    border-radius: 10px;
                    padding: 28px 18px 24px;
                    text-align: center;
                    flex: 0 0 calc(33.333% - 4px);
                    min-width: 0;
                    box-sizing: border-box;
                }
                .co-founder-avatar {
                    width: 116px;
                    height: 116px;
                    border-radius: 50%;
                    margin: 0 auto 18px;
                    background-size: 660%;
                    background-repeat: no-repeat;
                }
                .co-founder-name {
                    font-weight: 700;
                    font-size: 1.6rem;
                    color: #1D1D1B;
                    margin-bottom: 4px;
                }
                .co-founder-role {
                    font-size: 1.5rem;
                    font-weight: 500;
                    color: #88CD00;
                    margin-bottom: 14px;
                }
                .co-founder-rule {
                    width: 38px;
                    height: 3px;
                    background: #88CD2E;
                    margin: 0 auto 14px;
                }
                .co-founder-desc {
                    font-size: 1.23rem;
                    color: #706F6F;
                    line-height: 1.6;
                    margin: 0;
                }
                /* prev / next arrows — absolutely positioned outside viewport */
                .co-farrow {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    border: none;
                    background: #fff;
                    box-shadow: 0 2px 10px rgba(0,0,0,.15);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #88CD2E;
                    font-size: 1rem;
                    cursor: pointer;
                    z-index: 2;
                    transition: box-shadow .2s;
                }
                .co-fnext { right: 0; }
                .co-farrow:hover { box-shadow: 0 4px 14px rgba(0,0,0,.22); }
                .co-farrow:disabled { opacity: .3; cursor: default; }
                .co-fdots {
                    display: flex;
                    gap: 7px;
                    margin-top: 18px;
                }
                .co-fdots span {
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                    background: #88CD2E;
                    opacity: .35;
                    cursor: pointer;
                    transition: opacity .2s;
                }
                .co-fdots span.active { opacity: 1; }
                .co-logos-wrap {
                    background: #fff;
                    border-radius: 10px;
                    margin-top: 44px;
                    padding: 26px 34px 30px;
                }
                .co-logos-label {
                    font-size: 1.1rem;
                    font-weight: 500;
                    color: #1D1D1B;
                    margin: 0 0 18px;
                }
                .co-logos-arrows { display: flex; gap: 6px; }
                .co-logos-arrows button {
                    border: none;
                    background: none;
                    color: #88CD2E;
                    font-size: 1rem;
                    cursor: pointer;
                    padding: 2px 4px;
                }
                .co-logos-slider { overflow: hidden; position: relative; width: 100%; }
                .co-logos-track { display: flex; width: max-content; }
                .co-logos-track img { height: 46px; width: auto; display: block; flex: 0 0 auto; margin-right: 48px; }
                @media (max-width: 767.98px) {
                    .co-founder-card { flex: 0 0 calc(100% - 0px); }
                    .co-logos-wrap { padding: 22px 20px; }
                }

#coPlatform {
                    background: #1D1D1B;
                    padding: 56px 0 84px;
                }
                .co-label-line {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 18px;
                    margin-bottom: 20px;
                }
                .co-dash {
                    width: 86px;
                    height: 1px;
                    background: #88CD2E;
                    display: inline-block;
                }
                .co-plat-h2 {
                    font-size: clamp(1.6rem, 2.6vw, 3rem);
                    font-weight: 700;
                    color: #88CD00;
                    line-height: 1.25;
                    margin: 0 0 20px;
                }
                .co-plat-body {
                    font-size: clamp(.98rem, 1.9vw, 1.9rem);
                    color: #fff;
                    line-height: 1.5;
                    
                    margin: 0 auto 24px;
                    font-weight: 300;
                }
                .co-plat-body2 {
                    font-size: clamp(.9rem, 2.1vw, 1.7rem);
                    color: #707070;
                    line-height: 1.5;
                    font-weight: 100;
                    margin: 0 auto 48px;
                }
                .co-pillars {
                    display: flex;
                    gap: 18px;
                    justify-content: center;
                    flex-wrap: wrap;
                }
                .co-pillar {
                    border: 2px solid #B2B2B2;
                    border-radius: 8px;
                    padding: 22px 24px;
                    width: 280px;
                    text-align: left;
                }
                .co-pillar-ico {
                    width: 38px;
                    height: 38px;
                    border-radius: 50%;
                    border: 1px solid #88CD2E;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 14px;
                }
                .co-pillar-title {
                    font-size: 1.35rem;
                    font-weight: 700;
                    color: #fff;
                    margin-bottom: 6px;
                }
                .co-pillar-desc {
                    font-size: .92rem;
                    color: #B2B2B2;
                    line-height: 1.5;
                }
                @media (max-width: 575.98px) {
                    #coPlatform { padding: 52px 0; }
                    .co-pillar { width: 100%; }
                }

#coCta {
                    background: #F0F6ED;
                    padding: 56px 0 56px;
                }
                .co-cta-h2 {
                    font-size: clamp(2.6rem, 4.2vw, 5rem);
                    font-weight: 700;
                    color: #1D1D1B;
                    line-height: 1.1;
                    margin: 0 0 28px;
                }
                .co-cta-body {
                    font-size: clamp(2.05rem, 2.4vw, 2.0rem);
                    color: #B2B2B2;
                    line-height: 1.3;
                    max-width: 740px;
                    margin: 0 auto;
                }
                .co-btn--outline2 { background: transparent; color: #88CD00; border-color: #88CD00; }
                .co-btn--outline2:hover { background: #88CD00; color: #fff; }
                .co-cta-feats {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 22px;
                    flex-wrap: wrap;
                    margin-top: 40px;
                }
                .co-cta-feats > span:not(.co-cta-div) {
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    font-size: 1.08rem;
                    font-weight: 500;
                    color: #1D1D1B;
                }
                .co-cta-div { width: 2px; height: 18px; background: #707070; flex-shrink: 0; }
                @media (max-width: 575.98px) {
                    #coCta { padding: 52px 0; }
                    .co-cta-feats { flex-direction: column; gap: 12px; }
                    .co-cta-div { display: none; }
                }



/* ==========================================================================
   CONTACT PAGE  (contact.html)
   Layout/structure follows the signed-off design "Contact us.pdf".
   TYPE SCALE follows the live site (body 18px/27px, section headings 45px)
   rather than the comp's 15px body - see notes in the handover.
   ========================================================================== */

/* ---------- 1. How can we help you today (route cards) ---------- */
#ContactHero { background: #F0F6ED; padding: 50px 0 55px; }
#ContactHero .ct-title { font-size: 45px; line-height: 54px; font-weight: 700; color: #1d1d1b; margin: 0 0 4px; }
#ContactHero .ct-lead { font-size: 18px; line-height: 27px; color: #707070; margin: 0; }
#ContactHero .ct-routes { margin-top: 40px; --bs-gutter-x: 35px; --bs-gutter-y: 0; }

.ct-route { display: flex; flex-direction: column; height: 100%; min-height: 415px;
    border-radius: 7px; padding: 32px 50px 40px 55px; }
.ct-route--light { background: #fff; }
.ct-route--dark { background: #1d1d1b; }

.ct-route .ctr-title { font-size: 24px; line-height: 30px; font-weight: 700; margin: 0 0 16px; }
.ct-route--light .ctr-title { color: #1d1d1b; }
.ct-route--dark .ctr-title { color: #88CD00; }

.ct-route .ctr-kicker { font-size: 18px; line-height: 27px; color: #88CD00; margin: 0 0 10px; }
.ct-route--light .ctr-kicker { font-weight: 700; }

.ct-route .ctr-lead { font-size: 18px; line-height: 27px; margin: 0 0 10px; }
.ct-route--light .ctr-lead { color: #1d1d1b; }
.ct-route--dark .ctr-lead { color: #707070; }

.ct-route .ctr-list { list-style: none; margin: 0; padding: 0 0 0 10px; }
.ct-route .ctr-list li { font-size: 18px; line-height: 36px; color: #707070; }
.ct-route .ctr-list li::before { content: "\2022  "; color: #88CD00; }

.ct-route .ctr-note { font-size: 18px; line-height: 27px; margin: 18px 0 0; }
.ct-route--light .ctr-note { color: #707070; }
.ct-route--dark .ctr-note { color: #fff; margin-top: 4px; }

.ct-route .ctr-cta { margin-top: auto; padding-top: 24px; }

.btn-ct-solid, .btn-ct-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    height: 56px; padding: 0 26px; border-radius: 8px;
    font-size: 20px; font-weight: 700; text-decoration: none; transition: .3s ease; }
.btn-ct-solid { min-width: 300px; background: #88CD00; color: #fff; border: 1px solid #88CD00; }
.btn-ct-solid:hover { background: #7ac729; border-color: #7ac729; color: #fff; }
.btn-ct-outline { min-width: 256px; background: transparent; color: #88CD00; border: 1px solid #88CD00; }
.btn-ct-outline .bi { color: #fff; }
.btn-ct-outline:hover { background: #88CD00; color: #1d1d1b; }
.btn-ct-outline:hover .bi { color: #1d1d1b; }

/* ---------- 2. Contact details ---------- */
#ContactDetails { background: #fff; padding: 50px 0 50px; }
#ContactDetails .cd-title { font-size: 45px; line-height: 54px; font-weight: 700; color: #1d1d1b; margin: 0 0 6px; }
#ContactDetails .cd-cols { display: flex; flex-wrap: wrap; }
#ContactDetails .cd-c1 { width: 36.7%; }
#ContactDetails .cd-c2 { width: 29.8%; }
#ContactDetails .cd-c3 { width: 33.5%; }
#ContactDetails .cd-label { font-size: 18px; line-height: 27px; color: #707070; margin: 0 0 2px; }
#ContactDetails .cd-value { font-size: 18px; line-height: 27px; font-weight: 500; color: #3c3c3b;
    margin: 0; display: block; text-decoration: none; }
#ContactDetails a.cd-value:hover { color: #88CD00; }
#ContactDetails .cd-note { font-size: 18px; line-height: 27px; color: #707070; margin: 2px 0 0; }
#ContactDetails .cd-follow { margin-top: 16px; }
#ContactDetails .cd-social { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
#ContactDetails .cd-social a { color: #3c3c3b; display: inline-flex; transition: .3s ease; }
#ContactDetails .cd-social a:hover { color: #88CD00; }
#ContactDetails .cd-social svg { width: 24px; height: auto; }

/* ---------- 3. Contact form ---------- */
#ContactForm { background: #F0F6ED; padding: 46px 0 56px; }
#ContactForm .cf-title { font-size: 45px; line-height: 54px; font-weight: 700; color: #1d1d1b; margin: 0 0 10px; }
#ContactForm .cf-lead { font-size: 18px; line-height: 27px; color: #707070; margin: 0 0 24px; }

#ContactForm .cf-cols { display: flex; align-items: stretch; gap: 8px; }
#ContactForm .cf-formcard { flex: 0 0 63.3%; max-width: 63.3%;
    background: #fff; border-radius: 7px; padding: 34px 30px 30px; }
#ContactForm .cf-promise { flex: 1 1 auto; background: #1d1d1b; border-radius: 7px; padding: 30px 34px 34px; }

#ContactForm .cf-row { --bs-gutter-x: 24px; --bs-gutter-y: 0; margin-bottom: 18px; }
#ContactForm .cf-label { font-size: 14px; line-height: 21px; color: #1d1d1b; margin: 0 0 4px; display: block; }
#ContactForm .form-control,
#ContactForm .form-select { border: 1px solid #a9a9a9; border-radius: 5px; background-color: #fff;
    font-size: 16px; color: #1d1d1b; padding: 8px 14px; height: 46px; box-shadow: none; }
#ContactForm .form-select { height: 46px; padding: 8px 14px; color: #808284; }
#ContactForm textarea.form-control { height: 120px; resize: vertical; }
#ContactForm .form-control::placeholder { color: #808284; }
#ContactForm .form-control:focus,
#ContactForm .form-select:focus { border-color: #88CD00; box-shadow: 0 0 0 .2rem rgba(136, 205, 0, .15); }

#ContactForm .cf-consent-row { display: flex; align-items: flex-start; gap: 18px; margin: 22px 0 20px; }
#ContactForm .cf-consent { font-size: 12px; line-height: 18px; color: #808284; margin: 0; flex: 1 1 auto; }
#ContactForm .cf-consent a { color: #88CD00; text-decoration: none; }
#ContactForm .cf-consent a:hover { text-decoration: underline; }
#ContactForm .cf-recaptcha { flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
    width: 168px; height: 40px; background: #4285f4; border-radius: 2px; padding: 0 8px; }
#ContactForm .cf-recaptcha-mark { width: 24px; height: 24px; border-radius: 50%;
    border: 3px solid #fff; border-right-color: #1a73e8; flex: 0 0 24px; }
#ContactForm .cf-recaptcha-txt { display: flex; flex-direction: column; color: #fff;
    font-size: 10px; line-height: 13px; }
#ContactForm .cf-recaptcha-txt small { font-size: 8px; opacity: .85; }

#ContactForm .btn-cf-submit { width: 260px; height: 64px; border: 0; border-radius: 10px;
    background: #88CD00; color: #f5f5f5; font-size: 24px; font-weight: 700; transition: .3s ease; }
#ContactForm .btn-cf-submit:hover { background: #7ac729; }

#ContactForm .cf-promise-title { font-size: 24px; line-height: 32px; font-weight: 700; color: #88CD00; margin: 0 0 18px; }
#ContactForm .cf-promise-lead { font-size: 18px; line-height: 27px; color: #707070; margin: 0 0 28px; }
#ContactForm .cf-promise-list { list-style: none; margin: 0; padding: 0; }
#ContactForm .cf-promise-list li { position: relative; padding-left: 16px; margin-bottom: 16px; }
#ContactForm .cf-promise-list li:last-child { margin-bottom: 0; }
#ContactForm .cf-promise-list li::before { content: "\2022"; position: absolute; left: 0; top: 0;
    color: #88CD00; font-size: 18px; font-weight: 700; line-height: 26px; }
#ContactForm .cf-promise-list h3 { font-size: 18px; line-height: 26px; font-weight: 700; color: #fff; margin: 0 0 4px; }
#ContactForm .cf-promise-list p { font-size: 18px; line-height: 27px; color: #707070; margin: 0; }

/* ---------- 4. Footer (shared: contact / bidfunction / pricing) ---------- */
#FooterNew { background: #1d1d1b; padding: 46px 0 42px; }
#FooterNew .fn-cols { display: flex; flex-wrap: wrap; }
#FooterNew .fn-c1 { width: 28.6%; }
#FooterNew .fn-c2 { width: 17.6%; }
#FooterNew .fn-c3 { width: 22.5%; }
#FooterNew .fn-c4 { width: 13.1%; }
#FooterNew .fn-c5 { width: 18.2%; }
#FooterNew .fn-brand img { display: block; height: auto; max-width: 100%; }
#FooterNew .fn-blurb { font-size: 15px; line-height: 24px; color: #b2b2b2; margin: 12px 0 0; }
#FooterNew .fn-head { font-size: 16px; line-height: 24px; font-weight: 700; color: #88CD00; margin: 18px 0 10px; }
#FooterNew .fn-list { list-style: none; margin: 0; padding: 0; }
#FooterNew .fn-list li { line-height: 26px; }
#FooterNew .fn-list li::before { content: "\2022 "; color: #88CD00; font-size: 14px;padding-right:2px; }
#FooterNew .fn-list a { font-size: 13px; color: #fff; text-decoration: none; }
#FooterNew .fn-list a:hover { color: #88CD00; }

#FooterNew .fn-contact { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
#FooterNew .fn-contact:last-child { margin-bottom: 0; }
#FooterNew .fn-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    background: #88CD00; color: #fff; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center; }
#FooterNew .fn-ct-label { font-size: 16px; line-height: 24px; font-weight: 700; color: #88CD00;
    display: block; text-decoration: none; }
#FooterNew a.fn-ct-label:hover { color: #fff; }
#FooterNew .fn-ct-value { font-size: 14px; line-height: 21px; color: #808080; display: block;
    margin-top: 2px; text-decoration: none; }
#FooterNew .fn-ct-value:hover { color: #88CD00; }

#FooterNew .fn-bottom { display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-top: 34px; padding-top: 18px; border-top: 1px solid #7ac729; }
#FooterNew .fn-copy { font-size: 14px; line-height: 21px; color: #b2b2b2; margin: 0; }
#FooterNew .fn-copy a { color: #b2b2b2; text-decoration: none; }
#FooterNew .fn-copy a:hover { color: #88CD00; }
#FooterNew .fn-social { display: flex; align-items: center; gap: 14px; }
#FooterNew .fn-social a { color: #88CD00; display: inline-flex; transition: .3s ease; }
#FooterNew .fn-social a:hover { color: #fff; }

/* ---------- Contact page: responsive ---------- */
@media (max-width: 1199.98px) {
    .ct-route { padding: 32px 34px 40px; }
    #ContactForm .cf-formcard { flex: 0 0 62%; max-width: 62%; }
    #ContactForm .cf-promise { padding: 30px 26px 34px; }
    .btn-ct-solid { min-width: 0; width: 100%; }
    .btn-ct-outline { min-width: 0; width: 100%; }
}

@media (max-width: 991.98px) {
    #ContactHero { padding: 40px 0 44px; }
    #ContactHero .ct-routes { margin-top: 32px; --bs-gutter-x: 24px; --bs-gutter-y: 24px; }
    .ct-route { min-height: 0; }

    #ContactDetails .cd-c1,
    #ContactDetails .cd-c2,
    #ContactDetails .cd-c3 { width: 100%; margin-bottom: 28px; }
    #ContactDetails .cd-c3 { margin-bottom: 0; }

    #ContactForm .cf-cols { flex-direction: column; gap: 16px; }
    #ContactForm .cf-formcard,
    #ContactForm .cf-promise { flex: 1 1 auto; max-width: 100%; }

    #FooterNew .fn-c1 { width: 100%; margin-bottom: 26px; }
    #FooterNew .fn-c2,
    #FooterNew .fn-c3,
    #FooterNew .fn-c4,
    #FooterNew .fn-c5 { width: 50%; margin-bottom: 22px; }
    #FooterNew .fn-head { margin-top: 0; }
}

@media (max-width: 575.98px) {
    #ContactHero .ct-title,
    #ContactDetails .cd-title,
    #ContactForm .cf-title { font-size: 32px; line-height: 40px; }
    .ct-route { padding: 26px 22px 32px; }
    .ct-route .ctr-title { font-size: 21px; line-height: 28px; }
    .btn-ct-solid, .btn-ct-outline { min-width: 100%; width: 100%; font-size: 17px; padding: 0 14px; }
    #ContactForm .cf-formcard { padding: 26px 18px 24px; }
    #ContactForm .cf-promise { padding: 26px 20px 28px; }
    #ContactForm .cf-consent-row { flex-direction: column; gap: 14px; }
    #ContactForm .btn-cf-submit { width: 100%; font-size: 21px; }
    #FooterNew .fn-c2,
    #FooterNew .fn-c3,
    #FooterNew .fn-c4,
    #FooterNew .fn-c5 { width: 100%; }
    #FooterNew .fn-bottom { justify-content: flex-start; }
}





/* ==========================================================================
   BIDFUNCTION PAGE  (bidfunction.html)
   Built to signed-off design "BidFunction page.pdf" (1194px artboard).
   Type sizes, line-heights, colours and radii taken from the comp;
   layout width follows the site .container.
   ========================================================================== */

/* ---------- shared bits ---------- */
.bf-eyebrow { display: flex; align-items: center; justify-content: center; gap: 29px; }
.bf-rule { display: block; width: 64px; height: 1px; background: #88CD2E; }
.bf-eyebrow-text { font-size: 18px; line-height: 24px; font-weight: 700; }
.bf-eyebrow--dark .bf-eyebrow-text { color: #1d1d1b; }
.bf-eyebrow--green .bf-eyebrow-text { color: #88CD00; }

.bf-h2 { font-size: 45px; line-height: 54px; font-weight: 400; margin: 0; }
.bf-h2--dark { color: #1d1d1b; }
.bf-h2--light { color: #fff; }
.bf-h2--light span { color: #88CD00; }
.bf-h2--mix strong { color: #1d1d1b; font-weight: 700; }

.bf-lead { font-size: 18px; line-height: 28px; color: #707070; margin: 0; }
.bf-lead strong { color: #707070; font-weight: 700; }
.bf-lead--light { color: #b2b2b2; }
.bf-lead--light strong { color: #b2b2b2; }

.bf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    height: 52px; padding: 0 24px; border-radius: 8px;
    font-size: 20px; line-height: 1; font-weight: 700; text-decoration: none; transition: .3s ease; }
.bf-btn-solid { background: #88CD00; color: #fff; border: 1px solid #88CD00; }
.bf-btn-solid:hover { background: #7ac729; border-color: #7ac729; color: #fff; }
.bf-btn-ghost { background: transparent; color: #fff; border: 1px solid #88CD2E; }
.bf-btn-ghost:hover { background: #fff; color: #1d1d1b; }

/* ---------- 1. Hero ---------- */
/* The comp's content area is 970 wide; ours is wider, so the hero is scaled by --k
   (= our content width / 970) instead of using the comp's absolute px. That keeps the
   headline and diagram the same FRACTION of the content width as the PDF:
   H1 = 61% of content, diagram = 46%.  Comp values are kept literal in the calc()s. */
#bfHero { --k: 1.336;                       /* >=1400: content 1296 / 970 */
    background: #1d1d1b; padding: calc(60px * var(--k)) 0 calc(51px * var(--k)); overflow: hidden; }
#bfHero .container { position: relative; }
#bfHero .bf-hero-copy { position: relative; z-index: 2; max-width: calc(600px * var(--k)); }
#bfHero .bf-hero-title { font-size: calc(65px * var(--k)); line-height: calc(70px * var(--k));
    font-weight: 400; color: #fff; margin: 0; }
#bfHero .bf-hero-title span { color: #88CD00; font-weight: 700; }
#bfHero .bf-hero-lead { font-size: calc(23px * var(--k)); line-height: calc(30px * var(--k));
    color: #b2b2b2; margin: calc(27px * var(--k)) 0 0; max-width: calc(570px * var(--k)); }
#bfHero .bf-hero-kicker { font-size: calc(21px * var(--k)); line-height: calc(28px * var(--k));
    color: #88CD00; margin: calc(39px * var(--k)) 0 0; }
#bfHero .bf-hero-cta { display: flex; flex-wrap: wrap; gap: calc(30px * var(--k)); margin-top: calc(40px * var(--k)); }
#bfHero .bf-btn { height: calc(52px * var(--k)); font-size: calc(18px * var(--k)); padding: 0 calc(24px * var(--k)); }
#bfHero .bf-btn-solid { min-width: calc(259px * var(--k)); }
#bfHero .bf-btn-ghost { min-width: calc(168px * var(--k)); }
/* asset is the PDF's native 1789x1702 bitmap; alpha bbox puts the art at design
   x677.5 y163.5, 447.3x425.5, bleeding 42.8px past the right content edge.
   The container's 12px padding is not part of the design, so it is not scaled. */
#bfHero .bf-hero-figure { position: absolute; z-index: 1; display: block;
    top: calc(-22.5px * var(--k));
    /* bleed past the content edge, but never further than the viewport margin allows */
    right: calc(-1 * min(42.8px * var(--k) - 12px, (100vw - 100%) / 2 - 12px)); }
#bfHero .bf-hero-img { display: block; width: calc(447.3px * var(--k)); height: calc(425.5px * var(--k)); }

/* ---------- 2. Why BidFunction ---------- */
#bfWhy { --k: 1.336; background: #F0F6ED; padding: 50px 0 51px; }
#bfWhy .bf-eyebrow { margin-bottom: 25px; }
#bfWhy .bf-h2 { margin-bottom: 18px; }
#bfWhy .bf-lead { margin-bottom: 17px; }

.bf-prob-row { display: flex; gap: 8px; }
.bf-prob { flex: 1 1 0; border-radius: 8px; padding: 28px 38px 33px; min-height: 192px; }
.bf-prob--light { background: #fff; }
.bf-prob--dark { background: #1d1d1b; }
.bf-prob-head { display: flex; align-items: center; gap: 16px; }
.bf-prob-ico { flex: 0 0 45px; width: 45px; height: 45px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; }
.bf-prob--light .bf-prob-ico { background: #b2b2b2; color: #fff; }
.bf-prob--dark .bf-prob-ico { background: #3c3c3b; color: #88CD00; }
.bf-prob-title { font-size: 24px; line-height: 30px; font-weight: 700; margin: 0; }
.bf-prob--light .bf-prob-title { color: #707070; }
.bf-prob--dark .bf-prob-title { color: #88CD00; }
.bf-prob-body { font-size: 18px; line-height: 27px; margin: 26px 0 0; }
.bf-prob--light .bf-prob-body { color: #706f6f; }
.bf-prob--dark .bf-prob-body { color: #b2b2b2; }

#bfWhy .bf-divider { border: 0; border-top: 1px solid #3c3c3b; opacity: 1; margin: 51px 0 46px; }
#bfWhy .bf-h2--mix { margin-bottom: 15px; }
#bfWhy .bf-h2--mix + .bf-lead { margin-bottom: 48px; }

/* comp: cards 415px and gap 93px inside a 970px content area -> 42.8% / 9.6% */
.bf-cmp { display: flex; align-items: flex-start; gap: 9.6%; position: relative; }
.bf-cmp-card { flex: 0 0 42.8%; max-width: 42.8%; border-radius: 10px; padding: 20px 43px 31px; position: relative; }
.bf-cmp-card--light { background: #fff; }
.bf-cmp-card--dark { background: #1d1d1b; overflow: hidden; }
.bf-cmp-title { font-size: 26px; line-height: 32px; font-weight: 700; margin: 0 0 24px; }
.bf-cmp-card--light .bf-cmp-title { color: #1d1d1b; }
.bf-cmp-card--dark .bf-cmp-title { color: #88CD00; }
.bf-cmp-list { list-style: none; margin: 0; padding: 0; }
.bf-cmp-list li { font-size: 18px; line-height: 26px; padding: 0 0 14px; margin-bottom: 17px; }
.bf-cmp-card--light .bf-cmp-list li { color: #707070; border-bottom: 1px solid #707070; }
.bf-cmp-card--dark .bf-cmp-list li { color: #fff; border-bottom: 1px solid #88CD2E; }
/* comp has 7 dividers for 8 rows - no rule under the last item. This must sit AFTER the
   two colour rules above and outweigh them, or they put the border back. */
.bf-cmp-card .bf-cmp-list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
/* comp: circle is 118 wide against a 93 gap, so it deliberately overlaps BOTH cards
   (10 left, 15 right). It must scale with the container or it just sits inside the gap. */
.bf-cmp-arrow { position: absolute; left: 47.84%; top: 38%; transform: translateX(-50%);
    width: calc(118px * var(--k)); height: calc(118px * var(--k));
    border-radius: 50%; background: #88CD00; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: calc(44px * var(--k)); z-index: 2; }
.bf-cmp-badge { position: absolute; top: 0; right: 26px; width: 108px; height: 67px;
    border-radius: 0 0 54px 54px; background: #88CD00; color: #fff;
    font-size: 11px; line-height: 13px; font-weight: 700; text-align: center;
    display: flex; align-items: center; justify-content: center; padding: 0 8px 12px; }

/* ---------- 3. Your CBO-led BidFunction ---------- */
#bfCbo { background: #1d1d1b; padding: 43px 0 51px; }
#bfCbo .bf-eyebrow { margin-bottom: 25px; }
#bfCbo .bf-h2 { margin-bottom: 8px; }
#bfCbo .bf-lead { margin-bottom: 27px; }

.bf-cbo-row { display: flex; gap: 8px; }
.bf-cbo-card { flex: 1 1 0; border-radius: 8px; padding: 22px 27px 42px; min-height: 192px; }
.bf-cbo-card--light { background: #fff; }
.bf-cbo-card--grey { background: #3c3c3b; }
.bf-cbo-title { font-size: 24px; line-height: 30px; font-weight: 700; margin: 0 0 23px; }
.bf-cbo-card--light .bf-cbo-title { color: #1d1d1b; }
.bf-cbo-card--grey .bf-cbo-title { color: #fff; }
.bf-cbo-rule { display: block; max-width: 100%; height: 2px; background: #88CD2E; }
.bf-cbo-body { font-size: 16px; line-height: 25px; margin: 20px 0 0; }
.bf-cbo-card--light .bf-cbo-body { color: #706f6f; }
.bf-cbo-card--grey .bf-cbo-body { color: #b2b2b2; }

.bf-cbo-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px;
    flex-wrap: wrap; margin-top: 30px; }
.bf-cbo-note { font-size: 18px; line-height: 27px; font-weight: 700; color: #88CD00; margin: 0; }
#bfCbo .bf-btn-solid { min-width: 259px; }

/* ---------- 4. What your BidFunction delivers ---------- */
#bfDelivers { background: #3c3c3b; padding: 49px 0 51px; }
#bfDelivers .bf-eyebrow { margin-bottom: 36px; }
/* comp sets this heading in the bold face (f3), unlike the mixed-weight ones */
#bfDelivers .bf-h2 { margin-bottom: 15px; font-weight: 700; }
/* comp: left col text ends ~558, right col starts 636.9 -> 77pt gap = 7.9% of the content
   width (a % gutter keeps that proportion instead of a fixed 68px) */
#bfDelivers .bf-del-row { --bs-gutter-x: 7.9%; --bs-gutter-y: 0; }
.bf-del-bold { font-size: 18px; line-height: 28px; font-weight: 700; color: #b2b2b2; margin: 36px 0 12px; }
.bf-del-body { font-size: 18px; line-height: 28px; color: #b2b2b2; margin: 0; }
/* comp: "What You Get" (x668) lines up with the item TEXT (x666-668), not the checks (x636.9) */
.bf-del-get { font-size: 24px; line-height: 30px; font-weight: 700; color: #88CD00;
    margin: 0 0 12px; padding-left: 32px; }
.bf-del-list { list-style: none; margin: 0; padding: 0; }
.bf-del-list li { position: relative; padding-left: 32px; font-size: 18px; line-height: 28px;
    color: #b2b2b2; margin-bottom: 16px; }
.bf-del-list li:last-child { margin-bottom: 0; }
/* design asset: images/check2.webp (32x30). Comp check ink is 19.1 wide, sitting ~31 to the
   left of the text and roughly on the first line's cap height. */
.bf-del-list li::before { content: ""; position: absolute; left: 0; top: 4px;
    width: 20px; height: 19px;
    background: url("../images/check2.webp") no-repeat center / contain; }

.bf-tasks-title { font-size: 24px; line-height: 30px; font-weight: 700; color: #fff; margin: 6px 0 0; }
.bf-tasks { display: flex; gap: 76px; margin-top: 10px; border-top: 2px solid #88CD2E; }
.bf-tasks-col { flex: 1 1 0; list-style: none; margin: 0; padding: 0; }
.bf-tasks-col li { font-size: 17px; line-height: 24px; color: #b2b2b2;
    min-height: 54px; padding: 8px 0; display: flex; align-items: center; border-bottom: 1px solid #88CD2E; }
.bf-del-foot { font-size: 18px; line-height: 27px; font-weight: 700; color: #b2b2b2; margin: 33px 0 0; }
#bfDelivers .bf-btn-solid { min-width: 208px; margin-top: 25px; }

/* ---------- 5. The strategic bidding framework ---------- */
#bfFramework { background: #fff; padding: 48px 0 51px; }
#bfFramework .bf-eyebrow { margin-bottom: 21px; }
/* comp sets this heading in the bold face (f3) */
#bfFramework .bf-h2 { margin-bottom: 9px; font-weight: 700; }
#bfFramework .bf-lead { margin-bottom: 23px; }

.bf-fw-row { display: flex; gap: 6.5px; }
.bf-fw-card { flex: 1 1 0; min-height: 220px; border: 1px solid #88CD2E; border-radius: 10px;
    padding: 13px 14px 18px; }
.bf-fw-card--dark { background: #1d1d1b; }
.bf-fw-num { display: block; font-size: 24px; line-height: 30px; font-weight: 700; color: #88CD00; }
.bf-fw-title { font-size: 18px; line-height: 24px; font-weight: 700; margin: 4px 0 0; }
.bf-fw-card .bf-fw-title { color: #1d1d1b; }
.bf-fw-card--dark .bf-fw-title { color: #fff; }
.bf-fw-rule { display: block; height: 2px; background: #88CD2E; margin: 10px 0 0; }
.bf-fw-body { font-size: 15px; line-height: 22px; margin: 16px 0 0; }
.bf-fw-card .bf-fw-body { color: #707070; }
.bf-fw-card--dark .bf-fw-body { color: #b2b2b2; }

.bf-fw-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px;
    flex-wrap: wrap; margin-top: 40px; }
.bf-fw-note { font-size: 26px; line-height: 32px; font-weight: 700; color: #3C3C3B; margin: 0; }
#bfFramework .bf-btn-solid { min-width: 309px; }

/* ---------- 6. Our sector experience ---------- */
#bfSectors { --k: 1.336; background: #EBEBEB; padding: 47px 0 43px; }
/* comp sets this heading in the bold face (f3) */
#bfSectors .bf-h2 { margin-bottom: 26px; font-weight: 700; }
.bf-sector-wrap { display: flex; align-items: center; gap: 18px; }
.bf-sector-viewport { flex: 1 1 auto; overflow: hidden; }
.bf-sector-track { display: flex; align-items: center; justify-content: space-between; gap: 30px;
    transition: transform .45s ease; }
.bf-sector-track picture { flex: 0 0 auto; }
/* comp: logos are 39pt tall, arrows 67.5pt tall in #C6C6C6 - scaled by the section's k */
.bf-sector-track img { display: block; height: calc(39px * var(--k)); width: auto; }
/* thin outline chevrons, not the chunky Bootstrap glyph */
.bf-sector-nav { flex: 0 0 auto; border: 0; background: transparent; padding: 0;
    width: calc(18px * var(--k)); height: calc(67.5px * var(--k));
    background-repeat: no-repeat; background-position: center; background-size: contain;
    transition: opacity .3s ease; }
.bf-sector-nav i { display: none; }
.bf-sector-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 68' fill='none' stroke='%23C6C6C6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16,2 2,34 16,66'/%3E%3C/svg%3E"); }
.bf-sector-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 68' fill='none' stroke='%23C6C6C6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,2 16,34 2,66'/%3E%3C/svg%3E"); }
.bf-sector-nav:hover { opacity: .65; }
.bf-sector-nav:disabled { opacity: .35; cursor: default; }

/* ---------- 7. Leading organisations ---------- */
#bfOrgs { background: #fff; padding: 49px 0 32px; }
.bf-orgs-title { font-size: 45px; line-height: 54px; font-weight: 400; color: #706f6f; margin: 0 0 24px; }
/* comp: strip spans the full content width (970.5 of 970) at aspect 23.05 */
.bf-orgs-strip { display: block; width: 100%; max-width: none; height: auto; }

/* ---------- 8. Build the bid function ---------- */
#bfBuild { background: #1d1d1b; padding: 42px 0 40px; }
#bfBuild .bf-build-row { --bs-gutter-x: 0; }
/* comp line breaks: "Build the bid" / "function your growth" / "ambitions require."
   -> max-width must clear 413 ("function your growth") but stay under 424
   ("Build the bid function"), or "function" jumps up to line 1. */
.bf-build-title { font-size: 45px; line-height: 54px; font-weight: 400; color: #88CD00;
    margin: 8px 0 0; max-width: 418px; }
/* comp body is 3 lines; longest is 563 ("BidFunction(TM) around your organisation...")
   and it must stay under 595 or line 2 pulls "BidFunction(TM)" up. */
.bf-build-body { font-size: 18px; line-height: 28px; color: #b2b2b2; margin: 0 0 20px; max-width: 570px; }
/* comp columns: title starts x112, body x556 of the 970 content -> 45.8% / 54.2% */
#bfBuild .bf-build-row > [class*="col-"]:first-child { flex: 0 0 45.8%; max-width: 45.8%; }
#bfBuild .bf-build-row > [class*="col-"]:last-child { flex: 0 0 54.2%; max-width: 54.2%; }
#bfBuild .bf-btn-solid { min-width: 259px; }

/* ---------- 9. Contact form ---------- */
#bfContact { background: #3c3c3b; padding: 49px 0 51px; }
.bf-cf-title { font-size: 45px; line-height: 54px; font-weight: 700; color: #88CD00; margin: 0 0 50px; }
.bf-cf-cols { display: flex; gap: 55px; align-items: flex-start; }
.bf-cf-form { flex: 0 0 478px; max-width: 478px; }
.bf-cf-aside { flex: 1 1 auto; padding-top: 12px; }

.bf-cf-row { --bs-gutter-x: 8px; --bs-gutter-y: 0; margin-bottom: 15px; }
.bf-cf-form .bf-cf-row:nth-of-type(3) { margin-bottom: 25px; }
.bf-cf-form .bf-cf-row:nth-of-type(4) .bf-cf-label { margin-bottom: 8px; }
.bf-cf-label { display: block; font-size: 14px; line-height: 21px; color: #88CD00; margin: 0 0 4px; }
#bfContact .form-control { border: 1px solid #a9a9a9; border-radius: 5px; background-color: #fff;
    font-size: 16px; color: #1d1d1b; padding: 8px 14px; height: 46px; box-shadow: none; }
#bfContact textarea.form-control { height: 130px; resize: vertical; padding: 10px 14px; }
#bfContact .form-control::placeholder { color: #b3b4b5; }
#bfContact .form-control:focus { border-color: #88CD00; box-shadow: 0 0 0 .2rem rgba(136, 205, 0, .15); }

.bf-cf-consent-row { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 17px; }
.bf-cf-check { flex: 0 0 10px; width: 10px; height: 10px; margin: 2px 0 0;
    border: 1px solid #706f6f; border-radius: 0; background: transparent; appearance: none; }
.bf-cf-check:checked { background: #88CD00; border-color: #88CD00; }
.bf-cf-consent { flex: 1 1 auto; font-size: 12px; line-height: 18px; color: #b2b2b2; margin: 0; }
.bf-cf-consent a { color: #88CD00; text-decoration: none; }
.bf-cf-consent a:hover { text-decoration: underline; }
.bf-cf-recaptcha { flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
    width: 168px; height: 40px; background: #4285f4; border-radius: 2px; padding: 0 8px; }
.bf-cf-recaptcha-mark { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
    border: 3px solid #fff; border-right-color: #1a73e8; }
.bf-cf-recaptcha-txt { display: flex; flex-direction: column; color: #fff; font-size: 10px; line-height: 13px; }
.bf-cf-recaptcha-txt small { font-size: 8px; opacity: .85; }
.bf-cf-submit { width: 260px; height: 64px; border: 0; border-radius: 10px;
    background: #88CD00; color: #fff; font-size: 24px; font-weight: 700; transition: .3s ease; }
.bf-cf-submit:hover { background: #7ac729; }

.bf-cf-aside-title { font-size: 40px; line-height: 48px; font-weight: 700; color: #88CD00; margin: 0 0 10px; }
.bf-cf-aside-body { font-size: 20px; line-height: 28px; color: #b2b2b2; margin: 0 0 29px; max-width: 440px; }
.bf-cf-aside-sub { font-size: 20px; line-height: 26px; font-weight: 700; color: #fff; margin: 0 0 23px; }
.bf-cf-contact { display: flex; align-items: center; gap: 9px; margin-bottom: 41px; }
.bf-cf-contact:last-child { margin-bottom: 0; }
.bf-cf-ico { flex: 0 0 41px; width: 41px; height: 41px; border-radius: 50%; background: #88CD00;
    color: #fff; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.bf-cf-ct-label { display: block; font-size: 20px; line-height: 26px; font-weight: 700; color: #88CD00; }
.bf-cf-ct-value { display: block; font-size: 18px; line-height: 26px; color: #808080; text-decoration: none; }
.bf-cf-ct-value:hover { color: #88CD00; }

/* ---------- responsive ---------- */
/* the hero scales with the Bootstrap container, so --k changes at each container step */
@media (max-width: 1399.98px) {
    #bfHero, #bfWhy, #bfSectors { --k: 1.1505; }   /* container 1140 -> content 1116 / 970 */
}

@media (max-width: 1199.98px) {
    /* container drops to 960 -> content 936, so the hero and the VS circle rescale together */
    #bfHero, #bfWhy, #bfSectors { --k: 0.965; }    /* 936 / 970 */
    .bf-cmp { gap: 8%; }
    .bf-cmp-card { flex: 0 0 46%; max-width: 46%; padding: 20px 30px 31px; }
    .bf-cmp-arrow { left: 50%; }
    .bf-tasks { gap: 40px; }
    #bfDelivers .bf-del-row { --bs-gutter-x: 40px; }
    .bf-cf-cols { gap: 32px; }
    .bf-cf-form { flex: 0 0 55%; max-width: 55%; }
    .bf-build-title { font-size: 36px; line-height: 44px; }
}

@media (max-width: 991.98px) {
    #bfHero { padding: 44px 0 44px; }
    #bfHero .bf-hero-title { font-size: 42px; line-height: 48px; }
    #bfHero .bf-hero-lead { font-size: 19px; line-height: 26px; }
    #bfHero .bf-hero-kicker { font-size: 18px; }
    #bfHero .bf-hero-copy { max-width: none; }
    #bfHero .bf-hero-figure { position: static; display: block; margin-top: 40px; }
    #bfHero .bf-hero-img { width: 100%; max-width: 448px; height: auto; margin: 0 auto; }

    .bf-prob-row, .bf-cbo-row, .bf-fw-row { flex-wrap: wrap; gap: 16px; }
    .bf-prob, .bf-cbo-card { flex: 1 1 100%; min-height: 0; }
    .bf-prob { padding: 24px 26px 28px; }

    /* stacked: the arrow already sits between the two cards in the markup, so drop it back
       into the flow. Absolute positioning pushed it past the container and into the next
       section; in the flow it always lands in the gap whatever height the cards are. */
    .bf-cmp { flex-direction: column; gap: 24px; }
    .bf-cmp-card { flex: 1 1 auto; max-width: none; width: 100%; }
    .bf-cmp-arrow { position: static; align-self: center; transform: rotate(90deg);
        margin: 0; width: 90px; height: 90px; font-size: 34px; z-index: 2; }

    #bfDelivers .bf-del-row { --bs-gutter-x: 24px; --bs-gutter-y: 0; }
    .bf-del-bold { margin-top: 24px; }
    .bf-del-bold, .bf-del-body, .bf-del-list { max-width: none; }
    .bf-tasks { flex-wrap: wrap; gap: 0; }
    .bf-tasks-col { flex: 1 1 100%; }

    .bf-fw-card { flex: 1 1 calc(50% - 8px); min-height: 0; }

    #bfBuild .bf-build-row { --bs-gutter-y: 24px; }
    .bf-build-title { max-width: none; }

    .bf-cf-cols { flex-direction: column; gap: 40px; }
    .bf-cf-form, .bf-cf-aside { flex: 1 1 auto; max-width: 100%; width: 100%; padding-top: 0; }
}

@media (max-width: 575.98px) {
    #bfHero .bf-hero-title { font-size: 36px; line-height: 44px; }
    .bf-h2, .bf-orgs-title { font-size: 32px; line-height: 40px; }
    .bf-eyebrow { gap: 14px; }
    .bf-rule { width: 32px; }
    .bf-eyebrow-text { font-size: 13px; }
    .bf-btn { width: 100%; min-width: 0 !important; font-size: 16px; padding: 0 14px; }
    #bfHero .bf-hero-cta { gap: 16px; }
    .bf-fw-card { flex: 1 1 100%; }
    .bf-cf-title, .bf-cf-aside-title { font-size: 28px; line-height: 34px; }
    .bf-cf-consent-row { flex-wrap: wrap; }
    .bf-cf-submit { width: 100%; }
    .bf-build-title { font-size: 30px; line-height: 38px; }
    .bf-cmp-badge { right: 20px; }
}


/* ==========================================================================
   PRICING PAGE  (pricing.html)
   Built to signed-off design "Pricing.pdf" (1194px artboard).
   ========================================================================== */

/* ---------- shared ---------- */
.pr-h2 { font-size: 45px; line-height: 54px; font-weight: 700; margin: 0; }
.pr-h2--dark { color: #1d1d1b; }
.pr-h2--light { color: #fff; }
.pr-lead { font-size: 20px; line-height: 27px; color: #707070; margin: 0; }
/* comp: the lead on the dark band is #707070, same as the light bands */
.pr-lead--light { color: #707070; }

/* ---------- 1. Plans ---------- */
#prPlans { background: #F0F6ED; padding: 47px 0 47px; }
#prPlans .pr-title { font-size: 45px; line-height: 54px; font-weight: 700; color: #1d1d1b; margin: 0; }
#prPlans .pr-lead { margin: 0 0 27px; }

.pr-cards { display: flex; align-items: stretch; gap: 8px; }
.pr-card { flex: 1 1 0; display: flex; flex-direction: column; background: #fff;
    border: 2px solid transparent; border-radius: 6px; padding: 17px 13px 22px; }
.pr-card--featured { border-color: #80c12b; padding-top: 13px; }

.pr-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    height: 29.5px; padding: 0 8px; border-radius: 3px; background: #88CD00; color: #fff;
    font-size: 12px; line-height: 1; font-weight: 400; letter-spacing: .02em; margin-bottom: 6px; }
.pr-badge .bi { font-size: 9px; }

.pr-card-title { font-size: 38px; line-height: 38px; font-weight: 500; color: #1d1d1b; margin: 0; }
.pr-card-sub { font-size: 20px; line-height: 27px; color: #88CD00; margin: 2px 0 0; }
.pr-card-label { font-size: 19px; line-height: 27px; color: #1d1d1b; margin: 15px 0 0; }
.pr-price { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.pr-price-main { font-size: 63px; line-height: 50px; font-weight: 700; color: #707070; }
.pr-price-main--green { color: #88CD00;font-weight:300; }
/* comp: unit sits at the top of the numeral (/Hour baseline is 14px above £60's) */
.pr-price-unit { font-size: 17px; line-height: 22px; color: #706f6f; margin-top: 7px; }
.pr-price-unit--stack { align-self: center; margin-top: 0; }
.pr-card-note { font-size: 18px; line-height: 26px; color: #3C3C3B; margin: 0; }
.pr-card-note--green { color: #88CD00; }
.pr-card-rule { display: block; height: 1px; background: #707070; margin: 25px 0 0; }
.pr-card-desc { font-size: 20px; line-height: 28px; color: #707070; margin: 23px 0 0; }

.pr-features { list-style: none; margin: 21px 0 40px; padding: 0; }
/* comp: 16px / 25px line-height */
.pr-features li { position: relative; padding-left: 24px; font-size: 16px; line-height: 25px;
    color: #707070; margin-bottom: 18px; }
.pr-features li:last-child { margin-bottom: 0; }
/* design asset: images/Green-Tick.svg is 12.695 x 13.602 (the comp's tick box), +20% per request */
.pr-features li::before { content: ""; position: absolute; left: 0; top: 3px;
    width: 15.2px; height: 16.3px;
    background: url("../images/Green-Tick.svg") no-repeat center / contain; }

.pr-card .pr-btn { margin-top: auto; }
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    height: 52px; border-radius: 6px; background: #88CD00; color: #fff;
    font-size: 20px; line-height: 1; font-weight: 700; text-decoration: none; transition: .3s ease; }
.pr-btn:hover { background: #7ac729; color: #fff; }
.pr-card .pr-btn { width: 171px; max-width: 100%; align-self: center; }

.pr-footnote { font-size: 18px; line-height: 25px; color: #707070; margin: 17px 0 0; }

/* ---------- 2. What shapes your final price ---------- */
#prFactors { background: #1d1d1b; padding: 42px 0 51px; }
#prFactors .pr-h2 { margin-bottom: 12px; }
#prFactors .pr-lead { margin-bottom: 43px; }

/* comp: box is 356 of the 970 content width (36.7%) and spans the full 01->05 block height */
.pr-factors-wrap { display: flex; align-items: stretch; gap: 5%; }
.pr-factors { flex: 1 1 auto; display: flex; flex-wrap: wrap; column-gap: 5%; row-gap: 0; }
/* comp rhythm (heading 22px): heading->desc gap 8.8pt = 0.40em; row gap 49.7pt.
   Our block is 1.17x the comp's height, so the row gap scales to ~58px. */
.pr-factor { flex: 0 0 47.5%; max-width: 47.5%; margin-bottom: 58px; }
/* no trailing gap after 05, so the block (and the box) ends at "outsourced BidFunction(TM)." */
.pr-factors .pr-factor:last-child { margin-bottom: 0; }
.pr-factor-title { font-size: 30px; line-height: 30px; font-weight: 700; color: #fff; margin: 0 0 12px; }
/* comp: the number is its own column (x112); the heading starts at x144 - a 32pt gutter.
   The description aligns to the HEADING, not to the number. Numbers are green. */
/* comp: number and heading are the SAME size (both 22px). Number column 112->144 = 32pt
   = 1.455em, gap 7.29pt = 0.331em. At our 30px heading: 44px column, ~10px gap. */
.pr-factor-num { display: inline-block; width: 44px; margin-right: 0;
    color: #88CD00; font-weight: 400; font-size: 30px; }
.pr-factor-desc { font-size: 20px; line-height: 26px; color: #707070; margin: 0;
    padding-left: 44px; max-width: 325px; }

/* comp: box is 356pt wide, title 22px / sub 15px / labels 15px bold */
.pr-scale { flex: 0 0 36.7%; max-width: 36.7%; display: flex; flex-direction: column;
    background: #3c3c3b; border-radius: 8px;
    padding: 21px 23px 26px; }
/* comp keeps the box title the same size as the factor headings, and the sub/labels
   the same size as the factor descriptions - scaled here to 30 / 20 / 20. */
.pr-scale-title { font-size: 30px; line-height: 38px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.pr-scale-sub { font-size: 20px; line-height: 26px; color: #88CD00; margin: 0 0 40px; }
/* comp inner split: label column 43.3%, track 47.8%, ~9% slack at the right.
   Fixed row spacing (not space-between) so the pitch stays comp-like. */
.pr-scale-list { list-style: none; margin: 0; padding: 0; }
.pr-scale-list li { display: flex; align-items: center; gap: 0; margin-bottom: 26px; }
.pr-scale-list li:last-child { margin-bottom: 0; }
.pr-scale-label { flex: 0 0 43.3%; font-size: 20px; line-height: 26px; font-weight: 700; color: #fff; }
.pr-slider { position: relative; flex: 0 0 47.8%; height: 3px; background: #706f6f; border-radius: 2px; }
.pr-slider::before { content: ""; position: absolute; left: 0; top: 0; height: 3px;
    width: var(--fill, 60%); background: #88CD00; border-radius: 2px; }
.pr-slider::after { content: ""; position: absolute; left: var(--fill, 60%); top: 50%;
    width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #88CD2E; }

/* ---------- 3. Say goodbye to traditional agencies ---------- */
#prCompare { background: #F0F6ED; padding: 48px 0 52px; }
#prCompare .pr-h2 { margin-bottom: 19px; }

.pr-cmp { display: flex; align-items: stretch; gap: 3.6%; position: relative; }
/* comp card: 450 wide, padding-left 66 (text x178), icons 42x42 at x126 = 52px left of the text.
   Icons sit on the KICKER row and the FINAL row - not beside the title. */
.pr-cmp-card { flex: 0 0 46.4%; max-width: 46.4%; border-radius: 10px;
    padding: 24px 56px 55px 66px; }
.pr-cmp-card--light { background: #fff; }
.pr-cmp-card--dark { background: #1d1d1b; }

.pr-cmp-ico { position: absolute; left: -52px; width: 42px; height: 42px; display: block; }

/* comp: the 1-line "Bidding Specialists" heading still drops its kicker to the same y as the
   2-line left heading, so reserve 2 lines (2 x 32px) for both. */
.pr-cmp-title { font-size: 24px; line-height: 32px; font-weight: 700; margin: 0 0 24px;
    min-height: 64px; }
.pr-cmp-card--light .pr-cmp-title { color: #1d1d1b; }
.pr-cmp-card--dark .pr-cmp-title { color: #88CD00; }

/* comp: kicker, rows and final are all the SAME colour - #707070 on white, #fff on dark.
   Only the weight differs (kicker + final are bold). */
.pr-cmp-kicker { position: relative; font-size: 20px; line-height: 30px; font-weight: 700;
    margin: 0; padding-bottom: 19px; }
.pr-cmp-kicker .pr-cmp-ico { top: -6px; }          /* (30 - 42) / 2 */
.pr-cmp-card--light .pr-cmp-kicker { color: #707070; border-bottom: 1px solid #707070; }
.pr-cmp-card--dark .pr-cmp-kicker { color: #fff; border-bottom: 1px solid #88CD2E; }

.pr-cmp-list { list-style: none; margin: 0; padding: 0; }
/* every row is a fixed-height box with its text vertically centred, so 1-line and 2-line
   rows are the same height and both columns line up at any width */
/* comp: 15px / 21px, row pitch 52.6 - still a fixed-height box so rows stay aligned */
.pr-cmp-list li { display: flex; align-items: center; min-height: 53px;
    font-size: 15px; line-height: 21px; padding: 4px 0; }
.pr-cmp-card--light .pr-cmp-list li { color: #707070; border-bottom: 1px solid #707070; }
.pr-cmp-card--dark .pr-cmp-list li { color: #fff; border-bottom: 1px solid #88CD2E; }

.pr-cmp-final { position: relative; font-size: 20px; line-height: 30px; font-weight: 700; margin: 14px 0 0; }
.pr-cmp-final .pr-cmp-ico { top: -6px; }           /* (30 - 42) / 2 */
.pr-cmp-card--light .pr-cmp-final { color: #707070; }
.pr-cmp-card--dark .pr-cmp-final { color: #fff; }

/* comp: VS circle centre sits at 48.8% across and 49% down the cards */
.pr-cmp-vs { position: absolute; left: 48.8%; top: 49%; transform: translate(-50%, -50%);
    width: 118px; height: 118px; border-radius: 50%; background: #88CD00; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 42px; font-weight: 400; z-index: 2; }

/* ---------- 4. Pricing FAQs ---------- */
#prFaq { background: #fff; padding: 45px 0 54px; }
#prFaq .pr-h2 { margin-bottom: 29px; }
.pr-accordion { max-width: 860px; }
.pr-acc-item { border-bottom: 1px solid #707070; }
.pr-acc-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
    width: 100%; padding: 18px 0 17px; border: 0; background: transparent; text-align: left;
    font-size: 22px; line-height: 30px; font-weight: 500; color: #1d1d1b; }
.pr-acc-icon { flex: 0 0 auto; position: relative; width: 14px; height: 28px; }
.pr-acc-icon::before, .pr-acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%;
    background: #88CD00; transform: translate(-50%,-50%); transition: opacity .2s ease; }
.pr-acc-icon::before { width: 12px; height: 2px; }
.pr-acc-icon::after { width: 2px; height: 12px; }
.pr-acc-item.is-open .pr-acc-icon::after { opacity: 0; }
.pr-acc-item.is-open .pr-acc-q { padding-bottom: 5px; }
.pr-acc-a { display: none; padding: 0 0 17px 32px; }
.pr-acc-item.is-open .pr-acc-a { display: block; }
.pr-acc-a p { font-size: 17px; line-height: 26px; color: #706f6f; margin: 0 0 12px; }
.pr-acc-a p:last-child { margin-bottom: 0; }

/* ---------- 5. Ready to access ---------- */
#prCta { background: #3c3c3b; padding: 46px 0 62px; text-align: center; }
.pr-cta-title { font-size: 45px; line-height: 54px; font-weight: 700; color: #88CD00; margin: 0 auto; }
.pr-cta-lead { font-size: 22px; line-height: 30px; color: #fff; margin: 45px auto 0; max-width: 1000px; }
.pr-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 23px; }
.pr-btn-solid { min-width: 250px; padding: 0 22px; font-size: 20px; }
.pr-btn-ghost { min-width: 288px; padding: 0 22px; font-size: 20px; background: transparent;
    color: #fff; border: 1px solid #88CD2E; }
.pr-btn-ghost:hover { background: #88CD00; color: #1d1d1b; }
.pr-cta-feats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 44px; margin: 49px 0 0; padding: 0; }
.pr-cta-feats li { display: inline-flex; align-items: center; gap: 10px;
    font-size: 18px; line-height: 27px; color: #fff; }
.pr-cta-feats .bi { color: #88CD2E; font-size: 22px; }
/* icons lifted from capacity.html "Four ways to build your winning bid team" */
.pr-cta-ic { flex: 0 0 auto; display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    .pr-card { padding: 17px 12px 22px; }
    .pr-card-title { font-size: 26px; line-height: 32px; }
    .pr-price-main { font-size: 42px; line-height: 44px; }
    /* container drops to 960 here: keep the 66px left padding (it is what puts the icons
       inside the card) and shrink the VS circle so it stays in the gutter, off the text */
    .pr-cmp-card { padding: 24px 40px 40px 56px; }
    .pr-cmp-vs { left: 49%; width: 90px; height: 90px; font-size: 32px; }
    .pr-cmp-title { font-size: 21px; line-height: 28px; min-height: 56px; }
    .pr-cmp-kicker, .pr-cmp-final { font-size: 18px; line-height: 27px; }
    .pr-cmp-kicker .pr-cmp-ico, .pr-cmp-final .pr-cmp-ico { top: -7.5px; }
    /* rows wrap to 2 lines at this width, so give every row the same height and both
       columns stay row-for-row aligned */
    .pr-cmp-list li { font-size: 15px; line-height: 21px; min-height: 53px; }
    .pr-factors-wrap { gap: 5%; }
    .pr-scale { flex: 0 0 36%; max-width: 36%; }
}

@media (max-width: 991.98px) {
    .pr-cards { flex-wrap: wrap; }
    .pr-card { flex: 1 1 calc(50% - 8px); }
    .pr-factors-wrap { flex-direction: column; gap: 32px; }
    .pr-factors { width: 100%; }
    .pr-scale { flex: 1 1 auto; max-width: 100%; width: 100%; }
    /* stacked: the VS already sits between the two cards in the markup, so drop it back into
       the flow (a % top only works if both cards match in height). It sits INSIDE the gap
       rather than straddling the card edges - stacked cards have too little vertical padding
       for a 90px circle to overlap without landing on the text. */
    .pr-cmp { flex-direction: column; gap: 24px; }
    .pr-cmp-card { flex: 1 1 auto; max-width: none; width: 100%; }
    .pr-cmp-vs { position: static; align-self: center; transform: none;
        margin: 0; width: 90px; height: 90px; font-size: 32px; z-index: 2; }
}

/* container drops to 540 here so the two CTA buttons wrap - once stacked they must match
   (side by side they keep the comp's different widths) */
@media (max-width: 767.98px) {
    .pr-btn-solid, .pr-btn-ghost { min-width: 0; width: 320px; max-width: 100%; }
}

@media (max-width: 575.98px) {
    #prPlans .pr-title, .pr-h2, .pr-cta-title { font-size: 32px; line-height: 40px; }
    .pr-card { flex: 1 1 100%; }
    .pr-factor { flex: 0 0 100%; max-width: 100%; }
    .pr-factor-desc { max-width: none; }
    .pr-acc-q { font-size: 17px; line-height: 24px; }
    .pr-acc-a { padding-left: 0; }
    .pr-btn-solid, .pr-btn-ghost { width: 100%; min-width: 0; }
    .pr-cta-feats { gap: 16px; flex-direction: column; align-items: center; }
    .pr-scale-label { flex-basis: 100px; }
}