/* =========================
   BODY OVERRIDE
   ========================= */
body {
    color: #09072e;
    background: #f3f3f1;
}

/* =========================
   HEADER — COLOR OVERRIDES ONLY
   ========================= */
.header-nav a          { color: #09072e; }
.header-nav a::after   { background: #09072e; }

.header-socials a {
    color: #09072e;
    background: rgba(9, 7, 46, 0.06);
    border-color: rgba(9, 7, 46, 0.14);
}
.header-socials a:hover { background: var(--color-primary); color: #fff; }

.menu-toggle      { background: rgba(9, 7, 46, 0.06); border-color: rgba(9, 7, 46, 0.18); }
.menu-toggle span { background: #09072e; }
.menu-toggle:hover { background: var(--color-primary); border-color: var(--color-primary); }
.menu-toggle:hover span { background: #fff; }

/* =========================
   CONTACT SECTION
   ========================= */
.contact-section {
    width: 100%;
    min-height: 100vh;
    background: #f3f3f1;
    padding: 140px 70px 100px;
}

.contact-container {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
}

.contact-left { margin: auto; }

.contact-left h1 {
    font-size: 4rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -2px;
    color: #09072e;
    margin-bottom: 20px;
}

.contact-left .light { color: #4c5eff; }
.contact-left p      { color: #555; font-size: 1.1rem; }

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 30px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group { display: flex; flex-direction: column; }

.form-group label { font-size: 0.9rem; margin-bottom: 8px; color: #444; }

.form-group input,
.form-group textarea {
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 12px 0;
    font-size: 1rem;
    background: transparent;
    outline: none;
    font-family: inherit;
    color: #09072e;
    transition: border-color 0.25s ease;
}

.form-group input:focus,
.form-group textarea:focus { border-bottom-color: #4c5eff; }

.form-group textarea { resize: none; height: 100px; }

/* Tags */
.contact-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.contact-tags span {
    border: 1px solid #ccc;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    color: #09072e;
}

.contact-tags span:hover,
.contact-tags span.active {
    background: #4c5eff;
    color: #fff;
    border-color: #4c5eff;
}

/* Button */
.contact-btn {
    margin-top: 20px;
    width: fit-content;
    padding: 14px 28px;
    border-radius: 30px;
    border: none;
    background: #09072e;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-btn:hover { background: #4c5eff; }

/* =========================
   MAP SECTION
   ========================= */
.contact-map-section {
    width: 100%;
    background: #f3f3f1;
    padding: 0 70px 120px;
}

.contact-map-container { max-width: 1400px; margin: 0 auto; }
.map-text { margin-bottom: 24px; }

.map-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 10px;
}

.map-text h2 { font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; color: #111; }

.map-frame {
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
    contain: strict;
}

.map-frame iframe { width: 100%; height: 100%; display: block; }

/* =========================
   REDUCED MOTION
   ========================= */
@media (prefers-reduced-motion: reduce) {
    .form-group input,
    .form-group textarea,
    .contact-tags span,
    .contact-btn { transition: none !important; }
}

/* =========================
   MOBILE NAV OVERRIDE
   ========================= */
@media (max-width: 900px) {
    .menu-toggle {
        background: rgba(9, 7, 46, 0.06);
        border-color: rgba(9, 7, 46, 0.18);
    }
    .menu-toggle span { background: #09072e; }
    .menu-toggle.active {
        background: rgba(76, 94, 255, 0.15);
        border-color: rgba(76, 94, 255, 0.5);
    }
    .menu-toggle.active span { background: #fff; }
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1100px) {
    .contact-section      { padding: 130px 40px 80px; }
    .contact-map-section  { padding: 0 40px 100px; }
    .contact-left h1      { font-size: 3.2rem; }
}

@media (max-width: 900px) {
    .contact-section      { padding: 110px 24px 70px; }
    .contact-container    { grid-template-columns: 1fr; gap: 50px; }
    .contact-left         { margin: 0; }
    .contact-left h1      { font-size: 2.8rem; }
    .form-row             { grid-template-columns: 1fr; }
    .contact-map-section  { padding: 0 24px 80px; }
    .map-text h2          { font-size: 1.7rem; }
    .map-frame            { height: 380px; border-radius: 18px; }
}

@media (max-width: 600px) {
    .contact-section      { padding: 100px 18px 60px; }
    .contact-left h1      { font-size: 2.2rem; letter-spacing: -1.5px; }
    .contact-left p       { font-size: 1rem; }
    .contact-btn          { width: 100%; text-align: center; padding: 16px; }
    .contact-map-section  { padding: 0 18px 60px; }
    .map-frame            { height: 300px; border-radius: 14px; }
}