/* Contact page.
   Rules copied from the <style> block of "Contact Us.dc.html"; everything
   else on the page is inline, as in the design. Scoped under .ij-contact so
   the other Beaver Builder pages are untouched.

   The bulk of this file exists because the design draws the form as plain
   markup while the real one is Gravity Forms #19 (its submissions feed
   Pipedrive through ijara-forms, so it cannot be replaced with hand-written
   markup). Everything under "Gravity Forms" below maps GF's own DOM onto the
   design's measurements. */

/* The Gravity Forms rules that used to live here now sit in
   assets/css/gform.css, shared with the homepage's #contact section. Only
   this page's own chrome remains below. */

.ij-contact { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
.ij-contact a { color: var(--color-link); text-decoration: none; }
.ij-contact a.cmeth:hover { color: var(--brand-green-dark); text-decoration: none; }
.ij-contact a.cophone:hover { color: var(--brand-green-dark); text-decoration: underline; }
/* The office photo collage keeps its overlap at every width, as in the design (2026-10-06). */
.ij-contact details > summary { cursor: pointer; }
.ij-contact details > summary::-webkit-details-marker { display: none; }
.ij-contact details > summary::marker { content: ''; }
.ij-contact details[open] > summary .faq-chev { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .ij-contact .faq-chev { transition: none; }
}
@media (max-width: 720px) {
  .ij-contact h1 { font-size: 36px !important; letter-spacing: -1.6px !important; }
  .ij-contact h2 { font-size: 30px !important; letter-spacing: -1.1px !important; }
}

/* The design's 23 Sep mobile rework (Contact Us.dc.html): each contact row
   keeps its icon beside the text instead of wrapping under it. */
@media (max-width: 820px) {
	.ij-contact .crow { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 14px !important; }
	.ij-contact .crow > span { flex: none !important; width: 48px !important; height: 48px !important; }
	.ij-contact .crow > div { flex: 1 1 auto !important; min-width: 0 !important; }
}

/* ---- Matched to Contact Us.dc.html (2026-10-07) -------------------------- */
/* The design's message box is 90px tall; Gravity Forms' rows="10" made it 192px. */
.ij-contact .cform textarea { height: 90px !important; min-height: 90px !important; min-block-size: 90px !important; block-size: 90px !important; }
.ij-contact .cform button.gform-button { display: inline-flex; align-items: center; gap: 10px; }
/* Phones: the agreement text wraps under its checkbox and the button sits on
   its own line, left-aligned, as the design's flex row wraps at this width. */
@media (max-width: 560px) {
	.ij-contact .cform .gfield--type-consent,
	.ij-contact .cform .gfield--type-submit { grid-column: 1 / -1 !important; }
	.ij-contact .cform .ginput_container_consent { flex-wrap: wrap; row-gap: 12px; }
	.ij-contact .cform .ginput_container_consent label { flex: 1 1 100%; }
	.ij-contact .cform .gfield--type-submit { justify-self: start !important; margin-top: 8px; }
	.ij-contact .cform button.gform-button { width: auto !important; }
}
/* Spacing measured against the design: 24px above the chips' label and above
   the agreement row, the design's 21.6px label/button line, the FAQ's 1.2
   question line on desktop and its 96px gap kept when the columns stack. */
.ij-contact .cform .gform_wrapper .gfield--type-radio { margin-top: 9px; }
.ij-contact .cform .gform_wrapper .gfield--type-consent,
.ij-contact .cform .gform_wrapper .gfield--type-submit { margin-top: 9px; }
.ij-contact .cform .gform_wrapper .gfield_label { line-height: 21.6px; }
.ij-contact .cform button.gform-button { line-height: 21.6px; }
.ij-contact details > summary { line-height: 1.2; }
@media (max-width: 820px) {
	.ij-contact #faq [style*="grid-template-columns"] { gap: 96px !important; }
}

/* ---- #locations office columns, matched to the design (2026-10-07) ------ */
/* The design's 32px column gap and 21.6px heading/phone/button lines, so the
   copy wraps as it does there. Each column is a flex column with its button
   pinned to the bottom, so both "View on maps" buttons share a line even when
   one address wraps longer than the other. */
.ij-contact #locations [style*="minmax(200px,1fr)"] { gap: 32px !important; }
.ij-contact #locations [style*="minmax(200px,1fr)"] > div { display: flex; flex-direction: column; align-items: flex-start; }
.ij-contact #locations [style*="minmax(200px,1fr)"] > div > div { line-height: 21.6px; }
.ij-contact #locations [style*="minmax(200px,1fr)"] > div > p:last-of-type,
.ij-contact #locations [style*="minmax(200px,1fr)"] > div > div:last-of-type { margin-bottom: 32px; }
.ij-contact #locations [style*="minmax(200px,1fr)"] > div > a { margin-top: auto !important; line-height: 21.6px; }