/*
 * SERP Expert typography system
 * SERP Expert project typography override.
 * Body/UI remain Manrope. H1-H4 and meaningful subtitles/card titles use Raleway 900.
 * Lead remains Manrope 400 at 15/24.
 */
:root {
    --font-main: "Manrope", system-ui, sans-serif;
    --font-heading: "Raleway", "Manrope", system-ui, sans-serif;
    --font-text: var(--font-main);

    --type-h1-size: 44px;
    --type-h1-line: 48px;
    --type-h2-size: 36px;
    --type-h2-line: 42px;
    --type-h3-size: 28px;
    --type-h3-line: 34px;
    --type-h4-size: 22px;
    --type-h4-line: 28px;
    --type-lead-size: 17px;
    --type-lead-line: 26px;
    --type-body-size: 15px;
    --type-body-line: 24px;
    --type-small-size: 13px;
    --type-small-line: 20px;
    --type-caption-size: 12px;
    --type-caption-line: 18px;
    --type-ui-size: 15px;
    --type-ui-line: 20px;
}

html,
body,
button,
input,
textarea,
select,
option {
    font-family: var(--font-text);
}

body {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 400;
    color: var(--text-primary, #17202a);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

p,
li,
dd,
dt,
td,
th,
label,
input,
textarea,
select,
option {
    font-family: var(--font-text);
}

h1,
.se-type-h1,
h1.section-title,
.intro__title,
.article__title,
.home-hero__title,
.about-hero__title {
    font-family: var(--font-heading);
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-line);
    font-weight: 900;
    letter-spacing: 0;
}

h2,
.se-type-h2,
.section-title,
.about-page .section-title,
.text__content h2,
.main-form__title,
.kviz__title {
    font-family: var(--font-heading);
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-line);
    font-weight: 900;
    letter-spacing: 0;
}

h3,
.se-type-h3,
.text__content h3 {
    font-family: var(--font-heading);
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-line);
    font-weight: 900;
    letter-spacing: 0;
}

h4,
.se-type-h4,
.text__content h4 {
    font-family: var(--font-heading);
    font-size: var(--type-h4-size);
    line-height: var(--type-h4-line);
    font-weight: 900;
    letter-spacing: 0;
}

h5,
.text__content h5 {
    font-family: var(--font-text);
    font-size: var(--type-lead-size);
    line-height: var(--type-lead-line);
    font-weight: 600;
}

/* Lead and long-form copy */
.section-subtitle,
.se-lead,
.home-hero__lead,
.about-section-lead,
.about-hero__lead,
.main-form__subtitle,
.kviz__subtitle {
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
}

.text__content,
.text__content p,
.text__content li,
.text__content td,
.text__content th,
.about-page .text__content p,
.about-page .text__content li,
.about-page .text__content td,
.about-page .text__content th,
.about-page .text__content blockquote,
.about-hero__text,
.about-history__body p,
.about-related__card p,
.about-task-card p,
.about-service-card p,
.about-project-card p,
.about-principle p,
.about-process__item p,
.about-competency-card p,
.about-person p,
.about-case-card p,
.about-reason-card p,
.about-geography__content > p:not(.about-eyebrow),
.about-faq__answer p,
.about-cta__content > p:not(.about-eyebrow),
.about-cta__notes span,
.reliable__text,
.vacancy__content p,
.main-states__info,
.price__name,
.price__cost,
.you__text {
    font-family: var(--font-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 400;
}

.text__content blockquote,
.text__review-item p {
    font-family: var(--font-text);
    font-size: var(--type-lead-size);
    line-height: var(--type-lead-line);
    font-weight: 500;
}


.price__cost {
    font-weight: 600;
}

/* UI, navigation and buttons */
.main-btn,
.accent-btn,
.se-pagination .page-numbers,
.home-hero__primary,
.home-hero__secondary,
.price__btn,
.reviews__btn,
.image-cards__btn,
.notfound a,
.se-header__notice-action,
.se-header__search-form button[type="submit"],
.se-nav__link,
.se-nav__services-btn,
.se-header__cta,
.se-services-panel__links a,
.se-services-panel__all,
.se-mobile-nav a,
.se-mobile-nav button,
.se-mobile-links a,
.se-mobile-drawer__cta,
.se-mobile-drawer__footer > a,
.about-btn-primary,
.about-btn-secondary,
.about-hero__actions .main-btn,
.price__tab,
.main-faq__tab,
.popup-service__tab,
.popup-service__content .search-list a,
.estimate-inner > * .estimate-panel > li {
    font-family: var(--font-text);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-line);
    font-weight: 600;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    font-family: var(--font-text);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select,
.form__input,
.form__select {
    font-family: var(--font-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 400;
}

/* Header is an interface surface, so it stays in Manrope. */
.se-header,
.se-mobile-drawer {
    font-family: var(--font-text);
}

.se-header__notice p,
.se-contact strong,
.footer__link a,
.footer__item,
.footer-center__nav ul li,
.footer__contact-item,
.footer__card,
.contact__item,
.contact__text,
.intro__tag,
.intro__list ul li p span:last-of-type,
.reviews__date,
.article__time,
.checked__info,
.checked__date,
.main-states__stage,
.state-education__list li,
.tarifs__elem > span,
.tarifs__elem > p,
.team-card > span:last-of-type,
.image-cards__top_item,
.projects__tab-company,
.states__tab-jobs,
.features__text,
.breadcrumbs li {
    font-family: var(--font-text);
    font-size: var(--type-small-size);
    line-height: var(--type-small-line);
}

.se-contact small,
.se-services-panel__head span,
.se-services-tab__copy small,
.se-nav__dropdown small,
.se-mobile-service-tabs small,
.form__politic,
.popup__politic,
.kviz__politic,
.about-cta__form .form__politic,
.about-eyebrow,
.home-hero__eyebrow,
.about-hero__badges span,
.about-related__card > span,
.footer-bottom,
div.footerinfo,
div.footerinfo * {
    font-family: var(--font-text);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    font-weight: 500;
}

.se-contact strong {
    font-weight: 600;
}

.se-services-tab__copy strong,
.se-nav__dropdown strong,
.se-mobile-service-tabs strong {
    font-family: var(--font-text);
    font-size: var(--type-small-size);
    line-height: var(--type-small-line);
    font-weight: 600;
}

.se-services-panel__head h3 {
    font-family: var(--font-heading);
    font-size: var(--type-h4-size);
    line-height: var(--type-h4-line);
    font-weight: 900;
    letter-spacing: 0;
}

.se-mobile-back {
    font-family: var(--font-text);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-line);
    font-weight: 600;
}

.se-header__search-form input,
.se-mobile-search input {
    font-family: var(--font-text);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-line);
}

/* Footer typography */
.footer,
.footer * {
    font-family: var(--font-text);
}

.footer__nav-title,
.footer-center__nav ul li:first-child,
.footer__contact-title {
    font-family: var(--font-text);
    font-size: var(--type-ui-size);
    line-height: var(--type-ui-line);
    font-weight: 600;
}

/* Real heading elements keep the heading typeface even inside the footer. */
.footer h1,
.footer h2,
.footer h3,
.footer h4 {
    font-family: var(--font-heading);
    font-weight: 900;
}

/* Legacy visual headings mapped to the brand scale. */
.popup__title,
.popup-service__content-title,
.reliable__content-title,
.features__title,
.guarantees__title,
.projects__name,
.kviz__form-title,
.article-stock__title,
.states__name,
.main-states__name,
.state-certificates__title,
.estimate-inner > * .estimate-item h3 {
    font-family: var(--font-heading);
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-line);
    font-weight: 900;
    letter-spacing: 0;
}

.service__name,
.popup__form-subtitle,
.popup-service__search-title,
.articles__name,
.vacancy__name,
.checked__name,
.tarifs__name,
.image-cards__title,
span.toc-title {
    font-family: var(--font-heading);
    font-size: var(--type-h4-size);
    line-height: var(--type-h4-line);
    font-weight: 900;
    letter-spacing: 0;
}

.projects__tab-name,
.states__tab-name,
.reviews__name,
.vacancy__content > span,
.projects__companys,
.states__jobs,
.project__company,
.state__job {
    font-family: var(--font-heading);
    font-size: var(--type-lead-size);
    line-height: var(--type-lead-line);
    font-weight: 900;
}

.state-education__title,
.state-info__title {
    font-family: var(--font-heading);
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-line);
    font-weight: 900;
    letter-spacing: 0;
}

/* KPI and large numbers remain in Manrope; Raleway is reserved for headings. */
.reliable__list li span,
.you__namber,
.process-item > span,
.intro__list ul li p span:first-of-type {
    font-family: var(--font-text);
    font-weight: 600;
    letter-spacing: 0;
}

.notfound .notfound-404 h1 {
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: 0;
}

/* Guarantee list headings follow the H4 role; counters stay display-led. */
.guarantees__list li span {
    font-family: var(--font-heading);
    font-size: var(--type-h4-size);
    line-height: var(--type-h4-line);
    font-weight: 900;
}

.guarantees__list li::before {
    font-family: var(--font-text);
    font-size: 20px;
    line-height: 36px;
    font-weight: 600;
}

/* FAQ and repeated card headings use Raleway 900 at the H4 scale. */
.faq__item-title,
.about-history__body h3,
.about-related__card h3,
.about-task-card h3,
.about-service-card h3,
.about-project-card h3,
.about-principle h3,
.about-process__item h3,
.about-competency-card h3,
.about-person h3,
.about-case-card h3,
.about-reason-card h3,
.notfound h2 {
    font-family: var(--font-heading);
    font-size: var(--type-h4-size);
    line-height: var(--type-h4-line);
    font-weight: 900;
    letter-spacing: 0;
}

.about-faq__item summary {
    font-family: var(--font-heading);
    font-size: var(--type-lead-size);
    line-height: var(--type-lead-line);
    font-weight: 900;
}

.about-geography__contacts strong {
    font-family: var(--font-text);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    font-weight: 600;
}

.about-geography__contacts span,
.about-geography__contacts a,
.about-cta__contacts a {
    font-family: var(--font-text);
    font-size: var(--type-lead-size);
    line-height: var(--type-lead-line);
    font-weight: 700;
}

.about-principle > span,
.about-process__num,
.about-person span,
.about-history__date,
.about-geography__cities span,
.about-task-card > span,
.about-service-card__num,
.about-competency-card > span {
    font-family: var(--font-text);
    font-size: var(--type-small-size);
    line-height: var(--type-small-line);
}

.home-hero__benefits strong {
    font-family: var(--font-heading);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 900;
}

.home-hero__benefits small {
    font-family: var(--font-text);
    font-size: var(--type-small-size);
    line-height: var(--type-small-line);
    font-weight: 400;
}

/* Team cards follow the same title/body hierarchy as other cards. */
.team-card > span:first-of-type {
    font-family: var(--font-heading);
    font-size: var(--type-h4-size);
    line-height: var(--type-h4-line);
    font-weight: 900;
}

.team-card > span:nth-of-type(2),
.team-card > span:nth-of-type(3) {
    font-family: var(--font-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 400;
}

/* Tables and content utilities */
.text__content table,
.text__content td,
.text__content th,
table,
td,
th {
    font-family: var(--font-text);
}

.text__content th,
th {
    font-weight: 600;
}

.text__review-link a {
    font-family: var(--font-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 600;
}

.error-message {
    font-family: var(--font-text);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    font-weight: 500;
}

@media (max-width: 767px) {
    :root {
        --type-h1-size: 34px;
        --type-h1-line: 40px;
        --type-h2-size: 30px;
        --type-h2-line: 36px;
        --type-h3-size: 24px;
        --type-h3-line: 30px;
        --type-h4-size: 20px;
        --type-h4-line: 26px;
        --type-lead-size: 16px;
        --type-lead-line: 25px;
    }

    body,
    .text__content,
    .text__content p,
    .text__content li,
    .text__content td,
    .text__content th,
    .about-page .text__content p,
    .about-page .text__content li,
    .about-page .text__content td,
    .about-page .text__content th {
        font-size: var(--type-body-size);
        line-height: var(--type-body-line);
    }

    .about-page .section-title,
    .about-hero__title,
    .home-hero__title,
    .intro__title,
    .article__title {
        letter-spacing: 0;
    }

    .se-nav__link,
    .se-mobile-nav a,
    .se-mobile-nav button,
    .se-mobile-links a,
    .se-mobile-drawer__cta,
    .se-mobile-drawer__footer > a {
        font-size: var(--type-ui-size);
        line-height: var(--type-ui-line);
    }
}

/* Keep the desktop navigation on the same brand scale before the mobile switch. */
@media (min-width: 1081px) and (max-width: 1180px) {
    .se-nav__link {
        font-size: var(--type-ui-size);
        line-height: var(--type-ui-line);
        font-weight: 600;
    }
}

/* 2.0.60: long Cyrillic titles and native anchor offset. */
main :is(h1,h2,h3,h4){height:auto;min-height:0;overflow-wrap:break-word;text-wrap:pretty}
main [id]{scroll-margin-top:110px}
main :is(p,li,td,th){overflow-wrap:break-word}
@media(max-width:767px){:root{--type-h1-size:clamp(30px,7vw,40px);--type-h1-line:1.15;--type-h2-size:clamp(26px,6vw,32px);--type-h2-line:1.2;--type-h3-size:24px;--type-h3-line:1.3}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}