/*====================================
FIRM
DESKTOP
====================================*/

.firm{

    padding-top:2rem;

    padding-bottom:2rem;

}

/*====================================
HEADER
====================================*/

.firm-header{

    max-width:56rem;

    margin-inline:auto;

    margin-bottom:5rem;

    text-align:center;

}

.firm-header .section-eyebrow{

    display:inline-flex;

    flex-direction:column;

    align-items:center;

}

.firm-header .section-eyebrow::before{

    left:50%;

    right:auto;

    transform:translateX(-50%);

}

.firm-header .section-title{

    max-width:28ch;

    margin-inline:auto;

    text-align:center;

}

.firm-header .section-description{

    max-width:46rem;

    margin-inline:auto;

    text-align:center;

}

/*====================================
PORTRAITS
====================================*/

.firm-portraits{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:6rem;

    max-width:64rem;

    margin:0 auto 6rem;

}

.portrait{

    text-align:center;

}

.portrait img{

    display:block;

    width:100%;

    max-width:320px;

    margin:0 auto 2rem;

}

.portrait h3{

    margin-bottom:.5rem;

}

.partner-role{

    display:block;

    color:var(--color-accent);

    font-size:.95rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/*====================================
PROFILES
====================================*/

.firm-profiles{

    max-width:56rem;

    margin:0 auto;

}

.profile{

    padding:3rem 0;

    border-top:1px solid rgba(179,138,59,.20);

}

.profile:first-child{

    border-top:none;

    padding-top:0;

}

.profile:last-child{

    padding-bottom:0;

}

.profile h3{

    margin-bottom:1.5rem;

    font-size:2rem;

}

.profile p{

    max-width:46rem;

    color:var(--color-text-muted);

}
/*====================================
PORTRAIT HOVER
====================================*/

.portrait{

    transition:transform .35s ease;

}

.portrait img{

    transition:
        transform .35s ease,
        filter .35s ease;

}

.portrait h3{

    transition:color .35s ease;

}

.partner-role{

    transition:color .35s ease;

}

.portrait:hover{

    transform:translateY(-4px);

}

.portrait:hover img{

    transform:scale(1.02);

    filter:drop-shadow(0 0 18px rgba(179,138,59,.28));

}

.portrait:hover h3,

.portrait:hover .partner-role{

    color:var(--color-accent);

}
/*====================================
FIRM
TABLET
====================================*/

@media (max-width:992px){

    .firm{

        padding:4rem 0;

    }

    .firm-header{

        max-width:700px;

        margin:0 auto 4rem;

    }

    .firm-header .section-title{

        max-width:18ch;

        margin:0 auto 2rem;

        text-align:center;

    }

    .firm-header .section-description{

        max-width:42rem;

        margin:0 auto;

        text-align:center;

    }

    .firm-portraits{

        gap:3rem;

        margin-bottom:4rem;

    }

    .portrait img{

        max-width:260px;

    }

    .portrait h3{

        font-size:1.45rem;

    }

    .partner-role{

        font-size:.9rem;

    }

    .firm-profiles{

        max-width:44rem;

    }

    .profile{

        padding:2.5rem 0;

    }

    .profile h3{

        font-size:1.7rem;

        margin-bottom:1rem;

    }

}
/*====================================
FIRM
MOBILE
====================================*/

@media (max-width:768px){

    .firm{

        padding:3rem 0;

    }

    .firm-header{

        max-width:420px;

        margin:0 auto 3rem;

    }

    .firm-header .section-eyebrow{

        margin-bottom:.9rem;

    }

    .firm-header .section-title{

        max-width:24ch;

        margin:0 auto 1.5rem;

        font-size:1.55rem;

        line-height:1.08;

        text-wrap:balance;

    }

    .firm-header .section-description{

        max-width:38ch;

        margin:0 auto;

        font-size:.92rem;

        line-height:1.6;

        text-align:center;

    }

    .firm-portraits{

        grid-template-columns:repeat(2,1fr);

        gap:1.5rem;

        margin-bottom:1.5rem;

    }

    .portrait{

        text-align:center;

    }

    .portrait img{

        max-width:120px;

        margin:0 auto .85rem;

    }

    .portrait h3{

        font-size:.84rem;

        line-height:1.15;

        margin-bottom:.2rem;

    }

    .partner-role{

        font-size:.65rem;

        letter-spacing:.10em;

        white-space:nowrap;

    }

    .firm-profiles{

        max-width:420px;

    }

    .profile{

        padding:1.5rem 0;

    }

    .profile h3{

        font-size:1.45rem;

        margin-bottom:1rem;

        text-align:center;

    }

    .profile p{

        font-size:.92rem;

        line-height:1.65;

        text-align:center;

    }

}