/* /contact: the email is the headline, on the map; the company and the grievance route as registry rows. Loaded by contact.html only. */

/* ---------- opener: the address as the headline ---------- */
.contact-in { display: grid; justify-items: start; align-content: start; }
.mail-h { margin-top: clamp(18px, 4vh, 44px); font: 800 clamp(44px, 8.9vw, 128px)/.92 var(--display); letter-spacing: -.035em; }
.mail-h a, .ig-l a { display: block; touch-action: manipulation; }
.mail-h a:active, .ig-l a:active { transform: scale(.98); transform-origin: left; }
@media (hover: hover) { .mail-h a:hover .ln > span { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; text-decoration-color: var(--y); } }
.ig-l { margin-top: clamp(10px, 1.6vh, 18px); font: 800 var(--fs-ih2)/1 var(--display); letter-spacing: -.03em; }
.ig-k { display: inline-block; margin-right: .5em; vertical-align: .55em; font: 600 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ink); border-radius: 8px; padding: 7px 9px 6px; text-shadow: none; }
.contact-card { margin-top: clamp(28px, 6vh, 64px); max-width: 560px; display: grid; gap: 10px; padding: 22px 24px 24px; background: #fff; border-radius: 24px; box-shadow: inset 0 0 0 1.5px var(--rule); }
.contact-card p { font-size: 17px; line-height: 1.55; color: #333; }
.contact-card .contact-lead { font: 800 var(--fs-ih3)/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.contact-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* the one number on this page, as the app draws a task on its map: a price pill with a tag under it */
.contact-open .wrap { position: relative; }
.c-pin { position: absolute; right: clamp(48px, 12vw, 200px); top: 58%; display: grid; justify-items: center; gap: 12px; touch-action: manipulation; }
.c-pin .pill { font-size: clamp(56px, 7.2vw, 104px); padding: .14em .38em .04em; border-width: max(3px, .035em); transform: rotate(-3deg); box-shadow: 0 .12em .26em -.06em rgba(18,18,18,.38); }
.c-pin-t { font: 600 15px/1 var(--text); background: var(--ink); color: #fff; border-radius: 8px; padding: 8px 11px 7px; rotate: 3deg; white-space: nowrap; }
@media (hover: hover) { .c-pin:hover .pill { background: #FFD233; } }
.c-pin:active { transform: scale(.97); }
html.motion .c-pin .pill { animation: pin-drop-c .55s var(--out) .7s both; }
@keyframes pin-drop-c { 0% { opacity: 0; transform: translateY(-48px) rotate(-3deg); } 55% { opacity: 1; transform: rotate(-3deg); } 66% { transform: rotate(-3deg) scale(1.04, .92); } 100% { opacity: 1; transform: rotate(-3deg); } }
@media (max-width: 959px) {
  .mail-h { font-size: min(13.6vw, 56px); }
  .c-pin { position: static; order: 5; justify-self: end; margin: 34px 4px 0 0; }
  .c-pin .pill { font-size: 56px; }
  .c-pin-t { font-size: 13px; }
  .ig-l { font-size: 34px; }
  .ig-k { font-size: 11px; vertical-align: .4em; }
  .contact-card { padding: 18px 18px 20px; }
  .contact-acts .btn { flex: 1 1 auto; }
}