/* Services Card (White Split) — 1440×696 */
.sv-card {
    background-color: #FFFFFF;
    padding: 80px 60px;
}

.sv-card__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* Content: 538px wide, flex column, gap 40px */
.sv-card__content {
    width: 538px;
    flex: 0 0 538px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Title: 40px Freight Neo, lh 1.15 */
.sv-card__title {
    font-family: 'Freight Neo', 'freight-neo-pro', Georgia, serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.15;
    color: #1C1C1C;
    margin: 0;
}

/* Description: 16px Geist, lh 1.39 */
.sv-card__desc {
    font-family: 'Geist', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.39;
    color: #1C1C1C;
    margin: 0;
}

/* Buttons: flex row, gap 12px */
.sv-card__buttons {
    display: flex;
    gap: 12px;
}

.sv-card__buttons .btn {
    padding: 16px 25px;
    border-radius: 1000px;
    white-space: nowrap;
}

.sv-card__buttons .btn:nth-child(1) {
    min-width: 144px;
}

.sv-card__buttons .btn:nth-child(2) {
    min-width: 228px;
}

/* Image: 669×536 */
.sv-card__image {
    width: 669px;
    height: 536px;
    flex: 0 0 669px;
    overflow: hidden;
}

.sv-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.sv-card:hover .sv-card__image img {
    transform: scale(1.03);
}

/* Layout: content-left (default) */
.sv-card--content-left .sv-card__inner {
    flex-direction: row;
}

.sv-card--content-left .sv-card__content {
    order: 1;
}

.sv-card--content-left .sv-card__image {
    order: 2;
}

/* Layout: image-left */
.sv-card--image-left .sv-card__inner {
    flex-direction: row;
}

.sv-card--image-left .sv-card__content {
    order: 2;
}

.sv-card--image-left .sv-card__image {
    order: 1;
}

/* Tablet: 1200px */
@media (max-width: 1200px) {
    .sv-card {
        padding: 60px 40px;
    }

    .sv-card__inner {
        gap: 40px;
    }

    .sv-card__content {
        width: auto;
        flex: 1;
    }

    .sv-card__image {
        width: auto;
        height: auto;
        flex: 1;
    }

    .sv-card__content,
    .sv-card__image {
        min-width: 0;
    }
}

/* Mobile: 768px */
@media (max-width: 768px) {
    .sv-card {
        padding: 60px 16px;
    }

    /* Override layout-specific flex-direction: row with equal specificity */
    .sv-card--content-left .sv-card__inner,
    .sv-card--image-left .sv-card__inner,
    .sv-card__inner {
        flex-direction: column;
        gap: 40px;
    }

    /* Reset order so content always stacks above image */
    .sv-card--content-left .sv-card__content,
    .sv-card--image-left .sv-card__content,
    .sv-card__content {
        width: 100%;
        flex: 1 1 auto;
        order: 1;
    }

    .sv-card--content-left .sv-card__image,
    .sv-card--image-left .sv-card__image,
    .sv-card__image {
        width: 100%;
        height: auto;
        flex: 1 1 auto;
        order: 2;
    }

    .sv-card__image img {
        aspect-ratio: 669 / 536;
    }

    .sv-card__title {
        font-size: 32px;
        line-height: 1;
    }

    .sv-card__buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .sv-card__buttons .btn {
        width: 100%;
        min-width: unset;
        flex: 0 0 auto;
    }
}

/* Mobile: 390px (mobile-optimized) */
/* Figma: node 5224-20646 | 390×760 | bg #FFFFFF | padding 80px/16px */
@media (max-width: 390px) {
    .sv-card {
        padding: 80px 16px;
        box-sizing: border-box;
    }

    /* Inner: 358×600, column, 40px gap between content and image */
    .sv-card__inner {
        max-width: 358px;
        margin: 0 auto;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        align-items: stretch;
    }

    /* Content container: 358×274, 40px gap between all children */
    .sv-card__content {
        width: 100%;
        flex: 0 0 auto;
        gap: 40px;
    }

    /* Title: Freight Neo 32px */
    .sv-card__title {
        font-size: 32px;
        line-height: 1;
        margin: 0;
        width: 100%;
    }

    /* Description: Geist Light 16px */
    .sv-card__desc {
        margin: 0;
        width: 100%;
    }

    /* Buttons: stacked vertically, full width, 12px gap */
    .sv-card__buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        justify-content: flex-start;
    }

    /* Each button: 358×48px, full width */
    .sv-card__buttons .btn {
        width: 100%;
        height: 48px;
        padding: 16px 25px;
        border-radius: 1000px;
        white-space: nowrap;
        min-width: unset;
        flex: 0 0 auto;
    }

    /* Image: 358×286 (669:536 ratio) */
    .sv-card__image {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
    }

    .sv-card__image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        aspect-ratio: 669 / 536;
    }

    /* Both layouts stack content-top / image-bottom on mobile */
    .sv-card--content-left .sv-card__inner,
    .sv-card--image-left .sv-card__inner {
        flex-direction: column;
    }

    .sv-card--content-left .sv-card__content,
    .sv-card--image-left .sv-card__content {
        order: 1;
    }

    .sv-card--content-left .sv-card__image,
    .sv-card--image-left .sv-card__image {
        order: 2;
    }
}