/* =========================================================================
   Contact Us: page-only styles. Shared tokens and components live in
   ../style.css; this file only composes and extends them.
   ========================================================================= */

/* Hero ------------------------------------------------------------------- */
.reply-line {
  display: inline-flex; align-items: center; gap: .65rem;
  margin-top: 1.75rem; padding: .55rem .95rem .55rem .8rem;
  border-radius: 999px; background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--shadow-soft);
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text);
}
.reply-line .rec__dot { flex: none; }
.hero-chip--contact { left: -7%; bottom: -26px; }
.hero-chip--contact .icon-tile { width: 42px; height: 42px; border-radius: 10px; background: var(--c-signal-btn); color: #fff; border-color: var(--c-signal-btn); }
.hero-chip--contact .icon-tile .icon { width: 20px; height: 20px; }
@media (max-width: 999px) { .hero-chip--contact { left: 16px; bottom: -22px; } }
@media (max-width: 999px) { .contact-hero .page-hero__media { margin-bottom: 1.5rem; } }

/* Contact cards ------------------------------------------------------------ */
@media (min-width: 640px) { .contact-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .contact-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.contact-cards--4 .contact-card { position: relative; overflow: hidden; isolation: isolate; min-height: 100%; padding: 1.75rem; gap: .55rem; }
/* hover glow: soft red light leak blooming from the top-right corner */
.contact-cards--4 .contact-card::before {
  content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; right: -110px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,59,47,.28), rgba(255,59,47,0) 68%);
  opacity: 0; transform: scale(.6); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); pointer-events: none;
}
.contact-cards--4 .contact-card:hover::before, .contact-cards--4 .contact-card:focus-visible::before { opacity: 1; transform: scale(1); }
.contact-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.1rem; }
.contact-card .icon-tile { transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med); }
.contact-card:hover .icon-tile, .contact-card:focus-visible .icon-tile { background: var(--c-signal-btn); color: #fff; border-color: var(--c-signal-btn); }
.contact-card__go { width: 20px; height: 20px; color: var(--c-text-muted); transition: color var(--t-fast), transform .4s var(--ease-out); }
.contact-card:hover .contact-card__go, .contact-card:focus-visible .contact-card__go { color: var(--c-accent); transform: translate(3px, -3px); }
.contact-card__hint { font-size: .9rem; color: var(--c-text-muted); }
.contact-cards--4 .contact-card__value { font-size: 1.12rem; line-height: 1.35; }
@media (max-width: 639px) {
  .contact-cards--4 .contact-card { grid-template-columns: 48px 1fr; column-gap: 1rem; row-gap: .15rem; padding: 1.15rem 2.75rem 1.15rem 1.15rem; }
  .contact-card__top { display: contents; }
  .contact-cards--4 .contact-card .icon-tile { grid-row: 1 / span 3; width: 48px; height: 48px; align-self: center; }
  .contact-card__go { position: absolute; top: 1.1rem; right: 1.1rem; }
  .contact-cards--4 .contact-card__value { font-size: 1.02rem; }
  .contact-card__hint { font-size: .85rem; }
}

/* Inquiry: left column ------------------------------------------------------ */
.reply-card { margin-top: 2.25rem; padding: 1.5rem 1.6rem; border-radius: 22px; display: grid; gap: .9rem; }
.reply-card__head { display: flex; align-items: center; gap: .65rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text); padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.reply-card__title { font-weight: 700; }
.reply-card__list { display: grid; gap: .6rem; }
.reply-card__list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--c-text-soft); font-size: .98rem; }
.reply-card__list .icon { flex: none; width: 18px; height: 18px; margin-top: .25rem; color: var(--c-accent); }
.talk-instead { margin-top: 1.75rem; display: grid; gap: .8rem; }
.talk-instead .mono { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.talk-instead .cluster { gap: .6rem; }

/* Location: map + socials ------------------------------------------------- */
.location { overflow: hidden; }
.location .map-facade { aspect-ratio: 4 / 3; box-shadow: var(--shadow-depth); }
@media (min-width: 900px) {
  .location__grid { align-items: stretch; }
  .location__map { display: flex; flex-direction: column; }
  .location .map-facade { flex: 1; aspect-ratio: auto; min-height: 420px; }
}
.map-note { margin-top: .9rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.location__copy { display: grid; gap: 1.25rem; justify-items: start; }
.location__copy h2 { margin: 0; }
.social-links__title { margin-top: 1.5rem; font-size: var(--fs-h3, 1.3rem); }
.social-links { display: grid; gap: .75rem; width: 100%; }
.social-link {
  position: relative; display: flex; align-items: center; gap: 1rem; min-height: 64px; padding: .8rem 1.1rem .8rem .8rem;
  border-radius: 16px; background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--shadow-soft);
  transition: border-color var(--t-med), box-shadow var(--t-med), transform .45s var(--ease-out);
}
.social-link .icon-tile { width: 46px; height: 46px; border-radius: 12px; transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med); }
.social-link .icon-tile .icon { width: 20px; height: 20px; }
.social-link__text { display: grid; line-height: 1.3; }
.social-link__text small { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted); }
.social-link__go { margin-left: auto; width: 18px; height: 18px; color: var(--c-text-muted); transition: color var(--t-fast), transform .4s var(--ease-out); }
.social-link:hover, .social-link:focus-visible { border-color: rgba(224,40,28,.45); box-shadow: var(--shadow-depth), 0 0 36px -14px rgba(224,40,28,.5); transform: translateY(-3px); }
.social-link:hover .icon-tile, .social-link:focus-visible .icon-tile { background: var(--c-signal-btn); color: #fff; border-color: var(--c-signal-btn); }
.social-link:hover .social-link__go, .social-link:focus-visible .social-link__go { color: var(--c-accent); transform: translate(3px, -3px); }

@media (prefers-reduced-motion: reduce) {
  .contact-cards--4 .contact-card::before, .contact-card__go, .social-link, .social-link__go { transition: none; }
}