/* Dreamspire Say Hello — Apple-inspired compact form · 2026-10-07 */

/* Keep this treatment isolated to Say Hello. */
#panel-hello #hello-form,
#panel-say-hello #hello-form{
  box-sizing:border-box!important;
  width:min(640px,calc(100% - 32px))!important;
  max-width:640px!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:18px auto 34px!important;
  padding:22px 22px 20px!important;
  gap:0!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:26px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.48))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 18px 50px rgba(31,51,81,.10)!important;
  -webkit-backdrop-filter:blur(24px) saturate(150%)!important;
  backdrop-filter:blur(24px) saturate(150%)!important;
}

#panel-hello #hello-form>.kicker,
#panel-say-hello #hello-form>.kicker{
  display:block!important;
  margin:0 0 18px!important;
  color:#9b814c!important;
  font:700 9px/1.2 "DM Sans",system-ui,sans-serif!important;
  letter-spacing:.16em!important;
}

#panel-hello #hello-form>label,
#panel-say-hello #hello-form>label,
#panel-hello #hello-form .ds-contact-fields label,
#panel-say-hello #hello-form .ds-contact-fields label{
  display:grid!important;
  gap:6px!important;
  margin:0 0 8px!important;
  color:#1f3351!important;
  font:600 11px/1.25 "DM Sans",system-ui,sans-serif!important;
  letter-spacing:0!important;
}

#panel-hello #hello-form>input,
#panel-hello #hello-form>select,
#panel-hello #hello-form>textarea,
#panel-hello #hello-form .ds-contact-fields input,
#panel-hello #hello-form .ds-contact-fields select,
#panel-say-hello #hello-form>input,
#panel-say-hello #hello-form>select,
#panel-say-hello #hello-form>textarea,
#panel-say-hello #hello-form .ds-contact-fields input,
#panel-say-hello #hello-form .ds-contact-fields select{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  height:42px!important;
  margin:0 0 13px!important;
  padding:0 13px!important;
  border:1px solid rgba(31,51,81,.13)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.58)!important;
  color:#1f3351!important;
  font:500 13px/1.3 "DM Sans",system-ui,sans-serif!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(31,51,81,.025)!important;
  outline:none!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}

#panel-hello #hello-form>textarea,
#panel-say-hello #hello-form>textarea{
  height:78px!important;
  min-height:78px!important;
  max-height:110px!important;
  padding:11px 13px!important;
  resize:vertical!important;
}

#panel-hello #hello-form :is(input,select,textarea):focus,
#panel-say-hello #hello-form :is(input,select,textarea):focus{
  border-color:rgba(31,51,81,.42)!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:
    0 0 0 4px rgba(31,51,81,.075),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}

/* Reply method and contact field sit side-by-side on larger screens. */
#panel-hello #hello-form .ds-contact-fields,
#panel-say-hello #hello-form .ds-contact-fields{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  margin:0!important;
}

#panel-hello #hello-form .ds-contact-fields label,
#panel-say-hello #hello-form .ds-contact-fields label{
  min-width:0!important;
}

#panel-hello #hello-form .ds-contact-fields :is(input,select),
#panel-say-hello #hello-form .ds-contact-fields :is(input,select){
  margin-bottom:8px!important;
}

#panel-hello #hello-form .ds-contact-hint,
#panel-say-hello #hello-form .ds-contact-hint{
  display:block!important;
  margin:-1px 0 14px!important;
  color:#77808c!important;
  font:400 10px/1.45 "DM Sans",system-ui,sans-serif!important;
}

#panel-hello #hello-form .dark-btn,
#panel-say-hello #hello-form .dark-btn{
  align-self:flex-start!important;
  width:auto!important;
  min-width:158px!important;
  min-height:42px!important;
  height:42px!important;
  margin:5px 0 0!important;
  padding:0 18px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#263d5d,#1f3351)!important;
  color:#fff!important;
  font:700 11px/1 "DM Sans",system-ui,sans-serif!important;
  letter-spacing:.01em!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 20px rgba(31,51,81,.15)!important;
}

#panel-hello #hello-form .dark-btn:hover,
#panel-say-hello #hello-form .dark-btn:hover{
  transform:translateY(-1px)!important;
}

#panel-hello #hello-form .ds-contact-privacy,
#panel-say-hello #hello-form .ds-contact-privacy{
  display:block!important;
  max-width:54ch!important;
  margin:12px 0 0!important;
  color:#737c88!important;
  font:400 9.5px/1.5 "DM Sans",system-ui,sans-serif!important;
}

#panel-hello #hello-form #hello-result,
#panel-say-hello #hello-form #hello-result{
  display:block!important;
  min-height:0!important;
  margin:5px 0 0!important;
  color:#687384!important;
  font:500 9.5px/1.4 "DM Sans",system-ui,sans-serif!important;
}

/* Give the overall Say Hello workspace more breathing room without stretching the form. */
#panel-hello[data-ds-final="1"],
#panel-say-hello[data-ds-final="1"]{
  --ds-sayhello-form-width:640px;
}

@media(max-width:700px){
  #panel-hello #hello-form,
  #panel-say-hello #hello-form{
    width:calc(100% - 20px)!important;
    margin:12px auto 24px!important;
    padding:18px!important;
    border-radius:22px!important;
    -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
    backdrop-filter:blur(18px) saturate(140%)!important;
  }

  #panel-hello #hello-form .ds-contact-fields,
  #panel-say-hello #hello-form .ds-contact-fields{
    grid-template-columns:1fr!important;
    gap:0!important;
  }

  #panel-hello #hello-form .dark-btn,
  #panel-say-hello #hello-form .dark-btn{
    width:100%!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #panel-hello #hello-form *,
  #panel-say-hello #hello-form *{
    transition:none!important;
  }
}