/* =========================================================
   AVV. DOMENICO PEZZELLA
   Pagina profilo premium - PNG trasparente
   ========================================================= */

:root {
    --profile-blue: #063568;
    --profile-blue-deep: #041a33;
    --profile-blue-soft: #0c447d;

    --profile-gold: #c5a15a;
    --profile-gold-soft: #d4b774;

    --profile-white: #ffffff;
    --profile-paper: #f5f3ee;

    --profile-text: #20252b;
    --profile-muted: #626a72;
    --profile-line: #e1e2de;
}


/* =========================================================
   BASE
   ========================================================= */

.profile-page {
    margin: 0;
    background: var(--profile-white);
    color: var(--profile-text);
}

.profile-container {
    width: min(calc(100% - 64px), 1240px);
    margin-inline: auto;
}

.site-header-solid {
    position: relative;
    z-index: 50;

    background: var(--profile-blue);

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


/* =========================================================
   MICRO TITOLI
   ========================================================= */

.section-kicker {
    margin: 0 0 14px;

    color: var(--profile-gold);

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

    letter-spacing: .24em;

    text-transform: uppercase;
}

.section-kicker-light {
    color: var(--profile-gold-soft);
}


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

.profile-hero {
    position: relative;

    overflow: visible;

    background:
        linear-gradient(
            135deg,
            #063568 0%,
            #052f5d 62%,
            #042647 100%
        );

    color: var(--profile-white);
}

.profile-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        rgba(197,161,90,.36);
}


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

.hero-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        1.03fr
        .97fr;

    gap: 70px;

    min-height: 430px;

    align-items: start;
}


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

.hero-copy {
    padding: 72px 0 92px;
}

.eyebrow {
    margin: 0 0 15px;

    color: var(--profile-gold-soft);

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

    letter-spacing: .24em;

    text-transform: uppercase;
}

.hero-copy h1 {
    margin: 0;

    color: var(--profile-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(50px, 5.4vw, 82px);

    font-weight: 400;

    line-height: .94;

    letter-spacing: -.047em;
}

.hero-copy h1 span {
    display: block;
}

.hero-subtitle {
    max-width: 560px;

    margin: 25px 0 0;

    color:
        rgba(255,255,255,.80);

    font-size: 18px;

    line-height: 1.55;
}

.hero-order {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 25px;

    color:
        rgba(255,255,255,.58);

    font-size: 11px;

    letter-spacing: .04em;
}

.hero-order-line {
    width: 38px;
    height: 1px;

    flex: 0 0 auto;

    background:
        rgba(197,161,90,.78);
}


/* =========================================================
   FOTO HERO
   PNG TRASPARENTE
   ========================================================= */

.hero-photo-wrap {
    position: relative;

    align-self: stretch;

    overflow: visible;
}

.hero-photo {
    position: absolute;

    top: 18px;
    right: 0;

    width: 540px;
    height: 620px;

    margin: 0;

    overflow: visible;

    background: transparent;

    box-shadow: none;
}

.hero-photo::before,
.hero-photo::after {
    display: none;
}

.hero-photo img {
    position: absolute;

    left: 50%;
    bottom: -20px;

    transform:
        translateX(-50%);

    width: auto;
    height: 100%;

    max-width: none;

    display: block;

    object-fit: contain;

    object-position:
        center bottom;

    filter:
        drop-shadow(
            0 22px 36px
            rgba(3,20,40,.20)
        );
}


/* =========================================================
   PROFILO PROFESSIONALE
   ========================================================= */

.profile-intro {
    position: relative;

    padding: 205px 0 100px;

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

.intro-grid {
    display: grid;

    grid-template-columns:
        .82fr
        1.18fr;

    gap: 92px;

    align-items: start;
}

.intro-heading h2 {
    max-width: 540px;

    margin: 0;

    color: var(--profile-blue);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(40px, 4.4vw, 62px);

    font-weight: 400;

    line-height: 1.07;

    letter-spacing: -.04em;
}

.intro-heading::after {
    content: "";

    display: block;

    width: 72px;
    height: 1px;

    margin-top: 32px;

    background:
        var(--profile-gold);
}

.intro-copy {
    max-width: 740px;
}

.intro-copy p {
    margin: 0 0 24px;

    color: #59616a;

    font-size: 17px;

    line-height: 1.78;
}

.intro-copy .lead {
    color: #2d363e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    line-height: 1.58;
}

.intro-copy strong {
    color:
        var(--profile-blue);

    font-weight: 700;
}


/* =========================================================
   CREDENZIALI
   ========================================================= */

.credentials-section {
    padding: 0 0 100px;

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

.credentials-grid {
    display: grid;

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

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

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

.credential {
    min-height: 300px;

    padding: 31px 27px;

    border-right:
        1px solid var(--profile-line);
}

.credential:first-child {
    border-left:
        1px solid var(--profile-line);
}

.credential-number {
    display: block;

    margin-bottom: 49px;

    color:
        var(--profile-gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .15em;
}

.credential-label {
    display: block;

    margin-bottom: 10px;

    color: #8b9094;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .17em;

    text-transform: uppercase;
}

.credential h3 {
    margin: 0 0 13px;

    color:
        var(--profile-blue);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.14;
}

.credential p {
    margin: 0;

    color: #687078;

    font-size: 14px;

    line-height: 1.64;
}


/* =========================================================
   METODO DI LAVORO
   ========================================================= */

.method-section {
    padding: 94px 0;

    background:

        radial-gradient(
            circle at 86% 24%,
            rgba(26,90,153,.28),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #063568 0%,
            #052f5d 62%,
            #041e3b 100%
        );

    color:
        var(--profile-white);
}

.method-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 96px;

    align-items: start;
}

.method-heading h2 {
    max-width: 640px;

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 400;

    line-height: 1.07;

    letter-spacing: -.035em;
}

.method-copy p {
    margin: 0 0 19px;

    color:
        rgba(255,255,255,.72);

    font-size: 16px;

    line-height: 1.73;
}

.method-values {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 32px;
}

.method-values span {
    padding:
        9px 13px;

    border:
        1px solid
        rgba(212,183,116,.42);

    color:
        var(--profile-gold-soft);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


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

.profile-cta {
    padding: 70px 0;

    background:
        var(--profile-paper);
}

.profile-cta-inner {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 50px;
}

.profile-cta h2 {
    max-width: 810px;

    margin: 0;

    color:
        var(--profile-blue);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px, 3.4vw, 50px);

    font-weight: 400;

    line-height: 1.10;
}

.profile-cta-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    min-height: 52px;

    padding: 0 23px;

    border:
        1px solid
        var(--profile-blue);

    background:
        var(--profile-blue);

    color:
        var(--profile-white);

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

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

.profile-cta-button:hover {
    transform:
        translateY(-2px);

    background:
        var(--profile-blue-soft);
}


/* =========================================================
   FOOTER
   ========================================================= */

.profile-footer {
    padding: 25px 0;

    background:
        #031428;

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

.profile-footer-inner {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;

    font-size: 11px;
}

.profile-footer-brand {
    display: flex;

    align-items: center;

    gap: 14px;
}

.profile-footer-brand strong {
    color:
        var(--profile-gold-soft);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    font-weight: 400;
}

.profile-footer-copy {
    color:
        rgba(255,255,255,.38);
}


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

@media (max-width: 1100px) {

    .hero-grid {
        grid-template-columns:
            1fr
            .9fr;
    }

    .hero-photo {
        width: 470px;
        height: 570px;
    }

    .profile-intro {
        padding-top: 180px;
    }

    .credentials-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .credential:nth-child(3),
    .credential:nth-child(4) {
        border-top:
            1px solid
            var(--profile-line);
    }

    .credential:nth-child(3) {
        border-left:
            1px solid
            var(--profile-line);
    }
}


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

@media (max-width: 900px) {

    .profile-container {
        width:
            min(calc(100% - 40px), 1240px);
    }

    .hero-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .hero-copy {
        padding:
            58px 0 32px;
    }

    .hero-photo-wrap {
        height: 500px;
    }

    .hero-photo {
        position: absolute;

        top: 0;
        left: 50%;
        right: auto;

        transform:
            translateX(-50%);

        width: 470px;
        height: 530px;
    }

    .hero-photo img {
        bottom: -20px;
    }

    .profile-intro {
        padding:
            115px 0 80px;
    }

    .intro-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .method-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .profile-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }
}


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

@media (max-width: 640px) {

    .profile-container {
        width:
            calc(100% - 34px);
    }

    .hero-copy {
        padding:
            48px 0 24px;
    }

    .hero-copy h1 {
        font-size:
            clamp(45px, 13vw, 64px);
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-order {
        align-items:
            flex-start;

        font-size: 10px;
    }

    .hero-photo-wrap {
        height: 420px;
    }

    .hero-photo {
        width: 370px;
        height: 440px;
    }

    .hero-photo img {
        bottom: -12px;
    }

    .profile-intro {
        padding:
            82px 0 68px;
    }

    .intro-heading h2 {
        font-size:
            clamp(36px, 10vw, 48px);
    }

    .intro-copy .lead {
        font-size: 20px;
    }

    .intro-copy p {
        font-size: 16px;

        line-height: 1.72;
    }

    .credentials-section {
        padding-bottom: 74px;
    }

    .credentials-grid {
        grid-template-columns: 1fr;

        border-bottom: 0;
    }

    .credential,
    .credential:first-child,
    .credential:nth-child(3) {

        min-height: 0;

        border-left:
            1px solid
            var(--profile-line);

        border-right:
            1px solid
            var(--profile-line);

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

    .credential:nth-child(3),
    .credential:nth-child(4) {
        border-top: 0;
    }

    .credential-number {
        margin-bottom: 34px;
    }

    .method-section {
        padding:
            72px 0;
    }

    .profile-cta {
        padding:
            54px 0;
    }

    .profile-cta-button {
        width: 100%;
    }

    .profile-footer-inner {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 10px;
    }

    .profile-footer-brand {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 2px;
    }
}


/* =========================================================
   ACCESSIBILITÀ
   ========================================================= */

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

    *,
    *::before,
    *::after {
        transition-duration:
            .01ms !important;
    }
}