.contacts-section { position: relative; padding-block: var(--section-space); overflow-x: clip; }
.contacts-section .section-heading p { margin-top: var(--space-5); max-width: none; font-size: var(--text-base); }
.contact-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-8); }
.contact-card-grid article { display: flex; flex-direction: column; min-height: 285px; padding: 28px; border-radius: var(--radius-card); background: var(--color-pink-faint); }
.contact-card-grid h3 { display: flex; align-items: center; gap: var(--space-5); margin: 0 0 var(--space-8); font-size: var(--text-h6); line-height: var(--leading-h6); font-weight: var(--font-weight-bold); }
.contact-card-grid h3::before { content: ''; flex: 0 0 24px; width: 24px; height: 24px; background: var(--contact-icon) center/24px 24px no-repeat; }
.contact-card--phone { --contact-icon: url('../../assets/sections/contact-phone.svg'); }
.contact-card--address { --contact-icon: url('../../assets/sections/contact-location.svg'); }
.contact-card--hours { --contact-icon: url('../../assets/sections/contact-clock.svg'); }
.contact-card-grid p { font-size: var(--text-small); line-height: var(--leading-body); overflow-wrap: anywhere; margin: 0 0 var(--space-3); }
.contact-card-grid h3 + p { font-size: var(--text-base); font-weight: var(--font-weight-medium); }
.contact-card-grid p a { text-decoration: none; }
.contact-card-grid p a:hover { text-decoration: underline; }
.contact-card-grid .section-link { margin-top: auto; padding-top: var(--space-7); }
.contact-card-grid p { color: var(--color-text-secondary); }
.contact-card-grid h3 + p { color: var(--color-ink); }
.contacts-section--has-mascot .contact-card--hours p { max-width: 200px; }
@media(min-width:768px) { .contact-card-grid .section-link { color: var(--color-pink); } }
.contact-card-grid .section-link::after { width: 24px; height: 24px; background-image: url('../../assets/sections/service-arrow.svg'); background-size: 24px 24px; filter: brightness(0); }
.contacts-section__mascot { position: absolute; z-index: 1; right: -29px; bottom: -131px; width: clamp(360px, calc(100vw - 1080px), 468px); height: auto; object-fit: contain; pointer-events: none; }
@media(min-width:768px) and (max-width:1439px) {
  .contacts-section--has-mascot .contact-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contacts-section--has-mascot .contact-card--hours { grid-column: 1 / -1; min-height: 360px; }
  .contacts-section--has-mascot .contact-card--hours :is(h3,p) { max-width: calc(100% - 330px); }
  .contacts-section__mascot { bottom: -66px; width: 360px; }
}
@media(max-width:767px) {
  .contact-card-grid { grid-template-columns: 1fr; }
  .contacts-section .section-heading p { margin-top: var(--space-8); }
  .contact-card-grid article { min-height: 0; padding: var(--space-8); }
  .contact-card-grid .contact-card--phone { min-height: 236px; }
  .contact-card-grid .contact-card--address { min-height: 260px; }
  .contact-card-grid .contact-card--hours { min-height: 192px; }
  /* Leave room below the text for the foreground mascot. */
  .contacts-section--has-mascot .contact-card--hours { padding-bottom: 252px; }
  .contacts-section--has-mascot .contact-card--hours p { max-width: none; }
  .contacts-section__mascot { right: -21px; bottom: -66px; width: 271px; height: 349px; }
}