/* Contact page — grid, not flex, specifically so the photo/blurb/form
   pieces can rearrange per breakpoint (photo+blurb stacked as a left
   column on desktop; photo, then form, then blurb on mobile) without
   reordering the DOM -- named grid-template-areas per breakpoint below
   instead of a fragile flex `order` + mismatched-nesting combination. */

body {
  overflow-x: hidden;
}

.split {
  display: grid;
  grid-template-columns: 46% 54%;
  /* blurb's row is 1fr specifically so it (not photo's row) absorbs any
     extra height the taller, row-spanning form column needs -- without
     this, an auto/auto row pair both grow to share that extra space,
     which pushes the blurb well below the photo instead of keeping it
     close. Grid items stretch into their row by default, but plain
     block content inside .direct-contact still sits at the top of that
     taller box, so the visible text stays right under the photo either
     way -- only the invisible leftover space moves. */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "photo form"
    "blurb form";
  min-height: 100vh;
}

.split-photo {
  grid-area: photo;
  position: relative;
  height: 46vh;
  min-height: 320px;
  /* Matches .split-form's own padding-top (8rem) plus the height of its
     eyebrow line above the h1 -- lines the photo's top edge up with
     "Let's talk about your project" exactly, at any viewport height.
     (An earlier centering approach only happened to line up with the
     h1 at one particular window size -- this is a fixed offset instead,
     deliberately, verified to hold at multiple viewport heights.) */
  margin-top: 10.1rem;
}

.split-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.split-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 14, 18, 0.4) 0%, rgba(10, 14, 18, 0) 45%);
}

.direct-contact {
  /* Temporarily hidden -- holding off on publishing Jason's phone number
     until he decides whether to use it directly or route through a
     separate forwarding number (spam-exposure question, 2026-08-26).
     Markup is untouched; flip this back to visible to restore it. */
  display: none;
  grid-area: blurb;
  text-align: center;
  padding: 1.5rem 2rem 2.8rem;
}

.direct-contact-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 0.7rem;
}

.direct-contact-info {
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  color: var(--ink-dim);
  margin: 0;
}

.direct-contact-info a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 243, 238, 0.35);
}

.direct-contact-info a:hover {
  border-bottom-color: rgba(245, 243, 238, 0.85);
}

.split-form {
  grid-area: form;
  display: flex;
  align-items: center;
  padding: 8rem 5vw 6rem;
}

.form-inner {
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
}

.eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 1rem;
}

.form-inner h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin: 0 0 0.8rem;
  line-height: 1.15;
}

.form-inner .intro {
  font-size: 0.95rem;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0 0 2.2rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.3rem;
}

.field label {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.field input,
.field select,
.field textarea {
  background: rgba(245, 243, 238, 0.05);
  border: 1px solid rgba(245, 243, 238, 0.22);
  border-radius: 2px;
  padding: 0.75rem 0.9rem;
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  width: 100%;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(245, 243, 238, 0.35);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(245, 243, 238, 0.55);
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

.submit-btn {
  width: 100%;
  margin-top: 0.5rem;
  text-align: center;
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.2em;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.cf-turnstile {
  margin-top: 1rem;
}

.form-status {
  min-height: 1.2rem;
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

.form-status.error {
  color: #e0a37a;
}

/* Honeypot — visually and structurally hidden from real visitors and
   screen readers, but still present in the DOM for bots that fill in
   every field they can find. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.thanks {
  max-width: 460px;
}

.thanks-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 0.6rem;
}

.thanks p:last-child {
  font-size: 0.95rem;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0;
}

/* Footer uses the same shared .inner-page .footer pattern as about/
   gallery/blog (static, centered, full width, below all content) --
   see base.css. No page-specific override needed. */

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    /* Photo first, then straight into the form, blurb last -- having
       "prefer to reach out directly" sit between the photo and the form
       read oddly on a single narrow column, like a detour before the
       actual point of the page. */
    grid-template-areas:
      "photo"
      "form"
      "blurb";
  }

  .split-photo {
    height: 34vh;
    margin-top: 0;
  }

  .split-form {
    padding: 3rem 6vw 2rem;
  }

  .direct-contact {
    padding-top: 0.5rem;
  }
}