.content-bottom-widgets{
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 45% 100%;
    background-attachment: scroll;
}
.benefits ul.iconlist{
    color:#ffffff
}
.benefits .iconlist-icon-medium li > div .iconlist-item-content p {
    opacity: 0.7;
}
.benefits .iconlist-icon-medium li:first-child > div .iconlist-item-content p{
    opacity: 1;
}
.content-header p{
    color:#ffffff;
}
/* Banner: the base theme centres the title absolutely inside a 50vh box, so on
   short screens long content spills under the header / into the next section.
   Keep the same centred 50vh look, but let the banner grow with its content. */
.site-content .content-header.content-header-featured .content-header-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.site-content .content-header.content-header-featured .content-header-inner .page-title-wrap {
    position: static;
    transform: none;
    width: 100%;
}
/* Footer CTA ("Let's get started") on tablet/mobile:
   photo (3:2) sits below the text at its real proportions; the bottom
   padding reserves exactly the photo's height so text never overlaps it. */
@media (max-width: 1024px) {
    .site-footer .content-bottom-widgets {
        background-position: center bottom;
        background-size: 70% auto;
        padding-bottom: 46.667% !important;  /* 70% width x 2/3 */
    }
    body .site-footer .content-bottom-widgets aside[data-width="6"] {
        margin-bottom: 40px;
    }
    body .site-footer .content-bottom-widgets aside[data-width="6"]:empty {
        display: none;
    }
}
@media (max-width: 767px) {
    .site-footer .content-bottom-widgets {
        padding-top: 50px !important;
        background-size: 100% auto;
        padding-bottom: 66.667% !important;  /* 100% width x 2/3 */
    }
    .site-footer .content-bottom-widgets .widget-title {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .site-footer .content-bottom-widgets h2 {
        font-size: 1.75rem;
        line-height: 1.25em;
        margin-bottom: 18px;
    }
    .site-footer .content-bottom-widgets .textwidget p {
        font-size: 1rem;
        line-height: 1.7em;
        margin-bottom: 14px;
    }
    .site-footer .content-bottom-widgets .gr-btn .button {
        display: block;
        height: auto;
        padding: 16px 20px;
        line-height: 1.4;
        text-align: center;
        white-space: normal;
    }
}

.text-center{
    text-align: center;
}

.bg-green{
    background-color: #71cbcc !important;
}
.bg-blue{
    background-color: #244189 !important;
}
.bg-orange{
    background-color: #f9734d !important;
}
.header-position-left .site-header.site-header-classic .navigator .menu-primary li .sub-menu li>a, .header-position-left .site-header.site-header-classic .navigator .menu-primary .click .sub-menu li>a, .header-position-left .site-header.site-header-classic .navigator .menu-primary .mega .sub-menu li>a{
    font-size: 20px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
}
/* Sidebar submenu panel: narrower than the theme's 450px; long labels such as
   "WordPress Development & Maintenance" wrap onto a second line. */
.header-position-left .site-header.site-header-classic .navigator .menu-primary li .sub-menu,
.header-position-left .site-header.site-header-classic .navigator .menu-primary .click .sub-menu,
.header-position-left .site-header.site-header-classic .navigator .menu-primary .mega .sub-menu {
    width: 340px;
    padding-left: 44px;
    padding-right: 44px;
}
.header-position-left .site-header.site-header-classic .navigator .menu-primary li .sub-menu li,
.header-position-left .site-header.site-header-classic .navigator .menu-primary .click .sub-menu li,
.header-position-left .site-header.site-header-classic .navigator .menu-primary .mega .sub-menu li {
    margin-bottom: 18px;
}

/* =========================================================
   MARGIN UTILITIES
========================================================= */

/* All Sides */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

/* Top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

/* Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

/* Left */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }

/* Right */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }


/* =========================================================
   PADDING UTILITIES
========================================================= */

/* All Sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* Top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

/* Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

/* Left */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

/* Right */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* =========================================
   DISPLAY FLEX UTILITIES
========================================= */

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}


/* =========================================
   FLEX DIRECTION
========================================= */

.flex-row {
    flex-direction: row !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}


/* =========================================
   JUSTIFY CONTENT
========================================= */

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}

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

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

.justify-evenly {
    justify-content: space-evenly !important;
}

/* =========================================
   ALIGN ITEMS
========================================= */

.align-start {
    align-items: flex-start !important;
}

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

.align-center {
    align-items: center !important;
}

.align-baseline {
    align-items: baseline !important;
}

.align-stretch {
    align-items: stretch !important;
}


/* =========================================
   ALIGN SELF
========================================= */

.self-start {
    align-self: flex-start !important;
}

.self-end {
    align-self: flex-end !important;
}

.self-center {
    align-self: center !important;
}

.self-stretch {
    align-self: stretch !important;
}


/* =========================================
   FLEX WRAP
========================================= */

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}


/* =========================================
   FLEX GROW / SHRINK
========================================= */

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}


/* =========================================
   GAP UTILITIES
========================================= */

.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}


#site .iconbox .address-detail .box-icon{
    margin: 10px 0 0 0!important;
}

#site .iconbox .address-detail .box-icon img{
    position: relative !important;
    bottom: 0;
    left: 10%;
    height: 50px!important;
}

#site .iconbox:hover img{
    transform: unset!important;
}

#site .iconbox .address-detail .box-icon:before {
    left: 10% !important;
    bottom: 10px!important;
}

/* =========================================================
   MOBILE MENU — open from the left
   Theme default (sliding-slide): panel fixed on the right and
   the page shifts left. Mirror it: panel on the left, page shifts right.
========================================================= */
.sliding-slide .sliding-menu {
    left: 0;
    right: auto;
}
.sliding-slide.off-canvas-right-active .site {
    cursor: w-resize;
    -webkit-transform: translateX(280px);
    transform: translateX(280px);
}
.sliding-slide .sliding-menu .off-canvas-toggle {
    left: 210px;
    right: auto;
}


/* =========================================================
   HOME — Industries We Serve: readable text on the photo
   Dark theme-navy overlay drawn with an inset shadow (sits above
   the background image, below the content; .mask pseudo-elements untouched)
========================================================= */
#site .industries-section {
    box-shadow: inset 0 0 0 9999px rgba(25, 25, 55, 0.55);
}
#site .industries-section h2,
#site .industries-section h6,
#site .industries-section p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   BLOG DETAIL (single.php)
   Blog posts: content card + right sidebar (Highlighted / Recent Blogs)
========================================================= */
.post-detail {
    padding-bottom: 80px;
}
.post-detail .post-detail-layout {
    max-width: 860px;
    margin: 0 auto;
}
.post-detail .post-detail-layout.has-sidebar {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 50px;
    align-items: start;
}

/* Content card */
.post-detail .post-detail-inner {
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 6px;
    padding: 50px;
}
.post-detail .post-detail-image {
    margin: -50px -50px 40px;
}
.post-detail .post-detail-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px 6px 0 0;
}
.post-detail .post-detail-content {
    font-size: 1.0625rem;
    line-height: 1.8em;
}
.post-detail .post-detail-content > *:first-child {
    margin-top: 0;
}
.post-detail .post-detail-content h2,
.post-detail .post-detail-content h3,
.post-detail .post-detail-content h4 {
    margin: 1.6em 0 .6em;
}
.post-detail .post-detail-content p,
.post-detail .post-detail-content ul,
.post-detail .post-detail-content ol {
    margin: 0 0 1.4em;
}
.post-detail .post-detail-content img {
    max-width: 100%;
    height: auto;
}
.post-detail .post-detail-back {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #e4e6ef;
    text-align: center;
}

/* Sidebar */
.post-sidebar {
    position: sticky;
    top: 30px;
}
.post-sidebar .post-sidebar-widget {
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 6px;
    padding: 30px;
    margin: 0 0 30px;
}
.post-sidebar .widget-title {
    position: relative;
    font-size: 1.125rem;
    margin: 0 0 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e4e6ef;
}
.post-sidebar .widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 40px;
    height: 2px;
    background: #ff0055;
}
.post-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.post-sidebar ul li {
    list-style: none;
}
.post-sidebar .post-sidebar-item {
    display: flex;
    gap: 15px;
    align-items: center;
    color: #191937;
}
.post-sidebar .post-sidebar-thumb {
    flex: 0 0 70px;
}
.post-sidebar .post-sidebar-thumb img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
}
.post-sidebar .post-sidebar-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4em;
}
.post-sidebar .post-sidebar-item:hover .post-sidebar-title {
    color: #ff0055;
}
.post-sidebar .post-date {
    font-size: 12px;
    color: #62748a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 1024px) {
    .post-detail .post-detail-layout.has-sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .post-sidebar {
        position: static;
    }
}
@media (max-width: 600px) {
    .post-detail {
        padding-bottom: 50px;
    }
    .post-detail .post-detail-inner {
        padding: 25px 20px;
    }
    .post-detail .post-detail-image {
        margin: -25px -20px 25px;
    }
    .post-sidebar .post-sidebar-widget {
        padding: 25px 20px;
    }
}


/* =========================================================
   SERVICES PAGE — equal-height card grid
   3 columns desktop · 2 tablet · 1 mobile; icon and button
   line up across a row however long the description is.
========================================================= */
#site .services-grid {
    padding-bottom: 50px;
}
#site .services-grid > .row-inner {
    display: flex;
    flex-wrap: wrap;
    row-gap: 30px;
}
#site .services-grid > .row-inner::after {
    display: none;
}
#site .services-grid .wpb_column {
    float: none;
    display: flex;
    width: 33.3333%;
}
#site .services-grid .vc_column-inner,
#site .services-grid .wpb_column .wpb_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
#site .services-grid .iconbox {
    flex: 1 1 auto;
    padding: 45px 35px;
}
#site .services-grid .box-title a {
    color: inherit;
}
#site .services-grid .box-title a:hover {
    color: #ff0055;
}
#site .services-grid .box-detail {
    flex: 1 1 auto;
}
#site .services-grid .box-detail p:last-child {
    margin-bottom: 0;
}
#site .services-grid .box-readmore {
    margin-top: 35px;
}

@media (max-width: 1024px) {
    #site .services-grid .wpb_column {
        width: 50%;
    }
}
@media (max-width: 767px) {
    #site .services-grid {
        padding-bottom: 30px;
    }
    #site .services-grid > .row-inner {
        row-gap: 20px;
    }
    #site .services-grid .wpb_column {
        width: 100%;
    }
    #site .services-grid .iconbox {
        padding: 35px 25px;
    }
}


/* =========================================================
   CASE STUDIES PAGE — responsive CSS grid
   Replaces the JS packery layout (absolute positioning, staggered
   rows). 2 columns from 768px, 1 column on phones; cards in a row
   share the same height.
========================================================= */
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    padding-bottom: 80px;
}
.case-studies-grid .project {
    position: static;
    float: none;
    width: auto;
    display: flex;
}
.case-studies-grid .project .project-inner {
    flex: 1 1 auto;
    width: 100%;
}
.case-studies-grid .project a:not([href]) {
    cursor: default;
}
.case-studies-grid .project .project-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}
.case-studies-grid .project .project-info-inner .project-title {
    overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
    .case-studies-grid {
        gap: 20px;
    }
    .projects-grid-alt .case-studies-grid .project .project-inner {
        padding: 0 8%;
    }
}
@media (max-width: 767px) {
    .case-studies-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 15px 50px;
    }
    .projects-grid-alt .case-studies-grid .project .project-inner .project-info-inner .project-title {
        font-size: 1.05rem;
    }
    .projects-grid-alt .case-studies-grid .project .project-inner .project-info-inner > a {
        padding: 12% 0 calc(12% - 15px);
    }
}


/* =========================================================
   BLOGS PAGE (templates/blog.php + template-parts/blog/blog.php)
   Banner: one cover image + theme-navy overlay so the title reads.
   Cards: theme iconbox look (white, 5px radius, soft shadow).
========================================================= */
#site .blog-banner {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    box-shadow: inset 0 0 0 9999px rgba(25, 25, 55, 0.6);
}
#site .blog-banner .page-title-inner,
#site .blog-banner .subtitle {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
#site .blog-banner .subtitle {
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.blog-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    padding-bottom: 80px;
}
.blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 35px rgba(0, 0, 0, 0.08);
    transition: transform .3s, box-shadow .3s;
}
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 45px rgba(25, 25, 55, 0.15);
}
.blog-card-image {
    display: block;
    /* Same shape as the blog cover images (and social share images), so nothing is cut off */
    aspect-ratio: 1200 / 630;
    overflow: hidden;
    background: #e9ebf2;
}
.blog-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.12, .845, .305, 1);
}
.blog-card:hover .blog-card-image img {
    transform: scale(1.06);
}
.blog-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 32px;
}
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ff0055;
}
.blog-card-meta span + span {
    color: #62748a;
}
.blog-card-meta span + span::before {
    content: "•";
    margin-right: 14px;
    color: #c5cad6;
}
#site .blog-card-title {
    font-size: 1.25rem;
    line-height: 1.4em;
    margin: 0 0 14px;
}
#site .blog-card-title a {
    color: #191937;
}
#site .blog-card-title a:hover {
    color: #ff0055;
}
.blog-card-excerpt {
    flex: 1 1 auto;
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.7em;
}
#site .blog-card-more {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #191937;
}
#site .blog-card-more::after {
    content: "\2192";
    display: inline-block;
    margin-left: 8px;
    transition: transform .3s;
}
#site .blog-card:hover .blog-card-more::after {
    transform: translateX(4px);
}
#site .blog-card:hover .blog-card-more {
    color: #ff0055;
}

@media (max-width: 1024px) {
    .blog-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}
@media (max-width: 767px) {
    .blog-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 0 15px 50px;
    }
    .blog-card-body {
        padding: 24px 22px 26px;
    }
    #site .blog-card-title {
        font-size: 1.15rem;
    }
}


/* Service card colour #6 (Content & Publishing) — same rule as the theme's
   vc_custom_15560784…/85… service cards in home.css, in the theme blue */
.service-card-blue {
    border-top-width: 15px !important;
    border-right-width: 0px !important;
    border-bottom-width: 0px !important;
    border-left-width: 0px !important;
    padding-top: 0px !important;
    padding-right: 10% !important;
    padding-bottom: 5% !important;
    padding-left: 10% !important;
    background-color: #ffffff !important;
    border-color: #5472d2 !important;
    border-style: solid !important;
    border-radius: 1px !important;
}


/* =========================================================
   SERVICE DETAIL PAGES (templates/service-detail.php)
   Scoped to .service-detail-page so other pages are untouched.
   #site prefix: the theme's own rules for these lists use #site.
========================================================= */

/* Benefit cards: a wrapping flex row instead of the theme's table layout,
   so every card stretches to the tallest card in its row */
#site .service-detail-page .iconlist.columns-4 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    row-gap: 30px;
}
@media (max-width: 1024px) {
    #site .service-detail-page .iconlist.columns-4 > li {
        width: 50%;
    }
}
@media (max-width: 767px) {
    #site .service-detail-page .iconlist.columns-4 > li {
        width: 100%;
    }
}
#site .service-detail-page .iconlist.columns-4 > li {
    display: flex;
    margin-bottom: 0;   /* theme margins (50px, none on the last item) made rows uneven; row-gap spaces them */
}
#site .service-detail-page .iconlist.columns-4 > li > div {
    flex: 1 1 auto;
    width: 100%;
}
.service-detail-page .benefit-copy,
.service-detail-page .benefit-copy p {
    color: rgba(255, 255, 255, 0.85);
}
.service-detail-page .benefit-copy p:last-child {
    margin-bottom: 0;
}

/* Phones: the theme's negative-margin gutters (lists −15/−25/−30px, rows
   −15px) need room the screen doesn't have, so card edges were clipped.
   Cancel them; the side gutter comes from the site-wide gutter system
   at the end of this file. */
@media (max-width: 991px) {
    #site .service-detail-page .vc_row,
    #site .service-detail-page .vc_row .vc_row {
        margin-left: 0;
        margin-right: 0;
    }
    #site .service-detail-page .iconlist[class*="gap-"],
    #site .service-detail-page .iconlist.columns-4 {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}
@media (max-width: 767px) {
    #site .service-detail-page .iconlist[class*="gap-"] > li,
    #site .service-detail-page .iconlist.columns-4 > li {
        padding-left: 0;
        padding-right: 0;
    }
    #site .service-detail-page .vc_column_container > .vc_column-inner {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Footer: logo above the address */
.site-footer .footer-widgets .footer-logo {
    display: block;
    width: fit-content;
    margin-bottom: 20px;
}
.site-footer .footer-widgets .footer-logo img {
    display: block;
    max-width: 180px;
    max-height: 60px;
    width: auto;
    height: auto;
}

/* Footer: menu column headings (plain text, theme heading typography) */
.site-footer .footer-widgets .footer-menu-title {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35em;
    color: #191937;
}

/* Footer bottom bar: copyright left, CTA text centred, "Talk to Us" link + email right */
.site-footer .footer-widgets .footer-bottom {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 420px) minmax(220px, 1fr);
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.site-footer .footer-widgets .footer-copyright {
    margin: 0;
    font-size: 14px;   /* same as .footer-widgets .widget */
}
.site-footer .footer-widgets .footer-cta-text {
    font-size: 14px;
    text-align: center;
}
.site-footer .footer-widgets .footer-cta-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35em;
    color: #191937;
}
.site-footer .footer-widgets .footer-cta {
    justify-self: end;
    font-size: 14px;
    text-align: right;
}
.site-footer .footer-widgets .footer-cta a {
    display: block;
}
.site-footer .footer-widgets .footer-cta-link {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35em;
}
@media (min-width: 1200px) {
    .site-footer .footer-widgets .footer-bottom {
        grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    }
    .site-footer .footer-widgets .footer-cta-text {
        white-space: nowrap;
    }
}

/* Footer on tablet/mobile: address + Services on row 1, Company / Support / Follow Us on row 2 */
@media (max-width: 768px) {
    body .site-footer .footer-widgets .footer-aside-wrap {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 30px;
        margin: 0;
    }
    body .site-footer .footer-widgets .footer-aside-wrap::after {
        display: none;
    }
    body .site-footer .footer-widgets aside[data-width="9"],
    body .site-footer .footer-widgets aside[data-width="9"] > .widget,
    body .site-footer .footer-widgets .menu-footer-menu-container,
    body .site-footer .footer-widgets #menu-footer-menu {
        display: contents;
    }
    /* logo gets its own full-width row; address sits beside Services below it */
    body .site-footer .footer-widgets aside[data-width="3"],
    body .site-footer .footer-widgets aside[data-width="3"] > .widget {
        display: contents;
    }
    body .site-footer .footer-widgets .footer-logo {
        grid-column: 1 / -1;
        margin: 0 0 -10px;
    }
    body .site-footer .footer-widgets aside[data-width="3"] .textwidget {
        grid-column: span 3;
    }
    body .site-footer .footer-widgets #menu-footer-menu > li {
        grid-column: span 2;
        width: auto;
        padding: 0;
        margin: 0;
    }
    body .site-footer .footer-widgets #menu-footer-menu > li:first-child {
        grid-column: span 3;
    }
    /* stack the bottom bar: CTA text, link + email, then copyright as the very last line */
    .site-footer .footer-widgets .footer-bottom {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .site-footer .footer-widgets .footer-cta-text {
        text-align: left;
    }
    .site-footer .footer-widgets .footer-cta {
        justify-self: start;
        text-align: left;
    }
    .site-footer .footer-widgets .footer-copyright {
        order: 3;
        margin-top: 15px;
    }
}

/* =========================================================
   SITE-WIDE GUTTER (tablet + mobile)
   The theme sizes .row-inner as "90% + 30px" (expecting 15px column
   padding that most columns don't have), so section text started 5px
   from the screen edge on phones, and each page/section drifted
   (5 / 18 / 20 / 33px). One gutter for every top-level section and
   the banner instead.
========================================================= */
:root {
    --site-gutter: 30px;
}
@media (max-width: 767px) {
    :root {
        --site-gutter: 20px;
    }
}
/* #site prefix: the theme's own gap / bleed rules are #site-scoped */
@media (max-width: 1024px) {
    #site .site-content .vc_row:not(.vc_inner) {
        margin-left: 0;
        margin-right: 0;
    }
    #site .site-content .vc_row:not(.vc_inner) > .row-inner {
        width: auto;
        max-width: none;
        margin-left: var(--site-gutter);
        margin-right: var(--site-gutter);
    }
    #site .site-content .content-header .content-header-inner {
        width: auto;
        max-width: none;
        margin-left: var(--site-gutter);
        margin-right: var(--site-gutter);
        padding-left: 0;
        padding-right: 0;
    }
}
/* Phones: columns stack, so column gutters/gaps only push text inwards.
   Cards (columns or inners with their own fill/custom padding) keep theirs. */
@media (max-width: 767px) {
    #site .site-content .vc_row.vc_inner {
        margin-left: 0;
        margin-right: 0;
    }
    #site .site-content .vc_row .row-inner > .wpb_column:not(.vc_col-has-fill) {
        padding-left: 0;
        padding-right: 0;
    }
    #site .site-content .wpb_column:not(.vc_col-has-fill) > .vc_column-inner:not([class*="vc_custom_"]) {
        padding-left: 0;
        padding-right: 0;
    }
}
/* Service "benefits" row: service-detail.css gives it margin 0 -15px !important,
   which pulled it 15px outside the page grid at every width */
#site .service-detail-page .vc_row.vc_custom_1575629379269 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Careers values (Teamwork, Respect...): icon cards with a faint number, matching the
   About page values (service-detail-new.css .ssd-feature). templates/careers.php */
.careers-page .career-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.careers-page .career-value {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 26px;
    background: #fff;
    border: 1px solid #e4e6ef;
    border-radius: 6px;
    text-align: left;
    transition: box-shadow .3s, translate .3s;
}
.careers-page .career-value::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #ff0055;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.careers-page .career-value:hover {
    translate: 0 -4px;
    box-shadow: 0 15px 40px rgba(25, 25, 55, .12);
}
.careers-page .career-value:hover::before {
    transform: scaleX(1);
}
.careers-page .career-value-number {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: rgba(25, 25, 55, .06);
    pointer-events: none;
}
.careers-page .career-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #f4f4f9;
    color: #191937;
    transition: background .3s, color .3s;
}
.careers-page .career-value-icon .ssd-icon {
    width: 24px;
    height: 24px;
}
.careers-page .career-value:hover .career-value-icon {
    background: #191937;
    color: #fff;
}
#site .careers-page .career-value h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35em;
    letter-spacing: normal;
    text-transform: none;
}
.careers-page .career-value p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
}
@media (max-width: 1024px) {
    .careers-page .career-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .careers-page .career-values {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    .careers-page .career-value,
    .careers-page .career-value::before {
        transition: none;
    }
}

/* Careers: the openings row is the last on the page. careers.css gives it 80px below on
   top of the page's own 80px (.content-body-inner), so the gap above the footer was
   double the other pages'. The page padding alone is kept, as on About and FAQ. */
.careers-page .vc_row.vc_custom_1575628557466 {
    padding-bottom: 0 !important;
}

/* Careers "Current openings": one card per opening (role, location / type / experience
   tags, apply button, short description) with the full description in a disclosure
   below (responsibilities, requirements, what we offer). templates/careers.php */
.careers-page .career-openings {
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
}
.careers-page .career-openings-count {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #191937;
}
.careers-page .career-openings-count::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .18);
}
.careers-page .career-opening {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9ebf3;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(25, 25, 55, .04), 0 8px 24px -12px rgba(25, 25, 55, .08);
    transition: box-shadow .3s ease, border-color .3s ease;
}
.careers-page .career-opening::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #ff0055;
}
.careers-page .career-opening:hover {
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(25, 25, 55, .04), 0 24px 44px -16px rgba(25, 25, 55, .2);
}
.careers-page .career-opening-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding: 32px 36px 0;
}
.careers-page .career-opening-main {
    min-width: 0;
}
.careers-page .career-opening-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25em;
    color: #191937;
}
.careers-page .career-opening-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.careers-page .career-opening-meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5em;
    color: #191937;
    background: #f4f4f9;
    border-radius: 100px;
}
.careers-page .career-opening-meta .ssd-icon {
    width: 15px;
    height: 15px;
    flex: none;
    color: #ff0055;
}
.careers-page .career-opening-summary {
    max-width: 720px;
    margin: 0;
    padding: 18px 36px 0;
    font-size: 16px;
    line-height: 1.7;
}
.careers-page .career-opening-apply {
    flex-shrink: 0;
    margin: 0;
}

/* Details: a full-width toggle row, then the description */
.careers-page .career-opening-details {
    margin-top: 24px;
    border-top: 1px solid #eef0f6;
}
.careers-page .career-opening:not(:has(.career-opening-details)) {
    padding-bottom: 32px;
}
.careers-page .career-opening-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 36px;
    font-size: 14px;
    font-weight: 600;
    color: #191937;
    list-style: none;
    cursor: pointer;
    transition: background-color .2s;
}
.careers-page .career-opening-details summary::-webkit-details-marker {
    display: none;
}
.careers-page .career-opening-details summary::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid #ff0055;
    border-bottom: 2px solid #ff0055;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .25s ease;
}
.careers-page .career-opening-details[open] summary::after {
    transform: translateY(2px) rotate(-135deg);
}
.careers-page .career-opening-details summary:hover {
    background: #fafafd;
}
.careers-page .career-opening-details summary:focus-visible {
    outline: 2px solid #ff0055;
    outline-offset: -2px;
}
.careers-page .career-opening-less,
.careers-page .career-opening-details[open] .career-opening-more {
    display: none;
}
.careers-page .career-opening-details[open] .career-opening-less {
    display: inline;
}
.careers-page .career-opening-body {
    padding: 8px 36px 32px;
}
.careers-page .career-opening-body h4 {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #191937;
}
.careers-page .career-opening-about {
    margin-bottom: 28px;
    font-size: 15px;
}
.careers-page .career-opening-about p:last-child {
    margin-bottom: 0;
}
.careers-page .career-opening-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.careers-page .career-opening-section {
    padding: 22px 22px 20px;
    background: #f7f7fb;
    border-radius: 10px;
}
.careers-page .career-opening-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.careers-page .career-opening-section li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 24px;
    font-size: 14.5px;
    line-height: 1.6;
    list-style: none;
}
.careers-page .career-opening-section li:last-child {
    margin-bottom: 0;
}
.careers-page .career-opening-section li::before {
    content: "";
    position: absolute;
    top: .45em;
    left: 3px;
    width: 9px;
    height: 5px;
    border-left: 2px solid #ff0055;
    border-bottom: 2px solid #ff0055;
    transform: rotate(-45deg);
}
.careers-page .career-opening-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding: 20px 24px;
    background: #191937;
    border-radius: 10px;
}
.careers-page .career-opening-foot p {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
}

.careers-page .career-openings-empty {
    padding: 40px 30px;
    margin: 0;
    text-align: center;
    background: #fff;
    border: 1px dashed rgba(25, 25, 55, .2);
    border-radius: 14px;
}
.careers-page .career-openings-note {
    margin-top: 34px;
    font-size: 15px;
    text-align: center;
}
.careers-page .career-openings-note p:last-child {
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .careers-page .career-opening-head {
        flex-direction: column;
        gap: 20px;
        padding: 24px 20px 0 24px;
    }
    .careers-page .career-opening-title {
        font-size: 21px;
    }
    .careers-page .career-opening-summary {
        padding: 16px 20px 0 24px;
        font-size: 15px;
    }
    .careers-page .career-opening-details summary {
        padding: 14px 20px 14px 24px;
    }
    .careers-page .career-opening-body {
        padding: 6px 20px 24px 24px;
    }
    .careers-page .career-opening:not(:has(.career-opening-details)) {
        padding-bottom: 24px;
    }
    .careers-page .career-opening-sections {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .careers-page .career-opening-foot {
        flex-direction: column;
        align-items: stretch;
        padding: 18px;
    }
    .careers-page .career-opening-apply {
        width: 100%;
        text-align: center;
    }
}

/* Phones: filled columns (image + coloured card blocks such as "Our team makes
   the difference", "Our people", "More than just development") sit in
   column-gap rows; the gap padding/margins only indented the stacked blocks
   ~35px past the 20px gutter. Line them up with the other sections. */
@media (max-width: 767px) {
    #site .site-content .vc_row[class*="vc_column-gap-"] > .row-inner > .wpb_column.vc_col-has-fill {
        padding-left: 0;
        padding-right: 0;
    }
    #site .site-content .vc_row[class*="vc_column-gap-"] > .row-inner > .wpb_column.vc_col-has-fill > .vc_column-inner {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* Home "Our people" / "More than" image blocks: the 17.5px side margin used to be
   an inline !important style (unbeatable on phones); keep it from tablet up only */
@media (min-width: 768px) {
    #site .vc_custom_1575627718093 .vc_custom_1555991134461,
    #site .vc_custom_1575627918002 .vc_custom_1555991373716 {
        margin-left: 17.5px !important;
        margin-right: 17.5px !important;
    }
}

/* Banner image: services.css / page CSS carry the old template's tiled
   pattern settings (600px auto, repeat), which repeated the photo across
   the banner (e.g. Pricing). Banner photos always fill the banner once. */
#site .content-header.content-header-featured {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* About Us: Mission / Values / Approach boxes. The theme lays them out as table
   cells (desktop) or wrapping flex items, so each white box was only as tall as
   its own text. A grid with equal rows keeps them the same height side by side
   and when stacked. */
body #site .iconlist.iconlist-icon-medium.hes-equal-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
body #site .iconlist.iconlist-icon-medium.hes-equal-boxes > li {
    display: flex;
    width: auto;
    margin: 0;
    padding: 0;
}
body #site .iconlist.iconlist-icon-medium.hes-equal-boxes > li > div {
    width: 100%;
}
@media (max-width: 991px) {
    body #site .iconlist.iconlist-icon-medium.hes-equal-boxes {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* One banner height for every page (--hes-banner-height).
   Inner pages: the theme gave photo banners 50vh and plain ones (Blog, Case
   Studies) 80px of padding around their text, so every page differed.
   The banner still grows if its text needs more room (long titles on phones). */
#site {
    --hes-banner-height: 380px;
    --hes-banner-padding: 20px;
}
#site .site-content .content-header {
    padding-top: var(--hes-banner-padding) !important;
    padding-bottom: var(--hes-banner-padding) !important;
}
#site .site-content .content-header .content-header-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--hes-banner-height) - 2 * var(--hes-banner-padding));
}
/* Home: same padding above and below, so the centred text has equal space
   at the top and bottom. (The bottom used to hold room for the services cards,
   which services-slider.css no longer pulls up over the banner.) */
#site .hes-home-banner {
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--hes-banner-height) - 2 * var(--hes-banner-padding));
    padding-top: var(--hes-banner-padding) !important;
    padding-bottom: var(--hes-banner-padding) !important;
}
/* Home banner headline: 4rem instead of the theme's 6rem on wide screens. */
@media only screen and (min-width: 1170px) {
    #site .hes-home-banner .cd-headline {
        font-size: 4rem;
    }
}
/* The effects canvas must not take up room of its own in the banner. */
#site .hes-home-banner {
    position: relative;
}
#site .hes-home-banner > canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#site .hes-home-banner > .row-inner {
    position: relative;
}

/* Floating WhatsApp button (footer.php) — below the quote form popup (z-index 100000) */
.hes-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: transform .2s, box-shadow .2s;
}
.hes-whatsapp:hover,
.hes-whatsapp:focus {
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.hes-whatsapp svg {
    display: block;
}
@media (max-width: 600px) {
    .hes-whatsapp {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
    }
}

/* Long button labels wrap on phones instead of running out of the button. The theme
   centres labels with a fixed height and matching line-height, so the height is
   released and vertical padding keeps wrapped labels centred. */
@media (max-width: 767px) {
    .button:not(.no-bg):not(.line),
    input[type="submit"],
    button[type="submit"] {
        max-width: 100%;
        height: auto;
        padding-top: 13px;
        padding-bottom: 13px;
        white-space: normal;
        line-height: 1.3;
        text-align: center;
    }
}

/* Counters (home page KPIs): the prefix and suffix take equal-width slots either side of
   the number, so the number itself sits on the centre line and a "%" hangs to its right. */
#site .counter.aligncenter .counter-content {
    display: flex;
    justify-content: center;
    align-items: baseline;
}
#site .counter.aligncenter .counter-prefix,
#site .counter.aligncenter .counter-suffix {
    flex: 1 1 0;
    min-width: 0;
}
#site .counter.aligncenter .counter-prefix {
    text-align: right;
}
#site .counter.aligncenter .counter-suffix {
    text-align: left;
}

/* Left sidebar header: round social icons (same look as the mobile menu) instead of text links */
#site.header-position-left .site-header.site-header-classic.header-brand-left .header-content .extras .social-icons a {
    float: none;
    display: inline-block;
    width: 35px;
    height: 35px;
    margin: 0 5px 5px 0;
    padding: 0;
    line-height: 35px;
    overflow: hidden;
    border-radius: 50px;
}
#site.header-position-left .site-header.site-header-classic.header-brand-left .header-content .extras .social-icons a:before {
    content: none;
}
#site.header-position-left .site-header.site-header-classic.header-brand-left .header-content .extras .social-icons a i {
    display: inline-block;
}

/* AI chat button (ago-ai-chatbot plugin) and the WhatsApp button share the bottom-right
   corner: WhatsApp sits first, the chat button after it at the edge. The theme's generic
   button styles are reset on the chat button so it stays a 56px circle with its icon. */
#ago-ai-widget .ago-ai-toggle {
    width: 56px;
    min-width: 0;
    height: 56px;
    padding: 0;
    line-height: 1;
}
#ago-ai-widget .ago-ai-toggle::before,
#ago-ai-widget .ago-ai-toggle::after {
    content: none;
}
#ago-ai-widget .ago-ai-toggle.right {
    right: 24px;
    bottom: 24px;
}
body:has(#ago-ai-widget .ago-ai-toggle.right) .hes-whatsapp {
    right: 94px;
}
@media (max-width: 600px) {
    #ago-ai-widget .ago-ai-toggle {
        width: 50px;
        height: 50px;
    }
    #ago-ai-widget .ago-ai-toggle.right {
        right: 16px;
        bottom: 16px;
    }
    body:has(#ago-ai-widget .ago-ai-toggle.right) .hes-whatsapp {
        right: 78px;
    }
}

/* Chat window (ago-ai-chatbot): keep the theme's generic button / heading styles off the
   send and close buttons and the bot name, so the send button is a circle with its icon. */
#ago-ai-widget .ago-ai-send,
#ago-ai-widget .ago-ai-close {
    min-width: 0;
    padding: 0;
    line-height: 1;
    letter-spacing: 0;
}
#ago-ai-widget .ago-ai-send {
    flex: none;
    width: 40px;
    height: 40px;
    align-self: center;
}
#ago-ai-widget .ago-ai-close {
    width: 32px;
    height: 32px;
    background: none;
    color: #fff;
}
#ago-ai-widget .ago-ai-send::before,
#ago-ai-widget .ago-ai-send::after,
#ago-ai-widget .ago-ai-close::before,
#ago-ai-widget .ago-ai-close::after {
    content: none;
}
#ago-ai-widget .ago-ai-header-info h3 {
    color: #fff;
}
/* The avatar is the wide Sabright logo: shown whole on a white disc, not cropped */
#ago-ai-widget .ago-ai-avatar {
    flex: none;
    padding: 4px;
    background: #fff;
    object-fit: contain;
    box-sizing: border-box;
}

/* Phones: the plugin opens the chat full screen. 100vh runs under the browser's toolbars,
   so the visible height (dvh) is used; the input clears the iPhone home bar; text in the
   input is 16px so iOS does not zoom the page on focus; the close button is a full tap
   target; the page behind does not scroll while the chat is open. */
@media (max-width: 480px) {
    #ago-ai-widget .ago-ai-window {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
    }
    #ago-ai-widget .ago-ai-header {
        padding-top: max(14px, env(safe-area-inset-top));
    }
    #ago-ai-widget .ago-ai-input-area {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    #ago-ai-widget .ago-ai-input {
        font-size: 16px;
        min-width: 0;
    }
    #ago-ai-widget .ago-ai-close {
        width: 44px;
        height: 44px;
        margin-right: -8px;
        font-size: 26px;
    }
    #ago-ai-widget .ago-ai-msg {
        max-width: 85%;
    }
    html:has(#ago-ai-widget .ago-ai-window.open),
    html:has(#ago-ai-widget .ago-ai-window.open) body {
        overflow: hidden;
    }
}

/* One CTA colour across the site. Every filled button (default, primary, accent and
   white) and form submit is the theme's accent pink with white text, and every one
   fills navy on hover. Outline, text-only (no-bg) and line buttons keep their own look. */
.button:not(.outline):not(.no-bg):not(.line),
input[type="submit"].primary,
button[type="submit"].primary,
input[type="submit"].accent,
button[type="submit"].accent,
input.wpcf7-submit {
    background: #ff0055;
    border-color: #ff0055;
    color: #fff;
}
.button:not(.outline):not(.no-bg):not(.line):hover,
input[type="submit"].primary:hover,
button[type="submit"].primary:hover,
input[type="submit"].accent:hover,
button[type="submit"].accent:hover,
input.wpcf7-submit:hover {
    border-color: #191937;
    color: #fff;
    /* Pink border while the fill turns navy, so the button stays visible on navy
       boxes. Drawn as an inset outline: no size change, and above the sliding fill. */
    outline: 2px solid #ff0055;
    outline-offset: -2px;
}
/* Inputs have no ::after to slide in, so they change colour directly */
input[type="submit"].primary:hover,
button[type="submit"].primary:hover,
input[type="submit"].accent:hover,
button[type="submit"].accent:hover,
input.wpcf7-submit:hover {
    background: #191937;
}
.button:not(.outline):not(.no-bg):not(.line)::after {
    background: #191937;
}

/* Closing call-to-action boxes (pricing and services pages): navy, like the other
   filled boxes, so the pink button stands out */
.sbp .sbp-cta {
    background: #191937;
}

/* FAQ banner: intro and "try searching" text, readable on the patterned pink */
.faq-hero-text,
.faq-hero-note {
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.faq-hero-text {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.6;
}
.faq-hero-note {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
}

/* Contact Form 7 wraps its hidden inputs in a fieldset; the theme's fieldset border
   showed it as an empty box above every form */
.wpcf7 fieldset.hidden-fields-container {
    display: none;
}

/* Careers: job application popup (template-parts/careers/apply-modal.php) */
.admin-bar .career-apply-modal {
    padding-top: 48px;
}
.career-apply-modal .sbp-modal-dialog {
    padding: 24px 28px 26px;
}
.career-apply-modal .contact .row p {
    margin: 0;
}
.career-apply-modal .contact input:not([type="submit"]),
.career-apply-modal .contact textarea {
    color: #191937;
}
/* CV upload: a full-width box with a navy "Choose file" button */
.sbp-modal.career-apply-modal .contact .row input[type="file"] {
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
    border: 1px dashed #c9c9d6;
    background: #fafafc;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}
.sbp-modal.career-apply-modal .contact .row input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px;
    border: 0;
    border-radius: 3px;
    background: #191937;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sbp-modal.career-apply-modal .contact .row input[type="file"]::file-selector-button:hover {
    background: #ff0055;
}