/* ==========================================================================
   Contact — page-specific composition only.
   ========================================================================== */

/* Share your vision + form */
.contact-hero__grid {
  display: grid;
  gap: var(--section-gap);
  align-items: center;
}
@media (min-width: 48em) {
  .contact-hero__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 6vw, 6rem);
  }
}

.contact-hero__intro { text-align: center; }

.contact-hero__plane {
  width: clamp(5.5rem, 10vw, 8.5rem);
  height: auto;
  margin-inline: auto;
  margin-block-end: clamp(2rem, 6vw, 5rem);
  /* Flies in from the page edge once, on load, after a beat. */
  animation: plane-in 900ms var(--ease-out) 500ms both;
}
@keyframes plane-in {
  from { opacity: 0; transform: translateX(-45vw) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-hero__plane { animation: none; }
}

.contact-hero__intro h1 { color: var(--color-accent-text); }
.contact-hero__intro .lead { margin-block-start: var(--intro-gap); }

/* Clients */
.people__grid {
  display: grid;
  gap: var(--section-gap);
  align-items: center;
  justify-items: center;
  text-align: center;
}
@media (min-width: 48em) {
  .people__grid {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    justify-items: start;
    text-align: start;
  }
}

.people__portraits {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1.75rem);
}
.people__portrait {
  width: clamp(5.5rem, 12vw, 10rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-round);
  background: var(--color-bg);
  border: var(--border-hairline) solid var(--color-hairline);
}

.people__body {
  max-width: 34rem; /* keeps the quote a tight column beside the faces */
}
.people__body > * + * { margin-block-start: var(--intro-gap); }

/* ---------- One screenful on desktop ------------------------------------
   Spacing here is tied to viewport height, so the page keeps fitting as the
   window gets shorter. Phones sit outside this query and keep the roomier
   defaults, including full-size tap targets. */
@media (min-width: 48em) {
  .contact-page {
    --section-pad-y: clamp(0.5rem, 2.2vh, 2rem);
    --section-gap: clamp(1rem, 3vh, 2rem);
    --intro-gap: clamp(0.5rem, 1.6vh, 1rem);
  }
  .contact-page main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .contact-page .panel { padding: clamp(0.6rem, 2vh, 1.5rem); }
  .contact-page .form { gap: clamp(0.5rem, 1.4vh, 0.75rem); }
  .contact-page .field label { margin-block-end: var(--space-1); }
  .contact-page .field :is(input, textarea) { padding: var(--space-1) var(--space-3); }
  /* rows="5" would otherwise set the height, so cap it outright. */
  .contact-page .field textarea { height: clamp(3.5rem, 8vh, 5rem); min-height: 0; }
  .contact-page .contact-hero__plane {
    width: clamp(3.5rem, 9vh, 8.5rem);
    margin-block-end: clamp(0.75rem, 2.5vh, 2rem);
  }
  .contact-page .people__portrait { width: clamp(4.75rem, 11vh, 9.5rem); }
  .contact-page .site-footer { padding-block: clamp(0.4rem, 1.6vh, 1.25rem); }
}

/* Short desktop windows: step the type down a notch so the page still clears
   the fold. Scoped to this page only. */
@media (min-width: 48em) and (max-height: 53em) {
  .contact-page {
    --text-3xl: var(--text-2xl);
    --text-lg: var(--text-md);
  }
  .contact-page .field :is(input, textarea) { padding-block: 2px; }
  .contact-page .form { gap: 0.4rem; }
}

/* Success — the page the form redirects to after a submission.
   ------------------------------------------------------------------------- */

.success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
  text-align: center;
}
.success .prose { max-width: var(--measure); }

.success__mark {
  width: clamp(4.5rem, 3.5rem + 4vw, 7rem);
  height: auto;
  overflow: visible;
}
.success__mark path {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 8;
  /* Square ends, mitred corner — the brand is square-cornered throughout. */
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
  /* pathLength="100" on the path normalises its geometry, so the dash maths is
     the same whatever the tick's coordinates are. */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: success-draw var(--dur-slower) var(--ease-out) 150ms forwards;
}
@keyframes success-draw {
  to { stroke-dashoffset: 0; }
}

/* Per the site's motion contract: no drawing, just the finished mark. */
@media (prefers-reduced-motion: reduce) {
  .success__mark path {
    animation: none;
    stroke-dashoffset: 0;
  }
}