/* Contact starts the enquiry; controls reuse the existing estimate form styles. */
.contact-intro { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.contact-copy { min-width: 0; }
.contact-page .contact-details h1 { max-width: 14ch; margin-bottom: 1.3rem; font-size: clamp(3rem, 4.5vw, 4.6rem); line-height: 1.02; }
.contact-intro-text { max-width: 42ch; margin: 0 0 1.6rem; color: #4c4d49; font-size: 1.08rem; }
.contact-start { max-width: 32rem; }
.contact-start .estimate-fields { margin-bottom: 1rem; }
.contact-start > .button { width: 100%; }
.contact-start .estimate-service-options { max-height: 19rem; overflow-y: auto; }
.contact-page .contact-direct { margin-top: 1.5rem; gap: .2rem; }
.contact-direct p { margin: 0 0 .3rem; color: var(--muted); }
.contact-page .contact-phone, .contact-page .contact-email { margin: 0; font-size: 1rem; line-height: 1.55; letter-spacing: normal; text-underline-offset: .2em; }
.contact-illustration { display: block; width: 100%; max-width: 33rem; justify-self: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.contact-clipboard { display: block; width: 100%; height: auto; overflow: visible; }
.clipboard-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clipboard-soft { fill: #eeebe4; }
.clipboard-paper { fill: var(--paper); }
.clipboard-detail { opacity: .5; }
.clipboard-red, .clipboard-check { stroke: var(--accent); }
.clipboard-red-fill { fill: var(--accent); }
.clipboard-invitation-mobile { display: none; }
.clipboard-invitation { --point-x: -10px; --point-y: 5px; }
.contact-page .contact-information { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.contact-page .contact-hours { margin: 0; }
@media (max-width: 760px) {
  .contact-intro { grid-template-columns: 1fr; gap: 1rem; }
  .contact-page .contact-details { padding-top: 2rem; }
  .contact-page .contact-details h1 { max-width: 15ch; font-size: clamp(2.6rem, 10.5vw, 3.8rem); }
  .contact-intro-text { font-size: 1rem; margin-bottom: 1.35rem; }
  .contact-start { max-width: none; }
  .contact-illustration { max-width: 23rem; margin-block: .5rem; }
  .contact-clipboard .clipboard-line { vector-effect: non-scaling-stroke; stroke-width: 1.2; }
  .clipboard-invitation-desktop { display: none; }
  .clipboard-invitation-mobile { display: block; --point-x: 2px; --point-y: -10px; }
  .contact-page .contact-information { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1rem; padding-top: 1.5rem; }
}
/* The pencil tip follows each tick, then the arrow draws and points twice. */
@media (prefers-reduced-motion: no-preference) {
  .contact-illustration.is-writing .clipboard-check { animation: clipboard-tick .4s .3s linear both; }
  .contact-illustration.is-writing .clipboard-check-second { animation-delay: 1s; }
  .contact-illustration.is-writing .clipboard-check-third { animation-delay: 1.7s; }
  .contact-illustration.is-writing .clipboard-pencil { animation: clipboard-pencil 2.6s linear both; }
  .contact-illustration.is-writing .clipboard-arrow-line { animation: clipboard-tick .7s 2.7s ease-out both; }
  .contact-illustration.is-writing .clipboard-arrow-head { animation: clipboard-arrow-head .15s 3.4s ease-out both; }
  .contact-illustration.is-writing .clipboard-invitation { animation: clipboard-point .55s 3.6s ease-in-out 2 both; }
  @keyframes clipboard-tick { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
  @keyframes clipboard-arrow-head { from { opacity: 0; } to { opacity: 1; } }
  @keyframes clipboard-point {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(var(--point-x), var(--point-y)); }
  }
  /* Coordinates account for the clipboard's -8 degree rotation and pencil tip at 317,313. */
  @keyframes clipboard-pencil {
    0%, 100% { transform: translate(0, 0); }
    11.53846% { transform: translate(-73.1962px, -118.3085px); }
    16.41189% { transform: translate(-64.1606px, -111.4997px); }
    26.92308% { transform: translate(-53.0803px, -133.2535px); }
    38.46154% { transform: translate(-66.9334px, -73.7464px); }
    43.33497% { transform: translate(-57.8978px, -66.9377px); }
    53.84615% { transform: translate(-46.8175px, -88.6915px); }
    65.38462% { transform: translate(-60.6706px, -29.1844px); }
    70.25805% { transform: translate(-51.6350px, -22.3756px); }
    80.76923% { transform: translate(-40.5548px, -44.1294px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-illustration *, .contact-illustration.is-writing * { animation: none !important; }
}