/* Contact us (/contact-us/): one page for getting in touch and booking.
   No hero: the title, one line and the three ways in (call, email, visit),
   then the PracticeHub booking form on cream with the hours beside it, then
   the map and the old page's directions. Everything else is site.css,
   service.css (sec-head) and resources.css (page-top, art__title, lede). */

/* ---------- 1. the three ways in ------------------------------------------ */
.contact__ways{display:grid;margin-top:var(--s7);border-top:1px solid var(--line-strong)}
.contact__ways li{border-bottom:1px solid var(--line-strong)}
.contact__ways a{display:block;padding-block:var(--s4);text-decoration:none;color:var(--ink)}
.contact__big{display:block;margin-top:var(--s1);font-weight:300;font-size:22px;line-height:28px;letter-spacing:-.015em;
  overflow-wrap:anywhere;transition:color var(--t)}
.contact__ways a:hover .contact__big{color:var(--lime-text)}
@media (min-width:1024px){
  .contact__ways{grid-template-columns:repeat(3,1fr);column-gap:var(--s6);border-top:0}
  .contact__ways li{border-bottom:0;border-top:1px solid var(--line-strong)}
  .contact__big{font-size:24px;line-height:30px}
}

/* ---------- 2 and 3. two-column rows -------------------------------------- */
.contact__grid{display:grid;gap:var(--s7)}
@media (min-width:1024px){ .contact__grid{grid-template-columns:7fr 5fr;gap:var(--s8);align-items:start} }
/* The booking form takes the full width, as in the booking band; the hours and the social
   links sit side by side beneath it. */
@media (min-width:1024px){ .contact__book .contact__grid{grid-template-columns:minmax(0,1fr)} }
.contact__side{display:grid;gap:var(--s7)}
@media (min-width:768px){ .contact__side{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8)} }
.contact__side .hours{margin-top:var(--s3)}
.contact__side .body-sm a{color:inherit}
.contact__social{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s4)}
.contact__social a{position:relative;font-size:15px;line-height:22px;color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--line-strong);text-underline-offset:4px;transition:text-decoration-color var(--t)}
.contact__social a:hover{text-decoration-color:currentColor}
/* the touch area reaches 44px without moving the layout */
.contact__social a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

.contact__grid--find{margin-top:var(--s7)}
.contact__find{display:grid;gap:var(--s6)}
.contact__find>div{border-top:1px solid var(--line-strong);padding-top:var(--s4)}
.contact__find .body-sm,.contact__find .addr{margin-top:var(--s2);max-width:42ch}
.contact__find .addr{font-family:var(--font-sans);font-weight:300;font-size:19px;line-height:25px;letter-spacing:-.01em}
.contact__find .dot-link{display:inline-flex}