/* ============================================================
   OUTRO JOURNEY (fly-out) + CONTACT
   ============================================================ */

.outro-journey {
  position: relative;
}
.outro-journey .journey-pin { height: 100svh; height: 100dvh; }

/* .section-bg-video now lives here (not inside .contact) so the ambient
   glow spans the Contact section AND the footer below it as one
   continuous layer instead of stopping at Contact's own bottom edge.
   The background color/gradient is applied here too (not on .contact
   alone) for the same reason — one continuous --work-transition fade
   across Contact + footer, matching "Selected Work" (.screen-world in
   gallery.css), instead of two independently-gradiented sections that
   would reintroduce a seam at the Contact/footer boundary. */
.contact-footer-glow {
  position: relative;
  background: var(--work-transition);
}

/* Dithers the gradient above — see the matching comment on
   .screen-world::before in gallery.css, same fix for the same banding. */
.contact-footer-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.contact {
  position: relative;
  z-index: 1;
  padding-top: var(--sp-16);
}

/* Lifts the actual content above .section-bg-video (z-index:0) — see the
   matching comment on .screen-world > .container in gallery.css. */
.contact > .container { position: relative; z-index: 1; }

.contact-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--sp-16);
}
.contact-head h2 { font-size: var(--fs-hero); }
.contact-head p { margin-top: var(--sp-4); color: var(--ink-dim); font-size: 1.05rem; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-16);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-12); }
}

.contact-info { display: flex; flex-direction: column; gap: var(--sp-6); }

.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.contact-channel:hover { border-color: var(--line-strong); background: var(--bg-elevated); }
.contact-channel[hidden] { display: none; }
.contact-channel .icon {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--bg-elevated-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-2);
}
.contact-channel .icon svg { width: 20px; height: 20px; }
.contact-channel .meta .label { font-size: var(--fs-small); color: var(--ink-faint); }
.contact-channel .meta .value { font-family: var(--font-display); font-size: 1.05rem; margin-top: 2px; }

.contact-note {
  margin-top: var(--sp-4);
  padding: var(--sp-5, 1.25rem);
  border-radius: var(--radius-m);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-dim);
}

/* Form */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5, 1.25rem);
}
.contact-form .field-full { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .contact-form { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field label { font-size: var(--fs-small); color: var(--ink-dim); }
.field label .req { color: var(--accent-2); }

.field input,
.field select,
.field textarea {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 0.85em 1em;
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,108,255,0.18);
}
.field textarea { resize: vertical; min-height: 120px; }

/* The dropdown popup itself is rendered by the OS/browser, not by our
   CSS — it ignores the select's own (transparent, light-text) styling
   and defaults to a light/white popup background, so the inherited
   var(--ink) (near-white) text was unreadable against it. */
.field select option {
  color: #000;
  background: #fff;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a6a6b3' stroke-width='1.6'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.5em;
}

.field-error {
  font-size: 0.8125rem;
  color: #ff8080;
  min-height: 1em;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: var(--fs-small);
  color: var(--ink-dim);
}
.consent input { margin-top: 0.25em; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.form-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Scoped back to the original accent blue — --accent itself was changed
   site-wide, but this button specifically should stay as it was. */
.form-footer button[type="submit"] {
  background: #5b6cff;
}
.form-footer button[type="submit"]:hover {
  background: #6d7cff;
}

.form-status {
  font-size: var(--fs-small);
  padding: 0.9em 1.1em;
  border-radius: var(--radius-s);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: rgba(90, 220, 150, 0.12); color: #7de3ab; border: 1px solid rgba(90,220,150,0.3); }
.form-status.is-error { background: rgba(255, 100, 100, 0.1); color: #ff9d9d; border: 1px solid rgba(255,100,100,0.28); }

/* honeypot */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }