/* ===============================
   CONTACT PAGE
=============================== */

body.site{
background:#3d5a8a;
margin:0;
}


/* page area */
.contact-wrapper{
width:100%;
background:#3d5a8a;
padding:26px 0 18px;
min-height:auto;
}


/* centered outer shell */
.contact-card-outer{
max-width:980px;
margin:0 auto;
background:#1fb144;
border:none;
border-radius:28px;
padding:22px;
box-shadow:none;
}


/* yellow frame */
.contact-card-inner{
position:relative;
background:#f4c32f;
border:none;
border-radius:22px;
padding:22px;
margin:0;
}


/* soft inner line */
.contact-inner-outline{
position:absolute;
top:18px;
left:18px;
right:18px;
bottom:18px;
border:1.5px solid rgba(255,255,255,.22);
border-radius:18px;
pointer-events:none;
}


/* orange main card */
.contact-grid{
position:relative;
z-index:2;
background:#f28c28;
border-radius:14px;
padding:34px 34px 22px;
align-items:start;
}


/* left side */
.contact-left{
padding-right:34px;
}

.contact-heading{
font-family:'Poppins',sans-serif;
font-size:3rem;
line-height:1;
font-weight:900;
letter-spacing:0;
text-transform:uppercase;
color:#ffffff;
margin:0 0 24px;
}

.contact-copy{
font-family:'Poppins',sans-serif;
font-size:1rem;
line-height:1.4;
font-weight:500;
color:#ffffff;
max-width:300px;
margin:0 0 24px;
}


/* divider */
.contact-divider{
width:1px;
background:#ffffff;
opacity:.55;
height:100%;
}


/* right side */
.contact-right{
padding-left:34px;
}

.contact-field-group{
margin-bottom:18px;
}

.contact-label{
display:block;
font-family:'Poppins',sans-serif;
font-size:.85rem;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
color:#ffffff;
margin-bottom:8px;
}

.contact-label span{
color:#f4c32f;
}

.contact-message-row{
display:flex;
align-items:center;
gap:10px;
}

.contact-char-note{
font-family:'Poppins',sans-serif;
font-size:.68rem;
color:#ffffff;
opacity:.9;
}


/* rounded fields */
.contact-input{
width:100%;
height:48px;
background:#3d5a8a;
border:none;
border-radius:999px;
padding:0 18px;
font-family:'Poppins',sans-serif;
font-size:.95rem;
color:#ffffff;
box-shadow:none;
}

.contact-textarea{
width:100%;
min-height:150px;
background:#3d5a8a;
border:none;
border-radius:18px;
padding:14px 18px;
font-family:'Poppins',sans-serif;
font-size:.95rem;
color:#ffffff;
resize:none;
box-shadow:none;
}

.contact-input::placeholder,
.contact-textarea::placeholder{
color:rgba(255,255,255,.72);
}

.contact-input:focus,
.contact-textarea:focus{
outline:none;
box-shadow:0 0 0 3px rgba(255,255,255,.2);
}


/* notes */
.contact-required-note{
font-family:'Poppins',sans-serif;
font-size:.7rem;
color:#ffffff;
opacity:.9;
}


/* button */
.contact-actions{
display:flex;
justify-content:flex-end;
margin-top:16px;
}

.contact-submit{
background:#3d5a8a;
color:#ffffff;
border:none;
border-radius:999px;
padding:10px 28px;
font-family:'Poppins',sans-serif;
font-size:.72rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.contact-submit:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(61,90,138,.25);
opacity:.96;
}

.contact-submit:active{
transform:scale(.98);
box-shadow:none;
}


/* thank you hidden by default */
.contact-thankyou{
display:none;
}

.contact-thankyou.is-visible{
display:block;
margin-bottom:14px;
}

.contact-thankyou-title{
font-family:'Poppins',sans-serif;
font-size:1.1rem;
font-weight:800;
color:#1fb144;
margin:0 0 4px;
}

.contact-thankyou-text{
font-family:'Poppins',sans-serif;
font-size:.82rem;
color:#3d5a8a;
margin:0;
}


/* feedback */
#feedback p{
font-family:'Poppins',sans-serif;
font-size:.78rem;
color:#ffffff;
margin:0 0 6px;
}


/* footer sits close like mockup */
#site-footer{
margin-top:14px;
}


/* mobile */
@media(max-width:899px){

.contact-wrapper{
padding:18px 0 12px;
}

.contact-card-outer{
padding:14px;
border-radius:20px;
}

.contact-card-inner{
padding:14px;
border-radius:16px;
}

.contact-inner-outline{
top:12px;
left:12px;
right:12px;
bottom:12px;
border-radius:14px;
}

.contact-grid{
padding:22px 18px 18px;
border-radius:12px;
}

.contact-left,
.contact-right{
padding:0;
}

.contact-divider{
display:none;
}

.contact-heading{
font-size:2.2rem;
margin-bottom:18px;
}

.contact-copy{
max-width:100%;
font-size:.92rem;
margin-bottom:18px;
}

.contact-actions{
justify-content:flex-start;
}

.contact-input{
height:44px;
}

.contact-textarea{
min-height:130px;
}

}