/* =========================================================
   CONSULTATION PAGE
   TMB-URIST.RU
   PREMIUM / RESPONSIVE
========================================================= */


/* =========================================================
   01. VARIABLES
========================================================= */

:root {
    --consult-blue: #2563eb;
    --consult-blue-dark: #1d4ed8;
    --consult-blue-light: #3b82f6;

    --consult-black: #0f172a;
    --consult-heading: #111827;
    --consult-text: #1e293b;

    --consult-muted: #64748b;
    --consult-light: #94a3b8;

    --consult-white: #ffffff;

    --consult-bg: #f8fafc;
    --consult-bg-soft: #f1f5f9;

    --consult-border: #e2e8f0;
    --consult-border-light: #edf2f7;

    --consult-green: #16a34a;

    --consult-container: 1280px;

    --consult-radius: 22px;
    --consult-radius-small: 14px;

    --consult-shadow:
        0 18px 55px rgba(15, 23, 42, .07);

    --consult-shadow-hover:
        0 28px 75px rgba(15, 23, 42, .12);

    --consult-transition:
        .28s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   02. PAGE
========================================================= */

.consultation-page {
    width: 100%;
    color: var(--consult-text);
}

.consultation-page,
.consultation-page * {
    box-sizing: border-box;
}

.consultation-page a {
    -webkit-tap-highlight-color: transparent;
}

.consultation-page button,
.consultation-page input,
.consultation-page textarea {
    font-family: inherit;
}


/* =========================================================
   03. CONTAINER
========================================================= */

.consultation-page .container {
    width: min(
        calc(100% - 50px),
        var(--consult-container)
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   04. OVERLINE
========================================================= */

.consultation-overline {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--consult-blue);

    font-size: 11px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}

.consultation-overline::before {
    content: "";

    width: 25px;
    height: 2px;

    flex: 0 0 auto;

    border-radius: 999px;

    background: var(--consult-blue);
}


/* =========================================================
   05. HERO
========================================================= */

.consultation-hero {
    position: relative;

    min-height: 570px;

    display: flex;

    align-items: center;

    padding: 105px 0 90px;

    background:
        radial-gradient(
            circle at 18% 35%,
            rgba(37, 99, 235, .075),
            transparent 34%
        ),
        radial-gradient(
            circle at 83% 20%,
            rgba(37, 99, 235, .055),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    isolation: isolate;

    overflow: hidden;
}


/* =========================================================
   06. HERO GRID
========================================================= */

.consultation-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    opacity: .55;

    background-image:
        linear-gradient(
            rgba(15, 23, 42, .022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15, 23, 42, .022) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            transparent 100%
        );

    pointer-events: none;
}


/* =========================================================
   07. HERO LIGHT
========================================================= */

.consultation-hero::after {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -55%);

    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .08),
            rgba(37, 99, 235, .035) 38%,
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   08. HERO INNER
========================================================= */

.consultation-hero-inner {
    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   09. HERO BADGE
========================================================= */

.consultation-hero-badge {
    display: inline-flex;

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

    min-height: 32px;

    padding: 8px 15px;

    margin-bottom: 28px;

    border:
        1px solid
        rgba(37, 99, 235, .16);

    border-radius: 999px;

    background:
        rgba(37, 99, 235, .055);

    color: var(--consult-blue);

    font-size: 10px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.7px;
}


/* =========================================================
   10. HERO TITLE
========================================================= */

.consultation-title-hero {
    max-width: 1000px;

    margin: 0 auto;

    color: var(--consult-black);

    font-size:
        clamp(
            46px,
            6vw,
            78px
        );

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -3.4px;
}

.consultation-title-hero span {
    display: block;

    color: var(--consult-blue);
}


/* =========================================================
   11. HERO LINE
========================================================= */

.consultation-title-hero::after {
    content: "";

    display: block;

    width: 68px;
    height: 3px;

    margin: 26px auto 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--consult-blue),
            var(--consult-blue-light)
        );
}


/* =========================================================
   12. HERO SUBTITLE
========================================================= */

.consultation-subtitle {
    max-width: 760px;

    margin: 30px auto 0;

    color: var(--consult-muted);

    font-size:
        clamp(
            16px,
            1.5vw,
            19px
        );

    line-height: 1.7;

    font-weight: 450;
}


/* =========================================================
   13. INTRO
========================================================= */

.consultation-intro {
    padding: 100px 0;

    background: #ffffff;

    border-bottom:
        1px solid
        var(--consult-border-light);
}


/* =========================================================
   14. INTRO GRID
========================================================= */

.consultation-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1fr);

    gap: 100px;

    align-items: center;
}


/* =========================================================
   15. INTRO TITLE
========================================================= */

.consultation-intro-heading h2 {
    max-width: 590px;

    margin: 18px 0 0;

    color: var(--consult-heading);

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;
}

.consultation-intro-heading h2 span {
    display: block;

    color: var(--consult-blue);
}


/* =========================================================
   16. INTRO TEXT
========================================================= */

.consultation-intro-text {
    max-width: 620px;
}

.consultation-intro-text p {
    margin: 0 0 19px;

    color: var(--consult-muted);

    font-size: 16px;

    line-height: 1.8;
}

.consultation-intro-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   17. PROCESS
========================================================= */

.consultation-process {
    padding: 110px 0;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f5f7fa
        );
}


/* =========================================================
   18. PROCESS HEADING
========================================================= */

.consultation-section-heading {
    max-width: 720px;

    margin: 0 auto 58px;

    text-align: center;
}

.consultation-section-heading h2 {
    margin: 17px 0 14px;

    color: var(--consult-heading);

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;
}

.consultation-section-heading p {
    margin: 0;

    color: var(--consult-muted);

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   19. PROCESS GRID
========================================================= */

.process-grid {
    display: grid;

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

    gap: 20px;
}


/* =========================================================
   20. PROCESS CARD
========================================================= */

.process-card {
    position: relative;

    min-height: 300px;

    padding: 32px;

    border:
        1px solid
        var(--consult-border);

    border-radius:
        var(--consult-radius);

    background: #ffffff;

    box-shadow:
        0 10px 40px
        rgba(15, 23, 42, .045);

    transition:
        transform var(--consult-transition),
        box-shadow var(--consult-transition),
        border-color var(--consult-transition);
}

.process-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(37, 99, 235, .25);

    box-shadow:
        var(--consult-shadow-hover);
}


/* =========================================================
   21. PROCESS TOP
========================================================= */

.process-top {
    display: flex;

    align-items: center;

    width: 100%;

    margin-bottom: 55px;
}


/* =========================================================
   22. PROCESS NUMBER
========================================================= */

.process-number {
    display: flex;

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

    flex: 0 0 auto;

    width: 54px;
    height: 54px;

    border:
        1px solid
        rgba(37, 99, 235, .18);

    border-radius: 15px;

    background:
        rgba(37, 99, 235, .07);

    color: var(--consult-blue);

    font-size: 13px;

    font-weight: 850;
}


/* =========================================================
   23. PROCESS LINE
========================================================= */

.process-line {
    display: block;

    flex: 1;

    height: 1px;

    margin-left: 18px;

    background:
        var(--consult-border);
}


/* =========================================================
   24. PROCESS TITLE
========================================================= */

.process-card h3 {
    max-width: 330px;

    margin: 0 0 14px;

    color: var(--consult-heading);

    font-size: 21px;

    line-height: 1.3;

    font-weight: 750;

    letter-spacing: -.5px;
}


/* =========================================================
   25. PROCESS TEXT
========================================================= */

.process-card p {
    max-width: 350px;

    margin: 0;

    color: var(--consult-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   26. RESULT
========================================================= */

.consultation-result {
    padding: 105px 0;

    background: #ffffff;
}


/* =========================================================
   27. RESULT BOX
========================================================= */

.result-box {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1fr);

    gap: 70px;

    align-items: center;

    padding:
        clamp(
            35px,
            5vw,
            70px
        );

    border:
        1px solid
        var(--consult-border);

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );

    box-shadow:
        var(--consult-shadow);
}


/* =========================================================
   28. RESULT CONTENT
========================================================= */

.result-content h2 {
    margin: 18px 0 18px;

    color: var(--consult-heading);

    font-size:
        clamp(
            32px,
            3.5vw,
            48px
        );

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.8px;
}

.result-content p {
    max-width: 520px;

    margin: 0;

    color: var(--consult-muted);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   29. RESULT LIST
========================================================= */

.result-list {
    display: grid;

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

    gap: 14px;
}


/* =========================================================
   30. RESULT ITEM
========================================================= */

.result-item {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    min-width: 0;

    padding: 18px;

    border:
        1px solid
        var(--consult-border-light);

    border-radius: 14px;

    background: #ffffff;

    transition:
        border-color var(--consult-transition),
        transform var(--consult-transition),
        box-shadow var(--consult-transition);
}

.result-item:hover {
    transform: translateY(-3px);

    border-color:
        rgba(37, 99, 235, .20);

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, .06);
}


/* =========================================================
   31. RESULT CHECK
========================================================= */

.result-check {
    display: flex;

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

    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    border-radius: 10px;

    background:
        rgba(22, 163, 74, .09);

    color: var(--consult-green);

    font-size: 13px;

    font-weight: 850;
}


/* =========================================================
   32. RESULT TEXT
========================================================= */

.result-item strong {
    display: block;

    margin: 1px 0 5px;

    color: var(--consult-heading);

    font-size: 14px;

    line-height: 1.3;

    font-weight: 750;
}

.result-item div > span {
    display: block;

    color: var(--consult-muted);

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   33. FORM SECTION
========================================================= */

.consultation-form-section {
    padding: 115px 0;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f1f5f9
        );
}


/* =========================================================
   34. FORM LAYOUT
========================================================= */

.consultation-form-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(420px, .9fr);

    gap:
        clamp(
            45px,
            7vw,
            100px
        );

    align-items: center;
}


/* =========================================================
   35. FORM INFO
========================================================= */

.consultation-form-info h2 {
    max-width: 590px;

    margin: 18px 0 22px;

    color: var(--consult-heading);

    font-size:
        clamp(
            38px,
            4.5vw,
            58px
        );

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -2.4px;
}

.consultation-form-info h2 span {
    display: block;

    color: var(--consult-blue);
}

.consultation-form-info > p {
    max-width: 580px;

    margin: 0;

    color: var(--consult-muted);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   36. FORM INFO POINTS
========================================================= */

.form-info-points {
    display: flex;

    flex-direction: column;

    gap: 25px;

    margin-top: 45px;
}


/* =========================================================
   37. FORM INFO POINT
========================================================= */

.form-info-point {
    display: grid;

    grid-template-columns:
        45px minmax(0, 1fr);

    gap: 15px;

    align-items: start;
}


/* =========================================================
   38. FORM INFO NUMBER
========================================================= */

.form-info-point > span {
    display: flex;

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

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(37, 99, 235, .16);

    border-radius: 12px;

    background:
        rgba(37, 99, 235, .055);

    color: var(--consult-blue);

    font-size: 11px;

    font-weight: 850;
}


/* =========================================================
   39. FORM INFO TITLE
========================================================= */

.form-info-point strong {
    display: block;

    margin: 2px 0 6px;

    color: var(--consult-heading);

    font-size: 14px;

    line-height: 1.35;

    font-weight: 750;
}


/* =========================================================
   40. FORM INFO TEXT
========================================================= */

.form-info-point p {
    margin: 0;

    color: var(--consult-muted);

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   41. FORM WRAPPER
========================================================= */

.consultation-form-wrapper {
    width: 100%;
}

/* =========================================================
   42. FORM
========================================================= */

.consultation-form {
    position: relative;

    width: 100%;

    padding:
        clamp(
            28px,
            4vw,
            43px
        );

    border:
        1px solid
        var(--consult-border);

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 25px 80px
        rgba(15, 23, 42, .10);
}


/* =========================================================
   43. FORM TOP ACCENT
========================================================= */

.consultation-form::before {
    content: "";

    position: absolute;

    top: 0;
    left: 42px;

    width: 65px;
    height: 3px;

    border-radius:
        0 0 6px 6px;

    background:
        linear-gradient(
            90deg,
            var(--consult-blue),
            var(--consult-blue-light)
        );
}


/* =========================================================
   44. FORM HEADER
========================================================= */

.form-header {
    margin-bottom: 31px;
}

.form-header > span {
    display: block;

    margin-bottom: 10px;

    color: var(--consult-blue);

    font-size: 10px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.4px;
}

.form-header h3 {
    margin: 0 0 10px;

    color: var(--consult-heading);

    font-size: 28px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.8px;
}

.form-header p {
    margin: 0;

    color: var(--consult-muted);

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   45. FORM FIELD
========================================================= */

.form-field {
    margin-bottom: 19px;
}

.form-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--consult-text);

    font-size: 11px;

    line-height: 1.2;

    font-weight: 750;
}


/* =========================================================
   46. INPUTS / SELECT / TEXTAREA
========================================================= */

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
    display: block;

    width: 100%;

    border:
        1px solid
        var(--consult-border);

    border-radius: 12px;

    background: #ffffff;

    color: var(--consult-text);

    outline: none;

    font-family: inherit;

    font-size: 13px;

    line-height: 1.5;

    transition:
        border-color var(--consult-transition),
        box-shadow var(--consult-transition),
        background var(--consult-transition);
}


/* =========================================================
   46.1 INPUT / SELECT
========================================================= */

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select {
    height: 50px;

    padding: 0 15px;
}


/* =========================================================
   46.2 SELECT
========================================================= */

.form-field select {
    appearance: none;
    -webkit-appearance: none;

    padding-right: 42px;

    cursor: pointer;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #7b8798 50%
        ),
        linear-gradient(
            135deg,
            #7b8798 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 20px) 21px,
        calc(100% - 14px) 21px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;
}


/* =========================================================
   46.3 SELECT OPTION
========================================================= */

.form-field select option {
    color: var(--consult-text);

    background: #ffffff;
}

.form-field select option[value=""] {
    color: #a1adbd;
}


/* =========================================================
   46.4 TEXTAREA
========================================================= */

.form-field textarea {
    min-height: 145px;

    padding: 14px 15px;

    resize: vertical;
}


/* =========================================================
   46.5 PHONE
========================================================= */

.form-field input[type="tel"] {
    letter-spacing: .1px;
}


/* =========================================================
   46.6 MESSENGER CONTACT
========================================================= */

#messengerContactField {
    width: 100%;

    transition:
        opacity .2s ease,
        transform .2s ease,
        margin .2s ease;
}

#messengerContactField.hidden {
    display: none;
}


/* =========================================================
   47. INPUT FOCUS
========================================================= */

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color:
        var(--consult-blue);

    box-shadow:
        0 0 0 4px
        rgba(37, 99, 235, .08);

    background: #ffffff;
}


/* =========================================================
   48. PLACEHOLDER
========================================================= */

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #a1adbd;

    opacity: 1;
}


/* =========================================================
   48.1 INVALID STATE
========================================================= */

.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) {
    border-color: #d6dde7;
    box-shadow: none;
}


/* =========================================================
   49. CONSENT
========================================================= */

.form-consent {
    display: grid;

    grid-template-columns:
        18px minmax(0, 1fr);

    gap: 10px;

    align-items: start;

    margin:
        2px 0 19px;
}

.form-consent input {
    width: 17px;
    height: 17px;

    margin: 2px 0 0;

    accent-color:
        var(--consult-blue);

    cursor: pointer;
}

.form-consent label {
    color: var(--consult-muted);

    font-size: 10px;

    line-height: 1.5;

    cursor: pointer;
}


/* =========================================================
   50. CAPTCHA
========================================================= */

.captcha-wrapper {
    display: flex;

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

    width: 100%;

    min-height: 78px;

    margin: 0 0 19px;

    overflow: hidden;
}

.recaptcha {
    max-width: 100%;
}


/* =========================================================
   51. SUBMIT BUTTON
========================================================= */

.consultation-btn {
    display: flex;

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

    gap: 15px;

    width: 100%;

    min-height: 56px;

    padding:
        0 18px 0 22px;

    border: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--consult-blue),
            var(--consult-blue-light)
        );

    color: #ffffff;

    font-size: 13px;

    line-height: 1.2;

    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 13px 32px
        rgba(37, 99, 235, .20);

    transition:
        transform var(--consult-transition),
        box-shadow var(--consult-transition);
}

.consultation-btn b {
    display: flex;

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

    width: 31px;
    height: 31px;

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .16);

    font-size: 18px;

    font-weight: 400;
}

.consultation-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 19px 42px
        rgba(37, 99, 235, .28);
}

.consultation-btn:active {
    transform: translateY(-1px);
}


/* =========================================================
   52. FORM NOTE
========================================================= */

.form-note {
    margin: 13px 0 0;

    color: var(--consult-light);

    font-size: 9px;

    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   53. MOBILE FORM
========================================================= */

@media (max-width: 600px) {

    .consultation-form {
        padding: 26px 20px 24px;

        border-radius: 20px;
    }

    .consultation-form::before {
        left: 28px;

        width: 55px;
    }

    .form-header {
        margin-bottom: 25px;
    }

    .form-header h3 {
        font-size: 24px;

        letter-spacing: -.5px;
    }

    .form-field {
        margin-bottom: 16px;
    }

    .form-field input[type="text"],
    .form-field input[type="email"],
    .form-field input[type="tel"],
    .form-field select {
        height: 52px;

        font-size: 14px;
    }

    .form-field textarea {
        min-height: 135px;

        font-size: 14px;
    }

    .consultation-btn {
        min-height: 54px;

        font-size: 13px;
    }

    .captcha-wrapper {
        min-height: 78px;

        overflow-x: auto;

        overflow-y: hidden;
    }
}


/* =========================================================
   53. HONEYPOT
========================================================= */

.consultation-form input[name="website"] {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   54. FOCUS ACCESSIBILITY
========================================================= */

.consultation-page a:focus-visible,
.consultation-page button:focus-visible,
.consultation-page input:focus-visible,
.consultation-page textarea:focus-visible {
    outline:
        3px solid
        rgba(37, 99, 235, .25);

    outline-offset: 3px;
}


/* =========================================================
   55. LARGE DESKTOP
========================================================= */

@media (min-width: 1450px) {

    .consultation-page .container {
        width:
            min(
                calc(100% - 100px),
                1380px
            );
    }

    .consultation-hero {
        min-height: 610px;
    }

    .consultation-hero-inner {
        max-width: 1120px;
    }

    .consultation-title-hero {
        font-size: 82px;
    }

    .consultation-intro {
        padding: 115px 0;
    }

    .consultation-process,
    .consultation-form-section {
        padding: 125px 0;
    }
}


/* =========================================================
   56. LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .consultation-intro-grid {
        gap: 55px;
    }

    .consultation-form-layout {
        gap: 55px;
    }

    .result-box {
        gap: 45px;
    }
}


/* =========================================================
   57. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1000px) {

    .consultation-hero {
        min-height: 500px;

        padding:
            90px 0 75px;
    }

    .consultation-intro-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .consultation-intro-heading h2 {
        max-width: 750px;
    }

    .process-grid {
        gap: 14px;
    }

    .process-card {
        padding: 25px;
    }

    .result-box {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .consultation-form-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .consultation-form-info {
        max-width: 760px;
    }

    .form-info-points {
        display: grid;

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

        gap: 20px;
    }
}


/* =========================================================
   58. TABLET
========================================================= */

@media (max-width: 820px) {

    .consultation-page .container {
        width:
            calc(100% - 36px);
    }

    .consultation-hero {
        min-height: auto;

        padding:
            80px 0 70px;
    }

    .consultation-title-hero {
        font-size:
            clamp(
                42px,
                8vw,
                62px
            );

        letter-spacing: -2.5px;
    }

    .consultation-subtitle {
        font-size: 15px;
    }

    .consultation-intro,
    .consultation-process,
    .consultation-result,
    .consultation-form-section {
        padding: 80px 0;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-card {
        min-height: auto;
    }

    .process-top {
        margin-bottom: 35px;
    }

    .result-list {
        grid-template-columns:
            1fr 1fr;
    }
}


/* =========================================================
   59. MOBILE
========================================================= */

@media (max-width: 650px) {

    .consultation-page .container {
        width:
            calc(100% - 30px);
    }

    .consultation-hero {
        padding:
            67px 0 58px;
    }

    .consultation-hero-badge {
        margin-bottom: 21px;

        font-size: 8px;

        letter-spacing: 1.2px;
    }

    .consultation-title-hero {
        font-size:
            clamp(
                36px,
                10vw,
                50px
            );

        letter-spacing: -1.8px;
    }

    .consultation-title-hero::after {
        width: 52px;

        margin-top: 19px;
    }

    .consultation-subtitle {
        margin-top: 23px;

        font-size: 13px;

        line-height: 1.65;
    }

    .consultation-intro,
    .consultation-process,
    .consultation-result,
    .consultation-form-section {
        padding: 65px 0;
    }

    .consultation-overline {
        font-size: 9px;

        letter-spacing: 1.35px;
    }

    .consultation-overline::before {
        width: 18px;
    }

    .consultation-intro-heading h2,
    .consultation-section-heading h2 {
        margin-top: 13px;

        font-size: 31px;

        letter-spacing: -1.2px;
    }

    .consultation-intro-text p {
        font-size: 14px;

        line-height: 1.7;
    }

    .consultation-section-heading {
        margin-bottom: 35px;
    }

    .consultation-section-heading p {
        font-size: 13px;
    }

    .process-card {
        padding: 22px;

        border-radius: 17px;
    }

    .process-number {
        width: 47px;
        height: 47px;

        border-radius: 13px;

        font-size: 11px;
    }

    .process-top {
        margin-bottom: 28px;
    }

    .process-card h3 {
        font-size: 18px;
    }

    .process-card p {
        font-size: 12px;
    }

    .result-box {
        padding:
            28px 22px;

        border-radius: 20px;
    }

    .result-content h2 {
        font-size: 30px;

        letter-spacing: -1.1px;
    }

    .result-content p {
        font-size: 13px;
    }

    .result-list {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .result-item {
        padding: 14px;
    }

    .result-item strong {
        font-size: 13px;
    }

    .result-item div > span {
        font-size: 10px;
    }

    .consultation-form-info h2 {
        margin-top: 13px;

        font-size: 34px;

        letter-spacing: -1.5px;
    }

    .consultation-form-info > p {
        font-size: 13px;
    }

    .form-info-points {
        grid-template-columns: 1fr;

        gap: 19px;

        margin-top: 31px;
    }

    .form-info-point {
        grid-template-columns:
            39px minmax(0, 1fr);

        gap: 12px;
    }

    .form-info-point > span {
        width: 38px;
        height: 38px;

        border-radius: 10px;

        font-size: 9px;
    }

    .form-info-point strong {
        font-size: 13px;
    }

    .form-info-point p {
        font-size: 11px;
    }

    .consultation-form {
        padding: 24px;

        border-radius: 19px;
    }

    .consultation-form::before {
        left: 24px;

        width: 48px;
    }

    .form-header {
        margin-bottom: 25px;
    }

    .form-header h3 {
        font-size: 23px;
    }

    .form-header p {
        font-size: 11px;
    }

    .form-field input[type="text"],
    .form-field input[type="email"] {
        height: 47px;

        padding: 0 13px;

        font-size: 12px;
    }

    .form-field textarea {
        min-height: 120px;

        padding: 12px 13px;

        font-size: 12px;
    }

    .consultation-btn {
        min-height: 52px;

        padding:
            0 15px 0 18px;

        font-size: 12px;
    }

    .consultation-btn b {
        width: 28px;
        height: 28px;
    }
}


/* =========================================================
   60. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .consultation-page .container {
        width:
            calc(100% - 24px);
    }

    .consultation-hero {
        padding:
            57px 0 50px;
    }

    .consultation-title-hero {
        font-size:
            clamp(
                33px,
                10.5vw,
                43px
            );

        letter-spacing: -1.5px;
    }

    .consultation-subtitle {
        font-size: 12px;
    }

    .consultation-intro,
    .consultation-process,
    .consultation-result,
    .consultation-form-section {
        padding: 55px 0;
    }

    .consultation-intro-heading h2,
    .consultation-section-heading h2 {
        font-size: 28px;

        letter-spacing: -1px;
    }

    .process-card {
        padding: 19px;
    }

    .process-number {
        width: 43px;
        height: 43px;

        border-radius: 12px;
    }

    .process-card h3 {
        font-size: 16px;
    }

    .process-card p {
        font-size: 11px;
    }

    .result-box {
        padding:
            23px 18px;

        border-radius: 18px;
    }

    .result-content h2 {
        font-size: 27px;
    }

    .consultation-form-info h2 {
        font-size: 30px;
    }

    .consultation-form {
        padding: 20px;

        border-radius: 17px;
    }

    .consultation-form::before {
        left: 20px;

        width: 42px;
    }

    .form-header h3 {
        font-size: 21px;
    }

    .form-field {
        margin-bottom: 16px;
    }

    .form-consent label {
        font-size: 9px;
    }

    .captcha-wrapper {
        min-height: 70px;
    }

    .consultation-btn {
        min-height: 49px;

        font-size: 11px;
    }

    .form-note {
        font-size: 8px;
    }
}


/* =========================================================
   61. VERY SMALL
========================================================= */

@media (max-width: 360px) {

    .consultation-page .container {
        width:
            calc(100% - 18px);
    }

    .consultation-hero {
        padding:
            50px 0 43px;
    }

    .consultation-title-hero {
        font-size: 31px;

        letter-spacing: -1.2px;
    }

    .consultation-subtitle {
        font-size: 11px;
    }

    .consultation-intro,
    .consultation-process,
    .consultation-result,
    .consultation-form-section {
        padding: 45px 0;
    }

    .consultation-intro-heading h2,
    .consultation-section-heading h2 {
        font-size: 25px;
    }

    .process-card {
        padding: 16px;
    }

    .process-number {
        width: 39px;
        height: 39px;

        font-size: 10px;
    }

    .process-card h3 {
        font-size: 14px;
    }

    .process-card p {
        font-size: 10px;
    }

    .result-box {
        padding:
            19px 15px;
    }

    .result-content h2 {
        font-size: 25px;
    }

    .consultation-form-info h2 {
        font-size: 27px;
    }

    .consultation-form {
        padding: 17px;
    }

    .consultation-form::before {
        left: 17px;

        width: 38px;
    }

    .form-header h3 {
        font-size: 19px;
    }

    .form-field input[type="text"],
    .form-field input[type="email"] {
        height: 44px;

        font-size: 11px;
    }

    .form-field textarea {
        min-height: 105px;

        font-size: 11px;
    }

    .consultation-btn {
        min-height: 47px;

        font-size: 10px;
    }
}


/* =========================================================
   62. TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .process-card:hover,
    .result-item:hover,
    .consultation-btn:hover {
        transform: none;
    }
}


/* =========================================================
   63. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .consultation-page *,
    .consultation-page *::before,
    .consultation-page *::after {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   64. DARK THEME
========================================================= */

body.dark-theme .consultation-page {

    --consult-black: #f8fafc;
    --consult-heading: #f1f5f9;
    --consult-text: #e2e8f0;
    --consult-muted: #94a3b8;
    --consult-light: #64748b;

    --consult-bg: #11161e;
    --consult-border: #2b3544;
    --consult-border-light: #273140;
}

body.dark-theme .consultation-hero {
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(37, 99, 235, .12),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #10151d,
            #11161e
        );
}

body.dark-theme .consultation-title-hero {
    color: #f8fafc;
}

body.dark-theme .consultation-subtitle {
    color: #9eacc0;
}

body.dark-theme .consultation-intro {
    background: #151a22;
}

body.dark-theme .consultation-process {
    background: #10151d;
}

body.dark-theme .process-card {
    background: #181d25;

    border-color: #2b3544;

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, .18);
}

body.dark-theme .process-line {
    background: #2b3544;
}

body.dark-theme .consultation-result {
    background: #151a22;
}

body.dark-theme .result-box {
    background:
        linear-gradient(
            135deg,
            #181d25,
            #161b23
        );

    border-color: #2b3544;
}

body.dark-theme .result-item {
    background: #1b212b;

    border-color: #303b4c;
}

body.dark-theme .consultation-form-section {
    background: #10151d;
}

body.dark-theme .consultation-form {
    background:
        linear-gradient(
            180deg,
            #181d25,
            #171c24
        );

    border-color: #2b3544;

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, .28);
}

body.dark-theme .form-field input[type="text"],
body.dark-theme .form-field input[type="email"],
body.dark-theme .form-field textarea {
    background: #1b212b;

    border-color: #303b4c;

    color: #e2e8f0;
}

body.dark-theme .form-field input:focus,
body.dark-theme .form-field textarea:focus {
    background: #202938;

    border-color: #3b82f6;
}