/* Дизайн системата на публичния сайт по макета (Mockup/*.dc.html): токени, основа, компоненти, оформление и началната.
   Mobile-first; пречупвания 768 (таблет) и 1200 (компютър). Без билд: файлът на диска е файлът, който работи. */

@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Raleway';
    font-weight: 600 800;
    font-display: swap;
    src: url('../fonts/raleway-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jbmono-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/jbmono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2192, U+2212;
}

:root {
    /* TopFence (design): the dark of the bars, the orange of the calls, the burnt orange of the links. */
    --rp-dark: #1B232A;
    --rp-dark-2: #2E3A45;
    --rp-dark-hover: #2B3742;
    --rp-on-dark: #AEB9C3;
    --rp-on-dark-strong: #E6EBEF;
    --rp-accent: #F9A34F;
    --rp-accent-hover: #F08A2C;
    --rp-accent-50: #FDEBD8;
    --rp-link: #A84A0B;
    --rp-ink: #1B232A;
    --rp-text: #3A4651;
    --rp-text-strong: #2A352F;
    --rp-muted: #5F6B76;
    --rp-faint: #8A958E;
    --rp-quiet: #B7C1BB;
    --rp-surface: #F3F5F7;
    --rp-line: #E1E6EA;
    --rp-line-soft: #EEF2EF;
    --rp-field: #C3CCD4;
    --rp-red: #B0452A;
    --rp-red-50: #FDECE8;
    --rp-red-ink: #7A2A14;

    --rp-r-lg: 28px;
    --rp-r: 24px;
    --rp-r-md: 18px;
    --rp-r-sm: 14px;
    --rp-pill: 999px;

    --rp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --rp-display-font: 'Raleway', 'Inter', system-ui, sans-serif;
    --rp-r-btn: 6px;
    --rp-r-card: 8px;
    --rp-mono-font: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --rp-focus: var(--rp-link);
    --rp-gutter: 16px;
    --rp-header-h: 64px;
    --rp-dock-h: 65px;
    --rp-section-end: 40px;
    --rp-t: .15s ease;
}

/* Основа */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 16px;
}

html.rp-locked {
    overflow: hidden;
}

body {
    margin: 0;
    min-width: 320px;
    background: #FFFFFF;
    color: var(--rp-ink);
    font-family: var(--rp-font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
    /* Буквите са като в макета: без българските местни форми, които lang="bg" иначе включва. */
    font-feature-settings: "locl" 0;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin: 0;
}

h1, h2, h3, h4 {
    font-family: var(--rp-display-font);
    font-weight: 800;
    text-wrap: balance;
}

:where(ul[class], ol[class]) {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

[x-cloak] {
    display: none !important;
}

:focus-visible {
    outline: 3px solid var(--rp-focus);
    outline-offset: 2px;
}

.rp-icon {
    flex: none;
}

.rp-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Скритото поле за ботове: извън екрана, не display:none (някои ботове пропускат скритите полета). */
.rp-hp {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.rp-skip {
    position: fixed;
    left: 16px;
    top: -100px;
    z-index: 100;
    padding: 12px 18px;
    border-radius: var(--rp-pill);
    background: var(--rp-ink);
    color: #FFFFFF;
    font-weight: 600;
}

.rp-skip:focus {
    top: 12px;
}

.rp-mono {
    font-family: var(--rp-mono-font);
}

.rp-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--rp-gutter);
}

/* The footer stays at the foot of the window on a short page: the content takes the free height. */
.rp-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.rp-main {
    display: block;
    flex: 1 0 auto;
}

/* Връзки: без подчертаване, текст в акцента с тежест 600 (WORKFLOW 9.2) */
.rp-link {
    color: var(--rp-link);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--rp-t);
}

.rp-link:hover {
    color: var(--rp-ink);
}

.rp-more {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    color: var(--rp-link);
    font-weight: 500;
    transition: color var(--rp-t);
}

.rp-more:hover {
    color: var(--rp-ink);
}

/* Бутони: един клас с локални променливи, вариантът само ги пренасочва; при посочване се сменя само цветът. */
.rp-btn {
    --bg: var(--rp-surface);
    --fg: var(--rp-ink);
    --bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--bd);
    border-radius: var(--rp-r-btn);
    background: var(--bg);
    color: var(--fg);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--rp-t), border-color var(--rp-t), color var(--rp-t);
}

.rp-btn:hover {
    --bg: var(--rp-line);
    --fg: var(--rp-ink);
}

.rp-btn--primary {
    --bg: var(--rp-accent);
    --fg: var(--rp-ink);
}

.rp-btn--primary:hover,
.rp-btn--primary.is-active {
    --bg: var(--rp-accent-hover);
    --fg: var(--rp-ink);
}

.rp-btn--dark {
    --bg: var(--rp-ink);
    --fg: #FFFFFF;
}

.rp-btn--dark:hover {
    --bg: var(--rp-dark-hover);
    --fg: #FFFFFF;
}

.rp-btn--outline {
    --bg: #FFFFFF;
    --fg: var(--rp-ink);
    --bd: var(--rp-field);
}

.rp-btn--outline:hover {
    --bg: #FFFFFF;
    --fg: var(--rp-ink);
    --bd: var(--rp-ink);
}

.rp-btn--block {
    display: flex;
    width: 100%;
}

.rp-btn--sm {
    min-height: 42px;
    padding: 0 16px;
    font-size: 14.5px;
    font-weight: 500;
}

.rp-btn--lg {
    min-height: 54px;
    padding: 0 24px;
    font-size: 16px;
}

.rp-btn[aria-busy="true"] {
    cursor: progress;
}

/* Формите */
.rp-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.rp-label {
    font-size: 14px;
    font-weight: 600;
}

.rp-label__note {
    font-weight: 400;
    color: var(--rp-muted);
}

.rp-hint {
    font-size: 14px;
    line-height: 1.45;
    color: var(--rp-muted);
}

.rp-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--rp-field);
    border-radius: var(--rp-r-btn);
    background: #FFFFFF;
    color: var(--rp-ink);
    font-size: 16px;
    line-height: 1.4;
    outline: none;
    appearance: none;
    transition: border-color var(--rp-t);
}

textarea.rp-input,
.rp-input--area {
    min-height: 0;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

select.rp-input {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235F6B76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.rp-input::placeholder {
    color: var(--rp-faint);
    opacity: 1;
}

.rp-input:hover {
    border-color: var(--rp-ink);
}

.rp-input:focus {
    border-color: var(--rp-ink);
    outline: 2px solid var(--rp-focus);
    outline-offset: 2px;
}

.rp-input[aria-invalid="true"] {
    border-color: var(--rp-red);
}

.rp-input[aria-invalid="true"]:focus {
    outline-color: var(--rp-red);
}

.rp-field__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--rp-red);
}

.rp-field__error .rp-icon {
    margin-top: 2px;
}

.rp-form-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--rp-r-sm);
    background: var(--rp-red-50);
    color: var(--rp-red-ink);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
}

/* Полето за файл (<x-rp-file>): входът е скрит в пунктирания бутон (на телефон на цял ред); избраното е ред с имената и изчистване. */
.rp-file {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.rp-add {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 12px 18px;
    border: 1px dashed var(--rp-field);
    border-radius: var(--rp-r-card);
    background: #FFFFFF;
    color: var(--rp-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color var(--rp-t), border-color var(--rp-t);
}

.rp-add:hover {
    border-color: var(--rp-ink);
    background: var(--rp-surface);
}

.rp-add:has(.rp-file__input:focus-visible) {
    outline: 3px solid var(--rp-focus);
    outline-offset: 2px;
}

.rp-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    opacity: 0;
}

.rp-file.is-invalid .rp-file__pick {
    border-color: var(--rp-red);
    color: var(--rp-red);
}

.rp-file__more,
.rp-file.has-file .rp-file__first,
.rp-file.is-full .rp-file__pick {
    display: none;
}

.rp-file.has-file .rp-file__more {
    display: inline;
}

.rp-file__chosen {
    display: none;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
    font-size: 14px;
    color: var(--rp-text);
    overflow-wrap: anywhere;
}

.rp-file.has-file .rp-file__chosen {
    display: grid;
}

.rp-file__chosen > .rp-icon {
    color: var(--rp-ink);
}

.rp-file__error {
    margin: 8px 0 0;
    color: var(--rp-red);
    font-size: 14px;
}

.rp-file__names strong {
    font-weight: 600;
    color: var(--rp-ink);
}

.rp-file.is-invalid .rp-file__names,
.rp-file.is-invalid .rp-file__names strong,
.rp-file.is-invalid .rp-file__chosen > .rp-icon {
    color: var(--rp-red);
}

.rp-file__clear {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--rp-link);
    font-size: 14px;
    font-weight: 500;
    transition: color var(--rp-t);
}

.rp-file__clear:hover {
    color: var(--rp-ink);
}

/* Превключвател (бисквитките) */
.rp-switch {
    position: relative;
    flex: none;
    width: 48px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--rp-pill);
    background: var(--rp-field);
    transition: background-color var(--rp-t);
}

.rp-switch::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: var(--rp-pill);
    background: #FFFFFF;
}

.rp-switch:hover {
    background: var(--rp-quiet);
}

.rp-switch.is-on {
    background: var(--rp-link);
}

.rp-switch.is-on:not([aria-disabled="true"]):hover {
    background: var(--rp-ink);
}

.rp-switch.is-on::after {
    left: 23px;
}

.rp-switch[aria-disabled="true"] {
    opacity: .6;
    cursor: default;
}

/* Въпроси и отговори като <details> */
.rp-acc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-acc__item {
    border: 1px solid var(--rp-line);
    border-radius: 20px;
    background: #FFFFFF;
    transition: background-color var(--rp-t), border-color var(--rp-t);
}

.rp-acc__item[open] {
    border-color: var(--rp-surface);
    background: var(--rp-surface);
}

.rp-acc__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    list-style: none;
    cursor: pointer;
}

.rp-acc__q::-webkit-details-marker {
    display: none;
}

.rp-acc__q::marker {
    content: '';
}

.rp-acc__sign {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rp-pill);
    background: var(--rp-surface);
    color: var(--rp-ink);
    transition: background-color var(--rp-t), color var(--rp-t);
}

.rp-acc__q:hover .rp-acc__sign {
    background: var(--rp-surface);
    color: var(--rp-link);
}

.rp-acc__item[open] .rp-acc__sign {
    background: var(--rp-link);
    color: #FFFFFF;
}

.rp-acc__minus,
.rp-acc__item[open] .rp-acc__plus {
    display: none;
}

.rp-acc__item[open] .rp-acc__minus {
    display: block;
}

.rp-acc__a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 44em;
    padding: 0 18px 18px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--rp-text);
}

/* Пътечката: „Начало / Страница“, целият път и на телефон, 14 px (Р-14); отстъпът вдясно пренася пътя преди слънцето. */
.rp-crumbs {
    padding-right: 48px;
    font-size: 14px;
    color: var(--rp-muted);
}

.rp-crumbs__link {
    transition: color var(--rp-t);
}

.rp-crumbs__link:hover {
    color: var(--rp-link);
}

.rp-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rp-crumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rp-crumbs__sep {
    color: var(--rp-quiet);
}

.rp-crumbs__item [aria-current="page"] {
    color: var(--rp-ink);
}

/* Съдържание от редактора */
.rp-prose {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--rp-text);
}

.rp-prose h2,
.rp-prose h3 {
    margin-top: 16px;
    font-family: var(--rp-display-font);
    font-weight: 800;
    color: var(--rp-ink);
    line-height: 1.25;
}

.rp-prose h2 {
    font-size: 23px;
}

.rp-prose h3 {
    font-size: 20px;
}

.rp-prose ul,
.rp-prose ol {
    margin: 0;
    padding-left: 1.3em;
}

.rp-prose li + li {
    margin-top: 6px;
}

.rp-prose a {
    font-weight: 600;
    color: var(--rp-link);
}

.rp-prose a:hover {
    color: var(--rp-ink);
}

.rp-prose li::marker {
    color: var(--rp-link);
}

.rp-prose img {
    border-radius: var(--rp-r-md);
}

/* „Цитат“ от редактора е сиво каре за бележка, без цветен ръб; в статията е по-голямо (.rp-art-body blockquote). */
.rp-prose blockquote {
    margin: 14px 0;
    padding: 18px 20px;
    border-radius: var(--rp-r-md);
    background: var(--rp-surface);
    color: var(--rp-text);
    font-size: 15px;
    line-height: 1.6;
}

.rp-prose blockquote > * + * {
    margin-top: 14px;
}

/* Таблица от редактора: на телефон редове с етикет на колоната (data-lb), от 768 px обикновена таблица. */
.rp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45;
}

.rp-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.rp-table tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--rp-line-soft);
}

.rp-table th,
.rp-table td {
    display: block;
    padding: 0;
    text-align: left;
    vertical-align: top;
}

.rp-table td + td {
    margin-top: 8px;
}

.rp-table td:first-child {
    font-weight: 600;
    color: var(--rp-ink);
}

.rp-table td[data-lb]::before {
    content: attr(data-lb);
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--rp-faint);
}

@media (min-width: 768px) {
    .rp-table thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
    }

    .rp-table tr {
        display: table-row;
        padding: 0;
        border-bottom: 0;
    }

    .rp-table th,
    .rp-table td {
        display: table-cell;
        padding: 12px 14px;
        border-bottom: 1px solid var(--rp-line-soft);
    }

    .rp-table td + td {
        margin-top: 0;
    }

    .rp-table td:first-child {
        font-weight: 400;
        color: inherit;
    }

    .rp-table td[data-lb]::before {
        content: none;
    }

    .rp-table th {
        font-weight: 600;
        color: var(--rp-ink);
    }

    .rp-prose blockquote {
        padding: 20px 24px;
    }
}

/* Лентата долу на телефон */
.rp-body--dock {
    padding-bottom: calc(var(--rp-dock-h) + env(safe-area-inset-bottom));
}

/* Бисквитките: лента долу вляво и панел с настройки. */
.rp-consent__banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r);
    background: #FFFFFF;
    box-shadow: 0 24px 60px -20px rgba(13, 22, 17, .35);
}

.rp-body--dock .rp-consent__banner {
    bottom: calc(var(--rp-dock-h) + 12px + env(safe-area-inset-bottom));
}

.rp-consent__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rp-consent__badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--rp-r-sm);
    background: var(--rp-surface);
    color: var(--rp-ink);
}

.rp-consent__title {
    font-size: 18px;
    letter-spacing: -.015em;
}

.rp-consent__text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--rp-text);
}

.rp-consent__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.rp-consent__pair .rp-btn {
    padding: 0 10px;
    font-size: 14px;
}

.rp-consent__more {
    align-self: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rp-link);
    font-size: 14px;
    font-weight: 600;
    transition: color var(--rp-t);
}

.rp-consent__more:hover {
    color: var(--rp-ink);
}

.rp-consent__overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(13, 22, 17, .45);
}

.rp-consent__panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: min(520px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px;
    border-radius: var(--rp-r-lg);
    background: #FFFFFF;
}

.rp-consent__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rp-consent__panel-title {
    font-size: 22px;
    letter-spacing: -.02em;
}

.rp-consent__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--rp-pill);
    background: var(--rp-surface);
    transition: background-color var(--rp-t);
}

.rp-consent__close:hover {
    background: var(--rp-surface);
}

.rp-consent__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rp-consent__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-md);
}

.rp-consent__row--fixed {
    border-color: var(--rp-surface);
    background: var(--rp-surface);
}

.rp-consent__row-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rp-consent__row-title {
    font-size: 16px;
    font-weight: 600;
}

.rp-consent__row-note {
    font-size: 14px;
    line-height: 1.45;
    color: var(--rp-muted);
}

/* Краят на страницата е по-близо до долната лента, а последната карта и до съдържанието над нея (Р-28). */
.rp-section--last {
    padding-bottom: var(--rp-section-end);
}

/* The error pages (Р-82): the louver mark, the code, the title, the way home and the phones. */
.rp-error {
    padding: 56px 0 48px;
}

.rp-error__code {
    display: block;
    font-family: var(--rp-display-font);
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: var(--rp-accent);
}

.rp-error__title {
    margin: 12px 0 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.15;
    color: var(--rp-ink);
}

.rp-error__text {
    max-width: 640px;
    margin: 12px 0 0;
    font-size: 18px;
}

.rp-error__acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 24px;
}

.rp-error__phones {
    font-size: 15px;
}

.rp-error__phone {
    font-weight: 700;
    white-space: nowrap;
}

.rp-error-next {
    padding: 0 0 64px;
}

.rp-error-next__title {
    margin: 0 0 16px;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 22px;
    color: var(--rp-ink);
}

/* Таблет: от 768 px */
@media (min-width: 768px) {
    :root {
        --rp-gutter: 32px;
        --rp-header-h: 80px;
        --rp-section-end: 64px;
    }

    .rp-body--dock {
        padding-bottom: 0;
    }

    

    

    

    

    

    .rp-more {
        padding-bottom: 6px;
    }

    .rp-acc {
        gap: 10px;
    }

    .rp-acc__item {
        border-radius: var(--rp-r);
    }

    .rp-acc__q {
        gap: 20px;
        padding: 22px 26px;
        font-size: 17.5px;
    }

    .rp-acc__sign {
        width: 36px;
        height: 36px;
    }

    .rp-acc__a {
        padding: 0 26px 24px;
    }

    .rp-file {
        align-items: flex-start;
    }

    .rp-add {
        gap: 10px;
        min-height: 48px;
        padding: 0 18px;
        font-size: 15px;
    }

    .rp-file__chosen {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 12px;
    }

    .rp-file__clear {
        grid-column: 3;
    }

    .rp-consent__banner {
        left: 24px;
        right: auto;
        width: 440px;
        bottom: 24px;
        padding: 24px;
    }

    .rp-body--dock .rp-consent__banner {
        bottom: 24px;
    }

    .rp-consent__panel {
        padding: 32px;
    }

    .rp-consent__pair .rp-btn {
        padding: 0 16px;
        font-size: 15px;
    }

    .rp-consent__panel-title {
        font-size: 24px;
    }

    .rp-crumbs {
        padding-right: 64px;
    }

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    .rp-error__code {
        font-size: 96px;
    }

    .rp-error__title {
        font-size: 40px;
    }

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    }

/* Компютър: от 1200 px */
@media (min-width: 1200px) {
    :root {
        --rp-gutter: 32px;
        --rp-header-h: 80px;
        --rp-section-end: 80px;
    }

    html {
        scroll-padding-top: 24px;
    }

    

    

    

    

    .rp-more {
        padding-bottom: 8px;
    }

    .rp-acc__a {
        font-size: 15.5px;
    }

    .rp-crumbs {
        padding-right: 0;
    }

    

    

    

    

    

    

    
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    .rp-error__code {
        font-size: 120px;
    }

    .rp-error__title {
        font-size: 48px;
    }

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    }

/* Печат: без лентите и плаващите бутони */
@media print {
    .rp-consent {
        display: none !important;
    }

    .rp-body--dock {
        padding-bottom: 0;
    }
}

/* ==== Блог, статия, въпроси, контакти, правни страници ==== */
/* Съдържанието: блогът, статията, честите въпроси, контактите и правните документи (Блог, Статия, Чести въпроси,
   Контакти, Общи условия .dc.html). Mobile-first като app.css: пречупвания 768 и 1200; общото за петте е rp-cnt-*. */

.rp-cnt-section {
    padding-top: 24px;
}

.rp-cnt-empty {
    padding: 24px;
    border-radius: var(--rp-r-card);
    background: var(--rp-surface);
    color: var(--rp-text);
    font-size: 16px;
    line-height: 1.55;
}

.rp-cnt-empty[hidden] {
    display: none;
}

/* Съдържанието на страницата: рамка в страничната колона (компютър) и сгъваем блок над текста (телефон, таблет) */
.rp-cnt-toc {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
}

.rp-cnt-toc__title {
    margin: 0 10px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rp-muted);
}

.rp-cnt-toc__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp-cnt-toc__link {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--rp-text-strong);
    font-size: 14.5px;
    line-height: 1.4;
    transition: background-color var(--rp-t), color var(--rp-t);
}

.rp-cnt-toc__link:hover {
    background: var(--rp-surface);
    color: var(--rp-link);
}

.rp-cnt-tocm {
    margin-bottom: 24px;
    border: 1px solid var(--rp-line);
    border-radius: 16px;
    background: #FFFFFF;
}

.rp-cnt-tocm__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    transition: color var(--rp-t);
}

.rp-cnt-tocm__summary::-webkit-details-marker {
    display: none;
}

.rp-cnt-tocm__summary::marker {
    content: '';
}

.rp-cnt-tocm__summary:hover {
    color: var(--rp-link);
}

.rp-cnt-tocm[open] .rp-cnt-tocm__icon {
    transform: rotate(180deg);
}

.rp-cnt-tocm .rp-cnt-toc__list {
    padding: 0 8px 12px;
}

/* Рекламата: банер 300 x 600 от „Банери“ в админа (x-banner), на телефон не се показва */
.rp-cnt-ad {
    display: none;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

.rp-cnt-ad__label {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--rp-muted);
}

/* Кутията е на ширината на колоната, творбата е в средата ѝ: най-много рисуваният размер, в по-тясна колона се свива */
.rp-cnt-ad__frame {
    display: block;
    overflow: hidden;
    border: 1px solid var(--rp-line);
    border-radius: 20px;
    background: var(--rp-surface);
    transition: border-color var(--rp-t);
}

.rp-cnt-ad__frame--link:hover {
    border-color: var(--rp-link);
}

.rp-cnt-ad__img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.rp-cnt-ad__html {
    display: block;
    width: 100%;
    max-width: calc(var(--rp-ad-w) * 1px);
    height: auto;
    aspect-ratio: var(--rp-ad-w) / var(--rp-ad-h);
    margin: 0 auto;
    border: 0;
}

.rp-blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

/* Текстът на статията от редактора: първият абзац е въведение, точките са зелени квадратчета */
.rp-art-body {
    gap: 14px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--rp-text-strong);
    counter-reset: rp-art-step;
}

.rp-art-body > p:first-child {
    font-size: 17px;
    line-height: 1.6;
}

.rp-art-body h2 {
    margin-top: 28px;
    font-size: 23px;
}

.rp-art-body h3 {
    margin-top: 8px;
    font-size: 18px;
}

.rp-art-body ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.rp-art-body ul > li {
    position: relative;
    padding-left: 26px;
}

.rp-art-body ul > li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rp-link);
}

.rp-art-body li + li {
    margin-top: 0;
}

.rp-art-body a {
    font-weight: 500;
    text-decoration-thickness: 1px;
}

/* Карето в статия („Каре“ в редактора): сиво, с пръстен в ъгъла, текстът е като в тялото */
.rp-art-body blockquote {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 18px 0 0;
    padding: 22px 20px;
    border-radius: var(--rp-r);
    color: var(--rp-text-strong);
    font-size: inherit;
    line-height: inherit;
}

/* Пръстенът е под целия текст, и под абзац без обвивка („Цитат“ от един ред). */
.rp-art-body blockquote::before {
    content: '';
    position: absolute;
    z-index: -1;
    right: -30px;
    top: -30px;
    width: 110px;
    height: 110px;
    border: 20px solid var(--rp-surface);
    border-radius: var(--rp-pill);
}

.rp-art-body blockquote > :first-child,
.rp-art-body .rp-art-step > :first-child {
    margin-top: 0;
}

.rp-art-body blockquote h2 {
    font-size: 20px;
    letter-spacing: -.02em;
}

/* Котвата към карето (съдържанието вдясно) показва цялото каре под лентата: отстъпът е горният падинг. */
.rp-art-body blockquote > h2:first-child {
    scroll-margin-top: 22px;
}

/* Стъпката („Стъпка“ в редактора): зелена значка с номера от брояча; на телефон до нея е само заглавието,
   текстът е на цяла ширина под тях, от 768 px цялата стъпка е вдясно от значката. */
.rp-art-step {
    position: relative;
    margin-top: 18px;
    counter-increment: rp-art-step;
}

.rp-art-step::before {
    content: counter(rp-art-step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--rp-r-sm);
    background: var(--rp-link);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.rp-art-body .rp-art-step > * + * {
    margin-top: 14px;
}

.rp-art-body .rp-art-step > :first-child {
    min-height: 44px;
    padding-left: 58px;
}

.rp-art-body .rp-art-step > h2:first-child {
    padding-top: 8px;
    font-size: 20px;
}

/* Числата в списък с номера: квадратче с цифрата, като в правния документ */
.rp-art-body ol,
.rp-legal-body ol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    list-style: none;
    counter-reset: rp-cnt-ol;
}

.rp-art-body ol > li,
.rp-legal-body ol > li {
    position: relative;
    min-height: 26px;
    padding-left: 40px;
    counter-increment: rp-cnt-ol;
}

.rp-art-body ol > li::before,
.rp-legal-body ol > li::before {
    content: counter(rp-cnt-ol);
    position: absolute;
    left: 0;
    top: 1px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--rp-surface);
    color: var(--rp-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

/* Честите въпроси */
.rp-faqp-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 640px;
    height: 54px;
    margin-top: 6px;
    padding: 0 18px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-pill);
    background: #FFFFFF;
    transition: border-color var(--rp-t), box-shadow var(--rp-t);
}

.rp-faqp-search:hover {
    border-color: var(--rp-quiet);
}

.rp-faqp-search:focus-within {
    border-color: var(--rp-link);
    box-shadow: 0 0 0 4px var(--rp-surface);
}

.rp-faqp-search__icon {
    color: var(--rp-faint);
}

.rp-faqp-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rp-ink);
    font-size: 16px;
    outline: none;
}

.rp-faqp-search__input::placeholder {
    color: var(--rp-faint);
    opacity: 1;
}

.rp-faqp-search__input:focus-visible {
    outline: none;
}

.rp-faqp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.rp-faqp-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rp-faqp-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--rp-field);
    border-radius: var(--rp-pill);
    background: #FFFFFF;
    color: var(--rp-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    transition: border-color var(--rp-t), background-color var(--rp-t), color var(--rp-t);
}

.rp-faqp-cat:hover {
    border-color: var(--rp-link);
}

.rp-faqp-cat.is-active {
    border-color: var(--rp-surface);
    background: var(--rp-surface);
    color: var(--rp-link);
    font-weight: 600;
}

.rp-faqp-cat__count {
    font-size: 14px;
    font-weight: 500;
    color: var(--rp-faint);
}

.rp-faqp-cat.is-active .rp-faqp-cat__count {
    color: var(--rp-link);
    font-weight: 600;
}

.rp-faqp-list {
    display: flex;
    flex-direction: column;
    gap: 36px;
    min-width: 0;
}

.rp-faqp-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rp-faqp-group[hidden],
.rp-acc__item[hidden] {
    display: none;
}

.rp-faqp-group__title {
    margin-bottom: 4px;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.rp-faqp-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rp-faqp-none {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Правният документ */
.rp-legal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

.rp-legal__main {
    min-width: 0;
}

.rp-legal__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rp-cnt-toc--legal {
    gap: 2px;
    padding: 20px;
}

.rp-legal-docs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px;
    border-radius: var(--rp-r-card);
    background: var(--rp-surface);
}

.rp-legal-docs__link {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--rp-text-strong);
    font-size: 14.5px;
    line-height: 1.4;
    transition: background-color var(--rp-t), color var(--rp-t);
}

.rp-legal-docs__link:hover {
    background: #FFFFFF;
    color: var(--rp-link);
}

.rp-legal-docs__link.is-current {
    background: #FFFFFF;
    color: var(--rp-link);
    font-weight: 600;
}

/* Решението за бисквитките на правната страница: карта над документа, бутонът е под разделител. */
.rp-consent-card {
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid var(--rp-line);
    border-radius: 16px;
    background: #FFFFFF;
}

.rp-consent-card__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--rp-text-strong);
}

.rp-consent-card__body {
    min-width: 0;
}

.rp-consent-card__none {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--rp-muted);
}

.rp-consent-card__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 16px;
    margin: 0;
}

.rp-consent-card__list dt {
    font-size: 14px;
    color: var(--rp-muted);
}

.rp-consent-card__list dd {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--rp-text-strong);
    overflow-wrap: anywhere;
}

.rp-consent-card__list dd.is-yes {
    color: var(--rp-link);
}

.rp-consent-card__list dd.is-no {
    color: var(--rp-muted);
}

.rp-consent-card__foot {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rp-line);
}

@media (min-width: 768px) {
    .rp-consent-card__list {
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 8px 20px;
    }

    .rp-consent-card__list dd {
        margin: 0;
    }
}

.rp-legal-body {
    gap: 14px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--rp-text-strong);
}

.rp-legal-body h2 {
    margin-top: 20px;
    padding-top: 24px;
    border-top: 1px solid var(--rp-line);
    font-size: 22px;
}

.rp-legal-body h3 {
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.rp-legal-body a {
    font-weight: 500;
}

.rp-legal-body ul {
    padding-left: 1.2em;
}

/* Таблет: от 768 px */
@media (min-width: 768px) {
    

    .rp-cnt-section {
        padding-top: 40px;
    }

    

    .rp-cnt-empty {
        padding: 32px;
        border-radius: var(--rp-r-lg);
    }

    

    

    

    

    .rp-cnt-ad {
        display: flex;
    }

    

    

    

    

    

    

    

    

    

    .rp-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 20px;
    }

    

    

    

    

    

    

    

    

    

    

    .rp-art-body {
        font-size: 17px;
    }

    .rp-art-body > p:first-child {
        font-size: 19px;
    }

    .rp-art-body h2 {
        margin-top: 44px;
        font-size: 28px;
    }

    .rp-art-body ul {
        gap: 12px;
    }

    .rp-art-body blockquote {
        margin-top: 26px;
        padding: 28px 30px;
    }

    .rp-art-body blockquote h2 {
        font-size: 22px;
    }

    .rp-art-body blockquote > h2:first-child {
        scroll-margin-top: 28px;
    }

    .rp-art-step {
        min-height: 52px;
        margin-top: 26px;
        padding-left: 72px;
    }

    .rp-art-body .rp-art-step > :first-child {
        min-height: 0;
        padding-left: 0;
    }

    .rp-art-step::before {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 20px;
    }

    .rp-art-body .rp-art-step > h2:first-child {
        padding-top: 10px;
        font-size: 26px;
    }

    .rp-faqp-search {
        height: 60px;
        margin-top: 14px;
        padding: 0 22px;
    }

    .rp-faqp-group__title {
        font-size: 26px;
        margin-bottom: 8px;
    }

    

    

    

    

    

    

    

    

    
    

    

    

    

    

    

    .rp-legal-body {
        font-size: 16.5px;
    }

    .rp-legal-body h2 {
        margin-top: 26px;
        padding-top: 28px;
        font-size: 26px;
    }

    .rp-legal-body h3 {
        margin-top: 14px;
        font-size: 18px;
    }
}

/* Компютър: от 1200 px */
@media (min-width: 1200px) {
    

    

    

    .rp-cnt-section {
        padding-top: 48px;
    }

    

    .rp-cnt-empty {
        padding: 40px;
    }

    .rp-cnt-toc {
        display: flex;
    }

    .rp-cnt-tocm {
        display: none;
    }

    

    

    .rp-cnt-ad {
        max-width: none;
    }

    

    

    

    

    

    .rp-blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 24px;
    }

    

    

    

    

    
    

    

    

    

    

    

    

    

    

    

    /* Страничната колона е по-висока от екрана: лепи се само последната карта, иначе долната част не се вижда. */
    
    .rp-faqp-side > :last-child {
        position: sticky;
        top: 24px;
    }

    .rp-art-body > p:first-child {
        font-size: 20px;
    }

    .rp-art-body h2 {
        margin-top: 34px;
        font-size: 28px;
    }

    

    .rp-faqp-grid {
        grid-template-columns: 280px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 48px;
        row-gap: 16px;
        align-items: start;
    }

    .rp-faqp-cats {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .rp-faqp-cat {
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        padding: 8px 16px;
        border: 0;
        border-radius: var(--rp-r-sm);
        background: transparent;
        font-size: 15px;
    }

    .rp-faqp-cat:hover {
        background: var(--rp-surface);
    }

    .rp-faqp-cat.is-active {
        background: var(--rp-surface);
    }

    .rp-faqp-cat__name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .rp-faqp-cat__count {
        font-size: 13px;
    }

    .rp-faqp-list {
        grid-column: 2;
        grid-row: 1 / span 2;
        gap: 48px;
    }

    .rp-faqp-side {
        grid-column: 1;
        grid-row: 2;
        align-self: stretch;
    }

    

    

    

    .rp-faqp-list .rp-acc__q {
        font-size: 17px;
        letter-spacing: 0;
    }

    .rp-faqp-list .rp-acc__a {
        gap: 14px;
        max-width: none;
        line-height: 1.65;
    }

    .rp-faqp-list .rp-acc__a p {
        max-width: 46em;
    }

    .rp-faqp-list .rp-acc__a .rp-more {
        font-size: 14.5px;
        font-weight: 600;
    }

    .rp-faqp-group__title {
        font-size: 28px;
    }

    

    

    
    

    

    

    

    

    .rp-legal {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 64px;
        align-items: start;
    }

    .rp-legal__main {
        grid-column: 2;
        grid-row: 1;
        max-width: 760px;
    }

    .rp-legal__side {
        position: sticky;
        top: 24px;
        grid-column: 1;
        grid-row: 1;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .rp-legal-body h2 {
        margin-top: 26px;
    }
}

/* ==== The layout of TopFence (design: Main and Phone) ==== */
/* Mobile first: the phone; the top bar and the quote button from 768 px, the menu from 1024 px, "Track a request" from 1200 px. */

/* The top bar */
.rp-topbar {
    --rp-focus: var(--rp-accent);
    display: none;
    background: var(--rp-dark);
    color: var(--rp-on-dark);
    font-size: 14px;
}

.rp-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.rp-topbar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.rp-topbar__link {
    color: var(--rp-on-dark-strong);
    font-weight: 600;
    transition: color var(--rp-t);
}

.rp-topbar__link:hover {
    color: var(--rp-accent);
}

/* The header */
.rp-header {
    position: relative;
    z-index: 40;
    background: #FFFFFF;
    border-bottom: 1px solid var(--rp-line);
}

.rp-header__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--rp-header-h);
}

.rp-header__burger,
.rp-header__call {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-btn);
    background: #FFFFFF;
    color: var(--rp-ink);
    cursor: pointer;
    transition: border-color var(--rp-t), color var(--rp-t);
}

.rp-header__burger:hover,
.rp-header__call:hover {
    border-color: var(--rp-ink);
}

.rp-nav {
    display: none;
}

.rp-nav__list {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rp-nav__link {
    color: var(--rp-ink);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--rp-t);
}

.rp-nav__link:hover,
.rp-nav__link.is-active {
    color: var(--rp-link);
}

.rp-header__end {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.rp-header__track,
.rp-header__cta {
    display: none;
}

.rp-header__track {
    font-size: 15px;
}

.rp-header__cta {
    min-height: 46px;
    padding: 0 20px;
    white-space: nowrap;
}

/* The logo: the mark and the name in Raleway, the line under it in spaced capitals; white in the footer. */
.rp-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rp-ink);
}

.rp-logo__mark {
    flex: none;
    width: 24px;
    height: 28px;
}

.rp-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.rp-logo__name {
    font-family: var(--rp-display-font);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .01em;
}

.rp-logo__tag {
    margin-top: 4px;
    color: var(--rp-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.rp-logo__img {
    display: block;
    width: auto;
    max-height: 40px;
}

.rp-logo--light {
    color: #FFFFFF;
}

.rp-logo--light .rp-logo__tag {
    color: var(--rp-on-dark);
}

/* The menu on the whole screen (phone and tablet) */
.rp-drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    background: #FFFFFF;
}

.rp-drawer__head {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--rp-header-h);
    border-bottom: 1px solid var(--rp-line);
}

.rp-drawer__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 8px;
    padding-bottom: 32px;
}

.rp-drawer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rp-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rp-line);
    color: var(--rp-ink);
    font-family: var(--rp-display-font);
    font-size: 20px;
    font-weight: 800;
    transition: color var(--rp-t);
}

.rp-drawer__link:hover,
.rp-drawer__link.is-active {
    color: var(--rp-link);
}

.rp-drawer__contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rp-drawer__phone,
.rp-drawer__mail {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rp-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
    transition: color var(--rp-t);
}

.rp-drawer__phone:hover,
.rp-drawer__mail:hover {
    color: var(--rp-link);
}

.rp-drawer__lang {
    min-width: 60px;
    color: var(--rp-muted);
    font-weight: 500;
}

/* The bar at the bottom of a phone: "Call" and "Get a quote" */
.rp-body--dock {
    padding-bottom: calc(var(--rp-dock-h) + env(safe-area-inset-bottom));
}

.rp-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rp-line);
    background: #FFFFFF;
}

.rp-dock__call,
.rp-dock__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: var(--rp-r-btn);
    font-weight: 700;
    transition: background-color var(--rp-t), border-color var(--rp-t);
}

.rp-dock__call {
    border: 1px solid var(--rp-field);
    color: var(--rp-ink);
}

.rp-dock__call:hover {
    border-color: var(--rp-ink);
}

.rp-dock__main {
    background: var(--rp-accent);
    color: var(--rp-ink);
}

.rp-dock__main:hover {
    background: var(--rp-accent-hover);
}

html.rp-typing .rp-dock,
html.rp-typing .rp-totop {
    display: none;
}

/* "Back to top": a circle whose ring fills with the scroll; on a phone above the bottom bar. */
.rp-totop {
    position: fixed;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 44;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--rp-line);
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--rp-ink);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, color var(--rp-t), border-color var(--rp-t);
}

.rp-body--dock .rp-totop {
    bottom: calc(var(--rp-dock-h) + 14px + env(safe-area-inset-bottom));
}

.rp-totop.is-on {
    opacity: 1;
    pointer-events: auto;
}

.rp-totop:hover {
    border-color: var(--rp-ink);
    color: var(--rp-link);
}

.rp-totop .rp-icon {
    position: relative;
    z-index: 1;
}

.rp-totop__ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(var(--rp-accent) var(--p, 0%), rgba(27, 35, 42, .1) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    pointer-events: none;
}

/* The footer */
.rp-footer {
    --rp-focus: var(--rp-accent);
    background: var(--rp-dark);
    color: var(--rp-on-dark);
    font-size: 15px;
}

.rp-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 28px;
}

.rp-footer__about {
    max-width: 320px;
    margin-top: 16px;
}

.rp-footer__fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 18px;
    border-radius: 50%;
    background: var(--rp-dark-2);
    color: #FFFFFF;
    transition: background-color var(--rp-t), color var(--rp-t);
}

.rp-footer__fb:hover {
    background: var(--rp-accent);
    color: var(--rp-ink);
}

.rp-footer__title {
    display: block;
    margin-bottom: 14px;
    color: #FFFFFF;
    font-family: var(--rp-display-font);
    font-size: 16px;
    font-weight: 800;
}

.rp-footer__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rp-footer__link,
.rp-footer__legal-link {
    color: var(--rp-on-dark);
    transition: color var(--rp-t);
}

.rp-footer__strong {
    color: #FFFFFF;
    font-weight: 600;
    transition: color var(--rp-t);
}

.rp-footer__email {
    overflow-wrap: anywhere;
}

.rp-footer__link:hover,
.rp-footer__legal-link:hover,
.rp-footer__strong:hover {
    color: var(--rp-accent);
}

.rp-footer__base {
    border-top: 1px solid var(--rp-dark-2);
}

.rp-footer__company {
    margin: 0 auto;
    padding-top: 18px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.rp-footer__company + .rp-footer__bottom {
    padding-top: 10px;
}

/* The "back to top" circle (14 + 46 px from the corner): the links keep out of its column, the rows above end over it. */
.rp-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 34px;
    font-size: 13px;
}

.rp-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-right: calc(76px - var(--rp-gutter));
}

@media (min-width: 1360px) {
    .rp-footer__legal {
        padding-right: 0;
    }
}

button.rp-footer__legal-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

@media (min-width: 768px) {
    .rp-topbar {
        display: block;
    }

    .rp-header__call,
    .rp-dock {
        display: none;
    }

    .rp-body--dock {
        padding-bottom: 0;
    }

    .rp-body--dock .rp-totop {
        bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .rp-header__inner {
        gap: 20px;
    }

    .rp-header__cta {
        display: inline-flex;
    }

    .rp-logo {
        gap: 10px;
    }

    .rp-logo__mark {
        width: 28px;
        height: 33px;
    }

    .rp-logo__name {
        font-size: 22px;
    }

    .rp-logo__tag {
        margin-top: 5px;
        font-size: 11px;
    }

    .rp-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
        padding-top: 64px;
        padding-bottom: 48px;
    }

    .rp-footer__bottom {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px 24px;
        padding-top: 20px;
        padding-bottom: 24px;
    }

    .rp-footer__legal {
        gap: 8px 20px;
    }
}

@media (min-width: 1024px) {
    .rp-header__inner > .rp-header__burger {
        display: none;
    }

    .rp-nav {
        display: block;
        margin-left: 14px;
    }

    .rp-nav__list {
        gap: 18px;
    }

    .rp-footer__grid {
        grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .rp-nav {
        margin-left: 28px;
    }

    .rp-nav__list {
        gap: 28px;
    }

    .rp-header__track {
        display: inline;
    }
}

/* ==== The services (design: Services and Service; the page of a service is a portfolio, Р-35) ==== */
.rp-svc-intro__title {
    margin: 16px 0 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.1;
    color: var(--rp-ink);
    overflow-wrap: anywhere;
}

.rp-svc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.rp-svc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--rp-field);
    border-radius: var(--rp-pill);
    background: #FFFFFF;
    color: var(--rp-ink);
    font-size: 15px;
    font-weight: 600;
}

.rp-svc-chip:hover {
    border-color: var(--rp-ink);
    color: var(--rp-ink);
}

.rp-svc-chip--all {
    border-color: var(--rp-ink);
    background: var(--rp-ink);
    color: #FFFFFF;
}

.rp-svc-chip--all:hover {
    background: var(--rp-dark-hover);
    color: #FFFFFF;
}

.rp-svc-chip__count {
    font-weight: 500;
    color: var(--rp-muted);
}

.rp-svc-group {
    padding-top: 48px;
}

.rp-svc-group__head,
.rp-svc-related__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 24px;
    margin-bottom: 20px;
}

.rp-svc-group__head {
    justify-content: flex-start;
}

.rp-svc-group__title,
.rp-svc-photos__title,
.rp-svc-how__title,
.rp-svc-related__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.2;
    color: var(--rp-ink);
}

.rp-svc-group__note {
    font-size: 15px;
    color: var(--rp-muted);
}

.rp-svc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.rp-svc-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    background: #FFFFFF;
    color: var(--rp-text);
    transition: border-color var(--rp-t);
}

.rp-svc-card:hover {
    color: var(--rp-text);
    border-color: var(--rp-field);
}

.rp-svc-card:hover .rp-svc-card__title {
    color: var(--rp-link);
}

/* The photo of a card comes a little closer inside its frame on hover; the card itself stays where it is (WORKFLOW 9.2). */
.rp-card-media {
    display: block;
    overflow: hidden;
}

.rp-card-media > img {
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
    a:hover > .rp-card-media > img {
        transform: scale(1.04);
    }
}

.rp-svc-card__img,
.rp-svc-card__placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.rp-svc-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rp-surface);
    color: var(--rp-muted);
}

.rp-svc-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 20px;
}

.rp-svc-card__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 19px;
    line-height: 1.3;
    color: var(--rp-ink);
    transition: color var(--rp-t);
}

.rp-svc-card__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--rp-muted);
}

.rp-svc-card__count {
    margin-top: auto;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rp-link);
}

.rp-svc-empty {
    margin: 0;
    padding: 24px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    background: #FFFFFF;
}

.rp-svc-custom {
    padding: 56px 0 72px;
}

.rp-svc-custom__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 24px;
    padding: 24px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    background: var(--rp-surface);
}

.rp-svc-custom__body {
    max-width: 620px;
    min-width: 0;
}

.rp-svc-custom__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
    color: var(--rp-ink);
}

.rp-svc-custom__text {
    margin: 8px 0 0;
}

.rp-svc-top {
    padding: 24px 0 48px;
}

.rp-svc-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--rp-line);
    border-radius: 12px;
    background: #fff;
    color: var(--rp-text);
    font-size: 14px;
}

.rp-svc-preview .icon { flex: none; color: var(--rp-link); }

.rp-svc-top__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 24px;
}

.rp-svc-lead {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
}

.rp-svc-lead__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--rp-r-card);
}

.rp-svc-lead__cap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 12px;
    font-size: 15px;
    color: var(--rp-muted);
}

.rp-svc-lead__all,
.rp-svc-related__all {
    font-weight: 700;
}

.rp-svc-intro {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rp-svc-intro__title {
    margin-top: 0;
}

.rp-svc-intro__text {
    margin: 16px 0 0;
    font-size: 18px;
}

.rp-svc-ticks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.rp-svc-ticks__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rp-svc-ticks__item .rp-icon {
    margin-top: 3px;
    color: var(--rp-link);
}

.rp-svc-quote {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
    padding: 24px;
    border-radius: var(--rp-r-card);
    background: var(--rp-surface);
}

.rp-svc-options__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 22px;
    color: var(--rp-ink);
}

.rp-svc-photos {
    padding: 56px 0;
    background: var(--rp-surface);
    border-top: 1px solid var(--rp-line);
    border-bottom: 1px solid var(--rp-line);
}

.rp-svc-photos__text {
    margin: 6px 0 24px;
    color: var(--rp-muted);
}

.rp-svc-masonry {
    columns: 2;
    column-gap: 10px;
}

.rp-svc-shot {
    display: block;
    margin: 0 0 10px;
    overflow: hidden;
    border: 2px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    background: #FFFFFF;
    cursor: zoom-in;
    break-inside: avoid;
}

.rp-svc-shot:hover {
    border-color: var(--rp-ink);
}

.rp-svc-shot__img {
    display: block;
    width: 100%;
    height: auto;
}

.rp-svc-details {
    padding: 56px 0 64px;
}

.rp-svc-details__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.rp-svc-how__body > * {
    margin: 14px 0 0;
}

.rp-svc-options {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
}

.rp-svc-options__title {
    margin-bottom: 12px;
    font-size: 20px;
}

.rp-svc-options__list {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    margin: 0;
    font-size: 16px;
}

.rp-svc-options__name,
.rp-svc-options__value {
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--rp-line);
}

.rp-svc-options__name {
    padding-right: 12px;
    font-weight: 600;
    color: var(--rp-ink);
}

.rp-svc-options__value {
    color: var(--rp-muted);
}

.rp-svc-options__cta {
    width: 100%;
    margin-top: 20px;
}

.rp-svc-related {
    padding: 56px 0 72px;
    background: var(--rp-surface);
    border-top: 1px solid var(--rp-line);
}

.rp-svc-related__head {
    align-items: flex-end;
    margin-bottom: 24px;
}

@media (min-width: 640px) {
    .rp-svc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .rp-svc-masonry {
        columns: 3 180px;
        column-gap: 16px;
    }

    .rp-svc-shot {
        margin-bottom: 16px;
    }
}

@media (min-width: 768px) {
    .rp-svc-intro__title {
        font-size: 46px;
    }

    .rp-svc-group {
        padding-top: 64px;
    }

    .rp-svc-group__title,
    .rp-svc-photos__title,
    .rp-svc-how__title,
    .rp-svc-related__title {
        font-size: 30px;
    }

    .rp-svc-custom {
        padding: 80px 0 96px;
    }

    .rp-svc-custom__box {
        padding: 36px 40px;
    }

    .rp-svc-custom__title {
        font-size: 28px;
    }

    .rp-svc-photos,
    .rp-svc-details,
    .rp-svc-related {
        padding-top: 72px;
        padding-bottom: 80px;
    }
}

@media (min-width: 1024px) {
    .rp-svc-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .rp-svc-masonry {
        columns: 5 200px;
    }

    .rp-svc-top__grid--lead {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 48px;
        align-items: stretch;
    }

    .rp-svc-top__grid--lead .rp-svc-lead__img {
        flex: 1;
        min-height: 360px;
        aspect-ratio: auto;
    }

    .rp-svc-details__grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: 48px;
    }
}

/* The request for a quote, its thanks and the tracking (design: Request a quote, Track a request) */
.rp-q-body {
    padding: 36px 0 72px;
}

.rp-q-grid,
.rp-t-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.rp-q-form,
.rp-q-form__body,
.rp-q-side,
.rp-t-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rp-q-form__body {
    gap: 32px;
}

.rp-q-side {
    gap: 20px;
}

.rp-t-main {
    gap: 24px;
}

.rp-q-set {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.rp-q-legend {
    margin-bottom: 16px;
    padding: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    color: var(--rp-ink);
}

.rp-q-legend + .rp-hint {
    margin-top: -12px;
}

.rp-q-pair,
.rp-q-trio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* The choices are labels around a hidden box: the checked one is dark (the works) or has the dot (the language). */
.rp-q-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rp-q-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--rp-field);
    border-radius: var(--rp-pill);
    background: #FFFFFF;
    color: var(--rp-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--rp-t), border-color var(--rp-t), color var(--rp-t);
}

.rp-q-pick:hover {
    border-color: var(--rp-ink);
}

.rp-q-pick > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.rp-q-pick:has(> input:focus-visible) {
    outline: 3px solid var(--rp-focus);
    outline-offset: 2px;
}

.rp-q-pick__box {
    display: none;
}

.rp-q-pick:has(> input:checked) {
    border-color: var(--rp-ink);
    background: var(--rp-ink);
    color: #FFFFFF;
}

.rp-q-pick:has(> input:checked) .rp-q-pick__box {
    display: inline-flex;
}

.rp-q-pick--radio {
    gap: 10px;
    border-radius: var(--rp-r-btn);
}

.rp-q-pick__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--rp-field);
    border-radius: 50%;
}

.rp-q-pick__dot::after {
    content: '';
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rp-ink);
}

.rp-q-pick--radio:has(> input:checked) {
    border-color: var(--rp-ink);
    background: #FFFFFF;
    color: var(--rp-ink);
}

.rp-q-pick--radio:has(> input:checked) .rp-q-pick__dot {
    border-color: var(--rp-ink);
}

.rp-q-pick--radio:has(> input:checked) .rp-q-pick__dot::after {
    display: block;
}

.rp-q-langs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-q-send {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 28px;
    border-top: 1px solid var(--rp-line);
}

.rp-q-send__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.rp-q-summary {
    font-size: 15px;
    color: var(--rp-muted);
}

.rp-q-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
}

.rp-q-consent__box {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    border: 1px solid var(--rp-field);
    border-radius: var(--rp-r-btn);
    background: #FFFFFF center / 14px no-repeat;
    appearance: none;
    cursor: pointer;
    transition: background-color var(--rp-t), border-color var(--rp-t);
}

.rp-q-consent:hover .rp-q-consent__box {
    border-color: var(--rp-ink);
}

.rp-q-consent__box:focus-visible {
    outline: 3px solid var(--rp-focus);
    outline-offset: 2px;
}

.rp-q-consent__box[aria-invalid="true"] {
    border-color: var(--rp-red);
}

.rp-q-consent__box:checked {
    border-color: var(--rp-ink);
    background-color: var(--rp-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5 11-11'/%3E%3C/svg%3E");
}

.rp-q-link {
    color: var(--rp-link);
    font-weight: 600;
    transition: color var(--rp-t);
}

.rp-q-link:hover {
    color: var(--rp-ink);
}

/* The side cards: what happens next, your request, and the phones in the dark one. */
.rp-q-card,
.rp-t-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    background: #FFFFFF;
}

.rp-q-card--dark {
    border-color: var(--rp-dark);
    background: var(--rp-dark);
    color: var(--rp-on-dark);
}

.rp-q-card__title {
    margin-bottom: 16px;
    font-size: 20px;
    line-height: 1.25;
    color: var(--rp-ink);
}

.rp-q-card--dark .rp-q-card__title {
    margin-bottom: 12px;
    color: #FFFFFF;
}

.rp-q-card__text {
    margin-bottom: 10px;
    font-size: 15px;
}

.rp-q-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rp-q-steps__item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
}

.rp-q-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rp-surface);
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 14px;
    color: var(--rp-ink);
}

.rp-q-steps__title {
    display: block;
    font-weight: 700;
    color: var(--rp-ink);
}

.rp-q-steps__text {
    display: block;
    font-size: 15px;
}

.rp-q-phones {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rp-q-phones__link {
    color: #FFFFFF;
    font-weight: 700;
    white-space: nowrap;
    transition: color var(--rp-t);
}

.rp-q-phones__link:hover {
    color: var(--rp-accent);
}

.rp-q-track {
    padding: 0 4px;
    font-size: 15px;
    color: var(--rp-muted);
}

/* The thanks: the number with its copy button, the email it went to and the way to the tracking. */
.rp-q-done {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.rp-q-done__label,
.rp-t-card__number {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rp-muted);
}

.rp-q-done__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.rp-q-done__number {
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 34px;
    line-height: 1.1;
    color: var(--rp-ink);
    overflow-wrap: anywhere;
}

.rp-q-done__work {
    font-weight: 600;
    color: var(--rp-ink);
}

/* The short form: plain in the grey box of a service page, a white card in the hero of the home page. */
.rp-q-short {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.rp-q-short__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.rp-q-short__title {
    font-size: 22px;
    line-height: 1.2;
    color: var(--rp-ink);
}

.rp-q-short__sub,
.rp-q-short__call {
    font-size: 14px;
    color: var(--rp-muted);
}

.rp-q-short .rp-q-consent {
    font-size: 14px;
}

.rp-q-short__send {
    width: 100%;
    min-height: 50px;
}

/* The tracking: the lookup in the head, then the state and the quote, the steps, and the request at the side. */
.rp-t-lookup {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    max-width: 760px;
    margin-top: 24px;
}

.rp-t-lookup > .rp-form-alert {
    grid-column: 1 / -1;
}

.rp-t-lookup + .rp-form-alert {
    max-width: 760px;
    margin-top: 16px;
}

/* Before a lookup (design: Track before a lookup): the lookup in a card with where the number is, beside the phones
   and the way to a quote; under them the seven steps the tracking shows. */
.rp-t-start {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 28px;
}

.rp-t-find .rp-t-lookup {
    margin-top: 0;
}

.rp-t-find__hint {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--rp-line);
    font-size: 15px;
    color: var(--rp-muted);
}

.rp-t-find__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--rp-r-card);
    background: var(--rp-surface);
    color: var(--rp-ink);
}

.rp-t-new__btn {
    margin-top: 6px;
}

.rp-t-way {
    padding: 48px 0 64px;
}

.rp-t-way__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    color: var(--rp-ink);
}

.rp-t-way__lead {
    max-width: 640px;
    margin: 10px 0 0;
}

.rp-t-way__steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.rp-t-way__step {
    position: relative;
    display: flex;
    gap: 16px;
    min-width: 0;
    padding-bottom: 22px;
}

.rp-t-way__step::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--rp-line);
}

.rp-t-way__step:last-child {
    padding-bottom: 0;
}

.rp-t-way__step:last-child::after {
    display: none;
}

.rp-t-way__num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    box-sizing: border-box;
    border: 2px solid var(--rp-field);
    border-radius: 50%;
    background: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    color: var(--rp-ink);
}

.rp-t-way__body {
    min-width: 0;
    padding-top: 6px;
}

.rp-t-way__name {
    display: block;
    font-weight: 700;
    color: var(--rp-ink);
}

.rp-t-way__text {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    color: var(--rp-muted);
}

@media (min-width: 960px) {
    /* One row, one height (WORKFLOW 9.2): the card with the lookup reaches the foot of the side cards. */
    .rp-t-start {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 32px;
        align-items: stretch;
    }

    .rp-t-find {
        display: flex;
        flex-direction: column;
    }

    .rp-t-find > .rp-t-lookup,
    .rp-t-find > .rp-form-alert {
        margin-bottom: 22px;
    }

    .rp-t-find__hint {
        margin-top: auto;
    }

    .rp-t-way {
        padding: 64px 0 88px;
    }

    .rp-t-way__title {
        font-size: 32px;
    }

    .rp-t-way__steps {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 20px;
    }

    .rp-t-way__step {
        flex-direction: column;
        gap: 12px;
        padding-bottom: 0;
    }

    .rp-t-way__step::after {
        top: 17px;
        left: 44px;
        right: -14px;
        bottom: auto;
        width: auto;
        height: 2px;
    }

    .rp-t-way__body {
        padding-top: 0;
    }
}

.rp-t-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
}

.rp-t-card__number {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.rp-t-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-btn);
    background: #FFFFFF;
    color: var(--rp-ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: border-color var(--rp-t), background-color var(--rp-t);
}

.rp-t-copy:hover {
    border-color: var(--rp-ink);
    background: var(--rp-surface);
}

.rp-t-card__title {
    margin-top: 4px;
    font-size: 26px;
    line-height: 1.2;
    color: var(--rp-ink);
}

.rp-t-card__text {
    margin-top: 6px;
}

.rp-t-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: var(--rp-pill);
    background: var(--rp-accent-50);
    color: var(--rp-ink);
    font-size: 14px;
    font-weight: 700;
}

.rp-t-pill--done {
    background: var(--rp-surface);
}

.rp-t-flash {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--rp-r-btn);
    background: var(--rp-surface);
    color: var(--rp-ink);
    font-weight: 600;
}

.rp-t-card > .rp-form-alert {
    margin-top: 16px;
}

.rp-t-quote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--rp-line);
}

.rp-t-quote__icon {
    box-sizing: content-box;
    padding: 12px;
    border-radius: var(--rp-r-card);
    background: var(--rp-surface);
    color: var(--rp-ink);
}

.rp-t-quote__body {
    flex: 1 1 200px;
    min-width: 0;
}

.rp-t-quote__title {
    font-weight: 700;
    color: var(--rp-ink);
    overflow-wrap: anywhere;
}

.rp-t-quote__amount {
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 22px;
    color: var(--rp-ink);
}

.rp-t-quote__meta {
    font-size: 15px;
    color: var(--rp-muted);
}

.rp-t-quote__links,
.rp-t-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 12px;
}

.rp-t-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--rp-line);
}

.rp-t-actions + .rp-hint {
    margin-top: 14px;
}

.rp-t-ask {
    flex: 1 1 260px;
    min-width: 0;
}

.rp-t-ask > summary {
    list-style: none;
}

.rp-t-ask > summary::-webkit-details-marker {
    display: none;
}

.rp-t-ask[open] > summary {
    border-color: var(--rp-ink);
}

.rp-t-ask__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
}

.rp-t-ask__form > .rp-input {
    width: 100%;
}

.rp-t-card__sub {
    margin-bottom: 16px;
    font-size: 20px;
    line-height: 1.25;
    color: var(--rp-ink);
}

/* The seven steps: a ring with a tick when done, the orange ring for the current one, a grey ring for the rest. */
.rp-t-steps {
    display: flex;
    flex-direction: column;
}

.rp-t-step {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 14px;
    padding-bottom: 22px;
}

.rp-t-step:last-child {
    padding-bottom: 0;
}

.rp-t-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--rp-line);
}

.rp-t-step.is-done:not(:last-child)::before {
    background: var(--rp-ink);
}

.rp-t-step__mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--rp-field);
    border-radius: 50%;
    background: #FFFFFF;
    color: #FFFFFF;
}

.rp-t-step.is-done .rp-t-step__mark {
    border-color: var(--rp-ink);
    background: var(--rp-ink);
}

.rp-t-step.is-current .rp-t-step__mark {
    border-color: var(--rp-accent-hover);
}

.rp-t-step__body {
    min-width: 0;
}

.rp-t-step__title {
    display: block;
    font-weight: 700;
    color: var(--rp-ink);
}

.rp-t-step__text {
    display: block;
    font-size: 15px;
    color: var(--rp-muted);
}

.rp-t-step__date {
    font-size: 14px;
    color: var(--rp-muted);
    white-space: nowrap;
}

.rp-t-facts {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    font-size: 15px;
}

.rp-t-facts > dt,
.rp-t-facts > dd {
    padding: 10px 0;
    border-top: 1px solid var(--rp-line);
    overflow-wrap: anywhere;
}

.rp-t-facts > dt {
    padding-right: 12px;
    font-weight: 600;
    color: var(--rp-ink);
}

.rp-t-facts > dt:nth-last-of-type(1),
.rp-t-facts > dd:last-child {
    border-bottom: 1px solid var(--rp-line);
}

@media (min-width: 560px) {
    .rp-q-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rp-t-lookup {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }
}

@media (min-width: 768px) {
    .rp-q-body {
        padding: 48px 0 96px;
    }

    .rp-q-trio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rp-t-card__title {
        font-size: 30px;
    }
}

@media (min-width: 1024px) {
    .rp-q-grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 48px;
    }

    .rp-t-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 48px;
    }
}

/* ==== The home page (design: Main, Р-78) ==== */
/* Mobile first: one column; two columns of cards from 640 px; the hero beside the slider and four columns from 1024 px. */
@property --rp-louver {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.rp-home-hero {
    padding: 40px 0 48px;
}

/* On a phone the photos come before the form, as in the phone design: title, slider, form. */
.rp-home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.rp-home-hero__main,
.rp-home-hero__form {
    min-width: 0;
}

.rp-home-hero__grid--solo > *,
.rp-home-hero__grid--solo .rp-home-hero__form > * {
    max-width: 680px;
}

.rp-home-hero__form > .rp-q-short__call {
    margin: 14px 0 0;
}

/* The three lines of the louver mark above the title. */
.rp-home-mark {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 56px;
    margin-bottom: 26px;
}

.rp-home-mark span {
    display: block;
    height: 3px;
    background: var(--rp-accent);
}

.rp-home-mark span:last-child {
    width: 70%;
}

.rp-home-hero__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 38px;
    line-height: 1.08;
    color: var(--rp-ink);
    overflow-wrap: anywhere;
}

.rp-home-hero__text {
    max-width: 540px;
    margin: 20px 0 0;
    font-size: 19px;
}

/* The slider: the new slide opens on 8 louvers and settles from a slight zoom (Р-24). */
/* A swipe changes the slide; the vertical scroll stays with the page. */
.rp-slider {
    position: relative;
    min-width: 0;
    height: 300px;
    overflow: hidden;
    border-radius: var(--rp-r-card);
    background: var(--rp-dark);
    touch-action: pan-y;
}

.rp-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
}

.rp-slide.is-prev {
    z-index: 2;
    opacity: 1;
}

.rp-slide.is-active {
    z-index: 3;
    opacity: 1;
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0, #000 var(--rp-louver), transparent var(--rp-louver), transparent 12.5%);
    mask-image: repeating-linear-gradient(180deg, #000 0, #000 var(--rp-louver), transparent var(--rp-louver), transparent 12.5%);
    animation: rp-louver 1.2s cubic-bezier(.3, .7, .2, 1) both;
}

.rp-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-slide.is-active img {
    animation: rp-settle 7.5s linear both;
}

.rp-slide__caption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    max-width: min(68%, 420px);
    padding: 12px 16px;
    border-radius: var(--rp-r-btn);
    background: #FFFFFF;
    color: var(--rp-ink);
}

.rp-slide__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rp-link);
}

.rp-slide__text {
    display: block;
    margin-top: 2px;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 19px;
    line-height: 1.25;
}

.rp-slider__bars {
    position: absolute;
    right: 12px;
    bottom: 16px;
    z-index: 5;
    display: flex;
    gap: 4px;
}

.rp-slider__bar {
    position: relative;
    width: 32px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rp-slider__track {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 10px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .45);
    overflow: hidden;
    transition: background-color var(--rp-t);
}

.rp-slider__bar:hover .rp-slider__track {
    background: rgba(255, 255, 255, .75);
}

.rp-slider__fill {
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    transform: scaleX(0);
    transform-origin: left;
}

.rp-slider__bar.is-on .rp-slider__fill {
    animation: rp-fill 6s linear both;
}

.rp-slider:hover .rp-slider__fill,
.rp-slider:hover .rp-slide.is-active img {
    animation-play-state: paused;
}

@keyframes rp-louver {
    from { --rp-louver: 0%; }
    to { --rp-louver: 12.5%; }
}

@keyframes rp-settle {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

@keyframes rp-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* The promises under the hero */
.rp-home-promises {
    background: var(--rp-surface);
    border-top: 1px solid var(--rp-line);
    border-bottom: 1px solid var(--rp-line);
}

.rp-home-promises__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0 auto;
    padding-top: 32px;
    padding-bottom: 32px;
    list-style: none;
}

.rp-home-promise {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.rp-home-promise__icon {
    flex: none;
    margin-top: 2px;
    color: var(--rp-link);
}

.rp-home-promise__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp-home-promise__title {
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.3;
    color: var(--rp-ink);
}

.rp-home-promise__text {
    font-size: 15px;
    color: var(--rp-muted);
}

/* The sections and their heads */
.rp-home-section {
    padding: 64px 0;
}

.rp-home-section--flush {
    padding-top: 0;
}

.rp-home-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 24px;
    margin-bottom: 32px;
}

.rp-home-head__body {
    max-width: 640px;
    min-width: 0;
}

.rp-home-h2 {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.15;
    color: var(--rp-ink);
    overflow-wrap: anywhere;
}

.rp-home-h2--light {
    max-width: 640px;
    color: #FFFFFF;
}

.rp-home-head__text {
    margin: 14px 0 0;
}

.rp-home-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--rp-link);
}

.rp-home-more:hover {
    color: var(--rp-ink);
}

/* What we build */
.rp-home-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.rp-home-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    background: #FFFFFF;
    color: var(--rp-text);
    transition: border-color var(--rp-t);
}

.rp-home-card:hover {
    color: var(--rp-text);
    border-color: var(--rp-field);
}

.rp-home-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.rp-home-card__img--none {
    display: grid;
    place-items: center;
    background: var(--rp-surface);
    color: var(--rp-quiet);
}

.rp-home-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 24px;
}

.rp-home-card__title {
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 21px;
    line-height: 1.25;
    color: var(--rp-ink);
    transition: color var(--rp-t);
}

.rp-home-card:hover .rp-home-card__title {
    color: var(--rp-link);
}

.rp-home-card__text {
    font-size: 16px;
    color: var(--rp-muted);
}

/* How a project runs */
.rp-home-how {
    --rp-focus: var(--rp-accent);
    padding: 64px 0;
    background: var(--rp-dark);
    color: var(--rp-on-dark);
}

.rp-home-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.rp-home-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 2px solid var(--rp-text);
}

.rp-home-step:first-child {
    border-top-color: var(--rp-accent);
}

.rp-home-step__num {
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    color: var(--rp-accent);
}

.rp-home-step__title {
    margin: 8px 0 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 21px;
    line-height: 1.25;
    color: #FFFFFF;
}

.rp-home-step__text {
    margin: 0;
    font-size: 16px;
}

.rp-home-how__track {
    margin: 40px 0 0;
    font-size: 16px;
}

.rp-home-how__link {
    font-weight: 700;
    color: var(--rp-accent);
}

.rp-home-how__link:hover {
    color: #FFFFFF;
}

/* Recent work: the chips filter the photos by the group of their service; a portrait photo takes two rows. */
.rp-home-head--end {
    align-items: center;
}

.rp-home-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rp-home-chip {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--rp-field);
    border-radius: var(--rp-pill);
    background: #FFFFFF;
    color: var(--rp-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--rp-t), border-color var(--rp-t), color var(--rp-t);
}

.rp-home-chip:hover {
    border-color: var(--rp-ink);
}

.rp-home-chip[aria-pressed="true"] {
    border-color: var(--rp-ink);
    background: var(--rp-ink);
    color: #FFFFFF;
}

.rp-home-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 170px;
    grid-auto-flow: dense;
    gap: 16px;
}

.rp-home-tile {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--rp-r-card);
    color: var(--rp-ink);
}

.rp-home-tile--tall {
    grid-row: span 2;
}

.rp-home-tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-home-tile__label {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 6px 10px;
    border-radius: var(--rp-r-btn);
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rp-ink);
    transition: color var(--rp-t);
}

.rp-home-tile:hover .rp-home-tile__label {
    color: var(--rp-link);
}

/* A new filter brings its tiles in one after another, rising, and the photo settles from a slight zoom; the two
   names of one move restart it on every change. */
.rp-home-mosaic.is-swap-a .rp-home-tile {
    animation: rp-tile-in-a .55s cubic-bezier(.2, .7, .2, 1) both;
}

.rp-home-mosaic.is-swap-b .rp-home-tile {
    animation: rp-tile-in-b .55s cubic-bezier(.2, .7, .2, 1) both;
}

.rp-home-mosaic.is-swap-a .rp-home-tile__img {
    animation: rp-settle .9s cubic-bezier(.2, .7, .2, 1) both;
}

.rp-home-mosaic.is-swap-b .rp-home-tile__img {
    animation: rp-settle-b .9s cubic-bezier(.2, .7, .2, 1) both;
}

.rp-home-mosaic[class*="is-swap"] .rp-home-tile:nth-child(2n) {
    animation-delay: 70ms;
}

.rp-home-mosaic[class*="is-swap"] .rp-home-tile:nth-child(3n) {
    animation-delay: 140ms;
}

@keyframes rp-tile-in-a {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes rp-tile-in-b {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes rp-settle-b {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

/* Welcome to TopFence Cyprus */
.rp-home-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.rp-home-welcome__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--rp-r-card);
}

.rp-home-welcome__body {
    min-width: 0;
}

.rp-home-welcome--solo .rp-home-welcome__body {
    max-width: 760px;
}

.rp-home-welcome__text {
    margin: 14px 0 0;
}

.rp-home-welcome__text:first-of-type {
    margin-top: 18px;
}

.rp-home-welcome__address {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 0;
    font-size: 16px;
    color: var(--rp-ink);
}

.rp-home-welcome__address .icon {
    flex: none;
    color: var(--rp-link);
}

.rp-home-welcome__btn {
    margin-top: 24px;
}

/* The questions on the home page */
.rp-home-faq {
    padding: 64px 0;
    background: var(--rp-surface);
}

.rp-home-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.rp-home-faq__head {
    min-width: 0;
}

.rp-home-faq__text {
    margin: 14px 0 16px;
}

.rp-home-faq__phone {
    font-weight: 700;
    white-space: nowrap;
}

.rp-home-faq__list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-top: 1px solid var(--rp-field);
}

.rp-home-qa {
    padding: 20px 0;
    border-bottom: 1px solid var(--rp-field);
}

.rp-home-qa__q {
    cursor: pointer;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 19px;
    line-height: 1.3;
    color: var(--rp-ink);
}

.rp-home-qa__q:hover {
    color: var(--rp-link);
}

.rp-home-qa__a p {
    margin: 12px 0 0;
}

.rp-home-qa__a .rp-link {
    display: inline-block;
    margin-top: 10px;
}

/* The orange band at the end of a page (partials.cta) */
.rp-band {
    --rp-focus: var(--rp-ink);
    background: var(--rp-accent);
    color: var(--rp-ink);
}

.rp-band__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px 32px;
    padding-top: 56px;
    padding-bottom: 56px;
}

.rp-band__body {
    max-width: 640px;
    min-width: 0;
}

.rp-band__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.15;
    color: var(--rp-ink);
    overflow-wrap: anywhere;
}

.rp-band__text {
    margin: 12px 0 0;
}

.rp-band__acts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.rp-band__btn {
    min-height: 52px;
    padding: 0 26px;
    font-size: 16px;
}

.rp-band__phones {
    font-size: 15px;
}

.rp-band__phone {
    padding: 2px 4px;
    margin: 0 -4px;
    border-radius: 4px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--rp-ink);
    transition: background-color var(--rp-t);
}

/* On the orange a darker word reads worse: the link takes a light tone behind it instead. */
.rp-band__phone:hover {
    background: rgba(255, 255, 255, .4);
    color: var(--rp-ink);
}

@media (min-width: 640px) {
    .rp-home-hero__title {
        font-size: 46px;
    }

    .rp-slider {
        height: 420px;
    }

    .rp-home-promises__list,
    .rp-home-cards,
    .rp-home-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rp-home-h2 {
        font-size: 36px;
    }

    .rp-band__title {
        font-size: 34px;
    }
}

@media (min-width: 1024px) {
    .rp-home-hero {
        padding: 64px 0 72px;
    }

    /* The slider beside the title and the form, from the top of the one to the bottom of the button (Р-113);
       the line with the phones sits under them, outside its height. */
    .rp-home-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        grid-template-areas: "main slider" "form slider" "call .";
        gap: 0 56px;
        align-items: start;
    }

    .rp-home-hero__main {
        grid-area: main;
    }

    .rp-home-hero__form {
        display: contents;
    }

    .rp-home-hero__form > .rp-q-short {
        grid-area: form;
        margin-top: 32px;
    }

    .rp-home-hero__form > .rp-q-short__call {
        grid-area: call;
    }

    .rp-home-hero__grid > .rp-slider {
        grid-area: slider;
        align-self: stretch;
        height: auto;
        min-height: 520px;
    }

    .rp-home-hero__grid--solo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main" "form" "call";
    }

    .rp-home-hero__title {
        font-size: 56px;
    }

    .rp-slider {
        height: 660px;
    }

    .rp-home-promises__list,
    .rp-home-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rp-home-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rp-home-section,
    .rp-home-how,
    .rp-home-faq {
        padding: 96px 0;
    }

    .rp-home-section--flush {
        padding-top: 0;
    }

    .rp-home-h2 {
        font-size: 40px;
    }

    .rp-home-head {
        margin-bottom: 40px;
    }

    .rp-home-steps {
        margin-top: 48px;
    }

    .rp-home-how__track {
        margin-top: 48px;
    }

    .rp-home-mosaic {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 230px;
    }

    .rp-home-welcome {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 64px;
    }

    .rp-home-welcome--solo {
        grid-template-columns: minmax(0, 1fr);
    }

    .rp-home-faq__grid {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 64px;
    }

    .rp-band__inner {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

/* ==== The head of an inner page (Р-82): the trail, the title and one sentence. The designs differ in size, so the
   difference is a variant: --wide (Services) and --form (Request a quote, Thank you, Tracking) ==== */
.rp-head {
    padding: 32px 0;
    background: var(--rp-surface);
    border-bottom: 1px solid var(--rp-line);
}

.rp-head__sub {
    margin: 8px 0 0;
    font-family: var(--rp-display-font);
    font-weight: 700;
    font-size: 20px;
    color: var(--rp-ink);
}

.rp-head__phones {
    margin: 10px 0 0;
    font-size: 16px;
}

.rp-head__phone {
    font-weight: 600;
    white-space: nowrap;
}

.rp-head--wide .rp-head__lead {
    max-width: 760px;
    font-size: inherit;
}

.rp-head--form .rp-head__lead {
    max-width: 680px;
    font-size: 17px;
}

.rp-head__title {
    margin: 16px 0 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.1;
    color: var(--rp-ink);
    overflow-wrap: anywhere;
}

.rp-head__lead {
    max-width: 640px;
    margin: 12px 0 0;
    font-size: 18px;
}

.rp-head__meta {
    margin: 12px 0 0;
    font-size: 15px;
    color: var(--rp-muted);
}

.rp-head__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

@media (min-width: 768px) {
    .rp-head {
        padding: 40px 0;
    }

    .rp-head--wide {
        padding: 48px 0 40px;
    }

    .rp-head--form {
        padding: 40px 0 48px;
    }

    .rp-head__title {
        font-size: 44px;
    }

    .rp-head--wide .rp-head__title {
        font-size: 48px;
    }

    .rp-head--form .rp-head__lead {
        font-size: 19px;
    }
}

/* ==== Contacts (design: Contacts, Р-79) ==== */
.rp-cnt {
    padding: 40px 0 64px;
}

.rp-cnt__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.rp-cnt__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.rp-cnt__tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.rp-cnt-tile,
.rp-cnt-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    color: var(--rp-text);
}

.rp-cnt-tile {
    transition: border-color var(--rp-t);
}

.rp-cnt-tile:hover {
    border-color: var(--rp-ink);
    color: var(--rp-text);
}

.rp-cnt-tile__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--rp-muted);
}

.rp-cnt-tile__value {
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 20px;
    /* A number to dial reads level: Raleway draws old-style figures by default (a noted deviation from Contacts). */
    font-variant-numeric: lining-nums;
    color: var(--rp-ink);
    white-space: nowrap;
}

.rp-cnt-tile__value--mail {
    font-size: 17px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.rp-cnt-box {
    gap: 6px;
    padding: 24px;
}

.rp-cnt-box__title {
    margin: 0 0 4px;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.25;
    color: var(--rp-ink);
}

.rp-cnt-box__text {
    margin: 0;
}

.rp-cnt-box__link {
    font-weight: 700;
}

/* The message form */
.rp-cform {
    min-width: 0;
    padding: 24px;
    border-radius: var(--rp-r-card);
    background: var(--rp-surface);
    scroll-margin-top: 16px;
}

.rp-cform__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rp-cform__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 22px;
    color: var(--rp-ink);
}

.rp-cform__text {
    margin: 6px 0 0;
    font-size: 15px;
}

.rp-cform__text--muted {
    color: var(--rp-muted);
}

.rp-cform__send {
    min-height: 50px;
    font-size: 16px;
}

.rp-cform__done {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-cform__done-icon {
    color: var(--rp-link);
}

@media (min-width: 640px) {
    .rp-cnt__tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rp-cform {
        padding: 28px;
    }
}

/* ==== The blog and the article (design: Blog, BlogEmpty, Article; Р-80) ==== */
.rp-blog {
    padding: 40px 0 64px;
}

.rp-blog--more {
    padding-top: 0;
}

.rp-blog-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    background: #FFFFFF;
    color: var(--rp-text);
}

.rp-blog-feature:hover {
    color: var(--rp-text);
}

.rp-blog-feature__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.rp-blog-feature__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 24px;
}

.rp-blog-feature__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rp-link);
}

.rp-blog-feature__title {
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.2;
    color: var(--rp-ink);
    transition: color var(--rp-t);
}

.rp-blog-feature:hover .rp-blog-feature__title,
.rp-post-card:hover .rp-post-card__title {
    color: var(--rp-link);
}

.rp-blog-feature__text {
    color: var(--rp-muted);
}

.rp-blog__latest {
    margin: 48px 0 24px;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    color: var(--rp-ink);
}

.rp-blog__latest--first {
    margin-top: 0;
}

.rp-home-head .rp-blog__latest {
    margin-bottom: 0;
}

.rp-blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.rp-post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    background: #FFFFFF;
    color: var(--rp-text);
}

.rp-post-card:hover {
    color: var(--rp-text);
}

.rp-post-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.rp-post-card__img--none {
    display: grid;
    place-items: center;
    background: var(--rp-surface);
    color: var(--rp-quiet);
}

.rp-post-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 22px;
}

.rp-post-card__meta {
    font-size: 14px;
    color: var(--rp-muted);
}

.rp-post-card__title {
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.3;
    color: var(--rp-ink);
    transition: color var(--rp-t);
}

.rp-post-card__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--rp-muted);
}

.rp-post-card__more {
    margin-top: auto;
    padding-top: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--rp-link);
}

/* The page numbers */
.rp-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
}

.rp-pages__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--rp-field);
    border-radius: var(--rp-r-btn);
    background: #FFFFFF;
    color: var(--rp-ink);
    font-weight: 700;
    transition: border-color var(--rp-t);
}

.rp-pages__link:hover {
    border-color: var(--rp-ink);
    color: var(--rp-ink);
}

.rp-pages__link.is-current {
    border-color: var(--rp-ink);
    background: var(--rp-ink);
    color: #FFFFFF;
}

.rp-pages__gap {
    align-self: center;
    color: var(--rp-muted);
}

/* No articles yet */
.rp-blog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 32px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    background: #FFFFFF;
    text-align: center;
}

.rp-blog-empty__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    color: var(--rp-ink);
}

.rp-blog-empty__text {
    margin: 0;
}

.rp-blog-empty__acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

/* The article */
.rp-art-page {
    padding: 32px 0 64px;
}

.rp-art-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-top: 20px;
}

.rp-art-main {
    min-width: 0;
}

.rp-art-main__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.15;
    color: var(--rp-ink);
    overflow-wrap: anywhere;
}

.rp-art-main__meta {
    margin: 12px 0 0;
    font-size: 15px;
    color: var(--rp-muted);
}

.rp-art-main__lead {
    margin: 20px 0 0;
    font-size: 19px;
    color: var(--rp-ink);
}

.rp-art-main__figure {
    margin: 28px 0 0;
}

.rp-art-main__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rp-r-card);
}

.rp-art-main .rp-cnt-tocm,
.rp-art-main .rp-prose {
    margin-top: 24px;
}

.rp-art-service {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding: 16px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
    background: #FFFFFF;
    color: var(--rp-text);
    transition: border-color var(--rp-t);
}

.rp-art-service:hover {
    border-color: var(--rp-ink);
    color: var(--rp-text);
}

.rp-art-service__img {
    flex: none;
    width: 120px;
    height: 90px;
    border-radius: var(--rp-r-btn);
    object-fit: cover;
}

.rp-art-service__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.rp-art-service__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rp-link);
}

.rp-art-service__title {
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 20px;
    color: var(--rp-ink);
}

.rp-art-service__text {
    font-size: 15px;
    color: var(--rp-muted);
}

.rp-art-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.rp-art-box {
    padding: 24px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card);
}

.rp-art-box--dark {
    --rp-focus: var(--rp-accent);
    border-color: var(--rp-dark);
    background: var(--rp-dark);
    color: var(--rp-on-dark);
}

.rp-art-box__title {
    margin: 0;
    font-family: var(--rp-display-font);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.25;
    color: var(--rp-ink);
}

.rp-art-box--dark .rp-art-box__title {
    color: #FFFFFF;
}

.rp-art-box__text {
    margin: 8px 0 0;
    font-size: 15px;
}

.rp-art-box__btn {
    width: 100%;
    margin-top: 16px;
}

.rp-art-box__phones {
    margin: 14px 0 0;
    font-size: 14px;
}

.rp-art-box__phone {
    font-weight: 700;
    white-space: nowrap;
    color: #FFFFFF;
}

.rp-art-box__phone:hover {
    color: var(--rp-accent);
}

.rp-art-box__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.rp-art-box__link {
    font-weight: 600;
}

@media (min-width: 640px) {
    .rp-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rp-art-main__title {
        font-size: 40px;
    }

    .rp-prose h2 {
        font-size: 28px;
    }
}

@media (min-width: 1024px) {
    .rp-blog {
        padding: 56px 0 88px;
    }

    .rp-blog--more {
        padding-top: 0;
    }

    .rp-blog-feature {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .rp-blog-feature__img {
        min-height: 340px;
        aspect-ratio: auto;
    }

    .rp-blog-feature__body {
        padding: 36px 40px;
    }

    .rp-blog-feature__title {
        font-size: 30px;
    }

    .rp-blog__latest {
        margin-top: 64px;
        font-size: 30px;
    }

    .rp-blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rp-art-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 64px;
    }
}

@media (min-width: 1100px) {
    .rp-cnt {
        padding: 48px 0 96px;
    }

    .rp-cnt__grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: 48px;
    }
}

@media print {
    .rp-topbar,
    .rp-header,
    .rp-drawer,
    .rp-dock,
    .rp-totop,
    .rp-footer {
        display: none !important;
    }
}