/* ==================================================
   FEATURE CARDS
================================================== */

.feature-cards{

    /* reduced the negative offset so cards still overlap slightly but don't invade the hero */
    margin-top:-3rem;

    position:relative;

    z-index:10;

}

.cards-grid{

    display:grid;

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

    gap:2rem;

}

.card{

    background:var(--white);

    padding:2.5rem;

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-md);

    transition:var(--transition);

    border:1px solid transparent;

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(184,138,59,.25);

    box-shadow:var(--shadow-lg);

}

.card__icon{

    width:4rem;

    height:4rem;

    border-radius:50%;

    background:#F5F3ED;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:1.5rem;

}

.card__icon svg{

    width:1.8rem;

    height:1.8rem;

    color:var(--primary);

}

.card__title{

    font-family:var(--font-title);

    font-size:2rem;

    color:var(--primary);

    margin-bottom:1rem;

}

.card__description{

    color:var(--gray);

    line-height:1.8;

}
/* ==================================================
   SERVICE CARD
================================================== */

.services__intro{

    max-width:700px;

    margin:0 auto 4rem;

}

.services__grid{

    display:grid;

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

    gap:2rem;

}

.service-card{

    background:#fff;

    padding:2.5rem;

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-sm);

    transition:.35s;

    border-top:4px solid transparent;

}

.service-card:hover{

    transform:translateY(-10px);

    border-top-color:var(--gold);

    box-shadow:var(--shadow-lg);

}

.service-card__icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#F4F2EC;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:2rem;

}

.service-card__icon svg{

    width:34px;

    height:34px;

    color:var(--primary);

}

.service-card h3{

    font-family:var(--font-title);

    color:var(--primary);

    font-size:2rem;

    margin-bottom:1rem;

}

.service-card p{

    color:var(--gray);

    line-height:1.8;

}
/* ==================================================
   PROCESS
================================================== */

.process{

    background:#ffffff;

}

.process__intro{

    max-width:760px;

    margin:0 auto 4rem;

    text-align:center;

}

.process__grid{

    display:grid;

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

    gap:2rem;

}

.process-card{

    position:relative;

    padding:2.5rem;

    background:#F8F8F8;

    border-radius:var(--radius-md);

    transition:var(--transition);

}

.process-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.process-card__number{

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:2rem;

}

.process-card h3{

    margin-bottom:1rem;

    color:var(--primary);

}

.process-card p{

    color:var(--gray);

    line-height:1.8;

}