/* =========================================================
   LM IMPIANTI — SERVICES PAGE
   Production CSS
   ========================================================= */


/* =========================================================
   01 — TOKENS
   ========================================================= */

.services-page {
    --sp-bg: #ffffff;
    --sp-soft-bg: #f5f5f1;

    --sp-ink: #171719;
    --sp-muted: #666b67;
    --sp-soft: #9da39e;
    --sp-line: #dfe2dd;

    --sp-purple: #6100fe;
    --sp-purple-dark: #5011d0;

    --sp-dark: #111718;

    --sp-body:
        "Instrument Sans",
        Arial,
        sans-serif;

    --sp-mono:
        "IBM Plex Mono",
        "Geist Mono",
        monospace;

    --sp-width: 1440px;

    --sp-side: clamp(
        22px,
        3.2vw,
        58px
    );

    --sp-ease:
        cubic-bezier(.22, 1, .36, 1);

    position: relative;

    width: 100%;

    background: var(--sp-bg);
    color: var(--sp-ink);

    /*
     * Importante:
     * NON usare overflow:hidden/clip qui,
     * altrimenti lo sticky laterale può rompersi.
     */

    overflow: visible;
}

.services-page,
.services-page * {
    box-sizing: border-box;
}

.services-page .lm-container {
    width: 100%;
    max-width: var(--sp-width);

    margin-inline: auto;
}


/* =========================================================
   02 — HERO
   ========================================================= */

.services-hero {
    position: relative;

    padding:
        clamp(155px, 13vw, 210px)
        var(--sp-side)
        clamp(90px, 8vw, 125px);

    background: #ffffff;
}

.services-hero__container {
    min-width: 0;
}


/* =========================================================
   03 — HERO TOP
   ========================================================= */

.services-hero__top {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, .82fr);

    align-items: end;

    gap:
        clamp(65px, 9vw, 160px);

    margin-bottom:
        clamp(58px, 6vw, 88px);
}


/* =========================================================
   04 — HERO EYEBROW
   ========================================================= */

.services-hero__eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin:
        0
        0
        22px;

    font-family: var(--sp-mono);

    font-size: 10px;
    font-weight: 500;

    line-height: 1.4;

    letter-spacing: .09em;

    text-transform: uppercase;

    color: var(--sp-soft);
}

.services-hero__eyebrow span {
    display: block;

    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    background: var(--sp-purple);
}


/* =========================================================
   05 — HERO TITLE
   ========================================================= */

.services-hero__heading h1 {
    margin: 0;

    font-family: var(--sp-mono);

    font-size: clamp(
        60px,
        6.7vw,
        108px
    );

    font-weight: 400;

    line-height: .94;

    letter-spacing: -.068em;

    color: var(--sp-ink);
}


/* =========================================================
   06 — HERO COPY
   ========================================================= */

.services-hero__copy {
    padding-bottom: 5px;
}

.services-hero__copy p {
    max-width: 600px;

    margin: 0;

    font-family: var(--sp-body);

    font-size: clamp(
        19px,
        1.65vw,
        27px
    );

    font-weight: 400;

    line-height: 1.38;

    letter-spacing: -.026em;

    color: #444945;

    text-wrap: pretty;
}


/* =========================================================
   07 — HERO VIDEO
   ========================================================= */

.services-hero__media {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 7;

    min-height: 440px;

    overflow: hidden;

    border-radius: 14px;

    background: var(--sp-dark);
}

.services-hero__video {
    display: block;

    width: 100%;
    height: 100%;

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

    transform: scale(1.012);
}

.services-hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .015),
            rgba(0, 0, 0, .28)
        );

    pointer-events: none;
}

.services-hero__media-meta {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    font-family: var(--sp-mono);

    font-size: 9px;
    font-weight: 500;

    letter-spacing: .06em;

    color:
        rgba(255, 255, 255, .82);
}


/* =========================================================
   08 — CATALOG
   ========================================================= */

.services-catalog {
    position: relative;

    padding:
        0
        var(--sp-side)
        clamp(120px, 10vw, 170px);

    overflow: visible;
}


/* =========================================================
   09 — MAIN CATALOG LAYOUT
   ========================================================= */

.services-catalog__layout {
    display: grid;

    grid-template-columns:
        minmax(210px, 260px)
        minmax(0, 1fr);

    align-items: start;

    gap:
        clamp(55px, 6.5vw, 110px);

    width: 100%;

    overflow: visible;
}


/* =========================================================
   10 — STICKY INDEX
   ========================================================= */

.services-index {
    position: relative;

    align-self: stretch;

    min-width: 0;

    overflow: visible;
}

.services-index__inner {
    position: sticky;

    top: 118px;

    height: fit-content;

    padding-top:
        clamp(78px, 7vw, 108px);
}


/* =========================================================
   11 — INDEX LABEL
   ========================================================= */

.services-index__label {
    margin:
        0
        0
        20px;

    font-family: var(--sp-mono);

    font-size: 10px;
    font-weight: 600;

    line-height: 1.4;

    letter-spacing: .07em;

    text-transform: uppercase;

    color: var(--sp-soft);
}


/* =========================================================
   12 — INDEX NAV
   ========================================================= */

.services-index__nav {
    display: flex;
    flex-direction: column;

    gap: 1px;
}

.services-index__link {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 8px;

    width: 100%;

    min-height: 40px;

    padding:
        8px
        13px;

    border-radius: 4px;

    font-family: var(--sp-mono);

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

    text-decoration: none;

    color: #a0a5a0;

    transition:
        background-color .28s ease,
        color .28s ease,
        transform .4s var(--sp-ease);
}

.services-index__link span {
    font-weight: 400;
}

.services-index__link strong {
    min-width: 0;

    font-weight: 600;

    text-transform: uppercase;
}


/* hover */

.services-index__link:hover {
    color: var(--sp-ink);

    transform: translateX(3px);
}


/* JS ready */

.services-index__link.is-active {
    background: #303331;

    color: #ffffff;

    transform: none;
}


/* =========================================================
   13 — CONTENT COLUMN
   ========================================================= */

.services-catalog__content {
    min-width: 0;

    width: 100%;
}


/* =========================================================
   14 — SERVICE CARD
   ========================================================= */

.service-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, .98fr);

    align-items: center;

    gap:
        clamp(55px, 6vw, 100px);

    width: 100%;

    min-width: 0;

    min-height:
        min(
            800px,
            calc(100vh - 90px)
        );

    padding:
        clamp(80px, 7vw, 110px)
        0;

    border-top:
        1px solid var(--sp-line);

    scroll-margin-top: 105px;
}

.service-card:last-child {
    border-bottom:
        1px solid var(--sp-line);
}


/* =========================================================
   15 — IMAGE FRAME
   ========================================================= */

.service-card__media {
    position: relative;

    width: 100%;

    min-width: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius: 13px;

    background: #e8eae7;

    /*
     * Cornice vera:
     * l'immagine rimane dentro questo frame.
     */

    isolation: isolate;
}

.service-card__media::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: inherit;

    pointer-events: none;
}


/* =========================================================
   16 — CARD IMAGE
   ========================================================= */

.service-card__media img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

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

    transform: scale(1.02);

    filter:
        saturate(.88)
        contrast(1.03);

    transition:
        transform .9s var(--sp-ease),
        filter .6s ease;
}

.service-card:hover
.service-card__media img {
    transform: scale(1.055);

    filter:
        saturate(1)
        contrast(1.02);
}


/* =========================================================
   17 — IMAGE META
   ========================================================= */

.service-card__image-meta {
    position: absolute;

    z-index: 3;

    left: 16px;
    right: 16px;
    bottom: 15px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    font-family: var(--sp-mono);

    font-size: 9px;
    font-weight: 500;

    letter-spacing: .035em;

    color:
        rgba(255,255,255,.82);
}


/* =========================================================
   18 — SERVICE CONTENT
   ========================================================= */

.service-card__content {
    min-width: 0;

    width: 100%;

    padding-top: 2px;
}


/* =========================================================
   19 — SERVICE BADGE
   ========================================================= */

.service-card__badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom:
        clamp(36px, 3.8vw, 54px);

    background: #303331;

    font-family: var(--sp-mono);

    font-size: 11px;
    font-weight: 500;

    line-height: 1;

    color: #ffffff;
}


/* =========================================================
   20 — SERVICE TITLE
   ========================================================= */

.service-card__title {
    max-width: 690px;

    margin:
        0
        0
        clamp(42px, 4vw, 62px);

    font-family: var(--sp-mono);

    font-size: clamp(
        39px,
        4vw,
        64px
    );

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.055em;

    text-transform: uppercase;

    color: var(--sp-ink);

    overflow-wrap: anywhere;
}


/* =========================================================
   21 — FEATURES
   ========================================================= */

.service-card__features {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-bottom:
        clamp(42px, 4vw, 62px);
}

.service-card__feature {
    display: grid;

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

    align-items: start;

    gap: 10px;
}

.service-card__feature span {
    padding-top: 1px;

    font-family: var(--sp-mono);

    font-size: 15px;

    line-height: 1.35;

    color: var(--sp-ink);
}

.service-card__feature p {
    margin: 0;

    font-family: var(--sp-body);

    font-size: clamp(
        14px,
        1.1vw,
        17px
    );

    font-weight: 500;

    line-height: 1.42;

    letter-spacing: -.01em;

    color: var(--sp-ink);
}


/* =========================================================
   22 — DESCRIPTION
   ========================================================= */

.service-card__description {
    max-width: 530px;

    margin:
        0
        0
        38px;

    font-family: var(--sp-body);

    font-size: clamp(
        15px,
        1.25vw,
        19px
    );

    font-weight: 400;

    line-height: 1.58;

    letter-spacing: -.016em;

    color: var(--sp-muted);

    text-wrap: pretty;
}


/* =========================================================
   23 — CTA
   ========================================================= */

.service-card__cta {
    display: inline-flex !important;

    flex-direction: row !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 34px !important;

    width: fit-content !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding:
        11px
        0
        8px !important;

    border: 0 !important;

    border-bottom:
        1px solid var(--sp-ink) !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    font-family: var(--sp-mono);

    font-size: 10px;
    font-weight: 500;

    line-height: 1.2;

    letter-spacing: .04em;

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

    color: var(--sp-ink) !important;

    transition:
        color .28s ease,
        border-color .28s ease,
        gap .45s var(--sp-ease);
}

.service-card__cta span {
    display: inline-block;

    flex: 0 0 auto;
}

.service-card__cta span:last-child {
    position: static !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    font-family: var(--sp-body);

    font-size: 17px;

    line-height: 1;

    transition:
        transform .4s var(--sp-ease);
}

.service-card__cta:hover {
    gap: 43px !important;

    color: var(--sp-purple) !important;

    border-color:
        var(--sp-purple) !important;
}

.service-card__cta:hover
span:last-child {
    transform:
        translate(3px, -3px);
}


/* =========================================================
   24 — FINAL CTA
   ========================================================= */

.services-final {
    position: relative;

    padding:
        clamp(95px, 9vw, 145px)
        var(--sp-side);

    background: var(--sp-dark);

    color: #ffffff;
}

.services-final__inner {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap:
        clamp(40px, 7vw, 110px);
}

.services-final p {
    margin:
        0
        0
        18px;

    font-family: var(--sp-mono);

    font-size: 9px;
    font-weight: 500;

    letter-spacing: .07em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.5);
}

.services-final h2 {
    max-width: 850px;

    margin: 0;

    font-family: var(--sp-body);

    font-size: clamp(
        52px,
        6vw,
        90px
    );

    font-weight: 500;

    line-height: .95;

    letter-spacing: -.075em;

    color: #ffffff;
}

.services-final__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 50px;

    padding:
        15px
        20px;

    border: 0;

    background: #ffffff;

    font-family: var(--sp-mono);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .035em;

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

    color: var(--sp-dark);

    transition:
        background .28s ease,
        color .28s ease,
        transform .4s var(--sp-ease);
}

.services-final__button:hover {
    background: var(--sp-purple);

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   25 — DESKTOP MEDIO
   ========================================================= */

@media (max-width: 1250px) {

    .services-catalog__layout {
        grid-template-columns:
            190px
            minmax(0, 1fr);

        gap: 48px;
    }

    .services-index__link {
        grid-template-columns:
            31px
            minmax(0, 1fr);

        padding-inline: 8px;

        font-size: 9px;
    }

    .service-card {
        gap: 45px;

        min-height: 680px;
    }

    .service-card__title {
        font-size: clamp(
            36px,
            3.8vw,
            54px
        );
    }

}


/* =========================================================
   26 — TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .services-hero__top {
        grid-template-columns:
            1fr
            1fr;

        gap: 44px;
    }


    /* indice non più laterale */

    .services-catalog__layout {
        display: block;
    }

    .services-index {
        margin-bottom: 42px;
    }

    .services-index__inner {
        position: relative;

        top: auto;

        padding-top: 0;
    }

    .services-index__nav {
        flex-direction: row;

        gap: 5px;

        overflow-x: auto;

        padding-bottom: 4px;

        scrollbar-width: none;
    }

    .services-index__nav::-webkit-scrollbar {
        display: none;
    }

    .services-index__link {
        flex: 0 0 auto;

        display: inline-flex;

        align-items: center;

        gap: 8px;

        width: auto;

        padding:
            9px
            12px;

        white-space: nowrap;
    }


    /* cards */

    .service-card {
        min-height: 650px;

        gap: 42px;
    }

}


/* =========================================================
   27 — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .services-page {
        --sp-side: 21px;
    }


    /* HERO */

    .services-hero {
        padding:
            110px
            var(--sp-side)
            75px;
    }

    .services-hero__top {
        display: block;

        margin-bottom: 45px;
    }

    .services-hero__heading {
        margin-bottom: 35px;
    }

    .services-hero__heading h1 {
        font-size: clamp(
            48px,
            14vw,
            68px
        );
    }

    .services-hero__copy p {
        font-size: 17px;
    }

    .services-hero__media {
        min-height: 290px;

        aspect-ratio: 4 / 3;

        border-radius: 9px;
    }


    /* CATALOG */

    .services-catalog {
        padding-bottom: 90px;
    }


    /* INDEX */

    .services-index__label {
        font-size: 9px;
    }


    /* CARDS */

    .service-card {
        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 38px;

        min-height: 0;

        padding:
            65px
            0;
    }

    .service-card__media {
        aspect-ratio: 4 / 5;

        border-radius: 9px;
    }

    .service-card__badge {
        width: 42px;
        height: 42px;

        margin-bottom: 30px;
    }

    .service-card__title {
        margin-bottom: 34px;

        font-size: clamp(
            37px,
            10vw,
            51px
        );
    }

    .service-card__features {
        margin-bottom: 36px;
    }

    .service-card__description {
        margin-bottom: 32px;

        font-size: 15px;
    }


    /* FINAL */

    .services-final {
        padding:
            80px
            var(--sp-side);
    }

    .services-final__inner {
        align-items: flex-start;
        flex-direction: column;

        gap: 36px;
    }

    .services-final h2 {
        font-size: clamp(
            44px,
            12vw,
            60px
        );
    }

    .services-final__button {
        width: 100%;
    }

}


/* =========================================================
   28 — SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .services-page {
        --sp-side: 17px;
    }

    .services-hero__heading h1 {
        font-size: 45px;
    }

    .service-card__title {
        font-size: 37px;
    }

}


/* =========================================================
   29 — FOCUS
   ========================================================= */

.services-index__link:focus-visible,
.service-card__cta:focus-visible,
.services-final__button:focus-visible {
    outline:
        2px solid var(--sp-purple);

    outline-offset: 5px;
}


/* =========================================================
   30 — REDUCED MOTION
   ========================================================= */

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

    .services-index__link,
    .service-card__media img,
    .service-card__cta,
    .service-card__cta span:last-child,
    .services-final__button {
        transition: none !important;
    }

}