/* ==========================================================================
   Contact

   21st.dev "Contact 01 - Project Inquiry Form", resolved to this site's
   tokens. The reference's geometry, this site's colour and type.

     wrap        1280px (max-w-7xl), 30px gutters
     grid        12 columns above 768: info 6, one empty, card 5
     info        dot + label, heading, deck, facts two-up, hairline, brokerage
     card        12px radius, 1px ring, 40px padding, 16px between fields
     controls    44px tall, 8px radius, 1px ring, White on the card
     submit      full width, 48px

   Light ground on purpose: the reference is a quiet white page, and it lets
   the dark hero at the top of the page stay the only dark moment.
   No literal colour below: everything comes off tokens.css.
   ========================================================================== */

.yp-contact {
  background: rgb(var(--yp-shell-rgb));
  padding: clamp(72px, 8vw, 128px) 0;
  --yp-ct-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-contact-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
}

.yp-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

@media (min-width: 900px) {
  .yp-contact-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
  }
  .yp-contact-info { grid-column: 1 / span 6; }
  .yp-contact-card { grid-column: 8 / span 5; }
}

/* ---- left: who, where, how ---------------------------------------------- */

.yp-contact-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0 !important;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0 !important;
  color: rgb(var(--yp-ink-rgb) / 0.68);
}

.yp-contact-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yp-ink);
  box-shadow: 0 0 0 4px rgb(var(--yp-ink-rgb) / 0.1);
}

/* Divi pads every heading and zeroes letter-spacing with !important. The
   treatment is the site's title treatment: caps, wide tracking, display
   weight. */
.yp-contact-title {
  margin: 0;
  padding: 0 !important;
  font-family: var(--yp-serif);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  line-height: 1.08;
  font-weight: var(--yp-w-display, 560) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--yp-ink);
}

.yp-contact-deck {
  margin: 20px 0 0;
  padding: 0 !important;
  max-width: 48ch;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0 !important;
  color: rgb(var(--yp-ink-rgb) / 0.75);
  text-wrap: pretty;
}

.yp-contact-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
  margin: 44px 0 0;
  padding: 0;
}

.yp-contact-fact { margin: 0; min-width: 0; }
.yp-contact-fact-wide { grid-column: 1 / -1; }

.yp-contact-fact dt {
  margin: 0 0 8px;
  padding: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: rgb(var(--yp-ink-rgb) / 0.66);
}

.yp-contact-fact dd {
  margin: 0;
  padding: 0;
  font-size: clamp(17px, 0.4vw + 15.5px, 20px);
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.yp-contact-fact a {
  color: var(--yp-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--yp-ct-ease);
}

.yp-contact-fact a:hover,
.yp-contact-fact a:focus-visible { border-bottom-color: rgb(var(--yp-ink-rgb) / 0.5); }

.yp-contact-brokerage {
  margin: 44px 0 0;
  padding: 36px 0 0;
  border-top: 1px solid rgb(var(--yp-ink-rgb) / 0.14);
}

.yp-contact-brokerage-label {
  margin: 0 0 12px;
  padding: 0 !important;
  font-size: 16px;
  letter-spacing: 0 !important;
  color: rgb(var(--yp-ink-rgb) / 0.66);
}

.yp-contact-brokerage-name {
  margin: 0;
  padding: 0 !important;
  font-family: var(--yp-serif);
  font-size: 20px;
  font-weight: var(--yp-w-section, 540);
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: rgb(var(--yp-ink-rgb) / 0.8);
}

/* ---- right: the card ------------------------------------------------------ */

.yp-contact-card {
  border-radius: 12px;
  background: var(--yp-white);
  box-shadow: 0 0 0 1px rgb(var(--yp-ink-rgb) / 0.12),
              0 24px 48px -28px rgb(var(--yp-ink-rgb) / 0.22);
  padding: clamp(24px, 3vw, 40px);
}

.yp-contact-form { display: grid; gap: 16px; margin: 0; }

.yp-contact-card-title {
  margin: 0 0 6px;
  padding: 0 !important;
  font-family: var(--yp-serif);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--yp-ink);
}

.yp-contact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.yp-contact-field { position: relative; min-width: 0; margin: 0; }

#yp-contact .yp-contact-field input,
#yp-contact .yp-contact-field select,
#yp-contact .yp-contact-field textarea {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  /* !important: the same plugin sheet forces its own field padding. */
  padding: 10px 14px !important;
  /* !important: the Loopt plugin's form-style.css forces
     `input, textarea, select { border-width: 0 0 1px; border-style: none none solid }`
     with !important site-wide, which left these controls underlined, unboxed. */
  border: 1px solid rgb(var(--yp-ink-rgb) / 0.18) !important;
  border-radius: 8px;
  background: var(--yp-white);
  box-shadow: 0 1px 2px rgb(var(--yp-ink-rgb) / 0.05);
  color: var(--yp-ink);
  font-family: var(--yp-serif);
  /* 16px: anything smaller makes iOS Safari zoom the page on focus. */
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  transition: border-color 250ms var(--yp-ct-ease), box-shadow 250ms var(--yp-ct-ease);
}

#yp-contact .yp-contact-field textarea {
  height: auto;
  min-height: 104px;
  padding: 12px 14px !important;
  resize: vertical;
}

#yp-contact .yp-contact-field select { padding-right: 40px !important; cursor: pointer; }
/* The placeholder option reads as a placeholder until something is chosen. */
#yp-contact .yp-contact-field select:invalid { color: rgb(var(--yp-ink-rgb) / 0.62); }

.yp-contact-chev {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgb(var(--yp-ink-rgb) / 0.55);
}

#yp-contact .yp-contact-field input::placeholder,
#yp-contact .yp-contact-field textarea::placeholder { color: rgb(var(--yp-ink-rgb) / 0.62); opacity: 1; }

#yp-contact .yp-contact-field input:hover,
#yp-contact .yp-contact-field select:hover,
#yp-contact .yp-contact-field textarea:hover { border-color: rgb(var(--yp-ink-rgb) / 0.36) !important; }

#yp-contact .yp-contact-field input:focus-visible,
#yp-contact .yp-contact-field select:focus-visible,
#yp-contact .yp-contact-field textarea:focus-visible {
  outline: none;
  border-color: var(--yp-ink) !important;
  box-shadow: 0 0 0 3px rgb(var(--yp-ink-rgb) / 0.14);
}

#yp-contact .yp-contact-field input:user-invalid,
#yp-contact .yp-contact-field select:user-invalid,
#yp-contact .yp-contact-field textarea:user-invalid { border-color: rgb(var(--yp-ink-rgb) / 0.7) !important; border-style: dashed !important; }

/* ---- consent --------------------------------------------------------------
   The real checkbox stays in the accessibility tree and takes the focus; the
   drawn box is its label's first child. Starts empty: consent that was never
   given is not consent. */

.yp-contact-consent { position: relative; margin: 2px 0 0; }

.yp-contact-consent input {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.yp-contact-consent label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: rgb(var(--yp-ink-rgb) / 0.72);
  font-family: var(--yp-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.yp-contact-box {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid rgb(var(--yp-ink-rgb) / 0.45);
  border-radius: 5px;
  background: var(--yp-white);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.yp-contact-box svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--yp-shell);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 150ms ease;
}

.yp-contact-consent input:checked + label .yp-contact-box { background: var(--yp-ink); border-color: var(--yp-ink); }
.yp-contact-consent input:checked + label .yp-contact-box svg { opacity: 1; }
.yp-contact-consent input:hover + label .yp-contact-box { border-color: var(--yp-ink); }
.yp-contact-consent input:focus-visible + label .yp-contact-box {
  outline: 2px solid var(--yp-ink);
  outline-offset: 2px;
}

.yp-contact-consent a {
  color: var(--yp-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.yp-contact-consent a:hover { opacity: 0.65; }

/* ---- submit --------------------------------------------------------------- */

#yp-contact .yp-contact-submit {
  appearance: none;
  display: block;
  width: 100%;
  height: 48px;
  margin: 6px 0 0;
  padding: 0 24px;
  border: 1px solid var(--yp-ink);
  border-radius: 8px;
  /* !important on the two colours: buttons.css groups this button with the
     site's outline buttons and forces a transparent ground. The reference's
     submit is the one solid control on the card, so it stays filled. */
  background: var(--yp-ink) !important;
  color: var(--yp-shell) !important;
  font-family: var(--yp-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 250ms var(--yp-ct-ease), color 250ms var(--yp-ct-ease),
              transform 250ms var(--yp-ct-ease);
}

#yp-contact .yp-contact-submit:hover,
#yp-contact .yp-contact-submit:focus-visible { background: transparent !important; color: var(--yp-ink) !important; }
#yp-contact .yp-contact-submit:focus-visible { outline: 2px solid var(--yp-ink); outline-offset: 3px; }
#yp-contact .yp-contact-submit:active { transform: translateY(1px); }

.yp-contact-status {
  margin: 0;
  color: rgb(var(--yp-ink-rgb) / 0.75);
  font-size: 14px;
  line-height: 1.5;
}

.yp-contact-status:empty { display: none; }

/* Visually hidden, still read out: the field labels, since the reference
   shows placeholders only. */
.yp-contact-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- narrow --------------------------------------------------------------- */

@media (max-width: 620px) {
  .yp-contact-wrap { padding: 0 16px; }
  .yp-contact-facts { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; }
  .yp-contact-row { grid-template-columns: minmax(0, 1fr); }
  .yp-contact-brokerage { margin-top: 32px; padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .yp-contact-field input,
  .yp-contact-field select,
  .yp-contact-field textarea,
  .yp-contact-submit,
  .yp-contact-box,
  .yp-contact-box svg { transition: none; }
}