.dc-site .dc-reference-services-section {
    padding-block: 72px;
    overflow-x: hidden;
    overflow-x: clip;
    background: #fff;
}

.dc-reference-services-section > .dc-shell {
    width: min(1296px, calc(100% - 144px));
}

.dc-reference-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
}

.dc-service-showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    align-items: start;
}

.dc-service-showcase > .dc-reference-services {
    display: contents;
}

.dc-service-showcase__intro {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 2;
    padding: 36px 0;
    text-align: center;
}

.dc-site .dc-service-showcase__intro h2 {
    margin: 0 0 28px;
    color: #caa880;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.25;
}

.dc-service-showcase__intro p {
    margin: 0 0 22px;
    color: #383a41;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.75;
}

.dc-service-showcase__intro .dc-btn {
    margin-top: 8px;
    padding-inline: 24px;
    font-size: 14px;
    letter-spacing: .04em;
}

.dc-site .dc-reference-service-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-width: 0;
    min-height: 690px;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 16px;
    background: #383a41;
    color: #fff;
    text-decoration: none;
    --dc-service-photo-scale: 1.38;
}

.dc-reference-service-card::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, .07) 12%, rgba(0, 0, 0, .12) 40%, rgba(0, 0, 0, .72) 100%);
    pointer-events: none;
}

.dc-reference-service-card__image {
    position: absolute;
    z-index: -2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    transform: scale(var(--dc-service-photo-scale));
    transform-origin: 50% 30%;
    transition: transform .7s ease;
}

.dc-site .dc-reference-service-card--1 { --dc-service-photo-scale: 1.47; }
.dc-site .dc-reference-service-card--2 { --dc-service-photo-scale: 1.43; }
.dc-site .dc-reference-service-card--3 { --dc-service-photo-scale: 1.33; }
.dc-site .dc-reference-service-card--4 { --dc-service-photo-scale: 1.48; }
.dc-site .dc-reference-service-card--5 { --dc-service-photo-scale: 1.43; }

.dc-reference-service-card__content {
    width: 100%;
    padding: 36px;
}

.dc-site .dc-reference-service-card__title {
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    overflow-wrap: normal;
}

.dc-site .dc-reference-service-card__description {
    margin: 0 0 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.75;
}

.dc-reference-service-card__link {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
}

.dc-site .dc-reference-service-card:focus-visible {
    outline: 3px solid #80613e;
    outline-offset: 5px;
}

/* Cards stay visible until a working observer opts them into the reveal. */
.dc-service-reveal-pending {
    opacity: 0;
    transform: translate3d(64px, 0, 0);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--dc-service-reveal-delay, 0ms);
}

.dc-service-reveal-pending.dc-service-reveal-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (hover: hover) and (pointer: fine) {
    .dc-reference-service-card:hover .dc-reference-service-card__image {
        transform: scale(calc(var(--dc-service-photo-scale) + .035));
    }
}

@media (min-width: 768px) and (max-width: 1050px) {
    .dc-reference-services-section > .dc-shell {
        width: calc(100% - 72px);
    }

    .dc-reference-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .dc-service-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .dc-service-showcase__intro {
        grid-column: 1 / -1;
        grid-row: auto;
        max-width: 640px;
        margin-inline: auto;
        padding: 0 0 16px;
    }

    .dc-site .dc-reference-service-card {
        min-height: 600px;
    }

    .dc-reference-service-card__content {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .dc-site .dc-reference-services-section {
        padding-block: 48px 60px;
    }

    .dc-reference-services-section > .dc-shell {
        width: calc(100% - 72px);
        max-width: 440px;
    }

    .dc-reference-services,
    .dc-service-showcase {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .dc-service-showcase__intro {
        grid-column: auto;
        grid-row: auto;
        padding: 0;
    }

    .dc-site .dc-service-showcase__intro h2 {
        font-size: 24px;
    }

    .dc-service-showcase__intro p {
        margin-bottom: 20px;
    }

    .dc-site .dc-reference-service-card {
        min-height: 460px;
        min-height: clamp(400px, 58svh, 480px);
        --dc-service-photo-scale: 1.15;
    }

    .dc-reference-service-card__content {
        padding: 28px;
    }

    .dc-site .dc-reference-service-card__title { font-size: 26px; margin-bottom: 16px; padding-bottom: 16px; }
    .dc-site .dc-reference-service-card__description { font-size: 17px; line-height: 1.6; margin-bottom: 16px; }
    .dc-reference-service-card__link { font-size: 17px; }

    .dc-service-reveal-pending {
        transform: translate3d(40px, 0, 0);
        transition-delay: 0ms;
    }
}

@media (max-width: 359px) {
    .dc-reference-services-section > .dc-shell {
        width: calc(100% - 48px);
    }

    .dc-site .dc-reference-service-card {
        min-height: 400px;
    }

    .dc-reference-service-card__content {
        padding: 26px;
    }

    .dc-site .dc-reference-service-card__title {
        font-size: 26px;
    }

    .dc-site .dc-reference-service-card__description,
    .dc-reference-service-card__link {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-reference-service-card__image,
    .dc-service-reveal-pending {
        transition: none;
    }

    .dc-service-reveal-pending {
        opacity: 1;
        transform: none;
    }
}

/* Desktop uses one horizontal row; phones keep the compact vertical cards. */
.dc-services-slider { min-width: 0; }
.dc-services-slider__controls[hidden] { display: none; }
.dc-services-slider__controls { margin-top: 22px; }
.dc-services-slider__toolbar { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.dc-services-slider__hint { color: #80613e; font-size: 16px; }
.dc-services-slider__position { margin-left: auto; min-width: 68px; text-align: right; font-size: 16px; color: #383a41; font-variant-numeric: tabular-nums; }
.dc-services-slider__arrows { display: flex; gap: 10px; }
.dc-services-slider__arrows button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #caa880; border-radius: 50%; background: #fff; color: #80613e; font-size: 22px; transition: background-color .2s; }
.dc-services-slider__arrows button:hover:not(:disabled) { background: #f1e7da; }
.dc-services-slider__arrows button:disabled { opacity: .4; cursor: default; }
.dc-services-slider__progress { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 10px; background: #e9e3db; accent-color: #b28b5e; }
.dc-services-slider__progress::-webkit-progress-bar { background: #e9e3db; border-radius: 10px; }
.dc-services-slider__progress::-webkit-progress-value { background: #b28b5e; border-radius: 10px; }
.dc-services-slider__progress::-moz-progress-bar { background: #b28b5e; border-radius: 10px; }
@media (min-width: 992px) {
    .dc-service-showcase > .dc-services-slider { grid-column: 2 / -1; }
    .dc-service-showcase__intro { grid-row: auto; }
    .dc-reference-services { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 3); gap: 36px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-color: #b28b5e #e9e3db; scrollbar-width: thin; padding-bottom: 14px; }
    .dc-service-showcase .dc-reference-services { grid-auto-columns: calc((100% - 36px) / 2); }
    .dc-reference-services:focus-visible { outline: 3px solid #80613e; outline-offset: 5px; }
    .dc-reference-services > .dc-reference-service-card { scroll-snap-align: start; }
    .dc-services-slider--enhanced .dc-reference-services { scrollbar-width: none; padding-bottom: 0; }
    .dc-services-slider--enhanced .dc-reference-services::-webkit-scrollbar { display: none; }
    .dc-services-slider .dc-service-reveal-pending { opacity: 1; transform: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .dc-service-showcase > .dc-services-slider { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .dc-services-slider__controls { display: none; }
}
@media (min-width: 992px) and (max-width: 1100px) {
    .dc-reference-services { grid-auto-columns: calc((100% - 28px) / 2); gap: 28px; }
    .dc-service-showcase { grid-template-columns: minmax(0,1fr); }
    .dc-service-showcase__intro { grid-column: 1; max-width: 640px; padding: 0; margin-inline: auto; }
    .dc-service-showcase > .dc-services-slider { grid-column: 1; }
    .dc-service-showcase .dc-reference-services { grid-auto-columns: calc((100% - 28px) / 2); }
}
