.vmns-services {
    --vmns-title: var(--color-title, #5a3a2e);
    --vmns-ink: var(--color-ink, #2d2924);
    --vmns-muted: var(--color-muted, #786f65);
    --vmns-paper: var(--color-paper, #fffdf9);
    --vmns-sand: var(--color-sand, #f4efe6);
    --vmns-gold: var(--color-gold, #b79a58);
    --vmns-display: var(--font-display, "Cormorant Garamond", Georgia, serif);
    --vmns-body: var(--font-body, "Inter", Arial, sans-serif);
    --vmns-radius: var(--radius-soft, 10px);
    width: 100%;
}

.vmns-services__grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.18fr) repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(230px, 1fr));
    gap: clamp(18px, 1.55vw, 26px);
}

.vmns-service-card:first-child {
    grid-row: span 2;
}

.vmns-service-card:nth-child(2) {
    grid-column: span 2;
}

.vmns-service-card__trigger {
    display: grid;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--vmns-radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
}

.vmns-service-card__image {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 230px;
    border-radius: var(--vmns-radius);
    overflow: hidden;
    background: var(--vmns-sand);
}

.vmns-service-card__image::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 68%;
    background: linear-gradient(to top, rgba(33, 25, 19, 0.82), rgba(33, 25, 19, 0));
    transition: background 180ms ease;
}

.vmns-service-card__image img,
.vmns-service-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--vmns-radius);
    object-fit: cover;
    transition: filter 180ms ease, transform 180ms ease;
}

.vmns-service-card__placeholder {
    background:
        linear-gradient(135deg, rgba(183, 154, 88, 0.16), rgba(90, 58, 46, 0.08)),
        var(--vmns-sand);
}

.vmns-service-card__title {
    display: block;
    position: absolute;
    left: clamp(18px, 1.6vw, 28px);
    right: clamp(18px, 1.6vw, 28px);
    bottom: clamp(18px, 1.6vw, 26px);
    z-index: 1;
    margin-top: 0;
    color: var(--vmns-paper);
    font-family: var(--vmns-display);
    font-size: clamp(28px, 2.15vw, 44px);
    font-weight: 500;
    line-height: 0.96;
    text-wrap: balance;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.28);
}

.vmns-service-card:not(:first-child) .vmns-service-card__title {
    font-size: clamp(24px, 1.8vw, 34px);
}

.vmns-service-card__trigger:hover .vmns-service-card__image img,
.vmns-service-card__trigger:focus-visible .vmns-service-card__image img {
    filter: saturate(1.04) contrast(1.03);
    transform: scale(1.025);
}

.vmns-service-card__trigger:hover .vmns-service-card__image::after,
.vmns-service-card__trigger:focus-visible .vmns-service-card__image::after {
    background: linear-gradient(to top, rgba(33, 25, 19, 0.9), rgba(33, 25, 19, 0.12));
}

.vmns-service-card__trigger:focus-visible {
    outline: 2px solid var(--vmns-gold);
    outline-offset: 7px;
}

.vmns-lightbox {
    --vmns-title: var(--color-title, #5a3a2e);
    --vmns-ink: var(--color-ink, #2d2924);
    --vmns-muted: var(--color-muted, #786f65);
    --vmns-paper: var(--color-paper, #fffdf9);
    --vmns-sand: var(--color-sand, #f4efe6);
    --vmns-gold: var(--color-gold, #b79a58);
    --vmns-display: var(--font-display, "Cormorant Garamond", Georgia, serif);
    --vmns-body: var(--font-body, "Inter", Arial, sans-serif);
    --vmns-radius: var(--radius-soft, 10px);
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 17, 13, 0.84);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.vmns-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

body.has-vmns-lightbox {
    overflow: hidden;
}

.vmns-lightbox__panel {
    position: relative;
    width: min(720px, calc(100vw - 36px));
    max-height: min(78vh, 760px);
    overflow: auto;
    padding: clamp(30px, 4vw, 54px);
    border-radius: var(--vmns-radius);
    background: #fffdf9 !important;
    color: #2d2924 !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.vmns-lightbox__entry h3 {
    margin: 0 46px 20px 0;
    color: #5a3a2e !important;
    font-family: var(--vmns-display);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 500;
    line-height: 1;
}

.vmns-lightbox__text {
    color: #786f65 !important;
    font-family: var(--vmns-display);
    font-size: clamp(18px, 1.5vw, 23px);
    font-weight: 400;
    line-height: 1.55;
}

.vmns-lightbox__text p {
    margin: 0 0 1em;
}

.vmns-lightbox__text p,
.vmns-lightbox__text li,
.vmns-lightbox__text div {
    font-family: inherit;
}

.vmns-lightbox__text > *:last-child {
    margin-bottom: 0;
}

.vmns-lightbox__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(90, 58, 46, 0.18);
    border-radius: 8px;
    background: rgba(255, 253, 249, 0.86);
    color: var(--vmns-title);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

.vmns-lightbox__close:hover,
.vmns-lightbox__close:focus-visible {
    background: var(--vmns-title);
    color: var(--vmns-paper);
    outline: none;
}

@media (max-width: 1024px) {
    .vmns-services__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .vmns-service-card:first-child,
    .vmns-service-card:nth-child(2) {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 700px) {
    .vmns-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vmns-service-card__image {
        min-height: clamp(190px, 45vw, 260px);
    }
}

@media (max-width: 560px) {
    .vmns-services__grid {
        gap: 18px 14px;
    }

    .vmns-service-card__title {
        left: 14px;
        right: 14px;
        bottom: 14px;
        font-size: clamp(24px, 7vw, 32px);
    }

    .vmns-service-card:not(:first-child) .vmns-service-card__title {
        font-size: clamp(22px, 6.5vw, 29px);
    }

    .vmns-lightbox {
        padding: 14px;
    }

    .vmns-lightbox__panel {
        width: calc(100vw - 28px);
        padding: 28px 22px;
    }

    .vmns-lightbox__entry h3 {
        font-size: clamp(30px, 9vw, 42px);
    }

    .vmns-lightbox__text {
        font-size: 19px;
    }
}