/* ── CONTACT PAGE STYLES ── */

/* Page header — same as about/services/work */
.ph { min-height: 56vh; padding: 160px 56px 80px; border-bottom: 1px solid var(--ln); display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.ph-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px); background-size: 64px 64px; opacity: .25; mask-image: radial-gradient(ellipse 60% 80% at 80% 40%,black 0%,transparent 100%); }
.ph-tag { font-family: var(--fb); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--d); margin-bottom: 18px; position: relative; }
.ph-h { font-family: var(--fd); font-size: clamp(72px,12vw,150px); line-height: .87; letter-spacing: -.01em; color: var(--k); position: relative; }
.ph-h .out { -webkit-text-stroke: 1.5px var(--d2); color: transparent; display: block; }
.ph-foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--ln); position: relative; }

/* Contact section */
.contact-sec {
  padding: 120px 56px; border-bottom: 1px solid var(--ln);
  display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start;
  position: relative; overflow: hidden;
}
.contact-sec::before {
  content: 'CONTACT'; position: absolute; font-family: var(--fd);
  font-size: clamp(80px,16vw,220px); letter-spacing: .04em;
  color: var(--ln); opacity: .3;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.c-email {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fb); font-size: clamp(14px,1.8vw,18px); font-weight: 600;
  letter-spacing: -.01em; color: var(--k); transition: opacity .2s;
}
.c-email::after { content: '↗'; font-weight: 400; font-size: 14px; }
.c-email:hover { opacity: .5; }
.c-form { display: flex; flex-direction: column; }
.cf { border-bottom: 1px solid var(--ln); padding: 20px 0; display: flex; flex-direction: column; gap: 6px; }
.cf-l { font-family: var(--fb); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--d); }
.cf-i, .cf-ta { background: none; border: none; outline: none; font-family: var(--fb); font-size: 14px; color: var(--k); width: 100%; resize: none; }
.cf-i::placeholder, .cf-ta::placeholder { color: var(--lnk); }
.cf-foot { margin-top: 28px; display: flex; align-items: center; gap: 20px; }
.cf-note { font-family: var(--fb); font-size: 12px; color: var(--d); }

/* Responsive */
@media (max-width: 1024px) {
  .ph { padding: 140px 28px 64px; }
  .contact-sec { padding: 88px 28px; grid-template-columns: 1fr; gap: 52px; }
}
@media (max-width: 640px) {
  .ph { padding: 128px 20px 48px; }
  .contact-sec { padding: 64px 20px; }
}