/* Stylish Contact Form — line-by-line, flat style. Scoped under .scu so it can't leak into, or be broken by, a theme.
   Inherits your theme's font and text size. Every colour/size is overridable from the Elementor Style tab. */
.scu{
  --scu-accent:#000; --scu-ink:#333; --scu-ph:#6b6b6b; --scu-line:#d9d9d9; --scu-ok:#0b7a4f; --scu-err:#c62839;
  position:relative; display:block; width:100%; max-width:100%; margin:0; padding:0; float:none; clear:both;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  font:inherit; color:inherit; text-align:left; text-transform:none; letter-spacing:normal; box-sizing:border-box; isolation:isolate;
}
.scu *,.scu *::before,.scu *::after{box-sizing:border-box;float:none;letter-spacing:normal;text-shadow:none}
.scu form,.scu p,.scu label,.scu div{margin:0;border:0;background:none;box-shadow:none;max-width:none;text-indent:0}
.scu .scu__form{display:block;padding:0}

/* One field per line by default; narrower widths are optional per field */
.scu .scu__fields{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:28px 20px}
.scu .scu__field{grid-column:span 12; display:grid; gap:8px; align-content:start; min-width:0}
.scu .scu__field.scu-w-75{grid-column:span 9}
.scu .scu__field.scu-w-66{grid-column:span 8}
.scu .scu__field.scu-w-50{grid-column:span 6}
.scu .scu__field.scu-w-33{grid-column:span 4}
.scu .scu__field.scu-w-25{grid-column:span 3}

.scu .scu__field > label{display:block; font:inherit; font-weight:600; line-height:1.4; color:inherit}
.scu .scu__req{display:none; font-style:normal; color:var(--scu-err); margin-left:3px}
.scu.scu--reqmark .scu__field:has(:required) .scu__req{display:inline}
.scu.scu--nolabels .scu__field > label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Inputs, textarea, select */
.scu .scu__field input:not([type=checkbox]),.scu .scu__field textarea,.scu .scu__field select{
  -webkit-appearance:none; appearance:none; display:block; width:100%; height:auto; min-height:53px; margin:0;
  font:inherit; font-size:1.2em; line-height:1.4; color:var(--scu-ink); background-color:#fff;
  border:1px solid var(--scu-line); border-radius:0; padding:12px 15px; box-shadow:none; outline:0;
  transition:border-color .15s, background-color .15s}
.scu .scu__field textarea{resize:vertical; min-height:127px}
.scu .scu__field select{padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center}
.scu .scu__field input::placeholder,.scu .scu__field textarea::placeholder{color:var(--scu-ph); opacity:1}
.scu .scu__field input:not([type=checkbox]):focus,.scu .scu__field textarea:focus,.scu .scu__field select:focus{
  background-color:#fff; color:var(--scu-ink); border-color:var(--scu-accent); box-shadow:none}
.scu .scu__field.is-invalid input,.scu .scu__field.is-invalid textarea,.scu .scu__field.is-invalid select{border-color:var(--scu-err)}
.scu .scu__err{color:var(--scu-err); font-size:.85em}

/* Checkbox */
.scu .scu__check{display:flex; align-items:flex-start; gap:10px; cursor:pointer; line-height:1.5}
.scu .scu__check input{flex:none; width:20px; height:20px; margin:2px 0 0; accent-color:var(--scu-accent); cursor:pointer}

.scu .scu__hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important}

/* Button — flat black, uppercase; all states pinned so theme button styles can't change it */
.scu .scu__actions{display:flex; justify-content:flex-start; margin-top:28px}
.scu-btn-align-center .scu__actions{justify-content:center}
.scu-btn-align-right .scu__actions{justify-content:flex-end}
.scu .scu__btn,.scu .scu__btn:link,.scu .scu__btn:visited{
  -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:auto; height:auto; min-height:57px; margin:0; padding:14px 42px; cursor:pointer;
  font:inherit; font-weight:700; font-size:1.1em; line-height:1.2; text-transform:uppercase; letter-spacing:.01em;
  color:#fff; background-color:var(--scu-accent);
  border:0 solid transparent; border-radius:0; text-decoration:none; box-shadow:none;
  transition:background-color .15s, color .15s, opacity .15s}
.scu-btn-align-stretch .scu .scu__btn{width:100%}
.scu .scu__btn:hover,.scu .scu__btn:active{color:#fff; background-color:#2b2b2b}
.scu .scu__btn:focus-visible{outline:2px solid var(--scu-accent); outline-offset:3px}
.scu .scu__btn[disabled]{opacity:.6; cursor:progress}

.scu .scu__status{min-height:1.4em; margin-top:16px; font-weight:500}
.scu .scu__status:empty{margin-top:0; min-height:0}
.scu .scu__status.is-ok{color:var(--scu-ok)} .scu .scu__status.is-err{color:var(--scu-err)}
.scu .scu__form.is-sent .scu__fields,.scu .scu__form.is-sent .scu__actions{display:none}

/* Responsive: fields always stack on phones; button goes full width */
@media (max-width:640px){
  .scu .scu__field,.scu .scu__field[class*="scu-w-"]{grid-column:span 12}
  .scu .scu__btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.scu *{transition:none!important}}
