/* ===== Contact page ===== */
.contact-page{
  padding: 24px 20px;
  background: #F4F4F4;
  border: 1px solid #eee;
  border-radius: 16px;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.12);
  padding: 22px 63px 24px;
  margin: 38px 0;
}


/* Form building blocks */
.ct-form{ width:100%; }
.ct-group{ margin-bottom: 18px; }
.ct-group--intro{ margin-bottom: 22px; }

.ct-label{
  display:block;
  font-weight:500;
  color: var(--primary-color, #5d4037);
  margin-bottom: 10px;
  font-size: 16px;
}

.ct-input{
  width:100%;
  height: 46px;
  padding: 10px 14px;
  border: 1px solid #D4D4D4;
  border-radius: 7px;
  background:#f4f4f4;
  font-size: 11px; font-weight:400 ;
  color:#212121;
}
.ct-input::placeholder{ font-size: 13px; font-weight: 500; color:#b4b4b4; }

/* Mobile sizing (seamless, full-width) */
/* ct-select: hide the native select and style face + menu */
.ct-select{ position:relative; width:100%; }

/* Visually hide the native select but keep it for form submit */
.ct-select > select.ct-select-input{
  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;
}

/* Closed face */
.ct-select-display{
  display:block; width:100%;
  height:48px; min-height:48px;
  padding:10px 44px 10px 14px;
  border:1px solid #d4d4d4;
  border-radius:7px;
  background:#f4f4f4; color:#212121;
  line-height:1.2;
  font-size: 11px; font-weight:400;
  text-align:left; cursor:pointer; position:relative;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Chevron */
.ct-select-display::after{
  content:""; position:absolute; right:14px; top:50%;
  transform:translateY(-50%); width:18px; height:18px;
  background-repeat:no-repeat; background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  pointer-events:none;
}

/* Focus ring */
.ct-select-display:focus{
  outline:none;
  border-color:#f4f4f4;;
}

/* Seamless menu (attached, no gap) */
.ct-select-menu{
  display:none;
  position:absolute; left:0; right:0; top:100%;
  background:#f4f4f4; z-index:50;
  border:1px solid #e6e6e6; border-top:0;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  max-height:280px; overflow:auto;
}
.ct-select.open .ct-select-menu{ display:block; }

/* While open, flatten the bottom corners of the face so it “joins” the menu */
.ct-select.open .ct-select-display{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  border-color:#e6e6e6;
}

/* Options */
.ct-select-option{
  padding:12px 14px;
  font-size:11px; font-weight:400; line-height:1.35;
  white-space:normal; word-break:break-word; cursor:pointer;
}
.ct-select-option:hover{ background:#f6f2f1; }
.ct-select-option[aria-selected="true"]{ background:#f0e9e7; }
.ct-select-option[aria-disabled="true"]{ opacity:.6; cursor:default; }


/* Multiline */
.ct-textarea{
  min-height: 140px;
  resize: none;
  padding: 12px 14px;
  line-height: 1.45;
}

/* Helper text */
.ct-help{
  margin-top: 8px;
  font-size: 13px;
  color: #8a8a8a;
}

/* Dropzone */
.ct-drop{
  border: 2px dashed #e2e2e2;
  border-radius: 12px;
  background:#f4f4f4;
  min-height: 74px;
  display:grid; place-items:center;
  color:#8a8a8a;
  text-align:center;
  padding: 14px;
  cursor: pointer;
}
.ct-drop input[type="file"]{ display:none; }
.ct-drop strong{ color: var(--primary-color, #5d4037); }

/* Actions */
.ct-actions{
  display:flex; gap:16px;
  margin-top: 10px;
}
.btn-hero{
  background: var(--primary-color, #5d4037);
  color:#fff; border:0; border-radius: 7px;
  padding: 12px 18px; font-weight:500;
  font-size: 14px;;
}
.btn-hero:hover{ background: var(--primary-light, #4e342e); }
.btn-outline{
  background:#fff; color: var(--primary-color, #5d4037);
  border: 2px solid var(--primary-color, #5d4037);
  border-radius: 7px; padding: 12px 18px; font-weight:500; font-size: 14px;
}

/* Bigger first prompt like mock */
.ct-group--intro .ct-label{
font-size:16px; font-weight: 500; color: #4E342E;
}

/* ===== Mobile (matches your second screenshot) ===== */
@media (max-width: 575.98px){
  .contact-page{ padding: 16px; }
  .contact-card{ padding: 18px 16px 20px; }
  .ct-input{ height: 54px; border-radius: 12px; }
  .ct-textarea{ min-height: 180px; }
  .ct-select-display{
    height:54px; min-height:54px;
    padding:12px 44px 12px 16px; font-size:16px;
  }
  .ct-select-menu{ max-height:320px; }
    
  .ct-label{ font-size: 14px; margin-bottom: 12px; }
  .ct-help{ font-size: 14px; }

  .ct-drop{ min-height: 120px; }

  .ct-actions{ flex-direction: column; gap: 14px; margin-top: 18px; }
  .ct-actions .btn{ width: 100%; }

}