/* ---------- Contact us page (page-contact.php, template-parts/contact/options.php) ---------- */

/* Header: centred */
.ct-hdr{border-top:0;}
.ct-hdr-in{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:860px;margin:0 auto;}
.ct-hdr-in .tag{margin-bottom:clamp(24px,3vw,36px);}
.ct-hdr-in .lede{margin-top:clamp(18px,2vw,26px);}

/* Cards: symbol, title, line, button(s) pinned to the bottom so the buttons line up */
.ct-cell{display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(340px,30vw,420px);}
.ct-disc{width:clamp(76px,6.6vw,92px);height:clamp(76px,6.6vw,92px);color:#8a8e96;margin-bottom:clamp(32px,4vw,56px);}
.ct-disc svg{width:84%;height:84%;margin:8%;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.ct-t{margin-bottom:10px;}
.ct-d{max-width:34ch;}
.ct-btns{margin-top:auto;padding-top:clamp(28px,3vw,40px);}

/* hover: the circle turns blue, lifts a little and its symbol animates */
.ct-cell:hover .ct-disc,.ct-cell:focus-within .ct-disc{
  color:var(--blue);border-color:var(--blue);--sc:1.08;
  box-shadow:inset 0 0 0 .6px var(--blue),0 1px 0 rgba(11,12,15,.04),0 14px 34px -20px rgba(11,12,15,.3);
}

/* sales: the date square hops along the calendar */
.ct-days{fill:currentColor;stroke:none;}
.ct-pick{fill:currentColor;stroke:none;}
.ct-cell:hover .ct-pick,.ct-cell:focus-within .ct-pick{animation:ct-hop 2.4s steps(1,end) infinite;}
@keyframes ct-hop{
  0%{transform:translate(0,0);}
  25%{transform:translate(-28px,-13px);}
  50%{transform:translate(-14px,-13px);}
  75%{transform:translate(0,-13px);}
}

/* support: sound waves pulse out */
.ct-mic{fill:currentColor;stroke:none;}
.ct-wave{opacity:0;}
.ct-cell:hover .ct-wave,.ct-cell:focus-within .ct-wave{animation:ct-wave 1.6s ease-in-out infinite;}
.ct-cell:hover .ct-wave--2,.ct-cell:focus-within .ct-wave--2{animation-delay:.25s;}
@keyframes ct-wave{0%,100%{opacity:0;}30%,60%{opacity:1;}}

/* documentation: the lines write in */
.ct-line{stroke-dasharray:1;stroke-dashoffset:0;}
.ct-cell:hover .ct-line,.ct-cell:focus-within .ct-line{animation:ct-write .5s ease both;}
.ct-cell:hover .ct-line:nth-of-type(2),.ct-cell:focus-within .ct-line:nth-of-type(2){animation-delay:.15s;}
.ct-cell:hover .ct-line:nth-of-type(3),.ct-cell:focus-within .ct-line:nth-of-type(3){animation-delay:.3s;}
@keyframes ct-write{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}

@media (max-width:860px){
  .ct-cell{min-height:0;}
}
@media (prefers-reduced-motion:reduce){
  .ct-pick,.ct-wave,.ct-line{animation:none !important;}
  .ct-wave{opacity:1;}
}