/* Custom project details and a touch-friendly budget slider. */
.custom-form-field{display:block;margin:0 0 18px}
.custom-form-field[hidden]{display:none!important}
.type-pills>button{white-space:nowrap}
.budget-control{border:1px solid var(--line);border-radius:8px;padding:15px 17px 12px;min-width:0}
.budget-control output{display:block;font:600 23px var(--sans);color:var(--ink);margin-bottom:8px;text-align:start}
.contact input[type=range]#project-budget{appearance:none;-webkit-appearance:none;display:block;width:100%;height:44px;padding:0;margin:0;cursor:ew-resize;border:0;border-radius:0;background:transparent;direction:ltr;touch-action:pan-y}
#project-budget::-webkit-slider-runnable-track{height:6px;border-radius:10px;background:linear-gradient(to right,#97c82a 0%,#97c82a var(--budget-fill,0%),#d7d9cf var(--budget-fill,0%),#d7d9cf 100%)}
#project-budget::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;border:3px solid var(--paper);border-radius:50%;background:#111;box-shadow:0 0 0 1px #b8bdac;margin-top:-9px}
#project-budget::-moz-range-track{height:6px;border-radius:10px;background:#d7d9cf}
#project-budget::-moz-range-progress{height:6px;border-radius:10px;background:#97c82a}
#project-budget::-moz-range-thumb{width:20px;height:20px;border:3px solid var(--paper);border-radius:50%;background:#111;box-shadow:0 0 0 1px #b8bdac}
.budget-limits{display:flex;justify-content:space-between;gap:10px;font:12px var(--sans);color:#65695c;line-height:1.4}
.contact .project-row{align-items:start}
html[lang=ar] .budget-control output{font-family:var(--sans);font-size:23px}
@media(max-width:760px){.type-pills>button{font-size:13px;padding:9px 13px}.custom-form-field{margin-bottom:16px}.budget-control{padding:12px 16px}.budget-control output{font-size:22px}}

/* Balanced brief: a shared grid, consistent controls and aligned detail panels. */
#brief-form{display:grid;gap:24px;min-width:0}
#brief-form>fieldset,#brief-form>label,#brief-form>.form-row,#brief-form>.submit,#brief-form>.form-note{margin:0;min-width:0}
#brief-form fieldset{border:0;padding:0;min-inline-size:0}
#brief-form legend{padding:0;margin:0 0 10px;font-size:14px;font-weight:500;line-height:1.5}
#brief-form .type-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:10px;margin:0}
#brief-form .type-pills>button{display:flex;align-items:center;justify-content:center;min-height:50px;padding:12px 8px;border:1px solid #d1d5c9;border-radius:14px;font-size:13px;font-weight:500;line-height:1.5;white-space:normal;text-align:center;color:#171914;background:transparent;transition:background-color .18s,border-color .18s}
#brief-form .type-pills>button.active{background:var(--lime);border-color:var(--lime)}
@media(hover:hover){#brief-form .type-pills>button:hover:not(.active){background:#eef1e6;border-color:#929d7b}}
#brief-form label{display:grid;align-content:start;gap:10px;min-width:0;margin:0;font-size:14px;line-height:1.5}
#brief-form label>span{display:block;margin:0;min-height:21px;font-weight:500}
#brief-form input:not([type=range]),#brief-form select,#brief-form textarea{box-sizing:border-box;width:100%;min-width:0;margin:0;padding:15px 17px;border:1px solid #d1d5c9;border-radius:8px;background:transparent;color:#171914;font-family:inherit;font-size:16px;line-height:1.6}
#brief-form input:not([type=range]),#brief-form select{height:56px}
#brief-form select{padding-inline-end:38px;text-overflow:ellipsis}
#brief-form input::placeholder,#brief-form textarea::placeholder{color:#7b7e75;opacity:1}
#brief-form .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
#brief-form .project-row>label{align-content:stretch;grid-template-rows:auto 1fr}
#brief-form .project-row textarea{height:100%;min-height:230px;resize:vertical}
#brief-form .budget-control{box-sizing:border-box;display:grid;grid-template-rows:auto 44px auto 1fr;align-content:start;gap:12px;min-height:230px;height:100%;padding:20px;border:1px solid #d1d5c9;border-radius:8px}
#brief-form .budget-control output{margin:0;font-size:28px;line-height:1.25;font-weight:600}
#brief-form .budget-limits{font-size:12px;line-height:1.5}
#brief-form .budget-estimate{align-self:end;margin:0;font-size:11px;line-height:1.65;color:#626a55}
#brief-form .submit{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:15px 22px;width:100%;box-sizing:border-box;font-size:14px;transform:none!important}
#brief-form .form-note{font-size:12px;line-height:1.65;color:#626a55;margin-top:-12px}
#brief-form :is(input,select,textarea,button):focus-visible{outline:2px solid #789c2d;outline-offset:3px}
html[lang=ar] #brief-form legend,html[lang=ar] #brief-form label{font-size:16px}
html[lang=ar] #brief-form .type-pills>button{font-size:15px}
html[lang=ar] #brief-form :is(input:not([type=range]),select,textarea){font-size:17px}
html[lang=ar] #brief-form .budget-control output{font-size:28px}
html[lang=ar] #brief-form .budget-estimate,html[lang=ar] #brief-form .form-note{font-size:13px}
html[lang=ar] #brief-form .submit{font-size:16px}
@media(max-width:600px){
 #brief-form{gap:22px}
 #brief-form .type-pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #brief-form .type-pills>button{min-height:48px;padding:10px 9px}
 #brief-form .form-row{grid-template-columns:1fr;gap:22px}
 #brief-form .project-row textarea{min-height:190px}
 #brief-form .budget-control{min-height:200px;height:auto;gap:10px;padding:18px}
 #brief-form .form-note{margin-top:-10px}
}
@media(prefers-reduced-motion:reduce){#brief-form .type-pills>button{transition:none}}