/* Phillips360 Modern V2.033 — global contact and form component.

   This file loads on every template because the contact section is reused by
   homepage, article, service, and case-study journeys. Keep field colors and
   states here rather than in page-specific CSS.
*/

/* Contact ----------------------------------------------------------------- */
.p360-contact { background: var(--p360-paper); }
.p360-contact__headline { position: relative; padding-bottom: var(--p360-space-4); border-bottom: 1px solid var(--p360-line); }
.p360-contact__headline h2 { max-width: 1110px; margin: 0; font-size: clamp(3.4rem, 8.3vw, 9.4rem); }
.p360-contact__round-link { position: absolute; right: 0; bottom: -70px; z-index: 2; display: flex; width: 160px; height: 160px; padding: 28px; align-items: center; justify-content: space-between; border-radius: 50%; background: var(--p360-accent); color: var(--p360-ink) !important; font-size: .8rem; font-weight: 800; line-height: 1.15; text-decoration: none !important; transition: transform .4s var(--p360-ease), background .3s ease; }
.p360-contact__round-link:hover { transform: rotate(8deg) scale(1.05); background: var(--p360-accent-2); }
.p360-contact__round-link i { font-size: 1.6rem; font-style: normal; }
.p360-contact__grid { display: grid; padding-top: calc(var(--p360-space-4) + 30px); grid-template-columns: minmax(240px,.55fr) minmax(0,1.45fr); gap: clamp(50px, 10vw, 150px); }
.p360-contact__details { display: flex; flex-direction: column; align-items: start; }
.p360-contact__details > span, .p360-contact__form-intro > span { margin-bottom: 34px; color: var(--p360-muted); font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.p360-contact__details h3 { margin-bottom: 20px; font-size: 2rem; }
.p360-contact__details a { margin-bottom: 8px; font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.p360-contact__details address { margin-top: 30px; color: var(--p360-muted); font-style: normal; }
.p360-contact__availability { display: flex; margin-top: 36px; align-items: center; gap: 10px; font-size: .76rem; font-weight: 700; }
.p360-contact__availability i { width: 8px; height: 8px; border-radius: 50%; background: #59bd69; box-shadow: 0 0 0 5px rgba(89,189,105,.14); }
.p360-contact__form-intro { display: flex; align-items: start; justify-content: space-between; gap: 30px; }
.p360-contact__form-intro p { max-width: 490px; color: var(--p360-muted); font-size: .94rem !important; }
/**
 * CONTACT FORM FIELD SYSTEM — V2.033
 *
 * Surface options:
 * - rgba(255,255,255,.78) = soft elevated field (default)
 * - #ffffff = highest-contrast conventional field
 * - transparent = editorial underline style; only use with dark placeholder text
 *
 * Placeholder guidance:
 * Keep placeholder text at or darker than rgba(8,17,26,.66) on the light
 * surface. Labels remain the primary field description; placeholders are hints.
 */
.p360-contact .wpcf7 form { margin-top: 30px; }
.p360-contact .wpcf7 p { margin-bottom: 24px; }
.p360-contact .wpcf7 label { display: block; width: 100%; color: rgba(8,17,26,.82); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.p360-contact .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.p360-contact .wpcf7 textarea,
.p360-contact .wpcf7 select {
  width: 100%;
  min-height: 58px;
  margin-top: 8px;
  padding: 15px 17px;
  border: 1px solid rgba(8,17,26,.22);
  border-radius: 12px;
  outline: none;
  background: rgba(255,255,255,.78);
  color: var(--p360-ink) !important;
  caret-color: var(--p360-ink);
  font: inherit;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.p360-contact .wpcf7 textarea { min-height: 150px; resize: vertical; }
.p360-contact .wpcf7 select option { background: #fff; color: var(--p360-ink); }
.p360-contact .wpcf7 :where(input, textarea)::placeholder { color: rgba(8,17,26,.68) !important; opacity: 1 !important; }
.p360-contact .wpcf7 :where(input, textarea)::-webkit-input-placeholder { color: rgba(8,17,26,.68) !important; opacity: 1 !important; }
.p360-contact .wpcf7 :where(input, textarea):-ms-input-placeholder { color: rgba(8,17,26,.68) !important; opacity: 1 !important; }
.p360-contact .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.p360-contact .wpcf7 textarea:focus,
.p360-contact .wpcf7 select:focus { border-color: var(--p360-accent); background: #fff; box-shadow: 0 0 0 4px rgba(255,93,58,.13); }
.p360-contact .wpcf7 :where(input[type="checkbox"], input[type="radio"]) { width: 18px; height: 18px; min-height: 0; margin: 0 8px 0 0; accent-color: var(--p360-accent); vertical-align: -3px; }
.p360-contact .wpcf7 input:-webkit-autofill,
.p360-contact .wpcf7 textarea:-webkit-autofill,
.p360-contact .wpcf7 select:-webkit-autofill { -webkit-text-fill-color: var(--p360-ink); box-shadow: 0 0 0 1000px #fff inset; }
.p360-contact .wpcf7 .wpcf7-not-valid { border-color: #b42318 !important; }
.p360-contact .wpcf7 .wpcf7-not-valid-tip { margin-top: 7px; color: #8f1d14; font-size: .78rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.p360-contact .wpcf7 input[type="submit"] { min-height: 56px; padding: 14px 28px; border: 0; border-radius: 99px; background: var(--p360-submit-background); color: var(--p360-submit-text) !important; font-size: .82rem; font-weight: 750; cursor: pointer; transition: transform .3s var(--p360-ease), background .3s ease; }
.p360-contact .wpcf7 input[type="submit"]:hover { transform: translateY(-3px); background: var(--p360-submit-hover-background); color: var(--p360-submit-hover-text) !important; }

/* Resilient direct-contact fallback --------------------------------------- */
.p360-form-fallback {
  margin-top: 30px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(8,17,26,.2);
  border-radius: var(--p360-radius);
  background: rgba(255,255,255,.76);
  box-shadow: 0 18px 60px rgba(8,17,26,.06);
}
.p360-form-fallback h3 { margin: 0 0 14px; font-size: clamp(1.8rem, 3vw, 3rem); }
.p360-form-fallback p { max-width: 58ch; color: var(--p360-muted); }
.p360-form-fallback__actions { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; margin-top: 26px; }

/* Contact Form 7 interaction states --------------------------------------- */
.p360-contact .wpcf7 form[aria-busy="true"] { cursor: progress; }
.p360-contact .wpcf7 form.is-submitting :where(input, textarea, select) { opacity: .72; }
.p360-contact .wpcf7 form.is-submitting :where(input[type="submit"], button[type="submit"]) {
  opacity: .82;
  transform: none;
  cursor: progress;
}
.p360-form-status {
  min-height: 1.5em;
  margin: 14px 0 0;
  color: rgba(8,17,26,.78);
  font-size: .82rem;
  font-weight: 650;
}

.p360-contact .wpcf7 .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  color: var(--p360-ink);
  font-size: .88rem;
  font-weight: 650;
}