/* ---------- Contact form backdrop ---------- */
.contact-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;

  background: var(--overlay-bg);
  backdrop-filter: blur(56px) saturate(140%);
  -webkit-backdrop-filter: blur(56px) saturate(140%);

  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.contact-form-overlay[hidden] {
  display: none;
}

.contact-form-overlay.is-visible {
  opacity: 1;
}

/* ---------- Contact form modal (multi-step) ---------- */
/* Grows out of the floating nav — see .contact-form-wrap in nav.css context. */
.contact-form-wrap {
  width: 0;
  height: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--nav-radius);
  transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.floating-nav.is-open .contact-form-wrap {
  width: min(480px, calc(100vw - 32px));
  height: min(600px, calc(90dvh - 96px));
}

.contact-form-modal {
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  background: var(--color-bg);
  transition: background-color 0.3s ease;
  padding: var(--space-6);
  overflow: hidden;
}

.contact-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.contact-form-step {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-form-step[hidden] {
  display: none;
}

.contact-form-step-fields {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  top: 50%;
  transform: translateY(-50%);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.floating-nav.is-open .contact-form-step-fields {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.3s;
}

.contact-form-close {
  position: absolute;
  top: calc(var(--space-6) - 9px);
  right: calc(var(--space-6) - 9px);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;

  background: none;
  border: none;
  color: var(--color-text);
  transition: color 0.3s ease;
  cursor: pointer;
}

.contact-form-close svg line {
  stroke-dasharray: 17;
  stroke-dashoffset: 0;
}

.contact-form-close:hover svg line {
  animation: contact-form-close-draw 0.5s ease;
}

.contact-form-close:hover svg line:last-child {
  animation-delay: 0.08s;
}

@keyframes contact-form-close-draw {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 17;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* ---------- Steps ---------- */
.contact-form-step-label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--nav-link-inactive);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  transition: color 0.3s ease;
}

.contact-form-title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: var(--space-6);

  opacity: 0;
  transition: opacity 0.25s ease;
}

.floating-nav.is-open .contact-form-title {
  opacity: 1;
  transition-delay: 0.225s;
}

.contact-form-field {
  border: none;
  margin-bottom: var(--space-6);
}

.contact-form-field:last-of-type {
  margin-bottom: 0;
}

/* Step 2 stacks its fields with the same gap as the budget pills of step 3
   (.contact-form-pills gap), not the 24px between the groups of the other steps. */
.contact-form-step[data-step="2"] .contact-form-field {
  margin-bottom: var(--space-2);
}
.contact-form-step[data-step="2"] .contact-form-field:last-of-type {
  margin-bottom: 0;
}

.contact-form-legend {
  font-size: 13px;
  font-weight: 500;
  color: var(--nav-link-inactive);
  margin-bottom: var(--space-3);
  transition: color 0.3s ease;
}

.contact-form-legend--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ---------- Pills ---------- */
.contact-form-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.contact-form-pills--stacked {
  flex-direction: column;
}

.contact-form-pill {
  padding: 14px var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--nav-radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.contact-form-pills--stacked .contact-form-pill {
  width: 100%;
  text-align: center;
}

.contact-form-pill:hover {
  background: var(--color-surface-hover);
}

.contact-form-pill.is-selected {
  background: var(--color-text);
  color: var(--color-bg);
}

/* ---------- Inputs ---------- */
.contact-form-input,
.contact-form-textarea {
  width: 100%;
  padding: 14px var(--space-4);
  background: var(--color-surface-weak);
  border: 1px solid var(--color-border);
  border-radius: var(--nav-radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
  color: var(--color-placeholder);
}

.contact-form-input:focus,
.contact-form-textarea:focus {
  outline: none;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1.5px var(--color-text);
}

.contact-form-textarea {
  height: 110px;
  resize: none;
}

/* Message field: the textarea on its own line; under it the "Privacy Policy" link on the left
   and the counter on the right (same size and transparency, no colour of its own). */
.contact-form-field--message {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.contact-form-field--message .contact-form-textarea { flex: 0 0 100%; }

.contact-form-counter {
  order: 2;
  margin: 6px 2px 0 auto;
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.contact-form-counter[data-full="true"] { opacity: 1; }

.contact-form-privacy {
  order: 1;
  margin: 6px 2px 0;
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.6;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-form-privacy:hover,
.contact-form-privacy:focus-visible { opacity: 1; }

.contact-form-input.is-invalid,
.contact-form-textarea.is-invalid {
  background: var(--color-invalid-bg);
  box-shadow: inset 0 0 0 1.5px #d33;
}

/* ---------- Thank-you screen (panel 4) ----------
   Only the cross is left (js/contact-form.js hides the whole nav bar on this step). Title and sentence sit at the
   top left, one over the other; under them the Five in a Row board (js/five-in-a-row.js) is a square as wide as the
   form inside its margins, with the same margin under it as at its sides. */
.contact-form-step--thanks {
  justify-content: flex-start;
}

.contact-form-step--thanks .contact-form-title {
  margin-bottom: var(--space-2);
}

.contact-form-step--thanks .contact-form-step-fields {
  position: static;
  transform: none;
}

/* Same type as the "Tell us about the project…" field: 15px, 400, its line-height (see the 1180px rule below),
   the normal text colour (not the placeholder grey). */
.contact-form-thanks {
  max-width: 75%;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
}

/* Positioned against the panel (not the scrolling body) so its bottom margin can equal the side ones whatever the panel's padding. */
.contact-form-game {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-6);
}

/* ---------- Bottom nav (steps) ---------- */
.contact-form-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-5);
}

.contact-form-nav[hidden] {
  display: none;
}

.contact-form-progress-wrap {
  display: flex;
  align-items: center;
}

.contact-form-nav-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--color-surface-strong);
  border: none;
  border-radius: var(--nav-radius);
  font-size: 16px;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.contact-form-nav-btn:hover:not(:disabled):not(.is-disabled) {
  background: var(--color-surface-strong-hover);
}

/* :disabled for the back button (no click needed while on step 1) —
   .is-disabled for the next button instead (see js/contact-form.js):
   it looks and reads as disabled but still needs to receive the click
   that reveals which fields are missing, and a real `disabled` button
   never fires click at all. */
.contact-form-nav-btn:disabled,
.contact-form-nav-btn.is-disabled {
  background: var(--color-surface-disabled);
  color: var(--color-text-disabled);
  cursor: default;
}

.contact-form-nav-btn[hidden] {
  visibility: hidden;
}

.contact-form-back {
  width: 0;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: width 0.3s ease, margin-right 0.3s ease, opacity 0.3s ease, background 0.2s ease;
}

.contact-form-progress-wrap:hover .contact-form-back:not(:disabled) {
  width: 36px;
  margin-right: var(--space-2);
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .contact-form-back:not(:disabled) {
    width: 36px;
    margin-right: var(--space-2);
    opacity: 1;
    pointer-events: auto;
  }
}

.contact-form-progress {
  display: flex;
  align-items: center;
}

.contact-form-dot {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-form-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-dot-inactive);
  transition: background-color 0.3s ease;
}

.contact-form-dot.is-reachable:not(.is-active) {
  cursor: pointer;
}

.contact-form-dot.is-active::before {
  width: 8px;
  height: 8px;
  background: var(--color-text);
}

/* ---------- Responsive ---------- */
/* Mobile: the nav spans the page margins (css/nav.css), so the form fills
   the nav's width instead of the 480px-capped one. */
@media (max-width: 500px) {
  .floating-nav.is-open .contact-form-wrap {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .contact-form-modal {
    padding: var(--space-4);
  }

  .contact-form-title {
    font-size: 19px;
  }

  .contact-form-step-fields {
    left: var(--space-4);
    right: var(--space-4);
  }

  .contact-form-close {
    top: calc(var(--space-4) - 9px);
    right: calc(var(--space-4) - 9px);
  }

  .contact-form-thanks {
    max-width: 90%;
  }

  .contact-form-game {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }
}

/* Arriving with the form left open on the previous page (js/contact-form.js,
   arriveClosing): the nav is invisible and nothing animates until the open
   state is in place; then the class goes and the normal closing plays. */
html.contact-closing .floating-nav {
  visibility: hidden;
}

/* The backdrop is on screen from the very first paint (before JS opens the
   form), so there is no frame showing the bare page behind it. */
html.contact-closing .contact-form-overlay[hidden] {
  display: block;
  opacity: 1;
}

html.contact-closing .floating-nav,
html.contact-closing .floating-nav *,
html.contact-closing .contact-form-overlay {
  transition: none !important;
}

/* Phones (bug 030): Safari on iPhone tints the bar behind its buttons with a
   full-screen FIXED layer that has a background and a backdrop-filter, so on
   phones there is no veil. While the form is open (html.contact-open, set by
   js/contact-form.js) the page content and the footer are blurred with
   `filter` (same blur and saturation as the veil) and the usual tint
   (--overlay-bg, light and dark) is an ABSOLUTE layer over the document,
   never fixed, that fades in. The menu and the form are not inside
   .page-content or .footer, so they stay sharp (a filter on an ancestor would
   also capture fixed descendants). A click on the tinted page (body) closes
   the form: see js/contact-form.js. Tablets and desktop keep the veil. */
@media (max-width: 500px) {
  .contact-form-overlay,
  html.contact-closing .contact-form-overlay[hidden] {
    display: none;
  }

  body {
    position: relative;
  }

  .page-content,
  .footer {
    transition: background-color 0.3s ease, filter 0.3s ease;
  }

  html.contact-open .page-content,
  html.contact-open .footer {
    filter: blur(56px) saturate(140%);
  }

  body::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 500;
    background: var(--overlay-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  html.contact-open body::after {
    opacity: 1;
    pointer-events: auto;
  }

  /* Arriving with the form left open: blurred and tinted from the first
     paint, no transitions (the closing then plays normally). */
  html.contact-closing .page-content,
  html.contact-closing .footer {
    filter: blur(56px) saturate(140%);
  }

  html.contact-closing body::after {
    opacity: 1;
  }

  html.contact-closing .page-content,
  html.contact-closing .footer,
  html.contact-closing body::after {
    transition: none !important;
  }
}

/* Phones and tablets: the step titles stop at two thirds of the width they
   had, so a long one ("What's the budget for this project?") never runs
   into the close cross at the top right — client request. */
@media (max-width: 1180px) {
  .contact-form-title {
    max-width: 66.6667%;
  }
}

/* Phones (up to 425px wide): a shorter form (test, client request). From 426px the Thank-you board is wider and
   needs the full height, or it runs into the text above it. The tallest step is
   "Your details"; at the old 600px cap it had 77px between its title and the
   fields and 66px between the fields and the buttons. Half of each (−71px)
   makes the cap 528px. Short screens were already limited by 90dvh − 96px. */
@media (max-width: 425px) {
  .floating-nav.is-open .contact-form-wrap {
    height: min(528px, calc(90dvh - 96px));
  }
}

/* ---------- Step 3: send status + honeypot ---------- */
.contact-form-status {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.7;
}
.contact-form-status[data-state="error"] { opacity: 1; color: #d33; }
.contact-form-status:empty { display: none; }
/* Subtitle position: pulled up against the step title (which carries its own bottom margin). */
.contact-form-title + .contact-form-status { margin: calc(var(--space-6) * -0.6) 0 var(--space-6); }

/* Honeypot: off-screen for people, still present for bots that fill every field. */
.contact-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Phones and tablets (bug 029): Safari on iPhone zooms into a text field whose font-size is
   under 16px when it gets focus, and never zooms back out. Fields keep the desktop 15px at
   rest and go to 16px only while focused, so nothing looks bigger or moves before you tap.
   line-height is pinned to what 15px of Archivo gives (1.088 x 15 = 16.32px), so the 16px
   focus size does not make the field taller. Do NOT block zoom in the viewport. */
@media (max-width: 1180px) {
  .contact-form-input,
  .contact-form-textarea,
  .contact-form-thanks {
    line-height: 16.32px;
  }
  .contact-form-input:focus,
  .contact-form-textarea:focus {
    font-size: 16px;
  }
}