:root {
    --diabos-blue: #073f61;
    --diabos-blue-dark: #082f47;
    --diabos-red: #e4363a;
    --diabos-text: #16191d;
    --diabos-muted: #596168;
    --diabos-light: #f4f6f7;
    --diabos-white: #ffffff;
}


/* =========================================================
   DIABOS – SHARED MAIN SERVICE HERO
   Used for:
   - Abbruch & Rückbau
   - Bohren
   - Sägen & Schneiden

   Brand palette:
   Red:   #cd282c
   Light: #d5dae5
   Dark:  #222d37
   ========================================================= */

/* ==========================================================
   DIABOS – INDIVIDUAL SERVICE PAGE HERO

   Used for individual Leistungen such as:
   - Abbrucharbeiten
   - Spezialabbruch
   - Industrieabbruch
   - Kernbohrungen
   - Tiefenbohrungen
   - Verankerungstechnik
   - Wandsägen
   - Seilsägen
   - Fugenschneiden
   etc.

   Elementor main class: diabos-hero
   ========================================================== */


/* ==========================================================
   COMPLETE HERO
   ========================================================== */

/* =========================================================
   DIABOS – INDIVIDUAL LEISTUNG HERO
   Elementor + ACF production version

   DESKTOP:
   Image left ~60%
   Smooth transparent transition
   Dark content right ~40%

   IMPORTANT:
   This is for individual Leistungen:
   Abbrucharbeiten, Spezialabbruch, Kernbohrungen,
   Wandsägen, Seilsägearbeiten etc.

   NOT for .di-service-hero Hauptleistungen.
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

/* =========================================================
   DIABOS – INDIVIDUAL LEISTUNG HERO
   Elementor + ACF
   DESKTOP: IMAGE 35% / CONTENT 65%
   ========================================================= */

.breadcumb-wrapper {
    display: none !important;
}


/* =========================================================
   HERO
   ========================================================= */

.diabos-hero {
    --dh-red: #cd282c;
    --dh-red-dark: #ad2024;

    --dh-dark: #222d37;
    --dh-panel: #17252f;
    --dh-panel-dark: #101a23;

    --dh-light: #d5dae5;
    --dh-white: #ffffff;

    position: relative;

    width: 100%;
    max-width: none;

    min-height: 660px;

    margin: 70px 0 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: hidden;

    background:
        var(--dh-panel-dark);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    isolation: isolate;
}


.diabos-hero,
.diabos-hero * {
    box-sizing: border-box;
}


/* =========================================================
   ELEMENTOR INNER
   Actual desktop layout
   ========================================================= */
.diabos-hero > .e-con-inner {
    width: 100% !important;
    max-width: none !important;

    min-height: 650px;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 46%)
        minmax(0, 54%);

    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}

/* =========================================================
   LEFT IMAGE – 35%
   ========================================================= */
.diabos-hero__media {
    position: relative !important;

    z-index: 1;

    grid-column: 1;
    grid-row: 1;

    width: 100% !important;
    max-width: none !important;

    min-width: 0;
    min-height: 650px;

    margin: 0 !important;
    padding: 0 !important;

    aspect-ratio: auto !important;

    overflow: hidden;

    background: var(--dh-panel-dark);
}


/* =========================================================
   DYNAMIC ACF IMAGE
   ========================================================= */

.diabos-hero__image,
.diabos-hero__image > .elementor-widget-container {
    position: absolute !important;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


.diabos-hero__image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover;

    /*
     * Useful for narrower image column.
     * Keeps more important scene toward center.
     */
    object-position: center center;

    transform: scale(1.01);

    transition:
        transform .7s ease;
}


/* =========================================================
   IMAGE FADE
   ========================================================= */

.diabos-hero__overlay {
    position: absolute !important;

    inset: 0;

    z-index: 2;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none;

    /*
     * Clear image → slightly dark toward right.
     */
    background:
        linear-gradient(
            90deg,

            rgba(23, 37, 47, 0) 0%,
            rgba(23, 37, 47, 0) 45%,

            rgba(23, 37, 47, .03) 58%,
            rgba(23, 37, 47, .09) 68%,
            rgba(23, 37, 47, .18) 77%,
            rgba(23, 37, 47, .32) 85%,
            rgba(23, 37, 47, .52) 92%,
            rgba(23, 37, 47, .74) 97%,
            rgba(23, 37, 47, .90) 100%
        ) !important;
}


/* =========================================================
   RIGHT CONTENT – 65%
   ========================================================= */

.diabos-hero__container {
    position: relative !important;

    z-index: 4;

    grid-column: 2;
    grid-row: 1;

    width: 100% !important;
    max-width: none !important;

    min-width: 0;
    min-height: 660px;

    margin: 0 !important;

    padding:
        0
        clamp(70px, 6vw, 150px)
        0
        clamp(80px, 7vw, 170px) !important;

    display: flex !important;

    align-items:
        flex-start !important;

    overflow:
        visible !important;

background: #17252f !important;
}


/* =========================================================
   SEAMLESS IMAGE → CONTENT TRANSITION
   ========================================================= */

.diabos-hero__container::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    right: 100%;

    /*
     * Broad overlap into image.
     */
    width:
        clamp(180px, 15vw, 350px);

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            rgba(23, 37, 47, 0) 0%,

            rgba(23, 37, 47, .01) 8%,
            rgba(23, 37, 47, .03) 17%,
            rgba(23, 37, 47, .07) 26%,
            rgba(23, 37, 47, .13) 35%,
            rgba(23, 37, 47, .22) 44%,
            rgba(23, 37, 47, .33) 53%,
            rgba(23, 37, 47, .47) 62%,
            rgba(23, 37, 47, .61) 71%,
            rgba(23, 37, 47, .74) 80%,
            rgba(23, 37, 47, .85) 88%,
            rgba(23, 37, 47, .93) 94%,
            rgba(23, 37, 47, .98) 98%,

            #17252f 100%
        );
}


/* =========================================================
   CONTENT WRAPPER
   ========================================================= */

.diabos-hero__content {
    position: relative;

    z-index: 5;

    width: 100% !important;
    max-width: 900px;

    min-width: 0;

    margin: 0 !important;

    /*
     * More breathing room at top.
     */
    padding:
        100px 0
        60px !important;

    gap: 0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* =========================================================
   KICKER
   ========================================================= */

.diabos-hero__eyebrow {
    position: relative;

    margin:
        0 0
        17px !important;

    padding-left:
        50px;
}


.diabos-hero__eyebrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 36px;
    height: 3px;

    background:
        var(--dh-red);

    transform:
        translateY(-50%);
}


.diabos-hero__eyebrow,
.diabos-hero__eyebrow .elementor-heading-title,
.diabos-hero__eyebrow h2,
.diabos-hero__eyebrow h3,
.diabos-hero__eyebrow p,
.diabos-hero__eyebrow div {
    color:
        var(--dh-light) !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        .095em;

    text-transform:
        uppercase;
}


.diabos-hero__eyebrow
.elementor-heading-title,
.diabos-hero__eyebrow h2,
.diabos-hero__eyebrow h3,
.diabos-hero__eyebrow p {
    margin:
        0 !important;
}


/* =========================================================
   H1
   ========================================================= */

.diabos-hero__title {
    position: relative;

    width: 100%;
    max-width: 900px;

    margin:
        0 !important;

    padding-bottom:
        26px;
}


.diabos-hero__title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 54px;
    height: 3px;

    background:
        var(--dh-red);
}


.diabos-hero__title
.elementor-heading-title,
.diabos-hero__title h1 {
    width: 100% !important;
    max-width: 900px !important;

    margin:
        0 !important;

    color:
        #ffffff !important;

    font-family:
        "Roboto Condensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    /*
     * More horizontal room now because content = 65%.
     */
    font-size:
        clamp(46px, 4vw, 72px) !important;

    font-weight:
        800 !important;

    line-height:
        .98 !important;

    letter-spacing:
        -.026em !important;

    overflow-wrap:
        normal !important;

    word-break:
        normal !important;

    hyphens:
        none !important;
}


/* Remove old blue span styling */

.diabos-hero__title
.elementor-heading-title span,
.diabos-hero__title h1 span {
    color:
        #ffffff !important;

    background:
        transparent !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.diabos-hero__description {
    width: 100%;

    max-width:
        760px;

    margin:
        22px 0
        29px !important;
}

.diabos-hero__description,
.diabos-hero__description .elementor-widget-container,
.diabos-hero__description p {
   color: #eef2f5 !important;

    font-size: 16px !important;
    font-weight: 400;

    line-height: 1.68 !important;
}


.diabos-hero__description p {
    margin-top:
        0 !important;
}


.diabos-hero__description p:last-child {
    margin-bottom:
        0 !important;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.diabos-breadcrumb {
    width: 100%;

    max-width:
        760px;

    margin:
        20px 0
        19px !important;

    padding-top:
        15px !important;

    border-top:
        1px solid
        rgba(213, 218, 229, .14) !important;
}


.diabos-breadcrumb,
.diabos-breadcrumb
.elementor-widget-container,
.diabos-breadcrumb
.elementor-breadcrumbs,
.diabos-breadcrumb #breadcrumbs,
.diabos-breadcrumb p,
.diabos-breadcrumb span,
.diabos-breadcrumb li {
    color:
        rgba(213, 218, 229, .60) !important;

    font-size:
        10.5px !important;

    font-weight:
        500;

    line-height:
        1.55;
}


.diabos-breadcrumb p {
    margin:
        0 !important;
}


.diabos-breadcrumb a {
    color:
        rgba(213, 218, 229, .78) !important;

    text-decoration:
        none !important;
}


.diabos-breadcrumb a:hover,
.diabos-breadcrumb a:focus-visible {
    color:
        #ffffff !important;
}


.diabos-breadcrumb ol,
.diabos-breadcrumb ul {
    display: flex;

    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


/* =========================================================
   CTA
   ========================================================= */

.diabos-hero__cta {
    align-self:
        flex-start;

    margin:
        0 !important;
}


.diabos-hero__cta
.elementor-button {
    min-height:
        52px;

    padding:
        0 23px !important;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

    color:
        #ffffff !important;

    background:
        var(--dh-red) !important;

    border:
        1px solid
        var(--dh-red) !important;

    border-radius:
        0 !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;

    line-height:
        1;

    text-transform:
        uppercase;

    text-decoration:
        none !important;

    transition:
        background-color .22s ease,
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}


.diabos-hero__cta
.elementor-button:hover {
    color:
        #ffffff !important;

    background:
        var(--dh-red-dark) !important;

    border-color:
        var(--dh-red-dark) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(205, 40, 44, .22);
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

@media (hover: hover) {

    .diabos-hero:hover
    .diabos-hero__image img {
        transform:
            scale(1.025);
    }

}


/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media (max-width: 1400px) and (min-width: 1101px) {

    .diabos-hero > .e-con-inner {
        grid-template-columns:
            minmax(0, 38%)
            minmax(0, 62%);
    }


    .diabos-hero__container {
        padding:
            0 55px
            0 65px !important;
    }


    .diabos-hero__container::before {
        width:
            240px;
    }


    .diabos-hero__content {
        padding-top:
            86px !important;
    }


    .diabos-hero__title
    .elementor-heading-title,
    .diabos-hero__title h1 {
        font-size:
            clamp(42px, 4.5vw, 62px) !important;
    }

}


/* =========================================================
   TABLET
   Image above, content below
   ========================================================= */

@media (max-width: 1100px) {

    .diabos-hero {
        min-height:
            0;

        margin-top:
            40px !important;
    }


    .diabos-hero > .e-con-inner {
        min-height:
            0;

        display:
            block !important;
    }


    /* IMAGE */

    .diabos-hero__media {
        width:
            100% !important;

        height:
            450px;

        min-height:
            450px;
    }


    /*
     * Horizontal fade → vertical fade
     */
    .diabos-hero__overlay {
        background:
            linear-gradient(
                180deg,

                rgba(23, 37, 47, 0) 25%,
                rgba(23, 37, 47, .02) 39%,
                rgba(23, 37, 47, .08) 52%,
                rgba(23, 37, 47, .18) 64%,
                rgba(23, 37, 47, .35) 75%,
                rgba(23, 37, 47, .55) 84%,
                rgba(23, 37, 47, .74) 91%,
                rgba(23, 37, 47, .89) 96%,
                #17252f 100%
            ) !important;
    }


    /* CONTENT */

    .diabos-hero__container {
        width:
            100% !important;

        min-height:
            0;

        margin:
            -72px 0
            0 !important;

        padding:
            0 36px !important;

        background:
            linear-gradient(
                180deg,
                #17252f 0%,
                #14212b 55%,
                #101a23 100%
            ) !important;
    }


    .diabos-hero__container::before {
        display:
            none;
    }


    .diabos-hero__content {
        width:
            min(900px, 100%) !important;

        max-width:
            900px;

        margin:
            0 auto !important;

        padding:
            54px 0
            44px !important;
    }


    .diabos-hero__title,
    .diabos-hero__title
    .elementor-heading-title,
    .diabos-hero__title h1 {
        max-width:
            820px !important;
    }


    .diabos-hero__title
    .elementor-heading-title,
    .diabos-hero__title h1 {
        font-size:
            clamp(42px, 6.5vw, 64px) !important;
    }


    .diabos-hero__description {
        max-width:
            740px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .diabos-hero {
        margin-top:
            0 !important;
    }


    /* IMAGE */

    .diabos-hero__media {
        height:
            315px;

        min-height:
            315px;
    }


    .diabos-hero__image img {
        object-position:
            center center;
    }


    /* CONTENT */

    .diabos-hero__container {
        margin-top:
            -46px !important;

        padding:
            0 20px !important;
    }


    .diabos-hero__content {
        padding:
            42px 0
            31px !important;
    }


    /* KICKER */

    .diabos-hero__eyebrow {
        margin-bottom:
            13px !important;

        padding-left:
            38px;
    }


    .diabos-hero__eyebrow::before {
        width:
            27px;

        height:
            2px;
    }


    .diabos-hero__eyebrow,
    .diabos-hero__eyebrow
    .elementor-heading-title,
    .diabos-hero__eyebrow h2,
    .diabos-hero__eyebrow h3,
    .diabos-hero__eyebrow p,
    .diabos-hero__eyebrow div {
        font-size:
            9.5px !important;

        letter-spacing:
            .075em;
    }


    /* H1 */

    .diabos-hero__title {
        padding-bottom:
            20px;
    }


    .diabos-hero__title::after {
        width:
            42px;
    }


    .diabos-hero__title
    .elementor-heading-title,
    .diabos-hero__title h1 {
        font-size:
            clamp(34px, 10vw, 48px) !important;

        line-height:
            1 !important;
    }


    /* DESCRIPTION */

    .diabos-hero__description {
        margin:
            17px 0
            23px !important;
    }


    .diabos-hero__description,
    .diabos-hero__description
    .elementor-widget-container,
    .diabos-hero__description p {
        font-size:
            14.5px !important;

        line-height:
            1.62 !important;
    }


    /* BREADCRUMB */

    .diabos-breadcrumb {
        margin:
            18px 0
            16px !important;

        padding-top:
            14px !important;
    }


    .diabos-breadcrumb,
    .diabos-breadcrumb
    .elementor-widget-container,
    .diabos-breadcrumb
    .elementor-breadcrumbs,
    .diabos-breadcrumb #breadcrumbs,
    .diabos-breadcrumb p,
    .diabos-breadcrumb span,
    .diabos-breadcrumb li {
        font-size:
            10px !important;
    }


    /* CTA */

    .diabos-hero__cta {
        width:
            100%;
    }


    .diabos-hero__cta
    .elementor-button {
        width:
            100%;

        min-height:
            52px;

        justify-content:
            space-between;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .diabos-hero__media {
        height:
            280px;

        min-height:
            280px;
    }


    .diabos-hero__container {
        padding:
            0 16px !important;
    }


    .diabos-hero__title
    .elementor-heading-title,
    .diabos-hero__title h1 {
        font-size:
            clamp(31px, 9.8vw, 42px) !important;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.diabos-hero a:focus-visible {
    outline:
        3px solid
        rgba(205, 40, 44, .58);

    outline-offset:
        3px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .diabos-hero *,
    .diabos-hero *::before,
    .diabos-hero *::after {
        transition:
            none !important;
    }

}

/* facts */


/* =========================================================
   DIABOS – HERO TRUST ROW
   Used inside individual Leistung hero

   Parent:
   .diabos-hero__facts

   Child:
   .diabos-hero__fact
   ========================================================= */


/* =========================================================
   TRUST ROW
   ========================================================= */

.diabos-hero__facts {
    width: 100%;
    max-width: 820px;

    margin:
        34px 0
        0 !important;

    padding:
        23px 0
        0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0 !important;

    border-top:
        1px solid
        rgba(213, 218, 229, .16);

    background:
        transparent !important;
}


/* Remove Elementor unwanted spacing */

.diabos-hero__facts,
.diabos-hero__facts > .e-con-inner {
    row-gap:
        0 !important;

    column-gap:
        0 !important;
}


.diabos-hero__facts > .e-con-inner {
    width:
        100% !important;

    max-width:
        none !important;

    display:
        contents;
}


/* =========================================================
   SINGLE TRUST ITEM
   ========================================================= */

.diabos-hero__fact {
    position: relative;

    min-width: 0;

    margin:
        0 !important;

    padding:
        1px 24px !important;

    display: flex !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        13px !important;

    background:
        transparent !important;

    border-right:
        1px solid
        rgba(213, 218, 229, .15);
}


/* First item */

.diabos-hero__fact:first-child {
    padding-left:
        0 !important;
}


/* Last item */

.diabos-hero__fact:last-child {
    padding-right:
        0 !important;

    border-right:
        0;
}


/* =========================================================
   ICON WIDGET
   ========================================================= */

.diabos-hero__fact
.elementor-widget-icon {
    width:
        auto !important;

    max-width:
        none !important;

    margin:
        0 !important;

    flex:
        0 0 auto;
}


.diabos-hero__fact
.elementor-widget-icon
.elementor-widget-container {
    margin:
        0 !important;

    padding:
        0 !important;
}


/* Actual icon */

.diabos-hero__fact
.elementor-icon {
    width:
        39px;

    height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 !important;

    color:
        #d5dae5;

    font-size:
        27px;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    transition:
        color .22s ease,
        transform .22s ease;
}


/* Elementor SVG */

.diabos-hero__fact
.elementor-icon svg {
    width:
        27px;

    height:
        27px;

    fill:
        currentColor;

    transition:
        transform .22s ease;
}


/* Font Awesome etc. */

.diabos-hero__fact
.elementor-icon i {
    font-size:
        27px;

    color:
        inherit;
}


/* =========================================================
   HEADING WIDGET
   ========================================================= */

.diabos-hero__fact
.elementor-widget-heading {
    width:
        auto !important;

    min-width:
        0;

    margin:
        0 !important;

    flex:
        1 1 auto;
}


.diabos-hero__fact
.elementor-widget-heading
.elementor-widget-container {
    margin:
        0 !important;

    padding:
        0 !important;
}


/* Heading/text */

.diabos-hero__fact
.elementor-heading-title,
.diabos-hero__fact h4,
.diabos-hero__fact h5,
.diabos-hero__fact p,
.diabos-hero__fact div {
    margin:
        0 !important;

    color:
        rgba(245, 247, 250, .94) !important;

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    line-height:
        1.38 !important;

    letter-spacing:
        .005em;
}


/* =========================================================
   SUBTLE HOVER
   ========================================================= */

@media (hover: hover) {

    .diabos-hero__fact:hover
    .elementor-icon {
        color:
            #ffffff;

        transform:
            translateY(-2px);
    }


    .diabos-hero__fact:hover
    .elementor-icon svg {
        transform:
            scale(1.05);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .diabos-hero__facts {
        max-width:
            760px;

        margin-top:
            31px !important;

        padding-top:
            21px !important;
    }


    .diabos-hero__fact {
        padding:
            0 20px !important;

        gap:
            12px !important;
    }


    .diabos-hero__fact:first-child {
        padding-left:
            0 !important;
    }


    .diabos-hero__fact:last-child {
        padding-right:
            0 !important;
    }


    .diabos-hero__fact
    .elementor-icon {
        width:
            37px;

        height:
            37px;

        font-size:
            25px;
    }


    .diabos-hero__fact
    .elementor-icon svg {
        width:
            25px;

        height:
            25px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .diabos-hero__facts {
        grid-template-columns:
            1fr;

        margin-top:
            27px !important;

        padding-top:
            0 !important;

        border-top:
            0;
    }


    .diabos-hero__fact,
    .diabos-hero__fact:first-child,
    .diabos-hero__fact:last-child {
        width:
            100%;

        min-height:
            64px;

        padding:
            13px 0 !important;

        gap:
            14px !important;

        border-right:
            0;

        border-top:
            1px solid
            rgba(213, 218, 229, .14);
    }


    .diabos-hero__fact
    .elementor-icon {
        width:
            38px;

        height:
            38px;

        font-size:
            25px;
    }


    .diabos-hero__fact
    .elementor-icon svg {
        width:
            24px;

        height:
            24px;
    }


    .diabos-hero__fact
    .elementor-heading-title,
    .diabos-hero__fact h4,
    .diabos-hero__fact h5,
    .diabos-hero__fact p,
    .diabos-hero__fact div {
        font-size:
            12.5px !important;

        line-height:
            1.4 !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .diabos-hero__fact {
        min-height:
            60px;

        gap:
            12px !important;
    }


    .diabos-hero__fact
    .elementor-icon {
        width:
            35px;

        height:
            35px;
    }


    .diabos-hero__fact
    .elementor-icon svg {
        width:
            22px;

        height:
            22px;
    }

}

/* =========================================================
   DIABOS – HERO H2 / SERVICE SUBTITLE
   New SEO/service heading directly below H1
   ========================================================= */


/* ---------------------------------------------------------
   H1 spacing adjustment
   --------------------------------------------------------- */

.diabos-hero__title {
    padding-bottom: 23px;
}


/* Keep existing red H1 accent */
.diabos-hero__title::after {
    width: 54px;
    height: 3px;

    background: var(--dh-red);
}


/* =========================================================
   H2 – MAIN SERVICE DESCRIPTION
   ========================================================= */

.diabos-hero__subtitle {
    position: relative;

    width: 100%;
    max-width: 780px;

    margin: 24px 0 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* Remove Elementor spacing */
.diabos-hero__subtitle .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}


/* H2 typography */
.diabos-hero__subtitle .elementor-heading-title,
.diabos-hero__subtitle h2 {

    margin: 0 !important;

    color: #ffffff !important;

    font-family:
        "Roboto Condensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        clamp(24px, 1.75vw, 31px) !important;

    font-weight:
        700 !important;

    line-height:
        1.18 !important;

    letter-spacing:
        -.012em !important;

    text-transform:
        none !important;

    overflow-wrap:
        normal;

    word-break:
        normal;

    hyphens:
        none;
}


/* =========================================================
/* =========================================================
   DIABOS – HERO H2
   Clean / premium / calm version
   ========================================================= */

.diabos-hero__subtitle {
    position: relative;

    width: 100%;
    max-width: 700px;

    margin: 22px 0 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* Elementor reset */
.diabos-hero__subtitle .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}


/* Actual H2 */
.diabos-hero__subtitle .elementor-heading-title,
.diabos-hero__subtitle h2 {

    margin: 0 !important;

    color: rgba(255,255,255,.93) !important;

    font-family:
        "Roboto Condensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        clamp(22px, 1.45vw, 28px) !important;

    font-weight:
        600 !important;

    line-height:
        1.22 !important;

    letter-spacing:
        -.012em !important;

    text-transform:
        none !important;

    max-width: 700px;

    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}


/* =========================================================
   DESCRIPTION
   Softer than H2
   ========================================================= */

.diabos-hero__description {
    width: 100%;
    max-width: 720px;

    margin:
        14px 0
        22px !important;
}


/* HERO DESCRIPTION – clearer / more readable */
.diabos-hero__description,
.diabos-hero__description .elementor-widget-container,
.diabos-hero__description p {
    color: rgba(255, 255, 255, .82) !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

.diabos-hero__description {
    max-width: 760px;

    margin:
        14px 0
        22px !important;
}


/* =========================================================
   H1
   Slightly better spacing
   ========================================================= */

.diabos-hero__title {
    padding-bottom:
        21px !important;
}


.diabos-hero__title::after {
    width:
        48px !important;

    height:
        3px !important;
}


/* =========================================================
   BREADCRUMB
   Bring it a little closer
   ========================================================= */

.diabos-breadcrumb {
    max-width:
        720px;

    margin:
        15px 0
        22px !important;

    padding-top:
        13px !important;
}


/* =========================================================
   CTA
   Slightly more premium
   ========================================================= */

.diabos-hero__cta .elementor-button {

    min-height:
        54px;

    padding:
        0 27px !important;

    gap:
        22px;

    font-size:
        12px !important;

    letter-spacing:
        .02em;

    background:
        #cd282c !important;

    border-color:
        #cd282c !important;
}


/* =========================================================
   CONTENT POSITION
   ========================================================= */

@media (min-width: 1101px) {

    .diabos-hero {
        min-height:
            690px;
    }

    .diabos-hero > .e-con-inner,
    .diabos-hero__media,
    .diabos-hero__container {
        min-height:
            690px;
    }

    .diabos-hero__content {
        padding:
            72px 0
            50px !important;
    }

}


/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media (max-width: 1400px) and (min-width: 1101px) {

    .diabos-hero__subtitle,
    .diabos-hero__subtitle .elementor-heading-title,
    .diabos-hero__subtitle h2 {
        max-width:
            650px;
    }

    .diabos-hero__subtitle .elementor-heading-title,
    .diabos-hero__subtitle h2 {
        font-size:
            23px !important;
    }

    .diabos-hero__description,
    .diabos-breadcrumb {
        max-width:
            670px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .diabos-hero__subtitle {
        margin-top:
            20px !important;
    }

    .diabos-hero__subtitle .elementor-heading-title,
    .diabos-hero__subtitle h2 {
        font-size:
            clamp(22px, 3.3vw, 27px) !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .diabos-hero__subtitle {
        margin-top:
            17px !important;
    }

    .diabos-hero__subtitle .elementor-heading-title,
    .diabos-hero__subtitle h2 {

        font-size:
            21px !important;

        line-height:
            1.24 !important;
    }

    .diabos-hero__description {
        margin:
            13px 0
            19px !important;
    }

    .diabos-hero__description,
    .diabos-hero__description .elementor-widget-container,
    .diabos-hero__description p {

        font-size:
            14px !important;

        line-height:
            1.6 !important;
    }

}

.diabos-hero__eyebrow {
    margin-top: 40px !important;
}
/* =========================================================
   HERO
   ========================================================= */

.di-service-hero {
    --dsh-red: #cd282c;
    --dsh-red-dark: #ad2024;
    --dsh-light: #d5dae5;
    --dsh-dark: #222d37;
    --dsh-dark-2: #1c252d;
    --dsh-white: #ffffff;

    position: relative;
    width: 100%;
    min-height: 680px;
    margin-top: 70px;
    overflow: hidden;

    color: var(--dsh-white);
    background: var(--dsh-dark);

    font-family:
        "Roboto",
        Arial,
        sans-serif;

    isolation: isolate;
}


.di-service-hero,
.di-service-hero * {
    box-sizing: border-box;
}


.di-service-hero a {
    text-decoration: none;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.di-service-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    background: var(--dsh-dark);
}


.di-service-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center center;

    transform: scale(1.01);
}


/*
 * Dark left side for text,
 * progressively clearer toward the right.
 */
.di-service-hero__media::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(34, 45, 55, .98) 0%,
            rgba(34, 45, 55, .94) 23%,
            rgba(34, 45, 55, .77) 43%,
            rgba(34, 45, 55, .46) 62%,
            rgba(34, 45, 55, .25) 78%,
            rgba(34, 45, 55, .17) 100%
        ),
        linear-gradient(
            180deg,
            rgba(34, 45, 55, .08) 0%,
            rgba(34, 45, 55, .03) 55%,
            rgba(34, 45, 55, .55) 100%
        );
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.di-service-hero__inner {
    position: relative;
    z-index: 2;

    width: min(1480px, calc(100% - 96px));
    min-height: 600px;

    margin: 0 auto;

    padding:
        clamp(58px, 6vh, 82px)
        0
        150px;

    display: flex;
    align-items: center;
}


.di-service-hero__content {
    width: min(720px, 55vw);
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.di-service-hero__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 9px;

    margin: 0 0 32px;

    color: rgba(213, 218, 229, .68);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}


.di-service-hero__breadcrumb a {
    color: rgba(213, 218, 229, .78);

    text-decoration: none;

    transition: color .2s ease;
}


.di-service-hero__breadcrumb a:hover,
.di-service-hero__breadcrumb a:focus-visible {
    color: #ffffff;
}


.di-service-hero__breadcrumb [aria-current="page"] {
    color: #ffffff;
}


/* =========================================================
   KICKER
   ========================================================= */

.di-service-hero__kicker {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 20px;

    color: var(--dsh-light);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: .11em;
    text-transform: uppercase;
}


.di-service-hero__kicker::before {
    content: "";

    width: 42px;
    height: 2px;
    flex: 0 0 42px;

    background: var(--dsh-red);
}


/* =========================================================
   H1
   ========================================================= */

.di-service-hero__title {
    margin: 0;

    color: #ffffff;

    font-family:
        "Roboto Condensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: clamp(64px, 6.5vw, 104px);
    font-weight: 800;
    line-height: .88;

    letter-spacing: -.025em;
    text-transform: uppercase;

    text-shadow:
        0 10px 34px rgba(0, 0, 0, .18);
}


.di-service-hero__title > span {
    display: block;
}


.di-service-hero__dot {
    color: var(--dsh-red);
}


/* =========================================================
   INTRO
   ========================================================= */

.di-service-hero__intro {
    max-width: 650px;

    margin: 28px 0 30px;

    color: rgba(213, 218, 229, .87);

    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}


/* =========================================================
   CTA
   ========================================================= */

.di-service-hero__cta {
    min-height: 52px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    color: #ffffff !important;
    background: var(--dsh-red);

    border: 1px solid var(--dsh-red);

    font-size: 13px;
    font-weight: 800;
    line-height: 1;

    text-decoration: none !important;
    text-transform: uppercase;

    transition:
        background-color .22s ease,
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}


.di-service-hero__cta svg {
    width: 18px;
    height: 18px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .22s ease;
}


.di-service-hero__cta:hover {
    color: #ffffff !important;
    background: var(--dsh-red-dark);
    border-color: var(--dsh-red-dark);

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(205, 40, 44, .23);
}


.di-service-hero__cta:hover svg {
    transform: translate(3px, -3px);
}


/* =========================================================
   BOTTOM RELATED SERVICES
   ========================================================= */
.di-service-hero__related {
    position: absolute;

    right: clamp(48px, 5vw, 100px);
    bottom: 26px;
    left: auto;

    z-index: 5;

    display: block;

    width: min(560px, calc(100% - 96px));
    min-height: 0;

    border: 0;
    background: transparent;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.di-service-hero__related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}
.di-service-hero__related-label {
    display: block;

    margin: 0 0 9px;

    color: rgba(213, 218, 229, .72);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: .12em;
    text-align: right;
    text-transform: uppercase;
}
/* =========================================================
   RELATED ITEM
   ========================================================= */
.di-service-hero__related-item {
    position: relative;

    min-width: 0;
    min-height: 96px;

    padding: 14px 16px;

    display: grid;

    grid-template-columns:
        26px minmax(0, 1fr) 38px;

    align-items: center;

    gap: 13px;

    overflow: hidden;

    color: #ffffff !important;
    background: var(--dsh-dark);

    border: 1px solid rgba(213, 218, 229, .16);

    text-decoration: none !important;

    box-shadow:
        0 10px 26px rgba(0, 0, 0, .14);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


.di-service-hero__related-item +
.di-service-hero__related-item {
    border-left: 1px solid rgba(213, 218, 229, .17);
}


/* Short top red accent */
.di-service-hero__related-item::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;

    width: 80px;
    height: 3px;

    background: var(--dsh-red);

    transition: width .35s ease;
}


/* =========================================================
   RELATED BACKGROUND IMAGE
   ========================================================= */

.di-service-hero__related-image {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}


.di-service-hero__related-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .44;

    filter:
        saturate(.92)
        contrast(1.04);

    transform: scale(1.02);

    transition:
        opacity .4s ease,
        filter .4s ease,
        transform .6s ease;
}


.di-service-hero__related-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(34, 45, 55, .97) 0%,
            rgba(34, 45, 55, .90) 31%,
            rgba(34, 45, 55, .70) 59%,
            rgba(34, 45, 55, .43) 82%,
            rgba(34, 45, 55, .28) 100%
        );

    transition: background .4s ease;
}


/* =========================================================
   RELATED CONTENT
   ========================================================= */

.di-service-hero__related-number,
.di-service-hero__related-copy,
.di-service-hero__related-arrow {
    position: relative;
    z-index: 2;
}


.di-service-hero__related-number {
    align-self: start;

    padding-top: 4px;

    color: rgba(213, 218, 229, .62);

    font-family:
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .14em;
}


.di-service-hero__related-copy {
    min-width: 0;
}


.di-service-hero__related-copy strong {
    display: block;

    margin: 0;

    color: #ffffff;

    font-family:
        "Roboto Condensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: clamp(22px, 2vw, 30px);
    font-weight: 800;
    line-height: 1;

    text-transform: uppercase;

    text-shadow:
        0 2px 9px rgba(0, 0, 0, .28);
}


.di-service-hero__related-copy strong::after {
    content: "";

    display: block;

    width: 28px;
    height: 2px;

    margin-top: 10px;

    background: var(--dsh-red);

    transition: width .3s ease;
}


.di-service-hero__related-copy > span {
    display: block;

    max-width: 480px;

    margin-top: 12px;

    color: rgba(213, 218, 229, .78);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;

    letter-spacing: .04em;
    text-transform: uppercase;
}


/* =========================================================
   RELATED ARROW
   ========================================================= */

.di-service-hero__related-arrow {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    color: #ffffff;

    border: 1px solid rgba(213, 218, 229, .28);

    background: rgba(34, 45, 55, .45);

    transition:
        background-color .28s ease,
        border-color .28s ease,
        transform .28s ease;
}


.di-service-hero__related-arrow svg {
    width: 18px;
    height: 18px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   RELATED HOVER
   ========================================================= */

.di-service-hero__related-item:hover::before {
    width: 100%;
}


.di-service-hero__related-item:hover
.di-service-hero__related-image img {
    opacity: .90;

    filter:
        saturate(1.07)
        contrast(1.05)
        brightness(1.02);

    transform: scale(1.045);
}


.di-service-hero__related-item:hover
.di-service-hero__related-image::after {
    background:
        linear-gradient(
            90deg,
            rgba(34, 45, 55, .86) 0%,
            rgba(34, 45, 55, .71) 30%,
            rgba(34, 45, 55, .48) 58%,
            rgba(34, 45, 55, .27) 82%,
            rgba(34, 45, 55, .15) 100%
        );
}


.di-service-hero__related-item:hover
.di-service-hero__related-copy strong::after {
    width: 46px;
}


.di-service-hero__related-item:hover
.di-service-hero__related-arrow {
    color: #ffffff;

    background: var(--dsh-red);
    border-color: var(--dsh-red);

    transform: translate(3px, -3px);
}


/* =========================================================
   TABLET + MOBILE
   Related services become full-width navigation
   ========================================================= */

@media (max-width: 1100px) {

    /* -----------------------------------------
       HERO
       ----------------------------------------- */

    .di-service-hero {
        min-height: auto;
    }


    .di-service-hero__inner {
        width: calc(100% - 64px);

        min-height: 600px;

        padding-top: 68px;
        padding-bottom: 70px;
    }


    .di-service-hero__content {
        width: min(700px, 78vw);
    }


    .di-service-hero__title {
        font-size: clamp(56px, 8vw, 82px);
    }


    /* -----------------------------------------
       RELATED SERVICES
       Full width beneath main hero content
       ----------------------------------------- */

    .di-service-hero__related {
        position: relative;

        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        min-height: 0;

        margin: 0;

        padding: 0;

        display: block;

        background: #222d37;

        border-top:
            1px solid
            rgba(213, 218, 229, .16);

        box-shadow: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    /* -----------------------------------------
       SMALL HEADER
       ----------------------------------------- */

    .di-service-hero__related-label {
        display: block;

        width: 100%;

        margin: 0;

        padding:
            14px
            32px
            12px;

        color:
            rgba(213, 218, 229, .62);

        background:
            rgba(255, 255, 255, .025);

        border-bottom:
            1px solid
            rgba(213, 218, 229, .12);

        font-size: 10px;
        font-weight: 700;
        line-height: 1.3;

        letter-spacing: .12em;

        text-align: left;

        text-transform: uppercase;
    }


    /* -----------------------------------------
       GRID
       One row below another – NO GAP
       ----------------------------------------- */

    .di-service-hero__related-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        width: 100%;
    }


    /* -----------------------------------------
       SERVICE ROW
       ----------------------------------------- */

    .di-service-hero__related-item {
        width: 100%;

        min-height: 112px;

        padding:
            20px
            32px;

        display: grid;

        grid-template-columns:
            38px
            minmax(0, 1fr)
            42px;

        align-items: center;

        gap: 18px;

        border: 0;

        background: #222d37;

        box-shadow: none;

        transform: none;
    }


    /*
     * Clean line between service 01 and 02
     */
    .di-service-hero__related-item +
    .di-service-hero__related-item {
        border-top:
            1px solid
            rgba(213, 218, 229, .16);

        border-left: 0;
    }


    /* Short red accent */

    .di-service-hero__related-item::before {
        top: 0;
        left: 0;

        width: 4px;
        height: 100%;

        background: #cd282c;
    }


    /* -----------------------------------------
       IMAGE
       ----------------------------------------- */

    .di-service-hero__related-image img {
        opacity: .55;

        transform: scale(1.01);
    }


    .di-service-hero__related-image::after {
        background:
            linear-gradient(
                90deg,
                rgba(34, 45, 55, .97) 0%,
                rgba(34, 45, 55, .90) 40%,
                rgba(34, 45, 55, .70) 68%,
                rgba(34, 45, 55, .52) 100%
            );
    }


    /* -----------------------------------------
       NUMBER
       ----------------------------------------- */

    .di-service-hero__related-number {
        align-self: center;

        padding: 0;

        color:
            rgba(213, 218, 229, .56);

        font-size: 13px;
    }


    /* -----------------------------------------
       TITLE
       ----------------------------------------- */

    .di-service-hero__related-copy strong {
        font-size:
            clamp(20px, 3vw, 25px);

        line-height: 1;
    }


    .di-service-hero__related-copy strong::after {
        width: 24px;

        margin-top: 7px;
    }


    /* Small service list */

    .di-service-hero__related-copy > span {
        margin-top: 8px;

        font-size: 10px;
        line-height: 1.4;

        letter-spacing: .035em;
    }


    /* -----------------------------------------
       ARROW
       ----------------------------------------- */

    .di-service-hero__related-arrow {
        width: 40px;
        height: 40px;

        background:
            rgba(34, 45, 55, .46);
    }


    /* -----------------------------------------
       HOVER
       ----------------------------------------- */

    .di-service-hero__related-item:hover {
        transform: none;

        background: #27343f;

        box-shadow: none;
    }


    .di-service-hero__related-item:hover::before {
        width: 4px;
        height: 100%;
    }


    .di-service-hero__related-item:hover
    .di-service-hero__related-image img {
        opacity: .80;

        transform: scale(1.025);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------
       MAIN HERO
       ----------------------------------------- */

    .di-service-hero {
        margin-top: 0;
    }


    .di-service-hero__media::after {
        background:
            linear-gradient(
                180deg,
                rgba(34, 45, 55, .89) 0%,
                rgba(34, 45, 55, .78) 48%,
                rgba(34, 45, 55, .92) 100%
            );
    }


    .di-service-hero__inner {
        width: calc(100% - 40px);

        min-height: 570px;

        padding:
            55px 0
            58px;
    }


    .di-service-hero__content {
        width: 100%;
    }


    .di-service-hero__breadcrumb {
        margin-bottom: 22px;

        font-size: 11px;
    }


    .di-service-hero__kicker {
        font-size: 11px;

        letter-spacing: .08em;
    }


    .di-service-hero__kicker::before {
        width: 30px;

        flex-basis: 30px;
    }


    .di-service-hero__title {
        font-size:
            clamp(46px, 13vw, 66px);

        line-height: .92;
    }


    .di-service-hero__intro {
        margin:
            21px 0
            24px;

        font-size: 15px;
        line-height: 1.6;
    }


    .di-service-hero__cta {
        width: 100%;

        justify-content:
            space-between;
    }


    /* -----------------------------------------
       RELATED SECTION
       ----------------------------------------- */

    .di-service-hero__related-label {
        padding:
            13px
            20px
            11px;

        font-size: 9px;
    }


    .di-service-hero__related-item {
        min-height: 100px;

        padding:
            17px
            20px;

        grid-template-columns:
            28px
            minmax(0, 1fr)
            38px;

        gap: 13px;
    }


    .di-service-hero__related-number {
        font-size: 11px;
    }


    .di-service-hero__related-copy strong {
        font-size:
            clamp(21px, 6vw, 25px);
    }


    .di-service-hero__related-copy > span {
        margin-top: 7px;

        font-size: 8.5px;

        line-height: 1.4;
    }


    .di-service-hero__related-arrow {
        width: 36px;
        height: 36px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .di-service-hero__inner {
        width: calc(100% - 32px);
    }


    .di-service-hero__title {
        font-size:
            clamp(42px, 13vw, 55px);
    }


    .di-service-hero__related-label {
        padding-left: 16px;
        padding-right: 16px;
    }


    .di-service-hero__related-item {
        padding:
            16px;

        grid-template-columns:
            25px
            minmax(0, 1fr)
            34px;

        gap: 10px;
    }


    .di-service-hero__related-arrow {
        position: relative;

        right: auto;
        bottom: auto;

        width: 34px;
        height: 34px;
    }


    .di-service-hero__related-copy {
        padding-right: 0;
    }

}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.di-service-hero a:focus-visible {
    outline:
        3px solid
        rgba(205, 40, 44, .55);

    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .di-service-hero *,
    .di-service-hero *::before,
    .di-service-hero *::after {
        transition: none !important;
    }

}


/* =========================================================
   DIABOS – MAIN SERVICE SECTION INTRO
   Used below the main service hero
   ========================================================= */
/* =========================================================
   DIABOS – SIMPLE MAIN SERVICE INTRO
   Kicker + wide H2 only
   ========================================================= */

.di-service-intro {
    --dsi-red: #cd282c;
    --dsi-blue: #073f61;
    --dsi-dark: #222d37;
    --dsi-border: #e3e7eb;
    --dsi-white: #ffffff;

    width: 100%;

    margin: 0 0 24px;

    background: var(--dsi-white);
}


.di-service-intro,
.di-service-intro * {
    box-sizing: border-box;
}


/* =========================================================
   INNER
   ========================================================= */

.di-service-intro__inner {
 
    max-width: 1760px;

    margin: 0 auto;



    border-bottom:
        1px solid
        var(--dsi-border);
}


/* =========================================================
   HEADING WRAPPER
   ========================================================= */

.di-service-intro__heading {
    width: 100%;
    max-width: none;
}


/* =========================================================
   KICKER
   ========================================================= */

.di-service-intro__kicker {
    display: flex;
    align-items: center;

    gap: 12px;

    margin:
        0 0
        14px;

    color: var(--dsi-blue);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.di-service-intro__kicker::before {
    content: "";

    width: 30px;
    height: 2px;

    flex: 0 0 30px;

    background:
        var(--dsi-red);
}


/* =========================================================
   H2
   ========================================================= */

.di-service-intro__title {
    width: 100%;
    max-width: 1450px;

    margin: 0;

    color:
        var(--dsi-dark);

    font-family:
        "Roboto Condensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        clamp(36px, 3.1vw, 56px);

    font-weight: 750;

    line-height: 1.04;

    letter-spacing:
        -.025em;

    text-wrap: balance;
}


/* =========================================================
   LARGE SCREENS
   ========================================================= */

@media (min-width: 1500px) {

    .di-service-intro__inner {

        padding-top: 42px;
        padding-bottom: 32px;
    }


    .di-service-intro__title {
        max-width: 1500px;

        font-size:
            clamp(40px, 3vw, 58px);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .di-service-intro {
        margin-bottom: 22px;
    }


    .di-service-intro__inner {
        width:
            calc(100% - 20px);

        padding:
            34px 0
            26px;
    }


    .di-service-intro__title {
        max-width: 100%;

        font-size:
            clamp(32px, 4.4vw, 46px);

        line-height: 1.06;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .di-service-intro {
        margin-bottom: 18px;
    }


    .di-service-intro__inner {
        width:
            calc(100% - 10px);

        padding:
            28px 0
            22px;
    }


    .di-service-intro__kicker {
        gap: 10px;

        margin-bottom: 11px;

        font-size: 10px;

        letter-spacing: .07em;
    }


    .di-service-intro__kicker::before {
        width: 24px;

        flex-basis: 24px;
    }


    .di-service-intro__title {
        max-width: 100%;

        font-size:
            clamp(29px, 8.3vw, 39px);

        line-height: 1.08;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .di-service-intro__inner {
        width:
            calc(100% - 32px);
    }


    .di-service-intro__title {
        font-size:
            clamp(27px, 8vw, 35px);
    }

}
/* =========================================================
   DIABOS – KOMPAKTE LEISTUNGS-EINLEITUNG
   Passend zu Hero + Leistungsboxen
   ========================================================= */

.diabos-tb-intro {
    --tb-blue: #073f61;
    --tb-red: #e4363a;
    --tb-text: #16191d;
    --tb-muted: #596168;
    --tb-border: #dce3e7;
    --tb-light: #f6f8f9;
    --tb-white: #ffffff;

    width: 100%;
    max-width: 1380px;

    margin: 0 auto 28px;
}


/* =========================================================
   GESAMTER BLOCK
   ========================================================= */
.diabos-tb-intro__inner {
    position: relative;

    display: grid;

    /* Mehr Platz für den Titel */
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(360px, 0.75fr);

    gap: clamp(28px, 3vw, 48px);
    align-items: center;

    padding: 30px 34px 32px;

    background: var(--tb-white);
    border: 1px solid var(--tb-border);
    border-top: 4px solid var(--tb-blue);

    box-shadow: 0 8px 24px rgba(7, 63, 97, 0.045);
}

.diabos-tb-intro__heading {
    width: 100%;
    max-width: 900px;
}

.diabos-tb-intro__title {
    width: 100%;
    max-width: 900px;

    margin: 0;

    color: var(--tb-text);

    font-size: clamp(34px, 2.65vw, 44px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.028em;

    text-wrap: balance;
}

.diabos-tb-intro__content {
    width: 100%;
    max-width: 470px;
    justify-self: end;
}


.diabos-tb-intro__meta {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.diabos-tb-intro__meta li {
    display: inline-flex;
    align-items: center;

    min-height: 36px;
    padding: 8px 13px;

    background: var(--tb-light);

    border: 1px solid #dde5e9;
    border-radius: 2px;

    color: var(--tb-blue);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;

    white-space: normal;
}


/* leichter visueller Akzent beim Hover */

.diabos-tb-intro__meta li:hover {
    border-color: #c5d3da;
    background: #f2f6f8;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .diabos-tb-intro {
        width: calc(100% - 40px);
    }

    .diabos-tb-intro__inner {
        grid-template-columns:
            minmax(420px, 1.15fr)
            minmax(340px, 0.85fr);

        gap: 32px;

        padding: 28px 28px 30px;
    }

    .diabos-tb-intro__title {
        font-size: clamp(31px, 4vw, 42px);
    }
}


/* =========================================================
   TABLET / KLEINER DESKTOP
   ========================================================= */

@media (max-width: 900px) {

    .diabos-tb-intro__inner {
        grid-template-columns: 1fr;

        gap: 24px;

        padding: 28px 26px 30px;
    }

    .diabos-tb-intro__heading,
    .diabos-tb-intro__content {
        max-width: 100%;
    }

    .diabos-tb-intro__content {
        justify-self: stretch;
    }

    .diabos-tb-intro__meta {
        margin-top: 2px;
    }
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 640px) {

    .diabos-tb-intro {
        width: calc(100% - 28px);
        margin-bottom: 20px;
    }

    .diabos-tb-intro__inner {
        gap: 20px;

        padding: 24px 20px 24px;

        border-top-width: 3px;
    }

    .diabos-tb-intro__kicker {
        margin-bottom: 9px;

        font-size: 10.5px;
        letter-spacing: 0.085em;
    }

    .diabos-tb-intro__title {
        font-size: clamp(28px, 8.5vw, 36px);
        line-height: 1.1;
    }

    .diabos-tb-intro__meta {
        gap: 7px;
    }

    .diabos-tb-intro__meta li {
        min-height: 34px;

        padding: 7px 10px;

        font-size: 11px;
    }
}
/* =========================================================
   LARGE-SCREEN HERO REFINEMENT
   More left-aligned content + taller related services
   ========================================================= */

@media (min-width: 1500px) {

    .di-service-hero {
        min-height: 700px;
    }


    .di-service-hero__inner {
        width: 100%;
        max-width: none;

        min-height: 600px;

        margin: 0;

        padding-left: clamp(80px, 8vw, 125px);
        padding-right: clamp(58px, 5vw, 105px);

        padding-top: 62px;
        padding-bottom: 145px;
    }


.di-service-hero__content {
    width: min(720px, 43vw);
    transform: translateY(45px);
}


    .di-service-hero__related {
        right: clamp(60px, 5vw, 110px);
        bottom: 28px;

        width: 570px;
        min-height: 0;
    }


    .di-service-hero__related-item {
        min-height: 98px;

        padding: 14px 16px;
    }

}
/* =========================================================
   DIABOS – DETAILBEREICHE TIEFBAU & UNTERTAGE
   ========================================================= */

.diabos-tb-details {
    --dtd-blue: #073f61;
    --dtd-blue-dark: #082f47;
    --dtd-red: #e4363a;
    --dtd-text: #16191d;
    --dtd-muted: #596168;
    --dtd-border: #dce3e7;
    --dtd-light: #f4f6f7;
    --dtd-white: #ffffff;

 width: 100%;
    max-width: 1380px;
    margin: 0 auto 90px;
}

/* Abstand zwischen den vier Leistungsbereichen */
.diabos-tb-details__list {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* =========================================================
   EINZELNER LEISTUNGSBEREICH
   ========================================================= */

.diabos-tb-detail {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(460px, 1.18fr);

    min-height: 430px;
    overflow: hidden;

    background: var(--dtd-white);
    border: 1px solid var(--dtd-border);
    border-top: 4px solid var(--dtd-blue);

    box-shadow:
        0 16px 42px rgba(9, 30, 43, 0.07);

    scroll-margin-top: 140px;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.diabos-tb-detail:hover {
    transform: translateY(-3px);

    border-color: #cbd4d9;

    box-shadow:
        0 22px 52px rgba(9, 30, 43, 0.11);
}

/* Bei jeder zweiten Karte steht das Bild rechts */
.diabos-tb-detail:nth-child(even) {
    grid-template-columns:
        minmax(460px, 1.18fr)
        minmax(320px, 0.82fr);
}

.diabos-tb-detail:nth-child(even)
.diabos-tb-detail__media {
    order: 2;
}

.diabos-tb-detail:nth-child(even)
.diabos-tb-detail__content {
    order: 1;
}

/* =========================================================
   BILD
   ========================================================= */

.diabos-tb-detail__media {
    position: relative;

    min-height: 430px;
    overflow: hidden;

    background: var(--dtd-blue);
}

.diabos-tb-detail__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* Dezente Bildabdunklung */
.diabos-tb-detail__media::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(5, 25, 38, 0.01) 45%,
            rgba(5, 25, 38, 0.16) 100%
        );
}

/* Nummer im Bild */
.diabos-tb-detail__image-number {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 48px;
    height: 38px;
    padding: 0 12px;

    background: var(--dtd-white);
    border-left: 4px solid var(--dtd-red);

    color: var(--dtd-blue);

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;

    box-shadow:
        0 8px 22px rgba(9, 30, 43, 0.14);
}

/* Bei Karten mit Bild rechts Nummer ebenfalls rechts */
.diabos-tb-detail:nth-child(even)
.diabos-tb-detail__image-number {
    right: 24px;
    left: auto;

    border-right: 4px solid var(--dtd-red);
    border-left: 0;
}

/* =========================================================
   TEXTINHALT
   ========================================================= */

.diabos-tb-detail__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(34px, 4vw, 56px);
}

/* Kleine Überschrift */
.diabos-tb-detail__kicker {
    display: block;

    margin: 0 0 12px;

    color: var(--dtd-blue);

    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* H3 */
.diabos-tb-detail__title {
    max-width: 700px;
    margin: 0 0 18px;

    color: var(--dtd-text);

    font-size: clamp(28px, 2.4vw, 39px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

/* Einleitungstext */
.diabos-tb-detail__text {
    max-width: 760px;
    margin: 0 0 25px;

    color: var(--dtd-muted);

    font-size: 16px;
    line-height: 1.72;
}

.diabos-tb-detail__text strong {
    color: var(--dtd-text);
    font-weight: 650;
}

/* =========================================================
   LEISTUNGSPUNKTE
   ========================================================= */

.diabos-tb-detail__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 13px 25px;

    margin: 0;
    padding: 22px 0 0;

    border-top: 1px solid var(--dtd-border);

    list-style: none;
}

.diabos-tb-detail__list li {
    position: relative;

    padding-left: 19px;

    color: var(--dtd-text);

    font-size: 14px;
    font-weight: 550;
    line-height: 1.55;
}

.diabos-tb-detail__list li::before {
    content: "";

    position: absolute;
    top: 8px;
    left: 0;

    width: 8px;
    height: 8px;

    background: var(--dtd-red);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {
    .diabos-tb-details {
        width: calc(100% - 40px);
        margin-bottom: 70px;
    }

    .diabos-tb-details__list {
        gap: 26px;
    }

    .diabos-tb-detail,
    .diabos-tb-detail:nth-child(even) {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .diabos-tb-detail:nth-child(even)
    .diabos-tb-detail__media,
    .diabos-tb-detail:nth-child(even)
    .diabos-tb-detail__content {
        order: initial;
    }

    .diabos-tb-detail__media {
        min-height: 360px;
    }

    .diabos-tb-detail__content {
        padding: 36px 34px 38px;
    }

    .diabos-tb-detail:nth-child(even)
    .diabos-tb-detail__image-number {
        right: auto;
        left: 24px;

        border-right: 0;
        border-left: 4px solid var(--dtd-red);
    }
}

/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 640px) {
    .diabos-tb-details {
        width: calc(100% - 32px);
        margin-bottom: 55px;
    }

    .diabos-tb-details__list {
        gap: 20px;
    }

    .diabos-tb-detail {
        border-top-width: 3px;
    }

    .diabos-tb-detail__media {
        min-height: 245px;
    }

    .diabos-tb-detail__image-number {
        top: 17px;
        left: 17px;

        min-width: 43px;
        height: 34px;
    }

    .diabos-tb-detail:nth-child(even)
    .diabos-tb-detail__image-number {
        left: 17px;
    }

    .diabos-tb-detail__content {
        padding: 27px 22px 28px;
    }

    .diabos-tb-detail__kicker {
        margin-bottom: 10px;
        font-size: 11px;
    }

    .diabos-tb-detail__title {
        margin-bottom: 15px;

        font-size: clamp(26px, 8vw, 34px);
        line-height: 1.14;
    }

    .diabos-tb-detail__text {
        margin-bottom: 21px;

        font-size: 15px;
        line-height: 1.65;
    }

    .diabos-tb-detail__list {
        grid-template-columns: 1fr;

        gap: 11px;
        padding-top: 19px;
    }

    .diabos-tb-detail__list li {
        font-size: 14px;
    }
}

/* =========================================================
   ELEMENTOR HTML-WIDGETS: VOLLE BREITE UND ZENTRIERUNG
   CSS-Klasse am HTML-Widget: diabos-html-full
   ========================================================= */

/*
 * Die Klasse "diabos-html-full" gehört in Elementor unter:
 * HTML-Widget > Erweitert > CSS-Klassen
 */
.elementor-element.elementor-widget-html.diabos-html-full {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    align-self: stretch !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}

.elementor-element.elementor-widget-html.diabos-html-full
> .elementor-widget-container {
    display: block;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Beide DIABOS-Komponenten innerhalb des HTML-Widgets zentrieren */
.elementor-widget-html.diabos-html-full .diabos-tb-intro,
.elementor-widget-html.diabos-html-full .diabos-tb-details {
    width: 100%;
    max-width: 1380px;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box;
}

/* Einheitliche Box-Berechnung innerhalb beider Komponenten */
.diabos-tb-intro,
.diabos-tb-intro *,
.diabos-tb-details,
.diabos-tb-details * {
    box-sizing: border-box;
}

/* Verhindert, dass Elementor/Theme die Bildhöhe auf auto zurücksetzt */
.diabos-tb-details .diabos-tb-detail__media > img {
    height: 100% !important;
}