/* ── CONTACT PAGE SPECIFIC STYLES ── */
/* ============================================================
   GLOBAL SAFEGUARDS (THE OVERFLOW FIX)
   ============================================================ */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Hero Section */
.pc-contact-hero {
    position: relative;
    padding: 140px 0 60px;
    text-align: center;
    background-color: #f0f4fd;
    background-image:
        radial-gradient(at 10% 40%,  rgba(200,240,255,0.7)  0px, transparent 50%),
        radial-gradient(at 80% 80%,  rgba(240,200,255,0.6)  0px, transparent 50%),
        radial-gradient(at 40% 70%,  rgba(210,190,255,0.5)  0px, transparent 50%),
        radial-gradient(at 90% 10%,  rgba(255,240,200,0.6)  0px, transparent 50%),
        radial-gradient(at 50% 30%,  rgba(255,210,230,0.5)  0px, transparent 50%);
    overflow: hidden;
}

.pc-contact-orb-1, .pc-contact-orb-2 {
    position: absolute;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--color-purple-200) 0%, rgba(255,255,255,0) 70%);
    top: -100px; left: -100px;
    pointer-events: none;
    z-index: 0;
}
.pc-contact-orb-2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--color-indigo-100) 0%, rgba(255,255,255,0) 70%);
    top: auto; bottom: -200px; left: auto; right: -200px;
}

.pc-mesh-bg {
    position: absolute; inset: 0; z-index: 1;
    background-color: #f0f4fd;
    background-image:
        radial-gradient(at 10% 40%,  rgba(200,240,255,0.7)  0px, transparent 50%),
        radial-gradient(at 80% 80%,  rgba(240,200,255,0.6)  0px, transparent 50%),
        radial-gradient(at 40% 70%,  rgba(210,190,255,0.5)  0px, transparent 50%),
        radial-gradient(at 90% 10%,  rgba(255,240,200,0.6)  0px, transparent 50%),
        radial-gradient(at 50% 30%,  rgba(255,210,230,0.5)  0px, transparent 50%);
}

.pc-contact-hero-content {
    position: relative; z-index: 2;
    max-width: 700px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
}

.pc-contact-hero-desc {
    margin-top: 20px; color: var(--color-gray-500);
}

/* Main Grid Layout */
.pc-contact-main { padding: 40px 0 80px; position: relative; z-index: 5; }
.pc-contact-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 40px;
    align-items: flex-start;
}

/* Left Column: Info Card */
.pc-contact-info-card {
    position: relative;
    padding: 48px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(238, 242, 255, 0.7));
    overflow: hidden;
}

.pc-card-shimmer {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: shimmer 6s infinite;
    pointer-events: none;
}
@keyframes shimmer { 0% { left: -100%; } 20%, 100% { left: 200%; } }

.pc-mb-6 { margin-bottom: 32px; color: var(--color-gray-500); }

.pc-info-list { display: flex; flex-direction: column; gap: 32px; margin-bottom: 48px; }
.pc-info-item { display: flex; align-items: flex-start; gap: 20px; }

.pc-info-icon {
    width: 50px; height: 50px; border-radius: 14px;
    background: var(--gradient-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(99,102,241,0.25);
}

.pc-info-text { display: flex; flex-direction: column; }
.pc-label { color: var(--color-indigo-500); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px;}
.pc-sub { color: var(--color-gray-500); margin-top: 2px; }
.pc-link { color: var(--color-gray-800); text-decoration: none; transition: var(--transition-fast); }
.pc-link:hover { color: var(--color-indigo-600); }

.pc-social-links { padding-top: 32px; border-top: 1px solid rgba(0,0,0,0.05); }
.pc-social-row { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pc-social-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; color: var(--color-gray-800);
    border: 1px solid var(--color-indigo-100);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; text-decoration: none;
    transition: var(--transition-base);
}
.pc-social-icon:hover {
    background: var(--gradient-primary); color: #fff;
    transform: translateY(-3px); box-shadow: 0 6px 12px rgba(99,102,241,0.3);
}

/* Right Column: Form */
.pc-contact-form { padding: 48px; border-radius: 24px; }
.pc-form-title { margin-bottom: 32px; display: flex; align-items: center; gap: 12px; }
.pc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.pc-full-width { margin-bottom: 20px; }

/* Enhancing Global Input Styles for the Form */
.input-glass { background: rgba(255,255,255,0.7); height: auto; }
textarea.input-glass { padding-top: 24px; }

/* Custom Select Dropdown styling */
.pc-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.pc-select-arrow {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    color: var(--color-gray-500); pointer-events: none;
    transition: var(--transition-fast);
}
.pc-select:focus ~ .pc-select-arrow { color: var(--color-indigo-600); transform: translateY(-50%) rotate(180deg); }
.pc-select option { color: var(--color-gray-800); background: #fff; }

.pc-form-submit { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.pc-submit-btn { width: 100%; justify-content: space-between; padding: 18px 32px; font-size: 1.1rem; }
.pc-privacy-text { text-align: center; color: var(--color-gray-500); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }


/* Map / Studio Section */
.pc-contact-map-sec { padding: 40px 0 80px; }
.pc-map-glass-box {
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 0;
    border-radius: 24px; overflow: hidden; padding: 0;
}
.pc-map-content { padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; }
.pc-mt-4 { margin-top: 24px; width: fit-content; }

.pc-map-visual { position: relative; min-height: 350px; }
.pc-map-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) contrast(120%); }
.pc-map-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(255,255,255,0.8), transparent); }

/* Animated Map Pin */
.pc-map-pin {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--color-indigo-600); font-size: 2.5rem; z-index: 2;
}
.pc-pin-pulse {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60px; height: 60px; background: rgba(99, 102, 241, 0.3);
    border-radius: 50%; animation: pc-orbPulse 2s infinite; z-index: -1;
}


/* ============================================================
   RESPONSIVE DESIGN (MOBILE OPTIMIZED)
   ============================================================ */

/* ── TABLET & SMALL LAPTOPS ── */
@media (max-width: 1024px) {
    .pc-contact-grid { gap: 30px; }
    .pc-contact-info-card, .pc-contact-form { padding: 32px; }
    .pc-map-content { padding: 40px 32px; }
}

/* ── TABLET PORTRAIT & LARGE PHONES ── */
@media (max-width: 900px) {
    .pc-contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .pc-map-glass-box { grid-template-columns: 1fr; }
    .pc-map-visual { min-height: 300px; }
    .pc-map-overlay { background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent); }
}

/* ── STANDARD PHONES ── */
@media (max-width: 768px) {
    .pc-contact-hero { padding: 120px 0 40px; }
    .pc-form-row { grid-template-columns: 1fr; gap: 20px; }
    .pc-contact-info-card, .pc-contact-form { padding: 32px 24px; }
    .pc-map-content { padding: 40px 24px; }
    .pc-info-list { gap: 24px; }
}

/* ── SMALL PHONES (ULTRA MOBILE OPTIMIZED) ── */
@media (max-width: 480px) {
    .pc-contact-hero { padding: 100px 0 30px; }
    .pc-contact-main { padding: 20px 0 60px; }
    
    /* Shrink the inner padding slightly to give content more room to breathe */
    .pc-contact-info-card, .pc-contact-form { padding: 24px 20px; }
    
    /* Adjust info icons so they don't overpower the text on narrow screens */
    .pc-info-item { gap: 16px; }
    .pc-info-icon { width: 42px; height: 42px; font-size: 1rem; }
    
    /* Ensure the form fits perfectly */
    .pc-form-title { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px; }
    .pc-submit-btn { padding: 16px 24px; font-size: 1rem; }
    
    /* Map section adjustments */
    .pc-map-content { padding: 32px 20px; }
    .pc-map-visual { min-height: 220px; }
    .pc-map-pin { font-size: 2rem; }
    .pc-pin-pulse { width: 50px; height: 50px; }
    
    /* Social Icons Wrap */
    .pc-social-row { justify-content: flex-start; gap: 10px; }
    .pc-social-icon { width: 40px; height: 40px; font-size: 1rem; }
}