/* =========================================================================
   Уклад — the modules' pages re-dressed: catalogue, services, portfolio.
   Linked last (templates/base.twig), after the modules' own styles and the
   site's design tokens. Tokens and components come from uklad.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Shared: the dark "drawing board" treatment for page heads
   ------------------------------------------------------------------------- */

.svc-hero.cms-tone-soft:not(#uk) {
    --section-bg: var(--uk-g-900);
    --c-bg: var(--uk-g-900);
    --c-surface: var(--uk-g-800);
    --c-surface-sunk: var(--uk-g-950);
    --c-text: #e7e6e1;
    --c-text-strong: #ffffff;
    --c-text-muted: #a8acb2;
    --c-text-faint: #7d828a;
    --c-border: #3a3f47;
    --c-border-strong: #e7e6e1;
    --c-link: var(--uk-y);
    --c-mark: var(--uk-y);
    --c-mark-text: var(--uk-y);
    background-color: var(--uk-g-900);
    background-image: var(--uk-grid-dark);
    background-size: var(--uk-grid-size);
    color-scheme: dark;
}

/* Icon chips: solid yellow squares with graphite icons. */
.cat-pros__item .cms-icon,
.svc-checklist .cms-icon,
.svc-order__facts .cms-icon,
.pf-checks .cms-icon,
.cat-tile__icon,
.pf-head__icon {
    background: var(--uk-y) !important;
    color: #131518 !important;
}

.svc-card__icon {
    background: #131518 !important;
    color: var(--uk-y) !important;
}

.pf-review__initial {
    background: var(--uk-y) !important;
    color: #131518 !important;
    font-family: var(--font-display);
}

/* Stencil type for the modules' headings and figures. */
:is(.cat-card__title, .cat-tile__title, .svc-card__title, .pf-card__title, .cat-tree__title, .cat-section-title, .cat-related__title, .svc-h2, .pf-section__title, .pf-story__title, .cat-keyspecs__title, .svc-includes__title, .svc-pack__name, .svc-order__title) {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

:is(.cat-price__value, .svc-card__amount, .svc-fact__value, .svc-includes__amount, .svc-row__amount, .svc-pack__amount, .pf-metrics__value, .svc-sticky__price) {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-text-strong);
}

/* -------------------------------------------------------------------------
   Catalogue
   ------------------------------------------------------------------------- */

.cat-head__title { line-height: 1.06; }

.cat-head__count {
    background: #131518 !important;
    color: var(--uk-y) !important;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cat-tree {
    border: 0 !important;
    border-top: 4px solid #131518 !important;
    background: #ffffff;
}

.cat-tree__title a { color: var(--c-text-strong); text-decoration: none; }
.cat-tree__link { text-decoration: none; }
.cat-tree__link:hover { color: var(--c-text-strong); background: var(--uk-concrete); }

.cat-tree__link[aria-current] {
    background: #131518 !important;
    color: var(--uk-y) !important;
    font-weight: 600;
}

.cat-card,
.cat-tile {
    border-top: 3px solid #131518;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.cat-card:hover,
.cat-tile:hover {
    border-top-color: var(--uk-y);
    box-shadow: 8px 8px 0 0 var(--uk-y);
    transform: translate(-3px, -3px);
}

.cat-card__title { font-size: 1.12rem; line-height: 1.15; }
.cat-card:hover .cat-card__title { color: var(--c-text-strong); }
.cat-card__media { background: var(--uk-concrete); }

.cat-badge { font-family: var(--font-display); letter-spacing: 0.08em; }

.cat-tile__arrow { background: var(--uk-y) !important; color: #131518 !important; }

/* The product's price box: a spec plate with a yellow top edge. */
.cat-buy {
    border: 1px solid var(--c-border) !important;
    border-top: 6px solid var(--uk-y) !important;
    background: #ffffff;
    box-shadow: 10px 10px 0 0 rgb(19 21 24 / 0.08);
}

.cat-product__title { line-height: 1.06; }

.cat-tabs__tab {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cat-gallery__stage,
.cat-gallery__thumb { background: var(--uk-concrete); }

.cat-seo { border-top: 2px solid #131518; }
.cat-banner { border-bottom: 6px solid var(--uk-y); }

/* -------------------------------------------------------------------------
   Services
   ------------------------------------------------------------------------- */

.svc-hero.cms-tone-soft .svc-hero__title { color: #ffffff; line-height: 1.06; }
.svc-hero.cms-tone-soft .svc-hero__lead { color: #cfd0cc; }
.svc-hero.cms-tone-soft .svc-fact__value { color: var(--uk-y); }
.svc-hero.cms-tone-soft .svc-crumbs a { color: #cfd0cc; }
.svc-hero.cms-tone-soft .cms-btn--ghost { border-color: rgb(255 255 255 / 0.45); color: #fff; }
.svc-hero.cms-tone-soft .cms-btn--ghost:hover,
.svc-hero.cms-tone-soft .cms-btn--primary:hover { background: transparent; border-color: var(--uk-y); color: var(--uk-y); }
.svc-hero__media { box-shadow: 14px 14px 0 0 var(--uk-y) !important; }

.svc-badge {
    background: var(--uk-y) !important;
    color: #131518 !important;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Service cards: a steel plate — graphite top edge, icon stamp, figure. */
.svc-card {
    border-top: 4px solid #131518 !important;
    background: #ffffff;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.svc-card:hover {
    border-top-color: var(--uk-y) !important;
    box-shadow: 8px 8px 0 0 var(--uk-y) !important;
    transform: translate(-3px, -3px);
}

.svc-card__title { font-size: 1.28rem; line-height: 1.12; }
.svc-card__amount { font-size: 1.35rem; }

.svc-card__arrow {
    background: #131518 !important;
    border-color: #131518 !important;
    color: var(--uk-y) !important;
}

.svc-card:hover .svc-card__arrow {
    background: var(--uk-y) !important;
    border-color: var(--uk-y) !important;
    color: #131518 !important;
}

.svc-list__more { text-align: start !important; }

.svc-step__num {
    background: #131518 !important;
    color: var(--uk-y) !important;
    font-family: var(--font-display);
}

.svc-includes,
.svc-order__box { border-top: 6px solid var(--uk-y) !important; }

.svc-row:hover { background: #fffbea !important; }

/* -------------------------------------------------------------------------
   Portfolio
   ------------------------------------------------------------------------- */

.pf-case-hero__title { line-height: 1.08; text-transform: uppercase; }
.pf-head__title { text-transform: uppercase; line-height: 1.06; }
.pf-case-cover__frame { box-shadow: 14px 14px 0 0 var(--uk-y) !important; }

.pf-metrics { background-image: var(--uk-grid-dark); background-size: var(--uk-grid-size); }
.pf-metrics__item { border-top: 3px solid var(--uk-y) !important; }

.pf-facts { border-top: 6px solid var(--uk-y); background: #ffffff !important; }

.pf-story__num {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--uk-y);
    color: #131518 !important;
    font-family: var(--font-display);
}

.pf-card {
    border-top: 3px solid #131518;
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.pf-card:hover {
    box-shadow: 8px 8px 0 0 var(--uk-y);
    transform: translate(-3px, -3px);
}

.pf-card__go { background: var(--uk-y) !important; color: #131518 !important; }

.pf-review { border-top: 6px solid var(--uk-y); }
.pf-review__mark { color: var(--uk-y) !important; }

.cat-card__title { hyphens: auto; }

@media (max-width: 40rem) {
    .cat-card__title { font-size: 0.98rem; }
}