/* =========================================================
SCHEDULE CALL
========================================================= */



html {
scroll-behavior: smooth;
}

body {
font-family: "Plus Jakarta Sans", sans-serif;

background: #fff;

color: #111;

overflow-x: hidden;


}

button,
input,
select,
textarea {
font-family: inherit;
}

/* =========================================================
HERO
========================================================= */

.call-hero {

min-height: 470px;

display: flex;

align-items: center;
justify-content: center;

text-align: center;

padding: 100px 25px 80px;

background:
    linear-gradient(
        135deg,
        #f5f6f7 0%,
        #ffffff 55%,
        #eef1f3 100%
    );


}

.call-hero-content {

max-width: 760px;


}

.call-label,
.section-label {

display: block;

margin-bottom: 14px;

color: #777;

font-size: 10px;

font-weight: 800;

letter-spacing: .18em;


}

.call-hero h1 {

margin-bottom: 22px;

font-size: 64px;

font-weight: 500;

letter-spacing: -2.5px;

line-height: 1.05;


}

.call-hero p {

max-width: 620px;

margin: 0 auto;

color: #666;

font-size: 17px;

line-height: 1.8;


}

/* =========================================================
INTRO
========================================================= */

.call-intro,
.form-section,
.message-section {

width: 1100px;

max-width: calc(100% - 48px);

margin: 0 auto;

padding: 100px 0;


}

.call-intro {

border-bottom: 1px solid #e8e8e8;


}

.call-intro-inner,
.form-section-heading {

display: flex;

gap: 28px;

align-items: flex-start;

margin-bottom: 48px;


}

.intro-number {

flex-shrink: 0;

color: #aaa;

font-size: 12px;

font-weight: 700;

letter-spacing: .1em;


}

.call-intro h2,
.form-section h2,
.message-section h2 {

margin-bottom: 12px;

font-size: 32px;

font-weight: 600;

letter-spacing: -1.2px;

line-height: 1.2;


}

.call-intro p,
.form-section-heading p {

color: #777;

font-size: 14px;

line-height: 1.7;


}

/* =========================================================
JOURNEY OPTIONS
========================================================= */

.journey-options {

display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 10px;


}

.journey-option {

min-height: 62px;

padding: 15px 20px;

text-align: left;

background: #f5f5f5;

border: 1px solid #e3e3e3;

border-radius: 6px;

color: #222;

font-size: 13px;

font-weight: 600;

cursor: pointer;

transition: .2s ease;


}

.journey-option:hover {

background: #fff;

border-color: #111;


}

.journey-option.selected {

background: #111;

border-color: #111;

color: #fff;


}

/* =========================================================
FORM
========================================================= */

.form-section {

border-bottom: 1px solid #e8e8e8;


}

.form-grid {

display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 30px 20px;


}

.form-field {

display: flex;

flex-direction: column;

gap: 9px;


}

.form-field.full {

grid-column: 1 / -1;


}

.form-field label,
.contact-preference > label {

color: #444;

font-size: 11px;

font-weight: 700;


}

.form-field input,
.form-field select {

width: 100%;

height: 52px;

padding: 0 15px;

background: #fafafa;

border: 1px solid #dedede;

border-radius: 5px;

outline: none;

color: #222;

font-size: 13px;

transition: .2s ease;


}

.form-field input:focus,
.form-field select:focus {

background: #fff;

border-color: #111;


}

/* =========================================================
CONTACT PREFERENCE
========================================================= */

.contact-preference {

margin-top: 42px;


}

.preference-options {

display: flex;

gap: 9px;

margin-top: 12px;


}

.preference-options button {

padding: 11px 18px;

background: #fff;

border: 1px solid #dcdcdc;

border-radius: 5px;

color: #333;

font-size: 11px;

font-weight: 600;

cursor: pointer;

transition: .2s ease;


}

.preference-options button:hover {

border-color: #111;


}

.preference-options button.selected {

background: #111;

color: #fff;

border-color: #111;


}

/* =========================================================
MESSAGE
========================================================= */

.message-section {

padding-bottom: 120px;


}

.message-section textarea {

width: 100%;

min-height: 180px;

resize: vertical;

padding: 17px;

background: #fafafa;

border: 1px solid #dedede;

border-radius: 6px;

outline: none;

color: #222;

font-size: 13px;

line-height: 1.6;


}

.message-section textarea:focus {

background: #fff;

border-color: #111;


}

/* =========================================================
SUBMIT
========================================================= */

.submit-area {

display: flex;

align-items: center;

justify-content: space-between;

gap: 40px;

margin-top: 28px;


}

.submit-area p {

max-width: 520px;

color: #888;

font-size: 11px;

line-height: 1.6;


}

.submit-button {

flex-shrink: 0;

padding: 14px 25px;

background: #111;

border: 1px solid #111;

border-radius: 5px;

color: #fff;

font-size: 12px;

font-weight: 700;

cursor: pointer;

transition: .2s ease;


}

.submit-button:hover {

background: #333;

transform: translateY(-1px);


}

/* =========================================================
FOOTER
========================================================= */

.call-footer {

display: flex;

justify-content: space-between;

align-items: center;

padding: 30px 5%;

background: #000;

color: #888;

font-size: 11px;


}

.call-footer a {

color: #aaa;

text-decoration: none;

transition: .2s ease;


}

.call-footer a:hover {

color: #fff;


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

.call-hero {

    min-height: 390px;

    padding: 80px 22px 60px;
}


.call-hero h1 {

    font-size: 42px;

    letter-spacing: -1.5px;
}


.call-hero p {

    font-size: 14px;
}


.call-intro,
.form-section,
.message-section {

    max-width: calc(100% - 36px);

    padding: 70px 0;
}


.call-intro-inner,
.form-section-heading {

    gap: 16px;

    margin-bottom: 35px;
}


.call-intro h2,
.form-section h2,
.message-section h2 {

    font-size: 25px;
}


.journey-options {

    grid-template-columns: 1fr 1fr;

    gap: 8px;
}


.journey-option {

    min-height: 58px;

    padding: 12px;

    font-size: 11px;
}


.form-grid {

    grid-template-columns: 1fr;

    gap: 22px;
}


.form-field.full {

    grid-column: auto;
}


.preference-options {

    flex-wrap: wrap;
}


.submit-area {

    flex-direction: column;

    align-items: stretch;

    gap: 20px;
}


.submit-button {

    width: 100%;

    padding: 15px;
}


.call-footer {

    flex-direction: column;

    gap: 12px;

    text-align: center;
}


}
.callback-status {
    margin-top: 18px;
    color: #596f4d;
    font-size: 12px;
    line-height: 1.8;
}