/* ==========================================================
SPARK DESIGN SYSTEM™
CONTACT
========================================================== */

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

.contact-wrapper{

    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:clamp(3rem,6vw,6rem);
    align-items:center;

    max-width:1200px;
    margin:0 auto;
}

.contact-intro{

    max-width:620px;
}

.contact-intro h1{

    font-size:clamp(2.8rem,5vw,4.25rem);
    line-height:1.1;
    margin-bottom:1.5rem;
}

.contact-intro p{

    font-size:1.125rem;
    line-height:1.8;
    color:var(--text-2);
    margin-bottom:1.5rem;
}

.contact-actions{

    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:2rem;
}

.contact-image img{

    display:block;
    width:100%;

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

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

.contact-notes{

    list-style:none;
    padding:0;
    margin:2rem 0 0;
}

.contact-notes li{

    position:relative;

    padding-left:1.8rem;

    margin-bottom:.9rem;

    color:var(--text-2);

    line-height:1.7;
}

.contact-notes li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--color-accent);

    font-weight:700;
}

/* ==========================================================
SECTION INTRO
========================================================== */

.section-intro{

    max-width:760px;

    margin:0 auto 4rem;

    text-align:center;
}

/* ==========================================================
PROCESS GRID
========================================================== */

.process-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;
}

.process-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    background:#fff;

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

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

    padding:2.5rem;

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

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.process-card:hover{

    transform:translateY(-6px);

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

    border-color:var(--color-accent);
}

.process-number{

    width:64px;

    height:64px;

    border-radius:50%;

    margin-bottom:1.75rem;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--color-accent);

    color:#fff;

    font-size:1.4rem;

    font-weight:700;
}

.process-card h3{

    margin-bottom:1rem;

    font-size:1.65rem;

    line-height:1.3;
}

.process-card p{

    margin:0;

    color:var(--text-2);

    line-height:1.8;
}

/* ==========================================================
BENEFITS
========================================================== */

.benefits-grid{

    display:grid;

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

    gap:2rem;

    margin-top:3rem;
}

.benefit-card{

    background:#fff;

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

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

    padding:2rem;

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

.benefit-card h3{

    margin-bottom:1rem;
}

.benefit-card p{

    color:var(--text-2);

    margin:0;
}

/* ==========================================================
NEXT STEPS
========================================================== */

.next-steps-grid{

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

    max-width:900px;
    margin:3rem auto;

}

.next-step{

    background:var(--surface-3);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:2rem;
    text-align:center;

}

.step-icon{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    margin-bottom:1rem;

    border-radius:50%;

    background:var(--color-accent);
    color:#fff;
    font-weight:700;

}

.next-step h3{

    margin-bottom:.75rem;

}

.next-step p{

    margin:0;
    color:var(--text-2);

}

@media (max-width:768px){

    .next-steps-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
CONTACT FORM
========================================================== */

.contact-form{

    max-width:900px;

    margin:0 auto;

    background:#fff;

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

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

    padding:clamp(2rem,4vw,3rem);

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

.contact-form .wpforms-container{

    margin:0;
}

.contact-form .wpforms-submit{

    width:100%;
}

/* ==========================================================
CONTACT DETAILS
========================================================== */

.contact-details{

    max-width:760px;

    margin:4rem auto 0;

    text-align:center;
}

.contact-details p{

    margin-bottom:.75rem;

    color:var(--text-2);
}

/* ==========================================================
FAQ
========================================================== */

.faq-section{

    max-width:900px;

    margin:0 auto;
}

/* ==========================================================
RESPONSIVE
========================================================== */

@media (max-width:1100px){

    .process-grid{

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

    .benefits-grid{

        grid-template-columns:1fr;
    }

}

@media (max-width:900px){

    .contact-wrapper{

        grid-template-columns:1fr;

        gap:3rem;
    }

    .contact-image{

        order:-1;
    }

    .contact-intro{

        max-width:100%;
    }

    .contact-actions{

        flex-direction:column;
    }

    .contact-actions .btn{

        width:100%;
    }

}

@media (max-width:768px){

    .process-grid{

        grid-template-columns:1fr;
    }

}

.visibility-question{

    max-width:760px;

    margin:3rem auto;

    padding:2.5rem;

    background:var(--surface-3);

    border-left:4px solid var(--color-accent);

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

    font-size:clamp(1.5rem,3vw,2rem);

    line-height:1.5;

    font-weight:500;

    color:var(--text-1);

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

}

/* ==========================================================
WHY WE WORK THIS WAY
========================================================== */

.philosophy-statement{

    max-width:760px;

    margin:3rem auto 0;

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.philosophy-statement p{

    margin:0;

    font-size:1.25rem;

    line-height:1.8;

    color:var(--text-2);

}

.philosophy-statement .highlight{

    font-size:1.75rem;

    font-weight:700;

    line-height:1.4;

    color:var(--text-1);

}

@media (max-width:768px){

    .philosophy-statement p{

        font-size:1.1rem;

    }

    .philosophy-statement .highlight{

        font-size:1.4rem;

    }

}

/* ==========================================================
WHY WE START WITH UNDERSTANDING
========================================================== */

.philosophy-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;

    max-width:900px;
    margin:3rem auto;

}

.philosophy-item{

    background:var(--surface-3);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:2rem;
    text-align:center;

}

.philosophy-item h3{

    margin-bottom:.75rem;
    font-size:1.2rem;

}

.philosophy-item p{

    margin:0;
    color:var(--text-2);

}

.philosophy-statement .highlight{

    max-width:700px;
    margin:2rem auto 0;
    text-align:center;
    font-size:1.15rem;

}

@media (max-width:768px){

    .philosophy-grid{

        grid-template-columns:1fr;

    }

}