.chiSiamo {
    --chiSiamo-margine: calc((100% - 1350px) / 2);
    --chiSiamo-foto: 47%;
}

.chiSiamo *,
.chiSiamo *::before,
.chiSiamo *::after {
    box-sizing: border-box;
}

:where(.chiSiamo) h1,
:where(.chiSiamo) h2,
:where(.chiSiamo) h3,
:where(.chiSiamo) p {
    margin: 0;
}

.chiSiamo__h2 {
    font: 700 40px/1.25 'Open Sans', sans-serif;
    text-align: center;
    color: var(--color-blu-primary);
}

.chiSiamo__h2Enfasi {
    display: block;
    color: var(--color-rosso-primary);
}

.chiSiamo__introCentro {
    max-width: 640px;
    margin: 18px auto 0;
    font: 400 18px/1.7 'Open Sans', sans-serif;
    text-align: center;
    color: var(--color-text-primary);
}

.chiSiamo__apertura {
    display: grid;
    grid-template-columns: var(--chiSiamo-margine) minmax(0, 1fr) var(--chiSiamo-foto);
    min-height: clamp(460px, 32vw, 580px);
    background: var(--color-beige-background);
    overflow: hidden;
}

.chiSiamo__aperturaTesto {
    grid-column: 2;
    align-self: center;
    padding: 60px 80px 64px 0;
}

.chiSiamo__titolo {
    display: block;
    font: 700 52px/1.12 'Open Sans', sans-serif;
    color: var(--color-blu-primary);
}

.chiSiamo__claim {
    display: block;
    margin-top: 22px;
    font: 700 40px/1.25 'Open Sans', sans-serif;
    color: var(--color-rosso-primary);
}

.chiSiamo__intro {
    margin-top: 24px;
    font: 400 18px/1.7 'Open Sans', sans-serif;
    color: var(--color-text-primary);
}

.chiSiamo__intro + .chiSiamo__intro {
    margin-top: 12px;
}

.chiSiamo__visuale {
    grid-column: 3;
    position: relative;
    min-width: 0;
}

.chiSiamo__foto {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 66% 42%;
    clip-path: ellipse(700px 88% at 700px 50%);
}

.chiSiamo__racconto {
    padding: 80px 0 80px;
    background: #fff;
}

.chiSiamo__h2--racconto {
    margin-bottom: 36px;
}

.chiSiamo__raccontoTesto {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.chiSiamo__raccontoTesto p {
    font: 400 18px/1.8 'Open Sans', sans-serif;
    color: var(--color-text-primary);
}

.chiSiamo__raccontoTesto p + p {
    margin-top: 16px;
}

.chiSiamo__percorso {
    padding: 80px 0 80px;
    background: var(--color-beige-background);
}

.chiSiamo__percorso .chiSiamo__introCentro {
    max-width: 750px;
}

.chiSiamo__passi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
    margin: 64px auto 0;
    padding: 0;
    list-style: none;
}

.chiSiamo__passo {
    position: relative;
    padding: 0 32px;
    text-align: center;
}

.chiSiamo__passo + .chiSiamo__passo::before {
    content: '';
    position: absolute;
    top: 24px;
    bottom: 8px;
    left: 0;
    width: 1px;
    background: rgba(120, 75, 45, .16);
}

.chiSiamo__icona {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(120, 30, 43, .08);
    fill: none;
    stroke: var(--color-rosso-primary);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chiSiamo__passoTitolo {
    margin: 26px 0 10px;
    font: 700 22px/1.3 'Open Sans', sans-serif;
    color: var(--color-blu-primary);
}

.chiSiamo__passoTesto {
    max-width: 300px;
    margin: 0 auto;
    font: 400 17px/1.65 'Open Sans', sans-serif;
    color: var(--color-text-primary);
}

.chiSiamo__chiusura {
    padding: 100px 0 100px;
    background: #fff;
}

.chiSiamo__chiusuraGriglia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px 80px;
    max-width: 1100px;
    margin: 0 auto;
}

.chiSiamo__h2--sinistra {
    text-align: left;
}

.chiSiamo__chiusuraTesto {
    max-width: 600px;
    margin-top: 20px;
    font: 400 18px/1.7 'Open Sans', sans-serif;
    color: var(--color-text-primary);
}

.chiSiamo__chiusuraTesto strong {
    font-weight: 700;
    color: var(--color-blu-primary);
}

.chiSiamo__chiusuraAzioni {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 300px;
}

.chiSiamo__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
    padding: 0 22px 0 26px;
    border-radius: 4px;
    background: var(--color-rosso-primary);
    color: #fff;
    font: 600 16px/1.2 'Open Sans', sans-serif;
    text-decoration: none;
    transition: background-color .2s ease;
}

.chiSiamo__cta:hover {
    background: var(--color-rosso-hover);
    color: #fff;
}

.chiSiamo__cta--blu {
    background: var(--color-blu-primary);
}

.chiSiamo__cta--blu:hover {
    background: var(--color-blu-hover);
}

.chiSiamo__cta:focus-visible {
    outline: 3px solid var(--color-blu-primary);
    outline-offset: 4px;
}

.chiSiamo__ctaFreccia {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.chiSiamo__cta:hover .chiSiamo__ctaFreccia {
    transform: translateX(4px);
}

@media (max-width: 1500px) {
    .chiSiamo { --chiSiamo-margine: 2.5%; }
    .chiSiamo__titolo { font-size: 48px; }
    .chiSiamo__h2,
    .chiSiamo__claim { font-size: 36px; }
}

@media (max-width: 1280px) {
    .chiSiamo { --chiSiamo-margine: 3%; }
    .chiSiamo__aperturaTesto { padding-right: 70px; }
    .chiSiamo__titolo { font-size: 44px; }
    .chiSiamo__h2,
    .chiSiamo__claim { font-size: 33px; }

    .chiSiamo__apertura { min-height: 510px; }

    .chiSiamo__foto { clip-path: ellipse(700px 110% at 700px 50%); }
}

@media (max-width: 1023px) {

    .chiSiamo__titolo { font-size: 38px; }
    .chiSiamo__h2,
    .chiSiamo__claim { font-size: 30px; }

    .chiSiamo__apertura {
        display: block;
        min-height: 0;
    }

    .chiSiamo__aperturaTesto {
        width: 94%;
        margin: 0 auto;
        padding: 52px 0 40px;
    }

    .chiSiamo__intro {
        max-width: 100%;
    }

    .chiSiamo__foto {
        position: static;
        height: auto;
        aspect-ratio: 16 / 9;
        clip-path: none;
        object-position: 62% 45%;
    }

    .chiSiamo__racconto,
    .chiSiamo__chiusura {
        padding: 64px 0 70px;
    }

    .chiSiamo__percorso {
        padding: 64px 0 70px;
    }

    .chiSiamo__passo {
        padding: 0 20px;
    }

    .chiSiamo__chiusuraGriglia {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 32px;
        text-align: center;
    }

    .chiSiamo__h2--sinistra {
        text-align: center;
    }

    .chiSiamo__chiusuraTesto {
        margin-left: auto;
        margin-right: auto;
    }

    .chiSiamo__chiusuraAzioni {
        width: 100%;
        max-width: 360px;
    }
}

@media (max-width: 768px) {

    .chiSiamo__aperturaTesto {
        width: calc(100% - 28px);
        padding: 40px 0 32px;
    }

    .chiSiamo__titolo {
        font-size: 34px;
    }

    .chiSiamo__claim {
        margin-top: 14px;
        font-size: 27px;
    }

    .chiSiamo__intro,
    .chiSiamo__introCentro {
        font-size: 17px;
    }

    .chiSiamo__foto {
        aspect-ratio: 3 / 2;
    }

    .chiSiamo__h2 {
        font-size: 27px;
    }

    .chiSiamo__racconto,
    .chiSiamo__percorso,
    .chiSiamo__chiusura {
        padding: 48px 0 54px;
    }

    .chiSiamo__raccontoTesto,
    .chiSiamo__percorso .chiSiamo__introCentro,
    .chiSiamo__chiusuraTesto {
        text-align: left;
    }

    .chiSiamo__chiusuraGriglia {
        justify-items: stretch;
    }

    .chiSiamo__h2--sinistra,
    .chiSiamo__racconto .chiSiamo__h2,
    .chiSiamo__percorso .chiSiamo__h2 {
        text-align: left;
    }

    .chiSiamo__raccontoTesto p {
        font-size: 17px;
    }

    .chiSiamo__passi {
        grid-template-columns: 1fr;
        gap: 44px;
        margin-top: 44px;
    }

    .chiSiamo__icona {
        width: 100px;
        height: 100px;
        padding: 17px;
    }

    .chiSiamo__passoTitolo {
        margin-top: 20px;
        font-size: 20px;
    }

    .chiSiamo__passo + .chiSiamo__passo::before {
        display: none;
    }

    .chiSiamo__passo {
        padding: 0;
    }

    .chiSiamo__chiusuraTesto {
        font-size: 17px;
    }
}