body.smouha-home-design #sm-phase1 .sh-search {
padding: 24px !important;
background: var(--smouha-ivory) !important;
border: 1px solid var(--smouha-line) !important;
border-radius: 18px !important;
box-shadow: 0 10px 30px rgba(48, 51, 46, 0.06);
}
.sm-lead-heading { margin-bottom: 6px; }
.sm-lead-heading h2 {
margin: 0;
color: var(--smouha-charcoal) !important;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.35;
}
.sm-lead-description {
color: var(--smouha-muted) !important;
margin: 0 0 18px !important;
line-height: 1.8;
}
.sm-lead-form { margin: 0; }
.sm-lead-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.sm-lead-grid label {
display: grid;
gap: 7px;
min-width: 0;
}
.sm-lead-grid label > span {
color: var(--smouha-muted);
font-size: 13px;
font-weight: 700;
line-height: 1.6;
}
.sm-lead-grid input,
.sm-lead-grid select {
width: 100%;
min-width: 0;
min-height: 52px;
padding: 10px 12px;
border: 1px solid var(--smouha-field-line);
border-radius: 12px;
background: var(--smouha-ivory);
color: var(--smouha-charcoal);
font: inherit;
box-shadow: none;
outline: none;
}
.sm-lead-grid input:focus,
.sm-lead-grid select:focus {
border-color: var(--smouha-petrol);
box-shadow: 0 0 0 3px var(--smouha-focus);
}
.sm-lead-grid input::placeholder {
color: #626562;
opacity: 1;
}
.sm-lead-submit {
width: 100%;
min-height: 54px;
margin-top: 16px;
padding: 12px 18px;
border: 1px solid var(--smouha-petrol) !important;
border-radius: 12px !important;
background: var(--smouha-petrol) !important;
color: var(--smouha-ivory) !important;
font: inherit;
font-weight: 800;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.sm-lead-submit:hover {
background: var(--smouha-petrol-hover) !important;
border-color: var(--smouha-petrol-hover) !important;
}
.sm-lead-submit:active {
background: var(--smouha-petrol-pressed) !important;
transform: translateY(1px);
}
.sm-lead-submit:disabled {
opacity: .62;
cursor: wait;
}
.sm-lead-status {
min-height: 1.6em;
margin: 10px 0 0;
color: var(--smouha-petrol-hover);
font-size: 13px;
line-height: 1.7;
}
.sm-transport-form {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.smouha-home-design #sm-phase1 .p1-contact-block {
background: var(--smouha-sand) !important;
color: var(--smouha-charcoal) !important;
}
body.smouha-home-design #sm-phase1 .p1-contact-copy,
body.smouha-home-design #sm-phase1 .p1-contact-copy h2,
body.smouha-home-design #sm-phase1 .p1-contact-copy .p1-contact-intro,
body.smouha-home-design #sm-phase1 .p1-contact-points li,
body.smouha-home-design #sm-phase1 .p1-contact-copy .p1-contact-notice {
color: var(--smouha-charcoal) !important;
}
body.smouha-home-design #sm-phase1 .p1-contact-points li > span {
background: var(--smouha-ivory) !important;
color: var(--smouha-petrol) !important;
}
body.smouha-home-design #sm-phase1 .p1-phone-card.p1-phone-inline {
background: var(--smouha-ivory) !important;
border-color: #626562 !important;
color: var(--smouha-charcoal) !important;
}
body.smouha-home-design #sm-phase1 .p1-phone-card.p1-phone-inline > span,
body.smouha-home-design #sm-phase1 .p1-phone-card.p1-phone-inline > bdi {
color: var(--smouha-charcoal) !important;
}
body.smouha-home-design #sm-phase1 .p1-form-area {
position: relative;
display: block !important;
padding: 24px !important;
background: var(--smouha-ivory) !important;
border: 1px solid var(--smouha-line) !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(48, 51, 46, 0.06);
}
.sm-lower-form .sm-lead-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-lead-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px 16px !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-lead-submit {
width: min(100%, 360px) !important;
margin: 18px auto 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
}
@media (max-width: 900px) {
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-lead-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 640px) {
body.smouha-home-design #sm-phase1 .smd-hero-frame .sh-search {
padding: 16px 12px !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-lead-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-lead-submit {
width: 100% !important;
}
}
body.smouha-home-design #sm-phase1 .sh-search,
body.smouha-home-design #sm-phase1 .p1-form-area {
box-shadow: 0 8px 26px rgba(74,74,74,.045) !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-grid label {
gap: 6px !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-grid label > span {
color: #626562 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-grid input,
body.smouha-home-design #sm-phase1 .sm-lead-grid select {
min-height: 54px !important;
padding: 11px 13px !important;
border: 1px solid #C9C8C1 !important;
border-radius: 11px !important;
background-color: #FFFDF8 !important;
color: #252729 !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.5 !important;
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
body.smouha-home-design #sm-phase1 .sm-lead-grid select {
appearance: none;
-webkit-appearance: none;
padding-inline-end: 38px !important;
background-image:
linear-gradient(45deg, transparent 50%, #626562 50%),
linear-gradient(135deg, #626562 50%, transparent 50%);
background-position:
calc(100% - 19px) 50%,
calc(100% - 14px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
html[dir="rtl"] body.smouha-home-design #sm-phase1 .sm-lead-grid select {
padding-inline-start: 38px !important;
padding-inline-end: 13px !important;
background-position:
19px 50%,
14px 50%;
}
body.smouha-home-design #sm-phase1 .sm-lead-grid input:hover,
body.smouha-home-design #sm-phase1 .sm-lead-grid select:hover {
border-color: #C9C8C1 !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-grid input:focus,
body.smouha-home-design #sm-phase1 .sm-lead-grid select:focus {
border-color: #CDBB94 !important;
box-shadow: 0 0 0 3px rgba(196,163,75,.20) !important;
background-color: #FFFFFF !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-submit {
min-height: 54px !important;
border-radius: 11px !important;
font-size: 15px !important;
font-weight: 700 !important;
box-shadow: none !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-submit.is-loading {
position: relative;
color: transparent !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-submit.is-loading::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border: 2px solid rgba(255,255,255,.42);
border-top-color: #fff;
border-radius: 50%;
animation: smouha-spin .7s linear infinite;
}
@keyframes smouha-spin {
to { transform: rotate(360deg); }
}
body.smouha-home-design #sm-phase1 .sm-lead-status {
min-height: 20px !important;
margin-top: 9px !important;
font-size: 13px !important;
font-weight: 500 !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-status[data-state="success"] {
color: #252729 !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-status[data-state="error"] {
color: #8C3D35 !important;
}
body.smouha-home-design #sm-phase1 .p1-form-area .sm-lead-heading h2 {
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.5 !important;
}
body.smouha-home-design #sm-phase1 .p1-form-area .sm-lead-description {
max-width: 52ch;
color: #626562 !important;
font-size: 14px !important;
line-height: 1.8 !important;
}
body.smouha-home-design #sm-phase1 .p1-form-area .sm-lower-form .sm-lead-submit {
margin-top: 15px !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sh-search {
border-radius: 18px !important;
}
body.smouha-home-design #sm-phase1 .sm-stepper-form {
display: block;
}
body.smouha-home-design #sm-phase1 .sm-stepper-head {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 8px;
margin: 0 0 22px;
padding: 0 0 16px;
border-bottom: 1px solid #DEDDD7;
}
body.smouha-home-design #sm-phase1 .sm-step-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 0;
color: #626562;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
body.smouha-home-design #sm-phase1 .sm-step-item b {
width: 24px;
height: 24px;
flex: 0 0 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #DEDDD7;
color: #626562;
font-size: 11px;
font-weight: 800;
}
body.smouha-home-design #sm-phase1 .sm-step-item.is-active,
body.smouha-home-design #sm-phase1 .sm-step-item.is-current {
color: #252729;
}
body.smouha-home-design #sm-phase1 .sm-step-item.is-active b,
body.smouha-home-design #sm-phase1 .sm-step-item.is-current b {
background: #252729;
color: #FFFDF8;
}
body.smouha-home-design #sm-phase1 .sm-step-panel[hidden] {
display: none !important;
}
body.smouha-home-design #sm-phase1 .sm-step-panel.is-active {
display: block;
}
body.smouha-home-design #sm-phase1 .sm-step-single {
grid-template-columns: minmax(0,1fr) !important;
}
body.smouha-home-design #sm-phase1 .sm-step-contact-grid {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
body.smouha-home-design #sm-phase1 .sm-step-contact-grid label:last-child {
grid-column: 1 / -1;
}
body.smouha-home-design #sm-phase1 .sm-step-next,
body.smouha-home-design #sm-phase1 .sm-step-back {
min-height: 52px;
margin-top: 16px;
padding: 0 18px;
border-radius: 11px;
font-family: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
body.smouha-home-design #sm-phase1 .sm-step-next {
width: 100%;
border: 1px solid #252729;
background: #252729;
color: #FFFDF8;
}
body.smouha-home-design #sm-phase1 .sm-step-actions {
display: grid;
grid-template-columns: minmax(110px,.35fr) minmax(0,1fr);
gap: 10px;
align-items: end;
}
body.smouha-home-design #sm-phase1 .sm-step-actions .sm-step-back {
width: 100%;
border: 1px solid #C9C8C1;
background: transparent;
color: #626562;
}
body.smouha-home-design #sm-phase1 .sm-step-actions .sm-lead-submit {
width: 100% !important;
margin: 16px 0 0 !important;
}
body.smouha-home-design #sm-phase1 .sm-hero-seo-links a:hover {
color: #8E7A59;
}
@media (max-width: 767px) {
body.smouha-home-design #sm-phase1 .sm-stepper-head {
gap: 4px;
margin-bottom: 18px;
}
body.smouha-home-design #sm-phase1 .sm-step-item {
flex-direction: column;
gap: 5px;
font-size: 10px;
}
body.smouha-home-design #sm-phase1 .sm-step-item b {
width: 22px;
height: 22px;
flex-basis: 22px;
}
body.smouha-home-design #sm-phase1 .sm-step-contact-grid {
grid-template-columns: minmax(0,1fr) !important;
}
body.smouha-home-design #sm-phase1 .sm-step-contact-grid label:last-child {
grid-column: auto;
}
body.smouha-home-design #sm-phase1 .sm-step-actions {
grid-template-columns: 1fr;
}
body.smouha-home-design #sm-phase1 .sm-step-actions .sm-step-back,
body.smouha-home-design #sm-phase1 .sm-step-actions .sm-lead-submit {
margin-top: 10px !important;
}
}
body.smouha-home-design #sm-phase1 .sm-stepper-head {
margin-bottom: 18px !important;
padding-bottom: 14px !important;
}
body.smouha-home-design #sm-phase1 .sm-step-panel {
min-height: 0 !important;
}
body.smouha-home-design #sm-phase1 .sm-step-next {
margin-top: 18px !important;
}
@media (max-width: 900px) {
body.smouha-home-design #sm-phase1 .sm-qualification-grid {
grid-template-columns: minmax(0,1fr) !important;
}
}
body.smouha-home-design #sm-phase1 .sm-email-submit .sm-email-icon {
border-width: 1.5px !important;
font-weight: 700 !important;
}
@media (max-width: 767px) {
body.smouha-home-design #sm-phase1 .smd-hero-frame .sh-search {
padding: 14px 10px !important;
border-radius: 16px !important;
}
body.smouha-home-design #sm-phase1 .sm-stepper-head {
padding-inline: 2px !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-grid {
gap: 12px !important;
}
body.smouha-home-design #sm-phase1 .sm-lead-grid input,
body.smouha-home-design #sm-phase1 .sm-lead-grid select {
padding-inline: 11px !important;
}
}
body.smouha-home-design #sm-phase1 .sm-email-submit {
position: relative;
min-height: 60px !important;
padding: 0 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
border-radius: 14px !important;
}
body.smouha-home-design #sm-phase1 .sm-email-submit .sm-email-icon {
width: 42px !important;
height: 42px !important;
flex: 0 0 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1.5px solid rgba(255,255,255,.42) !important;
border-radius: 50% !important;
background: rgba(255,255,255,.04) !important;
color: #fff !important;
font-size: 21px !important;
line-height: 1 !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
body.smouha-home-design #sm-phase1 .sm-email-submit > span:last-child {
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1.4 !important;
}
@media (max-width: 767px) {
body.smouha-home-design #sm-phase1 .sm-email-submit {
min-height: 58px !important;
gap: 12px !important;
}
body.smouha-home-design #sm-phase1 .sm-email-submit .sm-email-icon {
width: 38px !important;
height: 38px !important;
flex-basis: 38px !important;
font-size: 19px !important;
}
}
@media (max-width: 767px) {
body.smouha-home-design #sm-phase1 .p1-form-area .sm-lower-form,
body.smouha-home-design #sm-phase1 .p1-form-area .sm-lead-grid,
body.smouha-home-design #sm-phase1 .p1-form-area .sm-lead-grid label,
body.smouha-home-design #sm-phase1 .p1-form-area .sm-lead-grid input,
body.smouha-home-design #sm-phase1 .p1-form-area .sm-lead-grid select,
body.smouha-home-design #sm-phase1 .p1-form-area .sm-email-submit {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
}
}
body.smouha-home-design #sm-phase1 .sm-qualification-grid {
grid-template-columns: minmax(0,1fr) !important;
gap: 16px !important;
}
body.smouha-home-design #sm-phase1 .sm-choice-field {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
body.smouha-home-design #sm-phase1 .sm-choice-field legend {
margin: 0 0 8px;
padding: 0;
color: #626562;
font-size: 13px;
font-weight: 700;
line-height: 1.6;
}
body.smouha-home-design #sm-phase1 .sm-choice-grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 8px;
}
body.smouha-home-design #sm-phase1 .sm-choice-field[data-choice-name="rooms"] .sm-choice-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
body.smouha-home-design #sm-phase1 .sm-choice-chip {
position: relative;
display: block;
min-width: 0;
cursor: pointer;
}
body.smouha-home-design #sm-phase1 .sm-choice-chip input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.smouha-home-design #sm-phase1 .sm-choice-chip span {
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
border: 1px solid #C9C8C1;
border-radius: 10px;
background: #FFFDF8;
color: #626562;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
text-align: center;
transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
body.smouha-home-design #sm-phase1 .sm-choice-chip input:checked + span {
border-color: #252729;
background: #252729;
color: #FFFDF8;
}
body.smouha-home-design #sm-phase1 .sm-choice-chip:active span {
transform: translateY(1px);
}
@media (max-width: 767px) {
body.smouha-home-design #sm-phase1 .sm-choice-grid {
gap: 7px;
}
body.smouha-home-design #sm-phase1 .sm-choice-chip span {
min-height: 44px;
padding: 7px 6px;
font-size: 12px;
}
}
@media (min-width: 901px) {
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-lead-grid.sm-qualification-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px 20px !important;
align-items: start !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-qualification-grid > label,
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-qualification-grid > fieldset {
min-width: 0 !important;
width: 100% !important;
max-width: none !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-choice-chip span {
padding: 8px 10px !important;
}
}
@media (min-width: 901px) {
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-qualification-grid {
display: grid !important;
grid-template-columns: minmax(240px, .82fr) minmax(420px, 1.18fr) !important;
grid-template-areas:
"type budget"
"rooms area" !important;
gap: 18px 22px !important;
align-items: start !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-qualification-grid > label:first-child {
grid-area: type !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-choice-field[data-choice-name="budget"] {
grid-area: budget !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-choice-field[data-choice-name="area"] {
grid-area: area !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-choice-field[data-choice-name="rooms"] {
grid-area: rooms !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-choice-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-choice-field[data-choice-name="rooms"] .sm-choice-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-choice-chip,
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-choice-chip span {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
body.smouha-home-design #sm-phase1 .smd-hero-frame .sm-hero-form .sm-choice-chip span {
min-height: 52px !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
font-size: 14px !important;
}
}