@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    /* The service-area marker. One definition, two consumers: the pins on the
       Mapbox panel and the bullets in the city list beside it. The client asked
       for those to be the same icon, so they read the same four values instead
       of being two lookalikes that drift the next time one is touched. */
    --bb-marker-size: 13px;
    --bb-marker-fill: var(--bb-secondary, #FBC616);
    --bb-marker-ring: #4E1F0D;
    --bb-marker-ring-w: 3px;

    /* Collapsed header height: the nav row only, i.e. what stays on screen once
       the brown bar has scrolled away. Update if nav padding or logo size changes. */
    --header-h: 121px;

    /* Brown announcement bar height. Drives two things: how far the fixed header
       slides up on scroll, and the extra top padding .wrapper needs at rest.
       Set per breakpoint alongside --header-h in responsive.css. */
    --bar-h: 45px;
}

* {
    font-family: "Poppins", sans-serif;
    outline: none;
    margin: 0;
}

html body {
    background-color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    -webkit-text-fill-color: #666 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

form input:-webkit-autofill {
    appearance: none !important;
    background-image: none !important;
}

input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
}

input[type="file"]::-moz-file-upload-button {
    cursor: pointer;
}

input[type="file"]::-ms-file-upload-button {
    cursor: pointer;
}

input[type="file"]::-o-file-upload-button {
    cursor: pointer;
}

input[type="file"] {
    cursor: pointer;
}

*::-moz-selection {
    color: #000;
    background: #FBC616;
}

*::selection {
    color: #000;
    background: #FBC616;
}

*::-moz-selection {
    color: #000;
    background: #FBC616;
}

*::-webkit-selection {
    color: #000;
    background: #FBC616;
}

*::-ms-selection {
    color: #000;
    background: #FBC616;
}

*::-webkit-input-placeholder {
    color: #666;
    opacity: 1 !important;
}

*:-moz-placeholder {
    color: #666;
    opacity: 1 !important;
}

*::-moz-placeholder {
    color: #666;
    opacity: 1 !important;
}

*:-ms-input-placeholder {
    color: #666;
    opacity: 1 !important;
}

a,
div a:hover,
div a:active,
div a:focus,
button {
    text-decoration: none;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

a,
span,
div a:hover,
div a:active,
button {
    text-decoration: none;
}

*::after,
*::before,
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

body ul {
    margin: 0;
    padding: 0;
}

a {
    outline: none;
    color: #555;
}

.entry-content p a {
    text-underline-position: under;
    display: inline-block;
}

a:hover {
    color: #000;
}

body p a,
body p a:focus,
body .entry-content.default-page p a {
    color: #C89B3C;
}

body p a:hover,
body .entry-content.default-page p a:hover {
    color: #C89B3C;
    text-decoration: none !important;
}

body .clearfix,
body .clear {
    clear: both;
    line-height: 100%;
}

body .clearfix {
    height: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clr:after,
ul:after,
.clearfix:after,
li:after,
.grve-container:after {
    clear: both;
    display: block;
    content: "";
}

div input,
div select,
div textarea,
div button,
a,
button,
ul,
ul li,
ol,
li {
    font-family: "Poppins", sans-serif;
    list-style: none;
}

body p {
    font-family: "Poppins", sans-serif;
    margin: 0 0 15px !important;
    line-height: 195%;
    font-weight: normal;
}

body p:empty {
    display: none;
}

body p:last-child {
    margin: 0 !important;
}

body .text-white p {
    color: #fff;
}

body .text-white p a {
    color: #fff;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: "Poppins", sans-serif;
    line-height: 120%;
    margin: 0 0 15px !important;
}

body h1:last-child,
body h2:last-child,
body h3:last-child,
body h4:last-child,
body h5:last-child,
body h6:last-child {
    margin-bottom: 0 !important;
}

img {
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}

a {
    outline: none;
    cursor: pointer;
}

input:-internal-autofill-selected,
input:-webkit-autofill {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

#neve_body form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
#neve_body form select,
#neve_body form textarea {
    font-family: "Poppins", sans-serif;
    border: 1px solid #E4E4E4;
    background-color: #fff;
    border-radius: 5px;
    color: #666666;
    font-size: 17px;
    height: 56px;
    padding: 0 15px;
    width: 100%;
    box-shadow: none;
    text-transform: none;
}

#neve_body form input.wpcf7-not-valid:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
#neve_body form select.wpcf7-not-valid,
#neve_body form textarea.wpcf7-not-valid {
    border-color: #ff0000;
}

.recaptcha .g-recaptcha>div {
    border: 1px solid transparent;
    border-radius: 3px;
    overflow: hidden;
}

.recaptcha .g-recaptcha.wpcf7-not-valid>div {
    border-color: #ff0000;
}

body#neve_body.home main#content .main-banner {
    height: calc(80vh - var(--header-h));
    min-height: 400px;
}

body#neve_body.home main#content .main-banner .elementor-widget-image,
body#neve_body.home main#content .main-banner .elementor-widget-image img {
    height: 100%;
}

#neve_body form textarea {
    resize: none;
    height: 55px;
    padding: 15px;
    display: block;
    overflow: hidden;
    line-height: 130%;
}

#neve_body form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/sprite.png);
    background-position: calc(100% - 15px) -763px;
    background-repeat: no-repeat;
    background-size: auto;
    cursor: pointer;
}

#neve_body form select::-ms-expand {
    display: none;
}

form .wpcf7-not-valid-tip {
    font-size: 14px;
    line-height: normal;
    color: #ff0000;
    text-transform: none;
}

body .elementor-widget-button {
    flex-shrink: 0;
}

body .elementor-widget-button .elementor-button {
    background-color: #FBC616;
    position: relative;
    text-transform: uppercase !important;
}

body .elementor-element .elementor-button::before,
.contact-form .btn-input::before {
    content: "";
    position: absolute;
    right: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #4E1F0D;
    background-image: url(../images/sprite.png);
    background-position: 17px 20px;
    background-repeat: no-repeat;
    border-radius: 50px;
    width: 56px;
    height: 56px;
    z-index: 1;
    transition: all 0.3s ease 0s;
    pointer-events: none;
}

body .elementor-element .elementor-button:hover:before,
body .elementor-element.btn-darks .elementor-button::before,
.contact-form .btn-input:hover::before {
    background-color: #FBC616;
}

body .elementor-element.btn-darks .elementor-button:hover {
    background-color: #FBC616;
    color: #4E1F0D;
}

body .elementor-element.btn-darks .elementor-button:hover::before {
    background-color: #4E1F0D;
}

body .btn-instagram.elementor-element .elementor-button::before {
    background-position: 13px -595px;
}

body .elementor-widget-button.btn-white .elementor-button:hover {
    background-color: #fff;
}

body.no-scroll {
    overflow: hidden;
}

body .container {
    width: 100%;
    max-width: 1330px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    margin: 0 auto;
}

.section-gapping {
    padding-top: 110px;
    padding-bottom: 110px;
}

.bottom-gapping-50 {
    padding-bottom: 50px;
}

/*************************/
.wrapper {
    /* Header is fixed, so the page has to reserve its full at-rest height:
       brown bar + nav row. */
    padding-top: calc(var(--header-h) + var(--bar-h));
}

header.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    transition: all 0.5s ease 0s;
}

/* Past 100px of scroll custom.js puts .sticky on <body>. Slide the whole fixed
   header up by exactly the bar height so the brown bar leaves and the nav row
   lands flush at top: 0. The transition on header.header animates it.
   Per-breakpoint offsets come from --bar-h, so there is no override needed
   in responsive.css. */
body.sticky header.header {
    top: calc(-1 * var(--bar-h));
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.main-header .contact-item {
    position: relative;
    padding-left: 30px;
    color: #fff;
}

.main-header .contact-item::before {
    content: "";
    background-image: url(../images/sprite.png);
    background-position: 0 -181px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 21px;
    height: 17px;
}

.main-header .contact-item.phone-item::before {
    background-position: 0 -123px;
    height: 22px;
}

.main-header .contact-item a {
    color: #fff;
}

.main-header .contact-item a:hover {
    color: #FBC616;
}

.main-logo {
    margin-right: auto;
}

.main-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu .menu-item:hover .sub-arrow {
    rotate: 180deg;
}

.main-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-arrow {
    font-size: 16px;
}

.main-header .hfe-submenu-icon-arrow .hfe-nav-menu .parent-has-child .sub-arrow i:before {
    content: '\f078';
}

header#masthead nav>ul li .sub-arrow {
    position: absolute;
    right: 0;
    top: 2px;
    bottom: 0;
    margin: auto;
}

header#masthead nav>ul li .hfe-has-submenu-container {
    margin-right: 17px;
}

.star-icon {
    font-size: 0;
    background-image: url(../images/star-icon.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 87px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.footer-copyright,
.footer-copyright a {
    color: #fff;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}

.footer-copyright a:hover {
    color: #FBC616;
}

#scroll-to-top {
    padding: 0;
    width: 45px;
    height: 45px;
    bottom: 60px;
    z-index: 9;
}

.office-hours {
    color: #fff;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-links a {
    color: #fff !important;
    position: relative;
    padding-left: 60px;
    line-height: 42px;
}

.social-links a:hover {
    color: #FBC616 !important;
}

.social-links a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 42px;
    height: 42px;
    background-image: url(../images/sprite.png);
    background-position: 9px -225px;
    background-repeat: no-repeat;
    border: 1px solid #fff;
    border-radius: 50px;
}

.social-links a:nth-child(2)::before {
    background-position: 9px -283px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-info li {
    position: relative;
    padding-left: 35px;
}

.contact-info li::before {
    content: "";
    background-image: url(../images/sprite.png);
    background-position: 0 -55px;
    background-repeat: no-repeat;
    background-size: 37px;
    width: 23px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 5px;
}

.contact-info li.phone-link::before {
    background-position: 0 -112px;
}

.contact-info li.email-link::before {
    background-position: 0 -162px;
}

.contact-info li p {
    margin: 0 !important;
}

.contact-info li p,
.contact-info li a {
    color: #fff;
}

.contact-info li a {
    text-transform: none;
}

.contact-info li a:hover {
    color: #FBC616;
}

.main-header nav {
    width: auto !important;
}

.main-banner {
    position: relative;
}

.main-banner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: -30px;
    background-image: url(../images/big-img.webp);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: auto;
    z-index: 1;
    width: 225px;
    height: 202px;
    opacity: 1;
}

.main-banner .elementor-widget-image::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #000000;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
}

.main-banner .banner-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);
}

.google-review img {
    margin: 0;
    display: inline-block;
}

.google-review {
    display: flex;
    align-items: center;
    gap: 15px;
}

.services-section .icon {
    width: 58px;
    height: 58px;
    background-color: #4E1F0D;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 10px;
}

.after-icon::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -60px;
    background-image: url(../images/about-after-img.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 295px;
    height: 265px;
    z-index: -1;
}

.remodeling-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 35px;
}

.remodeling-services-grid .service-card {
    background-color: #fff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.11);
    border-radius: 25px;
    text-align: center;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.remodeling-services-grid .service-card.last-service {
    background-color: #FBC616;
    padding: 45px 32px;
}

.remodeling-services-grid .service-card.last-service .service-card-img {
    height: 275px;
    margin-bottom: 15px;
    min-height: auto;
}

.remodeling-services-grid .service-card.last-service .service-card-img img {
    width: auto;
}

.remodeling-services-grid .service-card.last-service .service-card-title {
    font-weight: 900;
    margin-bottom: 5px !important;
}

.last-service .elementor-widget-button .elementor-button {
    background-color: #4E1F0D;
    color: #fff;
}

.last-service .elementor-widget-button .elementor-button:hover {
    background-color: #fff;
    color: #4E1F0D;
}

.last-service .elementor-widget-button .elementor-button::before {
    background-color: #FBC616;
}

.last-service .elementor-widget-button .elementor-button:hover::before {
    background-color: #4E1F0D;
}

.remodeling-services-grid .service-card .service-card-img {
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    min-height: 300px;
}

.remodeling-services-grid .service-card .service-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remodeling-services-grid .service-card .service-card-title {
    color: #0A1A2C;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px !important;
}

.remodeling-services-grid .service-card .service-card-excerpt {
    padding: 0 10px 15px;
    line-height: 165%;
}

.remodeling-services-grid .service-card .service-card-btn {
    background-color: #FBC616;
    display: flex;
    width: auto;
    margin: 0 -12px -12px;
    border-radius: 0 0 25px 25px;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: #000;
    gap: 6px;
    padding: 13px 15px;
    margin-top: auto;
    transition: none;
}

.remodeling-services-grid .service-card .service-card-btn::after {
    content: "";
    background-image: url(../images/sprite.png);
    background-position: 0 -424px;
    background-repeat: no-repeat;
    width: 24px;
    height: 17px;
}

.remodeling-services-grid .service-card .service-card-btn:hover {
    background-color: #4E1F0D;
    color: #fff;
}

.remodeling-services-grid .service-card .service-card-btn:hover::after {
    background-position: 0 -474px;
}

.areas-section .google-map,
.areas-section .google-map * {
    height: 100%;
}

.areas-section .google-map iframe {
    border-radius: 20px;
    min-height: 250px;
}

.areas-section .map-list .county-wrapper h3 {
    font-size: 22px;
    color: #0A1A2C;
    font-weight: 600;
    border-bottom: 3px solid #FBC616;
    padding-bottom: 15px;
    margin-bottom: 20px !important;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    cursor: pointer;
}

.areas-section .map-list .county-wrapper h3 .arrow.open svg.plus,
.areas-section .map-list .county-wrapper h3 .arrow svg.minus {
    display: none;
}

.areas-section .map-list .county-wrapper h3 .arrow.open svg.minus {
    display: block;
}

.county-wrapper .county-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 25px;
    gap: 15px;
    margin-top: 0;
}

.county-wrapper .county-list:last-child {
    margin-bottom: 0;
}

.county-wrapper .county-list li {
    position: relative;
    padding-left: 30px;
    margin: 0;
}

/* The same marker as the map pins, drawn from the same tokens. Was an 18x26
   teardrop sliced out of sprite.png at 0 -350px: a 1x raster shown at 1x, so it
   fringed on retina, and a different shape from the thing it sat next to. */
.county-wrapper .county-list li::before {
    content: "";
    width: var(--bb-marker-size);
    height: var(--bb-marker-size);
    border-radius: 50%;
    background: var(--bb-marker-fill);
    border: var(--bb-marker-ring-w) solid var(--bb-marker-ring);
    box-sizing: content-box;
    position: absolute;
    left: 0;
    /* Vertically centred on the line box: half the line, less half the marker.
       The marker measures size + both borders because box-sizing is content-box.
       The em value is the fallback and assumes the 1.7 line-height this list
       inherits; the lh value tracks the real line-height and wins wherever the
       unit is understood. Do not go back to a fixed offset, it read 4px low. */
    top: calc((1.7em - (var(--bb-marker-size) + 2 * var(--bb-marker-ring-w))) / 2);
    top: calc((1lh - (var(--bb-marker-size) + 2 * var(--bb-marker-ring-w))) / 2);
}

.e-n-accordion-item .elementor-widget-text-editor {
    color: #515151;
    text-transform: none;
}

.why-list .elementor-widget-image-box figure {
    flex-shrink: 0;
    background-color: #F9AA11;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 117px;
    height: 117px;
    padding: 15px;
}

.why-list .elementor-widget-image-box:nth-child(2) figure,
.why-list .elementor-widget-image-box:nth-child(3) figure {
    background-color: #B75716;
}

.why-list .elementor-widget-image-box figure img {
    width: auto;
    height: auto;
}

.why-list .elementor-widget-image-box .elementor-image-box-wrapper {
    gap: 25px;
}

.why-list .elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-title {
    margin-bottom: 5px !important;
}

.why-list .why-logo {
    position: absolute;
    width: 143px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sbi_item img {
    border-radius: 18px;
}

#sb_instagram {
    padding-bottom: 0 !important;
}

#sb_instagram #sbi_images {
    padding: 0;
}

.our-process-list .elementor-image-box-wrapper figure {
    background-color: #4E1F0D;
    border-radius: 50%;
    width: 158px;
    height: 158px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px !important;
    position: relative;
    z-index: 1;
}

.our-process-list .elementor-widget-image-box:nth-child(2n) .elementor-image-box-wrapper figure {
    background-color: #FBC616;
}

.our-process-list .elementor-widget-image-box figure::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 100%;
    background-image: url(../images/line-img1.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 150%;
    height: 42px;
}

.our-process-list .elementor-widget-image-box:nth-child(2) figure::before {
    background-image: url(../images/line-img2.png);
}

.our-process-list .elementor-widget-image-box:last-child figure::before {
    display: none;
}

.our-process-list {
    counter-reset: step-counter;
}

.our-process-list .elementor-widget-image-box figure::after {
    content: "0" counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    background-color: #F59F14;
    font-family: "Poppins", sans-serif;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.our-process-list .elementor-widget-image-box:nth-child(2n) figure::after {
    background-color: #4E1F0D;
}

.google-review-slider .ti-widget.ti-goog .ti-review-item {
    background-color: #fff;
    border-radius: 15px;
    padding: 55px 30px 30px;
    box-shadow: 0 15px 25px rgb(183 87 22 / 10%);
    margin: 35px 15px;
    flex: 0 0 calc(25% - 30px) !important;
    max-width: calc(25% - 30px) !important;
}

.google-review-slider .ti-widget.ti-goog .ti-review-item::before {
    content: "";
    position: absolute;
    top: -35px;
    left: 30px;
    background-color: #B75716;
    width: 65px;
    height: 65px;
    border-radius: 50px;
    background-image: url(../images/sprite.png);
    background-position: 17px -512px;
    background-repeat: no-repeat;
}

.google-review-slider .ti-widget.ti-goog .ti-review-item .ti-inner {
    padding: 0 !important;
    background: #FFF !important;
}

.google-review-slider .ti-widget.ti-goog .ti-review-item .ti-inner .ti-platform-icon {
    top: -35px;
    right: -10px;
    width: 32px !important;
    height: 32px !important;
}

.google-review-slider .ti-widget.ti-goog .ti-review-item .ti-inner .ti-review-text {
    font-size: 18px;
    line-height: normal;
}

.google-review-slider .ti-widget.ti-goog .ti-review-item .ti-review-header {
    padding: 0;
}

.google-review-slider .ti-widget.ti-goog .ti-review-item .ti-review-header::before {
    display: none;
}

.google-review-slider .ti-review-header .ti-profile-details .ti-name {
    color: #101010 !important;
    font-size: 20px;
}

.google-review-slider .ti-review-header .ti-profile-details .ti-date {
    font-size: 16px;
    color: #6E6E6E !important;
}

.modal-dialog .modal-header button.close {
    font-size: 24px;
    background-color: transparent;
    box-shadow: none;
    outline: none;
}

.nv-page-title-wrap.nv-big-title {
    display: none;
}

.ti-widget.ti-goog .ti-controls-line {
    display: none !important;
}

summary.e-n-accordion-item-title {
    box-shadow: none !important;
}

.elementor-widget-n-accordion .e-n-accordion-item-title {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

ul.sub-menu {
    position: absolute !important;
}

.breadcrumbs .elementor-shortcode span {
    font-size: 0;
}

.breadcrumbs .elementor-shortcode span span {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
}

.breadcrumbs .elementor-shortcode span span.breadcrumb_last {
    color: #FBC616;
}

.breadcrumbs .elementor-shortcode span a {
    color: #fff;
}

.breadcrumbs .elementor-shortcode span a:hover {
    color: #FBC616;
}

.breadcrumbs .elementor-shortcode span:not(:first-child)::before {
    content: "";
    border-left: 2px solid;
    border-bottom: 2px solid;
    width: 8px;
    height: 8px;
    display: inline-flex;
    rotate: -135deg;
    margin: 0 12px;
    position: relative;
    top: -5px;
}

.main-header .hfe-nav-menu .menu-item.current-menu-item>a,
#masthead .main-header .hfe-nav-menu li.current-menu-parent>.hfe-has-submenu-container>a {
    font-weight: 600;
}

.banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-content .page-title {
    color: #fff;
    font-size: 100px;
    width: 100%;
    max-width: 540px;
    line-height: 110%;
}

.service-description .wp-block-image {
    float: left;
    width: 630px;
    margin: 0 95px 50px 0;
    border-radius: 32px;
    overflow: hidden;
}

.service-description .wp-block-heading {
    font-weight: 600;
    color: #0A1A2C;
    font-size: 50px;
    position: relative;
    padding-top: 70px;
    display: inline-block;
    text-transform: uppercase;
    width: 100%;
    max-width: 410px;
}

.service-description .wp-block-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../images/left-title-icon.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 174px;
    height: 65px;
}

.service-gallery .image-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.service-gallery .image-gallery .gallery-item {
    border-radius: 18px;
    overflow: hidden;
}

.service-gallery .image-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-section .cta-container {
    background-image: url(../images/ready_bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 25px;
}

.cta-container .transform-img {
    background-color: #FBC616;
    border-radius: 50px 50px 50px 250px;
    overflow: hidden;
    padding-left: 25px;
}

.cta-container .transform-img img {
    border-radius: 50px 50px 50px 250px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-container .cta-content {
    padding: 20px 0 20px 60px;
}

.cta-content .cta-heading {
    color: #fff;
    font-weight: 700;
    font-size: 54px;
    margin-bottom: 30px !important;
    text-transform: capitalize;
}

.hfe-nav-menu li.menu-item .sub-menu li a.hfe-sub-menu-item-active {
    color: #FBC616 !important;
}

.main-header .hfe-nav-menu ul.sub-menu {
    padding: 15px;
}

.contact-booking iframe {
    min-height: 100vh;
}

.contact-info.contact-page-info::after {
    display: none;
}

.contact-info.contact-page-info li {
    padding-left: 72px;
    display: flex;
    align-items: center;
    min-height: 56px;
    text-align: left;
}

.contact-info.contact-page-info li a {
    color: #000;
    font-size: 20px;
    font-weight: 600;
}

.contact-info.contact-page-info li a:hover {
    color: #4E1F0D;
}

.contact-info.contact-page-info li::before {
    width: 56px;
    height: 56px;
    background-color: #4E1F0D;
    border-radius: 50px;
    background-position: 18px -46px;
    background-size: auto;
    bottom: 0;
    margin: auto;
}

.contact-info.contact-page-info li.phone-link::before {
    background-position: 16px -107px;
}

.contact-info.contact-page-info li.email-link::before {
    background-position: 16px -161px;
}

.step-section>.e-con-inner {
    position: relative;
}

.step-section>.e-con-inner::before {
    content: "";
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    width: 3px;
    top: 0;
    bottom: 0;
    background-color: #4E1F0D;
    z-index: -1;
}

.step-section .step-div::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 36px;
    height: 36px;
    background-color: #fff;
    border-radius: 50px;
    border: 8px solid #F59F14;
    top: 110px;
    transform: none !important;
}

.step-section.after-icon::after {
    transform: rotateY(-180deg);
}

.google-review-slider .ti-widget-container .ti-reviews-container .ti-controls {
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0;
}

.google-review-slider .ti-widget-container .ti-reviews-container .ti-review-text {
    margin-bottom: 25px;
    margin-top: 15px;
}

.number-div.after-icon::after {
    right: -150px;
    bottom: 20px;
}

.google-review-slider .ti-widget.ti-goog .ti-controls .ti-next,
.google-review-slider .ti-widget.ti-goog .ti-controls .ti-prev {
    width: 40px;
    height: 40px;
    background-color: #4E1F0D;
    border-radius: 25px;
}

.google-review-slider .ti-widget.ti-goog .ti-controls .ti-next:before,
.google-review-slider .ti-widget.ti-goog .ti-controls .ti-prev:before {
    border-color: #fff;
}

.google-review-slider .ti-widget.ti-goog .ti-controls .ti-next {
    right: -50px;
}

.google-review-slider .ti-widget.ti-goog .ti-controls .ti-prev {
    left: -50px;
}

.video-section {
    min-height: 515px;
}

.transform-img * {
    height: 100%;
}

.text-ul ul {
    margin-top: 20px;
}

.text-ul ul li {
    position: relative;
    padding-left: 60px;
    font-weight: 600;
    line-height: normal;
    min-height: 41px;
    display: flex;
    align-items: center;
    text-align: left;
    margin-bottom: 15px;
}

.text-ul ul li::before {
    content: "";
    position: absolute;
    left: 0;
    background-image: url(../images/sprite.png);
    background-position: 0 -687px;
    background-repeat: no-repeat;
    width: 40px;
    height: 41px;
}

.form-contact {
    width: 100%;
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 4px 4px 10px 5px rgba(0, 0, 0, 0.1);
    padding: 45px;
}

.form-contact .contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-contact .contact-form {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-start;
}

.form-contact .contact-form>.recaptcha,
.form-contact .contact-form .btn-input {
    grid-column: span 2;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    flex-wrap: wrap;
}

.page-id-1359 .form-contact .contact-form {
    display: block;
}

.page-id-1359 .form-contact .contact-form>div {
    margin-bottom: 15px !important;
}

.contact-form .field-input .wpcf7-form-control-wrap {
    display: block;
}

.contact-form .btn-input {
    position: relative;
    width: 230px;
}

.contact-form .btn-input input[type="submit"] {
    line-height: 1;
}

.contact-form .btn-input .wpcf7-spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: -40px;
}

#neve_body .wpcf7-response-output {
    border: 1px solid;
    color: #ff0000;
    text-align: center;
    font-size: 16px;
    line-height: normal;
    padding: 5px;
    margin: 15px 0 0;
    text-transform: none;
}

#neve_body .sent .wpcf7-response-output {
    color: green;
}

.grid-2.text-ul ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.grid-2.text-ul.after-icon::after {
    right: 0;
    left: 0;
    margin: auto;
    top: 90px;
}

.video-ul.text-ul ul {
    margin: 0 0 20px;
}

.video-ul.text-ul ul li {
    display: block;
    font-weight: 400;
}

.video-ul.text-ul ul li:not(:last-child) {
    margin-bottom: 20px;
}

html.no-scroll {
    overflow: hidden;
}

#calendarModal .modal-dialog {
    width: 90%;
    max-width: 1300px;
    margin: 10px auto;
}

.google-review-slider .ti-widget.ti-goog .ti-widget-container {
    margin-bottom: 0;
}

.grid-2 p b {
    font-size: 20px;
}

.main-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu .current-menu-item>a.hfe-menu-item {
    color: #4E1F0D !important;
}

.google-review-slider .ti-widget.ti-goog .ti-controls-line {
    display: none !important;
}

.hfe-nav-menu li.menu-item.last-menu {
    display: none;
}

body .project-img img {
    background-color: #e4e4e4;
}

main#content .inner-banner.main-banner {
    height: auto;
    min-height: fit-content;
}

.transform-section {
    max-height: 390px;
}

.transform-section .transform-img {
    max-width: 535px;
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(500px);
    }
}

main#content .about-banner-img img {
    object-position: center -170px;
}

/* View Project cue on the project cards (Elementor loop item #5139).
   Same sprite arrow as the main button, black variant because the card text is
   dark on a light background. Swap to "0 0" for the white glyph on dark cards. */
.view-proj-btn .elementor-heading-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.view-proj-btn .elementor-heading-title::after {
    content: "";
    background-image: url(../images/sprite.png);
    background-position: 0 -424px;
    background-repeat: no-repeat;
    width: 25px;
    height: 15px;
    flex-shrink: 0;
    transition: transform 0.3s ease 0s;
}

a:hover .view-proj-btn .elementor-heading-title::after {
    transform: translateX(4px);
}
nn/* ==========================================================================
   Beaverbuild - old Google review slider styling, ported to the new
   [trustindex data-widget-id=...] widget.

   WHY IT BROKE
   The design is child-theme CSS, not a Trustindex setting. The originals
   (custom.css ~995-1055, 1315-1350, 1496-1510 and responsive.css) are all
   scoped to  .google-review-slider .ti-widget.ti-goog ...

   The server-rendered no-registration widget emits
       <div class=" ti-widget  ti-goog ... ">
   The CDN loader.js widget emits
       <div class=" ti-widget " data-pid="db7241...">

   No .ti-goog, so every rule misses.

   WHY THE SELECTORS LOOK OVERBUILT
   The CDN widget injects its own stylesheet into <head> at runtime, i.e.
   AFTER this file, and it uses !important on the card properties. At equal
   specificity the later sheet wins, so a first pass at
   .google-review-slider .ti-widget .ti-review-item lost every card rule
   while the arrow and icon rules came through. Classes are doubled here
   (.ti-widget.ti-widget, .ti-review-item.ti-review-item) purely to buy
   specificity, and every declaration is !important. Do not "tidy" the
   duplicate classes out; they are what makes this hold.

   Append to: wp-content/themes/neve-child/assets/css/custom.css
   That file is enqueued with filemtime versioning, so it cache-busts itself.
   Leave the original .ti-goog rules alone; they still serve pages on the
   old shortcode and never collide with these.
   ========================================================================== */

/* --- Carousel viewport: make room for the overhanging badge -------------- */
/* The slide viewport needs overflow:hidden to hide off-screen reviews, and
   that was shaving the badge and the card's top padding. overflow:hidden
   clips at the PADDING edge, not the content edge, so the badge lives
   safely inside this padding band. The card carries no top margin for the
   same reason: a top margin sits in the content box and gets clipped. */
body .google-review-slider .ti-widget.ti-widget .ti-reviews-container {
    overflow: visible !important;
}

body .google-review-slider .ti-widget.ti-widget .ti-reviews-container-wrapper {
    padding-top: 40px !important;
    align-items: flex-start !important;
}

/* --- Track cell: DO NOT STYLE ------------------------------------------- */
/* .ti-review-item is the carousel's track cell, not the card. The widget
   builds the gutter out of this element's horizontal PADDING, sized from
   the gap setting, and the slider advances by a step derived from its own
   item width. So:
     - no padding here (it would delete the gap setting's effect)
     - no flex-basis / max-width / horizontal margin (it desyncs the slide
       step, and cards bleed off both edges after the first click)
   The original design did override these, which is why it needed its own
   margin gutter and its own 25% widths. That fought the slider. Overflow is
   the only thing touched, so the badge can overhang. */
body .google-review-slider .ti-widget.ti-widget .ti-review-item.ti-review-item {
    overflow: visible !important;
}

/* --- Card: this is the visible box -------------------------------------- */
/* Everything the old design put on .ti-review-item belongs here instead.
   Scoped as a direct child deliberately: the "Verified by Trustindex"
   footer has its own .ti-inner. */
body .google-review-slider .ti-widget.ti-widget .ti-review-item.ti-review-item > .ti-inner.ti-inner {
    position: relative !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 15px !important;
    padding: 55px 30px 30px !important;
    margin: 0 0 35px !important;
    box-shadow: 0 15px 25px rgb(183 87 22 / 10%) !important;
    overflow: visible !important;
}

/* --- Quote badge --------------------------------------------------------- */
/* Overhangs the card top by 25px, inside the viewport's 40px top padding,
   leaving 15px of clearance from the clip edge. If you increase this
   overhang, increase the viewport padding-top above by the same amount. */
body .google-review-slider .ti-widget.ti-widget .ti-review-item.ti-review-item > .ti-inner.ti-inner::before {
    content: "" !important;
    position: absolute !important;
    top: -25px !important;
    left: 30px !important;
    background-color: #B75716 !important;
    width: 65px !important;
    height: 65px !important;
    border-radius: 50px !important;
    background-image: url(../images/sprite.png) !important;
    background-position: 17px -512px !important;
    background-repeat: no-repeat !important;
    z-index: 2 !important;
    display: block !important;
}

/* --- Google mark, header, meta ------------------------------------------- */
/* Measured against .ti-review-header, which starts 55px down inside the
   card. -30px lands the icon 25px below the card's top edge, clear of both
   the badge and the name row. Raise toward -55px to move it up, toward
   0 to move it down. */
body .google-review-slider .ti-widget.ti-widget .ti-review-item.ti-review-item .ti-inner .ti-platform-icon {
    top: -30px !important;
    right: -10px !important;
    width: 32px !important;
    height: 32px !important;
}

body .google-review-slider .ti-widget.ti-widget .ti-review-item.ti-review-item .ti-review-header {
    padding: 0 !important;
}

body .google-review-slider .ti-widget.ti-widget .ti-review-item.ti-review-item .ti-review-header::before {
    display: none !important;
}

body .google-review-slider .ti-widget.ti-widget .ti-review-header .ti-profile-details .ti-name {
    color: #101010 !important;
    font-size: 20px !important;
}

body .google-review-slider .ti-widget.ti-widget .ti-review-header .ti-profile-details .ti-date {
    font-size: 16px !important;
    color: #6E6E6E !important;
}

/* --- Review body --------------------------------------------------------- */
/* Spacing only. Font size is deliberately NOT set.
   The widget's JS writes an inline style="height: 87px !important" on
   .ti-review-content. A style-attribute !important outranks a stylesheet
   !important, so that height cannot be overridden from CSS at all, and
   enlarging the text would clip it inside a box locked to 87px.
   To get bigger review copy, change the font size in the Trustindex widget
   settings so it recomputes the height too. */
body .google-review-slider .ti-widget.ti-widget .ti-reviews-container .ti-review-content {
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    color: #101010 !important;
}

/* The theme's link colour was bleeding into words inside review text. */
body .google-review-slider .ti-widget.ti-widget .ti-review-content,
body .google-review-slider .ti-widget.ti-widget .ti-review-content * {
    color: #101010 !important;
}

body .google-review-slider .ti-widget.ti-widget .ti-widget-container {
    margin-bottom: 0 !important;
}

/* --- Carousel arrows ----------------------------------------------------- */
body .google-review-slider .ti-widget.ti-widget .ti-widget-container .ti-reviews-container .ti-controls {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

body .google-review-slider .ti-widget.ti-widget .ti-controls .ti-next,
body .google-review-slider .ti-widget.ti-widget .ti-controls .ti-prev {
    width: 40px !important;
    height: 40px !important;
    background-color: #4E1F0D !important;
    border-radius: 25px !important;
    outline: none !important;
}

body .google-review-slider .ti-widget.ti-widget .ti-controls .ti-next:before,
body .google-review-slider .ti-widget.ti-widget .ti-controls .ti-prev:before {
    border-color: #fff !important;
}

body .google-review-slider .ti-widget.ti-widget .ti-controls .ti-next { right: -50px !important; }
body .google-review-slider .ti-widget.ti-widget .ti-controls .ti-prev { left: -50px !important; }

body .google-review-slider .ti-widget.ti-widget .ti-controls-line {
    display: none !important;
}

/* --- Responsive: same breakpoints and values as responsive.css ----------- */
@media screen and (max-width: 1300px) {
    body .google-review-slider .ti-widget.ti-widget .ti-controls .ti-next { right: -15px !important; }
    body .google-review-slider .ti-widget.ti-widget .ti-controls .ti-prev { left: -15px !important; }
}

/* No column-count breakpoints here, for the same reason as above: the
   slider owns item widths. How many reviews show per row at each size is
   set in the widget's own responsive settings. */

@media screen and (max-width: 767px) {
    body .google-review-slider .ti-widget.ti-widget .ti-reviews-container-wrapper {
        padding-top: 30px !important;
    }

    body .google-review-slider .ti-widget.ti-widget .ti-review-item.ti-review-item > .ti-inner.ti-inner {
        padding: 35px 15px 20px !important;
        box-shadow: 0 15px 30px rgb(183 87 22 / 10%) !important;
        margin: 0 0 25px !important;
    }

    body .google-review-slider .ti-widget.ti-widget .ti-review-item.ti-review-item > .ti-inner.ti-inner::before {
        top: -18px !important;
        left: 20px !important;
        width: 45px !important;
        height: 45px !important;
        background-position: 9px -442px !important;
        background-size: 35px !important;
    }

    body .google-review-slider .ti-widget.ti-widget .ti-review-item.ti-review-item .ti-inner .ti-platform-icon {
        top: -22px !important;
        right: 0px !important;
        width: 25px !important;
        height: 25px !important;
    }
}

/* ==========================================================================
   Google review badge  [bb_google_badge]
   Homepage hero, replacing the old .bb-trust line.

   Reads as an actual Google badge rather than our own claim: white pill, the
   real score and partial-fill stars, linking out to the Google listing. The
   review count line was removed 2026-08-31 at the client's request.
   Star gold is Google's #FBBC04 rather than the brand yellow
   on purpose. The whole point is that it looks like it came from Google, and
   the brand yellow reads as "we made this graphic ourselves".
   ========================================================================== */
.bb-gbadge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px;
    /* Full pill now that it is a single row. Matches the pill language the
       buttons and CTA already use, and a 14px card radius left the one-line
       badge looking like a box with the second line missing. */
    border-radius: 999px;
    background: #fff;
    text-decoration: none !important;
    /* Sits on a photographic hero, so it needs its own separation from the
       image rather than relying on the gradient behind it. */
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
    transition: transform .25s ease, box-shadow .25s ease;
    max-width: 100%;
}

.bb-gbadge:hover,
.bb-gbadge:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.bb-gbadge--light {
    background: #fff;
    border: 1px solid #E7E4DF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.bb-gbadge__g { width: 30px; height: 30px; flex: 0 0 30px; display: block; }

.bb-gbadge__score {
    font-family: "Poppins", sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #1F1F1F;
    text-transform: none;
}

.bb-gbadge__stars { height: 18px; width: auto; display: block; flex: none; }

/* Compact variant, used above the hero headline.
   At full size, stacked between the H1 and the CTA, this sat in the reading
   path to the button and matched it closely enough in shape and weight to read
   as a second button. Smaller and above the headline, it becomes a lead-in
   instead of a competitor: the yellow CTA is then the only heavy pill in the
   hero and clearly the one thing to click. */
.bb-gbadge--sm { gap: 9px; padding: 7px 14px 7px 12px; }
.bb-gbadge--sm .bb-gbadge__g { width: 20px; height: 20px; flex-basis: 20px; }
.bb-gbadge--sm .bb-gbadge__score { font-size: 15px; }
.bb-gbadge--sm .bb-gbadge__stars { height: 13px; }
/* Lighter lift than the full-size badge: at this scale the big shadow was
   doing more to attract the eye than the badge itself. */
.bb-gbadge--sm { box-shadow: 0 3px 12px rgba(0, 0, 0, .18); }
.bb-gbadge--sm:hover,
.bb-gbadge--sm:focus-visible { box-shadow: 0 5px 16px rgba(0, 0, 0, .24); }

/* Visually hidden, still announced. */
.bb-gbadge__sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

@media screen and (max-width: 767px) {
    .bb-gbadge { gap: 10px; padding: 9px 18px; }
    .bb-gbadge__g { width: 26px; height: 26px; flex-basis: 26px; }
    .bb-gbadge__score { font-size: 18px; }
    .bb-gbadge__stars { height: 16px; }

    .bb-gbadge--sm { gap: 8px; padding: 6px 12px 6px 10px; }
    .bb-gbadge--sm .bb-gbadge__g { width: 18px; height: 18px; flex-basis: 18px; }
    .bb-gbadge--sm .bb-gbadge__score { font-size: 14px; }
    .bb-gbadge--sm .bb-gbadge__stars { height: 12px; }
}

/* ==========================================================================
   Service-area map  [bb_service_map]

   Mapbox GL JS panel replacing the static county JPEGs. The fallback image sits
   underneath the canvas and is revealed if the library or the token fails, so a
   blocked domain or an expired token degrades to the old picture instead of an
   empty grey rectangle.
   ========================================================================== */
.bb-map {
    position: relative;
    width: 100%;
    height: var(--bb-map-h, 550px);
    border-radius: 25px;
    overflow: hidden;
    background: #F6F3EE;
}

/* Two classes, not one, and this matters. Mapbox adds .mapboxgl-map to the
   element we hand it and injects its own stylesheet into <head> at RUNTIME,
   so its rules land after custom.css. Its ".mapboxgl-map { position: relative }"
   was beating a single-class "position: absolute" here at equal specificity,
   which collapsed this box to height 0. Mapbox then fell back to a default
   300px canvas inside a 550px container and rendered a letterboxed strip.
   .bb-map .bb-map__canvas is (0,2,0) and wins. Do not simplify this back. */
.bb-map .bb-map__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .5s ease;
}
.bb-map.is-ready .bb-map__canvas { opacity: 1; }

/* Fallback is visible until the map paints, which also covers the load-in. */
.bb-map__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

.bb-map.is-ready .bb-map__fallback { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.bb-map.is-failed .bb-map__canvas { opacity: 0; }

/* --- markers -------------------------------------------------------------
   Real HTML, so the names are selectable text rather than pixels on a canvas. */
/* The dot is the anchor and sits exactly on the coordinate; the label is
   positioned around it by layoutLabels, which picks whichever of the four
   sides is clear. Absolute positioning is what lets the label move without
   ever dragging the dot off the city it marks. */
.bb-map__pin {
    position: relative;
    width: 13px;
    height: 13px;
    cursor: default;
}

.bb-map__dot {
    position: absolute;
    inset: 0;
    width: var(--bb-marker-size);
    height: var(--bb-marker-size);
    flex: 0 0 var(--bb-marker-size);
    border-radius: 50%;
    background: var(--bb-marker-fill);
    border: var(--bb-marker-ring-w) solid var(--bb-marker-ring);
    /* Sits on live map tiles, so it needs to lift off whatever is under it.
       The list bullet is on flat white and deliberately skips this. */
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* Crowded: keep the dot, drop the name. Set by layoutLabels in
   bb-service-map.js, which measures real boxes on every camera change. */
.bb-map__pin.is-crowded .bb-map__name { display: none; }
.bb-map__pin.is-left  .bb-map__name { left: auto; right: 20px; }
.bb-map__pin.is-above .bb-map__name { top: auto; bottom: 20px; left: 50%; transform: translateX(-50%); }
.bb-map__pin.is-below .bb-map__name { top: 20px; left: 50%; transform: translateX(-50%); }

.bb-map__name {
    position: absolute;
    /* Names stay on one line. Without this the absolutely positioned label
       shrink-wraps and "Lake Forest Park" stacks into three lines. */
    white-space: nowrap;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #3A2317;
    text-transform: none;
    /* Halo instead of a pill: keeps the label readable over roads and water
       without stamping a heavy brown block on the map the way the old
       screenshot's labels did. */
    paint-order: stroke;
    -webkit-text-stroke: 2px #F6F3EE;
    text-shadow: 0 0 2px #F6F3EE, 0 0 2px #F6F3EE;
}

/* The Elementor kit styles bare <button> elements into yellow pills, which
   caught Mapbox's own zoom and attribution controls: the compact attribution
   toggle rendered as a yellow lozenge in the corner on mobile. Same trap the
   project gallery tiles hit. Reset only inside the map. */
.bb-map .mapboxgl-ctrl button {
    background-color: #fff;
    border-radius: 0;
    padding: 0;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}
.bb-map .mapboxgl-ctrl button::before,
.bb-map .mapboxgl-ctrl button::after { content: none; }
.bb-map .mapboxgl-ctrl-attrib-button { border-radius: 50%; }

/* Mapbox requires its attribution to stay visible. Toned down, never hidden. */
.bb-map .mapboxgl-ctrl-attrib { font-size: 10px; background: rgba(255, 255, 255, .82); }
.bb-map .mapboxgl-ctrl-bottom-right { z-index: 2; }

@media screen and (max-width: 1023px) {
    .bb-map { height: 420px; border-radius: 20px; }
    .bb-map__name { font-size: 12px; }
}

@media screen and (max-width: 767px) {
    .bb-map { height: 340px; }
}


/* --- selection fix (2026-09-03) ------------------------------------
   *::selection paints the brand yellow across anything a touch-drag
   selects, so on a phone dragging over a photo tile or a project card
   covered the image in solid yellow. Real copy keeps the brand
   highlight; media and card surfaces opt out of selection. */
img,
picture,
figure,
#sb_instagram .sbi_item,
#sb_instagram .sbi_photo_wrap,
#sb_instagram .sbi_photo,
.bb-map,
.bb-map *,
.elementor-widget-image,
.elementor-widget-image * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

a, a *, button, .elementor-button {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* --- end selection fix --- */


/* --- calendly inline height (2026-09-03) ---------------------------
   Backstop for the height listener in footer.php. If the message never
   arrives the frame is still tall enough for Calendly's longest step,
   so the page scrolls rather than the frame. */
.calendly-inline-widget {
	width: 100%;
	height: 1100px;
}

@media screen and (max-width: 767px) {
	.calendly-inline-widget { height: 1750px; }
}
/* --- end calendly inline height --- */