.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.img-constrained { object-fit: cover !important; width: 100% !important; border-radius: inherit; }
.img-wrapper-16-9 { aspect-ratio: 16/9; overflow: hidden; position: relative; }
.img-wrapper-4-3 { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.text-break-word { word-break: break-word; overflow-wrap: break-word; }
.truncate-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; border-radius: inherit; }

/* Global Text Clamp utility */
.text-clamp-responsive {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3; /* Mobile: 3 lines */
    line-height: 1.6;
}

/* Ensure these specific sections have WHITE text */
.section-about .text-clamp-responsive,
.section-services .text-clamp-responsive,
.page-services .text-clamp-responsive,
.services-items-con .text-clamp-responsive,
.section-locations .text-clamp-responsive,
.section-feedback .text-clamp-responsive,
.section-founders .text-clamp-responsive,
.service-item .text-clamp-responsive,
.fx-services-card-st .text-clamp-responsive {
    color: #ffffff !important;
}

/* Force inner tags to be inline to prevent breaking the webkit-box clamp layout */
.text-clamp-responsive * {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
}

@media (min-width: 768px) {
    .text-clamp-responsive {
        -webkit-line-clamp: 4; /* Desktop: 4 lines */
    }
}

/* Special Case for About Us section as requested: 5 lines mobile, 10 lines desktop */
.text-clamp-about {
    -webkit-line-clamp: 5 !important;
}
@media (min-width: 768px) {
    .text-clamp-about {
        -webkit-line-clamp: 10 !important;
    }
}


/* CARDS EQUAL HEIGHT FIX */
/* Flexbox parent row needed stretch alignment to make columns equal height */
.fx-services-cards, .services-items-con {
    align-items: stretch !important;
    display: flex !important;
}

/* Make actual cards Flex Columns to force button to bottom */
.service-item, .fx-services-card-st {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: flex-start !important;
}

/* Description takes up all empty space to push button down */
.service-item .text-clamp-responsive, .fx-services-card-st .text-clamp-responsive {
    flex-grow: 1 !important;
    margin-bottom: 20px !important;
    min-height: calc(3 * 1.6em); /* Mobile */
}
@media (min-width: 768px) {
    .service-item .text-clamp-responsive, .fx-services-card-st .text-clamp-responsive {
        min-height: calc(4 * 1.6em); /* Desktop */
    }
}

/* Push the link/button strictly to the bottom of the card */
.service-item > a, .fx-services-card-st > a {
    margin-top: auto !important;
    align-self: flex-start !important;
}
/* ---- HERO SECTION SAFE IMAGE HANDLING ---- */
/* Controls the safe boundary of the section to prevent it from touching the navbar */
.hero-safe-container {
    width: 100%;
    /* Mobile safe height */
    height: auto;
    max-height: 350px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 10px;
}

@media (min-width: 768px) {
    .hero-safe-container {
        max-height: 500px;
    }
}

.hero-safe-img {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

/* Fix mobile absolute navbar overlapping the entire section */
@media (max-width: 1000px) {
    .section-header {
        padding-top: 150px !important;
    }
}