/* Contact: a short conversation, one question at a time.
   Motion: each question slides and fades out as the next one rises in from the
   direction of travel; the card's height glides to fit the new question. */

.contact {
  position: relative;
  z-index: 2;
  padding: clamp(88px, 14vh, 150px) var(--gutter) clamp(120px, 18vh, 200px);
  background: var(--bg);
}

.contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.contact-head { position: sticky; top: 120px; }
.contact h2 {
  margin: 0.45em 0 0.35em;
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.contact-sub { margin: 0; max-width: 28em; font-size: 1.0625rem; line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-2); }

/* the three stages, lit up as the visitor moves through the form */
.contact-steps { display: grid; gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; }
.contact-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(29, 29, 31, 0.4);
  transition: color 300ms var(--ease-out);
}
.contact-steps span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(29, 29, 31, 0.15);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.contact-steps .is-current, .contact-steps .is-done { color: var(--ink); }
.contact-steps .is-current span { background: var(--ink); color: #fff; box-shadow: none; transform: scale(1.06); }
.contact-steps .is-done span { background: #ff5a0a; color: #fff; box-shadow: none; }

/* ───────── The card ───────── */

.chat {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 30px 80px -20px rgba(0, 0, 0, 0.14);
}

.chat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin-bottom: 22px;
  transition: min-height 420ms var(--ease-out), margin-bottom 420ms var(--ease-out);
}
/* on the first question there is nothing to go back to and no answers yet */
.chat-top:has(.chat-back[hidden]) { min-height: 0; margin-bottom: 6px; }
.chat-progress {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 0 0 3px 3px;
  background: rgba(29, 29, 31, 0.06);
}
.chat-progress i {
  display: block;
  height: 100%;
  background: #ff5a0a;
  transform-origin: left;
  transform: scaleX(var(--p, 0.12));
  transition: transform 600ms var(--ease-out);
}

.chat-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 7px 12px 7px 6px;
  border: 0;
  border-radius: 980px;
  background: rgba(29, 29, 31, 0.06);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.chat-back svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-back:active { transform: scale(0.96); }
.chat-back[hidden] { display: none; }


/* The stage holds every question in the same place. Its height is set by
   contact.js to the active question's and transitions between them. */
.chat-stage { position: relative; transition: height 460ms var(--ease-out); }
.step {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--from, 18px));
  filter: blur(2px);
  transition:
    opacity 300ms var(--ease-out),
    transform 520ms var(--ease-out),
    filter 300ms var(--ease-out),
    visibility 0s 520ms;
}
.step.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition-delay: 90ms, 90ms, 90ms, 0s; /* the old question clears first */
}
.step.is-leaving { transform: translateY(var(--to, -18px)); }

.q {
  margin: 0 0 20px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  outline: none;
}

/* ───────── Choices ───────── */

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choices--four .choice small { font-size: 0.8125rem; }
.choice {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 16px 18px;
  border: 0;
  border-radius: 20px;
  background: #f5f4f0;
  box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.06);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out), color 200ms ease;
}
.choice:active { transform: scale(0.975); }
.choice-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background-color 200ms ease, transform 300ms var(--ease-out);
}
.choice-icon svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.choice-text { display: grid; gap: 2px; }
.choice strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }
.choice small { font-size: 0.875rem; color: var(--ink-2); transition: color 200ms ease; }
.choice.is-chosen { background: var(--ink); color: #fff; box-shadow: none; }
.choice.is-chosen small { color: rgba(255, 255, 255, 0.7); }
.choice.is-chosen .choice-icon { background: #ff5a0a; color: #fff; transform: scale(1.08); }
@media (hover: hover) and (pointer: fine) {
  .choice:not(.is-chosen):hover { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(29, 29, 31, 0.18), 0 8px 24px -10px rgba(0, 0, 0, 0.18); }
  .choice:not(.is-chosen):hover .choice-icon { transform: scale(1.06); }
  .chat-back:hover { background: rgba(29, 29, 31, 0.1); }
}

/* ───────── Details ───────── */

.field { display: grid; gap: 8px; margin-bottom: 14px; }
.field-label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.field-label em { margin-left: 4px; font-style: normal; font-weight: 500; color: var(--ink-2); }
.field input, .field textarea {
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-radius: 14px;
  background: #f5f4f0;
  box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.06);
  font: inherit;
  font-size: 1rem; /* 16px: iOS does not zoom the page on focus */
  line-height: 1.45;
  color: var(--ink);
  transition: background-color 200ms ease, box-shadow 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(29, 29, 31, 0.38); }
.field input:focus, .field textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(255, 90, 10, 0.14); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #d70015, 0 0 0 4px rgba(215, 0, 21, 0.1); }
.field-error { margin: -6px 0 12px; font-size: 0.875rem; color: #d70015; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 4px;
  border: 0;
  border-radius: 980px;
  background: rgba(29, 29, 31, 0.32);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 300ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.send svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease-out); }
.send:active { transform: scale(0.98); }
/* lights up the moment the email is valid: the next step is ready */
.chat.is-ready .send { background: var(--ink); box-shadow: 0 12px 30px -12px rgba(29, 29, 31, 0.6); }
.chat.is-ready .send svg { transform: translateX(3px); }
.chat.is-sending .send { pointer-events: none; opacity: 0.7; }
.send-note { margin: 12px 0 0; font-size: 0.875rem; text-align: center; color: var(--ink-2); }
.send-note:empty { display: none; }
.send-note a { color: inherit; }

/* ───────── Done ───────── */

.step-done { text-align: center; padding: 10px 0 6px; }
.done-check {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #ff5a0a;
  color: #fff;
  transform: scale(0.6);
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms; /* a small overshoot: a moment worth celebrating */
}
.done-check svg { width: 34px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.step-done.is-active .done-check { transform: none; }
.done-text { margin: -6px 0 6px; font-size: 1.0625rem; color: var(--ink-2); }
.done-email { color: var(--ink); font-weight: 600; word-break: break-all; }

/* ───────── Narrow screens ───────── */

@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; max-width: 600px; }
  .contact-head { position: static; }
  .contact-steps { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; }
}
@media (max-width: 480px) {
  .choices { grid-template-columns: 1fr; }
  .choice { min-height: 72px; }
  .choices--four { grid-template-columns: 1fr 1fr; gap: 10px; }
  .choices--four .choice { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .step, .step.is-active, .chat-stage, .chat-progress i, .done-check { transition-duration: 150ms; transition-delay: 0s; }
  .step { transform: none !important; filter: none; }
}

/* ───────── The framed mascot on the first question ───────── */

.hello-frame {
  --px: 0px;  /* pupil offset, set by contact.js from the pointer */
  --py: 0px;
  --tx: 0px;  /* small lean toward the pointer */
  position: relative;
  height: 196px;
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 90, 10, 0.16) 1px, transparent 0) 0 0 / 16px 16px,
    linear-gradient(160deg, #fff6ef 0%, #ffe6d5 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 10, 0.12);
  cursor: default;
}

.hello-mascot {
  position: absolute;
  right: 7%;
  bottom: -64px; /* the frame crops it at the knees, so it reads big and close */
  height: 250px;
  overflow: visible;
  transform: translateX(var(--tx));
  transition: transform 500ms var(--ease-out);
}
.hm-fill { fill: #ff5a0a; }
.hm-hole { fill: #fff; transform-origin: 60px 67px; transition: transform 260ms var(--ease-out); }
.hm-shadow { fill: rgba(120, 50, 10, 0.12); }
.hm-pupil { transform: translate(var(--px), var(--py)); transition: transform 180ms ease-out; }
.hm-eye { transform-box: fill-box; transform-origin: center; animation: hm-blink 4.8s infinite; transition: opacity 160ms ease; }
.hm-eye + .hm-eye { animation-delay: 40ms; }
@keyframes hm-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.12); } }
.hm-joy { fill: none; stroke: #111; stroke-width: 3.2; stroke-linecap: round; opacity: 0; transition: opacity 160ms ease; }
.hm-blush { fill: #ff8f6b; opacity: 0; transition: opacity 300ms ease; }

/* the pointing arm: aimed down-left at the question, with a little tap while idle */
.hm-point { transform-origin: 20px 63px; transform: rotate(-38deg); animation: hm-tap 2.4s ease-in-out infinite; }
@keyframes hm-tap { 0%, 60%, 100% { transform: rotate(-38deg); } 70% { transform: rotate(-48deg); } 80% { transform: rotate(-36deg); } 88% { transform: rotate(-46deg); } }
.hm-rest { transform-origin: 100px 63px; transform: rotate(25deg); transition: transform 360ms var(--ease-out); }
.hm-bob { transform-origin: 60px 114px; transition: transform 400ms var(--ease-out); }

.hello-bubble {
  position: absolute;
  right: calc(7% + 272px);
  top: 22px;
  padding: 7px 13px;
  border-radius: 14px 14px 4px 14px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transform-origin: 100% 100%;
  transition: transform 400ms var(--ease-out);
}
.hello-arrow {
  position: absolute;
  left: 7%;
  bottom: 8px;
  width: min(42%, 230px);
  overflow: visible;
  fill: none;
  stroke: rgba(29, 29, 31, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ha-line { stroke-dasharray: 4 6; animation: ha-flow 1.2s linear infinite; }
@keyframes ha-flow { to { stroke-dashoffset: -20; } }

/* hover: it perks up, waves the resting arm, blushes and points harder */
.hello-frame.is-hover .hm-bob { transform: translateY(-6px) rotate(-3deg); }
.hello-frame.is-hover .hm-rest { transform: rotate(-35deg); }
.hello-frame.is-hover .hm-blush { opacity: 0.8; }
.hello-frame.is-hover .hm-hole { transform: scale(1.06, 1.15); }
.hello-frame.is-hover .hm-point { animation-duration: 1s; }
.hello-frame.is-hover .hello-bubble { transform: scale(1.06) rotate(-2deg); }

/* tap: a happy jump with smiling eyes */
.hello-frame.is-happy .hm-eye { opacity: 0; }
.hello-frame.is-happy .hm-joy { opacity: 1; }
.hello-frame.is-happy .hm-blush { opacity: 1; }
.hello-frame.is-happy .hm-hole { transform: scale(1.15, 1.35); }

@media (max-width: 560px) {
  .hello-frame { height: 160px; }
  .hello-mascot { height: 200px; right: 2%; bottom: -52px; }
  .hello-bubble { left: 12px; right: auto; top: 14px; font-size: 0.8125rem; }
  .hello-arrow { width: 34%; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-point, .ha-line, .hm-eye { animation: none; }
  .hello-mascot, .hm-bob, .hello-bubble { transition: none; }
  .hello-frame.is-hover .hm-bob, .hello-frame.is-hover .hello-bubble { transform: none; }
}