:root{
    --yellow:#FDB813;
    --text:#111827;
    --muted:#6b7280;
    --border:#d8dde6;
  }
  
  .two-col{
    display:flex;
    gap:48px;
    align-items:flex-start;
    padding: 48px 0;
  }
  
  .info{
    flex: 1 1 520px;
    font-size:16px;
    color:#1f2937;
  }
  
  .info p{ margin:0 0 14px; }
  
  .info .strong{
    font-weight:700;
    margin-top:14px;
  }
  
  .info ul{
    margin: 8px 0 18px 18px;
    padding:0;
  }
  
  .info li{ margin:6px 0; }
  
  .mail{
    color: var(--yellow);
    text-decoration:none;
  }
  .mail:hover{ text-decoration:underline; }
  
  .form-card{
    flex: 1 1 520px;
  }
  
  .form{
    display:flex;
    flex-direction:column;
    gap: 18px;
  }
  
  .form label{ display:block; }
  
  .form label span{
    display:block;
    font-size:11px;
    color: var(--muted);
    margin: 0 0 6px;
  }
  
  .form input,
  .form textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:2px;
    padding:12px;
    font-size:16px;
    outline:none;
    background:#fff;
  }
  
  .form textarea{
    border-color: var(--yellow);
    resize: vertical;
    min-height: 150px;
  }
  
  .form input:focus,
  .form textarea:focus{
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(253,184,19,.18);
  }
  
  .btn{
    align-self:flex-start;
    background: var(--yellow);
    color:#fff;
    border:0;
    border-radius:2px;
    padding:10px 18px;
    font-size:12px;
    cursor:pointer;
  }
  
  .btn:hover{ filter: brightness(.97); }
  
  @media (max-width: 900px){
    .two-col{
      flex-direction:column;
      gap:28px;
    }
  
    .info, .form-card{
      flex: 1 1 auto;
      width: 100%;
    }
  }