/* Alpha 25.20 — native DemandSense contact page and HubSpot embed shell */
.ds-contact-page {
  position: relative;
  min-height: 100vh;
  padding: 170px 0 110px;
  overflow: hidden;
}

.ds-contact-page::before {
  content: "";
  position: absolute;
  width: min(72vw, 900px);
  aspect-ratio: 1;
  left: -18vw;
  top: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(153,217,217,.11), rgba(0,98,139,.055) 38%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.ds-contact-shell {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
}

.ds-contact-intro {
  position: sticky;
  top: 160px;
  padding-top: 34px;
}

.ds-contact-eyebrow { margin-bottom: 18px; }

.ds-contact-intro h1 {
  margin: 0;
  max-width: 660px;
  font-size: clamp(54px, 7vw, 92px);
  line-height: .94;
  letter-spacing: -.055em;
  text-transform: none;
}

.ds-contact-copy {
  max-width: 580px;
  margin-top: 30px;
}

.ds-contact-copy > *:first-child { margin-top: 0; }
.ds-contact-copy > *:last-child { margin-bottom: 0; }

.ds-contact-copy p,
.ds-contact-copy li {
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
}

.ds-contact-copy a { color: var(--teal); }

.ds-contact-form-card {
  position: relative;
  min-width: 0;
  min-height: 580px;
  padding: clamp(28px, 4.2vw, 54px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: clamp(28px, 3vw, 38px);
  background:
    radial-gradient(circle at 85% 4%, rgba(153,217,217,.11), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 34px 100px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}

.ds-contact-form-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), #00628b 56%, transparent);
  opacity: .82;
}

.ds-contact-form-heading {
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.ds-contact-form-heading span {
  display: block;
  margin-bottom: 10px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ds-contact-form-heading h2 {
  margin: 0;
  max-width: 540px;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.ds-hubspot-form {
  position: relative;
  width: 100%;
  min-height: 460px;
}

.ds-hubspot-form iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

.ds-contact-form-status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  color: var(--muted);
  font-size: 14px;
  transition: opacity .25s ease;
}

.ds-contact-form-card.is-form-ready .ds-contact-form-status {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ds-contact-form-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(153,217,217,.22);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: ds-contact-spin .8s linear infinite;
}

@keyframes ds-contact-spin { to { transform: rotate(360deg); } }

.ds-contact-form-fallback {
  padding: 18px 20px;
  border: 1px solid rgba(192,0,0,.28);
  border-radius: 18px;
  background: rgba(192,0,0,.075);
  color: var(--muted);
  line-height: 1.55;
}

/* HubSpot sometimes renders accessible wrapper content outside an iframe. These
   selectors intentionally use only safe outer-shell rules; internal HubSpot
   field styling can be refined after the live DOM is available. */
.ds-hubspot-form > div,
.ds-hubspot-form form { max-width: 100%; }

@media (max-width: 980px) {
  .ds-contact-page { padding-top: 150px; }
  .ds-contact-shell { grid-template-columns: 1fr; gap: 46px; }
  .ds-contact-intro { position: relative; top: auto; padding-top: 0; }
  .ds-contact-intro h1 { max-width: 820px; }
  .ds-contact-copy { max-width: 720px; }
}

@media (max-width: 640px) {
  .ds-contact-page { padding: 132px 0 76px; }
  .ds-contact-shell { width: min(100% - 28px, var(--max)); gap: 34px; }
  .ds-contact-form-card { min-height: 520px; padding: 24px 20px 30px; border-radius: 26px; }
  .ds-contact-form-heading { margin-bottom: 24px; padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-contact-form-spinner { animation: none; }
}

/* Alpha 25.23 — make the provisioned page feel complete and style the
   updated HubSpot embed with HubSpot's documented CSS custom properties. */
.ds-contact-copy h2 {
  margin: 34px 0 14px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .02em;
  color: #f8fbff;
}

.ds-contact-copy ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ds-contact-copy li {
  position: relative;
  padding-left: 22px;
}

.ds-contact-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(153,217,217,.08);
}

.ds-hubspot-form,
.hs-form-frame.ds-hubspot-form {
  --hsf-global__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-global__font-size: 16px;
  --hsf-global__color: #f8fbff;
  --hsf-global-error__color: #ff8787;

  --hsf-row__horizontal-spacing: 16px;
  --hsf-row__vertical-spacing: 18px;
  --hsf-module__vertical-spacing: 18px;

  --hsf-richtext__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-richtext__font-size: 15px;
  --hsf-richtext__color: #a8b6c6;
  --hsf-heading__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-heading__color: #f8fbff;

  --hsf-background__background-color: transparent;
  --hsf-background__background-image: none;
  --hsf-background__border-style: none;
  --hsf-background__border-width: 0;
  --hsf-background__padding: 0;

  --hsf-field-label__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-field-label__font-size: 14px;
  --hsf-field-label__color: #f8fbff;
  --hsf-field-label-requiredindicator__color: #99d9d9;
  --hsf-field-description__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-field-description__color: #a8b6c6;
  --hsf-field-footer__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-field-footer__color: #a8b6c6;

  --hsf-field-input__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-field-input__color: #f8fbff;
  --hsf-field-input__background-color: rgba(255,255,255,.055);
  --hsf-field-input__placeholder-color: #7e91a3;
  --hsf-field-input__border-color: rgba(153,217,217,.26);
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: 14px;
  --hsf-field-input__padding: 13px 15px;

  --hsf-field-textarea__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-field-textarea__color: #f8fbff;
  --hsf-field-textarea__background-color: rgba(255,255,255,.055);
  --hsf-field-textarea__placeholder-color: #7e91a3;
  --hsf-field-textarea__border-color: rgba(153,217,217,.26);
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: 14px;
  --hsf-field-textarea__padding: 13px 15px;

  --hsf-button__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-button__font-size: 15px;
  --hsf-button__color: #001628;
  --hsf-button__background-color: #99d9d9;
  --hsf-button__background-image: none;
  --hsf-button__border-radius: 999px;
  --hsf-button__padding: 14px 24px;
  --hsf-button__box-shadow: 0 10px 28px rgba(0,0,0,.22);

  --hsf-erroralert__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-erroralert__font-size: 14px;
  --hsf-erroralert__color: #ff8787;
  --hsf-infoalert__font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hsf-infoalert__font-size: 14px;
  --hsf-infoalert__color: #a8b6c6;
}

@media (min-width: 981px) {
  .ds-contact-shell { min-height: 680px; }
}


/* Alpha 25.24 — contact column alignment under the fixed canonical header.
   Keep both columns in normal document flow so the taller HubSpot card does
   not slide independently behind the header while the intro remains sticky. */
.ds-contact-page {
  padding-top: calc(var(--se-header-top, 18px) + var(--se-header-height, 72px) + 64px);
}

.ds-contact-shell {
  align-items: start;
}

.ds-contact-intro {
  position: relative;
  top: auto;
  padding-top: 0;
}

.ds-contact-form-card {
  margin-top: 0;
}

@media (max-width: 980px) {
  .ds-contact-page {
    padding-top: calc(var(--se-header-top, 18px) + var(--se-header-height, 72px) + 52px);
  }
}

@media (max-width: 640px) {
  .ds-contact-page {
    padding-top: calc(var(--se-header-top, 18px) + var(--se-header-height, 68px) + 38px);
  }
}


/* Alpha 25.25 — native DemandSense contact form. HubSpot remains the
   destination for submissions, but no HubSpot embed UI is rendered. */
.ds-native-contact-form {
  display: grid;
  gap: 20px;
}

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

.ds-contact-field {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.ds-contact-field label {
  color: #dbe4ed;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.ds-contact-field label span { color: var(--teal); }

.ds-contact-field input {
  width: 100%;
  min-height: 54px;
  padding: 13px 16px;
  border: 1px solid rgba(153,217,217,.26);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  color: #f8fbff;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ds-contact-field input:hover {
  border-color: rgba(153,217,217,.42);
}

.ds-contact-field input:focus {
  border-color: #99d9d9;
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 4px rgba(153,217,217,.10);
}

.ds-contact-field input:user-invalid {
  border-color: rgba(255,135,135,.72);
  box-shadow: 0 0 0 4px rgba(192,0,0,.09);
}

.ds-contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.ds-contact-form-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}

.ds-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: #99d9d9;
  color: #001628;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.ds-contact-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

.ds-contact-submit:disabled { cursor: wait; opacity: .72; }

.ds-contact-submit-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(0,22,40,.24);
  border-top-color: #001628;
  border-radius: 50%;
  animation: ds-contact-spin .8s linear infinite;
}

.ds-contact-submit.is-loading .ds-contact-submit-spinner { display: inline-block; }

.ds-contact-form-message {
  min-height: 1.5em;
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.ds-contact-form-message.is-success { color: #99d9d9; }
.ds-contact-form-message.is-error { color: #ff9d9d; }

@media (max-width: 640px) {
  .ds-contact-field-row { grid-template-columns: 1fr; }
  .ds-contact-submit { width: 100%; }
}

/* Alpha 25.28 — deterministic Contact header clearance.
   Match the homepage approach: the section owns its top spacing in normal
   document flow; no runtime header measurement or custom-property handoff. */
.ds-contact-page {
  padding: 160px 0 110px !important;
}

@media (max-width: 980px) {
  .ds-contact-page { padding: 150px 0 92px !important; }
}

@media (max-width: 640px) {
  .ds-contact-page { padding: 132px 0 76px !important; }
}


/* Beta 2 — schema-driven native HubSpot form controls. */
.ds-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 18px;
}

.ds-contact-field--half { grid-column: span 1; }
.ds-contact-field--full { grid-column: 1 / -1; }

.ds-contact-field textarea,
.ds-contact-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(153, 217, 217, .24);
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  color: #fff;
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.ds-contact-field textarea {
  min-height: 156px;
  resize: vertical;
  padding: 14px 15px;
  line-height: 1.5;
}

.ds-contact-field select {
  min-height: 50px;
  padding: 0 42px 0 15px;
}

.ds-contact-field textarea:hover,
.ds-contact-field select:hover {
  border-color: rgba(153, 217, 217, .45);
}

.ds-contact-field textarea:focus,
.ds-contact-field select:focus {
  border-color: #99d9d9;
  background: rgba(255, 255, 255, .075);
  box-shadow: 0 0 0 3px rgba(153, 217, 217, .1);
}

.ds-contact-field fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.ds-contact-field legend {
  margin: 0 0 9px;
  padding: 0;
  color: rgba(255,255,255,.88);
  font-size: 14px;
  font-weight: 700;
}

.ds-contact-options {
  display: grid;
  gap: 10px;
}

.ds-contact-option {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer;
}

.ds-contact-option input[type="checkbox"],
.ds-contact-option input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: #99d9d9;
}

.ds-contact-field-description {
  margin-top: 7px;
  color: rgba(255,255,255,.56);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .ds-contact-fields { grid-template-columns: 1fr; }
  .ds-contact-field--half,
  .ds-contact-field--full { grid-column: 1; }
}


/* Beta 3 — Cloudflare Turnstile protection for the native Contact form. */
.ds-contact-turnstile {
  grid-column: 1 / -1;
  width: 100%;
  margin: 4px 0 2px;
  min-height: 1px;
}

.ds-contact-turnstile .cf-turnstile {
  width: 100%;
}


/* Beta 5.35 — compact Contact form: field names live inside text controls as
   placeholders while labels remain available to assistive technology. */
.ds-contact-page .ds-contact-field--placeholder > label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ds-contact-page .ds-contact-field--placeholder {
  gap: 0;
}

.ds-contact-page .ds-contact-field input::placeholder,
.ds-contact-page .ds-contact-field textarea::placeholder {
  color: rgba(219, 228, 237, .68);
  opacity: 1;
}

/* Beta 5.36 — compact desktop Contact card so the full form remains visible
   when Cloudflare Turnstile is rendered. The form eyebrow was removed in the
   template, and spacing is tightened without changing the mobile rhythm. */
@media (min-width: 981px) {
  .ds-contact-page {
    padding-top: 146px !important;
    padding-bottom: 76px !important;
  }

  .ds-contact-form-card {
    padding: 42px 54px 40px;
    min-height: 0;
  }

  .ds-contact-form-heading {
    margin-bottom: 20px;
    padding-bottom: 18px;
  }

  .ds-contact-form-heading h2 {
    font-size: clamp(30px, 3vw, 43px);
  }

  .ds-native-contact-form {
    gap: 14px;
  }

  .ds-contact-fields {
    gap: 14px 18px;
  }

  .ds-contact-field input {
    min-height: 48px;
    padding: 11px 15px;
  }

  .ds-contact-field textarea {
    min-height: 116px;
    height: 116px;
    padding: 12px 15px;
  }

  .ds-contact-field select {
    min-height: 48px;
  }

  .ds-contact-turnstile {
    margin: 0;
  }

  .ds-contact-form-actions {
    padding-top: 0;
  }

  .ds-contact-submit {
    min-height: 46px;
    padding: 11px 22px;
  }

  .ds-contact-form-message:empty {
    display: none;
  }
}