/* Contact page -- layout only. Field/input/label/button styling shared
   with every other form page lives in css/forms.css (loaded before this
   file). Header, footer, .page-wrap and the default header overlay
   already live in site.css -- not repeated here.

   Values read from reference/contact/measurements.json (phone_375 /
   desktop_1440) -- this page's header/hero relationship (checkpoint 04's
   survey, confirmed against reference/header-hero-relationship.json):
   no divider, no scrim. Section padding-top equals the header's own
   height almost exactly (82px phone / 80.6562px desktop) -- unlike
   aboutme/my-school-of-work, there is no extra gap baked in above the
   heading on this page. */

/* Section padding (Phase 7 fix 2, 17.09.26): live's own formula --
   top = header height + 6.6vmax (content-wrapper padding), bottom =
   6.6vmax + 6vw (divider space) -- plus a constant for the shared
   forms.css form rendering shorter than live's form block (29.06px
   desktop / 115.68px phone, the exact remainder of the old tuned
   totals: 305.54px / 245.36px bottom with header-only top). The old
   header-only top put the heading and form 6.6vmax (95px at 1440)
   higher than live; totals at 375x812 and 1440x900 are unchanged, and
   heights now track live at tablet widths. See the long comment below
   for the history of the tuned value. */
.contact-section {
  /* Bottom: 6.6vmax (content-wrapper padding) + 12vw (NOT 6vw -- the
     section's own 6vw divider-space reservation, doubled to also cover
     the defect-fix below: this page's .wave divider was rendering IN
     FLOW at this section's own bottom edge, adding a second un-reserved
     6vw of real height that the divider's own position:absolute fix
     removes -- see that fix, further down this file, for the full
     explanation) + 115.68px (the pre-existing tuned constant for the
     shared forms.css form rendering shorter than live's, unchanged). */
  padding: calc(37px + 12vw + 6.6vmax) 0 calc(6.6vmax + 12vw + 115.68px); /* header: live's fluid header-height formula, see site.css's header-formula comment */
  /* Phase 5 audit + fix, 17.09.26: needed so the new .wave divider
     (straddling this section's own bottom edge, fixing the verifier
     fail for the missing footer-adjacent wave) positions against this
     section, not a further-up ancestor. */
  position: relative;
  overflow: visible;
  /* Live's Squarespace preset: section-height--medium (min-height:66vh,
     never binds here -- content is always much taller -- but present for
     the same reason home.css's hero-video-section carries 33vh: it is
     the real live mechanism, not an approximation). */
  min-height: 66vh;
}
@media (min-width: 800px) {
  .contact-section { padding: calc(48.96875px + 2.20052vw + 6.6vmax) 0 calc(6.6vmax + 6vw + 69px); }
}
/* Tablet fix (Phase 8, defect 2, 18.09.26): live's fluid-engine grid
   breakpoint is 768px everywhere on this site (see home.css's top
   comment) -- NOT 800px, which is only where the *header's own* height
   formula happens to change (a separate, coincidental breakpoint; see
   site.css). Below 800px the header hasn't switched yet, so 768-799.98px
   needs the mobile header padding-top (unchanged, above) paired with the
   768px 2-column grid (moved below) -- the two breakpoints are
   independent and were wrongly conflated into one 800px cutover before,
   which left this section still single-column (and ~440-620px too tall)
   for the 32px band 768-799.98px. The two "extra" constants (84.77px
   here, 69px above -- both replacing the single old 29.06px, live-
   measured against a Playwright sweep of live and this build together at
   height 1400 to isolate the geometry, not the old build_compare
   snapshot's implied value) are two DIFFERENT live-vs-build content-
   height gaps either side of the header's own 800px switch, not the
   same constant re-labelled -- forms.css's shared field heights render
   this page's own form column a little shorter than live's at every
   width, and how much shorter changes with the header formula, not
   smoothly with viewport width alone. */
@media (min-width: 768px) and (max-width: 799.98px) {
  .contact-section { padding-bottom: calc(6.6vmax + 6vw + 84.77px); }
}
/* Live's header is 5.375px taller from 800 to 875px (its nav wraps to
   two lines there; Playwright sweep, see home.css). */
@media (min-width: 800px) and (max-width: 875.98px) {
  .contact-section { padding-top: calc(54.34375px + 2.20052vw + 6.6vmax); }
}
/* Padding-bottom (Phase 5 consolidation fix, 17.09.26): live's raw
   getComputedStyle padding-bottom for this section IS 22.5px/86.4px
   (reference/contact/measurements.json), but live vertically CENTRES
   its grid within the section's own content box (confirmed via direct
   Playwright probe, read-only: the grid's own top sits ~95px BELOW
   where padding-top alone would place it, and the same slack exists
   below the grid too -- a flex/align-items:center behaviour, not a
   simple top-aligned padding box) -- a layout trick this build doesn't
   reproduce. Now that the field-spacing fix above (forms.css) makes
   this page's own form column the CORRECT height instead of
   accidentally-near-target-height, simple top-aligned padding-bottom
   has to absorb that centring slack itself to still land the section's
   OWN total measured height on build_compare's target (same "padding
   picked to match the section's own MEASURED total height, not the
   raw Squarespace box model" convention already used on bray-
   movement-school.css) -- padding-top is left at the literal live
   value (still matches the header-height convention every other
   divider-less hero on this site uses). */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 0;
}
@media (min-width: 768px) {
  /* Tablet fix (Phase 7 fix 2, 17.09.26; breakpoint corrected to 768px
     in Phase 8, defect 2, 18.09.26 -- see the .contact-section comment
     above): the columns were fixed px (569.58px intro + 127.11px gap,
     measured at 1440), which left the form ~66px wide at 820px and
     pushed the page 44px sideways. Live places them on its 24-column
     fluid-engine grid: intro = columns 2-11 (10 cells), form = columns
     14-25 (12 cells), cell = (content width - 23 x 11px gaps) / 24,
     content width = viewport - 2 x 2vw. Written with % (resolves
     against the grid's own width), so it is the same 569.58 / 127.11 /
     685.72px at 1440 and 321.6 / 77.5 / 388.1px at 820 (live,
     Playwright). The 2vw side padding equals .page-wrap's 28.8px at
     1440 and stays 28.8px above it. */
  .contact-section .page-wrap { padding-left: min(2vw, 28.8px); padding-right: min(2vw, 28.8px); }
  .contact-grid {
    grid-template-columns: calc((100% - 253px) * 10 / 24 + 99px) minmax(0, 1fr);
    column-gap: calc((100% - 253px) * 2 / 24 + 33px);
    align-items: start;
  }
}

.contact-intro h2 {
  font-size: 33.5392px;
  line-height: 1.1136; /* 37.3493 / 33.5392, matches the site-wide heading scale (aboutme.css) */
  margin: 0 0 32px;
}
.contact-intro p {
  font-size: 19.8976px;
  line-height: 1.5; /* 29.8464 / 19.8976 */
  margin: 16px 0 0;
}
/* Font sizes: live's Squarespace 7.1 formulas (see home.css's top
   comment) instead of the 375x812 / 1440x900 values they equal -- so the
   intro scales at tablet widths as live does (33.71px / 19.94px at 820). */
.contact-intro h2 { font-size: calc(1.8 * 0.012 * min(100vh, 900px) + 1rem); }
.contact-intro p { font-size: calc(0.4 * 0.012 * min(100vh, 900px) + 1rem); }
@media (min-width: 768px), (orientation: landscape) {
  .contact-intro h2 { font-size: min(calc(1.8 * 1.2vw + 1rem), max(calc(1.8 * 0.012 * 1400px + 1rem), 2.8rem)); }
  .contact-intro p { font-size: min(calc(0.4 * 1.2vw + 1rem), max(calc(0.4 * 0.012 * 1400px + 1rem), 1.4rem)); }
}

.contact-form { margin: 0; }

/* Defect fix (Phase 8, 18.09.26): the wave divider at this section's own
   bottom edge (contact.html) was rendering IN NORMAL FLOW -- site.css's
   shared `.wave` primitive is in-flow by default; home.css opts its own
   four sections out of that (position:absolute, straddling the section's
   bottom edge) but this page never got the same override, so the 6vw
   divider silently added a SECOND 6vw on top of the 6vw this section's
   own padding-bottom already reserves for it (visually invisible --
   .wave-down's fill matches the page background either side -- but it
   was adding a real 6vw of extra section height at every width, found
   while chasing this defect's height mismatch, not by inspecting the
   divider itself). Same fix as home.css's own four sections. */
.contact-section .wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  z-index: 2;
}