:root {
    /* Motion */
    --ease-base: .35s ease;
    --ease-slow: .7s ease;
    --ease-overlay: .4s ease;
    --lift-card: -8px;
    --scale-img: 1.06;

    /* Color */
    --c-black: #000;
    --c-dark: #111;
    --c-white: #fff;
    --c-text-light: #828487;
    --c-text-faint: #8a8a8a;
    --c-border: #e5e5e5;
    --c-bg: #F9F9F9;

    /* Radius */
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* Shared button icon size */
    --btn-icon: 42px;
    --c-project-accent: #B85C2E;
    /* warm terracotta/concrete-orange — evokes "built", pairs with grey concrete tones */
    --c-project-accent-soft: #F3E7DE;
    --radius-project-card: 14px;
}

.hero-btn,
.cta-btn,
.bottom-cta-btn,
.header-cta {
    transition: var(--ease-base);
}

.hero-btn span,
.cta-btn-icon,
.bottom-cta-icon,
.header-cta span,
.mobile-cta span,
.faq-btn-icon,
.cf-submit-icon,
.service-arrow {
    transition: var(--ease-base);
    flex-shrink: 0;
    box-sizing: border-box;
}

.experience-card,
.builder-feature-card,
.location-card {
    transition: var(--ease-base);
}

.experience-card:hover,
.location-card:hover {
    transform: translateY(var(--lift-card));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}

/* ==========================================================
   GLOBAL: prevent text-selection highlight bleeding onto
   nearby content when clicking any slider arrow/pagination
========================================================== */
.swiper-button-prev,
.swiper-button-next,
.swiper-pagination,
.swiper-pagination-bullet,
.service-slider-prev,
.service-slider-next,
.service-slider-pagination,
.offering-slider-prev,
.offering-slider-next,
.hero-btn,
.cta-btn,
.bottom-cta-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Captions/titles that sit next to slider controls — stop them from
   visually "catching" a stray selection */
.service-slide-caption,
.service-block-title,
.testimonial-quote,
.testimonial-name,
.testimonial-role,
.offering-card-label,
.hero-content h1,
.hero-content p {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ==========================================================
   HERO BANNER
========================================================== */
.hero-banner {
    margin-top: calc(var(--header-height, 120px) * -1);
    position: relative;
    z-index: 1;
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease;
}

.hero-banner:hover .hero-bg img {
    transform: scale(1.06);
}

.hero-overlay {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .75) 100%);
}

.hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
    padding-top: clamp(140px, 15vw, 200px);
    padding-bottom: clamp(80px, 10vw, 120px);
}

.hero-content h1 {
    max-width: 800px;
    margin-bottom: 30px;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 1.05;
    font-weight: 500;
    color: var(--c-white);
    letter-spacing: -2px;
}

.hero-content p {
    max-width: 620px;
    margin-bottom: 45px;
    color: rgba(255, 255, 255, .85);
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.7;
}

.hero-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 80px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--radius-pill);
    color: var(--c-white);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
}

.hero-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-white);
    transform: translateX(-101%);
    transition: transform var(--ease-base);
    z-index: -1;
}

.hero-slider .swiper-pagination {
    bottom: 32px !important;
}

.hero-btn:hover::before {
    transform: translateX(0);
}

.hero-btn:hover {
    color: var(--c-black) !important;
    border-color: var(--c-white);
}

.hero-btn span {
    width: var(--btn-icon);
    height: var(--btn-icon);
    min-width: var(--btn-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    background: var(--c-white);
    color: var(--c-black);
}

/* 
.hero-btn:hover span {
    transform: translateX(5px) rotate(-45deg);
} */

.hero-slider {
    height: 100vh;
}

.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
    height: 100%;
}

.hero-slider .swiper-slide {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--c-white);
    opacity: .4;
}

.hero-slider .swiper-pagination-bullet-active {
    opacity: 1;
}

.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
    width: 30px;
    height: 30px;
    top: auto;
    bottom: 32px;
    color: var(--c-white);
    margin: 0;
    z-index: 100;
    cursor: pointer;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.hero-slider .swiper-button-prev {
    left: auto;
    right: 90px;
}

.hero-slider .swiper-button-next {
    right: 40px;
}

.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover {
    transform: scale(1.12);
    opacity: 0.8;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

@media (max-width:1400px) {
    .hero-content h1 {
        max-width: 760px;
    }
}

@media (max-width:1200px) {
    .hero-content {
        padding-top: 150px;
    }

    .hero-content h1 {
        font-size: 64px;
    }

    .hero-content p {
        max-width: 560px;
    }
}

@media (max-width:1024px) {
    .hero-content h1 {
        max-width: 650px;
        font-size: clamp(48px, 6vw, 64px);
        line-height: 1.1;
    }

    .hero-content p {
        max-width: 520px;
        font-size: 17px;
        margin-bottom: 30px;
    }

    .hero-btn {
        padding: 12px 30px;
    }
}

@media (max-width:767px) {
    .hero-content {
        padding-top: 110px;
        padding-bottom: 50px;
    }

    .hero-content h1 {
        max-width: 100%;
        font-size: clamp(36px, 9vw, 52px);
        line-height: 1.15;
        letter-spacing: -1px;
        margin-bottom: 16px;
    }

    .hero-content p {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 22px;
    }

    .hero-btn {
        width: 100%;
        max-width: 360px;
        padding: 10px 10px 10px 22px;
        justify-content: center;
        font-size: 14px;
        gap: 12px;
    }

    .hero-btn span {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .hero-slider .swiper-button-prev,
    .hero-slider .swiper-button-next {
        display: none;
    }
}

@media (max-width:480px) {
    .hero-slider .swiper-slide {
        min-height: 580px;
    }

    .hero-content {
        padding-top: 90px;
        padding-bottom: 40px;
    }

    .hero-content h1 {
        font-size: clamp(28px, 10vw, 44px);
        line-height: 1.2;
        margin-bottom: 14px;
        letter-spacing: -0.5px;
    }

    .hero-content p {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 18px;
    }

    .hero-btn {
        width: 100%;
        max-width: 100%;
        padding: 8px 8px 8px 18px;
        font-size: 13px;
        gap: 10px;
        justify-content: center;
    }

    .hero-btn span {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
}

/* ==========================================================
   PAGE HERO (STATIC)
========================================================== */
.page-hero {
    margin-top: calc(var(--header-height, 120px) * -1);
    position: relative;
    z-index: 1;
    height: 670px;
    display: flex;
    align-items: center;
    background-color: #111;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .8) 100%);
}

.page-hero-content {
    position: relative;
    z-index: 2;
    /* max-width: 760px; */
    /* padding-bottom: 100px; */
}

.page-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
}

.page-hero-breadcrumb a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.page-hero-breadcrumb a:hover {
    color: var(--c-white);
    text-decoration: underline;
}

.page-hero-breadcrumb-sep {
    color: rgba(255, 255, 255, .5);
}

.page-hero-breadcrumb-current {
    color: rgba(255, 255, 255, .9);
}

.page-hero-content h1 {
    margin: 0 0 24px;
    color: var(--c-white);
    font-size: clamp(40px, 6vw, 82px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1px;
}

.page-hero-content p {
    margin: 0;
    max-width: 604px;
    color: rgba(255, 255, 255, .85);
    font-size: 24px;
    line-height: 38px;
    letter-spacing: -0.96px;
}

.page-hero-breadcrumb a {
    white-space: nowrap;
}

@media (max-width:1024px) {
    .page-hero {
        height: 520px;
    }

    .page-hero-content h1 {
        font-size: 44px;
    }
}

@media (max-width:767px) {


    .page-hero-breadcrumb {
        margin-bottom: 14px;
        font-size: 13px;
    }

    .page-hero-content h1 {
        font-size: 32px;
        letter-spacing: -0.5px;
        margin-bottom: 14px;
    }

    .page-hero-content p {
        font-size: 15px;
        line-height: 1.6;
    }
}

@media (max-width:480px) {

    .page-hero-content h1 {
        font-size: 26px;
    }
}

/*=====================================Experience Section======================================*/
.experience-section {
    background: var(--c-bg);
    padding: 120px 0;
}

.experience-wrap {
    display: grid;
    grid-template-columns: 1fr 1.75fr;
    gap: 80px;
    align-items: center;
}

.experience-left h2 {
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 54px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.8%;
    margin: 0 0 35px;
    max-width: 520px;
}

.experience-left p {
    color: var(--c-text-faint);
    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    max-width: 520px;
    margin: 0;
}

.experience-right {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.experience-card {
    background: var(--c-white);
    padding: 34px 32px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.experience-card small {
    display: block;
    min-height: 64px;
    color: var(--c-text-light);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    margin: 0 0 28px;
}

.experience-card h3 {
    margin: 0 0 28px;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 58px;
    font-weight: 500;
    line-height: 1;
}

.experience-card p {
    margin: 0;
    margin-top: auto;
    color: var(--c-text-faint);
    font-size: 16px;
    line-height: 1.7;
}

@media(max-width:1024px) {
    .experience-wrap {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .experience-left p {

        max-width: 100%;

    }
}

@media(max-width:991px) {
    .experience-right {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-left h2 {
        font-size: 42px;
        margin-bottom: 24px;
    }

    .experience-card h3 {
        font-size: 48px;
    }
}

@media(max-width:767px) {
    .experience-section {
        padding: 64px 0;
    }

    .experience-right {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .experience-left h2 {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .experience-card {
        min-height: auto;
        padding: 22px 20px;
    }

    .experience-card small {
        min-height: auto;
        margin-bottom: 12px;
    }

    .experience-card h3 {
        font-size: 38px;
        margin-bottom: 10px;
    }
}

/* ===============================   SERVICES SECTION ================================*/
.services-section {
    padding: 0px 0 10px;
    background: var(--c-bg);
}

.services-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 48px;
}

.services-header-left h2 {
    margin: 0;
    font-size: 54px;
    line-height: 1.1;
    font-weight: 400;
    color: var(--c-dark);
    max-width: 520px;
}

.services-header-right p {
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
}

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

.service-card {
    position: relative;
    overflow: hidden;
    min-height: 540px;
    background: var(--c-black);
}

.service-card a {
    display: block;
    color: var(--c-white);
    text-decoration: none;
    height: 100%;
}

.service-image {
    position: absolute;
    inset: 0;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ease-slow);
}

.service-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.67%, #000000 100%);
    transition: var(--ease-overlay);
}

.service-arrow {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-circle);
    background: #10101066;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: var(--ease-base);
}

.service-arrow svg {
    width: 18px;
    height: 18px;
    color: var(--c-white);
}

.service-content {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    z-index: 2;
}

.service-content h3 {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--c-white);
}

.service-content p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, .7);
    max-width: 320px;
}

.service-card:hover img {
    transform: scale(1.08);
}

.service-card:hover .service-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .1));
}

.service-card:hover .service-arrow {
    transform: translateY(-2px) rotate(-45deg);
    background: #6d6d6d;
}

@media(max-width:991px) {
    .services-section {
        padding: 60px 0 10px;
    }

    .services-header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 32px;
    }

    .services-header-left h2 {
        font-size: 42px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .service-card {
        min-height: 420px;
    }
}

@media(max-width:767px) {
    .services-section {
        padding: 64px 0 10px;
    }

    .services-header {
        margin-bottom: 24px;
    }

    .services-header-left h2 {
        font-size: 30px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .service-card {
        min-height: 320px;
    }

    .service-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .service-content h3 {
        font-size: 20px;
    }

    .service-content p {
        font-size: 14px;
    }

    .service-arrow {
        width: 36px;
        height: 36px;
        min-width: 36px;
        top: 12px;
        right: 12px;
    }

    .service-arrow svg {
        width: 15px;
        height: 15px;
    }
}

/* ==========================================================================
   CTA SECTION
========================================================================== */

.cta-section {
    background: var(--c-bg);
    width: 100%;
}

.cta-wrapper {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
    align-items: center;

    background: linear-gradient(180deg,
            #fdfefe 0%,
            #ffffff 100%);

    padding: 0 32px;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: clamp(40px, 4.86vw, 70px);
}


/* ==========================================================================
   LEFT CONTENT
========================================================================== */

.cta-left {
    width: 100%;
    max-width: 620px;
    padding: 20px 0;
    box-sizing: border-box;
}

.cta-subtitle {
    display: block;
    margin: 0 0 28px;

    color: #8d8d8d;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.56px;
    font-weight: 500;
}

.cta-title {
    margin: 0 0 23px;

    color: var(--c-dark);
    font-size: 50px;
    line-height: 1.28;
    letter-spacing: -2px;
    font-weight: 500;
}

.cta-description {
    max-width: 470px;
    margin: 0;

    color: var(--c-text-light);
    font-size: 16px;
    line-height: 1.8;
}

.cta-description p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}


/* ==========================================================================
   CTA BUTTON
========================================================================== */

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    height: 58px;
    margin-top: 42px;
    padding: 0 40px;

    border: 1px solid #cfcfcf;
    border-radius: var(--radius-pill);

    color: var(--c-dark);
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    box-sizing: border-box;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.cta-btn-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-circle);
    background: #d6dbdc;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.cta-btn:hover {
    background: var(--c-dark);
    color: var(--c-white);
    border-color: var(--c-dark);
}

/* 
.cta-btn:hover .cta-btn-icon {
    background: var(--c-white);
    transform: translateX(5px) rotate(-45deg);
} */


/* ==========================================================================
   RIGHT IMAGE
========================================================================== */

.cta-right {
    position: relative;

    width: 100%;
    /* max-width: 581px; */
    height: 520px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin-left: auto;
    margin-right: -55px;

    overflow: hidden;
    box-sizing: border-box;
}

.cta-right img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    margin: 0;
}


/* ==========================================================================
   SOFT IMAGE FADE - DESKTOP
========================================================================== */

.cta-right::before {
    content: "";

    position: absolute;
    z-index: 2;

    left: 0;
    top: 0;
    bottom: 0;

    width: 18%;

    pointer-events: none;

    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.55) 35%,
            rgba(255, 255, 255, 0.15) 70%,
            rgba(255, 255, 255, 0) 100%);
}


/* ==========================================================================
   LARGE DESKTOP
========================================================================== */

@media (max-width: 1440px) {

    .cta-wrapper {
        grid-template-columns: minmax(0, 53%) minmax(0, 47%);
        padding-left: 32px;
        padding-right: 32px;
    }

    .cta-left {
        max-width: 590px;
    }

    .cta-title {
        font-size: 48px;
        line-height: 1.3;
    }

    .cta-right {
        max-width: 581px;
        margin-right: -35px;
    }
}




/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width: 991px) {

    .cta-wrapper {
        padding: 55px 32px 0;
    }

    .cta-left {
        max-width: 650px;
    }

    .cta-subtitle {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .cta-title {
        font-size: 42px;
        line-height: 1.2;
        letter-spacing: -1.5px;
        margin-bottom: 20px;
    }

    .cta-description {
        font-size: 16px;
        line-height: 1.7;
    }

    .cta-btn {
        height: 56px;
        margin-top: 30px;
    }

    .cta-right {
        max-width: 600px;
        height: 400px;
        margin-top: 45px;
    }
}


/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width: 767px) {

    .cta-section {
        width: 100%;
        padding: 0;
        /* background: #ffffff; */
    }

    .cta-wrapper {
        display: flex;
        flex-direction: column;

        width: 100%;
        min-height: auto;

        padding: 45px 20px 0;

        background: #ffffff;

        text-align: left;
    }

    .cta-left {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .cta-subtitle {
        margin-bottom: 15px;

        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.3px;
    }

    .cta-title {
        width: 100%;
        max-width: 520px;

        margin: 0 auto;

        font-size: 34px;
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .cta-description {
        width: 100%;
        max-width: 520px;

        margin: 20px auto 0;

        font-size: 16px;
        line-height: 1.65;
    }

    .cta-description p {
        margin: 0;
    }

    .cta-btn {
        width: 100%;
        max-width: 340px;

        height: 54px;

        margin: 25px auto 0;
        padding: 0 8px 0 22px;

        font-size: 12px;
        letter-spacing: 0.07em;
    }

    .cta-btn-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .cta-right {
        width: 100%;
        max-width: 100%;

        height: auto;
        min-height: 0;

        margin: 35px auto 0;

        display: block;

        overflow: hidden;
    }

    .cta-right img {
        display: block;

        width: 100%;
        height: auto;

        max-width: none;

        object-fit: cover;
        object-position: center;

        margin: 0;
    }

    /* IMPORTANT:
       No white/blue overlay on mobile */
    .cta-right::before {
        display: none;
    }
}


/* ==========================================================================
   SMALL MOBILE
========================================================================== */

@media (max-width: 480px) {

    .cta-wrapper {
        padding: 38px 16px 0;
    }

    .cta-title {
        font-size: 30px;
        line-height: 1.2;
        letter-spacing: -0.8px;
    }

    .cta-description {
        margin-top: 17px;

        font-size: 15px;
        line-height: 1.65;
    }

    .cta-btn {
        max-width: 100%;
        height: 52px;

        margin-top: 22px;
    }

    .cta-right {
        margin-top: 30px;
    }
}


/* ==========================================================================
   EXTRA SMALL MOBILE
========================================================================== */

@media (max-width: 375px) {

    .cta-wrapper {
        padding-left: 14px;
        padding-right: 14px;
    }

    .cta-title {
        font-size: 28px;
    }

    .cta-description {
        font-size: 14px;
    }

    .cta-btn {
        padding-left: 18px;
        font-size: 11px;
    }
}

/*========================================================= CLIENT LOGOS =========================================================*/
.client-logos-section {
    padding: 0px 0px 100px;
    background: var(--c-bg);
}

.client-logos-heading {
    text-align: center;
    color: var(--c-text-light);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.56px;
    text-transform: uppercase;
    margin: 0px;
}

.client-logos-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    gap: 60px;
}

.client-logo-item,
.client-logo-item a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.client-logo-item img {
    max-width: 100%;
    width: auto;
    object-fit: contain;
    transition: var(--ease-base);
}

.client-logo-item:hover img {
    transform: scale(1.05);
}

@media(max-width:1400px) {
    .client-logos-grid {
        gap: 45px;
    }
}

@media(max-width:1200px) {
    .client-logos-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 40px;
    }
}

@media(max-width:768px) {
    .client-logos-section {
        padding: 40px 0;
    }

    .client-logos-heading {
        font-size: 14px;
        margin-bottom: 26px;
    }

    .client-logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }


}

@media(max-width:480px) {
    .client-logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
        row-gap: 28px;
    }


}

/* ==========================================================
   BUILDER SECTION
========================================================== */
.builder-section {
    padding: 120px 0;
    background: var(--c-white);
}

.builder-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 60px;
}

.builder-header-left h2 {
    margin: 0;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 54px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.8px;
    max-width: 480px;
}

.builder-header-right p {
    margin: 0;
    color: #666;
    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}

.builder-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.builder-feature-card {
    display: flex;
    flex-direction: column;
}

.builder-feature-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 28px;
}

.builder-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--ease-slow);
}

.builder-feature-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.67%, #000000 100%);
    transition: var(--ease-overlay);
    pointer-events: none;
}

.builder-feature-card:hover .builder-feature-image img {
    transform: scale(var(--scale-img));
}

.builder-feature-body h3 {
    margin: 0 0 14px;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

.builder-feature-body {

    max-width: 85%;
}

.builder-feature-body p {
    margin: 0 0 12px;
    color: var(--c-text-light);
    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

.builder-feature-body p:last-child {
    margin-bottom: 0;
}

@media (max-width:1200px) {
    .builder-header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 36px;
    }

    .builder-header-left h2 {
        font-size: 42px;
        max-width: 100%;
    }

    .builder-header-right p {
        max-width: 100%;
    }
}

@media (max-width:991px) {
    .builder-section {
        padding: 60px 0;
    }

    .builder-features-grid {
        gap: 16px;
    }

    .builder-feature-image {
        margin-bottom: 16px;
    }

    .builder-feature-body h3 {
        font-size: 22px;
    }

    .builder-feature-body p {
        font-size: 15px;
    }
}

@media (max-width:767px) {
    .builder-section {
        padding: 40px 0;
    }

    .builder-header {
        margin-bottom: 26px;
    }

    .builder-header-left h2 {
        font-size: 32px;
    }

    .builder-header-right p {
        font-size: 15px;
        line-height: 1.7;
    }

    .builder-features-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .builder-feature-image {
        aspect-ratio: 16 / 10;
        margin-bottom: 14px;
    }

    .builder-feature-body h3 {
        font-size: 24px;
    }
}

/* ==========================================================
   CONTACT SECTION
========================================================== */
.contact-section {
    position: relative;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    padding: 140px 0;
    overflow: hidden;
}

.contact-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
}

.contact-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-left h2 {
    margin: 0 0 24px;
    color: var(--c-white);
    font-family: Manrope, sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    max-width: 460px;
}

.contact-subtitle {
    margin: 0 0 40px;
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    max-width: 440px;
}

.contact-details-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-detail-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: var(--radius-circle);
    color: var(--c-white);
    flex-shrink: 0;
}

.contact-detail-body {
    display: flex;
    align-items: center;
}

.contact-detail-body strong,
.contact-detail-body a {
    color: rgba(255, 255, 255, .92);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

.contact-detail-body a {
    text-decoration: none;
}

.contact-detail-body a:hover {
    text-decoration: underline;
}

span.contact-detail-label {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, .70);
}


@media (max-width:1200px) {
    .contact-section {
        padding: 80px 0;
    }

    .contact-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }



    .contact-left h2 {
        max-width: 100%;
    }

    .contact-subtitle {
        max-width: 100%;
    }
}

@media (max-width:767px) {
    .contact-section {
        padding: 64px 0;
    }

    .contact-left h2 {
        margin-bottom: 16px;
        font-size: 32px;
    }

    .contact-subtitle {
        font-size: 15px;
        margin-bottom: 22px;
    }

    .contact-details-list {
        gap: 12px;
        margin-bottom: 8px;
    }


}



/* ==========================================================
   TESTIMONIALS SECTION
========================================================== */
.testimonials-section {
    padding: 100px 0;
    background: var(--c-white);
}

.testimonials-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 36px;
    max-width: 480px;
}

.testimonials-header h2 {
    order: 1;
    margin: 0 0 6px;
    color: var(--c-dark);
    font-family: Manrope, sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.3;
    font-style: normal;
}

.testimonials-kicker {
    order: 2;
    color: #8a8a8a;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
}

.testimonial-card {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.testimonials-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 40px;
}

.testimonial-card::before,
.testimonial-card::after {
    content: none !important;
}

.testimonial-quote {
    margin: 0 0 28px;
    color: var(--c-dark);
    font-family: Manrope, sans-serif;
    font-size: 35px;
    font-weight: 600;
    font-style: normal;
    line-height: 52px;
    letter-spacing: -0.3px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.testimonial-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-name {
    display: block;
    font-style: normal;
    color: var(--c-dark);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

.testimonial-role {
    display: block;
    font-style: normal;
    color: #8a8a8a;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}

.testimonial-quote-mark {
    display: block;
    width: 40px;
    height: 35px;
    line-height: 0;
}

.testimonial-quote-mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.testimonials-slider .swiper-pagination {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    left: auto;
    bottom: auto;
    width: auto;
}

.testimonials-slider .swiper-pagination-bullet {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: #e4e4e4;
    opacity: 1;
    margin: 0 !important;
    transition: background var(--ease-fast, .3s ease);
}

.testimonials-slider .swiper-pagination-bullet-active {
    background: var(--c-dark);
}

.testimonials-nav-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.testimonials-slider .swiper-button-prev,
.testimonials-slider .swiper-button-next {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: var(--radius-circle);
    background: var(--c-bg);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease-base);
}

.testimonials-slider .swiper-button-prev svg,
.testimonials-slider .swiper-button-next svg {
    width: 20px;
    height: 17px;
}

.testimonials-slider .swiper-button-prev:hover,
.testimonials-slider .swiper-button-next:hover {
    background: var(--c-dark);
}

.testimonials-slider .swiper-button-prev::after,
.testimonials-slider .swiper-button-next::after {
    display: none;
}

.testimonials-slider .swiper-button-prev svg path,
.testimonials-slider .swiper-button-next svg path,
.testimonials-slider .swiper-button-prev svg rect,
.testimonials-slider .swiper-button-next svg rect {
    fill: var(--c-dark);
    stroke: var(--c-dark);
    transition: fill .3s, stroke .3s;
}

.testimonials-slider .swiper-button-prev:hover svg path,
.testimonials-slider .swiper-button-next:hover svg path,
.testimonials-slider .swiper-button-prev:hover svg rect,
.testimonials-slider .swiper-button-next:hover svg rect {
    fill: var(--c-white);
    stroke: var(--c-white);
}

@media (max-width:1400px) {
    .testimonial-quote {
        font-size: 30px;
        line-height: 1.4;
    }
}

@media (max-width:1200px) {
    .testimonials-section {
        padding: 60px 0;
    }

    .testimonial-quote {
        font-size: 32px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .testimonials-slider .swiper-button-prev,
    .testimonials-slider .swiper-button-next {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }
}

@media (max-width:991px) {
    .testimonials-section {
        padding: 50px 0;
    }

    .testimonials-header {
        margin-bottom: 24px;
    }

    .testimonial-quote {
        font-size: 26px;
        line-height: 1.4;
        margin-bottom: 18px;
    }

    .testimonial-name {
        font-size: 17px;
    }

    .testimonial-role {
        font-size: 13px;
    }

    .testimonials-slider .swiper-button-prev,
    .testimonials-slider .swiper-button-next {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .testimonials-slider .swiper-button-prev svg,
    .testimonials-slider .swiper-button-next svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width:767px) {
    .testimonials-section {
        padding: 40px 0;
    }

    .testimonials-header {
        margin-bottom: 20px;
    }

    .testimonials-header h2 {
        font-size: 24px;
    }

    .testimonials-kicker {
        font-size: 13px;
    }

    .testimonial-quote {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 16px;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    .testimonial-meta {
        gap: 12px;
        margin-bottom: 14px;
    }

    .testimonial-avatar {
        width: 36px;
        height: 36px;
    }

    .testimonial-name {
        font-size: 15px;
    }

    .testimonial-role {
        font-size: 12px;
    }

    .testimonial-quote-mark {
        width: 30px;
        height: 26px;
    }

    .testimonials-controls {
        margin-top: 14px;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: center;
    }

    .testimonials-slider .swiper-pagination-bullet {
        width: 26px;
    }

    .testimonials-slider .swiper-button-prev,
    .testimonials-slider .swiper-button-next {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .testimonials-slider .swiper-button-prev svg,
    .testimonials-slider .swiper-button-next svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width:480px) {
    .testimonials-section {
        padding: 32px 0;
    }

    .testimonial-quote {
        font-size: 28px;
        line-height: 1.45;
        margin-bottom: 32px;
        -webkit-line-clamp: 5;
        line-clamp: 5;
        letter-spacing: -1.26px;
    }

    .testimonial-name {
        font-size: 14px;
    }

    .testimonial-role {
        font-size: 11px;
    }

    .testimonials-slider .swiper-pagination-bullet {
        width: 99px;
        height: 4px;
    }

    .testimonials-slider .swiper-button-prev,
    .testimonials-slider .swiper-button-next {
        width: 50px;
        height: 50px;
        min-width: 36px;
    }
}

/* ==========================================================
   FAQ SECTION
========================================================== */
.faq-section {
    background: var(--c-bg);
    padding: 96px 0;
}

.faq-wrap {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    gap: 80px;
    align-items: start;
}

.faq-left {
    position: sticky;
    top: 40px;
}

.faq-kicker {
    display: block;
    color: #8a8a8a;
    font-size: 14px;
    margin-bottom: 14px;
}

.faq-left h2 {
    margin: 0 0 22px;
    color: var(--c-dark);
    font-family: Manrope, sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.faq-desc {
    margin: 0 0 30px;
    color: var(--c-text-light);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
}

.faq-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--c-dark);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

.faq-btn-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--radius-circle);
    background: #D6DBDC;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-dark);
}

.faq-btn:hover {
    color: var(--c-dark) !important;
}

.faq-btn:hover .faq-btn-icon {
    background: var(--c-dark);
    color: var(--c-white);
    transform: translate(2px, -2px);
}

/* .faq-accordion {
    border-top: 1px solid var(--c-border);
} */

.faq-item {
    border-bottom: 1px solid var(--c-border);
    padding: 26px 0;
}

.faq-question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    cursor: pointer;
    color: #000;
    font-family: Manrope, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-toggle {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-dark);
    transition: transform .3s ease;
}

.faq-item[open] .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer {
    margin-top: 16px;
    padding-right: 40px;
    color: var(--c-text-light);
    font-size: 18px;
    line-height: 1.75;
}

.faq-answer p {
    margin: 0;
}

.faq-btn-icon svg rect,
.faq-btn-icon svg path {
    fill: #000;
    transition: fill 0.3s ease;
}

.faq-btn:hover .faq-btn-icon svg rect,
.faq-btn:hover .faq-btn-icon svg path {
    fill: #fff;
}

@media (max-width:1200px) {
    .faq-wrap {
        grid-template-columns: 1fr 1.3fr;
        gap: 45px;
    }

    .faq-left h2 {
        font-size: 36px;
    }
}

@media (max-width:991px) {
    .faq-section {
        padding: 60px 0;
    }

    .faq-wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .faq-left {
        position: static;
    }

    .faq-left h2,
    .faq-desc {
        max-width: 100%;
    }
}

@media (max-width:767px) {
    .faq-section {
        padding: 40px 0;
    }

    .faq-left h2 {
        font-size: 32px;
        margin-bottom: 14px;
    }

    .faq-desc {
        margin-bottom: 20px;
    }

    .faq-question {
        font-size: 15px;
        gap: 16px;
    }

    .faq-toggle {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    .faq-answer {
        padding-right: 0;
        font-size: 14px;
    }

    .faq-item {
        padding: 16px 0;
    }
}

/*==========================================
Locations Section
==========================================*/

.locations-section {
    background: #ffffff;
    padding: 100px 0;
    overflow: hidden;
}

.locations-section .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

.locations-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
    margin-bottom: 60px;
}

.locations-header-left h2 {
    margin: 0;
    font-size: 54px;
    line-height: 1.1;
    font-weight: 400;
    color: var(--c-dark);
    max-width: 520px;
}

.locations-header-right {
    display: flex;
    justify-content: flex-end;
}

.locations-header-right p {
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}

.locations-map {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* height: 600px; */
}

.locations-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.locations-cards {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.location-card {
    position: absolute;
    width: 230px;
    background: var(--c-white);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .12);
    pointer-events: auto;
}

.location-card:nth-child(1) {
    top: 80px;
    left: 90px;
}

.location-card:nth-child(2) {
    top: 170px;
    right: 140px;
}

.location-card:nth-child(3) {
    bottom: 80px;
    left: 45%;
    transform: translateX(-50%);
}

.location-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-circle);
    background: var(--c-black);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.location-card-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.location-card-city {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
    color: var(--c-dark);
}

.location-card-details {
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

.location-card:hover {
    transform: translateY(var(--lift-card));
}

.location-card:nth-child(3):hover {
    transform: translateX(-50%) translateY(var(--lift-card));
}

@media (max-width:1200px) {
    .locations-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .locations-header-right {
        justify-content: flex-start;
    }

    .locations-header-right p {
        max-width: 700px;
    }

    .locations-header-left h2 {
        font-size: 48px;
    }

    .location-card {
        width: 200px;
        padding: 20px;
    }
}

@media (max-width:768px) {
    .locations-section {
        padding: 40px 0;
    }

    .locations-section .container {
        padding: 0 20px;
    }

    .locations-header {
        gap: 18px;
        margin-bottom: 24px;
    }

    .locations-header-left h2 {
        font-size: 32px;
        line-height: 1.15;
    }

    .locations-header-right p {
        font-size: 16px;
    }

    .locations-map {
        height: 300px;
    }

    .locations-cards {
        position: static;
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 18px;
    }

    .location-card {
        position: relative;
        width: 100%;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .location-card:hover {
        transform: none !important;
    }
}

@media (max-width:480px) {
    .locations-header-left h2 {
        font-size: 32px;
    }

    .locations-map img {
        height: 220px;
    }

    .location-card {
        padding: 16px;
    }

    .location-card-city {
        font-size: 19px;
    }
}

/* ==========================
   Bottom CTA
========================== */

.bottom-cta {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bottom-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.bottom-cta-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, .25) 0%,
            rgba(0, 0, 0, .35) 45%,
            rgba(0, 0, 0, .80) 100%);
    z-index: 1;
}

.bottom-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, .95) 100%);

    z-index: 2;
}

.bottom-cta-wrap {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
    padding: 120px 20px 170px;
}

.bottom-cta h2 {
    margin: 0;
    color: var(--c-white);
    font-size: 64px;
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -2px;
}

.bottom-cta-subtitle {
    margin: 26px auto 42px;
    max-width: 760px;
    color: rgba(255, 255, 255, .82);
    font-size: 20px;
    line-height: 1.7;
    font-weight: 300;
}

.bottom-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 10px 10px 10px 34px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 60px;
    color: var(--c-white);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 16px;
    font-weight: 600;
    box-sizing: border-box;
}

.bottom-cta-btn:hover {
    background: var(--c-white);
    color: #fff !important;
}

.bottom-cta-icon {
    width: var(--btn-icon);
    height: var(--btn-icon);
    min-width: var(--btn-icon);
    border-radius: var(--radius-circle);
    background: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bottom-cta-icon svg {
    width: 18px;
    height: 18px;
}

.bottom-cta-icon svg path {
    stroke: var(--c-dark);
}

/* .bottom-cta-btn:hover .bottom-cta-icon {
    transform: translateX(5px) rotate(-45deg);
} */

.site-footer {
    margin-top: -1px;
    position: relative;
    z-index: 5;
}

@media (max-width:991px) {
    .bottom-cta {
        min-height: 460px;
    }

    .bottom-cta-wrap {
        padding: 70px 25px 120px;
    }

    .bottom-cta h2 {
        font-size: 44px;
    }

    .bottom-cta-subtitle {
        font-size: 17px;
        max-width: 560px;
        margin: 18px auto 28px;
    }
}

@media (max-width:767px) {
    .bottom-cta {
        min-height: 380px;
    }

    .bottom-cta-wrap {
        padding: 50px 20px 90px;
    }

    .bottom-cta h2 {
        font-size: 32px;
        line-height: 1.15;
        letter-spacing: -1px;
    }

    .bottom-cta-subtitle {
        font-size: 15px;
        line-height: 1.6;
        margin: 14px auto 24px;
    }

    .bottom-cta-btn {
        width: 100%;
        justify-content: space-between;
        padding: 8px 8px 8px 20px;
        font-size: 13px;
    }

    .bottom-cta-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .bottom-cta::after {
        height: 100px;
    }
}

/* ==========================================================
   ABOUT INTRO (RELIABILITY)
========================================================== */
.about-intro-section {
    background: var(--c-bg);
    padding: 120px 0;
}

.about-intro-frame {
    padding-bottom: 100px;
    border-bottom: 2px solid #D9D9D9;
}

.about-intro-top {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 70px;
    align-items: center;
}

.about-intro-left h2 {
    margin: 0 0 26px;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 54px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.8%;
    margin: 0 0 35px;
}

.about-intro-left p {
    margin: 0 0 18px;
    color: #4D4D4D;
    font-size: 16px;
    line-height: 1.7;
}

.about-intro-left p:last-child {
    margin-bottom: 0;
}

.about-intro-right {
    position: relative;
    overflow: hidden;
}

.about-intro-right img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.about-rating-value {
    display: block;
    color: #ffffff;
    font-family: Manrope, sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.about-rating-card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: end;
    gap: 20px;
    padding: 48px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .75) 100%);
}

.about-rating-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-rating-stars {
    display: flex;
    gap: 4px;
    color: #fff;
    margin-bottom: 14px;
}

.about-rating-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, .30);
    flex-shrink: 0;
}

.about-rating-right {
    display: flex;
    align-items: center;
}

.about-rating-trusted {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    line-height: 1.5;
    max-width: 160px;
}

.about-rating-stars {
    display: flex;
    gap: 3px;
    color: #f5b400;
    margin-bottom: 12px;
}

.about-rating-stars svg {
    width: 23px;
    height: 23px;
}

.about-rating-reviews,
.about-rating-trusted {
    margin: 0;
    color: rgba(255, 255, 255, .70);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    max-width: 160px;
}

.about-intro-divider {
    margin: 30px 0;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.about-stat-card {
    background: var(--c-white);
    padding: 34px 32px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: none;
    border-radius: 0;
    transition: var(--ease-base);
}

.about-stat-card:hover {
    transform: translateY(var(--lift-card));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}

.about-stat-card small {
    display: block;
    min-height: 40px;
    max-width: 240px;
    color: var(--c-text-light);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    margin: 0 0 28px;
}

.about-stat-card h3 {
    margin: 0 0 20px;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 1;
}

.about-stat-card p {
    margin: 0;
    margin-top: auto;
    color: var(--c-text-faint);
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width:1200px) {
    .about-intro-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-intro-left h2 {
        font-size: 36px;
    }

    .about-intro-left p {
        max-width: 100%;
    }

    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width:767px) {
    .about-intro-section {
        padding: 50px 0;
    }

    .about-intro-frame {
        padding-bottom: 50px;
    }

    .about-intro-left h2 {
        font-size: 26px;
        margin-bottom: 14px;
    }

    .about-intro-divider {
        margin: 20px 0;
    }

    .about-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-stat-card {
        min-height: auto;
        padding: 22px 20px;
    }

    .about-stat-card small {
        min-height: auto;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .about-stat-card h3 {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .about-rating-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
    }

    .about-rating-divider {
        width: 100%;
        height: 1px;
        align-self: auto;
    }

    .about-rating-trusted {
        max-width: 100%;
    }
}

/* ==========================================================
   TRUSTED BY (Asymmetric Grid)
========================================================== */
.trusted-section {
    background: var(--c-bg);
    padding: 0px 0px 10px;
}

.trusted-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: end;
    margin-bottom: 48px;
}

.trusted-header-left h2 {
    margin: 0;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.8px;
    max-width: 480px;
}

.trusted-header-right {
    display: flex;
    justify-content: flex-end;
}

.trusted-header-right p {
    margin: 0;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}

.trusted-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.trusted-col-stacked {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
}

.trusted-card {
    position: relative;
    overflow: hidden;
    background: var(--c-black);
}

.trusted-card--tall {
    min-height: 540px;
}

.trusted-card--half {
    min-height: 266px;
}

.trusted-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ease-slow);
}

.trusted-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.67%, #000000 100%);
    transition: var(--ease-overlay);
}

.trusted-card-label {
    position: absolute;
    left: 28px;
    bottom: 24px;
    z-index: 2;
    color: var(--c-white);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.trusted-card:hover img {
    transform: scale(var(--scale-img));
}

.trusted-card:hover .trusted-card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, .1));
}

@media (max-width:1200px) {
    .trusted-header-left h2 {
        font-size: 42px;
    }

    .trusted-card--tall {
        min-height: 460px;
    }

    .trusted-card--half {
        min-height: 226px;
    }
}

@media (max-width:991px) {
    .trusted-section {
        padding: 60px 0;
    }

    .trusted-header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 32px;
    }

    .trusted-header-right {
        justify-content: flex-start;
    }

    .trusted-header-right p {
        max-width: 100%;
    }

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

    .trusted-col-stacked {
        grid-column: span 2;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
    }

    .trusted-card--half {
        min-height: 280px;
    }
}

@media (max-width:767px) {
    .trusted-section {
        padding: 40px 0;
    }

    .trusted-header-left h2 {
        font-size: 30px;
    }

    .trusted-header {
        margin-bottom: 22px;
    }

    .trusted-grid {
        grid-template-columns: 1fr;
    }

    .trusted-card--tall {
        min-height: 320px;
    }

    .trusted-col-stacked {
        grid-column: span 1;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }

    .trusted-card--half {
        min-height: 260px;
    }

    .trusted-card-label {
        left: 18px;
        bottom: 14px;
        font-size: 17px;
    }
}

/* ==========================================================
   PROCESS SECTION
========================================================== */
.process-section {
    background: var(--c-bg);
    padding: 100px 0 120px;
}

.process-divider {
    border: none;
    border-top: 1px solid #D9D9D9;
    margin: 0 0 90px;
}

.process-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 48px;
}

.process-header-left h2 {
    margin: 0;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.5px;
    max-width: 420px;
}

.process-header-right {
    display: flex;
    align-items: center;
}

.process-header-right p {
    margin: 0;
    color: var(--c-text-faint);
    font-size: 16px;
    line-height: 1.75;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.process-card {
    background: var(--c-white);
    padding: 48px 36px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    transition: var(--ease-base);
}

.process-card:hover {
    transform: translateY(var(--lift-card));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}

.process-number {
    margin: 0 0 96px;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 50px;
    font-weight: 500;
    line-height: 1;
}

.process-card-body h3 {
    margin: 0 0 14px;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

.process-card-body p {
    margin: 0;
    color: var(--c-text-faint);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
    max-width: 280px;
}

@media (max-width:1200px) {
    .process-header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 36px;
    }

    .process-header-left h2 {
        max-width: 100%;
    }

    .process-header-right p {
        max-width: 100%;
    }
}

@media (max-width:991px) {
    .process-section {
        padding: 60px 0;
    }

    .process-divider {
        margin-bottom: 32px;
    }

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

    .process-header-left h2 {
        font-size: 36px;
    }
}

@media (max-width:767px) {
    .process-section {
        padding: 40px 0;
    }

    .process-divider {
        margin-bottom: 24px;
        display: none;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .process-card {
        min-height: auto;
        padding: 24px 22px;
    }

    .process-number {
        margin-bottom: 16px;
        font-size: 24px;
    }

    .process-header-left h2 {
        font-size: 26px;
    }
}

/* ==========================================================
   TEAM SECTION
========================================================== */

.team-section {
    background: var(--c-bg);
    padding: 120px 0;
}

.team-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: end;
    margin-bottom: 70px;
}

.team-header-left h2 {
    margin: 0;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.team-header-right {
    display: flex;
    align-items: center;
}

.team-header-right p {
    margin: 0;
    color: var(--c-text-faint);
    font-size: 16px;
    line-height: 1.75;
}

.team-group {
    margin-bottom: 60px;
}

.team-group:last-child {
    margin-bottom: 0;
}

.team-group-title {
    margin: 0 0 24px;
    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3;
}

/* ==========================================================
   TEAM GRID
========================================================== */

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 432px));
    gap: 8px;
}

/* ==========================================================
   TEAM CARD
========================================================== */

.team-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 432px;
    height: 400px;
    background: var(--c-black);
}

.team-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.team-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--ease-slow);
}

/* Old overlay is no longer needed */
.team-card-overlay {
    display: none;
}

/* ==========================================================
   TEAM CARD BODY + GRADIENT
========================================================== */

.team-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    padding: 80px 20px 18px;

    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            #000000 100%);
}

.team-card-name {
    display: block;
    margin: 0 0 4px;
    color: var(--c-white);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.3;
}

.team-card-role {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3;
}

/* ==========================================================
   HOVER
========================================================== */

.team-card:hover .team-card-img img {
    transform: scale(var(--scale-img));
}


/* ==========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 1200px) {

    .team-header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 50px;
    }

    .team-header-left h2 {
        max-width: 100%;
    }

    .team-header-right p {
        max-width: 100%;
    }

    .team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .team-card {
        height: auto;
        aspect-ratio: 432 / 400;
    }
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .team-section {
        padding: 70px 0;
    }

    .team-header {
        margin-bottom: 40px;
    }

    .team-header-left h2 {
        font-size: 36px;
    }

    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .team-card {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 432 / 400;
    }

    .team-group {
        margin-bottom: 45px;
    }

    .team-group-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .team-card-body {
        padding: 70px 18px 16px;
    }

    .team-card-name {
        font-size: 17px;
    }

    .team-card-role {
        font-size: 14px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .team-section {
        padding: 50px 0;
    }

    .team-header {
        gap: 14px;
        margin-bottom: 32px;
    }

    .team-header-left h2 {
        font-size: 26px;
        line-height: 1.2;
    }

    .team-header-right p {
        font-size: 14px;
        line-height: 1.6;
    }

    .team-group {
        margin-bottom: 32px;
    }

    .team-group-title {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .team-card {
        width: 100%;
        height: auto;
        max-width: none;
        aspect-ratio: 432 / 400;
    }

    .team-card-img img {
        object-position: center top;
    }

    .team-card-body {
        padding: 55px 12px 12px;
    }

    .team-card-name {
        font-size: 14px;
        line-height: 1.25;
        margin-bottom: 3px;
    }

    .team-card-role {
        font-size: 14px;
        line-height: 1.25;
    }
}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .team-section {
        padding: 40px 0;
    }

    .team-header {
        margin-bottom: 28px;
    }

    .team-header-left h2 {
        font-size: 24px;
    }

    .team-header-right p {
        font-size: 13px;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .team-group-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .team-card-body {
        padding: 45px 10px 10px;
    }

    .team-card-name {
        font-size: 12px;
    }

    .team-card-role {
        font-size: 13px;
    }
}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 375px) {

    .team-grid {
        gap: 4px;
    }

    .team-card-body {
        padding: 40px 8px 8px;
    }

    .team-card-name {
        font-size: 14px;
    }

    .team-card-role {
        font-size: 12px;
    }
}

.team-card-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 5px;
}

.team-card-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: 16px;
    font-weight: 300;
}

.team-card-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: #fff;
}

/* ==========================================================
   SERVICES PAGE — HERO
========================================================== */
.services-page-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    background-color: #111;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 140px 0 60px;
    overflow: hidden;
}

.services-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .75) 100%);
    z-index: 1;
}

.services-page-hero .container {
    position: relative;
    z-index: 2;
}

.services-breadcrumb {
    display: block;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    margin-bottom: 18px;
}

.services-breadcrumb a {
    color: rgba(255, 255, 255, .75) !important;
    text-decoration: none;
}

.services-breadcrumb a:hover {
    color: var(--c-white, #fff) !important;
    text-decoration: underline;
}

.services-page-hero h1 {
    margin: 0 0 14px;
    color: var(--c-white, #fff);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 400;
    letter-spacing: -1px;
}

.services-page-sub {
    margin: 0;
    max-width: 560px;
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
    line-height: 1.6;
}

/* ==========================================================
   SERVICES PAGE — BODY / LAYOUT
========================================================== */
.services-page-body {
    background: var(--c-bg, #F9F9F9);
    padding: 60px 0 100px;
}

.services-page-wrap {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
    min-width: 0;
}

.services-page-wrap>* {
    min-width: 0;
}

/* Sidebar (desktop) — becomes a horizontal tab bar on mobile, see media query */
.services-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
    align-self: start;
    background: var(--c-white, #fff);
    z-index: 10;
}

.services-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.services-nav-link {
    display: block;
    padding: 14px 16px;
    color: #828487 !important;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: .3s ease;
}

.services-nav-link:hover {
    color: var(--c-dark, #111) !important;
}

.services-nav-link.is-active {
    color: #000000 !important;
    border-left-color: var(--c-dark, #111);
}

/* Cards */
.services-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service-block {
    background: var(--c-white, #fff);
    scroll-margin-top: 100px;
}

.service-block-title {
    margin: 0 0 40px;
    color: var(--c-dark, #111);
    font-size: 40px;
    font-weight: 400;
}

.service-data {
    padding: 48px;
    scroll-margin-top: 100px;
    border: 1px solid #E4E5E6;
}

.service-block-desc {
    margin: 0 0 22px;
    /* max-width: 720px; */
    color: var(--c-text-light, #6d6d6d);
    font-size: 16px;
    line-height: 1.7;
}

/* Slider */
.service-slider {
    position: relative;
    overflow: hidden;
}

.service-slider .swiper-slide {
    position: relative;
    height: 470px;
}

.service-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-slide-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px;
    padding: 48px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.service-slide-caption {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--c-white, #fff);
    max-width: 85%;
}

.service-slide-caption strong {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.service-slide-caption span {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, .7);
    line-height: 1.5;
}

.service-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 16px 16px 16px 34px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 60px;
    color: var(--c-white);
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: .08em;
    font-size: 16px;
    font-weight: 600;
    box-sizing: border-box;
    background: transparent;
}

.service-view-btn:hover {
    color: var(--c-white, #fff) !important;
    background: var(--c-dark, #111);
}

.service-view-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-white, #fff);
    color: var(--c-dark, #111);
    box-sizing: border-box;
    transition: .3s ease;
}

.service-view-btn:hover .service-view-icon {
    background: var(--c-white, #fff);
    color: var(--c-dark, #111);
    /* transform: translateX(3px) rotate(-45deg); */
}

.service-slider-pagination {
    position: absolute;
    left: 24px !important;
    bottom: 60px !important;
    z-index: 3;
    display: flex;
    gap: 6px;
    justify-content: center;
}

.service-slider-pagination .swiper-pagination-bullet {
    width: 64px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, .4) !important;
    opacity: 1 !important;
    margin: 0 !important;
    transition: background .3s ease;
}

.service-slider-pagination .swiper-pagination-bullet-active {
    background: var(--c-white, #fff) !important;
}

.service-slider-prev,
.service-slider-next {
    position: absolute;
    bottom: 46px;
    z-index: 3;
    width: 50px;
    height: 50px;
    min-width: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white, #fff);
    background: #FFFFFF33;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: border-box;
    opacity: .85;
    transition: .3s ease;
    -webkit-user-select: none;
    user-select: none;
}

.service-slider-prev svg,
.service-slider-next svg {
    width: 20px;
    height: 20px;
    display: block;
}

.service-slider-next {
    right: 20px;
}

.service-slider-prev {
    right: 80px;
}

.service-slider-prev:hover,
.service-slider-next:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ==========================================================
   RESPONSIVE
========================================================== */
@media (max-width: 991px) {
    .services-page-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .services-nav {
        position: sticky;
        top: 0;
        z-index: 15;
        padding: 30px 20px;
    }

    .services-list {
        padding-inline: 20px;
    }

    .services-nav-list {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 30px;
        scrollbar-width: none;
        padding: 0 4px;
    }

    .services-nav-list::-webkit-scrollbar {
        display: none;
    }

    .services-nav-link {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10px 0px;
        border-left: none;
        /* border-radius: 999px; */
        /* background: var(--c-bg, #F9F9F9); */
        box-sizing: border-box;
    }

    .services-nav-link:hover {
        background: #ececec;
    }

    .services-nav-link.is-active {
        font-size: 16px;
        font-weight: 400;
        border-left: none;
        border-bottom: 1px solid #000;
    }

    .service-slider .swiper-slide {
        height: 400px;
    }



    .service-view-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .service-slider-pagination {
        bottom: 50px !important;
    }

    .service-slider-pagination .swiper-pagination-bullet {
        width: 44px !important;
        height: 4px !important;
    }

    .service-slider-prev,
    .service-slider-next {
        width: 42px;
        height: 42px;
        min-width: 42px;
        bottom: 40px;
    }

    .service-slider-prev svg,
    .service-slider-next svg {
        width: 17px;
        height: 17px;
    }

    .service-slider-next {
        right: 16px;
    }

    .service-slider-prev {
        right: 66px;
    }
}

@media (max-width: 767px) {
    .services-page-hero {
        min-height: 260px;
        padding: 100px 0 36px;
    }

    .services-page-body {
        padding: 0px;
    }

    .container.services-page-wrap {
        padding: 0px 0px 30px 0px;
    }

    .service-data {
        padding: 20px;
        scroll-margin-top: 60px;
    }

    .service-block-title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .service-block-desc {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .service-slider .swiper-slide {
        height: 300px;
    }

    .service-slide-overlay {
        padding: 20px 20px 50px;
        gap: 10px;
    }





    .service-slider-pagination {
        left: 16px !important;
        bottom: 14px !important;
    }

    .service-slider-pagination .swiper-pagination-bullet {
        width: 26px !important;
        height: 3px !important;
    }

    .service-slider-prev,
    .service-slider-next {
        width: 32px;
        height: 32px;
        min-width: 32px;
        bottom: 12px;
    }

    .service-slider-prev svg,
    .service-slider-next svg {
        width: 14px;
        height: 14px;
    }

    .service-slider-next {
        right: 12px;
    }

    .service-slider-prev {
        right: 52px;
    }
}

@media (max-width: 480px) {
    /* .service-slider .swiper-slide {
        height: 240px;
    } */





    .service-slider-pagination .swiper-pagination-bullet {
        width: 18px !important;
    }

    .service-slider-prev,
    .service-slider-next {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .service-slider-prev svg,
    .service-slider-next svg {
        width: 12px;
        height: 12px;
    }

    .service-slider-prev {
        right: 44px;
    }
}

/* ==========================================================
   SERVICE DETAIL PAGE — HERO
========================================================== */
.service-detail-hero {
    position: relative;
    min-height: 670px;
    display: flex;
    align-items: center;
    background-color: #111;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 140px 0 60px;
    overflow: hidden;
}

.service-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .75) 100%);
    z-index: 1;
}

.service-detail-hero .container {
    position: relative;
    z-index: 2;
}

.service-detail-breadcrumb {
    display: block;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    margin-bottom: 18px;
}

.service-detail-breadcrumb a {
    color: rgba(255, 255, 255, .75) !important;
    text-decoration: none;
}

.service-detail-breadcrumb a:hover {
    color: var(--c-white, #fff) !important;
    text-decoration: underline;
}

.service-detail-hero h1 {
    margin: 0 0 14px;
    color: var(--c-white, #fff);
    font-size: clamp(32px, 6vw, 82px);
    font-weight: 400;
    letter-spacing: -1px;
}

.service-detail-sub {
    margin: 0;
    max-width: 600px;
    color: rgba(255, 255, 255, .8);
    font-size: 22px;
    line-height: 1.6;
}

/* ==========================================================
   SERVICE DETAIL PAGE — BODY / LAYOUT
========================================================== */
.service-detail-body {
    background: var(--c-bg, #F9F9F9);
    padding: 60px 0 100px;
}

.service-detail-wrap {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
    min-width: 0;
}

.service-detail-wrap>* {
    min-width: 0;
}

/* Sidebar (desktop) — becomes a horizontal tab bar on mobile */
.service-detail-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
    align-self: start;
    background: var(--c-white, #fff);
    z-index: 10;
}

.service-detail-nav-list {
    list-style: none;
    margin: 10px 0px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.service-detail-nav-link {
    display: block;
    padding: 14px 16px;
    color: var(--c-text-light, #6d6d6d) !important;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: .3s ease;
}

.service-detail-nav-link:hover {
    color: var(--c-dark, #111) !important;
}

.service-detail-nav-link.is-active {
    color: var(--c-dark, #111) !important;
    border-left-color: var(--c-dark, #111);
}

/* Cards */
.service-detail-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.service-detail-block {
    scroll-margin-top: 100px;
}

.service-detail-data {
    scroll-margin-top: 100px;
}

/* ==========================================================
   SERVICE PAGE — OVERVIEW / BENEFITS / FEATURES / OFFERINGS
========================================================== */
.service-detail-list .container {
    padding: 0px;
}

.service-detail-list .container.faq-wrap {
    gap: 20px;
    align-items: start;
    grid-auto-flow: row;
    grid-template: none;
}

.service-detail-list .faq-left {
    position: unset;
}

.service-block h2 {
    margin: 0 0 24px;
    color: var(--c-dark);
    font-family: Manrope, sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
}

.service-overview-image {
    overflow: hidden;
}

.service-overview-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 420px;
}

.service-overview-text,
.service-block-desc {
    color: #4D4D4D;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
}

.service-overview-text p {
    margin: 30px 0;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
}

.service-overview-text p:last-child {
    margin-bottom: 0;
}

/* ---------- Benefit / Feature cards (2-col) ---------- */
.service-benefit-cards,
.service-feature-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin: 70px 0 0;
}

.service-benefit-card,
.service-feature-card {
    background: #fff;
    padding: 48px;
    border: 1px solid #E4E5E6;
}

/* Icon — supports both uploaded <img> (dynamic SVG field) and inline <svg> */
.service-feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-feature-icon img,
.service-feature-icon svg {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.service-benefit-card h3,
.service-feature-card h3 {
    /* margin: 0 0 20px; */
    color: var(--c-dark);
    font-size: 18px;
    font-weight: 500;
}

.service-benefit-card p,
.service-feature-card p {
    margin: 20px 0px;
    color: var(--c-text-light);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}

.service-feature-link {
    display: inline-block;
    /* margin-top: 16px; */
    color: #E6030E;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--ease-base);
}

.service-feature-link:hover {
    color: #E6030E !important;
}

@media (max-width:767px) {
    .service-feature-link {
        margin-top: 10px;
        font-size: 14px;
    }
}

/* ---------- Benefits image carousel ---------- */
.service-benefits-slider {
    position: relative;
    overflow: hidden;
    margin-top: 24px;
}

.service-benefits-slider .swiper-wrapper {
    align-items: stretch;
}

.service-benefits-slider .swiper-slide {
    height: 420px;
    border-radius: 4px;
    overflow: hidden;
}

.service-benefits-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-benefits-slider .swiper-button-prev,
.service-benefits-slider .swiper-button-next {
    width: 46px;
    height: 46px;
    min-width: 46px;
    background: #FFFFFFCC;
    backdrop-filter: blur(4px);
    border-radius: 50%;
    color: var(--c-dark);
    top: 50%;
    margin-top: -23px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease-base);
}

.service-benefits-slider .swiper-button-prev svg,
.service-benefits-slider .swiper-button-next svg {
    width: 18px;
    height: 18px;
    display: block;
}

.service-benefits-slider .swiper-button-prev::after,
.service-benefits-slider .swiper-button-next::after {
    content: none !important;
}

.service-benefits-slider .swiper-button-prev:hover,
.service-benefits-slider .swiper-button-next:hover {
    background: var(--c-white);
    transform: scale(1.08);
}

.service-benefits-slider .swiper-button-prev.swiper-button-disabled,
.service-benefits-slider .swiper-button-next.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

/* ---------- Feature image + overlay tags ---------- */
.service-feature-image {
    position: relative;
    overflow: hidden;
}

.service-feature-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 420px;
}

.service-feature-tags {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: rgba(0, 0, 0, .15);
}

.service-feature-tag {
    background: #FFFFFFCC;
    backdrop-filter: blur(4px);
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    padding: 32px;
    text-align: center;
}

/* ---------- Offerings (3-card grid) ---------- */
.service-offerings-slider {
    position: relative;
    overflow: hidden;
    margin: 24px 0;
}

.service-offerings-slider .swiper-wrapper {
    align-items: stretch;
}

.offering-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 4;
    background: var(--c-black);
    height: auto;
}

/* Hover icon */
.offering-card-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-6px);
    transition: var(--ease-base);
}

.offering-card-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.offering-card:hover .offering-card-icon {
    opacity: 1;
    transform: translateY(0);
}

/* Carousel nav */
.offering-slider-controls {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.offering-slider-prev,
.offering-slider-next {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: var(--c-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ease-base);
}

.offering-slider-prev svg,
.offering-slider-next svg {
    width: 18px;
    height: 18px;
}

.offering-slider-prev:hover,
.offering-slider-next:hover {
    background: var(--c-dark);
}

.offering-slider-prev:hover svg path,
.offering-slider-prev:hover svg rect,
.offering-slider-next:hover svg path,
.offering-slider-next:hover svg rect {
    fill: var(--c-white);
}

.offering-slider-prev.swiper-button-disabled,
.offering-slider-next.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

.offering-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ease-slow);
}

.offering-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 100%);
    transition: var(--ease-overlay);
}

.offering-card-label {
    position: absolute;
    left: 32px;
    bottom: 32px;
    z-index: 2;
    color: var(--c-white);
    font-size: 24px;
    font-weight: 500;
}

.offering-card:hover img {
    transform: scale(var(--scale-img));
}

.service-offerings-footer {
    margin: 0;
    color: var(--c-text-light);
    font-size: 15px;
    line-height: 1.7;
}

/* ==========================================================
   CONTACT SECTION OVERRIDE (services template)
========================================================== */
.page-template-page-services .contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.page-template-page-services .contact-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .95) 100%);
    z-index: 2;
}

.page-template-page-services .contact-overlay {
    background: none;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

/* ---------- ≤1400px : large desktop → laptop ---------- */
@media (max-width:1400px) {

    .service-benefit-card,
    .service-feature-card {
        padding: 40px;
    }

    .service-benefits-slider .swiper-slide {
        height: 380px;
    }
}

/* ---------- ≤1200px : laptop → small laptop ---------- */
@media (max-width:1200px) {
    .service-detail-sub {
        font-size: 20px;
        max-width: 540px;
    }

    .service-benefit-cards,
    .service-feature-cards {
        margin-top: 50px;
    }

    .service-benefit-card,
    .service-feature-card {
        padding: 34px;
    }

    .service-offerings-grid {
        gap: 8px;
    }

    .offering-card-label {
        font-size: 20px;
        left: 24px;
        bottom: 24px;
    }
}

/* ---------- ≤1024px : tablet landscape ---------- */
@media (max-width:1024px) {
    .service-detail-hero {
        min-height: 520px;
    }

    .service-detail-sub {
        font-size: 18px;
        max-width: 480px;
    }

    .service-feature-tags {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }

    .service-feature-tag {
        padding: 22px 16px;
        font-size: 15px;
    }
}

/* ---------- ≤991px : tablet portrait — sidebar becomes tab bar ---------- */
@media (max-width: 991px) {
    .service-detail-body {
        padding: 0px;
    }

    .service-detail-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0px 0px 30px 0px;
    }

    .service-detail-list {
        padding: 0px 20px;
    }

    .service-detail-nav {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 10px 0;
    }

    .service-detail-nav-list {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
        scrollbar-width: none;
        padding: 0 20px;
    }

    .service-detail-nav-list::-webkit-scrollbar {
        display: none;
    }

    .service-detail-nav-link {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 12px 0px;
        border-left: none;
        box-sizing: border-box;
    }

    .service-detail-nav-link:hover {
        background: #ececec;
    }

    .service-detail-nav-link.is-active {
        border-left: none;
        border-bottom: 1px solid #000;
    }

    .service-block h2 {
        font-size: 28px;
    }

    .service-benefit-cards,
    .service-feature-cards {
        gap: 12px;
        margin: 40px 0 0;
    }

    .service-benefit-card,
    .service-feature-card {
        padding: 30px;
    }

    .service-feature-icon {
        margin-bottom: 24px;
    }

    .service-feature-tags {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-offerings-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .offering-card {
        aspect-ratio: 1 / 1;
    }

    .service-benefits-slider .swiper-slide {
        height: 320px;
    }
}

/* ---------- ≤767px : mobile ---------- */
@media (max-width: 767px) {
    .service-detail-hero {
        min-height: 260px;
        padding: 100px 0 36px;
    }

    .service-detail-sub {
        font-size: 15px;
        line-height: 1.6;
        max-width: 100%;
    }

    .service-detail-data {
        scroll-margin-top: 60px;
    }

    .service-block h2 {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .service-benefit-cards,
    .service-feature-cards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 22px 0;
    }

    .service-benefit-card,
    .service-feature-card {
        padding: 24px;
    }

    .service-feature-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 18px;
    }

    .service-feature-icon img,
    .service-feature-icon svg {
        width: 36px;
        height: 36px;
    }

    .service-benefit-card h3,
    .service-feature-card h3 {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .service-overview-image img,
    .service-feature-image img {
        max-height: 260px;
    }

    .service-feature-tags {
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap: 6px;
    }

    .service-feature-tag {
        padding: 14px 10px;
        font-size: 13px;
    }

    .service-offerings-slider .swiper-slide {
        aspect-ratio: 4 / 3.4;
    }

    .offering-card-icon {
        width: 36px;
        height: 36px;
        top: 14px;
        right: 14px;
    }

    .offering-card-icon img {
        width: 16px;
        height: 16px;
    }

    .offering-card {
        aspect-ratio: 4 / 3;
    }

    .offering-card-label {
        font-size: 18px;
        left: 18px;
        bottom: 18px;
    }

    .service-offerings-footer {
        font-size: 14px;
    }

    .service-benefits-slider .swiper-slide {
        height: 240px;
    }

    .service-benefits-slider .swiper-button-prev,
    .service-benefits-slider .swiper-button-next {
        display: none !important;
    }

    .service-benefits-slider .swiper-pagination {
        bottom: 10px !important;
    }
}

/* ---------- ≤575px : small mobile ---------- */
@media (max-width: 575px) {
    .service-detail-hero {
        min-height: 220px;
        padding: 90px 0 28px;
         height: 520px;
    }

    .service-detail-breadcrumb {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .service-block h2 {
        font-size: 21px;
    }

    .service-overview-text p {
        margin: 18px 0;
        font-size: 15px;
    }

    .service-benefit-card,
    .service-feature-card {
        padding: 20px;
    }

    .service-benefit-card p,
    .service-feature-card p {
        font-size: 14px;
    }

    .service-feature-tags {
        grid-template-columns: 1fr;
    }

    .service-benefits-slider .swiper-slide {
        height: 200px;
    }
}

/* ---------- ≤480px : very small mobile ---------- */
@media (max-width: 480px) {
    .service-detail-hero h1 {
        font-size: 26px;
    }

    .service-detail-list {
        padding: 0 14px;
    }

    .service-benefit-card,
    .service-feature-card {
        padding: 18px;
    }

    .offering-card-label {
        font-size: 16px;
        left: 14px;
        bottom: 14px;
    }

    .service-offerings-footer {
        font-size: 13px;
    }
}



body.single-service .site-header {
    background-color: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

/* ==========================================================
   LEGAL PAGE (Terms of Trade / Privacy Policy) — refreshed
========================================================== */
.legal-body {
    background: var(--c-bg, #F9F9F9);
    padding: 90px 0 130px;
}

.legal-wrap {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 64px;
    align-items: start;
    min-width: 0;
}

.legal-wrap>* {
    min-width: 0;
}

/* Sidebar (desktop) / horizontal tab bar (mobile) */
.legal-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 48px;
    align-self: start;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    background: transparent;
    z-index: 10;
}

.legal-nav-eyebrow {
    display: block;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-border, #e5e5e5);
    color: var(--c-text-light, #828487);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.legal-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legal-nav-link {
    position: relative;
    display: block;
    padding: 9px 0 9px 18px;
    color: var(--c-text-light, #828487) !important;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color .25s ease, border-color .25s ease;
}

.legal-nav-link:hover {
    color: var(--c-dark, #111) !important;
    border-left-color: var(--c-border, #e5e5e5);
}

.legal-nav-link.is-active {
    color: var(--c-dark, #111) !important;
    font-weight: 500;
    border-left-color: var(--c-dark, #111);
}

/* Body content */
.legal-content {
    background: var(--c-white, #fff);
    padding: 64px 72px;
    box-shadow: 0 1px 0 var(--c-border, #e5e5e5), 0 18px 50px rgba(0, 0, 0, .05);
    max-width: 880px;
}

.legal-content h2 {
    margin: 64px 0 20px;
    color: var(--c-dark, #111);
    font-family: Manrope, sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.4px;
    scroll-margin-top: 110px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    margin: 32px 0 12px;
    color: var(--c-dark, #111);
    font-family: Manrope, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

.legal-content p {
    margin: 0 0 16px;
    color: var(--c-text-light, #828487);
    font-size: 16px;
    line-height: 1.8;
}

.legal-content p:last-child {
    margin-bottom: 0;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 16px;
    padding-left: 22px;
    color: var(--c-text-light, #828487);
    font-size: 16px;
    line-height: 1.8;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content li:last-child {
    margin-bottom: 0;
}

.legal-content ol[type="a"] {
    list-style-type: lower-alpha;
}

.legal-content ol[type="i"] {
    list-style-type: lower-roman;
}

.legal-content a {
    color: var(--c-dark, #111);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-content strong {
    color: var(--c-dark, #111);
    font-weight: 600;
}

.legal-content hr {
    border: none;
    border-top: 1px solid var(--c-border, #e5e5e5);
    margin: 48px 0;
}

.legal-content p>strong:first-child {
    display: inline-block;
    margin-right: 8px;
    color: var(--c-text-light, #828487);
    font-weight: 600;
}

@media (max-width:1200px) {
    .legal-wrap {
        gap: 32px;
    }

    .legal-content {
        padding: 48px 44px;
    }
}

@media (max-width:991px) {
    .legal-body {
        padding: 50px 0 80px;
    }

    .legal-wrap {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .legal-nav {
        position: sticky;
        top: 0;
        max-height: none;
        overflow: visible;
        padding: 16px 0;
        margin-bottom: 24px;
        background: var(--c-bg, #F9F9F9);
        border-bottom: 1px solid var(--c-border, #e5e5e5);
    }

    .legal-nav-eyebrow {
        display: none;
    }

    .legal-nav-list {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        scrollbar-width: none;
    }

    .legal-nav-list::-webkit-scrollbar {
        display: none;
    }

    .legal-nav-link {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10px 16px;
        border-left: none;
        border-radius: 999px;
        background: var(--c-white, #fff);
    }

    .legal-nav-link:hover {
        border-left: none;
        background: var(--c-white, #fff);
    }

    .legal-nav-link.is-active {
        background: var(--c-dark, #111);
        color: var(--c-white, #fff) !important;
        border-left: none;
    }

    .legal-content {
        padding: 32px 24px;
        box-shadow: none;
        border: 1px solid var(--c-border, #e5e5e5);
    }
}

@media (max-width:767px) {
    .legal-content h2 {
        font-size: 21px;
        margin: 40px 0 14px;
    }

    .legal-content h2:first-child {
        margin-top: 0;
    }

    .legal-content p,
    .legal-content ul,
    .legal-content ol {
        font-size: 15px;
    }
}

.contact-map-section {
    line-height: 0;
}

.contact-map-section iframe {
    display: block;
    width: 100%;
    height: 480px;
}

@media (max-width:767px) {
    .contact-map-section iframe {
        height: 320px;
    }
}

/* ==========================================================
   CONTACT PAGE — full styling
   Uses the design tokens already defined in :root in style.css
   (--c-black, --c-dark, --c-white, --c-bg, --c-border,
    --c-text-light, --radius-pill, --radius-circle, --ease-base)
   Drop this in after your main style.css.
========================================================== */

/* ---------- INFO STRIP (floating cards under hero) ---------- */
.contact-info-strip {
    position: relative;
    z-index: 3;
    margin-top: -90px;
    padding-bottom: 0;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.contact-info-card {
    background: var(--c-black);
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    gap: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
    transition: var(--ease-base);
}

.contact-info-card:hover {
    transform: translateY(var(--lift-card));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
}

.contact-info-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.contact-info-label {
    margin: 0;
    color: var(--c-white);
    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}

@media (max-width:991px) {
    .contact-info-strip {
        margin-top: -60px;
    }
}

@media (max-width:767px) {
    .contact-info-strip {
        margin-top: -40px;
    }

    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .contact-info-card {
        padding: 22px 18px;
        gap: 12px;
        border-radius: 16px;
    }

    .contact-info-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .contact-info-icon svg {
        width: 18px;
        height: 18px;
    }

    .contact-info-label {
        font-size: 14px;
    }
}

@media (max-width:480px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- GET IN TOUCH (split form section) ---------- */
.contact-form-section {
    background: var(--c-bg);
    padding: 140px 0 60px;
}

.contact-form-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.contact-form-left h2 {
    margin: 0 0 24px;
    color: var(--c-dark);
    font-family: Manrope, sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    max-width: 460px;
}

.contact-form-subtitle {
    margin: 0 0 40px;
    color: var(--c-text-light);
    font-size: 16px;
    line-height: 1.7;
    max-width: 440px;
}

.contact-form-reach {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-form-reach li a {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--c-dark);
    font-family: Manrope, sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--ease-base);
}

.contact-form-reach li a svg {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: var(--radius-circle);
    background: var(--c-white);
    color: var(--c-dark);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
    transition: var(--ease-base);
}

.contact-form-reach li a:hover {
    color: var(--c-black) !important;
}

.contact-form-reach li a:hover svg {
    background: var(--c-black);
    color: var(--c-white);
    transform: translateY(-2px);
}


.contact-form-temp {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cf-row {
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.cf-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.cf-row-2 .cf-field:first-child {
    border-right: 1px solid rgba(0, 0, 0, .12);
}

.cf-field {
    position: relative;
}

.cf-field input,
.cf-field select {
    width: 100%;
    height: 58px;
    border: none;
    background: transparent;
    outline: none;
    font-family: Manrope, sans-serif;
    font-size: 15px;
    color: var(--c-dark);
    padding: 0 4px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    transition: color .2s ease;
}

.cf-field input::placeholder {
    color: #8a8a8a;
}

.cf-field select {
    color: #8a8a8a;
    cursor: pointer;
}

.cf-field select:valid,
.cf-field select:focus {
    color: var(--c-dark);
}

.cf-select::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 12px;
    height: 8px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
}

.cf-submit {
    margin-top: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 58px;
    background: var(--c-black);
    border: none;
    border-radius: var(--radius-pill);
    color: var(--c-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--ease-base);
}

.cf-submit-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: var(--radius-circle);
    background: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease-base);
}

.cf-submit:hover {
    background: #222;
}

.cf-submit:hover .cf-submit-icon {
    transform: translateX(4px) rotate(-45deg);
}

@media (max-width:1200px) {
    .contact-form-wrap {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-form-left h2,
    .contact-form-subtitle {
        max-width: 100%;
    }


}

@media (max-width:767px) {
    .contact-form-section {
        padding: 70px 0 60px;
    }

    .contact-form-left h2 {
        font-size: 30px;
        margin-bottom: 14px;
    }

    .contact-form-subtitle {
        font-size: 15px;
        margin-bottom: 26px;
    }

    .contact-form-reach {
        gap: 14px;
        margin-bottom: 8px;
    }

    .contact-form-reach li a {
        font-size: 16px;
        gap: 12px;
    }

    .contact-form-reach li a svg {
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 9px;
    }


    .cf-row-2 {
        grid-template-columns: 1fr;
    }

    .cf-row-2 .cf-field:first-child {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
    }

    .cf-field input,
    .cf-field select {
        height: 50px;
        font-size: 14px;
    }

    .cf-submit {
        height: 50px;
        margin-top: 18px;
    }
}

@media (max-width:480px) {
    .contact-form-section {
        padding: 50px 0 40px;
    }

    .contact-form-left h2 {
        font-size: 26px;
    }


}

/* ---------- MAP (framed, rounded) ---------- */
.contact-map-section-new {
    background: var(--c-bg);
    padding: 0 0 120px;
}

.contact-map-frame {
    /* border-radius: 24px; */
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
    line-height: 0;
}

.contact-map-frame iframe {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
}

@media (max-width:767px) {
    .contact-map-section-new {
        padding: 0 0 60px;
    }

    .contact-map-frame {
        border-radius: 16px;
    }

    .contact-map-frame iframe {
        height: 320px;
    }
}

/* =========================================================
   PLANET CONCRETE — CONTACT FORM
   Match the second/reference design exactly
========================================================= */

.contact-right {
    position: relative;

    /* Exact desktop card size */
    width: 630px;
    max-width: 100%;
    margin-left: auto;

    padding: 48px 48px !important;
    box-sizing: border-box;


    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 0;

    -webkit-backdrop-filter: blur(24px) saturate(120%);
    backdrop-filter: blur(24px) saturate(120%);

    box-shadow: none;

    background: rgb(247 247 245 / 81%) !important;
    backdrop-filter: blur(0px) !important;
}


/* =========================================================
   GRAVITY FORMS RESET
========================================================= */

.contact-right .gform_wrapper {
    all: unset;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.contact-right .gform_wrapper .gform_body,
.contact-right .gform_wrapper .gform-body {
    width: 100%;
    margin: 0;
    padding: 0;
}

.contact-right .gform_wrapper .gform_fields {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
}


/* =========================================================
   FIELDS
========================================================= */

.contact-right .gform_wrapper .gfield {
    flex: 0 0 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);

    border-radius: 0;
    background: transparent;
    box-shadow: none;

    box-sizing: border-box;
}


/* Email + Phone */
.contact-right .gform_wrapper .gfield--width-half {
    flex: 0 0 50%;
    max-width: 50%;
}


/* Vertical divider between Email and Phone */
.contact-right .gform_wrapper .gfield--width-half:first-of-type {
    border-right: 1px solid rgba(0, 0, 0, 0.18);
}


/* =========================================================
   HIDE GRAVITY FORMS LABELS
========================================================= */

.contact-right .gform_wrapper .gfield_label,
.contact-right .gform_wrapper .gform-field-label,
.contact-right .gform_wrapper legend.gfield_label,
.contact-right .gform_wrapper .gfield_required {
    display: none !important;
}


/* =========================================================
   NAME FIELD
========================================================= */

.contact-right .gform_wrapper .ginput_complex,
.contact-right .gform_wrapper .ginput_container_name {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.contact-right .gform_wrapper .name_first {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================================================
   INPUTS / SELECTS
========================================================= */

.contact-right .gform_wrapper input[type="text"],
.contact-right .gform_wrapper input[type="email"],
.contact-right .gform_wrapper input[type="tel"],
.contact-right .gform_wrapper select {
    width: 100%;
    height: 59px;

    margin: 0;
    padding: 20px 3px;

    border: none;
    border-radius: 0;

    background: transparent;

    outline: none;
    box-shadow: none;

    box-sizing: border-box;

    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;

    color: #111;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 10px 0px;
}


/* Placeholder */
.contact-right .gform_wrapper input::placeholder {
    color: #777;
    opacity: 1;
}


/* Select */
.contact-right .gform_wrapper select {
    color: #111;
    cursor: pointer;
}


/* Empty select placeholder */
.contact-right .gform_wrapper select:invalid {
    color: #777;
}


/* =========================================================
   SELECT ARROW
========================================================= */

.contact-right .gform_wrapper .ginput_container_select {
    position: relative;
    width: 100%;
}

.contact-right .gform_wrapper select.gfield_select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 12px 8px;

    padding-right: 28px;
}


/* =========================================================
   FORM FOOTER
========================================================= */

.contact-right .gform_wrapper .gform_footer,
.contact-right .gform_wrapper .gform_page_footer {
    display: block;

    margin: 32px 0 0;
    padding: 0;

    border: none;
}


/* =========================================================
   REQUEST A FREE QUOTE BUTTON
   Matches second/reference image
========================================================= */

.contact-right .gform_wrapper input.gform_button,
.contact-right .gform_wrapper input[type="submit"].gform_button {

    /* Size from reference */
    width: 175px;
    height: 39px;

    margin: 0;
    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 3px;

    background: #204ce5;
    background-image: none;

    color: #fff;

    font-family: Manrope, sans-serif;
    font-size: 14px;
    font-weight: 600;

    line-height: 1;
    letter-spacing: 0;

    text-transform: none;
    text-align: center;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


/* Remove the old arrow */
.contact-right .gform_wrapper input.gform_button::after,
.contact-right .gform_wrapper input[type="submit"].gform_button::after {
    display: none !important;
    content: none !important;
}


/* Button hover */
.contact-right .gform_wrapper input.gform_button:hover,
.contact-right .gform_wrapper input[type="submit"].gform_button:hover {
    background: #1740c5;
    transform: translateY(-1px);
}


/* =========================================================
   REMOVE UNWANTED GRAVITY FORMS ELEMENTS
========================================================= */

.contact-right .gform_wrapper .gform_description,
.contact-right .gform_wrapper .gfield_description,
.contact-right .gform_wrapper .gform_validation_errors,
.contact-right .gform_wrapper .gform-body-description {
    display: none !important;
}


/* =========================================================
   VALIDATION
========================================================= */

.contact-right .gform_wrapper .gfield.gfield_error {
    border-bottom-color: #d92d20;
}

.contact-right .gform_wrapper .gfield_validation_message,
.contact-right .gform_wrapper .validation_message {
    font-size: 12px;
    color: #d92d20;
    margin-top: 4px;
    padding: 0 3px;
    display: block;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1201px) {
    .contact-right {
        width: 630px;
        max-width: 630px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {
    .contact-right {
        width: 630px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .contact-right {
        width: 100%;
        max-width: 100%;

        padding: 28px 20px 30px;

        border-radius: 0;
    }


    /* Email + Phone become stacked */
    .contact-right .gform_wrapper .gfield--width-half {
        flex: 0 0 100%;
        max-width: 100%;
    }


    .contact-right .gform_wrapper .gfield--width-half:first-of-type {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    }


    .contact-right .gform_wrapper input[type="text"],
    .contact-right .gform_wrapper input[type="email"],
    .contact-right .gform_wrapper input[type="tel"],
    .contact-right .gform_wrapper select {
        height: 54px;
        font-size: 14px;
    }


    .contact-right .gform_wrapper .gform_footer {
        margin-top: 28px;
    }


    .contact-right .gform_wrapper input.gform_button,
    .contact-right .gform_wrapper input[type="submit"].gform_button {
        width: 175px;
        height: 40px;
        font-size: 13px;
    }
}

/* =========================================================
   FINAL OVERRIDES — MATCH REFERENCE IMAGE
========================================================= */


/* ---------------------------------------------------------
   BUTTON — BLACK LIKE REFERENCE
--------------------------------------------------------- */

body .contact-right .gform_wrapper input.gform_button,
body .contact-right .gform_wrapper input[type="submit"].gform_button,
body .contact-right .gform_wrapper .gform_footer input.gform_button {
    width: 100% !important;
    height: 39px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    display: block !important;

    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 999px !important;

    color: #ffffff !important;

    font-family: Manrope, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;

    line-height: 39px !important;
    text-align: center !important;
    text-transform: uppercase !important;

    box-shadow: none !important;
    outline: none !important;

    cursor: pointer !important;
    box-sizing: border-box !important;

    transition: background-color 0.25s ease !important;
}


/* Remove any Gravity Forms / old arrow */
body .contact-right .gform_wrapper input.gform_button::after,
body .contact-right .gform_wrapper input[type="submit"].gform_button::after {
    content: none !important;
    display: none !important;
}


/* Button hover */
body .contact-right .gform_wrapper input.gform_button:hover,
body .contact-right .gform_wrapper input[type="submit"].gform_button:hover {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   SELECT — PLACEHOLDER COLOR
--------------------------------------------------------- */

body .contact-right .gform_wrapper select.gfield_select {
    color: #6d6d6d !important;
}


/* ---------------------------------------------------------
   SELECT — SELECTED VALUE MUST BE BLACK
--------------------------------------------------------- */

/* When a real option is selected */
body .contact-right .gform_wrapper select.gfield_select:has(option:checked:not([value=""])) {
    color: #000000 !important;
}


/* Individual options */
body .contact-right .gform_wrapper select.gfield_select option {
    color: #000000 !important;
    background: #ffffff !important;
}


/* Placeholder option */
body .contact-right .gform_wrapper select.gfield_select option[value=""] {
    color: #6d6d6d !important;
}


/* ---------------------------------------------------------
   INPUT TEXT
--------------------------------------------------------- */

body .contact-right .gform_wrapper input[type="text"],
body .contact-right .gform_wrapper input[type="email"],
body .contact-right .gform_wrapper input[type="tel"] {
    color: #000000 !important;
}


/* Input placeholders */
body .contact-right .gform_wrapper input::placeholder {
    color: #6d6d6d !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   FIELD SEPARATOR
--------------------------------------------------------- */

body .contact-right .gform_wrapper .gfield {
    border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
}


/* Email / Phone vertical separator */
body .contact-right .gform_wrapper .gfield--width-half:first-of-type {
    border-bottom: 1px solid #0000002e !important;
    border-right: none !important;
}


/* ---------------------------------------------------------
   SELECT ARROW
--------------------------------------------------------- */

body .contact-right .gform_wrapper select.gfield_select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: right 5px center !important;
    background-size: 12px 8px !important;
}


/* ---------------------------------------------------------
   BUTTON FOOTER SPACING
--------------------------------------------------------- */

body .contact-right .gform_wrapper .gform_footer {
    margin: 32px 0 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   DESKTOP BUTTON WIDTH
   Reference image shows full-width black button
--------------------------------------------------------- */

@media (min-width: 768px) {

    body .contact-right .gform_wrapper input.gform_button,
    body .contact-right .gform_wrapper input[type="submit"].gform_button {
        width: 100% !important;
    }
}

/* ==========================================================
   PROJECTS OVERVIEW PAGE
========================================================== */
.projects-page-body {
    background: var(--c-bg);
    padding: 60px 0 100px;
}

/* ---------- Filter bar (replaces Services' static sidebar list) ---------- */
.projects-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 44px;
}

.projects-filter-chip {
    padding: 10px 22px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    color: var(--c-text-light);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--ease-base);
    -webkit-user-select: none;
    user-select: none;
}

.projects-filter-chip:hover {
    border-color: var(--c-project-accent);
    color: var(--c-dark);
}

.projects-filter-chip.is-active {
    background: var(--c-project-accent);
    border-color: var(--c-project-accent);
    color: var(--c-white);
}

@media (max-width:767px) {
    .projects-filter-bar {
        margin-bottom: 26px;
        gap: 8px;
    }

    .projects-filter-chip {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ---------- Portfolio grid (replaces Services' stacked full-width blocks) ---------- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* looser than .services-grid's 8px — portfolio breathing room */
}

.project-card {
    border-radius: var(--radius-project-card);
    overflow: hidden;
    background: var(--c-white);
    transition: var(--ease-base);
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .10);
}

.project-card.is-hidden {
    display: none;
}

.project-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.project-card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--ease-slow);
}

.project-card:hover .project-card-image img {
    transform: scale(1.06);
}

.project-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .35) 100%);
    pointer-events: none;
}

.project-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--c-project-accent);
    color: var(--c-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
}

.project-card-body {
    padding: 20px 22px 26px;
}

.project-card-body h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--c-dark);
}

.project-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--c-text-light);
    font-size: 14px;
}

.project-card-pin {
    flex-shrink: 0;
    color: var(--c-project-accent);
}

@media (max-width:991px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width:767px) {
    .projects-page-body {
        padding: 40px 0 60px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .project-card-body {
        padding: 16px 18px 20px;
    }
}

/* ==========================================================
   INNER PROJECT PAGE — hero meta row
========================================================== */
.project-hero-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    font-weight: 500;
}

.project-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.project-hero-meta svg {
    color: var(--c-project-accent);
    flex-shrink: 0;
}

.project-hero-meta-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-project-accent);
    flex-shrink: 0;
}

@media (max-width:767px) {
    .project-hero-meta {
        gap: 10px;
        font-size: 13px;
        margin-top: 12px;
    }
}

/* ==========================================================
   INNER PROJECT PAGE — Project Details Panel
========================================================== */
.project-details-panel {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid #E4E5E6;
    background: var(--c-white);
}

.project-details-item {
    padding: 28px 24px;
    border-right: 1px solid #E4E5E6;
}

.project-details-item:last-child {
    border-right: none;
}

.project-details-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--c-text-light);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.project-details-item strong {
    color: var(--c-dark);
    font-size: 17px;
    font-weight: 500;
}

.project-details-scope {
    margin: 24px 0 0;
    color: var(--c-text-light);
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width:991px) {
    .project-details-panel {
        grid-template-columns: repeat(3, 1fr);
    }

    .project-details-item:nth-child(3n) {
        border-right: none;
    }

    .project-details-item {
        border-bottom: 1px solid #E4E5E6;
    }
}

@media (max-width:575px) {
    .project-details-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-details-item:nth-child(3n) {
        border-right: 1px solid #E4E5E6;
    }

    .project-details-item:nth-child(2n) {
        border-right: none;
    }

    .project-details-item {
        padding: 20px 18px;
    }
}

/* ==========================================================
   INNER PROJECT PAGE — Project Brief (restyled Benefits)
========================================================== */
.project-brief-kicker {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--c-project-accent-soft);
    color: var(--c-project-accent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ==========================================================
   INNER PROJECT PAGE — Gallery Grid (replaces Offerings carousel)
========================================================== */
.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px;
}

.project-gallery-grid .gallery-item {
    overflow: hidden;
    border-radius: 6px;
}

.project-gallery-grid .gallery-item:nth-child(5n+1) {
    grid-row: span 2;
}

.project-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: transform var(--ease-base);
}

.project-gallery-grid img:hover {
    transform: scale(1.03);
}

@media (max-width:767px) {
    .project-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .project-gallery-grid .gallery-item:nth-child(5n+1) {
        grid-row: span 1;
    }
}

/* Lightbox (driven by projects.js) */
.project-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .9);
    padding: 40px;
    box-sizing: border-box;
}

.project-lightbox.is-open {
    display: flex;
}

.project-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.project-lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================
   INNER PROJECT PAGE — sidebar nav accent override
   (structure/behavior identical to .service-detail-nav; only the
   active-state color changes, via the extra .project-detail-nav-link
   class added alongside .service-detail-nav-link in single-project.php)
========================================================== */
.project-detail-nav-link.is-active {
    color: var(--c-dark) !important;
    border-left-color: var(--c-project-accent);
}

@media (max-width:991px) {
    .project-detail-nav-link.is-active {
        border-left: none;
        border-bottom: 2px solid var(--c-project-accent);
    }
}

/* single product page */
body.single-project .site-header {
    background-color: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.single-project .service-detail-hero.project-detail-hero {
    min-height: 670px;
    display: flex;
    align-items: center;
    background-color: #111;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 140px 0 60px;
    overflow: hidden;
    position: relative;
}

.single-project .service-detail-hero.project-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .75) 100%);
    z-index: 1;
}

.single-project .service-detail-hero.project-detail-hero .container {
    position: relative;
    z-index: 2;
}

.single-project .service-detail-breadcrumb {
    display: block;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    margin-bottom: 18px;
}

.single-project .service-detail-breadcrumb a {
    color: rgba(255, 255, 255, .75) !important;
    text-decoration: none;
}

.single-project .service-detail-breadcrumb a:hover {
    color: #fff !important;
    text-decoration: underline;
}

.single-project .service-detail-hero.project-detail-hero h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(32px, 6vw, 82px);
    font-weight: 400;
    letter-spacing: -1px;
}

.single-project .service-detail-sub {
    margin: 0;
    max-width: 600px;
    color: rgba(255, 255, 255, .8);
    font-size: 22px;
    line-height: 1.6;
}

.single-project .service-detail-body.project-detail-body {
    background: #F9F9F9;
    padding: 60px 0 100px;
}

.single-project .service-detail-wrap.project-detail-wrap {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
    min-width: 0;
}

.single-project .service-detail-wrap.project-detail-wrap>* {
    min-width: 0;
}

.single-project .service-detail-nav.project-detail-nav {
    position: sticky;
    position: -webkit-sticky;
    top: 40px;
    align-self: start;
    background: #fff;
    z-index: 10;
}

.single-project .service-detail-nav-list {
    list-style: none;
    margin: 10px 0px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.single-project .service-detail-nav-link.project-detail-nav-link {
    display: block;
    padding: 14px 16px;
    color: #6d6d6d !important;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: .3s ease;
}

.single-project .service-detail-nav-link.project-detail-nav-link:hover {
    color: #111 !important;
}

.single-project .service-detail-nav-link.project-detail-nav-link.is-active {
    color: #111 !important;
    border-left-color: var(--c-project-accent);
}

.single-project .service-detail-list.project-detail-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.single-project .service-detail-block.project-detail-block {
    scroll-margin-top: 100px;
}

.single-project .service-detail-data.project-detail-data {
    scroll-margin-top: 100px;
    background: #fff;
    padding: 32px;
}

.single-project .service-detail-list .container {
    padding: 0px;
}

.single-project .service-detail-list .container.faq-wrap {
    gap: 20px;
    align-items: start;
    grid-auto-flow: row;
    grid-template: none;
}

.single-project .service-detail-list .faq-left {
    position: unset;
}

.single-project .service-detail-data h2 {
    margin: 0 0 24px;
    color: var(--c-dark);
    font-family: Manrope, sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
}

.single-project .service-overview-text p {
    margin: 18px 0;
    font-size: 16px;
    line-height: 1.75;
    color: #4D4D4D;
}

.single-project .service-overview-image {
    overflow: hidden;
    margin-bottom: 24px;
}

.single-project .service-overview-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 420px;
}

.single-project .service-benefit-cards.project-brief-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 40px;
}

.single-project .service-benefit-card.project-brief-card {
    background: var(--c-bg);
    padding: 30px;
}

.single-project .service-benefit-card.project-brief-card h3 {
    margin: 0 0 14px;
    color: var(--c-dark);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.single-project .service-benefit-card.project-brief-card p {
    margin: 0;
    color: var(--c-text-light);
    font-size: 15px;
    line-height: 1.7;
}

.single-project .service-feature-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 50px;
}

.single-project .service-feature-card {
    background: var(--c-bg);
    padding: 34px;
}

.single-project .service-feature-card h3 {
    margin: 0 0 14px;
    color: var(--c-dark);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

.single-project .service-feature-card p {
    margin: 0 0 18px;
    color: var(--c-text-light);
    font-size: 15px;
    line-height: 1.7;
}

.single-project .service-feature-icon {
    margin-bottom: 28px;
}

.single-project .service-feature-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.single-project .service-feature-image {
    position: relative;
    overflow: hidden;
    margin-top: 50px;
}

.single-project .service-feature-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.single-project .service-feature-tags {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.single-project .service-feature-tag {
    padding: 18px 16px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--c-dark);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.single-project .service-benefits-slider .swiper-slide {
    height: 420px;
}

.single-project .service-benefits-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.single-project .service-benefits-slider .swiper-pagination {
    bottom: 20px !important;
}

.single-project .service-benefits-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #fff;
    opacity: .5;
}

.single-project .service-benefits-slider .swiper-pagination-bullet-active {
    opacity: 1;
}

.single-project .cta-section {
    padding: 0;
    margin: 0 -32px;
}

.single-project .bottom-cta {
    margin-top: 0;
}

.single-project .service-offerings-footer {
    margin-top: 20px;
    color: var(--c-text-light);
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width:1200px) {
    .single-project .service-detail-sub {
        font-size: 20px;
        max-width: 540px;
    }

    .single-project .service-benefit-cards,
    .single-project .service-feature-cards {
        margin-top: 50px;
    }

    .single-project .service-benefit-card,
    .single-project .service-feature-card {
        padding: 34px;
    }
}

@media (max-width:1024px) {
    .single-project .service-detail-hero.project-detail-hero {
        min-height: 520px;
    }

    .single-project .service-detail-sub {
        font-size: 18px;
        max-width: 480px;
    }

    .single-project .service-feature-tags {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }

    .single-project .service-feature-tag {
        padding: 22px 16px;
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    .single-project .service-detail-body.project-detail-body {
        padding: 0px;
    }

    .single-project .service-detail-wrap.project-detail-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0px 0px 30px 0px;
    }

    .single-project .service-detail-list.project-detail-list {
        padding: 0px 20px;
    }

    .single-project .service-detail-nav.project-detail-nav {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 10px 0;
    }

    .single-project .service-detail-nav-list {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
        scrollbar-width: none;
        padding: 0 20px;
    }

    .single-project .service-detail-nav-list::-webkit-scrollbar {
        display: none;
    }

    .single-project .service-detail-nav-link.project-detail-nav-link {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 12px 0px;
        border-left: none;
        box-sizing: border-box;
    }

    .single-project .service-detail-nav-link.project-detail-nav-link:hover {
        background: #ececec;
    }

    .single-project .service-detail-nav-link.project-detail-nav-link.is-active {
        border-left: none;
        border-bottom: 2px solid var(--c-project-accent);
    }

    .single-project .service-detail-data.project-detail-data h2 {
        font-size: 28px;
    }

    .single-project .service-benefit-cards,
    .single-project .service-feature-cards {
        gap: 12px;
        margin: 40px 0 0;
    }

    .single-project .service-benefit-card,
    .single-project .service-feature-card {
        padding: 30px;
    }

    .single-project .service-feature-icon {
        margin-bottom: 24px;
    }

    .single-project .service-feature-tags {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-project .project-details-panel {
        grid-template-columns: repeat(3, 1fr);
    }

    .single-project .project-details-item:nth-child(3n) {
        border-right: none;
    }

    .single-project .project-details-item {
        border-bottom: 1px solid #E4E5E6;
    }

    .single-project .project-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .single-project .project-gallery-grid .gallery-item:nth-child(5n+1) {
        grid-column: span 1;
        grid-row: span 1;
    }

    .single-project .service-benefit-cards.project-brief-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-project .service-feature-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-project .service-benefits-slider .swiper-slide {
        height: 320px;
    }
}

@media (max-width: 767px) {
    .single-project .service-detail-hero.project-detail-hero {
        min-height: 260px;
        padding: 100px 0 36px;
    }

    .single-project .service-detail-sub {
        font-size: 15px;
        line-height: 1.6;
        max-width: 100%;
    }

    .single-project .service-detail-data.project-detail-data {
        scroll-margin-top: 60px;
        padding: 22px 20px;
    }

    .single-project .service-detail-data h2 {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .single-project .service-benefit-cards,
    .single-project .service-feature-cards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 22px 0;
    }

    .single-project .service-benefit-card,
    .single-project .service-feature-card {
        padding: 24px 22px;
    }

    .single-project .project-details-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-project .project-details-item:nth-child(3n) {
        border-right: 1px solid #E4E5E6;
    }

    .single-project .project-details-item:nth-child(2n) {
        border-right: none;
    }

    .single-project .project-details-item {
        padding: 20px 18px;
    }

    .single-project .project-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .single-project .service-benefit-cards.project-brief-cards {
        grid-template-columns: 1fr;
    }

    .single-project .service-feature-cards {
        grid-template-columns: 1fr;
    }

    .single-project .service-feature-tags {
        grid-template-columns: 1fr;
    }

    .single-project .service-benefits-slider .swiper-slide {
        height: 240px;
    }

    .single-project .service-detail-list.project-detail-list {
        padding: 0 14px;
    }
}

@media (max-width: 575px) {
    .single-project .service-detail-hero.project-detail-hero {
        min-height: 220px;
        padding: 90px 0 28px;
    }

    .single-project .service-detail-breadcrumb {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .single-project .service-detail-data.project-detail-data h2 {
        font-size: 21px;
    }

    .single-project .service-overview-text p {
        margin: 18px 0;
        font-size: 15px;
    }

    .single-project .service-benefit-card,
    .single-project .service-feature-card {
        padding: 20px;
    }

    .single-project .service-benefit-card p,
    .single-project .service-feature-card p {
        font-size: 14px;
    }

    .single-project .service-feature-tags {
        grid-template-columns: 1fr;
    }

    .single-project .service-benefits-slider .swiper-slide {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .single-project .service-detail-hero.project-detail-hero h1 {
        font-size: 26px;
    }

    .single-project .project-details-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-project .service-benefit-card,
    .single-project .service-feature-card {
        padding: 18px;
    }

    .single-project .service-offerings-footer {
        font-size: 13px;
    }
}

.service-block-title .service-block-title-link,
.service-block-title .service-block-title-link:hover,
.service-block-title .service-block-title-link:focus,
.service-block-title .service-block-title-link:visited {
    color: black;
    text-decoration: none;
}

.service-block-title .service-block-title-link {
    display: inline-block;
    transition: transform 0.2s ease;
}

.service-block-title .service-block-title-link:hover {
    transform: scale(0.97);
    color: black !important;
}

.service-content {
    transition: 0.3s all;
}

.service-card:hover .service-content {
    transform: translateY(-10px);
    transition: 0.3s all;
}


/* =========================================
   HERO BUTTON - HEADER STYLE HOVER EFFECT
   ========================================= */

.hero-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* White background sweep */
.hero-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    transform: translateX(-101%);
    transition: transform 0.35s ease;
    z-index: -1;
}

/* Sweep from left to right */
.hero-btn:hover::before {
    transform: translateX(0);
}

/* Text becomes black */
.hero-btn:hover {
    color: #000000;
}

/* Icon circle */
/* .hero-btn:hover span {
    background: #ffffff;
    transform: translateX(5px) rotate(-45deg);
} */

/* Make sure the SVG stays above the circle */
.hero-btn:hover span svg {
    position: relative;
    z-index: 2;
}

/* =========================================
   CTA BUTTON - HEADER STYLE HOVER EFFECT
   ========================================= */

.cta-btn {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* Dark color sweep */
.cta-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--c-dark) !important;
    transform: translateX(-101%) !important;
    transition: transform 0.35s ease !important;
    z-index: 0 !important;
}

/* Dark background sweeps left → right */
.cta-btn:hover::before {
    transform: translateX(0) !important;
}

/* Hover text stays WHITE */
.cta-btn:hover {
    background: transparent !important;
    color: var(--c-white) !important;
    border-color: var(--c-dark) !important;
}

/* Keep text above animation */
.cta-btn>span:first-child {
    position: relative !important;
    z-index: 2 !important;
}

/* Icon stays above animation */
.cta-btn .cta-btn-icon {
    position: relative !important;
    z-index: 2 !important;
    transition: transform 0.35s ease !important;
}



/* Arrow remains black inside white circle */
.cta-btn:hover .cta-btn-icon svg,
.cta-btn:hover .cta-btn-icon svg * {
    fill: var(--c-dark) !important;
}

/* =========================================================
   EMAIL + PHONE — FIGMA GAP
   Desktop / Tablet only
========================================================= */

@media (min-width: 768px) {

    body .contact-right .gform_wrapper #gform_fields_1 {
        display: flex !important;
        flex-wrap: wrap !important;
        column-gap: 24px !important;
        row-gap: 0 !important;
    }

    body .contact-right .gform_wrapper #gform_fields_1 #field_1_18,
    body .contact-right .gform_wrapper #gform_fields_1 #field_1_19 {
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
        box-sizing: border-box !important;
    }

    /* Make sure no old divider interferes */
    body .contact-right .gform_wrapper #gform_fields_1 #field_1_18,
    body .contact-right .gform_wrapper #gform_fields_1 #field_1_19 {
        border-right: none !important;
    }
}

/* =========================================================
   GRAVITY FORM QUOTE BUTTON
   SVG ICON - NEXT TO CENTERED TEXT
   ========================================================= */

.contact-right #gform_wrapper_1 #gform_submit_button_1 {
    background-image: url("/wp-content/uploads/2026/08/arrow.svg") !important;
    background-repeat: no-repeat !important;

    /* Icon next to the centered button text */
    background-position: calc(50% + 105px) center !important;

    background-size: 32px 32px !important;

    padding-right: 24px !important;
    height: 56px !important;
}


.faq-btn svg {
    transition: transform 0.35s ease !important;
}

.faq-btn:hover svg {
    transform: translateX(1px) rotate(-45deg) !important;
}

/* =========================================
   BOTTOM CTA BUTTON - HEADER / HERO HOVER
   ========================================= */

.bottom-cta-btn {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* Left → Right background sweep */
.bottom-cta-btn::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background: var(--c-dark) !important;

    transform: translateX(-100%) !important;

    transition: transform 0.35s ease !important;

    z-index: -1 !important;
}

/* Hover sweep */
.bottom-cta-btn:hover::before {
    transform: translateX(0) !important;
}

/* Keep button content above animation */
.bottom-cta-btn>* {
    position: relative !important;
    z-index: 2 !important;
}

/* Arrow SVG */
.bottom-cta-btn svg {
    transition: transform 0.35s ease !important;
}

/* Arrow movement */
.bottom-cta-btn:hover svg {
    transform: translateX(1px) rotate(-4deg) !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .bottom-cta-btn:hover svg {
        transform: translateX(4px) rotate(-4deg) !important;
    }
}

.service-view-btn:focus {
    color: #fff !important;
}

/* =========================================
   SERVICE VIEW BUTTON
   HERO-STYLE HOVER EFFECT ONLY
   Existing size/layout untouched
   ========================================= */

.service-view-btn {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* Dark background sweep */
.service-view-btn::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background: var(--c-dark, #111) !important;

    transform: translateX(-101%) !important;

    transition: transform 0.35s ease !important;

    z-index: -1 !important;
}

/* Sweep left → right */
.service-view-btn:hover::before {
    transform: translateX(0) !important;
}

/* Keep text + icon above sweep */
.service-view-btn>* {
    position: relative !important;
    z-index: 2 !important;
}

/* Keep existing text color */
.service-view-btn:hover {
    color: var(--c-white, #fff) !important;
    background: transparent !important;
}

/* Existing icon style + hero-style movement */
.service-view-btn .service-view-icon {
    transition: transform 0.35s ease !important;
}

.service-view-btn:hover .service-view-icon {
    background: var(--c-white, #fff) !important;
    color: var(--c-dark, #111) !important;

    /* transform: translateX(5px) rotate(-45deg) !important; */
}

/* =========================================
   GLOBAL CTA ARROW HOVER
   ========================================= */

.global-cta-arrow {
    transition: transform 0.35s ease !important;
}

.hero-btn:hover .global-cta-arrow,
.cta-btn:hover .global-cta-arrow,
.bottom-cta-btn:hover .global-cta-arrow,
.faq-btn:hover .global-cta-arrow,
.service-view-btn:hover .global-cta-arrow {
    transform: translateX(0px) rotate(-45deg) !important;
}

.site-header a:active {
    color: #fff !important;
}

@media (max-width: 440px) {
    .faq-answer p {
        font-size: 14px;
    }

    .bottom-cta h2 {
        font-size: 24px;
        letter-spacing: -0.8%;
    }
}

.container .client-logos-header {
    margin: 32px 0;
}

.service-detail-data .service-features-block h2 {
    margin-top: 32px;
    padding-top: 40px;
}

/* ==========================================================
   CONCRETE COLOURS PAGE
   New, page-scoped selectors only — nothing here touches
   .page-hero or any shared/global component. Reuses existing
   root variables (--c-dark, --c-text-light, --c-border,
   --c-bg, --c-white) and the site's Manrope type system.
========================================================== */

.concrete-colours-page {
    background: var(--c-white);
    padding: 100px 0;
}

.concrete-colours-note {

    margin: 0 0 56px;
    color: #000;
    font-size: 24px;
    line-height: 1.7;
    font-style: italic;
}

/* ---------- Grid ---------- */
.concrete-colours-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.concrete-colour-card {

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.concrete-colour-swatch {
    width: 100%;
    aspect-ratio: 2 / 1;
}

.concrete-colour-body {
    padding: 24px 22px 28px;
    background: #fff !important;
}

.concrete-colour-body h3 {
    margin: 0 0 12px;
    color: var(--c-dark);
    font-family: Manrope, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-border);
}

.concrete-colour-body p {
    margin: 0;
    color: #212121;
    font-size: 16px;
    line-height: 1.6;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

/* ---------- ≤1200px : tablet landscape ---------- */
@media (max-width: 1200px) {
    .concrete-colours-page {
        padding: 80px 0;
    }

    .concrete-colours-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- ≤1024px : tablet portrait ---------- */
@media (max-width: 1024px) {
    .concrete-colours-note {
        margin-bottom: 44px;
    }
}

/* ---------- ≤880px : mobile landscape ---------- */
@media (max-width: 880px) {
    .concrete-colours-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}

/* ---------- ≤767px : mobile portrait ---------- */
@media (max-width: 767px) {
    .concrete-colours-page {
        padding: 50px 0;
    }

    .concrete-colours-note {
        margin-bottom: 30px;
        font-size: 16px;
    }

    .concrete-colour-body {
        padding: 18px 16px 22px;
    }

    .concrete-colour-body h3 {
        font-size: 15px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .concrete-colour-body p {
        font-size: 14px;
    }
}

/* ---------- ≤600px : small mobile ---------- */
@media (max-width: 600px) {
    .concrete-colours-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }
}

/* ---------- ≤480px : very small mobile ---------- */
@media (max-width: 480px) {
    .concrete-colours-page {
        padding: 40px 0;
    }

    .concrete-colours-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ---------- ≤375px : extra small mobile ---------- */
@media (max-width: 375px) {
    .concrete-colour-body {
        padding: 16px 14px 20px;
    }
}

.hastag-colors-concrete {
    color: #b92a1f;
}

/* ==========================================================
   PLANET CONCRETE — HOMEPAGE HERO LAPTOP FIX
   Scoped only to the homepage hero
========================================================== */

/* ---------- Large Laptop: 1201px - 1400px ---------- */
@media (min-width: 1201px) and (max-width: 1400px) {

    .home .hero-banner {
        min-height: 620px;
    }

    .home .hero-content {
        padding-top: 145px;
        padding-bottom: 75px;
    }

    .home .hero-content h1 {
        max-width: 650px;
        margin-bottom: 22px;
        font-size: clamp(54px, 5.2vw, 70px);
        line-height: 1.02;
        letter-spacing: -1.8px;
    }

    .home .hero-content p {
        max-width: 570px;
        margin-bottom: 34px;
        font-size: 17px;
        line-height: 1.55;
    }

    .home .hero-btn {
        padding: 11px 68px;
    }

    /* Dark overlay — keeps image unchanged */
    .home .hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(0, 0, 0, .58) 0%,
                rgba(0, 0, 0, .40) 42%,
                rgba(0, 0, 0, .32) 100%),
            linear-gradient(180deg,
                rgba(0, 0, 0, .38) 0%,
                rgba(0, 0, 0, .58) 100%);
    }
}


/* ---------- Laptop: 1025px - 1200px ---------- */
@media (min-width: 1025px) and (max-width: 1200px) {

    .home .hero-banner {
        min-height: 600px;
    }

    .home .hero-content {
        padding-top: 135px;
        padding-bottom: 70px;
    }

    .home .hero-content h1 {
        max-width: 590px;
        margin-bottom: 20px;
        font-size: clamp(48px, 5.4vw, 62px);
        line-height: 1.04;
        letter-spacing: -1.5px;
    }

    .home .hero-content p {
        max-width: 520px;
        margin-bottom: 30px;
        font-size: 16px;
        line-height: 1.55;
    }

    .home .hero-btn {
        padding: 10px 62px;
    }

    .home .hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(0, 0, 0, .62) 0%,
                rgba(0, 0, 0, .43) 48%,
                rgba(0, 0, 0, .30) 100%),
            linear-gradient(180deg,
                rgba(0, 0, 0, .38) 0%,
                rgba(0, 0, 0, .62) 100%);
    }
}


/* ---------- Keep Hero image stable ---------- */
.home .hero-bg img {
    object-position: center center;
}


/* ---------- Hero controls ---------- */
.home .hero-banner .swiper-pagination {
    bottom: 28px;
}

.home .hero-banner .swiper-button-prev,
.home .hero-banner .swiper-button-next {
    bottom: 25px;
    top: auto;
    z-index: 10;
}


/* ---------- Laptop control spacing ---------- */
@media (min-width: 1025px) and (max-width: 1400px) {

    .home .hero-banner .swiper-pagination {
        bottom: 28px;
    }

    .home .hero-banner .swiper-button-prev {
        right: 72px;
        left: auto;
    }

    .home .hero-banner .swiper-button-next {
        right: 20px;
        left: auto;
    }
}

.header-nav .header-menu-list .current-menu-item>a {
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
}

.site-header.is-sticky .container.header-inner {
    padding: 20px 15px;
}

/* ==========================================================
   PLANET CONCRETE — CONTACT REACH OUT
   2-column architectural layout
   ========================================================== */

.contact-reach-section {
    width: 100%;
    margin: 30px 0 100px;
    background: var(--c-bg);
}

.contact-reach-block {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    width: 100%;
    min-height: 680px;
}


/* ==========================================================
   IMAGE
   ========================================================== */

.contact-reach-block__image {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    background: var(--c-bg);
}

.contact-reach-block__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.contact-reach-block__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.04);
}


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

.contact-reach-block__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    padding: 80px clamp(20px, 4vw, 50px);

    background: #fff;
    color: var(--c-black);
}


/* ==========================================================
   TITLE
   ========================================================== */

.contact-reach-block__title {
    margin: 0 0 28px;

    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: clamp(42px, 4vw, 58px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -1.5px;
}


/* ==========================================================
   DIVIDER
   ========================================================== */

.contact-reach-block__line {
    display: block;

    width: 100%;
    height: 1px;

    margin: 0 0 34px;

    background: var(--c-border);
}


/* ==========================================================
   DETAILS
   ========================================================== */

.contact-reach-block__details {
    display: flex;
    flex-direction: column;
    gap: 28px;
}


/* ==========================================================
   ENQUIRY ITEM
   ========================================================== */

.contact-reach-block__item {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 12px 14px;
    margin: -12px -14px;

    border-radius: 2px;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}


/* Subtle background when hovering the enquiry */

.contact-reach-block__item:hover {
    background: var(--c-bg);
}


/* Small accent line */

.contact-reach-block__item::before {
    content: "";

    position: absolute;
    top: 12px;
    left: 0;

    width: 2px;
    height: 0;

    background: var(--c-black);

    transition: height 0.35s ease;
}

.contact-reach-block__item:hover::before {
    height: calc(100% - 24px);
}


/* ==========================================================
   ENQUIRY TITLE
   ========================================================== */

.contact-reach-block__item-title {
    display: block;

    color: var(--c-black);
    font-family: Manrope, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.contact-reach-block__item:hover .contact-reach-block__item-title {
    color: var(--c-black);
    transform: translateX(4px);
}


/* ==========================================================
   EMAIL / PHONE
   ========================================================== */

.contact-reach-block__item-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 30px;
}


/* Individual link */

.contact-reach-block__link {
    position: relative;

    display: inline-block;

    color: var(--c-text-light);
    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* When hovering the complete enquiry */

.contact-reach-block__item:hover .contact-reach-block__link {
    color: var(--c-black);
    transform: translateX(4px);
}


/* Individual link hover */

.contact-reach-block__link:hover {
    color: var(--c-black) !important;
    transform: translateX(6px);
}


/* Animated underline */

.contact-reach-block__link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -2px;

    width: 0;
    height: 1px;

    background: var(--c-black);

    transition: width 0.3s ease;
}

.contact-reach-block__link:hover::after {
    width: 100%;
}


/* ==========================================================
   ADDRESS
   ========================================================== */

.contact-reach-block__address {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 12px 14px;
    margin: -12px -14px;

    border-radius: 2px;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}


/* Address hover */

.contact-reach-block__address:hover {
    background: var(--c-bg);
}


/* Address accent line */

.contact-reach-block__address::before {
    content: "";

    position: absolute;
    top: 12px;
    left: 0;

    width: 2px;
    height: 0;

    background: var(--c-black);

    transition: height 0.35s ease;
}

.contact-reach-block__address:hover::before {
    height: calc(100% - 24px);
}


/* Address text */

.contact-reach-block__address-text {
    margin: 0;

    color: var(--c-text-light);
    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* Address hover text */

.contact-reach-block__address:hover .contact-reach-block__address-text {
    color: var(--c-black);
    transform: translateX(4px);
}


/* ==========================================================
   FINAL DIVIDER
   ========================================================== */

.contact-reach-block__details > .contact-reach-block__line:last-child {
    margin-top: 4px;
    margin-bottom: 0;
}


/* ==========================================================
   LARGE LAPTOP
   ========================================================== */

@media (max-width: 1400px) {

    .contact-reach-block,
    .contact-reach-block__image {
        min-height: 620px;
    }

    .contact-reach-block__content {
        padding: 70px clamp(36px, 5vw, 80px);
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991px) {

    .contact-reach-section {
        margin: 30px 0 80px;
    }

    .contact-reach-block {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .contact-reach-block__image {
        min-height: 500px;
    }

    .contact-reach-block__content {
        padding: 64px 40px;
    }

    .contact-reach-block__title {
        font-size: 48px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .contact-reach-section {
        margin: 20px 0 60px;
    }

    .contact-reach-block__image {
        min-height: 360px;
    }

    .contact-reach-block__content {
        padding: 52px 24px 56px;
    }

    .contact-reach-block__title {
        margin-bottom: 24px;

        font-size: 38px;
        letter-spacing: -1px;
    }

    .contact-reach-block__line {
        margin-bottom: 28px;
    }

    .contact-reach-block__details {
        gap: 25px;
    }

    .contact-reach-block__item-title {
        font-size: 17px;
    }

    .contact-reach-block__item-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .contact-reach-block__item,
    .contact-reach-block__address {
        padding: 10px 12px;
        margin: -10px -12px;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .contact-reach-section {
        margin: 15px 0 50px;
    }

    .contact-reach-block__image {
        min-height: 300px;
    }

    .contact-reach-block__content {
        padding: 44px 20px 48px;
    }

    .contact-reach-block__title {
        font-size: 34px;
    }

    .contact-reach-block__details {
        gap: 22px;
    }

    .contact-reach-block__item-title {
        font-size: 16px;
    }

    .contact-reach-block__link,
    .contact-reach-block__address-text {
        font-size: 14px;
    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .contact-reach-block__item,
    .contact-reach-block__address,
    .contact-reach-block__item-title,
    .contact-reach-block__link,
    .contact-reach-block__address-text,
    .contact-reach-block__item::before,
    .contact-reach-block__address::before,
    .contact-reach-block__link::after {
        transition: none;
    }

}