/* The three pieces this rebuild adds to the source stylesheets.
   1. The sphere fallback's atlas is handed over by the module, not by CSS.
   2. The contact form that replaces the mockup audit/checkout/booking journey.
   3. A native <dialog> standing in for the Base UI portal the React app used
      for the portfolio and before/after lightboxes. */

/* On the platform every asset is cross-origin, so the WebGL texture has to be
   requested with CORS. A CSS background-image is always a no-cors request, so
   leaving this rule in the source stylesheet meant two network requests for one
   937 KB atlas and a phantom entry in `sites-cli check`'s failed_requests. The
   module sets --sphere-atlas: the already-CORS-loaded URL when WebGL runs (by
   which point [data-ready=true] has hidden this layer anyway), or the plain URL
   when it does not. */
.v4-site .sphere-fallback span {
  background-image: var(--sphere-atlas, none);
}

.v4-site .contact-section {
  border-top: 1px solid var(--line);
}

.v4-site .contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  max-width: 880px;
  margin-top: 38px;
}

.v4-site .contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v4-site .contact-field--wide {
  grid-column: 1 / -1;
}

.v4-site .contact-field label {
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #adc0b4;
  font-size: 11px;
  font-weight: 550;
}

.v4-site .contact-field input,
.v4-site .contact-field textarea {
  background: #1d2520;
  border: 1px solid #3a5243;
  border-radius: 9px;
  color: #e9f2ec;
  font: inherit;
  font-size: 15px;
  padding: 14px 16px;
  width: 100%;
}

.v4-site .contact-field textarea {
  resize: vertical;
  min-height: 118px;
}

.v4-site .contact-field input:focus-visible,
.v4-site .contact-field textarea:focus-visible {
  border-color: var(--primary);
  outline: 2px solid #16a34a55;
  outline-offset: 1px;
}

.v4-site .contact-field input::placeholder {
  color: #6b8474;
}

/* The honeypot. Off-screen rather than display:none so a bot that reads styles
   still sees a fillable field; a person never reaches it. */
.v4-site .contact-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.v4-site .contact-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.v4-site .contact-result {
  margin: 0;
  font-size: 14px;
  color: #adc0b4;
}

.v4-site .contact-result[data-form-state='ok'] {
  color: var(--primary);
}

.v4-site .contact-result[data-form-state='error'] {
  color: #f08a7a;
}

.v4-site .contact-section .fine-print {
  margin-top: 26px;
}

@media (max-width: 760px) {
  .v4-site .contact-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -- lightbox ------------------------------------------------------------ */

dialog.portfolio-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  border-radius: 12px;
  color: #eaf6ef;
  font-size: 14px;
}

dialog.portfolio-dialog::backdrop {
  background: #00000090;
  backdrop-filter: blur(3px);
}

dialog.portfolio-dialog h2 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 34px 8px 0;
}

dialog.portfolio-dialog p {
  margin: 0 0 16px;
  line-height: 1.6;
}

dialog.portfolio-dialog .dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #0e1a12;
  border: 1px solid #3d6d4f;
  border-radius: 7px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  padding: 7px;
}

dialog.portfolio-dialog .dialog-close:hover {
  background: #17301f;
}

dialog.portfolio-dialog .dialog-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}