/* ============================================
   Bodex Widget - Styles & Animations
   ============================================ */

/* ===========================================
   Base Widget Wrapper
   =========================================== */
.bodex-brush-wrapper {
    position: relative;
    display: block;
    overflow: visible;
    z-index: 1;
    line-height: 0;
}

/* ===========================================
   Brush Image (IMG version)
   =========================================== */
/* IMG brush: flow-positioned so it defines wrapper height */
.bodex-brush-image {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.4s ease;
}

/* Ghost: invisible but still takes space — defines wrapper height in overlay/fill modes */
.bodex-brush-image--ghost {
    opacity: 0;
    pointer-events: none;
}

/* ===========================================
   Brush Layer (absolute: color or photo fill)
   Sits exactly on top of the ghost IMG
   =========================================== */
.bodex-brush-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.4s ease,
        background-color 0.4s ease;
}

/* Color overlay on top of filled image */
.bodex-brush-fill-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transition: background-color 0.4s ease;
}

/* Hover effects */
.bodex-brush-wrapper:hover .bodex-brush-image:not(.bodex-brush-image--ghost) {
    transform: scale(1.03);
}

.bodex-brush-wrapper:hover .bodex-brush-layer {
    transform: scale(1.03);
}

/* ===========================================
   Content Overlay
   Sits absolutely on top of whichever brush element is rendered
   =========================================== */
.bodex-brush-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 40px;
}

/* ===========================================
   Title
   =========================================== */
.bodex-brush-title {
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px 0;
    padding: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* ===========================================
   Description
   =========================================== */
.bodex-brush-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 20px 0;
    padding: 0;
    max-width: 70%;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: color 0.3s ease;
}

/* Centered alignment fix */
.bodex-brush-content[style*="text-align: center"] .bodex-brush-description,
.bodex-brush-content .bodex-brush-description {
    margin-left: auto;
    margin-right: auto;
}

/* ===========================================
   Button
   =========================================== */
.bodex-brush-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

.bodex-brush-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.15),
            transparent);
    transition: left 0.5s ease;
}

.bodex-brush-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.bodex-brush-button:hover::before {
    left: 100%;
}

.bodex-brush-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ===========================================
   Hover Effect on Wrapper
   =========================================== */
.bodex-brush-wrapper:hover .bodex-brush-image {
    transform: scale(1.03);
}

.bodex-brush-wrapper:hover .bodex-brush-image--colored {
    transform: scale(1.03);
}

/* ===========================================
   SCROLL REVEAL ANIMATIONS - Before State
   =========================================== */

/* Common before-animation state */
.bodex-before-anim {
    will-change: transform, opacity, clip-path;
}

/* Fade In */
.bodex-before-anim.bodex-anim-fadeIn {
    opacity: 0;
}

/* Fade In Up */
.bodex-before-anim.bodex-anim-fadeInUp {
    opacity: 0;
    transform: translateY(60px);
}

/* Fade In Down */
.bodex-before-anim.bodex-anim-fadeInDown {
    opacity: 0;
    transform: translateY(-60px);
}

/* Fade In Left */
.bodex-before-anim.bodex-anim-fadeInLeft {
    opacity: 0;
    transform: translateX(-60px);
}

/* Fade In Right */
.bodex-before-anim.bodex-anim-fadeInRight {
    opacity: 0;
    transform: translateX(60px);
}

/* Zoom In */
.bodex-before-anim.bodex-anim-zoomIn {
    opacity: 0;
    transform: scale(0.7);
}

/* Brush Reveal - clip-path based */
.bodex-before-anim.bodex-anim-brushReveal {
    clip-path: inset(0 100% 0 0);
}

/* Slide Up */
.bodex-before-anim.bodex-anim-slideUp {
    opacity: 0;
    transform: translateY(100px);
}

/* ===========================================
   SCROLL REVEAL ANIMATIONS - After State
   =========================================== */

/* Fade In */
.bodex-animated.bodex-anim-fadeIn {
    animation: bodexFadeIn var(--bodex-anim-duration, 0.8s) var(--bodex-anim-delay, 0s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Up */
.bodex-animated.bodex-anim-fadeInUp {
    animation: bodexFadeInUp var(--bodex-anim-duration, 0.8s) var(--bodex-anim-delay, 0s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Down */
.bodex-animated.bodex-anim-fadeInDown {
    animation: bodexFadeInDown var(--bodex-anim-duration, 0.8s) var(--bodex-anim-delay, 0s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Left */
.bodex-animated.bodex-anim-fadeInLeft {
    animation: bodexFadeInLeft var(--bodex-anim-duration, 0.8s) var(--bodex-anim-delay, 0s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Right */
.bodex-animated.bodex-anim-fadeInRight {
    animation: bodexFadeInRight var(--bodex-anim-duration, 0.8s) var(--bodex-anim-delay, 0s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Zoom In */
.bodex-animated.bodex-anim-zoomIn {
    animation: bodexZoomIn var(--bodex-anim-duration, 0.8s) var(--bodex-anim-delay, 0s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Brush Reveal */
.bodex-animated.bodex-anim-brushReveal {
    animation: bodexBrushReveal var(--bodex-anim-duration, 0.8s) var(--bodex-anim-delay, 0s) cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Slide Up */
.bodex-animated.bodex-anim-slideUp {
    animation: bodexSlideUp var(--bodex-anim-duration, 0.8s) var(--bodex-anim-delay, 0s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===========================================
   KEYFRAMES
   =========================================== */

@keyframes bodexFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bodexFadeInUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bodexFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bodexFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bodexFadeInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bodexZoomIn {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bodexBrushReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes bodexSlideUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================
   Responsive Adjustments
   =========================================== */

@media screen and (max-width: 1024px) {
    .bodex-brush-title {
        font-size: 1.6rem;
    }

    .bodex-brush-description {
        font-size: 0.95rem;
        max-width: 80%;
    }
}

@media screen and (max-width: 768px) {
    .bodex-brush-wrapper {
        min-height: 250px !important;
    }

    .bodex-brush-title {
        font-size: 1.3rem;
    }

    .bodex-brush-description {
        font-size: 0.9rem;
        max-width: 85%;
    }

    .bodex-brush-button {
        padding: 10px 24px;
        font-size: 0.85rem;
    }

    .bodex-brush-content {
        padding: 20px !important;
    }
}

@media screen and (max-width: 480px) {
    .bodex-brush-wrapper {
        min-height: 200px !important;
    }

    .bodex-brush-title {
        font-size: 1.1rem;
    }

    .bodex-brush-description {
        font-size: 0.85rem;
        max-width: 90%;
    }

    .bodex-brush-button {
        padding: 8px 20px;
        font-size: 0.8rem;
    }
}

/* ===========================================
   Elementor Editor Specific
   =========================================== */
.elementor-editor-active .bodex-before-anim {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
}

/* ============================================
   Bodex Contact Info Widget
   ============================================ */

/* --- Material Symbols font fix --- */
.bodex-contact-card .material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Card Container --- */
.bodex-contact-card {
    position: relative;
    background-color: #f9f9ff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
}

.bodex-contact-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

/* Decorative corner blob */
.bodex-contact-card__deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    background-color: #e2e5ed;
    border-radius: 0 0 0 24px;
    opacity: 1;
    pointer-events: none;
    transition: transform 0.5s ease;
}

.bodex-contact-card:hover .bodex-contact-card__deco {
    transform: scale(1.05);
}

/* --- Inner wrapper (above deco) --- */
.bodex-contact-card__inner {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* --- Title --- */
.bodex-contact-card__title {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: #001b44;
    margin: 0 0 32px 0;
    padding: 0;
}

.bodex-contact-card__title-line {
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 65px;
    height: 3px;
    background-color: #6c35d7;
    border-radius: 3px;
}

/* --- Items List --- */
.bodex-contact-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
    flex-grow: 1 !important;
}

/* --- Single Item --- */
.bodex-contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

/* Icon squircle */
.bodex-contact-item__icon {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background-color: #e7eeff;
    color: #6c35d7;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.3s ease,
        transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bodex-contact-item__icon .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
}

.bodex-contact-item:hover .bodex-contact-item__icon {
    background-color: #6c35d7;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
}

/* Text content */
.bodex-contact-item__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bodex-contact-item__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #44474f;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.bodex-contact-item__value {
    font-size: 16px;
    font-weight: 500;
    color: #111c2c;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    text-decoration: none;
    word-break: break-word;
    transition: color 0.25s ease;
}

a.bodex-contact-item__value:hover {
    color: #6c35d7;
}

/* --- Social Media Strip --- */
.bodex-contact-social {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #c5c6d0;
}

.bodex-contact-social__link {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background-color: #e7eeff;
    color: #44474f;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none;
    transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.3s ease,
        transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bodex-contact-social__link:hover {
    background-color: #001b44;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
}

.bodex-contact-social__svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    fill: currentColor;
    display: block;
    flex-shrink: 0;
    transition: fill 0.3s ease;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .bodex-contact-card {
        padding: 24px 20px;
    }

    .bodex-contact-card__title {
        font-size: 1.25rem;
        margin-bottom: 24px;
    }

    .bodex-contact-items {
        gap: 20px;
    }

    .bodex-contact-item__value {
        font-size: 15px;
    }
}

@media screen and (max-width: 480px) {
    .bodex-contact-card {
        padding: 20px 16px;
    }

    .bodex-contact-card__title {
        font-size: 1.1rem;
    }

    .bodex-contact-item__icon {
        width: 36px;
        height: 36px;
    }

    .bodex-contact-item__icon .material-symbols-outlined {
        font-size: 18px;
    }

    .bodex-contact-item__value {
        font-size: 14px;
    }
}

/* ============================================
   Bodex Contact Form Widget (CF7 Integrated)
   ============================================ */

.bodex-form-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100%;
    transition: box-shadow 0.3s ease;
}

.bodex-form-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* Columns */
.bodex-form-card__col {
    width: 50%;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
}

.bodex-form-card__col--left {
    background-color: #f9f9ff;
    padding: 32px;
    border-right: 1px solid rgba(197, 198, 208, 0.3);
    position: relative;
}

.bodex-form-card__col--right {
    background-color: #ffffff;
    padding: 32px;
    position: relative;
}

.bodex-form-card__col-inner {
    position: relative;
    z-index: 10;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100%;
}

/* Decorative corner blobs */
.bodex-form-card__deco {
    position: absolute;
    width: 128px;
    height: 128px;
    background-color: #001b44;
    opacity: 0.05;
    pointer-events: none;
    transition: transform 0.5s ease;
    z-index: 1;
}

.bodex-form-card__deco--left {
    top: 0;
    left: 0;
    border-radius: 0 0 128px 0;
    margin-left: -64px;
    margin-top: -64px;
}

.bodex-form-card__deco--right {
    top: 0;
    right: 0;
    border-radius: 0 0 0 128px;
    margin-right: -64px;
    margin-top: -64px;
}

.bodex-form-card:hover .bodex-form-card__deco {
    transform: scale(1.3);
}

/* Titles */
.bodex-form-card__title {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: #001b44;
    margin: 0 0 32px 0;
    padding: 0;
}

.bodex-form-card__title-line {
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 65px;
    height: 3px;
    background-color: #6c35d7;
    border-radius: 3px;
}

/* Items List */
.bodex-form-card__items {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
    flex-grow: 1 !important;
}

/* Single Item */
.bodex-form-card__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

/* Icon squircle */
.bodex-form-card__item-icon {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background-color: #e7eeff;
    color: #6c35d7;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.3s ease,
        transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bodex-form-card__item-icon .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
}

.bodex-form-card__item:hover .bodex-form-card__item-icon {
    background-color: #6c35d7;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
}

/* Item Content */
.bodex-form-card__item-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
    min-width: 0;
}

.bodex-form-card__item-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #44474f;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.bodex-form-card__item-value {
    font-size: 16px;
    font-weight: 500;
    color: #111c2c;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    text-decoration: none;
    word-break: break-word;
    transition: color 0.25s ease;
}

a.bodex-form-card__item-value:hover {
    color: #6c35d7;
}

/* Social media list */
.bodex-form-card__social {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(197, 198, 208, 0.3);
}

.bodex-form-card__social-link {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background-color: #e7eeff;
    color: #44474f;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none;
    transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.3s ease,
        transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bodex-form-card__social-link:hover {
    background-color: #001b44;
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
}

.bodex-form-card__social-svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    fill: currentColor;
    display: block;
    flex-shrink: 0;
    transition: fill 0.3s ease;
}

/* Contact Form 7 Custom Grid and Styles */
.bodex-cf7-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    width: 100%;
}

@media screen and (max-width: 600px) {
    .bodex-cf7-grid {
        grid-template-columns: 1fr;
    }
}

.bodex-cf7-field {
    margin-bottom: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.bodex-cf7-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #44474f;
    margin-bottom: 8px;
    line-height: 1;
}

.bodex-form-card .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* CF7 Inputs & Textareas */
.bodex-form-card input.wpcf7-text,
.bodex-form-card textarea.wpcf7-textarea {
    width: 100% !important;
    box-sizing: border-box;
    background-color: #f9f9ff;
    border: 1px solid rgba(197, 198, 208, 0.5);
    border-radius: 12px;
    padding: 12px 16px !important;
    font-size: 16px;
    color: #111c2c;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
}

.bodex-form-card input.wpcf7-text:focus,
.bodex-form-card textarea.wpcf7-textarea:focus {
    border-color: #6c35d7;
    box-shadow: 0 0 0 1px #6c35d7;
}

.bodex-form-card textarea.wpcf7-textarea {
    height: 120px;
    resize: none;
}

/* CF7 Submit Button */
.bodex-form-card input.wpcf7-submit {
    width: 100% !important;
    background-color: #001b44 !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 16px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.25s ease;
    margin-top: 16px;
    font-family: inherit;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.bodex-form-card input.wpcf7-submit:hover {
    background-color: #6c35d7 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.bodex-form-card input.wpcf7-submit:active {
    transform: translateY(0);
}

/* Responsive columns */
@media screen and (max-width: 900px) {
    .bodex-form-card {
        flex-direction: column !important;
    }

    .bodex-form-card__col {
        width: 100%;
    }

    .bodex-form-card__col--left {
        border-right: none;
        border-bottom: 1px solid rgba(197, 198, 208, 0.3);
    }
}

@media screen and (max-width: 480px) {

    .bodex-form-card__col--left,
    .bodex-form-card__col--right {
        padding: 24px 20px;
    }

    .bodex-form-card__title {
        font-size: 1.25rem;
    }
}

/* ============================================
   Bodex Popup Modal Widget (CF7 Integrated)
   ============================================ */

/* Trigger Button Container */
.bodex-modal-trigger-wrap {
    width: 100%;
}

.bodex-modal-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #6c35d7;
    color: #ffffff;
    border: none;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(108, 53, 215, 0.25);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
    font-family: inherit;
}

.bodex-modal-trigger:hover {
    background-color: #8653f1;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 53, 215, 0.35);
}

.bodex-modal-trigger:active {
    transform: translateY(0);
}

.bodex-modal-trigger span.material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
}

/* Modal Popup Core */
.bodex-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999 !important;
    box-sizing: border-box;
    padding: 16px;
}

/* Modal Active State */
.bodex-modal--active {
    display: flex !important;
}

/* Modal Backdrop */
.bodex-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(17, 28, 44, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 40;
}

/* Modal Container Window */
.bodex-modal-container {
    position: relative;
    z-index: 50;
    width: 100%;
    max-width: 640px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 20, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bodexFadeInUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Modal Header Decoration Banner */
.bodex-modal-header {
    height: 112px;
    background-color: #001b44;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.bodex-modal-header::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: radial-gradient(circle at 100% 0%, #ffffff 0%, transparent 50%);
}

/* Close Button */
.bodex-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.25s ease, color 0.25s ease !important;
    z-index: 200 !important;
    box-shadow: none !important;
}

.bodex-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.bodex-modal-close span {
    font-size: 20px;
}

/* Floating Icon Box */
.bodex-modal-icon-box {
    position: absolute;
    bottom: -32px;
    background-color: #ffffff;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 4px solid #ffffff;
    z-index: 10;
}

.bodex-modal-icon-box span {
    font-size: 32px;
    color: #6c35d7;
    font-variation-settings: 'FILL' 1;
}

/* Modal Body Content */
.bodex-modal-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-sizing: border-box;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    margin-top: 16px;
}

.bodex-modal-titles {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bodex-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #111c2c;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.bodex-modal-desc {
    font-size: 16px;
    color: #44474f;
    margin: 0 auto;
    padding: 0;
    max-width: 440px;
    line-height: 1.6;
}

/* Form Layout (Modal Grid) */
.bodex-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    width: 100%;
}

@media screen and (max-width: 600px) {
    .bodex-modal-grid {
        grid-template-columns: 1fr;
    }
}

.bodex-modal-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
}

.bodex-modal-field label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #44474f;
    transition: color 0.25s ease;
    line-height: 1;
}

/* Inputs with Icons */
.bodex-input-with-icon {
    position: relative;
    width: 100%;
}

.bodex-input-with-icon .icon-inside {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #c5c6d0;
    font-size: 20px;
    pointer-events: none;
    transition: color 0.25s ease;
}

/* Style CF7 Input Inside Modal */
.bodex-modal input.wpcf7-text,
.bodex-modal input.wpcf7-tel {
    width: 100% !important;
    box-sizing: border-box;
    background-color: #f9f9ff;
    border: 1px solid #c5c6d0;
    border-radius: 8px;
    padding: 12px 12px 12px 40px !important;
    font-size: 16px;
    color: #111c2c;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
}

.bodex-modal input.wpcf7-text:focus,
.bodex-modal input.wpcf7-tel:focus {
    border-color: #6c35d7;
    box-shadow: 0 0 0 1px #6c35d7;
}

/* Service Selection Chips (Contact Form 7 Radio style wrapper) */
.bodex-service-chips .wpcf7-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 -6px !important;
}

.bodex-service-chips .wpcf7-radio br {
    display: none !important;
}

.bodex-service-chips .wpcf7-list-item {
    margin: 6px !important;
    display: inline-flex !important;
}

.bodex-service-chips label {
    cursor: pointer !important;
    position: relative;
    display: block;
    margin: 0 !important;
}

.bodex-service-chips input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bodex-service-chips .wpcf7-list-item-label {
    display: block;
    padding: 10px 18px;
    border-radius: 50px;
    border: 1px solid #c5c6d0;
    background-color: #f9f9ff;
    color: #44474f;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.25s ease;
    user-select: none;
}

.bodex-service-chips .wpcf7-list-item-label:hover {
    background-color: #dee8ff;
}

/* Active state for Radio Chips */
.bodex-service-chips input[type="radio"]:checked+.wpcf7-list-item-label {
    background-color: #001b44;
    color: #ffffff;
    border-color: #001b44;
}

/* Submit Section */
.bodex-modal-submit-wrap {
    margin-top: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bodex-modal input.wpcf7-submit {
    width: 100% !important;
    background-color: #6c35d7 !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 16px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 14px rgba(108, 53, 215, 0.25);
    font-family: inherit;
}

.bodex-modal input.wpcf7-submit:hover {
    background-color: #8653f1 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 53, 215, 0.35);
}

.bodex-modal input.wpcf7-submit:active {
    transform: translateY(0);
}

/* Secure info footer text */
.bodex-modal-secure-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #75777f;
    margin: 4px 0 0 0;
}

.bodex-modal-secure-text span {
    font-size: 16px;
}

/* Live Preview Box Helper (for Elementor Editor Mode) */
.bodex-modal-preview-box {
    margin-top: 16px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ============================================
   Bodex 7/24 Emergency Support Grid Widget
   ============================================ */

.bodex-emergency-section {
    position: relative;
    padding: 60px 24px;
    background-color: rgba(255, 218, 214, 0.2);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.bodex-emergency-section__deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 384px;
    height: 384px;
    background-color: #ffdad6;
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(80px);
    -webkit-filter: blur(80px);
    pointer-events: none;
    z-index: 1;
    margin-right: -80px;
    margin-top: -80px;
}

.bodex-emergency-section-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* Section Header */
.bodex-emergency-section-header {
    text-align: center;
    margin-bottom: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.bodex-emergency-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #ffdad6;
    color: #93000a;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bodex-emergency-badge span {
    font-size: 16px;
    font-variation-settings: 'FILL' 1;
}

.bodex-emergency-section-title {
    font-size: 32px;
    font-weight: 800;
    color: #00020a;
    margin: 0;
    padding: 0;
    line-height: 1.25;
}

@media screen and (min-width: 768px) {
    .bodex-emergency-section-title {
        font-size: 48px;
    }
}

.bodex-emergency-section-desc {
    font-size: 18px;
    color: #44474f;
    margin: 0 auto;
    padding: 0;
    max-width: 650px;
    line-height: 1.6;
}

/* Cards Grid */
.bodex-emergency-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

@media screen and (max-width: 900px) {
    .bodex-emergency-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .bodex-emergency-grid {
        grid-template-columns: 1fr;
    }
}

/* Emergency Card */
.bodex-emergency-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-top: 4px solid #ba1a1a;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bodex-emergency-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* Card Floating Icon */
.bodex-emergency-card-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background-color: #ffdad6;
    color: #93000a;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 24px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.bodex-emergency-card-icon span {
    font-size: 30px;
}

.bodex-emergency-card:hover .bodex-emergency-card-icon {
    transform: scale(1.1);
}

.bodex-emergency-card-title {
    font-size: 24px;
    font-weight: 600;
    color: #00020a;
    margin: 0 0 16px 0;
    padding: 0;
    line-height: 1.4;
}

.bodex-emergency-card-desc {
    font-size: 16px;
    color: #44474f;
    line-height: 1.6;
    margin: 0 0 32px 0;
    padding: 0;
    flex-grow: 1;
}

/* Call Button */
.bodex-emergency-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #ba1a1a;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    border: none;
}

.bodex-emergency-card-btn:hover {
    background-color: #93000a;
    color: #ffffff;
}

.bodex-emergency-card-btn span {
    font-size: 20px;
}


/* ============================================
   Bodex Emergency Header Badge Button Widget
   ============================================ */

.bodex-emergency-badge-wrapper {
    display: inline-block;
}

.bodex-emergency-badge-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: rgba(186, 26, 26, 0.08);
    border: 1px solid rgba(186, 26, 26, 0.2);
    border-radius: 30px !important;
    padding: 8px 16px !important;
    color: #ba1a1a;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}

.bodex-emergency-badge-btn:hover {
    background-color: #ba1a1a;
    color: #ffffff;
    border-color: #ba1a1a;
}

.bodex-emergency-badge-btn span.material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}

/* Glowing Pulse Red Dot Indicator */
.bodex-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #ba1a1a;
    border-radius: 50% !important;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.bodex-pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #ba1a1a;
    animation: bodexPulse 1.5s infinite ease-out;
    transition: border-color 0.3s ease;
}

@keyframes bodexPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* ============================================
   Bodex About Widget Styles
   ============================================ */
.bodex-about-widget-wrapper {
    /* Set default CSS variables on wrapper */
    --bodex-about-brand-accent: #9b5de5;
    --bodex-about-primary-dark: #001b44;
    --bodex-about-on-background: #111c2c;
    --bodex-about-on-surface-variant: #44474f;
    --bodex-about-bg-surface: #f9f9ff;
    --bodex-about-surface-container: #e7eeff;
    --bodex-about-surface-lowest: #ffffff;

    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-about-on-background);

    /* Full-width breakout to stretch edge-to-edge on all screens */
    width: 100vw;
    position: relative;
    left: calc(-50vw + 50%);
    box-sizing: border-box;
}

/* Common Container */
.bodex-about-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
    width: 100%;
}

.bodex-about-badge {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-about-brand-accent);
    display: inline-block;
    margin-bottom: 16px;
}

.bodex-about-section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bodex-about-primary-dark);
    margin-top: 0;
    margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
    .bodex-about-section-title {
        font-size: 48px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        font-weight: 800;
    }
}

.bodex-about-body-text {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--bodex-about-on-surface-variant);
}

/* Centered Header Helper */
.bodex-about-section-header--centered {
    text-align: center;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 64px;
}

.bodex-about-section-header--centered .bodex-about-badge {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

.bodex-about-section-header--centered .bodex-about-section-title {
    text-align: center;
}

.bodex-about-section-header--centered .bodex-about-body-text {
    text-align: center;
    margin-top: 16px;
}

/* SECTION 1: HERO */
.bodex-about-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bodex-about-primary-dark);
    padding: 60px 0;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .bodex-about-hero {
        padding: 80px 0;
    }
}

.bodex-about-hero__bg-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
}

.bodex-about-hero__bg-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 0.6;
}

.bodex-about-hero__overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(0, 27, 68, 0.9) 0%, rgba(0, 27, 68, 0.7) 50%, rgba(155, 93, 229, 0.4) 100%) !important;
    mix-blend-mode: multiply !important;
}

.bodex-about-hero__container {
    position: relative;
    z-index: 10;
}

.bodex-about-hero__content {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media screen and (min-width: 768px) {
    .bodex-about-hero__content {
        text-align: left;
        align-items: flex-start;
        margin-left: 0;
        max-width: 66.666%;
    }
}

.bodex-about-hero__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
    .bodex-about-hero__title {
        font-size: 48px;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }
}

.bodex-about-hero__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    color: #dee8ff;
    margin: 0;
}

/* SECTION 2: HISTORY & VISION */
.bodex-about-history {
    padding: 64px 0;
    background-color: var(--bodex-about-bg-surface);
}

@media screen and (min-width: 768px) {
    .bodex-about-history {
        padding: 120px 0;
    }
}

.bodex-about-history__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media screen and (min-width: 768px) {
    .bodex-about-history__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.bodex-about-history__col-text {
    order: 2;
}

@media screen and (min-width: 768px) {
    .bodex-about-history__col-text {
        order: 1;
        padding-right: 48px;
    }
}

.bodex-about-history__desc-p1 {
    margin-bottom: 24px;
}

.bodex-about-history__desc-p2 {
    margin-bottom: 32px;
}

.bodex-about-vision-box {
    background-color: var(--bodex-about-surface-container);
    padding: 24px;
    border-radius: 4px;
    border-left: 4px solid var(--bodex-about-brand-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: start;
    gap: 16px;
}

.bodex-about-vision-box__icon {
    color: var(--bodex-about-brand-accent);
    font-size: 32px;
    flex-shrink: 0;
}

.bodex-about-vision-box__content {
    display: flex;
    flex-direction: column;
}

.bodex-about-vision-box__title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--bodex-about-primary-dark);
    margin-top: 0;
    margin-bottom: 8px;
}

.bodex-about-vision-box__text {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bodex-about-on-surface-variant);
    margin: 0;
}

.bodex-about-history__col-image {
    order: 1;
}

@media screen and (min-width: 768px) {
    .bodex-about-history__col-image {
        order: 2;
    }
}

.bodex-about-history__img-container {
    position: relative;
    padding-bottom: 0;
}

.bodex-about-history__img-wrap {
    position: relative;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    z-index: 2;
}

@media screen and (min-width: 768px) {
    .bodex-about-history__img-wrap {
        height: 600px;
    }
}

.bodex-about-history__img-wrap img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 8px;
}

.bodex-about-history__img-accent {
    position: absolute;
    bottom: -24px;
    left: -24px;
    width: 128px;
    height: 128px;
    background-color: var(--bodex-about-brand-accent);
    border-radius: 8px;
    z-index: 1;
    display: none;
}

@media screen and (min-width: 768px) {
    .bodex-about-history__img-accent {
        display: block;
    }
}

/* SECTION 3: SERVICES */
.bodex-about-services {
    padding: 64px 0;
    background-color: #f0f3ff;
    /* surface-container-low */
    border-top: 1px solid #dee8ff;
    /* surface-container-high */
}

@media screen and (min-width: 768px) {
    .bodex-about-services {
        padding: 120px 0;
    }
}

.bodex-about-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media screen and (min-width: 600px) {
    .bodex-about-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .bodex-about-services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.bodex-about-service-card {
    background-color: var(--bodex-about-surface-lowest);
    border-radius: 8px;
    border: 1px solid var(--bodex-about-surface-container);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bodex-about-service-card:hover {
    border-color: var(--bodex-about-brand-accent);
    box-shadow: 0 12px 30px rgba(155, 93, 229, 0.15);
    transform: translateY(-4px);
}

.bodex-about-service-card__img-wrap {
    height: 192px;
    overflow: hidden;
    width: 100%;
}

.bodex-about-service-card__img-wrap img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transition: transform 0.5s ease;
}

.bodex-about-service-card:hover .bodex-about-service-card__img-wrap img {
    transform: scale(1.1);
}

.bodex-about-service-card__body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bodex-about-service-card__icon-box {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background-color: var(--bodex-about-surface-container);
    color: var(--bodex-about-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.bodex-about-service-card:hover .bodex-about-service-card__icon-box {
    background-color: var(--bodex-about-brand-accent);
    color: #ffffff;
}

.bodex-about-service-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--bodex-about-primary-dark);
    margin-top: 0;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.bodex-about-service-card:hover .bodex-about-service-card__title {
    color: var(--bodex-about-brand-accent);
}

.bodex-about-service-card__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-about-on-surface-variant);
    margin: 0;
    margin-top: auto;
}

/* SECTION 4: VALUES */
.bodex-about-values {
    padding: 64px 0;
    background-color: var(--bodex-about-bg-surface);
    border-top: 1px solid #dee8ff;
    border-bottom: 1px solid #dee8ff;
}

@media screen and (min-width: 768px) {
    .bodex-about-values {
        padding: 120px 0;
    }
}

.bodex-about-values__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media screen and (min-width: 600px) {
    .bodex-about-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .bodex-about-values__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.bodex-about-value-card {
    background-color: var(--bodex-about-surface-lowest);
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.bodex-about-value-card:hover {
    transform: translateY(-2px);
}

.bodex-about-value-card__icon-box {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--bodex-about-surface-container);
    color: var(--bodex-about-brand-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.bodex-about-value-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--bodex-about-primary-dark);
    margin-top: 0;
    margin-bottom: 12px;
}

.bodex-about-value-card__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-about-on-surface-variant);
    margin: 0;
}

/* SECTION 5: STATS */
.bodex-about-stats {
    padding: 64px 0;
    background-color: var(--bodex-about-bg-surface);
}

@media screen and (min-width: 768px) {
    .bodex-about-stats {
        padding: 120px 0;
    }
}

.bodex-about-stats__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media screen and (min-width: 768px) {
    .bodex-about-stats__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.bodex-about-stat-card {
    position: relative;
    background-color: transparent;
    border-radius: 8px;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 32px;
    box-sizing: border-box;
}

.bodex-about-stat-card__pattern-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bodex-about-stat-card__pattern-wrap img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.bodex-about-stat-card__content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.bodex-about-stat-card__number {
    font-family: 'Manrope', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

@media screen and (min-width: 768px) {
    .bodex-about-stat-card__number {
        font-size: 48px;
    }
}

.bodex-about-stat-card__label {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

/* SECTION 6: CTA */
.bodex-about-cta {
    position: relative;
    padding: 64px 0;
    background-color: var(--bodex-about-bg-surface);
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .bodex-about-cta {
        padding: 120px 0;
    }
}

.bodex-about-cta__deco {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(270deg, rgba(155, 93, 229, 0.1) 0%, transparent 100%);
    opacity: 0.5;
    z-index: 1;
    transform: skewX(12deg) translateX(128px);
}

.bodex-about-cta__container {
    position: relative;
    z-index: 10;
}

.bodex-about-cta__content {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.bodex-about-cta__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bodex-about-primary-dark);
    margin-top: 0;
    margin-bottom: 24px;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .bodex-about-cta__title {
        font-size: 48px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        font-weight: 800;
    }
}

.bodex-about-cta__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--bodex-about-on-surface-variant);
    margin-top: 0;
    margin-bottom: 40px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.bodex-about-cta__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: var(--bodex-about-brand-accent);
    color: #ffffff;
    padding: 16px 32px !important;
    border-radius: 4px !important;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(155, 93, 229, 0.2);
    cursor: pointer;
    border: none;
}

.bodex-about-cta__btn:hover {
    opacity: 0.9;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(155, 93, 229, 0.3);
}

.bodex-about-cta__btn span.material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

/* ============================================
   Bodex Drywall Widget
   ============================================ */
.bodex-drywall-widget-wrapper {
    --bodex-drywall-primary-dark: #001b44;
    --bodex-drywall-secondary-purple: #6c35d7;
    --bodex-drywall-secondary-container: #8653f1;
    --bodex-drywall-surface-lowest: #ffffff;
    --bodex-drywall-surface-low: #f0f3ff;
    --bodex-drywall-background: #f9f9ff;
    --bodex-drywall-on-background: #111c2c;
    --bodex-drywall-on-surface-variant: #44474f;
    --bodex-drywall-outline-variant: #c5c6d0;

    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-drywall-on-background);
}

.bodex-drywall-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    border: none;
    line-height: 1;
    box-sizing: border-box;
}

.bodex-drywall-btn--primary {
    background-color: var(--bodex-drywall-secondary-purple);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(108, 53, 215, 0.1);
}

.bodex-drywall-btn--primary:hover {
    background-color: var(--bodex-drywall-secondary-container);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(108, 53, 215, 0.2);
}

.bodex-drywall-btn--secondary {
    background-color: transparent;
    color: var(--bodex-drywall-primary-dark);
    border: 2px solid var(--bodex-drywall-primary-dark);
}

.bodex-drywall-btn--secondary:hover {
    background-color: var(--bodex-drywall-primary-dark);
    color: #ffffff;
    transform: translateY(-2px);
}

.bodex-drywall-btn--block {
    width: 100%;
}

.bodex-drywall-btn:active {
    transform: scale(0.98);
}

/* Hero Section */
.bodex-drywall-hero {
    position: relative;
    width: 100%;
    padding: 120px 32px;
    background-color: var(--bodex-drywall-surface-low);
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 550px;
    box-sizing: border-box;
}

.bodex-drywall-hero__bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bodex-drywall-hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(249, 249, 255, 0.75);
    z-index: 10;
}

.bodex-drywall-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: grayscale(30%);
}

.bodex-drywall-hero__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
    box-sizing: border-box;
}

.bodex-drywall-hero__content {
    max-width: 760px;
    text-align: left;
    box-sizing: border-box;
}

.bodex-drywall-hero__badge {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--bodex-drywall-primary-dark);
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
}

.bodex-drywall-hero__title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--bodex-drywall-primary-dark);
    margin: 0 0 24px 0;
}

.bodex-drywall-hero__title .text-secondary {
    color: var(--bodex-drywall-secondary-purple);
}

.bodex-drywall-hero__desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bodex-drywall-on-surface-variant);
    margin: 0 0 40px 0;
}

.bodex-drywall-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Services Bento Section */
.bodex-drywall-services {
    padding: 120px 32px;
    background-color: var(--bodex-drywall-background);
    box-sizing: border-box;
}

.bodex-drywall-services__container {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.bodex-drywall-services__header {
    text-align: center;
    margin-bottom: 64px;
}

.bodex-drywall-services__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-drywall-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-drywall-services__desc {
    font-size: 16px;
    color: var(--bodex-drywall-on-surface-variant);
    max-width: 640px;
    margin: 0 auto;
}

.bodex-drywall-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.bodex-drywall-card {
    background-color: var(--bodex-drywall-surface-lowest);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-sizing: border-box;
}

.bodex-drywall-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.bodex-drywall-card__img-wrap {
    height: 256px;
    overflow: hidden;
    position: relative;
}

.bodex-drywall-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bodex-drywall-card:hover .bodex-drywall-card__img {
    transform: scale(1.05);
}

.bodex-drywall-card__body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
}

.bodex-drywall-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--bodex-drywall-primary-dark);
    margin: 0 0 12px 0;
}

.bodex-drywall-card__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-drywall-on-surface-variant);
    margin: 0 0 24px 0;
    flex-grow: 1;
}

.bodex-drywall-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bodex-drywall-card__bullet-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--bodex-drywall-on-surface-variant);
}

.bodex-drywall-card__bullet-item span.material-symbols-outlined {
    color: var(--bodex-drywall-secondary-purple);
    font-size: 18px;
}

/* Why Us Section */
.bodex-drywall-why-us {
    padding: 120px 32px;
    background-color: var(--bodex-drywall-primary-dark);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.bodex-drywall-why-us::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background: radial-gradient(circle at 100% 0%, var(--bodex-drywall-secondary-purple), transparent 50%);
    pointer-events: none;
}

.bodex-drywall-why-us__container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

.bodex-drywall-why-us__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 64px;
    align-items: center;
}

.bodex-drywall-why-us__left {
    text-align: left;
}

.bodex-drywall-why-us__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 24px 0;
}

.bodex-drywall-why-us__desc {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 48px 0;
}

.bodex-drywall-features {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bodex-drywall-feature-item {
    display: flex;
    gap: 16px;
}

.bodex-drywall-feature-item__icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bodex-drywall-secondary-purple);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bodex-drywall-feature-item__icon-wrap span.material-symbols-outlined {
    font-size: 24px;
}

.bodex-drywall-feature-item__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bodex-drywall-feature-item__title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.bodex-drywall-feature-item__desc {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.bodex-drywall-why-us__right {
    display: flex;
    justify-content: center;
}

.bodex-drywall-cta-box {
    background-color: var(--bodex-drywall-surface-lowest);
    color: var(--bodex-drywall-on-background);
    border-radius: 24px;
    padding: 48px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

.bodex-drywall-cta-box__glow {
    position: absolute;
    top: -24px;
    right: -24px;
    width: 96px;
    height: 96px;
    background-color: var(--bodex-drywall-secondary-purple);
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(24px);
}

.bodex-drywall-cta-box__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--bodex-drywall-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-drywall-cta-box__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-drywall-on-surface-variant);
    margin: 0 0 32px 0;
}

/* FAQ Section */
.bodex-drywall-faq {
    padding: 120px 32px;
    background-color: var(--bodex-drywall-surface-low);
    box-sizing: border-box;
}

.bodex-drywall-faq__container {
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

.bodex-drywall-faq__header {
    text-align: center;
    margin-bottom: 48px;
}

.bodex-drywall-faq__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-drywall-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-drywall-faq__desc {
    font-size: 16px;
    color: var(--bodex-drywall-on-surface-variant);
    margin: 0;
}

.bodex-drywall-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bodex-drywall-faq-item {
    background-color: var(--bodex-drywall-surface-lowest);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.bodex-drywall-faq-item[open] {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.bodex-drywall-faq-item__question {
    padding: 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--bodex-drywall-primary-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    box-sizing: border-box;
}

.bodex-drywall-faq-item__question::-webkit-details-marker {
    display: none;
}

.bodex-drywall-faq-item__question span.material-symbols-outlined {
    transition: transform 0.3s ease;
    color: var(--bodex-drywall-on-surface-variant);
}

.bodex-drywall-faq-item[open] .bodex-drywall-faq-item__question span.material-symbols-outlined {
    transform: rotate(180deg);
}

.bodex-drywall-faq-item__answer {
    border-top: 1px solid rgba(197, 198, 208, 0.3);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.bodex-drywall-faq-item__answer-inner {
    padding: 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-drywall-on-surface-variant);
    box-sizing: border-box;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .bodex-drywall-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bodex-drywall-why-us__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .bodex-drywall-cta-box {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .bodex-drywall-hero {
        padding: 80px 20px;
    }

    .bodex-drywall-hero__title {
        font-size: 32px;
    }

    .bodex-drywall-hero__desc {
        font-size: 16px;
    }

    .bodex-drywall-hero__buttons {
        flex-direction: column;
        width: 100%;
    }

    .bodex-drywall-hero__buttons .bodex-drywall-btn {
        width: 100%;
    }

    .bodex-drywall-services {
        padding: 64px 20px;
    }

    .bodex-drywall-services__grid {
        grid-template-columns: 1fr;
    }

    .bodex-drywall-card__body {
        padding: 24px;
    }

    .bodex-drywall-why-us {
        padding: 64px 20px;
    }

    .bodex-drywall-cta-box {
        padding: 32px 24px;
    }

    .bodex-drywall-faq {
        padding: 64px 20px;
    }

    .bodex-drywall-faq-item__question {
        padding: 20px;
        font-size: 16px;
    }

    .bodex-drywall-faq-item__answer-inner {
        padding: 20px;
        font-size: 14px;
    }
}

/* ============================================
   Bodex Painting Widget
   ============================================ */
.bodex-painting-widget-wrapper {
    --bodex-painting-primary-dark: #001b44;
    --bodex-painting-secondary-purple: #6c35d7;
    --bodex-painting-secondary-container: #8653f1;
    --bodex-painting-surface-lowest: #ffffff;
    --bodex-painting-surface-low: #f0f3ff;
    --bodex-painting-background: #f9f9ff;
    --bodex-painting-on-background: #111c2c;
    --bodex-painting-on-surface-variant: #44474f;
    --bodex-painting-outline-variant: #c5c6d0;

    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-painting-on-background);
}

.bodex-painting-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    border: none;
    line-height: 1;
    box-sizing: border-box;
}

.bodex-painting-btn--primary {
    background-color: var(--bodex-painting-secondary-purple);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(108, 53, 215, 0.1);
}

.bodex-painting-btn--primary:hover {
    background-color: var(--bodex-painting-secondary-container);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(108, 53, 215, 0.2);
}

.bodex-painting-btn--secondary {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.bodex-painting-btn--secondary:hover {
    background-color: #ffffff;
    color: var(--bodex-painting-primary-dark);
    transform: translateY(-2px);
}

.bodex-painting-btn--block {
    width: 100%;
}

.bodex-painting-btn:active {
    transform: scale(0.98);
}

/* Hero Section */
.bodex-painting-hero {
    position: relative;
    width: 100%;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bodex-painting-primary-dark);
    overflow: hidden;
    border-radius: 0 0 2rem 2rem;
    box-sizing: border-box;
    padding: 80px 32px;
}

.bodex-painting-hero__bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bodex-painting-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.bodex-painting-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bodex-painting-primary-dark) 0%, rgba(0, 27, 68, 0.8) 50%, transparent 100%);
    z-index: 1;
}

.bodex-painting-hero__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr;
    box-sizing: border-box;
}

.bodex-painting-hero__content {
    max-width: 640px;
    text-align: left;
    box-sizing: border-box;
}

.bodex-painting-hero__badge {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #b1c6f9;
    margin-bottom: 16px;
    display: inline-block;
    text-transform: uppercase;
}

.bodex-painting-hero__title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 24px 0;
}

.bodex-painting-hero__title .text-secondary-fixed-dim {
    color: #d1bcff;
}

.bodex-painting-hero__desc {
    font-size: 18px;
    line-height: 1.6;
    color: #dee8ff;
    margin: 0 0 32px 0;
    opacity: 0.9;
}

.bodex-painting-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Services Bento Grid Section */
.bodex-painting-services {
    padding: 120px 32px;
    background-color: var(--bodex-painting-background);
    box-sizing: border-box;
}

.bodex-painting-services__container {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.bodex-painting-services__header {
    text-align: center;
    margin-bottom: 64px;
}

.bodex-painting-services__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-painting-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-painting-services__desc {
    font-size: 18px;
    color: var(--bodex-painting-on-surface-variant);
    max-width: 640px;
    margin: 0 auto;
}

.bodex-painting-services__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.bodex-painting-card {
    background-color: var(--bodex-painting-surface-lowest);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-sizing: border-box;
    border: 1px solid rgba(197, 198, 208, 0.3);
}

.bodex-painting-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.bodex-painting-card__img-wrap {
    height: 224px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.bodex-painting-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bodex-painting-card:hover .bodex-painting-card__img {
    transform: scale(1.05);
}

.bodex-painting-card__body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
}

.bodex-painting-card__icon {
    font-size: 40px;
    color: var(--bodex-painting-secondary-purple);
    margin-bottom: 16px;
    align-self: flex-start;
}

.bodex-painting-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--bodex-painting-primary-dark);
    margin: 0 0 12px 0;
}

.bodex-painting-card__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-painting-on-surface-variant);
    margin: 0 0 24px 0;
    flex-grow: 1;
}

.bodex-painting-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bodex-painting-card__bullet-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--bodex-painting-on-surface-variant);
}

.bodex-painting-card__bullet-item span.material-symbols-outlined {
    color: var(--bodex-painting-secondary-purple);
    font-size: 18px;
}

/* Bento Grid Spans */
.bodex-painting-grid-span-4 {
    grid-column: span 4;
}

.bodex-painting-grid-span-6 {
    grid-column: span 6;
}

.bodex-painting-grid-span-8 {
    grid-column: span 8;
}

.bodex-painting-grid-span-12 {
    grid-column: span 12;
}

@media (min-width: 769px) {
    .bodex-painting-card.bodex-painting-grid-span-8 {
        flex-direction: row;
    }

    .bodex-painting-card.bodex-painting-grid-span-8 .bodex-painting-card__img-wrap {
        width: 50%;
        height: auto;
    }

    .bodex-painting-card.bodex-painting-grid-span-8 .bodex-painting-card__body {
        width: 50%;
        justify-content: center;
    }
}

/* Why Us & FAQ Section */
.bodex-painting-why-faq {
    background-color: var(--bodex-painting-surface-low);
    padding: 120px 32px;
    border-top: 1px solid var(--bodex-painting-outline-variant);
    border-bottom: 1px solid var(--bodex-painting-outline-variant);
    box-sizing: border-box;
}

.bodex-painting-why-faq__container {
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.bodex-painting-why-faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.bodex-painting-why-faq__left {
    text-align: left;
}

.bodex-painting-why-faq__badge {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--bodex-painting-secondary-purple);
    display: block;
    margin-bottom: 8px;
}

.bodex-painting-why-faq__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-painting-primary-dark);
    margin: 0 0 24px 0;
}

.bodex-painting-why-faq__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-painting-on-surface-variant);
    margin: 0 0 48px 0;
}

.bodex-painting-features {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bodex-painting-feature-item {
    display: flex;
    gap: 16px;
}

.bodex-painting-feature-item__icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #dee8ff;
    color: var(--bodex-painting-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bodex-painting-feature-item__icon-wrap span.material-symbols-outlined {
    font-size: 24px;
}

.bodex-painting-feature-item__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bodex-painting-feature-item__title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--bodex-painting-primary-dark);
    margin: 0;
}

.bodex-painting-feature-item__desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--bodex-painting-on-surface-variant);
    margin: 0;
}

/* FAQ Accordion */
.bodex-painting-faq-card {
    background-color: var(--bodex-painting-surface-lowest);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.bodex-painting-faq-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--bodex-painting-primary-dark);
    margin: 0 0 32px 0;
}

.bodex-painting-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bodex-painting-accordion-item {
    border: 1px solid var(--bodex-painting-outline-variant);
    border-radius: 8px;
    overflow: hidden;
}

.bodex-painting-accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: var(--bodex-painting-background);
    border: none;
    cursor: pointer;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--bodex-painting-primary-dark);
    text-align: left;
    transition: background-color 0.25s ease;
    outline: none;
}

.bodex-painting-accordion-trigger:hover {
    background-color: var(--bodex-painting-surface-low);
}

.bodex-painting-accordion-trigger span.material-symbols-outlined {
    transition: transform 0.3s ease;
    color: var(--bodex-painting-outline);
}

.bodex-painting-accordion-item.active .bodex-painting-accordion-trigger span.material-symbols-outlined {
    transform: rotate(180deg);
}

.bodex-painting-accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    background-color: var(--bodex-painting-surface-lowest);
}

.bodex-painting-accordion-item.active .bodex-painting-accordion-content {
    max-height: 300px;
    opacity: 1;
}

.bodex-painting-accordion-inner {
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bodex-painting-on-surface-variant);
    border-top: 1px solid rgba(197, 198, 208, 0.3);
}

/* Bottom Embedded CTA Form Section */
.bodex-painting-cta {
    padding: 120px 32px;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.bodex-painting-cta__card {
    background-color: var(--bodex-painting-primary-dark);
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 64px;
}

.bodex-painting-cta__pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
}

.bodex-painting-cta__grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.bodex-painting-cta__info {
    text-align: left;
}

.bodex-painting-cta__title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px 0;
}

.bodex-painting-cta__desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bodex-painting-surface-low);
    margin: 0;
}

.bodex-painting-cta__form-wrap {
    background-color: var(--bodex-painting-surface-lowest);
    border-radius: 12px;
    padding: 32px;
    box-sizing: border-box;
}

/* Gömülü CF7 Stilleri (Embedded CF7 Form Styling) */
.bodex-painting-embedded-form form p {
    margin-bottom: 16px !important;
}

.bodex-painting-embedded-form form br {
    display: none !important;
}

.bodex-painting-embedded-form input.wpcf7-text,
.bodex-painting-embedded-form select.wpcf7-select {
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid var(--bodex-painting-outline-variant) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    background-color: var(--bodex-painting-background) !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 16px !important;
    color: var(--bodex-painting-on-background) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.bodex-painting-embedded-form input.wpcf7-text:focus,
.bodex-painting-embedded-form select.wpcf7-select:focus {
    border-color: var(--bodex-painting-secondary-purple) !important;
    box-shadow: 0 0 0 1px var(--bodex-painting-secondary-purple) !important;
}

.bodex-painting-embedded-form input.wpcf7-submit {
    width: 100% !important;
    background-color: var(--bodex-painting-secondary-purple) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 16px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background-color 0.3s ease !important;
    margin-top: 16px !important;
}

.bodex-painting-embedded-form input.wpcf7-submit:hover {
    background-color: var(--bodex-painting-secondary-container) !important;
}

/* Static Mock Form Stilleri */
.bodex-painting-mock-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bodex-painting-mock-form__label {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-painting-on-surface-variant);
    display: block;
    margin-bottom: 8px;
}

.bodex-painting-mock-form__input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--bodex-painting-outline-variant);
    border-radius: 6px;
    padding: 12px 16px;
    background-color: var(--bodex-painting-background);
    outline: none;
    font-family: inherit;
    font-size: 16px;
    color: var(--bodex-painting-on-background);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .bodex-painting-why-faq__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .bodex-painting-cta__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .bodex-painting-cta__card {
        padding: 48px 32px;
    }
}

@media (max-width: 768px) {
    .bodex-painting-hero {
        padding: 64px 20px;
        min-height: auto;
        border-radius: 0 0 1rem 1rem;
    }

    .bodex-painting-hero__title {
        font-size: 32px;
    }

    .bodex-painting-hero__desc {
        font-size: 16px;
    }

    .bodex-painting-hero__buttons {
        flex-direction: column;
        width: 100%;
    }

    .bodex-painting-hero__buttons .bodex-painting-btn {
        width: 100%;
    }

    .bodex-painting-services {
        padding: 64px 20px;
    }

    .bodex-painting-services__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .bodex-painting-card {
        grid-column: span 12 !important;
    }

    .bodex-painting-card__body {
        padding: 24px;
    }

    .bodex-painting-why-faq {
        padding: 64px 20px;
    }

    .bodex-painting-faq-card {
        padding: 24px;
    }

    .bodex-painting-cta {
        padding: 64px 20px;
    }

    .bodex-painting-cta__card {
        padding: 32px 20px;
        border-radius: 1rem;
    }

    .bodex-painting-cta__title {
        font-size: 32px;
    }

    .bodex-painting-cta__form-wrap {
        padding: 24px 16px;
    }

    .bodex-painting-mock-form__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Bodex Dış Cephe & İzolasyon Widget Styles
   ============================================ */
.bodex-facade-widget-wrapper {
    --bodex-facade-primary-dark: #001b44;
    --bodex-facade-accent: #6c35d7;
    --bodex-facade-accent-hover: #5611c1;
    --bodex-facade-background: #f9f9ff;
    --bodex-facade-surface-lowest: #ffffff;
    --bodex-facade-on-surface-variant: #44474f;
    --bodex-facade-outline-variant: #c5c6d0;
    --bodex-facade-surface-container: #e7eeff;
    --bodex-facade-on-background: #111c2c;

    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-facade-on-background);
    background-color: var(--bodex-facade-background);
    box-sizing: border-box;
}

.bodex-facade-widget-wrapper * {
    box-sizing: border-box;
}

/* Hero Section */
.bodex-facade-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.bodex-facade-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 2, 10, 0.4) 0%, rgba(0, 2, 10, 0.6) 100%);
    z-index: 1;
}

.bodex-facade-hero__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    padding: 0 32px;
    margin: 0 auto;
}

.bodex-facade-hero__content {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 800px;
}

.bodex-facade-hero__tagline {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
    background-color: rgba(108, 53, 215, 0.85);
    padding: 8px 16px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bodex-facade-hero__title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 24px 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.bodex-facade-hero__desc {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 36px 0;
    max-width: 650px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.bodex-facade-hero__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Buttons */
.bodex-facade-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    outline: none;
    border: none;
}

.bodex-facade-btn--primary {
    background-color: var(--bodex-facade-accent);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(108, 53, 215, 0.2);
}

.bodex-facade-btn--primary:hover {
    background-color: var(--bodex-facade-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(108, 53, 215, 0.3);
}

.bodex-facade-btn--outline {
    background-color: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.bodex-facade-btn--outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Services Section */
.bodex-facade-services {
    padding: 120px 32px;
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-facade-services__container {
    width: 100%;
}

.bodex-facade-services__header {
    text-align: center;
    margin-bottom: 64px;
}

.bodex-facade-services__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-facade-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-facade-services__divider {
    width: 96px;
    height: 4px;
    background-color: var(--bodex-facade-accent);
    margin: 0 auto;
    border-radius: 2px;
}

.bodex-facade-services__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

/* Service Cards */
.bodex-facade-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bodex-facade-surface-lowest);
    border-radius: 12px;
    border: 1px solid rgba(197, 198, 208, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.bodex-facade-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.bodex-facade-card--span-12 {
    grid-column: span 12;
}

.bodex-facade-card--span-8 {
    grid-column: span 8;
}

.bodex-facade-card--span-7 {
    grid-column: span 7;
}

.bodex-facade-card--span-6 {
    grid-column: span 6;
}

.bodex-facade-card--span-5 {
    grid-column: span 5;
}

.bodex-facade-card--span-4 {
    grid-column: span 4;
}

.bodex-facade-card__image-wrap {
    width: 100%;
    height: 256px;
    overflow: hidden;
    position: relative;
}

.bodex-facade-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bodex-facade-card__content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bodex-facade-card__icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bodex-facade-surface-container);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.bodex-facade-card__icon-wrap span.material-symbols-outlined {
    font-size: 24px;
    color: var(--bodex-facade-accent);
}

.bodex-facade-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--bodex-facade-primary-dark);
    margin: 0 0 12px 0;
}

.bodex-facade-card__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-facade-on-surface-variant);
    margin: 0 0 24px 0;
}

.bodex-facade-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bodex-facade-card__bullets li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--bodex-facade-on-surface-variant);
}

.bodex-facade-card__bullets li span.material-symbols-outlined {
    font-size: 18px;
    color: var(--bodex-facade-accent);
}

.bodex-facade-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff !important;
    background-color: var(--bodex-facade-accent);
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-top: auto;
    width: fit-content;
}

.bodex-facade-card__link:hover {
    background-color: var(--bodex-facade-accent-hover);
    color: #ffffff !important;
}

.bodex-facade-card__link span.material-symbols-outlined {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.bodex-facade-card__link:hover span.material-symbols-outlined {
    transform: translateX(4px);
}

@media (min-width: 768px) {
    .bodex-facade-card--span-7 {
        flex-direction: row;
        align-items: stretch;
    }

    .bodex-facade-card--span-7 .bodex-facade-card__image-wrap {
        width: 50%;
        height: auto;
        align-self: stretch;
        display: flex;
    }

    .bodex-facade-card--span-7 .bodex-facade-card__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bodex-facade-card--span-7 .bodex-facade-card__content {
        width: 50%;
    }
}

/* Process Section */
.bodex-facade-process {
    padding: 120px 32px;
    background-color: var(--bodex-facade-primary-dark);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.bodex-facade-process__container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
}

.bodex-facade-process__header {
    text-align: center;
    margin-bottom: 64px;
}

.bodex-facade-process__tagline {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0.8;
    margin-bottom: 12px;
    display: block;
}

.bodex-facade-process__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px 0;
}

.bodex-facade-process__desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.bodex-facade-process__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.bodex-facade-step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.bodex-facade-step-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.bodex-facade-step-card__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--bodex-facade-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(108, 53, 215, 0.2);
}

.bodex-facade-step-card__icon-wrap span.material-symbols-outlined {
    font-size: 30px;
    color: #ffffff;
}

.bodex-facade-step-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.bodex-facade-step-card__desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* FAQ & CTA Section */
.bodex-facade-faq-cta {
    padding: 120px 32px;
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-facade-faq-cta__container {
    width: 100%;
}

.bodex-facade-faq-cta__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* FAQ Accordion */
.bodex-facade-faq-title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-facade-primary-dark);
    margin: 0 0 32px 0;
}

.bodex-facade-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bodex-facade-faq-item {
    background-color: var(--bodex-facade-surface-lowest);
    border: 1px solid rgba(197, 198, 208, 0.3);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.bodex-facade-faq-item[open] {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.bodex-facade-faq-item__question {
    padding: 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--bodex-facade-primary-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    box-sizing: border-box;
}

.bodex-facade-faq-item__question::-webkit-details-marker {
    display: none;
}

.bodex-facade-faq-item__question span.material-symbols-outlined {
    transition: transform 0.3s ease;
    color: var(--bodex-facade-on-surface-variant);
}

.bodex-facade-faq-item[open] .bodex-facade-faq-item__question span.material-symbols-outlined {
    transform: rotate(180deg);
}

.bodex-facade-faq-item__answer {
    border-top: 1px solid rgba(197, 198, 208, 0.3);
    box-sizing: border-box;
}

.bodex-facade-faq-item__answer-inner {
    padding: 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-facade-on-surface-variant);
    box-sizing: border-box;
}

/* CTA Form */
.bodex-facade-form-card {
    background-color: var(--bodex-facade-surface-container);
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.bodex-facade-form-card__pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    background-color: var(--bodex-facade-accent);
    opacity: 0.08;
    border-radius: 0 0 0 128px;
    z-index: 1;
    pointer-events: none;
}

.bodex-facade-form-card__content {
    position: relative;
    z-index: 2;
}

.bodex-facade-form-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--bodex-facade-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-facade-form-card__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-facade-on-surface-variant);
    margin: 0 0 32px 0;
}

/* CF7 Inputs styling */
.bodex-facade-form-card input.wpcf7-text,
.bodex-facade-form-card input.wpcf7-tel,
.bodex-facade-form-card select {
    width: 100%;
    background-color: var(--bodex-facade-surface-lowest);
    border: 1px solid rgba(197, 198, 208, 0.5);
    border-radius: 4px;
    padding: 12px 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    color: var(--bodex-facade-primary-dark);
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.bodex-facade-form-card input.wpcf7-text:focus,
.bodex-facade-form-card input.wpcf7-tel:focus,
.bodex-facade-form-card select:focus {
    border-color: var(--bodex-facade-accent);
    box-shadow: 0 0 0 2px rgba(108, 53, 215, 0.15);
}

.bodex-facade-form-card label {
    display: block;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-facade-on-surface-variant);
    margin-bottom: 8px;
}

.bodex-facade-form-card .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 16px;
}

.bodex-facade-form-card input.wpcf7-submit {
    width: 100%;
    background-color: var(--bodex-facade-accent);
    color: #ffffff;
    padding: 16px;
    border: none;
    border-radius: 4px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(108, 53, 215, 0.15);
    margin-top: 16px;
}

.bodex-facade-form-card input.wpcf7-submit:hover {
    background-color: var(--bodex-facade-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 30px rgba(108, 53, 215, 0.25);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .bodex-facade-faq-cta__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 768px) {
    .bodex-facade-hero {
        height: auto;
        padding: 100px 0;
    }

    .bodex-facade-hero__title {
        font-size: 32px;
    }

    .bodex-facade-hero__desc {
        font-size: 16px;
    }

    .bodex-facade-services {
        padding: 64px 20px;
    }

    .bodex-facade-services__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bodex-facade-card {
        grid-column: span 12 !important;
    }

    .bodex-facade-card__content {
        padding: 24px;
    }

    .bodex-facade-card__image-wrap {
        height: 200px;
    }

    .bodex-facade-process {
        padding: 64px 20px;
    }

    .bodex-facade-process__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bodex-facade-faq-cta {
        padding: 64px 20px;
    }

    .bodex-facade-form-card {
        padding: 32px 24px;
    }
}

/* ===========================================
   Bodex Renovation & Home Repair Widget
   =========================================== */
.bodex-renovation-widget-wrapper {
    --bodex-renovation-primary-dark: #00020a;
    --bodex-renovation-accent: #6c35d7;
    --bodex-renovation-accent-hover: #5611c1;
    --bodex-renovation-background: #f9f9ff;
    --bodex-renovation-surface-lowest: #ffffff;
    --bodex-renovation-surface-low: #f0f3ff;
    --bodex-renovation-on-surface: #111c2c;
    --bodex-renovation-on-surface-variant: #44474f;
    --bodex-renovation-outline-variant: #c5c6d0;
    --bodex-renovation-inverse-primary: #b1c6f9;

    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-renovation-on-surface);
    background-color: var(--bodex-renovation-background);
    box-sizing: border-box;
}

.bodex-renovation-widget-wrapper * {
    box-sizing: border-box;
}

/* Hero Section */
.bodex-renovation-hero {
    position: relative;
    width: 100%;
    min-height: 700px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 120px 0;
}

.bodex-renovation-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 2, 10, 0.45) 0%, rgba(0, 2, 10, 0.7) 100%);
    z-index: 1;
}

.bodex-renovation-hero__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    padding: 0 32px;
    margin: 0 auto;
}

.bodex-renovation-hero__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: center;
}

.bodex-renovation-hero__left {
    grid-column: span 7;
}

.bodex-renovation-hero__title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 24px 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.bodex-renovation-hero__desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bodex-renovation-inverse-primary);
    margin: 0;
    max-width: 550px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.bodex-renovation-hero__right {
    grid-column: span 5;
    display: flex;
    justify-content: flex-end;
}

/* Form Card */
.bodex-renovation-form-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--bodex-renovation-surface-lowest);
    border-radius: 12px;
    padding: 36px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.bodex-renovation-form-card__blur {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
    background: var(--bodex-renovation-accent);
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

.bodex-renovation-form-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--bodex-renovation-on-surface);
    margin: 0 0 24px 0;
    position: relative;
    z-index: 1;
}

.bodex-renovation-form-wrapper {
    position: relative;
    z-index: 1;
}

.bodex-renovation-form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.bodex-renovation-form-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-renovation-on-surface-variant);
    margin-bottom: 8px;
}

.bodex-renovation-form-input,
.bodex-renovation-form-select {
    width: 100%;
    background: var(--bodex-renovation-background);
    border: 1px solid var(--bodex-renovation-outline-variant);
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-renovation-on-surface);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bodex-renovation-form-input:focus,
.bodex-renovation-form-select:focus {
    border-color: var(--bodex-renovation-accent);
    box-shadow: 0 0 0 1px var(--bodex-renovation-accent);
}

.bodex-renovation-form-submit {
    width: 100%;
    background-color: var(--bodex-renovation-accent);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(108, 53, 215, 0.2);
    transition: all 0.3s ease;
}

.bodex-renovation-form-submit:hover {
    background-color: var(--bodex-renovation-accent-hover);
    box-shadow: 0 6px 20px rgba(108, 53, 215, 0.3);
}

/* Contact Form 7 support for customization */
.bodex-renovation-cf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 20px;
}

.bodex-renovation-cf7-form input[type="text"],
.bodex-renovation-cf7-form input[type="tel"],
.bodex-renovation-cf7-form select {
    width: 100%;
    background: var(--bodex-renovation-background);
    border: 1px solid var(--bodex-renovation-outline-variant);
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-renovation-on-surface);
    outline: none;
    transition: border-color 0.3s ease;
}

.bodex-renovation-cf7-form input:focus,
.bodex-renovation-cf7-form select:focus {
    border-color: var(--bodex-renovation-accent);
}

.bodex-renovation-cf7-form input[type="submit"] {
    width: 100%;
    background-color: var(--bodex-renovation-accent);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(108, 53, 215, 0.2);
    transition: all 0.3s ease;
}

.bodex-renovation-cf7-form input[type="submit"]:hover {
    background-color: var(--bodex-renovation-accent-hover);
}

/* Services Bento Grid Section */
.bodex-renovation-services {
    padding: 120px 32px;
    background-color: var(--bodex-renovation-background);
}

.bodex-renovation-services__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-renovation-services__header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 64px auto;
}

.bodex-renovation-services__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-renovation-on-surface);
    margin: 0 0 16px 0;
}

.bodex-renovation-services__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-renovation-on-surface-variant);
    margin: 0;
}

.bodex-renovation-services__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

/* Bento Card Style */
.bodex-renovation-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    background-color: var(--bodex-renovation-surface-lowest);
    height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bodex-renovation-card--span-8 {
    grid-column: span 8;
}

.bodex-renovation-card--span-4 {
    grid-column: span 4;
}

.bodex-renovation-card__image-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.bodex-renovation-card__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bodex-renovation-card:hover .bodex-renovation-card__image {
    transform: scale(1.05);
}

.bodex-renovation-card__overlay-content {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 2, 10, 0) 0%, rgba(0, 2, 10, 0.75) 60%, rgba(0, 2, 10, 0.95) 100%);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    color: #ffffff;
}

.bodex-renovation-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.bodex-renovation-card__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-renovation-inverse-primary);
    margin: 0;
    max-width: 450px;
}

/* Why Choose Us Section */
.bodex-renovation-why {
    padding: 120px 32px;
    background-color: var(--bodex-renovation-surface-low);
}

.bodex-renovation-why__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-renovation-why__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 64px;
    align-items: center;
}

.bodex-renovation-why__left {
    grid-column: span 7;
}

.bodex-renovation-why__tagline {
    display: inline-block;
    background-color: var(--bodex-renovation-inverse-primary);
    color: var(--bodex-renovation-primary-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
}

.bodex-renovation-why__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-renovation-on-surface);
    margin: 0 0 24px 0;
}

.bodex-renovation-why__desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bodex-renovation-on-surface-variant);
    margin: 0 0 40px 0;
}

.bodex-renovation-features {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bodex-renovation-feature-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.bodex-renovation-feature-item__icon {
    width: 48px;
    height: 48px;
    background-color: var(--bodex-renovation-surface-lowest);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.bodex-renovation-feature-item__icon span.material-symbols-outlined {
    font-size: 24px;
    color: var(--bodex-renovation-accent);
}

.bodex-renovation-feature-item__content {
    display: flex;
    flex-direction: column;
}

.bodex-renovation-feature-item__title {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--bodex-renovation-on-surface);
    margin: 0 0 8px 0;
}

.bodex-renovation-feature-item__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-renovation-on-surface-variant);
    margin: 0;
}

.bodex-renovation-why__right {
    grid-column: span 5;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bodex-renovation-experience-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--bodex-renovation-primary-dark);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.bodex-renovation-experience-card__pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.bodex-renovation-experience-card__content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.bodex-renovation-experience-card__num {
    font-family: 'Manrope', sans-serif;
    font-size: 96px;
    font-weight: 800;
    color: var(--bodex-renovation-accent);
    line-height: 1;
    margin-bottom: 8px;
}

.bodex-renovation-experience-card__text {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.05em;
}

.bodex-renovation-experience-card__shadow-deco {
    position: absolute;
    bottom: -32px;
    left: -32px;
    width: 192px;
    height: 192px;
    background-color: var(--bodex-renovation-outline-variant);
    opacity: 0.3;
    border-radius: 12px;
    z-index: 1;
    display: block;
}

/* FAQ Section */
.bodex-renovation-faq {
    padding: 120px 32px;
    background-color: var(--bodex-renovation-background);
}

.bodex-renovation-faq__container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.bodex-renovation-faq__header {
    text-align: center;
    margin-bottom: 64px;
}

.bodex-renovation-faq__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-renovation-on-surface);
    margin: 0;
}

.bodex-renovation-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bodex-renovation-faq-item {
    background-color: var(--bodex-renovation-surface-lowest);
    border: 1px solid var(--bodex-renovation-outline-variant);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.bodex-renovation-faq-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.bodex-renovation-faq-item__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--bodex-renovation-on-surface);
    cursor: pointer;
    list-style: none;
    outline: none;
}

.bodex-renovation-faq-item__question::-webkit-details-marker {
    display: none;
}

.bodex-renovation-faq-item__icon {
    font-size: 24px;
    color: var(--bodex-renovation-accent);
    transition: transform 0.3s ease;
}

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

.bodex-renovation-faq-item__answer {
    padding: 0 24px 24px 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-renovation-on-surface-variant);
    border-top: none;
    background-color: rgba(240, 243, 255, 0.3);
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .bodex-renovation-hero__grid {
        gap: 32px;
    }

    .bodex-renovation-why__grid {
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .bodex-renovation-hero {
        padding: 80px 0;
    }

    .bodex-renovation-hero__grid {
        grid-template-columns: 1fr;
    }

    .bodex-renovation-hero__left {
        grid-column: span 12;
        text-align: center;
    }

    .bodex-renovation-hero__right {
        grid-column: span 12;
        justify-content: center;
        margin-top: 48px;
    }

    .bodex-renovation-hero__title {
        font-size: 32px;
    }

    .bodex-renovation-hero__desc {
        margin: 0 auto;
    }

    .bodex-renovation-services {
        padding: 64px 20px;
    }

    .bodex-renovation-services__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bodex-renovation-card {
        grid-column: span 12 !important;
        height: 360px;
    }

    .bodex-renovation-why {
        padding: 64px 20px;
    }

    .bodex-renovation-why__grid {
        grid-template-columns: 1fr;
    }

    .bodex-renovation-why__left {
        grid-column: span 12;
    }

    .bodex-renovation-why__right {
        grid-column: span 12;
        margin-top: 48px;
    }

    .bodex-renovation-experience-card__shadow-deco {
        display: none;
    }

    .bodex-renovation-faq {
        padding: 64px 20px;
    }

    .bodex-renovation-faq-item__question {
        padding: 16px 20px;
        font-size: 16px;
    }

    .bodex-renovation-faq-item__answer {
        padding: 0 20px 20px 20px;
    }
}

/* ===========================================
   Bodex Lead Generation & Process Widget
   =========================================== */
.bodex-lp-widget-wrapper {
    --bodex-lp-primary-dark: #00020a;
    --bodex-lp-accent: #6c35d7;
    --bodex-lp-accent-hover: #5611c1;
    --bodex-lp-background: #f9f9ff;
    --bodex-lp-surface-lowest: #ffffff;
    --bodex-lp-surface-container: #e7eeff;
    --bodex-lp-surface-low: #f0f3ff;
    --bodex-lp-on-surface: #111c2c;
    --bodex-lp-on-surface-variant: #44474f;
    --bodex-lp-outline-variant: #c5c6d0;
    --bodex-lp-inverse-primary: #b1c6f9;

    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-lp-on-surface);
    background-color: var(--bodex-lp-background);
    box-sizing: border-box;
}

.bodex-lp-widget-wrapper * {
    box-sizing: border-box;
}

/* Hero Split Section */
.bodex-lp-hero {
    padding: 120px 32px;
    background-color: var(--bodex-lp-background);
}

.bodex-lp-hero__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-lp-hero__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: stretch;
}

.bodex-lp-hero__left {
    grid-column: span 6;
}

.bodex-lp-hero__right {
    grid-column: span 6;
}

/* Form Card */
.bodex-lp-form-card {
    background-color: var(--bodex-lp-surface-lowest);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(197, 198, 208, 0.3);
}

.bodex-lp-form-card__tagline {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-lp-accent);
    display: block;
    margin-bottom: 8px;
}

.bodex-lp-form-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--bodex-lp-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-lp-form-card__desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bodex-lp-on-surface-variant);
    margin: 0 0 32px 0;
}

.bodex-lp-form-group {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

.bodex-lp-form-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-lp-primary-dark);
    margin-bottom: 6px;
}

.bodex-lp-form-input,
.bodex-lp-form-select {
    width: 100%;
    border: 1px solid var(--bodex-lp-outline-variant);
    border-radius: 4px;
    background: transparent;
    padding: 12px 16px;
    font-size: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-lp-on-surface);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bodex-lp-form-input:focus,
.bodex-lp-form-select:focus {
    border-color: var(--bodex-lp-accent);
    box-shadow: 0 0 0 1px var(--bodex-lp-accent);
}

.bodex-lp-form-submit {
    width: 100%;
    background-color: var(--bodex-lp-accent);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0px 2px 8px rgba(108, 53, 215, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.bodex-lp-form-submit:hover {
    background-color: var(--bodex-lp-accent-hover);
}

/* Contact Form 7 integration inside Form Card */
.bodex-lp-cf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 20px;
}

.bodex-lp-cf7-form input[type="text"],
.bodex-lp-cf7-form input[type="tel"],
.bodex-lp-cf7-form select {
    width: 100%;
    border: 1px solid var(--bodex-lp-outline-variant);
    border-radius: 4px;
    background: transparent;
    padding: 12px 16px;
    font-size: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-lp-on-surface);
    outline: none;
    transition: border-color 0.2s ease;
}

.bodex-lp-cf7-form input:focus,
.bodex-lp-cf7-form select:focus {
    border-color: var(--bodex-lp-accent);
}

.bodex-lp-cf7-form input[type="submit"] {
    width: 100%;
    background-color: var(--bodex-lp-accent);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0px 2px 8px rgba(108, 53, 215, 0.15);
    transition: background-color 0.2s ease;
}

.bodex-lp-cf7-form input[type="submit"]:hover {
    background-color: var(--bodex-lp-accent-hover);
}

/* Hero Image Wrap */
.bodex-lp-hero-image-wrap {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--bodex-lp-outline-variant);
    background: linear-gradient(135deg, var(--bodex-lp-surface-low) 0%, var(--bodex-lp-surface-lowest) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.bodex-lp-hero-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.5s ease;
}

.bodex-lp-hero-image-wrap:hover .bodex-lp-hero-image {
    transform: scale(1.03);
}

/* Services Section */
.bodex-lp-services {
    background-color: var(--bodex-lp-surface-container);
    padding: 120px 32px;
}

.bodex-lp-services__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-lp-services__header {
    text-align: center;
    margin-bottom: 64px;
}

.bodex-lp-services__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-lp-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-lp-services__desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bodex-lp-on-surface-variant);
    max-width: 650px;
    margin: 0 auto;
}

.bodex-lp-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bodex-lp-service-card {
    background-color: var(--bodex-lp-surface-lowest);
    padding: 40px 32px;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bodex-lp-service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
}

.bodex-lp-service-card__icon-wrap {
    width: 64px;
    height: 64px;
    background-color: var(--bodex-lp-surface-low);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 24px auto;
}

.bodex-lp-service-card__icon-wrap span.material-symbols-outlined {
    font-size: 36px;
    color: var(--bodex-lp-accent);
}

.bodex-lp-service-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--bodex-lp-primary-dark);
    margin: 0 0 12px 0;
}

.bodex-lp-service-card__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-lp-on-surface-variant);
    margin: 0;
}

/* Work Process Section */
.bodex-lp-process {
    padding: 120px 32px;
    background-color: var(--bodex-lp-background);
}

.bodex-lp-process__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-lp-process__header {
    text-align: center;
    margin-bottom: 64px;
}

.bodex-lp-process__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-lp-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-lp-process__desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bodex-lp-on-surface-variant);
    max-width: 650px;
    margin: 0 auto;
}

.bodex-lp-process__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}

.bodex-lp-process__connector {
    position: absolute;
    top: 48px;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: var(--bodex-lp-outline-variant);
    z-index: 0;
}

.bodex-lp-process-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bodex-lp-process-card__number {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: var(--bodex-lp-surface-lowest);
    border: 4px solid var(--bodex-lp-outline-variant);
    color: var(--bodex-lp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.bodex-lp-process-card__number--active {
    background-color: var(--bodex-lp-primary-dark);
    border-color: var(--bodex-lp-surface-lowest);
    color: #ffffff;
}

.bodex-lp-process-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--bodex-lp-primary-dark);
    margin: 0 0 8px 0;
}

.bodex-lp-process-card__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-lp-on-surface-variant);
    margin: 0;
}

/* Trust Stats Section */
.bodex-lp-stats {
    background-color: var(--bodex-lp-primary-dark);
    padding: 64px 32px;
}

.bodex-lp-stats__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-lp-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.bodex-lp-stat-item {
    text-align: center;
}

.bodex-lp-stat-item__number {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.2;
}

.bodex-lp-stat-item__label {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-lp-inverse-primary);
}

/* FAQ Section */
.bodex-lp-faq {
    padding: 120px 32px;
    background-color: var(--bodex-lp-background);
}

.bodex-lp-faq__container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.bodex-lp-faq__header {
    text-align: center;
    margin-bottom: 48px;
}

.bodex-lp-faq__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-lp-primary-dark);
    margin: 0;
}

.bodex-lp-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bodex-lp-faq-item {
    border: 1px solid var(--bodex-lp-outline-variant);
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--bodex-lp-surface-lowest);
}

.bodex-lp-faq-item__trigger {
    width: 100%;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bodex-lp-surface-lowest);
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--bodex-lp-primary-dark);
    transition: background-color 0.2s ease;
}

.bodex-lp-faq-item__trigger:hover {
    background-color: var(--bodex-lp-surface-low);
}

.bodex-lp-faq-item__icon {
    font-size: 24px;
    color: var(--bodex-lp-on-surface-variant);
    transition: transform 0.2s ease;
}

.bodex-lp-faq-item__panel {
    display: none;
    background-color: var(--bodex-lp-background);
    border-top: 1px solid var(--bodex-lp-outline-variant);
}

.bodex-lp-faq-item__content {
    padding: 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-lp-on-surface-variant);
}

.bodex-lp-faq-item--active .bodex-lp-faq-item__panel {
    display: block;
}

.bodex-lp-faq-item--active .bodex-lp-faq-item__icon {
    transform: rotate(180deg);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .bodex-lp-hero__grid {
        align-items: center;
    }

    .bodex-lp-hero-image-wrap {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .bodex-lp-hero {
        padding: 64px 20px;
    }

    .bodex-lp-hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .bodex-lp-hero__left {
        grid-column: span 12;
    }

    .bodex-lp-hero__right {
        grid-column: span 12;
    }

    .bodex-lp-hero-image-wrap {
        height: 360px;
        min-height: auto;
    }

    .bodex-lp-form-card {
        padding: 32px 20px;
    }

    .bodex-lp-form-card__title {
        font-size: 24px;
    }

    .bodex-lp-services {
        padding: 64px 20px;
    }

    .bodex-lp-services__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bodex-lp-service-card {
        padding: 32px 24px;
    }

    .bodex-lp-process {
        padding: 64px 20px;
    }

    .bodex-lp-process__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .bodex-lp-process__connector {
        display: none;
    }

    .bodex-lp-process-card__number {
        width: 72px;
        height: 72px;
        font-size: 24px;
        margin-bottom: 16px;
    }

    .bodex-lp-stats {
        padding: 48px 20px;
    }

    .bodex-lp-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .bodex-lp-stat-item__number {
        font-size: 36px;
    }

    .bodex-lp-faq {
        padding: 64px 20px;
    }

    .bodex-lp-faq-item__trigger {
        padding: 16px 20px;
    }

    .bodex-lp-faq-item__content {
        padding: 16px 20px;
    }
}

/* ===========================================
   Bodex Cladding & Paneling Widget
   =========================================== */
.bodex-clad-widget-wrapper {
    --bodex-clad-primary-dark: #00020a;
    --bodex-clad-accent: #6c35d7;
    --bodex-clad-accent-hover: #5611c1;
    --bodex-clad-background: #f9f9ff;
    --bodex-clad-surface-lowest: #ffffff;
    --bodex-clad-surface-container: #e7eeff;
    --bodex-clad-surface-low: #f0f3ff;
    --bodex-clad-on-surface: #111c2c;
    --bodex-clad-on-surface-variant: #44474f;
    --bodex-clad-outline-variant: #c5c6d0;
    --bodex-clad-inverse-primary: #b1c6f9;

    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-clad-on-surface);
    background-color: var(--bodex-clad-background);
    box-sizing: border-box;
}

.bodex-clad-widget-wrapper * {
    box-sizing: border-box;
}

/* Hero Section */
.bodex-clad-hero {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.bodex-clad-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 2, 10, 0.4) 0%, rgba(0, 2, 10, 0.65) 100%);
    z-index: 1;
}

.bodex-clad-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1000px;
    padding: 0 32px;
    margin-top: 64px;
}

.bodex-clad-hero__tagline {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bodex-clad-inverse-primary);
    display: block;
    margin-bottom: 24px;
}

.bodex-clad-hero__title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 24px 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.bodex-clad-hero__desc {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bodex-clad-outline-variant);
    max-width: 650px;
    margin: 0 auto 40px auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.bodex-clad-hero__buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.bodex-clad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    outline: none;
}

.bodex-clad-btn--primary {
    background-color: var(--bodex-clad-accent);
    color: #ffffff;
    box-shadow: 0px 4px 20px rgba(108, 53, 215, 0.25);
}

.bodex-clad-btn--primary:hover {
    background-color: var(--bodex-clad-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0px 8px 30px rgba(108, 53, 215, 0.35);
}

.bodex-clad-btn--outline {
    background-color: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.bodex-clad-btn--outline:hover {
    background-color: #ffffff;
    color: var(--bodex-clad-primary-dark);
}

.bodex-clad-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: bodexBounce 2s infinite;
}

.bodex-clad-hero__scroll-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    opacity: 0.8;
}

.bodex-clad-hero__scroll-icon {
    color: #ffffff;
    font-size: 24px;
}

@keyframes bodexBounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translate(-50%, 0);
    }

    40% {
        transform: translate(-50%, -10px);
    }

    60% {
        transform: translate(-50%, -5px);
    }
}

/* Story Section */
.bodex-clad-story {
    padding: 120px 32px;
    background-color: var(--bodex-clad-background);
}

.bodex-clad-story__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-clad-story__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
    align-items: center;
}

.bodex-clad-story__left {
    grid-column: auto;
}

.bodex-clad-story__content-wrapper {
    border-left: 4px solid var(--bodex-clad-accent);
    padding-left: 32px;
}

.bodex-clad-story__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-clad-primary-dark);
    margin: 0 0 24px 0;
}

.bodex-clad-story__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-clad-on-surface-variant);
    margin: 0 0 24px 0;
}

.bodex-clad-story__desc:last-of-type {
    margin-bottom: 32px;
}

.bodex-clad-story__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bodex-clad-story-bullet {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.bodex-clad-story-bullet__icon {
    font-size: 24px;
    color: var(--bodex-clad-accent);
    margin-top: 2px;
}

.bodex-clad-story-bullet__title {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--bodex-clad-on-surface);
    margin: 0 0 4px 0;
}

.bodex-clad-story-bullet__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bodex-clad-on-surface-variant);
    margin: 0;
}

.bodex-clad-story__right {
    grid-column: auto;
    position: relative;
}

.bodex-clad-story-image-wrap {
    width: 100%;
    border-radius: 8px;
    overflow: visible;
    position: relative;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
}

.bodex-clad-story-image {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px !important;
    display: block !important;
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
}

.bodex-clad-floating-card {
    position: absolute;
    bottom: -40px;
    left: -40px;
    background-color: var(--bodex-clad-surface-lowest);
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    max-width: 320px;
    border-top: 4px solid var(--bodex-clad-accent);
    z-index: 10;
}

.bodex-clad-floating-card__icon {
    font-size: 36px;
    color: var(--bodex-clad-accent);
    margin-bottom: 8px;
    display: block;
}

.bodex-clad-floating-card__title {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--bodex-clad-primary-dark);
    margin: 0 0 8px 0;
}

.bodex-clad-floating-card__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bodex-clad-on-surface-variant);
    margin: 0;
}

/* Prestige Gallery Bento Grid */
.bodex-clad-gallery {
    padding: 120px 32px;
    background-color: var(--bodex-clad-surface-low);
}

.bodex-clad-gallery__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-clad-gallery__header {
    text-align: center;
    margin-bottom: 64px;
}

.bodex-clad-gallery__tagline {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-clad-accent);
    display: block;
    margin-bottom: 8px;
}

.bodex-clad-gallery__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-clad-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-clad-gallery__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-clad-on-surface-variant);
    max-width: 650px;
    margin: 0 auto;
}

.bodex-clad-gallery__bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
    gap: 24px;
}

.bodex-clad-bento-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bodex-clad-bento-card:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
}

.bodex-clad-bento-card--large {
    grid-column: span 2;
    grid-row: span 2;
}

.bodex-clad-bento-card__img-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.bodex-clad-bento-card__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease;
}

.bodex-clad-bento-card:hover .bodex-clad-bento-card__img {
    transform: scale(1.05);
}

.bodex-clad-bento-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 2, 10, 0.2) 0%, rgba(0, 2, 10, 0.9) 100%);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
}

.bodex-clad-bento-card__overlay.flex-end {
    justify-content: flex-end;
    padding: 24px;
}

.bodex-clad-bento-card__tag {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 12px;
}

.bodex-clad-bento-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.bodex-clad-bento-card__title.text-sm {
    font-size: 18px;
    margin: 0;
}

.bodex-clad-bento-card__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-clad-outline-variant);
    margin: 0;
    max-width: 500px;
}

.bodex-clad-bento-card--text {
    background-color: var(--bodex-clad-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bodex-clad-bento-card__text-content {
    position: relative;
    z-index: 2;
    padding: 32px;
    text-align: center;
}

.bodex-clad-bento-card__icon {
    font-size: 48px;
    color: var(--bodex-clad-inverse-primary);
    margin-bottom: 16px;
    display: block;
}

.bodex-clad-bento-card--text .bodex-clad-bento-card__title {
    font-size: 20px;
    margin-bottom: 8px;
}

.bodex-clad-bento-card--text .bodex-clad-bento-card__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bodex-clad-outline-variant);
}

.bodex-clad-bento-card__pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    z-index: 1;
    background-image: radial-gradient(circle at center, #ffffff 1px, transparent 1px);
    background-size: 12px 12px;
    pointer-events: none;
}

/* Contact Form Section */
.bodex-clad-contact {
    padding: 120px 32px;
    background-color: var(--bodex-clad-background);
    position: relative;
    overflow: hidden;
}

.bodex-clad-contact__decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: var(--bodex-clad-surface-low);
    transform: skewX(-12deg);
    transform-origin: top right;
    z-index: 0;
}

.bodex-clad-contact__container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.bodex-clad-contact-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--bodex-clad-accent);
    border-radius: 12px;
    padding: 48px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
}

.bodex-clad-contact-card__header {
    text-align: center;
    margin-bottom: 40px;
}

.bodex-clad-contact-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-clad-primary-dark);
    margin: 0 0 16px 0;
}

.bodex-clad-contact-card__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-clad-on-surface-variant);
    max-width: 600px;
    margin: 0 auto;
}

.bodex-clad-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.bodex-clad-form-group {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

.bodex-clad-form-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-clad-on-surface-variant);
    margin-bottom: 8px;
}

.bodex-clad-form-input,
.bodex-clad-form-select,
.bodex-clad-form-textarea {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--bodex-clad-outline-variant) !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    color: var(--bodex-clad-on-surface) !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
    resize: none !important;
}

.bodex-clad-form-input:focus,
.bodex-clad-form-select:focus,
.bodex-clad-form-textarea:focus {
    border-color: var(--bodex-clad-accent);
}

.bodex-clad-form-submit-wrap {
    padding-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.bodex-clad-form-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bodex-clad-accent);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 16px 40px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0px 4px 20px rgba(108, 53, 215, 0.25);
    transition: all 0.3s ease;
}

.bodex-clad-form-submit:hover {
    background-color: var(--bodex-clad-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0px 8px 30px rgba(108, 53, 215, 0.35);
}

/* Contact Form 7 support in Glassmorphic Card */
.bodex-clad-cf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 20px;
}

.bodex-clad-cf7-form input[type="text"],
.bodex-clad-cf7-form input[type="tel"],
.bodex-clad-cf7-form select,
.bodex-clad-cf7-form textarea {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--bodex-clad-outline-variant) !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    color: var(--bodex-clad-on-surface) !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.bodex-clad-cf7-form input:focus,
.bodex-clad-cf7-form select:focus,
.bodex-clad-cf7-form textarea:focus {
    border-color: var(--bodex-clad-accent);
}

.bodex-clad-cf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    background-color: var(--bodex-clad-accent);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 16px 40px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0px 4px 20px rgba(108, 53, 215, 0.25);
    transition: all 0.3s ease;
    width: auto;
}

.bodex-clad-cf7-form input[type="submit"]:hover {
    background-color: var(--bodex-clad-accent-hover);
    transform: translateY(-2px);
}

/* FAQ Section */
.bodex-clad-faq {
    padding: 120px 32px;
    background-color: var(--bodex-clad-surface-lowest);
    border-top: 1px solid rgba(117, 119, 127, 0.15);
}

.bodex-clad-faq__container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.bodex-clad-faq__header {
    text-align: center;
    margin-bottom: 48px;
}

.bodex-clad-faq__tagline {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-clad-accent);
    display: block;
    margin-bottom: 8px;
}

.bodex-clad-faq__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-clad-primary-dark);
    margin: 0;
}

.bodex-clad-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bodex-clad-faq-item {
    border: 1px solid rgba(197, 198, 208, 0.5);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bodex-clad-background);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bodex-clad-faq-item:hover {
    background-color: var(--bodex-clad-surface-low);
}

.bodex-clad-faq-item__trigger {
    width: 100%;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--bodex-clad-on-surface);
}

.bodex-clad-faq-item__icon {
    font-size: 24px;
    color: var(--bodex-clad-on-surface-variant);
    transition: transform 0.3s ease;
}

.bodex-clad-faq-item__panel {
    display: none;
    background-color: rgba(240, 243, 255, 0.5);
}

.bodex-clad-faq-item__content {
    padding: 0 24px 24px 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-clad-on-surface-variant);
}

.bodex-clad-faq-item--active {
    background-color: var(--bodex-clad-surface-low);
    border-color: var(--bodex-clad-accent);
}

.bodex-clad-faq-item--active .bodex-clad-faq-item__panel {
    display: block;
}

.bodex-clad-faq-item--active .bodex-clad-faq-item__icon {
    transform: rotate(180deg);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .bodex-clad-story__grid {
        gap: 32px;
    }

    .bodex-clad-story__left {
        grid-column: auto;
    }

    .bodex-clad-story__right {
        grid-column: auto;
    }

    .bodex-clad-floating-card {
        left: -20px;
        bottom: -20px;
    }
}

@media (max-width: 768px) {
    .bodex-clad-hero__title {
        font-size: 32px;
    }

    .bodex-clad-hero__desc {
        font-size: 16px;
    }

    .bodex-clad-story {
        padding: 64px 20px;
    }

    .bodex-clad-story__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bodex-clad-story__left {
        grid-column: auto;
    }

    .bodex-clad-story__right {
        grid-column: auto;
    }

    .bodex-clad-story__content-wrapper {
        border-left: none;
        padding-left: 0;
    }

    .bodex-clad-floating-card {
        display: none;
    }

    .bodex-clad-gallery {
        padding: 64px 20px;
    }

    .bodex-clad-gallery__bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 20px;
    }

    .bodex-clad-bento-card {
        grid-column: span 12 !important;
        grid-row: span 1 !important;
        height: 300px;
    }

    .bodex-clad-contact {
        padding: 64px 20px;
    }

    .bodex-clad-contact__decoration {
        display: none;
    }

    .bodex-clad-contact-card {
        padding: 32px 20px;
    }

    .bodex-clad-contact-card__title {
        font-size: 24px;
    }

    .bodex-clad-form-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .bodex-clad-faq {
        padding: 64px 20px;
    }

    .bodex-clad-faq-item__trigger {
        padding: 16px 20px;
    }

    .bodex-clad-faq-item__content {
        padding: 0 20px 20px 20px;
    }
}

/* Flooring Widget Styling */
.bodex-floor-widget-wrapper {
    --bodex-floor-primary: #00020a;
    --bodex-floor-primary-container: #001b44;
    --bodex-floor-secondary: #6c35d7;
    --bodex-floor-secondary-hover: #5611c1;
    --bodex-floor-secondary-container: #8653f1;
    --bodex-floor-background: #f9f9ff;
    --bodex-floor-on-surface: #111c2c;
    --bodex-floor-on-surface-variant: #44474f;
    --bodex-floor-surface-lowest: #ffffff;
    --bodex-floor-surface-low: #f0f3ff;
    --bodex-floor-surface-high: #dee8ff;
    --bodex-floor-outline-variant: #c5c6d0;
    --bodex-floor-secondary-fixed: #eaddff;
    --bodex-floor-on-secondary-fixed: #24005b;
    --bodex-floor-surface-container: #e7eeff;
    --bodex-floor-surface-bright: #f9f9ff;
    --bodex-floor-inverse-surface: #263142;
    --bodex-floor-on-primary-fixed: #001a42;
    --bodex-floor-outline: #75777f;
    --bodex-floor-surface-tint: #495e8a;
    --bodex-floor-inverse-primary: #b1c6f9;
    --bodex-floor-secondary-fixed-dim: #d1bcff;
    --bodex-floor-surface-container-high: #dee8ff;
    --bodex-floor-on-primary-container: #7084b3;
    --bodex-floor-primary-fixed: #d8e2ff;

    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--bodex-floor-on-surface);
    background-color: var(--bodex-floor-background);
}

.bodex-floor-widget-wrapper * {
    box-sizing: border-box;
}

/* Hero Section */
.bodex-floor-hero {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bodex-floor-primary-container);
    overflow: hidden;
    padding: 120px 32px 64px 32px;
}

.bodex-floor-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.bodex-floor-hero__bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.5;
}

.bodex-floor-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    color: #ffffff;
}

.bodex-floor-hero__tagline {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-floor-secondary-fixed);
    display: block;
    margin-bottom: 16px;
}

.bodex-floor-hero__title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--bodex-floor-surface-lowest);
    margin: 0 0 24px 0;
}

.bodex-floor-hero__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--bodex-floor-surface-container-high);
    margin: 0 0 32px 0;
}

.bodex-floor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding: 16px 32px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.bodex-floor-btn--primary {
    background-color: var(--bodex-floor-secondary);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.bodex-floor-btn--primary:hover {
    background-color: var(--bodex-floor-secondary-container);
    transform: translateY(-2px);
}

.bodex-floor-btn--outline {
    background-color: transparent;
    border: 2px solid var(--bodex-floor-outline);
    color: var(--bodex-floor-on-surface);
}

.bodex-floor-btn--outline:hover {
    border-color: var(--bodex-floor-primary-container);
    color: var(--bodex-floor-primary-container);
    transform: translateY(-2px);
}

/* Bento Gallery Section */
.bodex-floor-gallery {
    padding: 120px 32px;
    background-color: var(--bodex-floor-background);
}

.bodex-floor-gallery__container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.bodex-floor-gallery__header {
    text-align: center;
    margin-bottom: 48px;
}

.bodex-floor-gallery__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bodex-floor-primary-container);
    margin: 0 0 16px 0;
}

.bodex-floor-gallery__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-floor-on-surface-variant);
    max-width: 650px;
    margin: 0 auto;
}

.bodex-floor-gallery__bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 300px);
    gap: 24px;
}

.bodex-floor-bento-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.bodex-floor-bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
}

.bodex-floor-bento-card--large {
    grid-column: span 2;
    grid-row: span 2;
}

.bodex-floor-bento-card--tall {
    grid-column: span 1;
    grid-row: span 2;
}

.bodex-floor-bento-card--square {
    grid-column: span 1;
    grid-row: span 1;
}

.bodex-floor-bento-card__img-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.bodex-floor-bento-card__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease;
}

.bodex-floor-bento-card:hover .bodex-floor-bento-card__img {
    transform: scale(1.05);
}

.bodex-floor-bento-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 2, 10, 0) 40%, rgba(0, 2, 10, 0.8) 100%);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
    pointer-events: none;
}

.bodex-floor-bento-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bodex-floor-surface-lowest);
    margin: 0 0 8px 0;
}

.bodex-floor-bento-card__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-floor-surface-container-high);
    margin: 0;
}

/* Expandable Service Cards Section */
.bodex-floor-services {
    background-color: var(--bodex-floor-surface-low);
    padding: 120px 32px;
}

.bodex-floor-services__container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.bodex-floor-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.bodex-floor-services__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bodex-floor-primary-container);
    margin: 0 0 16px 0;
}

.bodex-floor-services__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-floor-on-surface-variant);
    max-width: 650px;
    margin: 0 auto;
}

.bodex-floor-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bodex-floor-card {
    background-color: var(--bodex-floor-surface-lowest);
    border-radius: 12px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-out;
    overflow: hidden;
    border: 1px solid var(--bodex-floor-outline-variant);
    display: flex;
    flex-direction: column;
}

.bodex-floor-card--active {
    border-color: var(--bodex-floor-secondary-container) !important;
    transform: translateY(-4px);
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
}

.bodex-floor-card__header {
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bodex-floor-surface-high);
    background-color: var(--bodex-floor-surface-bright);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bodex-floor-card__header:hover {
    background-color: var(--bodex-floor-surface-low);
}

.bodex-floor-card__title-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bodex-floor-card__icon {
    font-size: 32px;
    color: var(--bodex-floor-secondary);
}

.bodex-floor-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bodex-floor-primary-container);
    margin: 0;
}

.bodex-floor-card__trigger {
    color: var(--bodex-floor-secondary);
    font-size: 28px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Expandable Content */
.bodex-floor-card .expandable-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    background-color: var(--bodex-floor-surface-lowest);
}

.bodex-floor-card .expandable-content.expanded {
    grid-template-rows: 1fr;
}

.bodex-floor-card .expandable-content>div {
    overflow: hidden;
}

.bodex-floor-card__body {
    padding: 32px;
    padding-top: 24px;
}

.bodex-floor-card__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-floor-on-surface-variant);
    margin: 0 0 24px 0;
}

.bodex-floor-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bodex-floor-card__bullet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    color: var(--bodex-floor-on-surface-variant);
}

.bodex-floor-card__bullet-icon {
    font-size: 20px;
    color: var(--bodex-floor-secondary);
}

/* Statistics Section */
.bodex-floor-stats {
    position: relative;
    padding: 120px 32px;
    background-color: var(--bodex-floor-primary-container);
    color: var(--bodex-floor-surface-lowest);
    overflow: hidden;
}

.bodex-floor-stats__bg {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bodex-floor-stats__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
}

.bodex-floor-stats__container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
    text-align: center;
}

.bodex-floor-stats__tagline {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-floor-secondary-fixed);
    display: block;
    margin-bottom: 12px;
}

.bodex-floor-stats__title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--bodex-floor-surface-lowest);
    margin: 0 0 64px 0;
}

.bodex-floor-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-top: 1px solid var(--bodex-floor-surface-tint);
    padding-top: 48px;
}

.bodex-floor-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bodex-floor-stat-item__value {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: var(--bodex-floor-secondary-fixed-dim);
    margin-bottom: 8px;
}

.bodex-floor-stat-item__label {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-floor-surface-container-high);
}

/* CTA Section */
.bodex-floor-cta {
    padding: 120px 32px;
    background-color: var(--bodex-floor-surface-bright);
    text-align: center;
}

.bodex-floor-cta__container {
    max-width: 800px;
    margin: 0 auto;
}

.bodex-floor-cta__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--bodex-floor-secondary-fixed);
    color: var(--bodex-floor-on-secondary-fixed);
    margin-bottom: 24px;
}

.bodex-floor-cta__icon {
    font-size: 32px;
}

.bodex-floor-cta__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bodex-floor-primary-container);
    margin: 0 0 16px 0;
}

.bodex-floor-cta__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--bodex-floor-on-surface-variant);
    margin: 0 0 32px 0;
}

.bodex-floor-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .bodex-floor-gallery__bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .bodex-floor-bento-card--large,
    .bodex-floor-bento-card--tall,
    .bodex-floor-bento-card--square {
        grid-column: span 1;
        grid-row: span 1;
        height: 300px;
    }

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

    .bodex-floor-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px;
    }
}

@media (max-width: 768px) {
    .bodex-floor-hero {
        padding-top: 100px;
    }

    .bodex-floor-hero__title {
        font-size: 32px;
    }

    .bodex-floor-hero__desc {
        font-size: 16px;
    }

    .bodex-floor-gallery {
        padding: 64px 20px;
    }

    .bodex-floor-gallery__bento {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bodex-floor-bento-card {
        height: 250px;
    }

    .bodex-floor-services {
        padding: 64px 20px;
    }

    .bodex-floor-services__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bodex-floor-stats {
        padding: 64px 20px;
    }

    .bodex-floor-stats__title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .bodex-floor-stats__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 32px;
    }

    .bodex-floor-cta {
        padding: 64px 20px;
    }

    .bodex-floor-cta__title {
        font-size: 24px;
    }
}

/* Additional Flooring Sections & Layouts */

/* Split Hero Layout */
.bodex-floor-hero--split {
    height: auto;
    min-height: 90vh;
    padding: 140px 32px 100px 32px;
    display: block;
}

.bodex-floor-hero--split .bodex-floor-hero__container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.bodex-floor-hero__left {
    grid-column: span 7;
    text-align: left;
    color: #ffffff;
}

.bodex-floor-hero__right {
    grid-column: span 5;
}

.bodex-floor-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

.bodex-floor-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.bodex-floor-hero__badge-icon {
    color: var(--bodex-floor-secondary-fixed);
    font-size: 20px;
}

/* Hero Form Card */
.bodex-floor-hero-form {
    background: var(--bodex-floor-surface-lowest);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--bodex-floor-outline-variant);
    position: relative;
}

.bodex-floor-hero-form__title {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--bodex-floor-primary-container);
    margin: 0 0 8px 0;
}

.bodex-floor-hero-form__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    color: var(--bodex-floor-on-surface-variant);
    margin: 0 0 24px 0;
}

.bodex-floor-form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bodex-floor-form-label {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-floor-on-surface-variant);
}

.bodex-floor-form-input,
.bodex-floor-form-select {
    width: 100% !important;
    background: var(--bodex-floor-surface-lowest) !important;
    border: 1px solid var(--bodex-floor-outline-variant) !important;
    border-radius: 4px !important;
    padding: 12px !important;
    font-size: 16px !important;
    color: var(--bodex-floor-on-surface) !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.bodex-floor-form-input:focus,
.bodex-floor-form-select:focus {
    border-color: var(--bodex-floor-secondary) !important;
}

.bodex-floor-hero-form__submit {
    margin-top: 16px;
    width: 100%;
    background-color: var(--bodex-floor-secondary);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bodex-floor-hero-form__submit:hover {
    background-color: var(--bodex-floor-secondary-hover);
    box-shadow: 0px 4px 15px rgba(108, 53, 215, 0.25);
    transform: translateY(-2px);
}

/* Contact Form 7 support for Flooring Widget Hero Form */
.bodex-floor-cf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 16px;
}

.bodex-floor-cf7-form input[type="text"],
.bodex-floor-cf7-form input[type="tel"],
.bodex-floor-cf7-form input[type="email"],
.bodex-floor-cf7-form select,
.bodex-floor-cf7-form textarea {
    width: 100% !important;
    background: var(--bodex-floor-surface-lowest) !important;
    border: 1px solid var(--bodex-floor-outline-variant) !important;
    border-radius: 4px !important;
    padding: 12px !important;
    font-size: 16px !important;
    color: var(--bodex-floor-on-surface) !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.bodex-floor-cf7-form input:focus,
.bodex-floor-cf7-form select:focus,
.bodex-floor-cf7-form textarea:focus {
    border-color: var(--bodex-floor-secondary) !important;
}

.bodex-floor-cf7-form label {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-floor-on-surface-variant);
    margin-bottom: 4px;
    display: inline-block;
}

.bodex-floor-cf7-form input[type="submit"] {
    margin-top: 16px;
    width: 100%;
    background-color: var(--bodex-floor-secondary);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bodex-floor-cf7-form input[type="submit"]:hover {
    background-color: var(--bodex-floor-secondary-hover);
    box-shadow: 0px 4px 15px rgba(108, 53, 215, 0.25);
    transform: translateY(-2px);
}

.bodex-floor-cf7-form .wpcf7-response-output {
    margin: 16px 0 0 0 !important;
    padding: 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
}

/* Introduction Section */
.bodex-floor-intro {
    padding: 120px 32px;
    background-color: var(--bodex-floor-background);
}

.bodex-floor-intro__container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.bodex-floor-intro__brush-bg {
    position: relative;
}

.bodex-floor-intro__brush-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuClfNMQvX7yOw28DiIG19wQH23vWoOt7qc22053EV84GfPeySRIYg22lGKvx8IFAy2iVyGzUjsjiipze6pjLFmWeb03Q1aRQsgNWcQIQxdY5wTJDKA3OVJqnacAaZZCAKqecYVbN5Nbf4CQNL3Y1dvZ3fZkksnxN53P7L3Hrn-akKlMUSZQlonzmIiLgwurKJvE6w-UJFhObujqXTzPAg6uXi0SWno1ViNgxkPSo2jX8ZWLNzSKPc1j37jLQYTrjGvvjm5rgwNlpwA');
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    z-index: -1;
    pointer-events: none;
}

.bodex-floor-intro__icon {
    font-size: 48px;
    color: var(--bodex-floor-secondary);
    margin-bottom: 24px;
}

.bodex-floor-intro__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bodex-floor-primary-container);
    margin: 0 0 24px 0;
}

.bodex-floor-intro__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--bodex-floor-on-surface-variant);
    margin: 0;
}

/* 3-Column Catalog Bento Grid (Gallery Style 2) */
.bodex-floor-gallery--catalog .bodex-floor-gallery__bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 300px);
    gap: 24px;
}

.bodex-floor-bento-card--span2-row2 {
    grid-column: span 2;
    grid-row: span 2;
}

.bodex-floor-bento-card--span3-row1 {
    grid-column: span 3;
    grid-row: span 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.bodex-floor-bento-card--span3-row1 .bodex-floor-bento-card__overlay {
    position: relative;
    width: 50%;
    height: 100%;
    background: transparent;
    padding: 48px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
}

.bodex-floor-bento-card--span3-row1 .bodex-floor-bento-card__img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 2, 10, 0.9) 30%, rgba(0, 2, 10, 0.6) 60%, transparent 100%);
    z-index: 1;
}

.bodex-floor-bento-card__badge-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.bodex-floor-bento-card__badge-icon {
    color: var(--bodex-floor-secondary-fixed);
    font-size: 20px;
}

.bodex-floor-bento-card__badge-text {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-floor-secondary-fixed);
}

.bodex-floor-bento-card__desc--hidden {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-bottom: 24px;
}

.bodex-floor-bento-card:hover .bodex-floor-bento-card__desc--hidden {
    opacity: 1;
    transform: translateY(0);
}

.bodex-floor-bento-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bodex-floor-bento-card__link:hover {
    color: var(--bodex-floor-secondary-fixed);
}

/* Process Section */
.bodex-floor-process {
    padding: 120px 32px;
    background-color: var(--bodex-floor-background);
}

.bodex-floor-process__container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.bodex-floor-process__header {
    text-align: center;
    margin-bottom: 64px;
}

.bodex-floor-process__tagline {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-floor-secondary);
    display: block;
    margin-bottom: 12px;
}

.bodex-floor-process__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bodex-floor-primary-container);
    margin: 0;
}

.bodex-floor-process__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}

.bodex-floor-process__line {
    position: absolute;
    top: 48px;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: var(--bodex-floor-outline-variant);
    z-index: 0;
}

.bodex-floor-process__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bodex-floor-process__icon-wrap {
    width: 96px;
    height: 96px;
    background-color: var(--bodex-floor-surface-lowest);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--bodex-floor-surface-high);
    color: var(--bodex-floor-secondary);
    margin-bottom: 24px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.bodex-floor-process__icon {
    font-size: 36px;
}

.bodex-floor-process__step--active .bodex-floor-process__icon-wrap {
    background-color: var(--bodex-floor-secondary);
    color: #ffffff;
    box-shadow: 0px 0px 20px rgba(108, 53, 215, 0.4);
}

.bodex-floor-process__step-title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--bodex-floor-primary-container);
    margin: 0 0 12px 0;
}

.bodex-floor-process__step-desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bodex-floor-on-surface-variant);
    margin: 0;
}

/* References Section */
.bodex-floor-references {
    padding: 120px 32px;
    background-color: var(--bodex-floor-primary-container);
    color: #ffffff;
}

.bodex-floor-references__container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.bodex-floor-references__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 64px;
}

.bodex-floor-references__tagline {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-floor-secondary-fixed);
    display: block;
    margin-bottom: 12px;
}

.bodex-floor-references__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px 0;
}

.bodex-floor-references__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    color: var(--bodex-floor-on-primary-container);
    margin: 0;
    max-width: 600px;
}

.bodex-floor-references__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.bodex-floor-ref-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/5;
    background-color: var(--bodex-floor-surface-tint);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

.bodex-floor-ref-card--offset {
    margin-top: 48px;
}

.bodex-floor-ref-card__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.8;
    transition: transform 0.7s ease, opacity 0.7s ease;
}

.bodex-floor-ref-card:hover .bodex-floor-ref-card__img {
    transform: scale(1.1);
    opacity: 1;
}

.bodex-floor-ref-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 2, 10, 0) 30%, rgba(0, 2, 10, 0.9) 100%);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
    z-index: 1;
}

.bodex-floor-ref-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.bodex-floor-ref-card__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bodex-floor-surface-container-high);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin: 0;
}

.bodex-floor-ref-card:hover .bodex-floor-ref-card__desc {
    opacity: 1;
    transform: translateY(0);
}

/* FAQ Accordion Section */
.bodex-floor-faq {
    padding: 120px 32px;
    background-color: var(--bodex-floor-background);
}

.bodex-floor-faq__container {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.bodex-floor-faq__header {
    text-align: center;
    margin-bottom: 48px;
}

.bodex-floor-faq__tagline {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bodex-floor-secondary);
    display: block;
    margin-bottom: 12px;
}

.bodex-floor-faq__title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bodex-floor-primary-container);
    margin: 0;
}

.bodex-floor-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bodex-floor-faq-item {
    background-color: var(--bodex-floor-surface-lowest);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(197, 198, 208, 0.3);
    transition: all 0.3s ease;
}

.bodex-floor-faq-item:hover {
    border-color: rgba(108, 53, 215, 0.3);
}

.bodex-floor-faq-item.bg-surface-container {
    background-color: var(--bodex-floor-surface-low);
}

.bodex-floor-faq-item__trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

.bodex-floor-faq-item__question {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--bodex-floor-primary-container);
    margin: 0;
}

.bodex-floor-faq-item__icon {
    font-size: 24px;
    color: var(--bodex-floor-on-surface-variant);
}

.bodex-floor-faq-item__answer {
    margin-top: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodex-floor-on-surface-variant);
}

.bodex-floor-faq-item__answer.hidden {
    display: none;
}


/* Additional Media Queries */
@media (max-width: 1024px) {
    .bodex-floor-hero--split .bodex-floor-hero__container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .bodex-floor-hero__left,
    .bodex-floor-hero__right {
        grid-column: span 1;
    }

    .bodex-floor-hero__left {
        text-align: center;
    }

    .bodex-floor-hero__badges {
        justify-content: center;
    }

    .bodex-floor-gallery--catalog .bodex-floor-gallery__bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .bodex-floor-bento-card--span2-row2,
    .bodex-floor-bento-card--span3-row1 {
        grid-column: span 1;
        grid-row: span 1;
        height: 300px;
    }

    .bodex-floor-bento-card--span3-row1 {
        flex-direction: column;
    }

    .bodex-floor-bento-card--span3-row1 .bodex-floor-bento-card__overlay {
        width: 100%;
        padding: 24px;
        background: linear-gradient(180deg, rgba(0, 2, 10, 0) 0%, rgba(0, 2, 10, 0.8) 100%);
    }

    .bodex-floor-process__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .bodex-floor-process__line {
        display: none;
    }

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

    .bodex-floor-ref-card--offset {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .bodex-floor-hero--split {
        padding-top: 100px;
    }

    .bodex-floor-gallery--catalog .bodex-floor-gallery__bento {
        grid-template-columns: 1fr;
    }

    .bodex-floor-process__grid {
        grid-template-columns: 1fr;
    }

    .bodex-floor-references__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
    }

    .bodex-floor-references__grid {
        grid-template-columns: 1fr;
    }

    .bodex-floor-faq {
        padding: 64px 20px;
    }
}

/* ==========================================================================
   Bodex Zemin Kaplama - Görsel Mozaik Düzeni Widget Styles
   ========================================================================== */

.bodex-floor-mosaic-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bodex-floor-mosaic {
    /* Design Tokens */
    --bfm-primary: #00020a;
    --bfm-primary-container: #001b44;
    --bfm-secondary: #6c35d7;
    --bfm-secondary-hover: #5611c1;
    --bfm-secondary-container: #8653f1;
    --bfm-secondary-fixed: #eaddff;
    --bfm-secondary-fixed-dim: #d1bcff;
    --bfm-on-secondary-fixed: #24005b;
    --bfm-bg: #f9f9ff;
    --bfm-on-surface: #111c2c;
    --bfm-on-surface-variant: #44474f;
    --bfm-surface-lowest: #ffffff;
    --bfm-surface-low: #f0f3ff;
    --bfm-surface-high: #dee8ff;
    --bfm-surface-bright: #f9f9ff;
    --bfm-surface-tint: #495e8a;
    --bfm-outline: #75777f;
    --bfm-outline-variant: #c5c6d0;
    --bfm-container-padding: 32px;
    --bfm-grid-gutter: 24px;
    --bfm-section-gap: 120px;
    
    background-color: var(--bfm-bg);
    color: var(--bfm-on-surface);
    font-family: 'Hanken Grotesk', sans-serif;
    line-height: 1.6;
}

.bodex-floor-mosaic * {
    box-sizing: border-box;
}

/* Typography elements */
.bodex-floor-mosaic-section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bfm-primary-container);
    margin: 0 0 16px 0;
}

.bodex-floor-mosaic-section-desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bfm-on-surface-variant);
    margin: 0;
}

.bodex-floor-mosaic-section-desc--large {
    font-size: 18px;
}

/* Buttons */
.bodex-floor-mosaic-btn {
    display: inline-block;
    padding: 16px 32px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.bodex-floor-mosaic-btn--primary {
    background-color: var(--bfm-secondary);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.bodex-floor-mosaic-btn--primary:hover {
    background-color: var(--bfm-secondary-container);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.bodex-floor-mosaic-btn--secondary {
    background-color: transparent;
    color: var(--bfm-on-surface) !important;
    border: 2px solid var(--bfm-outline);
}

.bodex-floor-mosaic-btn--secondary:hover {
    border-color: var(--bfm-primary-container);
    color: var(--bfm-primary-container) !important;
}

/* 1. Hero Section */
.bodex-floor-mosaic-hero {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bfm-primary-container);
    overflow: hidden;
}

.bodex-floor-mosaic-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bodex-floor-mosaic-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.bodex-floor-mosaic-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 var(--bfm-container-padding);
    max-width: 800px;
    margin: 0 auto;
    color: #ffffff;
}

.bodex-floor-mosaic-hero__tagline {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bfm-secondary-fixed) !important;
    margin-bottom: 16px;
    display: block;
}

.bodex-floor-mosaic-hero__title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--bfm-surface-lowest);
    margin: 0 0 24px 0;
}

.bodex-floor-mosaic-hero__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bfm-surface-high) !important;
    margin: 0 0 32px 0;
}

/* 2. Bento Grid Gallery */
.bodex-floor-mosaic-gallery {
    padding: var(--bfm-section-gap) var(--bfm-container-padding);
    max-width: 1280px;
    margin: 0 auto;
}

.bodex-floor-mosaic-gallery__header {
    margin-bottom: 48px;
    text-align: left;
}

.bodex-floor-mosaic-gallery__header .bodex-floor-mosaic-section-desc {
    max-width: 672px;
}

.bodex-floor-mosaic-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 288px);
    gap: var(--bfm-grid-gutter);
    height: auto;
}

.bodex-floor-mosaic-bento-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--bfm-surface-lowest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.bodex-floor-mosaic-bento-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.bodex-floor-mosaic-bento-card--large {
    grid-column: span 2;
    grid-row: span 2;
}

.bodex-floor-mosaic-bento-card--tall {
    grid-column: span 1;
    grid-row: span 2;
}

.bodex-floor-mosaic-bento-card--square {
    grid-column: span 1;
    grid-row: span 1;
}

.bodex-floor-mosaic-bento-card__link {
    position: absolute;
    inset: 0;
    z-index: 20;
}

.bodex-floor-mosaic-bento-card__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.bodex-floor-mosaic-bento-card:hover .bodex-floor-mosaic-bento-card__img {
    transform: scale(1.05);
}

.bodex-floor-mosaic-bento-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 27, 68, 0.9) 0%, rgba(0, 27, 68, 0.4) 70%, transparent 100%);
    padding: 24px;
    padding-top: 64px;
    z-index: 10;
    pointer-events: none;
}

.bodex-floor-mosaic-bento-card__overlay--small {
    padding: 16px;
    background: linear-gradient(to top, rgba(0, 27, 68, 0.8) 0%, transparent 100%);
}

.bodex-floor-mosaic-bento-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bfm-surface-lowest);
    margin: 0 0 8px 0;
}

.bodex-floor-mosaic-bento-card__title--small {
    font-size: 18px;
    margin: 0;
}

.bodex-floor-mosaic-bento-card__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bfm-surface-high);
    margin: 0;
}

/* 3. Expandable Services */
.bodex-floor-mosaic-services-section {
    background-color: var(--bfm-surface-low);
    padding: var(--bfm-section-gap) 0;
}

.bodex-floor-mosaic-services-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--bfm-container-padding);
}

.bodex-floor-mosaic-services__header {
    margin-bottom: 48px;
    text-align: center;
}

.bodex-floor-mosaic-services__header .bodex-floor-mosaic-section-desc {
    max-width: 672px;
    margin: 0 auto;
}

.bodex-floor-mosaic-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bfm-grid-gutter);
}

.bodex-floor-mosaic-card {
    background-color: var(--bfm-surface-lowest);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--bfm-outline-variant);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.bodex-floor-mosaic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.bodex-floor-mosaic-card-active {
    border-color: var(--bfm-secondary-container);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.bodex-floor-mosaic-card-header {
    padding: 32px;
    padding-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bfm-surface-high);
    background-color: var(--bfm-surface-bright);
    cursor: pointer;
}

.bodex-floor-mosaic-card-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bodex-floor-mosaic-card-header__icon {
    color: var(--bfm-secondary);
    font-size: 30px !important;
}

.bodex-floor-mosaic-card-header__title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bfm-primary-container);
    margin: 0;
}

.bodex-floor-mosaic-card-header__arrow {
    color: var(--bfm-on-surface-variant);
    transition: transform 0.3s ease;
}

.bodex-floor-mosaic-card .expandable-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.bodex-floor-mosaic-card .expandable-content.expanded {
    grid-template-rows: 1fr;
}

.bodex-floor-mosaic-card .expandable-content > div {
    overflow: hidden;
}

.bodex-floor-mosaic-card-content {
    padding: 32px;
    padding-top: 24px;
    background-color: var(--bfm-surface-lowest);
}

.bodex-floor-mosaic-card-content__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    color: var(--bfm-on-surface-variant);
    margin: 0 0 16px 0;
}

.bodex-floor-mosaic-card-content__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.bodex-floor-mosaic-card-content__bullet-item {
    display: flex;
    align-items: start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 16px;
    color: var(--bfm-on-surface-variant);
}

.bodex-floor-mosaic-card-content__bullet-item:last-child {
    margin-bottom: 0;
}

.bodex-floor-mosaic-card-content__bullet-icon {
    color: var(--bfm-secondary);
    font-size: 20px !important;
}

/* 4. Stats Section */
.bodex-floor-mosaic-stats {
    position: relative;
    background-color: var(--bfm-primary-container);
    color: var(--bfm-surface-lowest);
    padding: var(--bfm-section-gap) 0;
    overflow: hidden;
}

.bodex-floor-mosaic-stats__bg-wrap {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.bodex-floor-mosaic-stats__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
}

.bodex-floor-mosaic-stats__container {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--bfm-container-padding);
    text-align: center;
}

.bodex-floor-mosaic-stats__title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--bfm-surface-lowest);
    margin: 0 0 64px 0;
}

.bodex-floor-mosaic-stats__tagline {
    color: var(--bfm-secondary-fixed) !important;
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}

.bodex-floor-mosaic-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bfm-grid-gutter);
    border-top: 1px solid var(--bfm-surface-tint);
    padding-top: 48px;
}

.bodex-floor-mosaic-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bodex-floor-mosaic-stats__number {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: var(--bfm-secondary-fixed-dim) !important;
    margin-bottom: 8px;
    line-height: 1.2;
}

.bodex-floor-mosaic-stats__label {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bfm-surface-high) !important;
    text-align: center;
}

/* 5. CTA Section */
.bodex-floor-mosaic-cta-section {
    background-color: var(--bfm-surface-bright);
    padding: var(--bfm-section-gap) 0;
}

.bodex-floor-mosaic-cta-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--bfm-container-padding);
    text-align: center;
}

.bodex-floor-mosaic-cta__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--bfm-secondary-fixed);
    margin-bottom: 24px;
}

.bodex-floor-mosaic-cta__icon {
    color: var(--bfm-on-secondary-fixed);
    font-size: 30px !important;
}

.bodex-floor-mosaic-cta__buttons {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .bodex-floor-mosaic {
        --bfm-section-gap: 80px;
    }
    .bodex-floor-mosaic-bento-grid {
        grid-template-rows: repeat(2, 220px);
    }
}

@media (max-width: 768px) {
    .bodex-floor-mosaic {
        --bfm-section-gap: 64px;
        --bfm-container-padding: 16px;
    }

    .bodex-floor-mosaic-hero {
        height: auto;
        padding: 80px 0;
    }

    .bodex-floor-mosaic-hero__title {
        font-size: 32px;
    }

    .bodex-floor-mosaic-hero__desc {
        font-size: 16px;
    }

    .bodex-floor-mosaic-gallery__header {
        text-align: center;
        margin-bottom: 32px;
    }

    .bodex-floor-mosaic-section-title {
        font-size: 28px;
    }

    .bodex-floor-mosaic-bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .bodex-floor-mosaic-bento-card--large,
    .bodex-floor-mosaic-bento-card--tall,
    .bodex-floor-mosaic-bento-card--square {
        grid-column: span 1;
        grid-row: span 1;
        height: 250px;
    }

    .bodex-floor-mosaic-services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bodex-floor-mosaic-stats__title {
        font-size: 32px;
        margin-bottom: 48px;
    }

    .bodex-floor-mosaic-stats__tagline {
        font-size: 18px;
    }

    .bodex-floor-mosaic-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
    }

    .bodex-floor-mosaic-stats__number {
        font-size: 36px;
    }

    .bodex-floor-mosaic-cta__buttons {
        flex-direction: column;
        gap: 12px;
    }

    .bodex-floor-mosaic-btn {
        width: 100%;
    }
}

/* Custom styles for Lead Process Tailwind Widget */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.fill-icon {
    font-variation-settings: 'FILL' 1;
}
/* Custom subtle animations */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Custom Animations and Hovers for Homepage Widget */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.animate-scale-in {
    animation: scaleIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Card Hover Zoom */
.card-image-wrapper { overflow: hidden; }
.card-image-wrapper img { transition: transform 0.5s ease; }
.group:hover .card-image-wrapper img { transform: scale(1.05); }

/* Force absolute & block-level coverage on bento/card images to bypass WordPress theme style overrides */
.bodex-lp-bento-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.bodex-lp-hero-bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.bodex-home-srv-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ============================================
   Bodex Career Widget
   ============================================ */

/* --- Material Symbols fix for career widget --- */
.bodex-career-wrapper .material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* --- Container --- */
.bodex-career-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
}

/* --- Wrapper --- */
.bodex-career-wrapper {
    font-family: 'Hanken Grotesk', sans-serif;
    color: #0b1c30;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================
   HERO SECTION
   ======================== */
.bodex-career-hero {
    position: relative;
    min-height: 614px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px 64px;
    overflow: hidden;
}

.bodex-career-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bodex-career-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
    z-index: 1;
}

.bodex-career-hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    position: absolute;
    inset: 0;
}

.bodex-career-hero__content {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.bodex-career-hero__inner {
    max-width: 66.666%;
}

.bodex-career-hero__badge {
    display: inline-block;
    background-color: rgba(233, 221, 255, 0.3);
    color: #633bbc;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 20px;
}

.bodex-career-hero__title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0b1c30;
    margin: 0 0 20px 0;
    padding: 0;
}

.bodex-career-hero__title-highlight {
    color: #4b1ca4;
}

.bodex-career-hero__desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #494453;
    max-width: 640px;
    margin: 0 0 28px 0;
    padding: 0;
}

.bodex-career-hero__btn-wrap {
    padding-top: 8px;
}

.bodex-career-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #4b1ca4;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.bodex-career-hero__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(75, 28, 164, 0.3);
}

.bodex-career-hero__btn:active {
    transform: translateY(0);
}

/* ========================
   WHY BODEX SECTION
   ======================== */
.bodex-career-why {
    padding: 120px 24px;
    background-color: #f8f9ff;
}

.bodex-career-why__header {
    text-align: center;
    margin-bottom: 64px;
}

.bodex-career-why__title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    color: #0b1c30;
    margin: 0 0 16px 0;
    padding: 0;
}

.bodex-career-why__desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #494453;
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
}

.bodex-career-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.bodex-career-why__card {
    background-color: #ffffff;
    padding: 32px;
    border-radius: 4px;
    border: 1px solid rgba(203, 195, 213, 0.5);
    box-shadow: 0 4px 24px rgba(99, 59, 188, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bodex-career-why__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(99, 59, 188, 0.12);
}

.bodex-career-why__icon-box {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e9ddff, #d0bcff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.bodex-career-why__icon-box .material-symbols-outlined {
    color: #4b1ca4;
    font-size: 28px;
}

.bodex-career-why__card-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: #0b1c30;
    margin: 0 0 12px 0;
    padding: 0;
}

.bodex-career-why__card-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #494453;
    margin: 0;
    padding: 0;
}

/* ========================
   APPLICATION FORM SECTION
   ======================== */
.bodex-career-form {
    padding: 120px 24px;
    background-color: #f8f9ff;
}

.bodex-career-form__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: start;
}

.bodex-career-form__left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bodex-career-form__left-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bodex-career-form__title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    color: #0b1c30;
    margin: 0;
    padding: 0;
}

.bodex-career-form__desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #494453;
    margin: 0;
    padding: 0;
}

/* Contact Card */
.bodex-career-contact__card {
    background-color: #4b1ca4;
    color: #ffffff;
    padding: 32px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(75, 28, 164, 0.2);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bodex-career-contact__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    margin: 0 0 4px 0;
    padding: 0;
}

.bodex-career-contact__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.bodex-career-contact__icon {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #ffffff;
    opacity: 0.9;
}

.bodex-career-contact__item-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bodex-career-contact__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(233, 221, 255, 0.8);
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.bodex-career-contact__value {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    text-decoration: none;
    word-break: break-word;
    transition: opacity 0.25s ease;
}

a.bodex-career-contact__value:hover {
    opacity: 0.8;
    color: #ffffff;
}

/* Form Card */
.bodex-career-form__card {
    background-color: #ffffff;
    padding: 32px 40px;
    border-radius: 4px;
    border: 1px solid rgba(203, 195, 213, 0.5);
    box-shadow: 0 4px 24px rgba(99, 59, 188, 0.06);
}

.bodex-career-form__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bodex-career-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.bodex-career-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bodex-career-form__label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #0b1c30;
    margin: 0;
    padding: 0;
}

.bodex-career-form__input,
.bodex-career-form__select,
.bodex-career-form__textarea {
    width: 100%;
    background-color: #f8f9ff;
    border: 1px solid rgba(203, 195, 213, 0.5);
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 16px;
    font-family: 'Hanken Grotesk', sans-serif;
    color: #0b1c30;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.bodex-career-form__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23494453' d='M6 8.825L0.675 3.5l0.85-0.85L6 7.125l4.475-4.475l0.85 0.85L6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.bodex-career-form__input:focus,
.bodex-career-form__select:focus,
.bodex-career-form__textarea:focus {
    border-color: #4b1ca4;
    box-shadow: 0 0 0 1px #4b1ca4;
}

.bodex-career-form__input::placeholder,
.bodex-career-form__textarea::placeholder {
    color: #7a7484;
}

.bodex-career-form__textarea {
    resize: none;
    min-height: 100px;
}

/* File Upload Drop Zone */
.bodex-career-form__file-drop {
    position: relative;
    width: 100%;
    min-height: 128px;
    border: 2px dashed rgba(203, 195, 213, 0.7);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #f8f9ff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bodex-career-form__file-drop:hover {
    background-color: rgba(211, 228, 254, 0.3);
    border-color: #4b1ca4;
}

.bodex-career-form__file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.bodex-career-form__file-icon {
    font-size: 36px;
    color: #7a7484;
    transition: color 0.2s ease;
}

.bodex-career-form__file-drop:hover .bodex-career-form__file-icon {
    color: #4b1ca4;
}

.bodex-career-form__file-text {
    font-size: 16px;
    font-weight: 400;
    color: #494453;
    transition: color 0.2s ease;
}

.bodex-career-form__file-drop:hover .bodex-career-form__file-text {
    color: #4b1ca4;
}

/* Submit */
.bodex-career-form__submit-wrap {
    padding-top: 8px;
}

.bodex-career-form__submit {
    width: 100%;
    background-color: #4b1ca4;
    color: #ffffff;
    padding: 16px;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Hanken Grotesk', sans-serif;
    line-height: 1.4;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.bodex-career-form__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(75, 28, 164, 0.3);
    background-color: #633bbc;
}

.bodex-career-form__submit:active {
    transform: translateY(0);
}

/* ========================
   CAREER WIDGET RESPONSIVE
   ======================== */
@media screen and (max-width: 1024px) {
    .bodex-career-hero__inner {
        max-width: 80%;
    }

    .bodex-career-hero__title {
        font-size: 42px;
    }

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

    .bodex-career-form__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media screen and (max-width: 768px) {
    .bodex-career-hero {
        padding: 80px 24px 48px;
        min-height: 450px;
    }

    .bodex-career-hero__inner {
        max-width: 100%;
    }

    .bodex-career-hero__title {
        font-size: 36px;
        letter-spacing: -0.01em;
    }

    .bodex-career-hero__desc {
        font-size: 16px;
    }

    .bodex-career-why {
        padding: 64px 24px;
    }

    .bodex-career-why__grid {
        grid-template-columns: 1fr;
    }

    .bodex-career-why__title {
        font-size: 28px;
    }

    .bodex-career-form {
        padding: 64px 24px;
    }

    .bodex-career-form__card {
        padding: 24px 20px;
    }

    .bodex-career-form__row {
        grid-template-columns: 1fr;
    }

    .bodex-career-form__title {
        font-size: 28px;
    }
}

@media screen and (max-width: 480px) {
    .bodex-career-hero {
        padding: 64px 16px 40px;
        min-height: 380px;
    }

    .bodex-career-hero__title {
        font-size: 28px;
    }

    .bodex-career-hero__badge {
        font-size: 11px;
    }

    .bodex-career-hero__btn {
        padding: 14px 24px;
        font-size: 16px;
        width: 100%;
        justify-content: center;
    }

    .bodex-career-why {
        padding: 48px 16px;
    }

    .bodex-career-why__card {
        padding: 24px;
    }

    .bodex-career-form {
        padding: 48px 16px;
    }

    .bodex-career-form__card {
        padding: 20px 16px;
    }

    .bodex-career-contact__card {
        padding: 24px;
    }
}