/* --- 1. CORE VARIABLES --- */
:root {
    --page-black: #0F1214;
    --header-obsidian: #0A0C0D;
    --card-surface: #181D20;
    --sand-text: #D6D2C4;
    --terracotta: #A45A4D;
    --muted-grey: #6D7275;
}

/* --- 2. BASE & NAV --- */
* { margin: 0; padding: 0; box-sizing: border-box; outline: none; }

body { 
    background-color: var(--page-black); 
    color: var(--sand-text); 
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.simple-nav { padding: 30px 8%; background: var(--header-obsidian); }
.simple-nav a { 
    color: var(--sand-text); text-decoration: none; font-size: 0.6rem; 
    text-transform: uppercase; letter-spacing: 2px; opacity: 0.4; transition: 0.3s;
}
.simple-nav a:hover { opacity: 1; color: var(--terracotta); }

/* --- 3. LAYOUT --- */
.contact-container { max-width: 1000px; margin: 80px auto; padding: 0 5%; }

.intro { text-align: center; margin-bottom: 80px; }
.intro h1 { font-size: 3rem; font-weight: 200; letter-spacing: -1px; text-transform: lowercase; }
.subtitle { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 4px; color: var(--terracotta); font-weight: 700; }

.contact-grid { 
    display: grid; 
    grid-template-columns: 1.5fr 1fr; 
    gap: 80px; 
    align-items: start;
}

/* --- 4. THE FORM --- */
.form-wrapper { background: var(--card-surface); padding: 40px; }

.input-group { margin-bottom: 25px; display: flex; flex-direction: column; }

.input-group label { 
    font-size: 0.55rem; text-transform: uppercase; letter-spacing: 2px; 
    color: var(--terracotta); margin-bottom: 10px; font-weight: 700;
}

/* Form Inputs */
input, select, textarea {
    background: #0A0C0D; /* Slightly darker than card */
    border: 1px solid rgba(255,255,255,0.05) !important;
    color: var(--sand-text);
    padding: 15px;
    font-family: inherit;
    font-size: 0.9rem;
    transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--terracotta) !important;
    box-shadow: 0 0 15px rgba(164, 90, 77, 0.1);
}

/* Submit Button */
.submit-btn {
    background: var(--terracotta);
    color: var(--sand-text);
    padding: 18px 35px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.4s;
    width: 100%;
}

.submit-btn:hover {
    background: var(--sand-text);
    color: var(--header-obsidian);
    transform: translateY(-2px);
}

/* --- 5. CONNECT INFO --- */
.connect-info h3 { 
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; 
    color: var(--terracotta); margin-bottom: 20px; 
}

.connect-info p { font-size: 0.95rem; color: var(--muted-grey); margin-bottom: 40px; font-weight: 300; }

.info-item { margin-bottom: 30px; }
.info-item span { font-size: 0.5rem; text-transform: uppercase; letter-spacing: 2px; opacity: 0.4; }
.info-item p { margin-bottom: 0; color: var(--sand-text); font-size: 1.1rem; }

/* Social Links Hover Pop */
.social-links a {
    display: block;
    color: var(--sand-text);
    text-decoration: none;
    font-size: 0.8rem;
    margin-bottom: 10px;
    opacity: 0.4;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-links a:hover {
    opacity: 1;
    color: var(--terracotta);
    transform: translateX(10px);
    text-shadow: 0 0 10px rgba(164, 90, 77, 0.4);
}

/* --- 6. FOOTER --- */
footer { padding: 100px 0 60px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }
footer p { 
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 2px; 
    color: var(--sand-text); opacity: 0.3; transition: 0.4s; cursor: default;
}
footer p:hover { opacity: 1; color: var(--terracotta); transform: scale(1.05); }

/* --- 7. MOBILE --- */
@media (max-width: 850px) {
    .contact-grid { grid-template-columns: 1fr; gap: 50px; }
    .intro h1 { font-size: 2.2rem; }
}