body { font-family: 'Inter', sans-serif; background: #fff; }
    h1, h2, h3, .serif { font-family: 'Playfair Display', serif; }

    /* --- CONTACT HERO --- */
    .contact-hero {
      height: 60vh; background: #002f43; color: white;
      display: flex; align-items: center; justify-content: center;
      text-align: center; position: relative; overflow: hidden;
    }
    .contact-hero-bg {
      position: absolute; inset: 0; opacity: 0.2;
      background: url('../assets/banner_image.jpg') center/cover no-repeat;
    }
    .hero-title-contact { font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; line-height: 1; z-index: 10; position: relative; }

    /* --- PREMIUM CONTACT LAYOUT --- */
    .contact-wrapper { padding: 120px 0; background: #fafafa; }
    .contact-card-main {
      background: white; border-radius: 40px; overflow: hidden;
      display: grid; grid-template-columns: 0.9fr 1.1fr;
      box-shadow: 0 40px 100px rgba(0,0,0,0.08);
    }
    
    .contact-info-panel { background: var(--dark-text); color: white; padding: 80px; position: relative; overflow: hidden; }
    .contact-info-panel::before {
      content: ''; position: absolute; bottom: -50px; right: -50px;
      width: 200px; height: 200px; background: var(--secondary); opacity: 0.1; border-radius: 50%;
    }
    
    .info-item-alt { display: flex; gap: 24px; margin-bottom: 48px; align-items: flex-start; }
    .info-icon-alt {
      width: 56px; height: 56px; background: rgba(255,255,255,0.05); border-radius: 16px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--secondary);
    }
    
    .contact-form-panel { padding: 80px; }

    @media (max-width: 1024px) {
      .contact-card-main { grid-template-columns: 1fr; }
      .contact-info-panel, .contact-form-panel { padding: 40px 24px; }
    }

    @media (max-width: 768px) {
      .contact-hero { height: 40vh; }
      .hero-title-contact { font-size: 3rem; }
      .contact-wrapper { padding: 60px 0; }
      .contact-card-main { border-radius: 20px; }
      .info-item-alt { margin-bottom: 32px; }
      .contact-info-panel h3, .contact-form-panel h3 { font-size: 2rem !important; margin-bottom: 30px !important; }
      #site-footer { padding: 60px 0; }
    }

    @media (max-width: 480px) {
      .hero-title-contact { font-size: 2.5rem; }
      .info-icon-alt { width: 48px; height: 48px; }
      .info-item-alt { gap: 16px; }
      .contact-info-panel, .contact-form-panel { padding: 30px 20px; }
      .contact-form label { margin-top: 12px; }
    }