/*======================================================
    WHAT IF BRANDING
    CONTACT BASE
======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
    --primary:#B87333;
    --primary-light:#D99152;
    --primary-dark:#8F5828;

    --bg:#0D0D0F;
    --bg-soft:#141518;
    --card:#18191D;

    --border:rgba(255,255,255,.08);
    --border-light:rgba(184,115,51,.35);

    --text:#FFFFFF;
    --text-soft:rgba(255,255,255,.74);
    --text-muted:rgba(255,255,255,.50);

    --radius-md:18px;
    --radius-lg:30px;

    --transition:.35s cubic-bezier(.4,0,.2,1);
}

.contact-page{
    background:var(--bg);
    color:var(--text);
    font-family:"Inter",sans-serif;
    overflow-x:hidden;
}

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

.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-page h4{
    font-family:"Playfair Display",serif;
    font-weight:600;
    line-height:1;
    color:var(--text);
    margin:0;
}

.contact-page p{
    margin:0;
    color:var(--text-soft);
    line-height:1.7;
}

.contact-page input,
.contact-page select,
.contact-page textarea,
.contact-page button{
    font-family:inherit;
}

.contact-page button{
    cursor:pointer;
}

.contact-page img{
    max-width:100%;
}