/* Vambrace's outlined buttons with a separate purple arrow square. */
body a.button { padding: 0 !important; gap: 0 !important; }
body .button {
  --button-outline: #293252;
  display: inline-flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: 0;
  min-height: 52px;
  max-width: 100%;
  border: 2px solid var(--button-outline);
  border-radius: 0;
  background: #fff !important;
  color: #293252 !important;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .025em;
  box-shadow: none;
  transition: background .2s, box-shadow .2s;
}
body .button > .button-label {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}
body .button > .button-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  width: 50px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--button-outline);
  background: #cd61ff;
  color: #fff;
}
.button-arrow svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.8; transition: transform .2s; }
body .button:hover { background: #f6edf9 !important; border-color: var(--button-outline); box-shadow: 0 5px 14px #29325212; }
.button:hover .button-arrow svg { transform: translateX(3px); }
body .hero .button { --button-outline: #fff; border-color: #fff; }
body .hero .button-glass { background: #242d4b40 !important; color: #fff !important; }
body .hero .button-glass:hover { background: #242d4b75 !important; }
body .site-header .button > .button-label { padding-inline: 16px; }
body .site-header .button > .button-arrow { flex-basis: 46px; width: 46px; }

/* Carry the same frame into the contact invitation on every page. */
.contact-block { background: #f5f0f8; padding: 76px 0; }
.contact-block .contact-grid {
  position: relative;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  padding: 54px;
  border: 2px solid #293252;
  background: #fff;
  box-shadow: 10px 10px 0 #e4d2ee;
}
.contact-block .contact-grid::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  background: #cd61ff;
  border: 2px solid #293252;
  pointer-events: none;
}
.contact-block .contact-grid h2 { font-size: clamp(38px,4vw,60px); }
.contact-block .contact-grid p:not(.eyebrow) { font-size: 17px; }
.contact-block .contact-actions { gap: 22px; }
.contact-block .contact-actions .phone { font-size: 16px; }

@media(max-width:1100px) {
  .contact-block .contact-grid { padding: 40px; gap: 40px; }
}
@media(max-width:760px) {
  body .button > .button-label { padding: 13px 16px; font-size: 11px; }
  body .button > .button-arrow { flex-basis: 46px; width: 46px; }
  .contact-block { padding: 50px 0 58px; }
  .contact-block .contact-grid { grid-template-columns: 1fr; padding: 34px 25px; gap: 26px; box-shadow: 7px 7px 0 #e4d2ee; }
  .contact-block .contact-grid h2 { font-size: 42px; }
  .contact-block .contact-grid p:not(.eyebrow) { font-size: 16px; }
  .contact-block .contact-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
}
@media(prefers-reduced-motion:reduce) { .button-arrow svg { transition: none; } }
