:root {
    --color-white: #FFF;
    --color-black: #292624;
    --color-brown: #60574E;
    --color-brown-lite: #888179;
    --color-yellow-lite: #EFE8D9;
    --color-yellow-lite-v2: #EFE8D94D;
    --color-cream-bg: #F1EFEB;
    --color-grey: #878787;
    --color-grey-lite: #F4F4F4;


    --bs-link-color: var(--color-brown);
    --bs-link-hover-color: var(--color-brown-lite);

    --font-bold-wght: 600;
    --font-normal-wght: 400;

    --border-radius: 22px;
    --border-radius-small: .5rem;
    --box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.05);
}
* {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Cantarell, Ubuntu, Roboto, Noto, arial, sans-serif;
    font-weight: 400;
}

*:focus-visible { outline: none; }
html, body {height:100%;min-height: 100%;}
body {
    font-size: 1rem;
    font-variation-settings: "wght" var(--font-normal-wght);
    line-height: 1.5;
    color: var(--color-black);
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "kern", "liga", "clig", "calt";
    font-variant-numeric: tabular-nums;
    scroll-behavior: smooth;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 1rem;
}

img {max-width: 100%;height: auto;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-variation-settings: "wght" 550; text-wrap: balance;}
.h1, h1 {font-size: 2rem;margin-bottom: 1.5rem !important;}
.h2, h2 {font-size: 1.65rem;margin: 1rem 0 !important;}
.h3, h3 { font-size: 1.55rem;margin-bottom: .75rem !important;margin-top: 1.5rem !important;}
.h4, h4 { font-size: 1.2rem; margin-bottom: .5rem/* !important*/;}

b, strong {font-variation-settings: "wght" var(--font-bold-wght);}

h2 {text-transform: uppercase;}

.br {border-radius: var(--border-radius); }

.iconsSocial a {display: inline-block; margin-right: .5rem;}
.iconsSocial a:last-child {margin-right: 0;}
.iconsSocial img { width:2rem;}
.iconsSocial {margin-bottom: 1.5rem;}

.block, header {background-color: var(--color-yellow-lite); border-radius: var(--border-radius); padding: 1rem 0 2rem; margin-bottom: 2rem;}

.block.video .btn, .btn.todo, .navGridMobile .btn {box-shadow: var(--box-shadow); background-color: var(--color-white);border-radius: var(--border-radius-small); width: 100%; text-align: center;padding: .75rem 1rem;font-variation-settings: "wght" var(--font-bold-wght); text-decoration: none; color: var(--color-brown);transition: all .3s; display: inline-block;}
.btn.todo {border: 1px solid var(--color-brown); width: 100%; text-align: center;box-shadow: none;}

img.metro {float: right; max-height: 3rem; margin-top: 1rem;box-shadow: var(--box-shadow);}

.blockWhite {background-color: var(--color-white); padding: 1.5rem; border-radius: var(--border-radius); height: 100%;box-shadow: var(--box-shadow);}
.blockWhite.address {line-height: 1.75;}
.blockWhite a {color: var(--color-black);}
.blockWhite a:hover {color: var(--color-brown);}
.blockWhite .btn, .btn-submit {display: inline-block; width: 100%; background-color: var(--color-brown); color: var(--color-white); border: 1px solid var(--color-brown); border-radius: var(--border-radius-small); padding: .5rem .75rem;font-variation-settings: "wght" var(--font-bold-wght); text-decoration: none; transition: all .3s; text-align: center;}
.blockWhite .btn:hover, .btn-submit:hover {transform: scale(1.05);text-decoration: none;color: var(--color-white);background-color: var(--color-brown); }
.blockWhite .phone {margin-bottom: 1.5rem;}
.blockWhite .phone a {text-decoration: none;}
.blockWhite .phone .wrap {font-size: 1rem; color: var(--color-white);font-variation-settings: "wght" var(--font-bold-wght);}
.blockWhite .phone img {width: 1.5rem; margin-right: .1rem;}
.blockWhite .phone .message {margin-left: 1.8rem; font-size: .9rem;cursor:pointer;}
.blockWhite .icon {width: 1.1rem; margin-right: .1rem;margin-top: -.2rem;}
.blockWhite h3 {margin-top: 0 !important;}
.blockWhite .buttons {display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;}
.blockWhite .buttons a {text-decoration: none; display: inline-block; padding: .5rem 1rem; width: 100%;border-radius: var(--border-radius-small);font-variation-settings: "wght" var(--font-bold-wght); text-align: center;transition: all .3s;}
.blockWhite .buttons a.record {background-color: var(--color-brown); color: var(--color-white);}
.blockWhite .buttons a.rutube {background-color: var(--color-yellow-lite);}

.badges {margin: 1.5rem 0;display: grid; grid-template-columns: auto auto; gap: 1rem;}
.badges span {background-color: var(--color-grey-lite); color: var(--color-brown); border: 1px solid var(--color-brown);border-radius: var(--border-radius-small);padding: .5rem 1rem;}

.row.video {margin-top: 2rem;}
.row.video lite-rutube {border-radius: var(--border-radius);}

.when {margin-bottom: 1rem;}
:is(.when,.whoInRisk, .todo) .wrap {background-color: var(--color-cream-bg); padding: 1.5rem; border-radius: var(--border-radius-small); margin-bottom: var(--bs-gutter-x);display: grid; gap: 1rem; grid-template-columns: auto 1fr; align-items: center;min-height: 6rem;}
:is(.when,.whoInRisk, .todo) .wrap .icon {background-color: var(--color-brown); padding: .5rem; border-radius: var(--border-radius-small);}
.when .wrapImage {height: calc(100% - var(--bs-gutter-x)); margin-bottom: var(--bs-gutter-x); background-position: top right; background-size: contain; background-repeat: no-repeat; background-color: var(--color-brown); border-radius: var(--border-radius-small); min-height: 6rem; }

.whoInRisk .wrap {background-color: var(--color-brown); color: var(--color-cream-bg);}
.whoInRisk .wrap .icon {background-color: var(--color-cream-bg);}

.todo .wrapImage {height: calc(100% - var(--bs-gutter-x)); min-height: 3rem;margin-bottom: var(--bs-gutter-x); background-size: cover;border-radius: var(--border-radius-small);}

ul.marked-list {list-style: none;padding-left: 0;}
ul.marked-list li {position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
ul.marked-list li::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}

ul.star-list li::before {content: "★"; /* "☆" */ color: var(--color-brown);margin-top: -.05rem;}
ul.dot-list li::before {content: "•"; color: var(--color-brown);font-size: 3rem;margin-top: -.2rem;}



iframe.map {min-height: 420px; height: 100%; border-radius: var(--border-radius);box-shadow: var(--box-shadow);}

footer > .wrap {background-color: var(--color-brown); padding: 3rem 0 1rem; border-radius: var(--border-radius); margin-bottom: 1rem; color: var(--color-yellow-lite); font-size: .85rem;}
footer a {color: var(--color-yellow-lite); text-decoration: none;}
footer a:hover {text-decoration: underline;}
footer .logo img {max-width: 14rem; margin-bottom: 1.5rem;}
footer .copyright {color: var(--color-brown-lite);}
footer p {margin-bottom: .75rem;}
footer .icon {width: 1em; margin-right: .1rem;}

footer .phone {margin-bottom: 1.5rem;}
footer .phone .wrap {font-size: .9rem; color: var(--color-white);font-variation-settings: "wght" var(--font-bold-wght);}
footer .phone img {width: 1.5rem; margin-right: .1rem;}
footer .phone .message {margin-left: 1.8rem;cursor:pointer;}
footer .btn {display: inline-block; background-color: var(--color-yellow-lite); color: var(--color-brown); border: 1px solid var(--color-brown); border-radius: var(--border-radius-small); padding: .5rem .75rem;font-variation-settings: "wght" var(--font-bold-wght); text-decoration: none; transition: all .3s;}
footer .btn:hover, .block.video .btn:hover, .blockWhite .buttons a:hover, .btn.todo:hover {transform: scale(1.05);text-decoration: none;}
footer .btn img {margin-right: .1rem;}


.navGrid {display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem; padding: 1rem 0;}
.navGrid .logo img {max-width: 14rem;}
.navGrid .menuWrap {text-align: center;}
.navGrid .menuWrap .menu {display: inline-block; background-color: var(--color-brown); padding: 0 2rem; border-radius: var(--border-radius); }
.navGrid .menuWrap .menu a { color: var(--color-white); display: inline-block; padding: .5rem 1rem; text-decoration: none;}
.navGrid .menuWrap .menu a:hover {text-decoration: underline;}
.navGrid .iconsSocial {padding: 0 1rem; margin: 0;}
.navGrid .phone {}
.navGrid .phone .message { font-size:.85rem; margin-left: 2rem; cursor:pointer; }
.navGrid .phone a {color: var(--color-brown); text-decoration: none;font-variation-settings: "wght" var(--font-bold-wght);}

.navGridMobile {display: none;}

.diagnosis-section {display: grid; grid-template-columns: 25% 25% 50%; grid-template-rows: repeat(3, 1fr); gap: 1.5rem; }
.stats-block {grid-area: 1 / 1 / 3 / 3; background-color: var(--color-white); border-radius: var(--border-radius); padding: 1.5rem; display: flex; flex-direction: column; justify-content: normal; }
.stats-block h2 {font-size: 2rem; text-transform: uppercase; margin: .75rem 0 !important; color: var(--color-brown); font-variation-settings: "wght" 650; }
.stats-block .number {background-color: var(--color-yellow-lite); font-size: 2.5rem; padding: .5rem; border-radius: var(--border-radius-small); text-align: center; margin: .5rem 0; color: var(--color-brown); font-variation-settings: "wght" 700; max-width: 30rem; }
.stats-block p {border-left: 2px solid var(--color-brown); padding-left: 1rem; margin-top: 1rem; color: var(--color-brown); max-width: 30rem; }
.expert-block {grid-area: 1 / 3 / 4 / 4; background-color: var(--color-brown); color: var(--color-white); border-radius: var(--border-radius); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: normal; }
.expert-content {position: relative; z-index: 2; padding: 1.5rem; text-align: right; color: var(--color-yellow-lite); }
.expert-block img {width: 100%; height: 100%; max-height: 26rem; object-fit: cover; object-position: top; margin-top: -4rem;}
.expert-title {position: relative; padding-left: 2rem; font-size: 1.2rem; display: inline-block; width: auto; }
.expert-title::before {content: ""; position: absolute; left: -2.5rem; top: 50%; transform: translateY(-50%); width: 3rem; height: 2px; background-color: var(--color-white); }
.expert-block h1 {font-size: 2.5rem; text-transform: uppercase; line-height: 1.2; margin: .5rem 0; font-variation-settings: "wght" 700; }
.expert-block p {position: relative; padding-left: 2rem; font-size: 1.2rem; display: inline-block; width: auto; font-variation-settings: "wght" var(--font-bold-wght); }
.solution-block {grid-area: 3 / 1 / 4 / 2; background-color: var(--color-brown); border-radius: var(--border-radius); padding: 1rem; align-content: center; color: var(--color-yellow-lite); }
.solution-block img {width: 100%; display: block; border-radius: var(--border-radius); margin: 0 auto; height: 6rem; object-fit: cover; margin-bottom: 1rem; }
.solution-text {text-align: center; margin-bottom: 0; font-variation-settings: "wght" var(--font-bold-wght); }
.check-vision-block {grid-area: 3 / 2 / 4 / 3; background-color: var(--color-white); border-radius: var(--border-radius); padding: 1rem; align-content: center; }
.check-vision-block p {text-align: center; text-transform: uppercase; font-size: 1.1rem; color: var(--color-brown); }
.check-vision-block a {background-color: var(--color-brown); color: var(--color-white); border-radius: var(--border-radius-small); padding: .5rem 1rem; cursor: pointer; width: 4rem; margin: 0 auto; display: block; text-align: center; }

/* https://w3collective.com/scroll-to-top-button-javascript/ */
#scroll-btn { opacity: 0; width: 40px; height: 40px; color: var(--color-black); background-color: var(--color-yellow-lite); position: fixed; bottom: 10%; right: 5%; border: 2px solid var(--color-brown); border-radius: 50%; font: bold 20px monospace; transition: opacity 0.5s, transform 0.5s; padding: 0; }
#scroll-btn.show { opacity: 1; transition: opacity 1s, transform 1s; }

input.form-input {display: none; }
.modal .modal-header {border: none; display: block; }
.modal .modal-header img {height: 3rem; margin: 1rem auto 0 auto; width: auto; }
.modal .modal-title {margin-top: 1rem; }
.modal .modal-header button {background: var(--color-brown); border: none; border-radius: 50%; color: var(--color-white); padding: .4rem; margin: 0; height: 2rem; width: 2rem; line-height: 1; font-size: 1.2rem; position: absolute; top: -.75rem; right: -.75rem; z-index: 1000; opacity: 1; text-align: center;}
.modal .btn.btn-primary {background: var(--color-brown); color: var(--color-white);}
.modal .btn.btn-outline-secondary {background: var(--color-grey-lite); color: var(--color-black); border-color: var(--color-grey);font-variation-settings: "wght" var(--font-normal-wght);}
.modal a {color: var(--color-black); text-decoration: underline;}
.modal .error-msg, .formRecord form .error-msg {color: var(--color-brown); background-color: var(--color-grey-lite); padding: 1rem; border: 2px solid red;border-radius: var(--border-radius-small); margin-bottom: 1rem; font-size: .9rem;}
.modal .error-msg:empty, .modal .modal-subtitle:empty, .formRecord form .error-msg:empty {display: none;}
.form-control:focus {color: var(--color-black); background-color: var(--color-white); border-color: var(--color-grey); outline: 0; box-shadow: 0 0 0 .25rem #60574E3D; }

.formRecord {background-image: url(./assets/images/form.webp);border-radius: var(--border-radius); padding: 2rem;background-size: cover;}
.formRecord form {min-height: 24rem;border-radius: var(--border-radius); padding: 1.5rem; background-color: var(--color-white); max-width: calc(50% - 2rem);}
.formRecord form .btn-submit {}
.formRecord form .icon { width: 1.1rem; }
.formRecord form .input-group-text {background-color: var(--color-cream-bg); border-color: var(--color-cream-bg);}
.formRecord form .input-group > .form-control, .formRecord form .input-group > .form-floating, .formRecord form .input-group > .form-select {background-color: var(--color-cream-bg);border-color: var(--color-cream-bg);}
.formRecord form .form-check-input:checked {background-color: var(--color-brown); border-color: var(--color-brown);}
.formRecord form .form-check-input:focus {box-shadow: 0 0 0 .25rem #60574E3D; border-color: var(--color-brown);}
.formRecord form a {color: var(--color-brown);}
.formRecord form .error-msg {color: var(--color-brown);}
.formRecord .result {min-height: 15rem; border-radius: var(--border-radius); padding: 1.5rem; background-color: var(--color-white); max-width: calc(50% - 2rem); text-align: center; display: flex; justify-content: center; align-items: center;flex-direction: column;}


@media (max-width: 500px) { /*  and (orientation: portrait) */
    footer .copyright {margin-top: 2rem;}
    footer > .wrap {text-align: center;}
    footer .col-12:not(:last-child) {border-bottom: 1px solid var(--color-yellow-lite-v2);padding-bottom: .5rem; margin-bottom: 1rem;}
    .badges, .blockWhite .buttons {grid-template-columns: auto;}
    .block.video, .block.address {padding-bottom: 1rem; padding-top: 0.5rem;}
    img.metro {display: none;}
    .todo .wrapImage {display: none;}
    header {padding:0; background: var(--color-white);}
    .expert-block img {margin-top: 0;}

    .stats-block h2 {font-size: 1.7rem;margin: .5rem 0 !important;}
    .expert-title::before {left: 0;}
    .diagnosis-section {grid-template-columns: 1fr; gap: 1rem; grid-template-rows: auto auto auto auto; grid-template-areas: "stats" "expert" "solution" "check"; }
    .stats-block {grid-area: stats; grid-column: span 1; }
    .expert-block {grid-area: expert; grid-column: span 1; height: auto; }
    .expert-block::before {height: 200px; }
    .solution-block {grid-area: solution; grid-column: span 1; }
    .check-vision-block {grid-area: check; grid-column: span 1; }
    .solution-block {grid-template-rows: auto; }
    .solution-image {border-radius: var(--border-radius); }
    .mobileBGWrap {background-color: var(--color-yellow-lite); padding-bottom: 1rem; padding-top: 1rem; border-radius: var(--border-radius); }
    .navGrid {display: none;}
    .navGridMobile {display: block;position: relative;}
    .navGridMobile .control {display: grid; grid-template-columns: 1fr auto; gap: 3rem; margin-bottom: 1rem;}
    .navGridMobile .nav-block{ background-color:var(--color-cream-bg);padding: .5rem 1rem 1rem 1rem; border-radius: var(--border-radius);text-align: right; position: absolute; width: 100%; z-index: +1;box-shadow: var(--box-shadow);}
    .navGridMobile .menu {margin-bottom: 1rem;}
    .navGridMobile .menu a {display: block; color: var(--color-brown); text-decoration: none;font-variation-settings: "wght" var(--font-bold-wght); padding: .5rem 0; font-size: 1.1rem;}
    .navGridMobile .btn {color: var(--color-white); background-color: var(--color-brown);}
    .navGridMobile a {color: var(--color-brown);text-decoration: none;}
    .navGridMobile .phone {margin-bottom: 1rem;}
    .navGridMobile .phone a {font-variation-settings: "wght" var(--font-bold-wght); font-size: 1.1rem;}
    .navGridMobile .phone .message {font-size: .9rem;cursor:pointer;}

    /* анимация */
    .navGridMobile .nav-block {opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.3s ease; pointer-events: none; }
    .navGridMobile .nav-block.active {opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; }

    .formRecord {padding: 1rem;}
    .formRecord form, .formRecord .result {max-width: 100%;min-height: 20rem;}


}