/* Service photographs remain native WordPress image blocks for easy replacement. */
.page-hero:has(.dsi-service-hero) {
    padding-block: 54px;
}

.page-hero > .wrap:has(> .dsi-service-hero) {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(32px, 4.5vw, 64px);
    align-content: center;
}

.page-hero > .wrap:has(> .dsi-service-hero) > :not(.dsi-service-hero) {
    grid-column: 1;
    min-width: 0;
}

.page-hero > .wrap:has(> .dsi-service-hero) > .section-kicker {
    align-self: end;
    margin-bottom: 0;
}

.page-hero > .wrap:has(> .dsi-service-hero) > h1 {
    align-self: center;
    font-size: clamp(32px, 3.9vw, 54px);
    line-height: 1.18;
    letter-spacing: -1.5px;
    margin-block: 15px 22px;
    overflow-wrap: break-word;
}

.page-hero > .wrap:has(> .dsi-service-hero) > .page-lead {
    align-self: start;
    font-size: 17px;
    line-height: 1.8;
}

.page-hero .dsi-service-hero {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    min-width: 0;
    position: relative;
    width: calc(100% - 8px);
    margin: 0 8px 8px 0;
    padding: 12px;
    border: 1px solid #c6cfdb;
    border-radius: 44px 12px 44px 12px;
    background: #fff;
    box-shadow: 8px 8px 0 var(--navy);
}

.dsi-service-hero img,
.dsi-service-card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
}

.dsi-service-hero img {
    border: 0;
    border-radius: 32px 5px 32px 5px;
    background: #e4e8eb;
}

.dsi-service-hero::before {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    width: 50px;
    height: 50px;
    border-top: 3px solid var(--red);
    border-right: 3px solid var(--red);
    border-top-right-radius: 8px;
    pointer-events: none;
}

.dsi-service-hero figcaption {
    margin: 10px 12px 2px 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
}

.home-service-grid .feature-card:has(> .dsi-service-card-image) {
    padding: 0 0 28px;
    overflow: hidden;
    border-radius: 26px 6px 6px 6px;
}

.home-service-grid .feature-card > .dsi-service-card-image {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 10px 10px 0;
    border-bottom: 1px solid var(--line);
    background: #eff2f6;
}

.dsi-service-card-image img {
    border: 1px solid #c6cfdb;
    border-radius: 17px 4px 17px 4px;
}

.dsi-service-card-image::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-top: 2px solid var(--red);
    border-right: 2px solid var(--red);
    border-top-right-radius: 4px;
    pointer-events: none;
}

.home-service-grid .feature-card:has(> .dsi-service-card-image) > :not(.dsi-service-card-image) {
    margin-inline: 28px;
}

.home-service-grid .feature-card:has(> .dsi-service-card-image) > .feature-index {
    margin-top: 25px;
    margin-bottom: 19px;
}

.home-service-grid .feature-card > .dsi-service-card-image a {
    display: block;
    border-radius: 17px 4px 17px 4px;
}

.home-service-grid .feature-card > .dsi-service-card-image a:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

.home-service-grid .feature-card > .dsi-service-card-image figcaption {
    margin: 0;
    padding: 10px 18px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.dsi-image-note {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

/* The hero frame contains the crop; its captions remain in normal flow. */
.dsi-content .hero-visual {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    padding: 48px 48px 44px 36px;
    background: var(--navy);
    isolation: isolate;
}

.dsi-content .hero-visual .wp-block-image,
.dsi-content .hero-visual .photo-overlay {
    inset: 24px 24px 24px 12px;
    border-radius: 72px 12px 72px 12px;
}

.dsi-content .hero-visual .wp-block-image {
    overflow: hidden;
    border: 1px solid #78859c;
}

.dsi-content .hero-visual::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 72px;
    height: 72px;
    border-top: 3px solid var(--red);
    border-right: 3px solid var(--red);
    border-top-right-radius: 18px;
    pointer-events: none;
}

.dsi-content .hero-visual .photo-overlay { pointer-events: none; }

.dsi-content .hero-image-caption,
.dsi-content .hero-visual .image-disclosure {
    position: relative;
    inset: auto;
    max-width: 100%;
    margin: 0;
    color: #fff;
    background: rgba(18, 29, 50, .94);
}

.dsi-content .hero-image-caption { padding: 12px 16px; }
.dsi-content .hero-image-caption p { margin: 0; }
.dsi-content .hero-image-caption .caption-line { flex-shrink: 0; }
.dsi-content .hero-visual .image-disclosure { padding: 3px 8px; text-shadow: none; }

@media (max-width: 900px) {
    .dsi-content .hero-visual { padding: 36px 32px 36px 28px; }

    .dsi-content .hero-visual .wp-block-image,
    .dsi-content .hero-visual .photo-overlay {
        inset: 16px 16px 16px 8px;
        border-radius: 48px 8px 48px 8px;
    }

    .dsi-content .hero-visual::after { top: 6px; right: 6px; width: 48px; height: 48px; }
    .dsi-content .hero-image-caption { padding: 10px 12px; gap: 10px; }

    .page-hero:has(.dsi-service-hero) {
        padding-block: 42px;
    }

    .page-hero > .wrap:has(> .dsi-service-hero) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .page-hero > .wrap:has(> .dsi-service-hero) > h1 {
        max-width: 720px;
        font-size: clamp(32px, 5.5vw, 46px);
        margin-block: 12px 19px;
    }

    .page-hero > .wrap:has(> .dsi-service-hero) > .page-lead {
        max-width: 720px;
    }

    .page-hero .dsi-service-hero {
        grid-column: 1;
        grid-row: auto;
        margin-top: 30px;
        max-width: 720px;
    }

    .dsi-service-hero img {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 640px) {
    .dsi-content .hero-visual {
        height: auto;
        min-height: 340px;
        padding: 48px 28px 32px;
    }

    .dsi-content .hero-visual .wp-block-image,
    .dsi-content .hero-visual .photo-overlay { inset: 12px; border-radius: 40px 8px 40px 8px; }

    .dsi-content .hero-visual::after { top: 4px; right: 4px; }

    .page-hero > .wrap:has(> .dsi-service-hero) > h1 {
        font-size: clamp(31px, 8.6vw, 40px);
        letter-spacing: -1px;
    }

    .page-hero > .wrap:has(> .dsi-service-hero) > .page-lead {
        font-size: 16px;
    }

    .page-hero .dsi-service-hero {
        width: calc(100% - 5px);
        margin-top: 26px;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 8px;
        border-radius: 30px 8px 30px 8px;
        box-shadow: 5px 5px 0 var(--navy);
    }

    .dsi-service-hero img { border-radius: 22px 4px 22px 4px; }
    .dsi-service-hero::before { top: 3px; right: 3px; width: 36px; height: 36px; border-width: 2px; }
    .dsi-service-hero figcaption { margin-inline: 4px 10px; }

    .home-service-grid .feature-card:has(> .dsi-service-card-image) > :not(.dsi-service-card-image) {
        margin-inline: 24px;
    }

    .home-service-grid .feature-card:has(> .dsi-service-card-image) {
        padding-bottom: 25px;
    }
}

@media print {
    .page-hero .dsi-service-hero { width: 100%; margin-right: 0; box-shadow: none; }
    .dsi-service-hero::before,
    .dsi-service-card-image::after,
    .dsi-content .hero-visual::after { content: none; }
}