/* Accordion toggle icon — 26x26 plus in a primary circle when closed, minus
 * when open. Two-colour, so it is a real image via content: url() rather than
 * a currentColor mask; the open state swaps the glyph instead of rotating.
 */
.block-accordion .wp-block-details summary::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="13" cy="13" r="11" fill="%23FAB012"/><path d="M13 7C13.5523 7 14 7.44772 14 8V12H18C18.5523 12 19 12.4477 19 13C19 13.5523 18.5523 14 18 14H14V18C14 18.5523 13.5523 19 13 19C12.4477 19 12 18.5523 12 18V14H8C7.44772 14 7 13.5523 7 13C7 12.4477 7.44772 12 8 12H12V8C12 7.44772 12.4477 7 13 7Z" fill="%23131C39"/></svg>');
    position: absolute;
    right: 0;
    top: 1px;
    display: block;
    width: 26px;
    height: 26px;
    line-height: 0;
}

.block-accordion .wp-block-details[open] summary::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="13" cy="13" r="11" fill="%23FAB012"/><path d="M18 12C18.5523 12 19 12.4477 19 13C19 13.5523 18.5523 14 18 14H8C7.44772 14 7 13.5523 7 13C7 12.4477 7.44772 12 8 12H18Z" fill="%23131C39"/></svg>');
    transform: none;
}

.block-accordion .wp-block-details{
    border-radius: 12px;
    border: 3px solid rgba(250, 176, 18, 0);
    background: var(--UI-White-100, #FFF);
    padding:20px;
    margin-top:16px;
}

.block-accordion .wp-block-details[open] {
    border: 3px solid rgba(250, 176, 18, 0.20);
    padding-bottom: 24px;
}
/**/

[data-carousel-item] {
    position: absolute;
    top: 0;
    left: 100%; /* Start offscreen to the right */
    width: 100%;
    /* height: 100%; */
    transition: transform 0.5s ease-in-out, visibility 0s 0.5s; /* Smooth slide transition with visibility delay */
    visibility: hidden; /* Hide items initially */
}

[data-carousel-item].active {
    left: 0; /* Move into view */
    transform: translateX(0);
    visibility: visible;
    z-index: 1;
    transition: transform 0.5s ease-in-out, visibility 0s 0s; /* No delay on visibility for the active slide */
}

[data-carousel-item].prev {
    left: 0;
    transform: translateX(-100%);
    z-index: 0;
    visibility: hidden;
}

[data-carousel-item].next {
    left: 0;
    transform: translateX(100%);
    z-index: 0;
    visibility: hidden;
}


.mobilebox__close{
    display:none;
}


.no-arrow:after,
.no-arrow svg{
    display: none;
}

.single #content {
    overflow: visible;
}

.wp-block-image[class*="rounded"] img {
    border-radius: inherit;
}

.wp-block-image.rounded-full img {
    border-radius: 9999px;
}

.align-features-btn{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.align-features-btn > div:last-child{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.align-features-btn.centered > div:last-child{
    align-items: center;
}

.align-features-btn a{
    margin-top: auto;
}

.simple-feature-list-block {
    gap: 0 10px;
}

.simple-feature-list-block li span{
    font-size: inherit !important;
    line-height: 150%;
}

.simple-feature-list-block li{
    align-items: flex-start;
    gap: 16px;
    margin-top: 8px !important;
}

.simple-feature-list-block li div{
    margin-top: 3px;
    width: 22px !important;
    height: 22px !important;
    border: solid 2px;
    background: var(--wp--preset--color--primary, #FAB012)  !important;
    border-color: var(--wp--preset--color--primary, #FAB012) !important;
}

.simple-feature-list-block li div svg{
    width: 16px !important;
    height: 16px !important;
    fill:#131C39;
}

.simple-feature-list-block.text-sm li div{
    margin-top: 0px;
    width: 20px !important;
    height: 20px !important;
}

.simple-feature-list-block.text-sm li div svg{
    width: 14px !important;
    height: 14px !important;
}

.align-features-btn > .flex-1{
    width: 100%;
}


.frm_style_formidable-style.with_frm_style .form-field{
    margin-bottom: 0;
}

.frm-show-form .frm_fields_container{
    row-gap: 20px;
}


.wp-block-post-template-is-layout-grid .wp-block-post-excerpt__more-link,
.related-read-more{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: auto;
    background: transparent;
    color: var(--wp--preset--color--text-primary, #131C39);
    border: 1px solid var(--wp--preset--color--primary, #FAB012) !important;
    border-radius: 9999px;
    font-family: "Overused Grotesk", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 21px */
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    padding: 12px 32px;
    margin-top: 24px;
    position: absolute;
    bottom: 32px;
    left:24px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}


@media (max-width: 767px) {
    .wp-block-post-template-is-layout-grid .wp-block-post-excerpt__more-link,
    .related-read-more{
        left: 20px;
        right: 20px;
        width: auto;
        bottom:20px;
    }
}

@media (min-width: 768px) {
    .wp-block-post-template-is-layout-grid .wp-block-post-excerpt__more-link,
    .related-read-more{
        font-size: 16px;
        line-height: 150%; /* 24px */
        padding: 14px 32px;
    }
}

.wp-block-post-template-is-layout-grid .wp-block-post-excerpt__more-link:hover,
.related-read-more:hover{
    background: var(--wp--preset--color--primary, #FAB012);
    color: var(--wp--preset--color--text-primary, #131C39);
    text-decoration: none;
    border: 1px solid var(--wp--preset--color--primary, #FAB012) !important;
}

/* Same 16x16 chevron as the block buttons, masked so it tracks the label colour */
.wp-block-post-template-is-layout-grid .wp-block-post-excerpt__more-link::after,
.related-read-more::after{
    content: '';
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M5 2L11 8L5 14" stroke="%23131C39" stroke-width="2"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M5 2L11 8L5 14" stroke="%23131C39" stroke-width="2"/></svg>') no-repeat center / contain;
}

.wp-block-post-featured-image img{
    height:100%;
}

html body.single .related-post-li .related-read-more{
    margin-left: 40px !important;
    font-weight: 700 !important;
    text-transform: none;
}

body{
    overflow-x: hidden;
    background-color: var(--wp--preset--color--light-gray, #FAFAF8);
}

body #content > article{
    overflow: visible;
    padding-top: 0;
}

/* Form Labels */
.frm-show-form .frm_primary_label {
    color: var(--wp--preset--color--text-primary, #131C39) !important;
    font-family: "Overused Grotesk", sans-serif;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 150%;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
    display: block;
}

/* Form Inputs */
.frm-show-form input[type="text"]::placeholder,
.frm-show-form input[type="email"]::placeholder,
.frm-show-form input[type="tel"]::placeholder,
.frm-show-form input[type="url"]::placeholder,
.frm-show-form input[type="number"]::placeholder,
.frm-show-form textarea::placeholder {
    font-family: "Overused Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--text-secondary, rgba(19, 28, 57, 0.60));
}

.frm-show-form input[type="text"],
.frm-show-form input[type="email"],
.frm-show-form input[type="tel"],
.frm-show-form input[type="url"],
.frm-show-form input[type="number"],
.frm-show-form select,
.frm-show-form textarea {
    border-radius: 0px;
    border: none !important;
    background: transparent;
    height: 47px;
    padding: 12px 0px !important;
    color: var(--wp--preset--color--text-secondary, rgba(19, 28, 57, 0.60));
    font-family: "Overused Grotesk", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0;
    width: 100%;
    outline: none;
    box-shadow: none !important;
    border-bottom: 1px solid var(--gray-300, #D1D5DB) !important;
}

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

.frm-show-form .frm_form_field.frm_blank_field>.frm_error{
    margin-top:0px !important;
}

.frm_style_formidable-style.with_frm_style .frm_submit button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: auto;
    background: var(--wp--preset--color--primary, #FAB012);
    color: var(--wp--preset--color--text-primary, #131C39);
    font-family: "Overused Grotesk", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    padding: 15px 32px;
    border: none !important;
    border-radius: 9999px;
    box-shadow: none !important;
    cursor: pointer;
    margin-bottom: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    margin-left: auto;
}

.frm_style_formidable-style.with_frm_style .frm_submit button:hover,
.frm_style_formidable-style.with_frm_style .frm_submit button:focus,
.frm_style_formidable-style.with_frm_style .frm_submit button:active{
    background: #E19E10;
    color: var(--wp--preset--color--text-primary, #131C39);
}

/* Arrow — 16x16 chevron, painted with currentColor behind a mask so it tracks
 * the button's own text colour.
 */
.frm_style_formidable-style.with_frm_style .frm_submit button:after{
    content: '';
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M5 2L11 8L5 14" stroke="%23131C39" stroke-width="2"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M5 2L11 8L5 14" stroke="%23131C39" stroke-width="2"/></svg>') no-repeat center / contain;
}

.map-iframe iframe{
    border-radius: 20px;
    overflow: hidden;
    max-width: 100%;
}

.pre-header{
    height: 43px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    overflow: hidden;
}

header.active .pre-header{
    height: 0px;
}

.single .wp-block-list li::marker{
    font-size: 12px;
    color: inherit;
}

.single #content .wp-block-list{
    padding-left: 0px !important;
}


/* OCC */

#content{
    overflow: hidden;
}


.hero-decoration{
    position:relative;
    overflow:hidden;
}

.hero-decoration:before{
    content:'';
    position: absolute;
    left:0;
    right:45%;
    top:-17%;
    bottom:-17%;
    display:block;
    background: var(--wp--preset--color--primary);
    border-radius:0% 100% 100% 0%;
    z-index:1;
    margin:auto;
    min-height:1148px;
}

.hero-decoration .wp-block-cover__inner-container{
    z-index:2;
}

.services-list img{
    width:100%;
    border-radius:inherit;
}

.services-list .has-gradient:after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    display:block;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 64.61%, #FFF 100%);
}

.decoration-1{
    position:relative;
    overflow:hidden;
}

.decoration-1 > .container{
    position:relative;
    z-index:1;
}

.decoration-1:before{
    content: '';
    position: absolute;
    left: 0;
    top: -40px;
    width: 50%;
    height: 175%;
    display: block;
    background: url(../../images/video-decoration-2.svg) no-repeat right bottom;
    background-size: auto 100%;
}

.decoration-1.decoration-right:before{
    left: auto;
    right: 0;
    background-position: left bottom;
    top: auto;
}

.dropdown > ul li a > img{
    opacity: 0.6;
    transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
}

.dropdown > ul li a:hover > img{
    opacity: 1;
}

.with_frm_style .frm_form_fields > fieldset{
    padding-bottom:0px;
}

.review-imgs figure img{
    max-height:inherit;
}

header nav>div>a{
    max-width:100% !important;
    transition: all 0.3s ease;
}

header.desktop__sticky.active nav>div>a{
    max-width:250px !important;
}

.contact-hero img{
    width: 60% !important;
    left: 40% !important;
}

.contact-map iframe{
    height: auto;
    width: 100%;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    margin-top: 0px;
    aspect-ratio: 9 / 5.4;
}

.contact-map{
    position:relative;
}

.contact-map:after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    display:block;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 64.61%, #FFF 100%);
    pointer-events:none;
}

.single h2 + p,
.single h3 + p,
.single h4 + p,
.single h5 + p{
    margin-top:12px;
}

nav.wp-block-query-pagination a:not(.wp-element-button).wp-block-query-pagination-previous, nav.wp-block-query-pagination a:not(.wp-element-button).wp-block-query-pagination-previous:focus, nav.wp-block-query-pagination a:not(.wp-element-button).wp-block-query-pagination-next, nav.wp-block-query-pagination a:not(.wp-element-button).wp-block-query-pagination-next:focus{
    border-bottom-width:1px !important;
    border-bottom-style:solid !important;
}

ul.wp-block-list{
    list-style:none;
}

ul.wp-block-list li{
    position: relative;
    padding-left: 10px;
}

ul.wp-block-list li::before{
    content: '';
    position: absolute;
    left: -5px;
    top: 10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color:#131C39;
}

.wp-block-list li::marker{
    font-size: 8px;
    color: inherit;
}


@media (max-width:1023px){
    .primaryBtn{
        display: none !important;
    }

    .mobilebox__button .primaryBtn{
        display: flex !important;
    }

    ul.text-menuLink li{
        border-bottom: 1px solid var(--UI-Grey-Outline, rgba(0, 0, 0, 0.10)) !important;
    }

    ul.text-menuLink li ul li{
        border-bottom:none !important;
    }

    ul.text-menuLink a:not(.wp-element-button).text-mobileMenuLink{
        padding:12px 0px !important;
    }

    ul.text-menuLink ul a:not(.wp-element-button).text-mobileMenuLink{
        padding:10px 0px !important;
    }

    .dropdown > ul li a > img{
        display:none;
    }

    ul.text-menuLink .dropdown{
        padding: 0 0 0 32px;
    }

    .menu-parent{
        position: relative;
        z-index: 1;
    }

    .menu-parent > a{
        flex: 1 1 auto;
        min-width: 0;
    }

    .menu-parent__toggle{
        flex: 0 0 auto;
        padding: 12px 0 12px 12px;
    }

    .cta-desktop .wp-block-columns .wp-block-column:first-child{
        max-width:400px;
    }

    .cta-desktop .wp-block-columns .wp-block-column:last-child .wp-block-group{
        margin-right:auto;
    }

}



@media (max-width:767px){

    .w-full > .wp-block-button{
        width: 100%;
    }

    .es-load-more-button{
        width: 100% !important;
    }


    .imgs-full-width .w-full img{
        width: 100%;
    }

    .frm-show-form .frm_submit .frm_button_submit{
        width: 100% !important;
    }

    .footer-menu>li>a{
        margin-bottom: 0px;
        font-size: 18px;
        letter-spacing: 0;
    }

    .map-iframe iframe{
        height: 250px;
    }


    .footer-menu>li>.sub-menu>li{
        margin-bottom: 16px;
    }

    body.single #content > article{
        padding-bottom:0px;
    }

    .footer-logos{
        margin-top:0px;
    }

    .footer-logo{
        width:100%;
        max-width:500px;
    }

    .footer-logos__item{
        width:100%;
        background: #fff;
        border-radius: 19px;
    }

    .hero-decoration:before{
        display:none;
    }

    .hero-decoration img{
        width:100%;
    }

    .hero-decoration-col{
        position:relative;
    }

    .hero-decoration-col{
        overflow-x: clip;
        overflow-y: visible;
    }

    .hero-decoration-col > *{
        position:relative;
        z-index:2;
    }

    .hero-decoration-col:before{
        content: '';
        position: absolute;
        left: -50%;
        right: -50%;
        bottom: -20%;
        display: block;
        background: var(--wp--preset--color--primary);
        border-radius: 0% 0 100% 100%;
        z-index: 1 !important;
        margin: auto;
        height: 420px;
    }

    .hero-decoration-col.v2:before{
        height:620px;
        bottom:-40%;
    }

    .decoration-1:before,
    .decoration-1.decoration-right:before{
        top: -240px;
        width: 50%;
        height: 604px;
        left: 0;
        right:auto;
        background-position: right bottom;
    }

    .header-logo{
        width:160px;
    }


}

@media (min-width: 1024px) {
    .menu-item-has-dropdown:hover > .dropdown,
    .menu-item-has-dropdown:focus-within > .dropdown,
    .menu-subitem-has-dropdown:hover > .dropdown,
    .menu-subitem-has-dropdown:focus-within > .dropdown {
        display: block;
    }

    /* Keep the clickable row above the bridge below, so the parent link stays
     * clickable while its panel is open.
     */
    .menu-item-has-dropdown > .menu-parent,
    .menu-subitem-has-dropdown > .dropdown-button {
        position: relative;
        z-index: 20;
    }

    /* The top-level panel sits 40px below the link, so bridge that gap —
     * otherwise the pointer leaves the <li> on the way down and it closes.
     */
    .menu-item-has-dropdown > .dropdown::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -40px;
        height: 40px;
    }

    /* Nested panels open to the right across a 5px gutter */
    .menu-subitem-has-dropdown > .dropdown::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -5px;
        width: 5px;
    }
}

/* Image Carousel — "showcase" layout (Layout field = Showcase).
 * Full-bleed row of uniform 3:4 images, centre slide active and enlarged.
 * Slide width comes from Splide's perPage; aspect-ratio drives the height, so
 * nothing depends on the images having loaded. The active slide is scaled
 * rather than resized, so the track never reflows mid-transition.
 */
.image-carousel--showcase{
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: 0;
    padding-right: 0;
    overflow-x: clip;
}

.image-carousel--showcase .splide__track{
    overflow: visible;
}

.image-carousel--showcase .splide__list{
    align-items: center;
}

/* Showcase sizing.
 *
 * Every slide is --ic-h tall. Width is left to the image: `height: 100%` with
 * `width: auto` renders it at its own aspect ratio, so a landscape photo takes
 * a wide slide and a portrait one takes a narrow slide. Splide is in autoWidth
 * mode, so it measures whatever each slide ends up being.
 *
 * Slides are all the same size regardless of state — no active styling.
 *
 * Height ramps mobile-first: 185 phone / 240 large phone / 300 tablet / 400
 * desktop, and the corner radius steps 12px -> 24px at desktop. Since width
 * follows the image, raising the height widens the slides too, so the steps are
 * kept modest to avoid a 16:9 image outrunning the viewport on smaller sizes.
 */
.image-carousel--showcase{
    --ic-h: 185px;
    --ic-radius: 12px;
}

.image-carousel--showcase .splide__slide{
    width: auto;
    height: var(--ic-h);
}

.image-carousel--showcase .splide__slide img{
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    border-radius: var(--ic-radius);
}

@media (min-width: 640px) {
    .image-carousel--showcase{
        --ic-h: 240px;
    }
}

@media (min-width: 768px) {
    .image-carousel--showcase{
        --ic-h: 300px;
    }
}

@media (min-width: 1024px) {
    .image-carousel--showcase{
        --ic-h: 400px;
        --ic-radius: 24px;
    }
}

/* Arrows / dots inherit the site's button colours */
.image-carousel--showcase .splide__arrow{
    background: var(--wp--preset--color--primary, #FAB012);
    opacity: 1;
    width: 44px;
    height: 44px;
}

.image-carousel--showcase .splide__arrow svg{
    fill: var(--wp--preset--color--text-primary, #131C39);
    width: 18px;
    height: 18px;
}

.image-carousel--showcase .splide__pagination__page.is-active{
    background: var(--wp--preset--color--primary, #FAB012);
    transform: scale(1);
}