/* ======================================================
   CONTACT PAGE (UI Vault sections/contact/model-001)
   A rounded photo stage: the pitch bottom left, the inquiry
   form floating on the right. Tokens, type scale, buttons,
   navbar and back-to-top come from styles.css.
====================================================== */

.page-contact {
  background: var(--limestone);
}

.contact-page {
  padding: 96px 24px 24px;
}

.contact-stage {
  position: relative;

  max-width: 1550px;

  min-height: max(860px, calc(100vh - 120px));

  margin: 0 auto;

  overflow: hidden;

  border-radius: 28px;

  background: var(--obsidian);
}

/* PHOTO */

.contact-stage__photo {
  position: absolute;

  inset: 0;
}

.contact-stage__photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(.5);

  animation: contact-settle 1.8s var(--ease-out) backwards;
}

@keyframes contact-settle {
  from { scale: 1.08; }
}

.contact-stage__shade {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(var(--obsidian-rgb), .85) 0%,
    rgba(var(--obsidian-rgb), .6) 47%,
    rgba(var(--obsidian-rgb), .2) 75%
  );
}

.contact-availability {
  position: absolute;

  z-index: 5;

  top: 30px;
  left: 30px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  border-radius: 999px;

  background: rgba(var(--limestone-rgb), .14);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  color: var(--limestone);

  font-size: var(--fs-caption);

  line-height: 1;
}

.contact-availability i {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--limestone);

  animation: status-pulse-light 1.8s ease-in-out infinite;
}

/* PITCH */

.contact-pitch {
  position: absolute;

  z-index: 2;

  left: 5%;
  bottom: 8%;

  width: 46%;

  color: var(--limestone);
}

.contact-pitch .eyebrow {
  color: var(--mist);
}

.contact-pitch h1 {
  margin: 20px 0 24px;

  font-size: var(--fs-display);

  line-height: var(--lh-display);

  letter-spacing: -.045em;
}

.contact-pitch h1 em {
  display: block;

  color: var(--pebble);

  font-style: normal;
}

.contact-pitch > p {
  max-width: 520px;

  margin: 0;

  color: var(--mist);
}

.contact-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 20px 56px;

  margin: 44px 0 0;
}

.contact-meta div {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.contact-meta dt {
  color: var(--pebble);

  font-size: var(--fs-label);

  font-weight: 600;

  line-height: 1;

  letter-spacing: .14em;

  text-transform: uppercase;
}

.contact-meta dd {
  margin: 0;

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

.contact-meta a {
  border-bottom: 1px solid rgba(var(--limestone-rgb), .4);

  transition: border-color .3s ease;
}

.contact-meta a:hover {
  border-color: var(--limestone);
}

/* the pitch and the form arrive from below, one after the other */
.contact-pitch > *,
.inquiry {
  animation: reveal-in 1.1s cubic-bezier(.22, 1, .36, 1) backwards;
}

.contact-pitch > :nth-child(2) { animation-delay: .1s; }
.contact-pitch > :nth-child(3) { animation-delay: .2s; }
.contact-pitch > :nth-child(4) { animation-delay: .3s; }
.inquiry { animation-delay: .35s; }

/* FORM CARD */

.inquiry {
  position: absolute;

  z-index: 10;

  right: 3%;
  top: 4%;
  bottom: 4%;

  width: min(520px, 42%);

  overflow: auto;

  padding: 40px 38px;

  border-radius: 28px;

  background: rgba(var(--limestone-rgb), .97);

  color: var(--obsidian);

  box-shadow: 0 25px 80px rgba(var(--obsidian-rgb), .25);
}

.inquiry__head h2 {
  margin: 14px 0 12px;

  font-size: var(--fs-h3);

  line-height: var(--lh-h3);
}

.inquiry__head p {
  margin: 0 0 30px;

  color: var(--graphite);

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

.inquiry-form {
  display: flex;

  flex-direction: column;

  gap: 18px;
}

.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-row {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;
}

.field > label {
  display: block;

  margin: 0 0 8px 3px;

  color: var(--graphite);

  font-size: var(--fs-caption);

  font-weight: 500;

  line-height: 1;
}

.control {
  height: 54px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 0 15px;

  border: 1px solid rgba(var(--obsidian-rgb), .14);

  border-radius: 14px;

  background: #fff;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

.control:focus-within {
  border-color: var(--graphite);

  box-shadow: 0 0 0 3px rgba(var(--obsidian-rgb), .06);
}

.control svg {
  flex: none;

  width: 18px;
  height: 18px;

  fill: none;

  stroke: var(--obsidian);

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.control input,
.control select,
.control textarea {
  width: 100%;

  border: 0;

  outline: 0;

  background: transparent;

  color: var(--obsidian);

  font-family: var(--font-body);

  font-size: var(--fs-small);

  font-weight: 500;
}

.control input::placeholder,
.control textarea::placeholder {
  color: var(--gravel);
}

/* phone: the country code on the left, split off by a hairline */
.control--phone {
  padding-left: 6px;
}

.phone-code {
  position: relative;

  flex: none;

  height: 40px;

  display: flex;

  align-items: center;

  padding-right: 10px;

  border-right: 1px solid rgba(var(--obsidian-rgb), .14);
}

.phone-code select {
  width: auto;

  height: 100%;

  padding: 0 22px 0 9px;

  border-radius: 10px;

  appearance: none;

  cursor: pointer;
}

.phone-code select:hover {
  background: rgba(var(--obsidian-rgb), .05);
}

.phone-code::after {
  content: "⌄";

  position: absolute;

  right: 16px;
  top: 7px;

  color: var(--graphite);

  font-size: var(--fs-body);

  pointer-events: none;
}

.control--textarea {
  position: relative;

  height: 124px;

  align-items: flex-start;

  padding: 15px;
}

.control--textarea textarea {
  height: 72px;

  resize: none;

  line-height: 1.5;
}

.char-count {
  position: absolute;

  right: 14px;
  bottom: 10px;

  color: var(--gravel);

  font-size: var(--fs-caption);
}

.field__error {
  display: none;

  margin: 6px 0 0 3px;

  color: var(--obsidian);

  font-size: var(--fs-caption);

  font-weight: 600;
}

.field.is-invalid .control {
  border-color: var(--obsidian);

  box-shadow: 0 0 0 3px rgba(var(--obsidian-rgb), .1);
}

.field.is-invalid .field__error,
.inquiry-form.consent-missing .field__error--consent {
  display: block;
}

.consent {
  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--graphite);

  font-size: var(--fs-caption);

  line-height: var(--lh-caption);

  cursor: pointer;
}

.consent input {
  width: 16px;
  height: 16px;

  accent-color: var(--obsidian);
}

.inquiry-submit {
  --fill: var(--graphite);
  --fill-text: var(--limestone);

  height: 58px;

  margin-top: 4px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 16px;

  border: 0;

  border-radius: 999px;

  background: var(--obsidian);

  color: var(--limestone);

  font-family: var(--font-body);

  font-size: var(--fs-button);

  font-weight: 600;

  cursor: pointer;
}

.inquiry-submit:disabled {
  cursor: wait;
  opacity: .66;
}

.inquiry-status.is-error > span {
  background: var(--obsidian);
}

.inquiry-submit .hero-arrow {
  width: 40px;
  height: 40px;

  background: var(--limestone);

  color: var(--obsidian);

  font-size: var(--fs-body);
}

.inquiry-submit:hover .hero-arrow {
  transform: rotate(45deg);
}

.inquiry-submit:disabled {
  opacity: .6;

  cursor: progress;
}

.inquiry-status {
  display: none;

  align-items: center;

  gap: 12px;

  padding: 14px;

  border-radius: 14px;

  background: var(--mist);
}

.inquiry-status.is-shown {
  display: flex;

  animation: reveal-in .6s var(--ease-out) backwards;
}

.inquiry-status > span {
  flex: none;

  width: 32px;
  height: 32px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--obsidian);

  color: var(--limestone);

  font-size: var(--fs-caption);
}

.inquiry-status strong {
  font-size: var(--fs-small);
}

.inquiry-status p {
  margin: 2px 0 0;

  color: var(--graphite);

  font-size: var(--fs-caption);

  line-height: var(--lh-caption);
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip-path: inset(50%);

  white-space: nowrap;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
  .contact-page {
    padding: 80px 0 0;
  }

  .contact-stage {
    min-height: 0;

    display: flex;

    flex-direction: column;

    border-radius: 0;

    background: var(--limestone);
  }

  .contact-stage__photo {
    position: relative;

    height: 640px;
  }

  .contact-pitch {
    top: 360px;
    bottom: auto;

    left: 30px;
    right: 30px;

    width: auto;
  }

  .inquiry {
    position: relative;

    right: auto;
    top: auto;
    bottom: auto;

    width: calc(100% - 40px);

    margin: -40px auto 30px;

    overflow: visible;

    padding: 36px;
  }
}

@media (max-width: 620px) {
  .contact-stage__photo {
    height: 720px;
  }

  .contact-pitch {
    top: 220px;

    left: 20px;
    right: 20px;
  }

  .contact-availability {
    top: 18px;
    left: 18px;
  }

  .inquiry {
    width: calc(100% - 24px);

    padding: 28px 20px;

    border-radius: 22px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-stage__photo img,
  .contact-pitch > *,
  .inquiry,
  .inquiry-status.is-shown,
  .contact-availability i {
    animation: none;
  }
}

.page-contact .contact-page {
  padding-top: 88px;
}

/* stacked: the words sit over the whole photo, so the veil runs top to bottom */
@media (max-width: 1000px) {
  .contact-stage__shade {
    background: linear-gradient(
      180deg,
      rgba(var(--obsidian-rgb), .45) 0%,
      rgba(var(--obsidian-rgb), .8) 55%,
      rgba(var(--obsidian-rgb), .9) 100%
    );
  }
}

@keyframes status-pulse-light {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--limestone-rgb), .5); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--limestone-rgb), 0); }
}