/* A quiet, centered invitation. Decorative light stays outside the QR image. */
#contact .contact-card {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
#contact .contact-top {
  grid-template-columns: minmax(0, 1fr) 244px minmax(0, 1fr);
  gap: clamp(26px, 3vw, 56px);
  align-items: center;
}
#contact .contact-top > div:first-child { min-width: 0; }
#contact .contact-map { justify-self: end; }
#contact .contact-top h2 {
  font-size: clamp(32px, 3.25vw, 56px);
  line-height: 1.35;
  letter-spacing: -.045em;
}
#contact .contact-qr-wrap {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  width: 244px;
  max-width: 100%;
  margin: 0;
  padding: 23px 22px 22px;
  gap: 0;
  text-align: center;
  color: #155465;
  background: linear-gradient(155deg, #ffffff 0%, #f1fafb 100%);
  border: 1px solid #ffffffd9;
  border-radius: 22px;
  box-shadow: 0 22px 54px #07506530, inset 0 0 0 5px #ffffff66;
  font-family: var(--sans);
  letter-spacing: 0;
  transition: box-shadow .4s ease, border-color .4s ease;
}
#contact .contact-qr-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24px;
  border-radius: 44px;
  background: radial-gradient(ellipse, #c4fff045, transparent 70%);
  opacity: .5;
  pointer-events: none;
  animation: contact-ambient-light 5s ease-in-out infinite alternate;
}
#contact .contact-qr-wrap::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 24%;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  pointer-events: none;
}
#contact .contact-qr-heading { display: grid; gap: 4px; margin-bottom: 17px; }
#contact .contact-qr-heading span {
  font: 9px/1.5 var(--mono);
  letter-spacing: .17em;
  color: #669aa6;
}
#contact .contact-qr-heading strong { font-size: 18px; font-weight: 600; letter-spacing: .1em; }
#contact .contact-qr-frame {
  position: relative;
  padding: 12px;
  border: 1px solid #c7e4e8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 20px #177d9510;
}
#contact .contact-qr-frame::before,
#contact .contact-qr-frame::after {
  content: "";
  position: absolute;
  width: 23px;
  height: 23px;
  pointer-events: none;
  border-color: #58aab8;
  border-style: solid;
  transition: border-color .4s ease;
}
#contact .contact-qr-frame::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; border-radius: 16px 0 0 0; }
#contact .contact-qr-frame::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 16px 0; }
#contact .contact-qr-wrap .contact-qr {
  display: block;
  width: 166px;
  height: 166px;
  max-width: 100%;
  padding: 0;
  margin: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 0;
}
#contact .contact-qr-caption {
  margin: 16px 0 0;
  font: 12px/1.8 var(--sans);
  color: #407480;
}
#contact .contact-bottom { margin-top: 42px; }
@media (hover: hover) {
  #contact .contact-qr-wrap:hover { border-color: #ddffff; box-shadow: 0 24px 60px #07506540, 0 0 32px #d3fff52e, inset 0 0 0 5px #ffffff66; }
  #contact .contact-qr-wrap:hover .contact-qr-frame::before,
  #contact .contact-qr-wrap:hover .contact-qr-frame::after { border-color: #147f9a; }
}
@keyframes contact-ambient-light { from { opacity: .35; } to { opacity: .8; } }
@media (max-width: 1200px) and (min-width: 761px) {
  #contact .contact-top { grid-template-columns: 244px minmax(0, 1fr); gap: 32px 48px; }
  #contact .contact-top > div:first-child { grid-column: 1 / -1; }
  #contact .contact-top h2 { font-size: 43px; }
  #contact .contact-map { grid-column: auto; width: 100%; max-width: none; }
}
@media (max-width: 760px) {
  #contact .contact-top { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  #contact .contact-top > div:first-child { text-align: center; }
  #contact .contact-top .eyebrow { font-size: 9px; letter-spacing: .08em; margin-bottom: 16px; }
  #contact .contact-top h2 { font-size: clamp(27px, 6.4vw, 38px); line-height: 1.45; }
  #contact .contact-qr-wrap { width: 264px; justify-self: center; padding: 24px 24px 23px; margin: 0; border-radius: 24px; }
  #contact .contact-qr-wrap .contact-qr { width: 176px; height: 176px; }
  #contact .contact-qr-heading { margin-bottom: 18px; }
  #contact .contact-qr-heading strong { font-size: 19px; }
  #contact .contact-qr-caption { font-size: 13px; }
  #contact .contact-map { grid-column: auto; width: 100%; max-width: none; margin: 0; }
  #contact .contact-bottom { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  #contact .contact-qr-wrap::before { animation: none; opacity: .5; }
  #contact .contact-qr-wrap,
  #contact .contact-qr-frame::before,
  #contact .contact-qr-frame::after { transition: none; }
}