/* Loaded after the existing design. One external appointment destination site-wide. */
.button[data-appointment-link] {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}
.header-contact[data-appointment-link] {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 11px;
  letter-spacing: .12em;
}
.primary-nav > .nav-mobile-contact[data-appointment-link] {
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  min-height: 48px;
}
.hero__actions .button[data-appointment-link] { padding-inline: 22px; }
.appointment-panel {
  align-self: center;
  min-width: 0;
  padding: clamp(28px, 3.5vw, 48px);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 42px rgb(30 66 121 / 12%);
}
.appointment-panel > .eyebrow { margin: 0 0 14px; font-size: 12px; letter-spacing: .16em; }
.appointment-panel h2 { margin: 0; color: #173664; font-size: clamp(32px, 3vw, 46px); line-height: 1.15; text-wrap: balance; }
.appointment-panel > p:not(.eyebrow) { margin: 20px 0 26px; font-size: 16px; line-height: 1.6; color: #58709a; }
.appointment-panel .button { width: 100%; min-height: 52px; padding: 16px 20px; letter-spacing: .12em; }
.appointment-panel > .appointment-panel__phone { margin: 20px 0 0; font-size: 14px; }
.appointment-panel__phone a { color: #315aa8; font-weight: 600; white-space: nowrap; }
.process-card--appointment { aspect-ratio: 278 / 275; background: linear-gradient(#d7e4fd, #f3f3f3); }
.process-card--appointment .process-card__art { position: absolute; inset: 0 0 29%; overflow: hidden; }
.process-card--appointment .process-card__image { width: 100%; }
.process-card__appointment-label { position: absolute; inset: auto 6.5% 6%; z-index: 2; color: #315aa8; font-size: clamp(16px, 1.6vw, 26px); line-height: 1.08; text-transform: uppercase; }
[data-appointment-link]:focus-visible { outline: 3px solid #789bd5; outline-offset: 4px; }
@media (max-width: 1180px) {
  .contact-section > .appointment-panel { grid-row: 1; }
}
@media (max-width: 620px) {
  .appointment-panel { padding: 28px 22px; }
  .appointment-panel h2 { font-size: 34px; }
  .appointment-panel .button { font-size: 11px; }
  .process-card__appointment-label { font-size: clamp(19px, 4.7vw, 26px); }
}