/* ============================================================
   CONTACT PAGE — Calling card with portrait
   ============================================================ */

.contact-section { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; padding: 72px var(--page-pad) 90px; align-items: start; }

/* PORTRAIT */
.contact-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 3px; background: var(--paper-deep); }
.contact-sketch { margin-top: 32px; }
.contact-sketch img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; background: transparent; }

/* DETAILS */
.contact-detail-col { display: flex; flex-direction: column; }
.contact-statement-hand { margin-bottom: 56px; }
.contact-statement-hand img { width: 100%; max-width: 322px; height: auto; display: block; }

.contact-rows { display: flex; flex-direction: column; gap: 34px; }
.contact-row { display: flex; flex-direction: column; gap: 10px; }
.contact-row .label { color: var(--soft); }

.contact-email {
  font-size: 17px; font-weight: 400; color: var(--blue); letter-spacing: 0;
  width: fit-content; border-bottom: 1px solid rgba(0,0,171,0.25); padding-bottom: 5px;
  transition: border-color 0.3s ease;
}
.contact-email:hover { border-color: var(--blue); }

.contact-phone { font-size: 17px; font-weight: 400; color: var(--blue); width: fit-content; border-bottom: 1px solid rgba(0,0,171,0.25); padding-bottom: 5px; transition: border-color 0.3s ease; }
.contact-phone:hover { border-color: var(--blue); }

.contact-value { font-size: 14px; line-height: 1.8; color: var(--soft); }

.contact-socials { display: flex; gap: 24px; }
.contact-socials a { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); font-weight: 500; transition: color 0.25s ease; border-bottom: 1px solid transparent; padding-bottom: 3px; }
.contact-socials a:hover { color: var(--blue); border-color: var(--blue); }

/* LEGAL / REGISTRATION — small print */
.contact-legal { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-legal p { font-size: 10px; line-height: 1.9; color: var(--soft); letter-spacing: 0.04em; opacity: 0.85; }

@media (max-width: 900px) {
  .contact-section { grid-template-columns: 1fr; gap: 48px; }
  .contact-photo { max-width: 320px; }
  .contact-statement-hand { margin-bottom: 40px; }
  .contact-statement-hand img { max-width: 210px; }
}

@media (max-width: 768px) {
  .contact-section { display: flex; flex-direction: column; align-items: center; }
  .contact-photo { width: 100%; max-width: 100%; }
  .contact-sketch img { width: 100%; }
  .contact-detail-col { width: 100%; text-align: center; }
  .contact-statement-hand { text-align: center; }
  .contact-statement-hand img { margin: 0 auto; }
  .contact-rows { width: 100%; }
  .contact-row { flex-direction: column; gap: 4px; align-items: center; }
  .contact-legal { text-align: center; }
}