/*
 * Compass (docs/multisite.md §Темы): a rating guide under a navy photo band —
 * the title, the search and three big figures centred on the band, the
 * companies as a striped table with orange rank badges and light-blue "go to
 * the site" buttons, navy buttons, orange stars, a navy photo footer,
 * Montserrat up to Black.
 *
 * Loaded after every base stylesheet (CssManifest appends it). The token
 * block re-skins what tokens reach; the rules after it lay out what the
 * theme changes: the header, the theme's own home page
 * (resources/themes/compass/views/pages/home), the company rows as table
 * rows, the catalog and company pages and the other pages' heroes, the
 * footer and the 404.
 *
 * Montserrat is self-hosted next to this file (SIL OFL, licence included),
 * variable, split per script with unicode-range so a uk/ru page fetches the
 * Latin and Cyrillic cuts only. The text faces stop at 700, the reference's
 * heaviest, so the base's 800 headings come out bold rather than black; the
 * same files declared once more as 'Compass Black' set the big figures, the
 * 404 and the site's name.
 *
 * The band's photos are the project's own (public/assets/img), cropped and
 * tinted here: band.* under the navy veil, footer.* likewise, strip.* under a
 * pale one.
 */

/* ------------------------------------------------------------- typefaces */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-cyrillic-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-wght-normal.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;
}
/* The same files once more as the display family: the figures, the 404
   and the site's name are set in its Black. Declared apart, so the base's
   800 headings stay in the text family and come out bold like the
   reference's, not black. */
@font-face {
    font-family: 'Compass Black';
    font-style: normal;
    font-weight: 800 900;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-cyrillic-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Compass Black';
    font-style: normal;
    font-weight: 800 900;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Compass Black';
    font-style: normal;
    font-weight: 800 900;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Compass Black';
    font-style: normal;
    font-weight: 800 900;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-wght-normal.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;
}

/* ---------------------------------------------------------------- tokens */

:root {
    --color-text: #333333;
    --color-text-alt: #5C5C5C;
    --color-text-secondary: #FFF;
    --color-text-link: #6E6E6E;
    --color-text-third: #374785;

    --color-bg: #FFFFFF;
    --color-bg-alt: #FFF;
    --color-bg-secondary: #FF7A00;
    --color-bg-third: #E5F1F8;
    --color-bg-drive: #D9D9D9;
    --color-bg-effect: #E5F1F8;
    --color-bg-fourth: #374785;
    --color-bg-fifth: #24305E;
    --color-bg-sixth: #3A4878;
    --color-bg-empty: #E5F1F8;

    --color-border: #DDE5EC;
    --color-border-secondary: #BFDDF0;
    --color-border-alt: #FFF;

    --color-btn: #374785;

    --progress-primary: #374785;
    --progress-bg: #E5F1F8;

    --color-icon-star: #FF7A00;
    --color-icon-primary: #374785;

    --color-star-empty: #DADADA;
    --skeleton-bg: #EDF2F6;

    --font-sans: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --compass-display: 'Compass Black', 'Montserrat', Arial, sans-serif;

    --radius-xs: 5px;
    --radius-sm: 10px;
    --radius-md: 10px;
    --radius-lg: 10px;
    --radius-xl: 10px;
    --radius-2xl: 10px;
    --radius-3xl: 10px;
    --radius-pill: 999px;

    --shadow-card: 0 6px 20px rgba(36, 48, 94, 0.10);
    --shadow-popover: 0 8px 24px rgba(36, 48, 94, 0.14);
    --shadow-overlay: 0 12px 32px 0 rgba(36, 48, 94, 0.14);

    /* No page glow: the pages are white under the band. */
    --glow-rgb: 255, 255, 255;

    /* Compass's own. Orange marks a rating (stars, the top three's badges)
       and labels on the navy; buttons carry white text, so theirs is a shade
       deeper (3:1 against white), and orange words on white deeper still. */
    --compass-navy: #24305E;
    --compass-veil: rgba(36, 48, 94, 0.85);
    --compass-button: #374785;
    --compass-button-hover: #2A386E;
    --compass-orange: #FF7A00;
    --compass-action: #E86F00;
    --compass-action-hover: #CF6200;
    --compass-orange-text: #C25700;
    --compass-sky: #E5F1F8;
    --compass-sky-soft: #F0FAFF;
    --compass-blue: #81C4EA;
    --compass-muted: #767676;
    --compass-line: #D9D9D9;
    --compass-badge: #E6E6E6;
}

/* ------------------------------------------------------------- the page */

body::before {
    display: none;
}
.container,
.full-container,
#how_is_work > .container,
#home-reviews .container,
#home-about_us .container,
#company-detail .container,
#company-reviews .container {
    max-width: calc(1170px + 40px);
}
h1, h2, h3,
.title {
    color: var(--color-text);
}

/* Section titles: centred, bold, sentence case. */
section#rating .title,
#home-about_us .title,
#how_is_work .title,
#home-reviews .title,
#rate_info .wrap-title .title,
#partnership .box .title,
#company-detail .left .title,
#company-reviews .title,
#blog-listing > .container > .title {
    max-width: none;
    margin: 0 0 40px;
    padding: 0;
    color: var(--color-text);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
}

/* Section badges: small orange capitals, no plate. */
.topic {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--compass-orange-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- buttons */

/* Navy, square-cornered, bold capitals — the reference's buttons. */
.btn,
#how_is_work .button,
#home-info .right .make_review,
#partnership .box .start_cooperation,
#cooperation-statement-preview .box .left .btn,
#auth .auth-main .btn,
#claim-invite .btn {
    border-radius: 10px;
    background: var(--compass-button);
    color: #FFF;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: background-color 0.3s ease;
}
.btn:not(:disabled):hover,
#how_is_work .button:hover,
#home-info .right .make_review:hover,
#partnership .box .start_cooperation:hover,
#auth .auth-main .btn:not(:disabled):hover {
    background: var(--compass-button-hover);
}

/* The navy buttons under a list: "see them all", "write a review", "more". */
#rating .all,
#home-reviews .leave,
section#rating .get_more,
#company-reviews .get_more,
#blog-listing .more-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    height: 50px;
    margin: 50px auto 0;
    border-radius: 10px;
    background: var(--compass-button);
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}
#rating .all:hover,
#home-reviews .leave:hover,
section#rating .get_more:hover,
#company-reviews .get_more:hover,
#blog-listing .more-link:hover {
    background: var(--compass-button-hover);
    color: #FFF;
}

/* ------------------------------------------------------------- the band */

/* The navy photo band: the first section of the pages that open with a
   hero carries it, and the header lies on it; elsewhere the header is a
   navy bar of its own. */
#home-preview,
#catalog-preview,
#company-preview,
#create-review-preview,
#cooperation-statement-preview,
#not-found.compass-404 {
    background-color: var(--compass-navy);
    background-image: linear-gradient(var(--compass-veil), var(--compass-veil)), url('../img/band.jpg');
    background-size: cover;
    background-position: center 45%;
    color: #FFF;
}
/* A browser without image-set() (Safari before 17) would void this
   declaration at computed time, veil and all — it holds a var(), so the
   JPEG one above could not stand in for it: it comes only where it is
   understood. */
@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
    #home-preview,
    #catalog-preview,
    #company-preview,
    #create-review-preview,
    #cooperation-statement-preview,
    #not-found.compass-404 {
        background-image: linear-gradient(var(--compass-veil), var(--compass-veil)), image-set(url('../img/band.webp') type('image/webp'), url('../img/band.jpg') type('image/jpeg'));
    }
}

/* --------------------------------------------------------------- header */

header.compass-header {
    position: relative;
    z-index: 5;
    background: linear-gradient(90deg, #24305E 0%, #2D3A6C 100%);
}
#home-preview header.compass-header,
#catalog-preview header.compass-header,
#company-preview header.compass-header,
#create-review-preview header.compass-header,
#cooperation-statement-preview header.compass-header,
#not-found.compass-404 header.compass-header {
    background: none;
}
/* The home hero's base rules make its containers flex rows. */
#home-preview header.compass-header .full-container {
    display: block;
}
header.compass-header .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}
header.compass-header .logo,
footer.compass-footer .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
header.compass-header .logo {
    margin-right: 30px;
}
header.compass-header .logo img {
    width: 34px;
    height: 34px;
}
.compass-header .logo .name,
.compass-footer .logo .name {
    color: #FFF;
    font-family: var(--compass-display);
    font-size: 22px;
    font-weight: 900;
    line-height: 26px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
header.compass-header .menu {
    margin: 0 0 0 auto;
    padding: 0;
}
header.compass-header .menu .item {
    margin-right: 6px;
}
header.compass-header .menu .item > a {
    display: inline-flex;
    padding: 6px 12px;
    border: 0;
    border-radius: 5px;
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}
header.compass-header .menu .item > a:hover {
    background: #FFF;
    color: var(--compass-button);
}
header.compass-header .menu .item.active a {
    border: 0;
    background: none;
    color: var(--compass-orange);
}
header.compass-header .menu .item.active a:hover {
    background: #FFF;
    color: var(--compass-button);
}
header.compass-header .menu .mobile-button {
    color: #FFF;
}
header.compass-header .panel {
    margin-left: 30px;
}
header.compass-header .panel .auth {
    margin-right: 24px;
}
header.compass-header .panel .auth .reg {
    padding: 6px 10px;
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
}
header.compass-header .panel .auth .reg:hover {
    color: var(--compass-orange);
}
header.compass-header .panel .auth .login {
    margin-left: 6px;
    padding: 8px 18px;
    border-radius: 5px;
    background: var(--compass-action);
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
    transition: background-color 0.3s ease;
}
header.compass-header .panel .auth .login:hover {
    background: var(--compass-action-hover);
}
header.compass-header .locale .lang,
header.compass-header .locale .lang::after {
    color: #FFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
}
header.compass-header .locale .lang::after {
    content: "|";
    padding: 0 6px;
}
header.compass-header .locale .lang.active {
    color: var(--compass-orange);
}

/* ----------------------------------------------------------- home: hero */

#home-preview {
    padding-bottom: 0;
    overflow: hidden;
}
#home-preview header {
    margin-bottom: 0;
}
#home-preview .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 70px;
    padding-bottom: 84px;
    text-align: center;
}
#home-preview .hero-title {
    max-width: 840px;
    color: #FFF;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
}
#home-preview .hero-text {
    max-width: 760px;
    margin-top: 22px;
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
}

/* The search: a pale field with a square orange button at its end — the
   home hero's, the catalog hero's and the footer's. */
#home-preview .search-form,
#catalog-preview .left .search-form,
footer.compass-footer .search-form {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 560px;
    margin: 44px auto 0;
}
#home-preview .search-form .form-control,
#catalog-preview .left .search-form input,
footer.compass-footer .search-form .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 10px 0 0 10px;
    background: var(--compass-sky);
    color: var(--color-text);
    font-size: 15px;
    line-height: 20px;
}
#home-preview .search-form .form-control::placeholder,
#catalog-preview .left .search-form input::placeholder,
footer.compass-footer .search-form .form-control::placeholder {
    color: #767676;
}
#home-preview .search-form .form-control:focus,
#catalog-preview .left .search-form input:focus,
footer.compass-footer .search-form .form-control:focus {
    box-shadow: inset 0 0 0 2px var(--compass-blue);
}
#home-preview .search-form .btn,
#catalog-preview .left .search-form .btn,
footer.compass-footer .search-form .btn {
    position: static;
    flex: 0 0 auto;
    min-width: 50px;
    height: 50px;
    margin: 0;
    padding: 0 15px;
    transform: none;
    border-radius: 0 10px 10px 0;
    background: var(--compass-action);
    color: #FFF;
    font-size: 15px;
    opacity: 1;
}
#home-preview .search-form .btn .icon,
footer.compass-footer .search-form .btn .icon {
    font-size: 22px;
}
#home-preview .search-form .btn:disabled,
#catalog-preview .left .search-form .btn:disabled,
footer.compass-footer .search-form .btn:disabled {
    opacity: 1;
    cursor: default;
}
#home-preview .search-form .btn:not(:disabled):hover,
#catalog-preview .left .search-form .btn:not(:disabled):hover,
footer.compass-footer .search-form .btn:not(:disabled):hover {
    background: var(--compass-action-hover);
}

/* The three big figures under the search. */
#home-preview .stats {
    display: flex;
    justify-content: center;
    gap: 90px;
    margin: 54px 0 0;
    padding: 0;
    list-style: none;
}
#home-preview .stats .item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#home-preview .stats .value {
    color: #FFF;
    font-family: var(--compass-display);
    font-size: 64px;
    font-weight: 800;
    line-height: 1.1;
}
#home-preview .stats .label {
    margin-top: 4px;
    color: var(--compass-orange);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

/* -------------------------------------------------- the companies' table */

section#rating {
    padding: 90px 0 0;
    overflow: visible;
}
section#rating .list-rate {
    padding-top: 0;
}
#rating .empty {
    padding: 20px 0;
    color: var(--color-text-alt);
    text-align: center;
}

/* The shared company card (partials/cards/company-card) as a table row: the
   rank on its badge, the name, the average with its stars, the reviews, the
   light-blue way to the company. The column heads (home) use the same grid. */
.list-rate_item,
#rating .table-head {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 210px 130px 210px;
    align-items: center;
}
#rating .table-head {
    margin-bottom: 4px;
    color: var(--compass-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}
#rating .table-head span {
    padding: 15px;
    text-align: center;
}
#rating .table-head .col-company {
    grid-column: 2;
}
#rating .table-head .col-average {
    grid-column: 3;
}
#rating .table-head .col-reviews {
    grid-column: 4;
}
.list-rate_item {
    grid-template-areas: "rank name rate comment link";
    min-height: 60px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #FFF;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.list-rate_item:nth-child(odd) {
    background: var(--compass-sky);
}
.list-rate_item:hover {
    box-shadow: none;
}
/* The rank on a small grey badge, orange for the top three, with a short
   hairline after it. */
.list-rate_item::before,
.list-rate_item--top::before {
    grid-area: rank;
    content: attr(data-rank);
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 20px;
    padding: 0 6px;
    flex-basis: auto;
    border: 0;
    border-radius: 5px;
    background: var(--compass-badge);
    color: var(--color-text);
    font-family: var(--font-sans) !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}
.list-rate_item--top::before {
    background: var(--compass-action);
    color: #FFF;
}
.list-rate_item::after {
    content: "";
    grid-area: rank;
    justify-self: end;
    width: 1px;
    height: 32px;
    background: var(--compass-line);
}
.list-rate_item .name {
    grid-area: name;
    padding: 15px 15px 15px 20px;
    margin: 0;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-decoration: none;
    white-space: normal;
}
.list-rate_item:hover .name {
    color: var(--compass-orange-text);
}
.list-rate_item .rate {
    grid-area: rate;
    display: flex;
    justify-content: center;
    padding: 0 10px;
}
.list-rate_item .rate .star-rating {
    gap: 10px;
}
.list-rate_item .star-rating__value {
    min-width: 34px;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
}
.list-rate_item .star-rating__stars,
.list-rate_item .star-rating__star::before,
.list-rate_item .star-rating__star--half::after {
    font-size: 15px;
}
.list-rate_item .star-rating__star--half::after {
    top: 0;
}
.list-rate_item .star-rating__star {
    margin-right: 1px;
}
.list-rate_item .comment {
    grid-area: comment;
    justify-content: center;
    padding: 0 10px;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.list-rate_item .comment .icon {
    display: none;
}
/* The rating bar stays in the markup (app.js draws it) but not in the table:
   the reference reads the average and the reviews only. */
.list-rate_item .progress {
    display: none;
}
/* "Go to the site" as a light-blue button with navy words; the whole row
   still answers the click (the base stretches the link's ::after over it). The
   card's label ends with " ->": a mask fades that tail out and a negative
   margin takes it out of the centring, so the button reads as the reference's. */
.list-rate_item .link {
    grid-area: link;
    justify-self: center;
    position: static;
    display: block;
    width: 170px;
    height: 30px;
    margin: 0;
    padding: 5px 10px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--compass-blue);
    color: var(--compass-navy);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.list-rate_item .link > span {
    display: inline-block;
    margin-right: -1.3em;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.3em), transparent calc(100% - 1.3em));
    mask-image: linear-gradient(90deg, #000 calc(100% - 1.3em), transparent calc(100% - 1.3em));
}
.list-rate_item:hover .link {
    background: var(--compass-button);
    color: #FFF;
}
.list-rate_item .link:focus-visible {
    outline: 2px solid var(--compass-button);
    outline-offset: 2px;
}

/* --------------------------------------------- how to use the rating */

#how_is_work {
    padding: 90px 0 0;
}
#how_is_work .title {
    margin-bottom: 50px;
}
/* Three columns over a pale photo strip, a hairline between them. */
#how_is_work .strip {
    background-color: var(--compass-sky-soft);
    background-image: linear-gradient(rgba(240, 250, 255, 0.88), rgba(240, 250, 255, 0.88)), url('../img/strip.jpg');
    background-image: linear-gradient(rgba(240, 250, 255, 0.88), rgba(240, 250, 255, 0.88)), image-set(url('../img/strip.webp') type('image/webp'), url('../img/strip.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
}
#how_is_work .steps {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 56px 35px;
    list-style: none;
}
#how_is_work .step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}
#how_is_work .step + .step {
    margin-left: 101px;
}
#how_is_work .step + .step::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -51px;
    width: 1px;
    height: 100px;
    transform: translateY(-50%);
    background: var(--color-text);
}
#how_is_work .step-title {
    margin-bottom: 10px;
    color: var(--color-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
}
#how_is_work .step-text {
    color: var(--color-text);
    font-size: 15px;
    line-height: 22px;
}

/* --------------------------------------------- home: the latest reviews */

#home-reviews {
    padding: 90px 0 0;
}
#home-reviews::before {
    display: none;
}
#home-reviews .reviews {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px 40px;
    width: auto;
    margin: 0;
}
#home-reviews .review {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#home-reviews .review .top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 40px;
    align-items: start;
}
#home-reviews .review .company {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#home-reviews .review .company:hover {
    color: var(--compass-orange-text);
    text-decoration: none;
}
#home-reviews .review .work-type {
    color: var(--color-text);
    font-size: 15px;
    line-height: 20px;
    overflow-wrap: anywhere;
}
#home-reviews .review .middle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 18px;
}
#home-reviews .review .author {
    color: var(--compass-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}
#home-reviews .review .date {
    color: var(--color-text);
    font-size: 15px;
    line-height: 20px;
}
#home-reviews .star-rating__stars,
#home-reviews .star-rating__star::before,
#home-reviews .star-rating__star--half::after {
    font-size: 16px;
}
#home-reviews .star-rating__star--half::after {
    top: 0;
}
#home-reviews .star-rating__star {
    margin-right: 1px;
}
#home-reviews .review .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-top: 18px;
    color: var(--color-text);
    font-size: 15px;
    line-height: 22px;
    overflow-wrap: break-word;
}
#home-reviews .review .more {
    align-self: flex-start;
    margin-top: 10px;
    color: var(--compass-orange-text);
    font-size: 15px;
    font-style: italic;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
}
#home-reviews .review .more:hover {
    color: var(--compass-button);
}

/* --------------------------------------------- how the rating is counted */

/* Read like the reference's articles: a left-set title, the text, the four
   points in a row with their orange numbers. On the catalog it closes the
   list the same way. */
#rate_info {
    padding: 90px 0 0;
}
#rate_info > .container > .topic {
    display: none;
}
#rate_info .wrap-title {
    display: block;
    margin: 0;
}
#rate_info .wrap-title .title {
    margin-bottom: 18px;
    text-align: left;
}
#rate_info .wrap-title .description {
    max-width: none;
    padding: 0;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}
#rate_info .wrap-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    max-width: none;
    margin: 36px 0 0;
    padding: 0;
}
#rate_info .wrap-steps .step {
    display: block;
    margin: 0;
    padding: 24px 22px 26px;
    border-radius: 10px;
    background: var(--compass-sky);
}
#rate_info .wrap-steps .step .icon {
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 12px;
    border-radius: 0;
    background: none;
    color: var(--compass-orange-text);
    font-family: var(--compass-display);
    font-size: 32px;
    font-weight: 800;
    line-height: 36px;
}
#rate_info .wrap-steps .step .inner {
    flex-basis: auto;
    padding: 0;
}
#rate_info .wrap-steps .step .inner .title {
    margin: 0;
    color: var(--color-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
}
#rate_info .wrap-steps .step .inner .description {
    margin-top: 8px;
    color: var(--color-text);
    font-size: 15px;
    line-height: 22px;
}

/* ------------------------------------------- home: choosing a service */

#home-about_us {
    padding: 90px 0 100px;
}
#home-about_us .title {
    margin-bottom: 22px;
    text-align: left;
}
#home-about_us .subtitle {
    margin: 30px 0 14px;
    color: var(--color-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}
#home-about_us .text {
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.6;
}
#home-about_us .text + .text {
    margin-top: 14px;
}

/* ----------------------------------------------------------- partnership */

/* The invitation to companies (catalog, partnership page): a pale-blue box. */
#partnership {
    padding: 90px 0 100px;
}
#partnership .box {
    padding: 50px 60px;
    border: 0;
    border-radius: 10px;
    background: var(--compass-sky);
}
#partnership .box .topic,
#claim-invite .topic {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--compass-orange-text);
}
#partnership .box .title {
    margin: 10px 0 0;
}
#partnership .box .description {
    color: var(--color-text);
}
#partnership .box .list-items .item .icon {
    color: var(--compass-button);
}
#partnership .box .list-items .item .label {
    color: var(--color-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}
#partnership .box .list-items .drive::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--compass-orange);
}
#partnership .box .start_cooperation {
    padding: 15px 32px;
    font-size: 15px;
}

/* ---------------------------------------------------------- the heroes */

/* The other pages' heroes on the band: white words, the company's or the
   page's own. */
#cooperation-statement-preview .box .left .title,
#create-review-preview .box .left .title {
    color: #FFF;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}
#cooperation-statement-preview .box .left .topic,
#create-review-preview .box .left .topic {
    color: var(--compass-orange);
}
#cooperation-statement-preview .box .left .description,
#create-review-preview .box .left .description {
    color: #FFF;
    font-size: 17px;
    line-height: 1.6;
}
#cooperation-statement-preview .box .left .btn {
    padding: 15px 30px;
    background: var(--compass-action);
    font-size: 15px;
}
#cooperation-statement-preview .box .left .btn:hover {
    background: var(--compass-action-hover);
}
#cooperation-statement-preview .right .box > picture img,
#cooperation-statement-preview .right .box img {
    border-radius: 10px;
}
#cooperation-statement-preview .right .box .stats {
    border: 0;
    border-radius: 10px;
    box-shadow: var(--shadow-overlay);
}
#cooperation-statement-preview .right .box .stats .value {
    color: var(--color-text);
}
#cooperation-statement-preview .right .box .stats .label {
    color: var(--color-text-alt);
}

/* The review form's hero: the company on the band, its gallery framed. */
#create-review-preview .box .left .panel .create_review {
    border-radius: 10px;
    background: var(--compass-action);
    color: #FFF;
    font-weight: 700;
    text-transform: uppercase;
}
#create-review-preview .box .left .panel .create_review:hover {
    background: var(--compass-action-hover);
}
#create-review-preview .box .left .panel .to_site {
    color: #FFF;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#create-review-preview .box .left .panel .to_site:hover {
    color: var(--compass-orange);
}

/* The company owners' invitation (partnership page). */
#claim-invite {
    padding-top: 80px;
}
#claim-invite .box {
    border: 0;
    border-radius: 10px;
    background: var(--compass-sky);
}
#claim-invite .title,
#cooperation-statement-form .cooperation-statement-form-container .right .title {
    font-weight: 700;
}
#cooperation-statement-form .cooperation-statement-form-container .right .topic {
    color: var(--compass-orange-text);
}
#claim-invite .steps .num {
    background-color: var(--compass-action);
    color: #FFF;
}

/* -------------------------------------------------------------- catalog */

#catalog-preview {
    overflow: hidden;
}
#catalog-preview .container > .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0 70px;
    text-align: center;
}
#catalog-preview .left {
    flex-basis: auto;
    width: 100%;
    max-width: 840px;
    padding: 0;
}
#catalog-preview .left .topic {
    display: none;
}
#catalog-preview .left .title {
    margin: 0;
    color: #FFF;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}
#catalog-preview .left .description {
    margin-top: 20px;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}
#catalog-preview .left .search-form .search-clear {
    position: absolute;
    top: 50%;
    right: 114px;
    transform: translateY(-50%);
    color: var(--color-text-alt);
}
#catalog-preview .left .search-form input {
    padding-right: 52px;
}
#catalog-preview .left .search-form .btn {
    padding: 0 22px;
    font-weight: 700;
    text-transform: uppercase;
}
/* The reviews counter of the base hero becomes one more big figure. */
#catalog-preview .right {
    flex-basis: auto;
    margin-top: 44px;
}
#catalog-preview .right .img-wrap {
    border: 0;
    border-radius: 0;
    background: none;
}
#catalog-preview .right .img-wrap > picture {
    display: none;
}
#catalog-preview .right .img-wrap .label-container {
    position: static;
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
#catalog-preview .right .img-wrap .label-container .icon {
    display: none;
}
#catalog-preview .right .label-container .label-container-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}
#catalog-preview .right .label-container .label-container-inner .label {
    color: #FFF;
    font-family: var(--compass-display);
    font-size: 64px;
    font-weight: 800;
    line-height: 1.1;
}
#catalog-preview .right .label-container .label-container-inner .sublabel {
    margin-top: 4px;
    color: var(--compass-orange);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

/* The list: its title, the link to the counting under it. */
section#rating > .container > .topic {
    display: none;
}
section#rating .title.full-title {
    margin-bottom: 14px;
}
section#rating > .container > .prompt {
    margin: 0 auto 36px;
    color: var(--compass-button);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
section#rating > .container > .prompt:hover {
    color: var(--compass-orange-text);
}

/* ------------------------------------------------------------ pagination */

.pageLink {
    border-color: var(--compass-line);
    border-radius: 5px;
    color: var(--compass-button);
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease;
}
a.pageLink[href]:hover {
    border-color: var(--compass-button);
}
.pageItem.active .pageLink {
    border-color: var(--compass-button);
    background: var(--compass-button);
    color: #FFF;
}
.pageItem.pass {
    color: var(--compass-button);
}

/* --------------------------------------------------------- company page */

#company-preview {
    overflow: visible;
}
#company-preview .inner {
    align-items: center;
    padding: 40px 0 70px;
}
#company-preview .inner .left {
    flex-basis: 480px;
    width: 480px;
}
/* The gallery in a white frame on the band. */
#company-preview .inner .left .gallery .gallery-swiper {
    height: 300px;
    border: 6px solid #FFF;
    border-radius: 10px;
    background-color: #FFF;
}
#company-preview .inner .left .gallery .gallery-swiper img {
    border-radius: 4px;
}
#company-preview .inner .left .gallery-swiper-bar .swiper-slide img {
    border-radius: 5px;
}
/* The rating on the band: the name, the figures and the stars in white,
   the review button orange. */
#company-preview .inner .right .info-box {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
#company-preview .inner .right .info-box > .topic {
    color: var(--compass-orange);
}
#company-preview .inner .right .info-box .inner-info-box {
    align-items: center;
    padding-top: 10px;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .name {
    color: #FFF;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .rate {
    color: #FFF;
    font-weight: 500;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .rate::before {
    border: 0;
    background: var(--compass-orange);
    color: #FFF;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .btn {
    padding: 15px 28px;
    border-radius: 10px;
    background: var(--compass-action);
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .btn:hover {
    background: var(--compass-action-hover);
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .amount_reviews {
    color: #FFF;
    font-weight: 700;
    white-space: nowrap;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .amount_reviews i {
    color: var(--compass-orange);
}
#company-preview .inner .right .info-box .drive {
    background-color: rgba(255, 255, 255, 0.35);
}
#company-preview .inner .right .info-box .part-right .rate {
    flex-direction: column;
    align-items: flex-start;
    color: var(--compass-orange);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}
#company-preview .inner .right .info-box .part-right .rate .mark {
    margin: 0;
    color: #FFF;
    font-family: var(--compass-display);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
}
#company-preview .inner .right .info-box .part-right .list-rate .item-list-rate .label {
    color: #FFF;
    font-weight: 700;
}
#company-preview .star-rating__star {
    color: rgba(255, 255, 255, 0.28);
}
#company-preview .star-rating__star--full,
#company-preview .star-rating__star--half::after {
    color: var(--compass-orange);
}

/* About the company and its sidebar: grey labels over bold values. */
#company-detail .left .title {
    margin-bottom: 24px;
    font-size: 30px;
    text-align: left;
}
#company-detail .left .description,
#company-detail .left .description > p {
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.6;
}
#company-detail .left .description h2,
#company-detail .left .description h3 {
    margin: 28px 0 12px;
    color: var(--color-text);
    font-weight: 700;
}
#company-detail .right .label {
    color: var(--compass-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}
#company-detail .right .site a {
    color: var(--compass-button);
    font-size: 16px;
    font-weight: 700;
}
#company-detail .right .site a:hover {
    color: var(--compass-orange-text);
}
#company-detail .right .site a .icon,
#company-detail .right .contacts-box .item .icon {
    color: var(--compass-orange);
}
#company-detail .right .contacts-box .item {
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
}
#company-detail .right .owner-promo {
    padding: 22px 26px;
    border: 0;
    border-radius: 10px;
    background: var(--compass-sky);
}
#company-detail .right .owner-promo .label {
    color: var(--color-text);
    font-size: 17px;
}
#company-detail .right .owner-promo .link {
    color: var(--compass-button);
    font-weight: 700;
}
#company-detail .right .owner-promo .link:hover {
    color: var(--compass-orange-text);
}
#company-detail .right .owner-promo .action + .action {
    border-top-color: rgba(55, 71, 133, 0.2);
}
/* The top five as a little striped table with the rank badges. */
#company-detail .right .top-list .topic {
    max-width: none;
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}
#company-detail .right .top-list .list .item {
    margin-top: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
}
#company-detail .right .top-list .list .item:nth-child(odd) {
    background: var(--compass-sky);
}
#company-detail .right .top-list .list .item a {
    text-decoration: none;
}
#company-detail .right .top-list .list .item .name {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
#company-detail .right .top-list .list .item a:hover .name {
    color: var(--compass-orange-text);
}
#company-detail .right .top-list .list .item .name::before,
#company-detail .right .top-list .list .item:nth-child(-n+3) .name::before {
    content: counter(rate);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    width: auto;
    height: 20px;
    margin-right: 12px;
    padding: 0 5px;
    border: 0;
    border-radius: 5px;
    background: var(--compass-badge);
    color: var(--color-text);
    font-family: var(--font-sans) !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
}
#company-detail .right .top-list .list .item:nth-child(-n+3) .name::before {
    background: var(--compass-action);
    color: #FFF;
}
#company-detail .right .top-list .list .item .progress-bar__track {
    height: 6px;
    border-radius: 3px;
    background: rgba(55, 71, 133, 0.12);
}
#company-detail .right .top-list .list .item .progress-bar__fill {
    border-radius: 3px;
    background: var(--compass-blue);
}
#company-detail .right .top-list .list .item .progress-bar__fill--animated::after {
    display: none;
}

/* The reviews of a company in two columns, as the reference sets them: the
   name in grey with the stars and the date, the kind of work, the text. */
#company-reviews {
    padding: 70px 0 100px;
}
#company-reviews .reviews-list {
    padding: 0;
    border: 0;
    background: none;
}
#company-reviews .reviews-list > .topic {
    display: none;
}
#company-reviews .title {
    margin-bottom: 30px;
}
#company-reviews .filters {
    display: flex;
    justify-content: center;
}
/* Five pills are wider than a 360px phone: they wrap, centred, spaced by
   gaps instead of the base's side margins. */
#company-reviews .filters .filter-stars {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
#company-reviews .filters .filter-stars .filter-stars-item {
    margin: 0;
    padding: 6px 16px;
    border: 1px solid var(--compass-button);
    border-radius: 5px;
    background: #FFF;
    color: var(--compass-button);
    font-weight: 700;
}
#company-reviews .filters .filter-stars .filter-stars-item .icon {
    color: var(--compass-orange);
}
#company-reviews .filters .filter-stars .filter-stars-item.active {
    border-color: var(--compass-button);
    background: var(--compass-button);
    color: #FFF;
}
#company-reviews .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    margin-top: 40px;
}
#company-reviews .list .review-card {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
        "name stars date"
        "type type type"
        "text text text"
        "photos photos photos"
        "reply reply reply"
        "bottom bottom bottom";
    align-content: start;
    align-items: center;
    column-gap: 10px;
    margin: 0;
    padding: 30px 0;
    border: 0;
    border-top: 1px solid var(--compass-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
#company-reviews .review-card .head,
#company-reviews .review-card .head .rate {
    display: contents;
}
#company-reviews .review-card .head .rate .star-rating {
    grid-area: stars;
    flex-direction: row;
    gap: 8px;
}
#company-reviews .review-card .star-rating__value {
    display: none;
}
#company-reviews .review-card .star-rating__stars,
#company-reviews .review-card .star-rating__star::before,
#company-reviews .review-card .star-rating__star--half::after {
    font-size: 16px;
}
#company-reviews .review-card .star-rating__star--half::after {
    top: 0;
}
#company-reviews .review-card .star-rating__star {
    margin-right: 1px;
}
#company-reviews .review-card .name {
    grid-area: name;
    margin: 0;
    color: var(--compass-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}
#company-reviews .review-card .head .created_at {
    grid-area: date;
    color: var(--color-text);
    font-size: 15px;
    line-height: 20px;
}
#company-reviews .review-card .work-type {
    grid-area: type;
    justify-self: start;
    margin: 12px 0 0;
    padding: 2px 10px;
    border-radius: 5px;
    background: var(--compass-sky);
    color: var(--compass-button);
    font-size: 13px;
    font-weight: 700;
}
#company-reviews .review-card .text {
    grid-area: text;
    margin-top: 14px;
    color: var(--color-text);
    font-size: 15px;
    line-height: 22px;
}
#company-reviews .review-card .photos {
    grid-area: photos;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
#company-reviews .review-card .photos a {
    border-radius: 5px;
}
#company-reviews .review-card .company-reply {
    grid-area: reply;
    border-left-color: var(--compass-orange);
    border-radius: 0 10px 10px 0;
    background: var(--compass-sky);
}
#company-reviews .review-card .bottom_panel {
    grid-area: bottom;
    margin-top: 14px;
    font-size: 14px;
}
#company-reviews .review-card .bottom_panel .about_company {
    color: var(--compass-muted);
}
#company-reviews .review-card .bottom_panel .to_company {
    color: var(--compass-orange-text);
    font-style: italic;
    font-weight: 700;
    text-decoration: none;
}
#company-reviews .review-card .bottom_panel .to_company:hover {
    color: var(--compass-button);
}

/* Stars are orange everywhere — the base paints some of them in the action
   colour. */
.star-rating__star--full,
.star-rating__star--half::after,
.review-card .head .rate .star-rating__star--full,
.review-card .head .rate .star-rating__star--half::after {
    color: var(--compass-orange);
}
/* …and in the review form's star input. */
.sri-input {
    --sri-star-color: #DADADA;
    --sri-star-filled: var(--compass-orange);
    --sri-star-hover: #FFA54D;
}

/* ----------------------------------------------------------------- forms */

/* The reference's fields: pale blue, a grey edge, round corners. */
#create-review-form .form-control,
#cooperation-statement-form .form-control,
#auth .form-control,
#claim-invite .form-control {
    border: 1px solid #A8A8A8;
    border-radius: 10px;
    background: var(--compass-sky);
}
#create-review-form .form-control:focus,
#cooperation-statement-form .form-control:focus,
#auth .form-control:focus,
#claim-invite .form-control:focus {
    border-color: var(--compass-button);
    box-shadow: 0 0 0 1px var(--compass-button);
}

/* ------------------------------------------------------------------ blog */

/* The listing as the reference sets its articles: two columns, a square
   picture at the left of each, the title, the date, a few lines and an
   orange "read on". */
#blog-listing > .container {
    padding-top: 60px;
    padding-bottom: 90px;
}
#blog-listing > .container > .title {
    margin: 10px 0 0;
}
#blog-listing .toolbar {
    margin-top: 40px;
}
#blog-listing .toolbar .search-form input {
    height: 50px;
    padding: 0 130px 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--compass-sky);
    font-size: 15px;
}
#blog-listing .toolbar .search-form input:focus {
    box-shadow: inset 0 0 0 2px var(--compass-blue);
}
#blog-listing .toolbar .search-form .btn {
    top: 0;
    right: 0;
    height: 50px;
    transform: none;
    padding: 0 22px;
    border-radius: 0 10px 10px 0;
    background: var(--compass-action);
    opacity: 1;
}
#blog-listing .toolbar .search-form .btn:not(:disabled):hover {
    background: var(--compass-action-hover);
}
#blog-listing .toolbar .filters .form-control {
    height: 50px;
    border: 1px solid #A8A8A8;
    border-radius: 10px;
    background-color: var(--compass-sky);
    font-size: 15px;
}
#blog-listing .posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px 40px;
    margin-top: 50px;
}
.blog-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "cover name"
        "cover meta"
        "cover excerpt"
        "cover more";
    column-gap: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.blog-card .cover {
    grid-area: cover;
    height: 150px;
    border-radius: 0;
}
.blog-card .name {
    grid-area: name;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.blog-card .name a {
    color: var(--color-text);
}
.blog-card .name a:hover {
    color: var(--compass-orange-text);
}
.blog-card .meta {
    grid-area: meta;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 6px;
    color: var(--color-text);
    font-size: 13px;
    font-style: italic;
    font-weight: 700;
}
.blog-card .meta .views {
    color: var(--compass-muted);
    font-style: normal;
    font-weight: 400;
}
.blog-card .excerpt {
    grid-area: excerpt;
    margin: 8px 0 0;
    color: var(--color-text);
    font-size: 15px;
    line-height: 22px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
.blog-card .read-more,
.blog-card .read-more:not(:disabled):hover {
    grid-area: more;
    justify-self: start;
    width: auto;
    margin-top: 10px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--compass-orange-text);
    font-size: 15px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.blog-card .read-more:hover {
    color: var(--compass-button);
}
#blog-listing .top-companies .topic {
    color: var(--color-text);
    font-size: 20px;
    letter-spacing: 0;
    text-transform: none;
}

/* An article: its date in italics, its sidebar's links navy. */
#blog-article .meta .date {
    color: var(--color-text);
    font-style: italic;
    font-weight: 700;
}
#blog-article .article-title {
    font-weight: 700;
}
#blog-article .aside-articles .item .goto {
    color: var(--compass-orange-text);
    font-style: italic;
    font-weight: 700;
}

/* The top companies as chips (blog): the rank on its badge. */
.company-chip {
    border-color: var(--compass-line);
    border-radius: 5px;
}
.company-chip--top {
    border-color: var(--compass-blue);
}
.company-chip .badge-icon {
    background: var(--compass-action);
    color: #FFF;
}
.company-chip .rank {
    border-color: var(--compass-line);
    background: var(--compass-badge);
    color: var(--color-text);
}
.company-chip .name {
    color: var(--color-text);
    font-weight: 700;
}

/* --------------------------------------------------------------- footer */

footer.compass-footer {
    padding: 40px 0;
    background-color: var(--compass-navy);
    background-image: linear-gradient(var(--compass-veil), var(--compass-veil)), url('../img/footer.jpg');
    background-size: cover;
    background-position: center;
    color: #FFF;
}
/* A browser without image-set() (Safari before 17) would void this
   declaration at computed time, veil and all — it holds a var(), so the
   JPEG one above could not stand in for it: it comes only where it is
   understood. */
@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
    footer.compass-footer {
        background-image: linear-gradient(var(--compass-veil), var(--compass-veil)), image-set(url('../img/footer.webp') type('image/webp'), url('../img/footer.jpg') type('image/jpeg'));
    }
}
footer.compass-footer .row {
    align-items: flex-start;
    gap: 50px;
    padding: 0 10px;
}
footer.compass-footer .about {
    flex: 1 1 44%;
    min-width: 0;
}
footer.compass-footer .logo img {
    width: 30px;
    height: 30px;
}
footer.compass-footer .logo .name {
    font-size: 20px;
    line-height: 24px;
}
footer.compass-footer .copyright {
    margin-top: 14px;
    color: #FFF;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    text-transform: uppercase;
}
footer.compass-footer .domain {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 20px;
}
footer.compass-footer .note {
    max-width: 540px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    line-height: 18px;
}
footer.compass-footer .side {
    flex: 1 1 56%;
    min-width: 0;
}
/* The base link columns run as one bold row of links. */
footer.compass-footer .row .menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    margin: 0;
    padding: 0;
}
footer.compass-footer .row .menu .col {
    display: contents;
}
footer.compass-footer .row .menu .col .label,
footer.compass-footer .row .menu .col-locale {
    display: none;
}
footer.compass-footer .row .menu .col .item-menu {
    margin: 0;
    padding: 2px 0;
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}
footer.compass-footer .row .menu .col .item-menu:hover {
    color: var(--compass-orange);
}
footer.compass-footer .search-form {
    max-width: none;
    margin: 26px 0 0;
}
footer.compass-footer .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 30px;
    margin-top: 24px;
}
footer.compass-footer .errands {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
}
footer.compass-footer .errand {
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
footer.compass-footer .errand:hover {
    color: var(--compass-orange);
}
footer.compass-footer .errand-add {
    color: var(--compass-orange);
}
footer.compass-footer .errand-add:hover {
    color: #FFF;
}
footer.compass-footer .row .panel {
    order: 0;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}
footer.compass-footer .row .panel .auth .reg {
    padding: 6px 8px;
    color: #FFF;
    font-weight: 700;
}
footer.compass-footer .row .panel .auth .login {
    padding: 8px 16px;
    border-radius: 5px;
    background: #FFF;
    color: var(--compass-navy);
    font-weight: 700;
}
footer.compass-footer .row .panel .auth .login:hover {
    background: var(--compass-sky);
}
footer.compass-footer .row .locale .lang,
footer.compass-footer .row .locale .lang::after {
    color: #FFF;
    font-size: 13px;
    font-weight: 700;
}
footer.compass-footer .row .locale .lang::after {
    content: "|";
    padding: 0 6px;
}
footer.compass-footer .row .locale .lang.active {
    color: var(--compass-orange);
}

/* ------------------------------------------------------------------ 404 */

/* The band fills a short page down to the footer. */
#not-found.compass-404 {
    flex: 1 0 auto;
}
#not-found.compass-404 .container {
    padding-top: 0;
    padding-bottom: 0;
}
#not-found.compass-404 .box {
    padding: 50px 0 90px;
    text-align: center;
}
/* "404" in white Black, its zero the compass. */
#not-found.compass-404 .code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #FFF;
    font-family: var(--compass-display);
    font-size: 132px;
    font-weight: 900;
    line-height: 1;
}
#not-found.compass-404 .code .zero {
    width: 108px;
    height: 108px;
}
#not-found.compass-404 .title {
    margin-top: 30px;
    color: #FFF;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
}
#not-found.compass-404 .text {
    max-width: 560px;
    margin: 14px auto 0;
    color: #FFF;
    font-size: 17px;
    line-height: 1.6;
}
#not-found.compass-404 .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 30px;
    margin-top: 34px;
}
#not-found.compass-404 .btn {
    padding: 15px 32px;
    background: var(--compass-action);
    font-size: 15px;
    font-weight: 700;
}
#not-found.compass-404 .btn:hover {
    background: var(--compass-action-hover);
}
#not-found.compass-404 .catalog-link {
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#not-found.compass-404 .catalog-link:hover {
    color: var(--compass-orange);
}

/* ------------------------------------------------------------ long words */

/* A company's name is often one long word, its site and e-mail longer
   still: they break rather than push a phone's page sideways (Firefox does
   not break an address at its hyphens). */
#create-review-preview .box .left .title,
#cooperation-statement-preview .box .left .title,
#create-review-form form .company_name,
#company-preview .inner .right .info-box .inner-info-box .part-left .name,
#company-detail .left .title,
#company-reviews .title,
#company-detail .right .site a,
#company-detail .right .contacts-box .item {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ responsive */

/* The bar tightens a size before it would run out of room, and at any width
   for a company's representative, who gets one more link in it (.has() —
   without it the wide bar stays as it is). */
@media (max-width: 1279px) {

    header.compass-header .logo {
        margin-right: 20px;
    }
    header.compass-header .menu .item {
        margin-right: 2px;
    }
    header.compass-header .menu .item > a {
        padding: 6px 9px;
        font-size: 14px;
    }
    header.compass-header .panel {
        margin-left: 18px;
    }
    header.compass-header .panel .auth {
        margin-right: 16px;
    }
    header.compass-header .panel .auth .reg,
    header.compass-header .panel .auth .login {
        font-size: 14px;
    }
    header.compass-header .panel .auth .login {
        padding: 8px 14px;
    }
}
@media (min-width: 1280px) {

    header.compass-header:has(.item-business) .logo {
        margin-right: 20px;
    }
    header.compass-header:has(.item-business) .menu .item {
        margin-right: 2px;
    }
    header.compass-header:has(.item-business) .menu .item > a {
        padding: 6px 9px;
        font-size: 14px;
    }
    header.compass-header:has(.item-business) .panel {
        margin-left: 18px;
    }
    header.compass-header:has(.item-business) .panel .auth {
        margin-right: 16px;
    }
    header.compass-header:has(.item-business) .panel .auth .reg,
    header.compass-header:has(.item-business) .panel .auth .login {
        font-size: 14px;
    }
    header.compass-header:has(.item-business) .panel .auth .login {
        padding: 8px 14px;
    }
}

/* Below 1200px the menu goes under the burger — earlier than the base's
   1021px, as the Russian words and a representative's extra link would not
   fit beside the account links. The base's dropdown rules, repeated for that
   range; the language switch stays in the bar until the base clones it into
   the dropdown (1021px). */
@media (max-width: 1199px) {

    header.compass-header .bar {
        justify-content: flex-start;
    }
    header.compass-header .logo {
        order: 1;
    }
    header.compass-header .panel {
        order: 2;
        margin-left: auto;
    }
    header.compass-header .panel .auth {
        margin-right: 0;
    }
    header.compass-header .panel .locale {
        margin-left: 18px;
    }
    header.compass-header .menu {
        order: 3;
        position: relative;
        margin: 0 0 0 20px;
        padding: 0;
    }
    header.compass-header .menu .mobile-button {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    header.compass-header .menu .mobile-button .icon {
        font-size: 30px;
    }
    header.compass-header .menu .menu-box:not(.active) {
        display: none;
    }
    header.compass-header .menu .menu-box {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 3;
        flex-direction: column;
        padding: 15px 25px 15px 15px;
        border: 0;
        border-radius: 10px 0 10px 10px;
        background: #FFF;
        box-shadow: var(--shadow-popover);
    }
    header.compass-header .menu .item {
        width: 100%;
        margin-right: 0;
    }
    header.compass-header .menu .item > a {
        display: inline-flex;
        width: 100%;
        padding: 12px 40px 12px 12px;
        color: var(--color-text);
        font-size: 16px;
    }
    header.compass-header .menu .item > a:hover {
        background: var(--compass-sky);
        color: var(--color-text);
    }
    header.compass-header .menu .item.active a {
        color: var(--compass-orange-text);
    }
    header.compass-header .menu .item.locale-panel .locale {
        border-top-color: var(--compass-line);
    }
    header.compass-header .menu .locale .lang,
    header.compass-header .menu .locale .lang::after {
        color: var(--color-text);
        font-size: 15px;
    }
    header.compass-header .menu .locale .lang.active {
        color: var(--compass-orange-text);
    }
}

@media (max-width: calc(1140px + 30px)) {

    .list-rate_item,
    #rating .table-head {
        grid-template-columns: 70px minmax(0, 1fr) 180px 100px 190px;
    }
    #how_is_work .step + .step {
        margin-left: 61px;
    }
    #how_is_work .step + .step::before {
        left: -31px;
    }
    #company-preview .inner .left {
        flex-basis: 400px;
        width: 400px;
    }
    #company-preview .inner .left .gallery .gallery-swiper {
        height: 260px;
    }
    #company-preview .inner .right {
        padding-left: 40px;
    }
    /* The figures go under the name and the button: the average, then the
       marks by category. */
    #company-preview .inner .right .info-box .inner-info-box {
        flex-wrap: wrap;
    }
    #company-preview .inner .right .info-box .drive {
        display: none;
    }
    #company-preview .inner .right .info-box .part-right {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px 40px;
        flex-basis: 100%;
        margin-top: 26px;
    }
    #company-preview .inner .right .info-box .part-right .list-rate {
        margin-top: 0;
    }
}

@media (max-width: calc(991px + 30px)) {

    #home-preview .hero {
        padding-top: 50px;
        padding-bottom: 70px;
    }
    #home-preview .hero-title,
    #catalog-preview .left .title {
        font-size: 34px;
    }
    #home-preview .hero-text {
        font-size: 18px;
    }
    #home-preview .stats {
        gap: 60px;
    }
    #home-preview .stats .value,
    #catalog-preview .right .label-container .label-container-inner .label {
        font-size: 54px;
    }

    section#rating,
    #how_is_work,
    #home-reviews,
    #rate_info {
        padding-top: 60px;
    }
    #home-about_us,
    #partnership {
        padding-top: 60px;
        padding-bottom: 70px;
    }
    section#rating .title,
    #home-about_us .title,
    #how_is_work .title,
    #home-reviews .title,
    #rate_info .wrap-title .title,
    #partnership .box .title,
    #company-detail .left .title,
    #company-reviews .title,
    #blog-listing > .container > .title {
        margin-bottom: 30px;
        font-size: 26px;
    }
    .list-rate_item,
    #rating .table-head {
        grid-template-columns: 60px minmax(0, 1fr) 160px 80px 180px;
    }
    #how_is_work .steps {
        padding: 44px 0;
    }
    #rate_info .wrap-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    #company-preview .inner .left {
        flex-basis: 320px;
        width: 320px;
    }
    #company-preview .inner .left .gallery .gallery-swiper {
        height: 220px;
    }
    #company-preview .inner .right {
        padding-left: 30px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .name {
        font-size: 30px;
    }
    #company-reviews {
        padding: 50px 0 70px;
    }

    #cooperation-statement-preview .box .left .title,
    #create-review-preview .box .left .title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {

    #home-preview .stats {
        gap: 36px;
    }

    /* A row turns into a short stack: the badge and the name, the average
       and the reviews, the button. */
    #rating .table-head {
        display: none;
    }
    .list-rate_item {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        grid-template-areas:
            "rank name comment"
            "rank rate link";
        row-gap: 6px;
        padding: 14px 16px 14px 0;
    }
    .list-rate_item::before {
        grid-row: 1 / span 2;
        align-self: center;
    }
    .list-rate_item::after {
        display: none;
    }
    .list-rate_item .name {
        padding: 0 10px 0 4px;
        font-size: 16px;
    }
    .list-rate_item .rate {
        justify-content: flex-start;
        padding: 0 10px 0 4px;
    }
    .list-rate_item .rate .star-rating {
        flex-direction: row;
    }
    .list-rate_item .comment {
        display: flex;
        justify-self: end;
        padding: 0;
        font-size: 16px;
    }
    .list-rate_item .link {
        width: 150px;
        font-size: 13px;
    }

    /* How to use: the three under one another, a short line between. */
    #how_is_work .steps {
        flex-direction: column;
        padding: 40px 0;
    }
    #how_is_work .step + .step {
        margin: 50px 0 0;
    }
    #how_is_work .step + .step::before {
        top: -25px;
        left: 0;
        width: 100px;
        height: 1px;
        transform: none;
    }

    #home-reviews .reviews,
    #company-reviews .list {
        grid-template-columns: minmax(0, 1fr);
    }
    #home-reviews .reviews {
        gap: 40px;
    }

    #rate_info .wrap-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    #partnership .box {
        padding: 40px 24px;
    }

    #catalog-preview .container > .row {
        padding: 40px 0 50px;
    }

    #company-preview .inner {
        padding: 20px 0 50px;
    }
    #company-preview .inner .left {
        flex-basis: auto;
        width: 100%;
    }
    #company-preview .inner .left .gallery .gallery-swiper {
        height: 300px;
    }
    #company-preview .inner .right {
        margin-top: 30px;
        padding-left: 0;
    }

    #blog-listing .posts {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    footer.compass-footer .row {
        flex-direction: column;
        gap: 30px;
        padding: 0;
    }
    footer.compass-footer .about,
    footer.compass-footer .side {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 576px) {

    header.compass-header .bar {
        padding: 16px 0;
    }
    header.compass-header .logo {
        gap: 8px;
        margin-right: 12px;
    }
    header.compass-header .logo img {
        width: 28px;
        height: 28px;
    }
    .compass-header .logo .name {
        font-size: 18px;
        line-height: 22px;
        white-space: normal;
    }
    header.compass-header .panel .auth .reg {
        display: none;
    }
    header.compass-header .panel .auth .login {
        padding: 7px 12px;
    }
    header.compass-header .menu {
        margin-left: 14px;
    }

    #home-preview .hero {
        padding-top: 34px;
        padding-bottom: 50px;
    }
    #home-preview .hero-title,
    #catalog-preview .left .title {
        font-size: 26px;
        line-height: 1.3;
    }
    #home-preview .hero-text {
        margin-top: 16px;
        font-size: 15px;
    }
    #home-preview .search-form,
    #catalog-preview .left .search-form {
        margin-top: 30px;
    }
    #home-preview .stats {
        gap: 24px;
        margin-top: 36px;
    }
    #home-preview .stats .value,
    #catalog-preview .right .label-container .label-container-inner .label {
        font-size: 40px;
    }
    #home-preview .stats .label,
    #catalog-preview .right .label-container .label-container-inner .sublabel {
        font-size: 13px;
        line-height: 18px;
    }
    #catalog-preview .left .description {
        font-size: 14px;
    }
    #catalog-preview .left .search-form .btn {
        padding: 0 14px;
        font-size: 13px;
    }
    #catalog-preview .left .search-form .search-clear {
        right: 84px;
    }

    section#rating,
    #how_is_work,
    #home-reviews,
    #rate_info {
        padding-top: 44px;
    }
    #home-about_us {
        padding-top: 44px;
        padding-bottom: 54px;
    }
    section#rating .title,
    #home-about_us .title,
    #how_is_work .title,
    #home-reviews .title,
    #rate_info .wrap-title .title,
    #partnership .box .title,
    #company-detail .left .title,
    #company-reviews .title,
    #blog-listing > .container > .title {
        margin-bottom: 22px;
        font-size: 22px;
    }
    #home-about_us .subtitle {
        font-size: 19px;
    }
    #home-about_us .text,
    #rate_info .wrap-title .description {
        font-size: 15px;
    }

    /* The base hides a row's reviews below 650px and turns its link into an
       icon below 576px; the table keeps both. */
    .list-rate_item {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        padding-right: 12px;
    }
    .list-rate_item .name {
        font-size: 15px;
        line-height: 20px;
    }
    .list-rate_item .star-rating__value {
        min-width: 0;
        font-size: 16px;
    }
    .list-rate_item .link {
        width: 128px;
        height: 28px;
        padding: 4px 8px;
        font-size: 12px;
    }
    .list-rate_item .link > span {
        display: inline-block;
    }
    .list-rate_item .link::before {
        display: none;
    }
    #rating .all,
    #home-reviews .leave,
    section#rating .get_more,
    #company-reviews .get_more,
    #blog-listing .more-link {
        margin-top: 34px;
    }

    #home-reviews .review .top {
        gap: 6px 20px;
    }
    #home-reviews .review .company,
    #home-reviews .review .work-type,
    #home-reviews .review .author,
    #home-reviews .review .date,
    #home-reviews .review .text {
        font-size: 14px;
    }

    #company-preview .inner .right .info-box .inner-info-box {
        align-items: flex-start;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .name {
        font-size: 26px;
    }
    /* The base pins the card's button by its padding; here it stays in the
       flow, under the site's rating. */
    #company-preview .inner .right .info-box .inner-info-box .part-left .panel {
        position: static;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        gap: 14px 18px;
        margin-top: 18px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .panel .btn {
        margin: 0;
        padding: 13px 22px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .panel .amount_reviews {
        margin-left: 0;
    }
    #company-preview .inner .right .info-box .part-right .rate .mark {
        font-size: 44px;
    }
    /* The marks by category one under another, the stars at the right. */
    #company-preview .inner .right .info-box .part-right .list-rate {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 10px 0 0;
    }
    #company-preview .inner .right .info-box .part-right .list-rate .item-list-rate {
        flex-basis: auto;
        margin: 5px 0 0;
    }
    #company-preview .inner .left .gallery .gallery-swiper {
        height: 230px;
    }
    #company-reviews .list .review-card {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "name date"
            "stars stars"
            "type type"
            "text text"
            "photos photos"
            "reply reply"
            "bottom bottom";
        row-gap: 6px;
    }
    #company-reviews .review-card .head .created_at {
        justify-self: end;
    }
    #company-reviews .review-card .bottom_panel {
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    #cooperation-statement-preview .box .left .title,
    #create-review-preview .box .left .title {
        font-size: 26px;
    }

    .blog-card {
        grid-template-columns: 96px minmax(0, 1fr);
        column-gap: 14px;
    }
    .blog-card .cover {
        height: 96px;
    }
    .blog-card .name {
        font-size: 15px;
    }
    .blog-card .excerpt {
        font-size: 14px;
        line-height: 20px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    #blog-listing .toolbar .search-form input {
        padding-right: 110px;
    }

    footer.compass-footer .bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    /* The base moves the language switch into the link columns here; this
       footer keeps it in the panel. */
    footer.compass-footer .row .panel .locale {
        display: flex;
    }
    footer.compass-footer .row .menu {
        gap: 6px 18px;
    }

    #not-found.compass-404 .code {
        font-size: 92px;
    }
    #not-found.compass-404 .code .zero {
        width: 76px;
        height: 76px;
    }
    #not-found.compass-404 .title {
        font-size: 26px;
    }
    #not-found.compass-404 .text {
        font-size: 15px;
    }
}

/* iOS Safari zooms the page into a field set under 16px and leaves it
   zoomed: on touch screens the fields keep to 16px. */
@media (pointer: coarse) {

    input.form-control,
    select.form-control,
    textarea.form-control {
        font-size: 16px !important;
    }
}