/* ==================
 * General
 * ================== */
* {
    padding: 0;
    margin: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    /*For font weight (like in Figma)*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /*For iOS*/
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-family: var(--font-family);
    font-weight: 400;
    background: var(--white); /* #EBF5FF */

    /*For iOS*/
    font-kerning: none;
    font-variant-ligatures: none;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

/* ==================
 * Header
 * ==================
 * It follows the page down at every width.
 *
 * `sticky`, not `fixed`, and that is the whole reason nothing else had to
 * change: a sticky element keeps its place in the flow, so no wrapper has to
 * be padded by the bar's height and no page starts under it. Which matters
 * here more than usual — the logo is an upload (`custom-logo` is declared
 * flex-width/flex-height), so the header is as tall as whatever was uploaded
 * and there is no height to hardcode.
 *
 * The fill has to be opaque, or the page reads through the bar as it scrolls
 * under it; `--white` is the page's own colour, so the bar looks exactly as it
 * did standing still. `z-index: 100` is the value the open mobile panel
 * already pins the bar at.
 *
 * Two things do need the height as a number — a fragment jump and the columns
 * `initStickyColumn` pins — and both read `--header-h`, which `custom.js`
 * measures off this element. See `initHeaderHeight()`.
 */
.main-header {
    position: -webkit-sticky;
    position: sticky;
    z-index: 100;
    top: 0;
    padding-top: 15px;
    padding-bottom: 19px;
    background: var(--white);
}
/* Under the admin bar rather than behind it. Only above 782, where WordPress
   fixes its own bar to the top; below that it scrolls away with the page and
   the header belongs at 0. */
@media (min-width: 783px) {
    body.admin-bar .main-header {
        top: 32px;
    }
}
/* A jump to `#current-vacancies` — the vacancy filter's no-JS path — or to any
   other fragment would land its target under the bar. The fallback is the
   phone bar's own 60, for the moment before `custom.js` measures the real
   one (and for a visitor without JavaScript, where the desktop header is
   taller than the fallback and the target lands a little high — which is the
   harmless direction). */
html {
    scroll-padding-top: calc(var(--header-h, 60px) + 15px);
}
.main-header__navigation {
    gap: 15px;
}

/*
 * Navigation
 */
.main-navigation > div > div > ul.menu {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 30px;
}
.main-navigation > div > div > ul.menu .menu-item {
    list-style: none;
}
.main-navigation > div > div > ul.menu .menu-item a {
    text-decoration: none;

    -webkit-transition: var(--transition-02);
    -moz-transition: var(--transition-02);
    -ms-transition: var(--transition-02);
    -o-transition: var(--transition-02);
    transition: var(--transition-02);
}
.main-navigation > div > div > ul.menu > li.menu-item > a {
    color: var(--second);
    font-size: 16px;
    font-style: normal;
    line-height: 135%;
}

/*
 * Dropdown submenus (desktop) — Figma node 986:7871
 * Two nested levels: ul.sub-menu (level 1) and ul.sub-menu ul.sub-menu (level 2).
 */
.main-navigation .menu-item-has-children {
    position: relative;
}

/* Top-level parent link: flex so the chevron sits beside the label */
.main-navigation > div > div > ul.menu > li.menu-item > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Chevron on top-level items that have a dropdown */
.main-navigation > div > div > ul.menu > li.menu-item-has-children > a::after {
    content: "";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url(../images/arrow-down.svg) no-repeat center;
    mask: url(../images/arrow-down.svg) no-repeat center;
    -webkit-mask-size: 11px 6px;
    mask-size: 11px 6px;

    -webkit-transition: var(--transition-02);
    -o-transition: var(--transition-02);
    transition: var(--transition-02);
}
.main-navigation > div > div > ul.menu > li.menu-item-has-children:hover > a::after,
.main-navigation > div > div > ul.menu > li.menu-item-has-children:focus-within > a::after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Submenu panels (shared) */
.main-navigation ul.sub-menu {
    position: absolute;
    z-index: 20;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 240px;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--white);

    -webkit-border-radius: var(--radius-15);
    -moz-border-radius: var(--radius-15);
    border-radius: var(--radius-15);

    -webkit-box-shadow: 0 15px 40px rgba(0, 13, 26, 0.15);
    box-shadow: 0 15px 40px rgba(0, 13, 26, 0.15);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.main-navigation .menu-item-has-children:hover > ul.sub-menu,
.main-navigation .menu-item-has-children:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Level 1: opens below the header bar, aligned to the parent item's left */
.main-navigation > div > div > ul.menu > li.menu-item > ul.sub-menu {
    top: 100%;
    left: 0;
    margin-top: var(--submenu-gap, 33px);
    padding: 15px;
}
/* Invisible bridge so the hover intent survives the gap under the bar */
.main-navigation > div > div > ul.menu > li.menu-item > ul.sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--submenu-gap, 33px));
    height: var(--submenu-gap, 33px);
}

/* Level 2: opens to the right of the hovered level-1 item */
.main-navigation ul.sub-menu ul.sub-menu {
    top: 0;
    left: calc(100% + 15px);
    padding: 10px 15px;
}
/* Invisible bridge across the 15px column between panels */
.main-navigation ul.sub-menu ul.sub-menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15px;
    width: 15px;
}

/* Submenu items — full-width rows */
.main-navigation ul.sub-menu .menu-item {
    width: 100%;
    list-style: none;
}
.main-navigation ul.sub-menu .menu-item > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
    color: var(--second);
    text-decoration: none;
    line-height: 1.35;
}

/* Level-1 items: 16px, red arrow-right when the item has a further level, 1px dividers */
.main-navigation > div > div > ul.menu > li.menu-item > ul.sub-menu > li.menu-item {
    -webkit-box-shadow: inset 0 -1px 0 var(--second);
    box-shadow: inset 0 -1px 0 var(--second);
}
.main-navigation > div > div > ul.menu > li.menu-item > ul.sub-menu > li.menu-item > a {
    padding: 10px 0;
    font-size: 16px;
}
.main-navigation > div > div > ul.menu > li.menu-item > ul.sub-menu > li.menu-item-has-children > a::after {
    content: "";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url(../images/arrow-right.svg) no-repeat center / contain;
    mask: url(../images/arrow-right.svg) no-repeat center / contain;
}

/* Level-2 items: 14px, tighter spacing, no dividers, no arrow */
.main-navigation ul.sub-menu ul.sub-menu > li.menu-item {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.main-navigation ul.sub-menu ul.sub-menu > li.menu-item > a {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 5px 0;
    font-size: 14px;
}

/* Hover / focus / active colour for submenu items (arrow follows via currentColor) */
.main-navigation ul.sub-menu .menu-item:hover > a,
.main-navigation ul.sub-menu .menu-item:focus-within > a,
.main-navigation ul.sub-menu .menu-item.current-menu-item > a,
.main-navigation ul.sub-menu .menu-item.current-menu-ancestor > a {
    color: var(--accent);
}

/*
 * Language switcher — Figma node 986:8053
 * The Polylang widget prints a native <select>; polylang-switcher.js enhances it
 * into the custom dropdown below and marks the wrapper `.is-enhanced`. Without
 * JS the native select stays visible and usable.
 */
.lang-switcher {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 30px;
}
.lang-switcher.is-enhanced select {
    display: none;
}

/* Trigger — mirrors a top-level nav item (16px, chevron 16x16) */
.lang-switcher__btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    color: var(--second);
    font-family: inherit;
    font-size: 16px;
    font-style: normal;
    line-height: 135%; /* 21.6px */
    text-transform: uppercase;
    cursor: pointer;

    -webkit-transition: var(--transition-02);
    -o-transition: var(--transition-02);
    transition: var(--transition-02);
}
.lang-switcher__btn:hover,
.lang-switcher__btn:focus-visible {
    color: var(--accent);
}
.lang-switcher__btn::after {
    content: "";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url(../images/arrow-down.svg) no-repeat center;
    mask: url(../images/arrow-down.svg) no-repeat center;
    -webkit-mask-size: 11px 6px;
    mask-size: 11px 6px;

    -webkit-transition: var(--transition-02);
    -o-transition: var(--transition-02);
    transition: var(--transition-02);
}
/* The chevron does NOT flip when the panel opens — the mockup keeps it down. */

/*
 * Panel — opens below the header bar, horizontally centred on the current
 * language label. The trigger box also contains the chevron (16px + 5px gap),
 * so the centre is pulled back by half of it to line up with the label itself.
 */
.lang-switcher__list {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 50%;

    -webkit-transform: translateX(calc(-50% - 10.5px));
    -ms-transform: translateX(calc(-50% - 10.5px));
    transform: translateX(calc(-50% - 10.5px));

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: var(--submenu-gap, 33px) 0 0;
    padding: 10px 30px;
    list-style: none;
    background-color: var(--white);

    -webkit-border-radius: var(--radius-15);
    -moz-border-radius: var(--radius-15);
    border-radius: var(--radius-15);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.lang-switcher.is-open .lang-switcher__list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.lang-switcher__item {
    width: 100%;
    list-style: none;
}
.lang-switcher__link {
    display: block;
    padding: 5px 0;
    color: var(--second);
    font-size: 14px;
    font-style: normal;
    line-height: 135%; /* 18.9px */
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;

    -webkit-transition: var(--transition-02);
    -o-transition: var(--transition-02);
    transition: var(--transition-02);
}
.lang-switcher__link:hover,
.lang-switcher__link:focus-visible,
.lang-switcher__link.is-current {
    color: var(--accent);
}

/* ==================
 * Home Page
 * ================== */
/*
 * Banner Carousel
 */
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination {
    gap: 5px;
    inset: auto;
    width: auto;

    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}
.swiper-horizontal > .swiper-pagination-bullets {
    position: relative;
    inset: initial;
    width: auto;
    gap: 5px;

    -webkit-transform: initial;
    -moz-transform: initial;
    -ms-transform: initial;
    -o-transform: initial;
    transform: initial;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-bullet {
    position: relative;
    width: 60px;
    height: 5px;
    margin: 0;
    background: var(--white);
    opacity: 0.8;
    overflow: hidden;

    -webkit-border-radius: var(--radius-5);
    -moz-border-radius: var(--radius-5);
    border-radius: var(--radius-5);

    -webkit-transition: var(--transition-03);
    -moz-transition: var(--transition-03);
    -ms-transition: var(--transition-03);
    -o-transition: var(--transition-03);
    transition: var(--transition-03);
}
body.page-template-home-page .news .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    background: var(--black);
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 150px;
    opacity: 1;
}

.swiper-pagination-bullet:before,
.swiper-pagination-bullet::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--accent);

    -webkit-border-radius: var(--radius-5);
    -moz-border-radius: var(--radius-5);
    border-radius: var(--radius-5);
}

.swiper-pagination-bullet.is-progress:before,
.swiper-pagination-bullet.is-progress::before {
    -webkit-animation: bulletProgress 5s linear forwards;
    -o-animation: bulletProgress 5s linear forwards;
    animation: bulletProgress 5s linear forwards;
}

.swiper-button-prev,
.swiper-button-next,
.swiper-rtl {
    inset: auto;
    width: auto;
    height: auto;
    margin-top: auto;
}

.banner__box {
    max-width: 775px;
    padding: 60px 0 60px 60px;
}
/* 69 on the 1440 mockup, 32 on the 375 one, and fluid in between: at 769 the
   hero box is barely half as wide as at 1440, and a flat 69px title ran three
   deep lines out of the top of the photograph. */
.main-title {
    margin-bottom: 15px;
    color: var(--white);
    font-size: clamp(32px, calc(18.97px + 3.47vw), 69px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 69px */
    text-transform: capitalize;
}
.banner__desc {
    padding-right: 60px;
    margin-bottom: 15px;
    color: var(--white);
    font-weight: 400;
    font-size: 22px;
    line-height: 130%; /* 28.6px */
}

.swiper-button-area {
    gap: 19px;
    right: 0;
    bottom: 0;
    width: 100%;
    padding-bottom: 60px;
    padding-right: 60px;
}
.swiper-buttons-area {
    gap: 19px;
}

.swiper-button-next:after,
.swiper-button-next::after,
.swiper-button-prev:after,
.swiper-button-prev::after {
    display: none;
}
/* Hover — the glyph turns `--accent`, whichever way its SVG is coloured.
   It takes two rules because the theme draws these arrows two ways:
   `Icon::chevronOutline()` strokes with `currentColor`, which the button's own
   `color` reaches, while `Icon::chevron()` carries a `fill` of its own (it is a
   straight Figma export) — and a presentation attribute is only beaten by a
   rule on the path itself, never by `color`.
   `path[fill]` rather than `path`, so the outline chevron's arrow, which is a
   stroked line with no fill, is not filled in solid. */
.swiper-button-prev svg path[fill],
.swiper-button-next svg path[fill] {
    transition: fill 0.2s ease-in-out;
}
.swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
    color: var(--accent);
}
.swiper-button-prev:hover svg path[fill],
.swiper-button-next:hover svg path[fill],
.swiper-button-prev:focus-visible svg path[fill],
.swiper-button-next:focus-visible svg path[fill] {
    fill: var(--accent);
}

/*
 * About Us
 */
.about-us__row {
    gap: 30px;
    margin-bottom: 90px;
}

.about-us__number-card {
    flex: 1 1 25%;
    width: 25%;
}
.about-us__number-card:after,
.about-us__number-card::after {
    position: absolute;
    top: 0;
    right: -15px;
    width: 1px;
    height: 100%;
    background: var(--black);
    content: '';
}
.about-us__number-card:last-child:after,
.about-us__number-card:last-child::after {
    display: none;
}
.about-us__numbers {
    gap: 30px;
}
/* Both mockups set 69/100% over 20-22px. The value is fluid only for the range
   in between, where four cards still share one row; the 375 mockup stacks them
   and puts the full 69 back (see responsive.css). */
.about-us__number-value {
    margin-bottom: 15px;
    color: var(--accent);
    font-size: var(--fs-h1);
    font-weight: 500;
    line-height: 100%; /* 69px */
    text-transform: capitalize;
}
.about-us__number-description {
    color: var(--black);
    font-size: var(--fs-h6); /* fluid 20 -> 22: the mockups' own two sizes */
    line-height: 130%; /* 28.6px */
}

/*
 * Catalog
 */
.product-catalog.block {
    margin-bottom: 150px;
}
.product-catalog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
    grid-auto-rows: auto;
    align-items: start;
}
.product-catalog__card {
    grid-row: span 1;
    height: 400px;
    overflow: hidden;
}
.product-catalog__card:before,
.product-catalog__card::before {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: linear-gradient(180deg, rgba(0, 13, 26, 0.00) 0%, rgba(0, 13, 26, 0.30) 100%);
    opacity: 0;

    -webkit-transition: var(--transition-025);
    -moz-transition: var(--transition-025);
    -ms-transition: var(--transition-025);
    -o-transition: var(--transition-025);
    transition: var(--transition-025);
}
.product-catalog__card:hover:before,
.product-catalog__card:hover::before {
    opacity: 1;
}

.product-catalog__header {
    padding-bottom: 24px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--black);
}
.product-catalog__nav-btn {
    gap: 5px;
    color: var(--second);
    font-size: 18px;
    text-decoration: none;

    -webkit-transition: var(--transition-02);
    -moz-transition: var(--transition-02);
    -ms-transition: var(--transition-02);
    -o-transition: var(--transition-02);
    transition: var(--transition-02);
}
.product-catalog__nav-btn:hover {
    color: var(--accent);
}
.product-catalog__nav-btn svg path {
    -webkit-transition: var(--transition-02);
    -moz-transition: var(--transition-02);
    -ms-transition: var(--transition-02);
    -o-transition: var(--transition-02);
    transition: var(--transition-02);
}
.product-catalog__nav-btn:hover svg path {
    fill: var(--accent);
}

/* FULL */
.product-catalog__card--full {
    grid-column: span 12;
}

/* LARGE */
.product-catalog__card--large {
    grid-column: span 7;
}

/* MEDIUM */
.product-catalog__card--medium {
    grid-column: span 5;
}

.product-catalog__card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    /* The news card's zoom, timing and all — the same hover every other
       photograph on the site plays (`.news-card__image`, `.subcat-card__image`).
       The card already clips it: `.product-catalog__card` is `overflow: hidden`
       with `radius-45`, so the picture grows inside its rounded corners while
       the tile itself keeps its edges — and the gradient the card fades in over
       it (`::before`, z-index 8) stays put. */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-catalog__card:hover .product-catalog__card-image,
.product-catalog__card:focus-visible .product-catalog__card-image {
    transform: scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
    .product-catalog__card-image {
        transition: none;
    }
    .product-catalog__card:hover .product-catalog__card-image,
    .product-catalog__card:focus-visible .product-catalog__card-image {
        transform: none;
    }
}

.product-catalog__card-title,
.product-catalog__card-title.bottom {
    bottom: -60px;

    -webkit-transition: var(--transition-025);
    -moz-transition: var(--transition-025);
    -ms-transition: var(--transition-025);
    -o-transition: var(--transition-025);
    transition: var(--transition-025);
}
.product-catalog__card:hover .product-catalog__card-title,
.product-catalog__card:hover .product-catalog__card-title.bottom {
    bottom: 0;
}
.product-catalog__card-text {
    gap: 15px;
    padding: 30px;
    color: var(--white);
    font-size: var(--fs-h4); /* fluid 26 -> 35: the mockups' own two sizes */
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 35px */
}
.product-catalog__card-text svg {
    width: 37px;
    height: 20px;
}

/* Intermediate — the mockup's 400px rows are cut for the narrower grid rather
   than left to squash the cards into letterboxes. Below 769 the grid becomes a
   single column and the cards take the mockup's own aspect ratio instead. */
@media (max-width: 1200px) {
    .product-catalog__card {
        height: 340px;
    }
}
@media (max-width: 992px) {
    .product-catalog__card {
        height: 280px;
    }
}

/*
 * Our Services
 *
 * The three glass plates float over the photograph on absolute coordinates. In
 * the mockup the photo is 757x641 and every plate is measured against it, so
 * the frame carries that aspect ratio and becomes an inline-size container:
 * each plate's width, padding, icon and type are written in `cqw` — hundredths
 * of the photo's own width — and its vertical anchor as a percentage of the
 * frame. At 1440 those resolve to the mockup's pixels exactly, and below it the
 * whole arrangement shrinks with the photo instead of spilling over its edges,
 * which is what fixed 291/356/294px widths did as soon as the row narrowed.
 *
 * Only the type is clamped: past ~700px of photo the proportional size would
 * drop under 14px, and a plate whose text stays readable while its box keeps
 * shrinking is the one thing that can still make two plates meet. 14px is the
 * floor that survives the narrowest two-column layout (769, photo 424 wide) —
 * measured, not guessed. Below 576 the plates are not rendered at all: the 375
 * mockup shows the photo alone.
 */
/* The 30px gutter the mockup puts between the copy and the photograph, and
   which `.about-us__row` — the same two-column shape one section up — has had
   all along. Without it the two flex bases add up to 1290 of the row's 1320 and
   the extra 30 is shared out instead, so the description ran to the edge of the
   photo and the frame came out 772 wide rather than 757. */
.our-services__row {
    gap: 30px;
}
.our-services__image {
    container-type: inline-size;
    aspect-ratio: 757 / 641; /* the uploaded photograph's own ratio */
}
.our-services__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.our-services__bullet {
    gap: 0.79cqw; /* 6 / 757 */
    width: 38.44cqw; /* 291 */
    padding: 4.36cqw 1.98cqw 2.25cqw; /* 33 / 15 / 17 */
    background: rgba(255, 255, 255, 0.10);

    -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);

    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.our-services__bullet--1 {
    top: 0;
    left: 14.53cqw; /* 110 */
}
.our-services__bullet--2 {
    top: 31.74%; /* 203.5 / 641 */
    right: 0;
    width: 47.03cqw; /* 356 */
}
.our-services__bullet--3 {
    left: 0;
    bottom: 9.67%; /* 62 / 641 */
    width: 38.84cqw; /* 294 */
    padding-top: 4.89cqw; /* 37 */
    padding-bottom: 1.98cqw; /* 15 */
}


.our-services__bullet img {
    width: clamp(22px, 4.62cqw, 35px);
    height: auto;
}

.our-services__bullet-text {
    color: var(--second);
    font-size: clamp(14px, 2.91cqw, 22px); /* 22 / 757 */
    font-style: normal;
    line-height: 131%; /* 28.6px */
}

/* ==================
 * Form
 * ================== */
.have-question {
    position: relative;
    z-index: 0; /* own stacking context, so the photograph can sit behind */
    padding: 115px 60px;
}
/* The photograph. `z-index: -2` puts it under everything in the section,
   including the `-1` backdrop the Services variant draws behind its card. */
.have-question__bg {
    position: absolute;
    z-index: -2;
    inset: 0;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: inherit;
}
body.archive .have-question.block {
    margin-bottom: 0;
}
.have-question__form {
    padding: 58px 45px 45px;
    width: 532px;
    background: var(--white);
}
.form-title {
    color: var(--accent);
    text-align: center;
    font-size: 44px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 44px */
}
.form-subtitle {
    margin-bottom: 45px;
    color: var(--black);
    font-family: Geologica;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}

.form-row {
    gap: 15px;
    margin-bottom: 30px;
}
.form-row.form-row-message,
.form-row.form-row-file {
    margin-bottom: 15px;
}
.form-field-cell {
    flex: 1 1 50%;
    width: 50%;
}
.form-field-cell.form-field-cell-message {
    flex: 1 1 100%;
    width: 100%;
}
.form-field-cell span {
    display: block;
}
.form-field {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    max-width: 100%;
    padding-bottom: 11px;
    border: none;
    border-bottom: 1px solid var(--black);
    opacity: 0.5;
    background: transparent;
    font-family: var(--font-family);
    color: var(--black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    outline: none;
}
.form-field.wpcf7-textarea {
    width: 100%;
    height: 61px;
    resize: none;
}
.form-field.wpcf7-not-valid,
.form-field.wpcf7-textarea.wpcf7-not-valid {
    opacity: 1;
    border-block-color: var(--accent);
}
.form-field:focus {
    opacity: 1;
}

::placeholder {
    font-family: var(--font-family);
    color: var(--black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}
::-webkit-input-placeholder {
    font-family: var(--font-family);
    color: var(--black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}
::-moz-placeholder {
    font-family: var(--font-family);
    color: var(--black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}
:-ms-input-placeholder {
    font-family: var(--font-family);
    color: var(--black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}
:-moz-placeholder {
    font-family: var(--font-family);
    color: var(--black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}

.form-field.wpcf7-not-valid::placeholder {
    color: var(--accent);
}
.form-field.wpcf7-not-valid::-webkit-input-placeholder {
    color: var(--accent);
}
.form-field.wpcf7-not-valid::-moz-placeholder {
    color: var(--accent);
}
.form-field.wpcf7-not-valid:-ms-input-placeholder {
    color: var(--accent);
}
.form-field.wpcf7-not-valid:-moz-placeholder {
    color: var(--accent);
}

/* Contact Form 7 writes every outcome into this one element and marks the form
   with the status (`sent`, `invalid`, `failed`, `spam`, `unaccepted`,
   `aborted`), so the status decides whether it is shown at all.

   Nothing is said about invalid input: the fields themselves turn `--accent`,
   which is the same message on the thing it is about, and a summary above the
   button only repeats it while pushing the layout around. The per-field tip is
   hidden for the same reason.

   What is shown is the outcome the form cannot express by itself. `sent`,
   because the send goes over fetch and a successful one would otherwise look
   exactly like nothing happening. And the failures where nothing on the form
   turns red — the mail server refusing it, the spam check, an aborted send —
   which would otherwise be a silent loss. CF7 keeps its own copy of the message
   in `.screen-reader-response`, hence `aria-hidden` on this one. */
.wpcf7-not-valid-tip {
    display: none !important;
}
.wpcf7-response-output {
    display: none;
}
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
    display: block;
    margin: 30px 0 0;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: var(--radius-15);
    background: var(--light);
    color: var(--second);
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 1.35;
    text-align: center;
}
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
    border-color: var(--accent);
    background: var(--white-true);
    color: var(--accent);
}
/* Submitting: the send goes over fetch, so nothing about the page changes on
   its own and a slow answer reads as a dead button. The button's own icon gives
   way to the circular arrow the news archive's "Load more" spins — same glyph
   (`Icon::refresh()`), same keyframes — and it stops taking clicks. The spinner
   is put inside the button by `initFormSpinners()`, because these buttons are
   written by hand in the CF7 editor and no view can reach into them.
   `position: relative` keeps it above `.btn::before`, the hover fill. */
/* Scoped, not bare: `.form-field-cell span { display: block }` above is one
   class plus an element and would out-specify a lone `.form-spinner`, so the
   spinner would sit in the button permanently. */
.wpcf7-form .form-spinner {
    display: none;
    position: relative;
    z-index: 1;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}
.wpcf7-form .form-spinner svg {
    display: block;
    width: 100%;
    height: 100%;
}
.wpcf7-form.submitting .form-spinner {
    display: inline-block;
    animation: news-more-spin 0.8s linear infinite;
}
.wpcf7-form.submitting button[type="submit"] {
    opacity: 0.6;
    pointer-events: none;
}
/* Only the button's own icon — the `>` keeps the spinner's own svg out of it. */
.wpcf7-form.submitting button[type="submit"] > svg {
    display: none;
}
/* FilePond ships its own typography on the root — a system font stack and
   `font-weight: 450` — and everything it renders inherits it: the drop label,
   the uploaded file's name, its status line. Overriding it here rather than on
   the label alone means the file name matches the site once someone attaches
   something. */
.filepond--root {
    margin-bottom: 0;
    font-family: var(--font-family);
    font-weight: 400;
}
.filepond--root .filepond--drop-label {
    min-height: 84px;
    cursor: pointer;

    -webkit-border-radius: var(--radius-15);
    -moz-border-radius: var(--radius-15);
    border-radius: var(--radius-15);
}
.filepond--panel-root {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;

    background: var(--light);

    -webkit-border-radius: var(--radius-15);
    -moz-border-radius: var(--radius-15);
    border-radius: var(--radius-15);
}
.filepond--drop-label.filepond--drop-label label {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 0;
    color: var(--second);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    text-align: center;
    cursor: pointer;
}

.form-privacy-policy {
    margin-bottom: 15px;
    color: var(--black);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
}
.form-privacy-policy a {
    opacity: 0.6;
    color: var(--accent);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
.form-privacy-policy a:hover {
    text-decoration-line: none;
}

.form-row.form-row-submit {
    margin-bottom: 0;
}
.form-row.form-row-submit .btn {
    width: 205px;
    height: 54px;
}

/* ==================
 * Footer
 * ================== */
.main-footer {
    background: var(--light);
}

/* "Have a question?" form —
 * Compact CF7 form: heading + subtitle, then one .form-row with four inputs and
 * the submit button inline (the button lives in .form-field-cell-file), plus a
 * privacy line. Reuses the shared .form-* styles; here we lay the row out. */
.footer-form {
    padding: 45px 0 30px;
}
.footer-form .form-title {
    margin-bottom: 15px;
    font-size: 44px;
}
.footer-form .form-subtitle {
    margin-bottom: 15px;
    text-align: center;
}
/* Inputs + submit in a single centred row */
.footer-form .form-row {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 15px;
}
.footer-form .form-field-cell {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
}
/* Submit cell hugs its button instead of stretching */
.footer-form .form-field-cell-file {
    flex: 0 0 auto;
}
.footer-form .form-field-cell .btn {
    width: 205px;
    height: 54px;
}
.footer-form .form-privacy-policy {
    margin-top: 15px;
    text-align: center;
}

/* Mobile (375): stacked inputs, left-aligned copy, centred button */
@media (max-width: 575px) {
    .footer-form {
        padding: 40px 0;
    }
    .footer-form .form-title,
    .footer-form .form-subtitle,
    .footer-form .form-privacy-policy {
        text-align: left;
    }
    .footer-form .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    .footer-form .form-field-cell-file {
        align-self: center;
        margin-top: 15px;
    }
}

/* Footer content — brand · link columns · contacts · copyright */
.footer-main {
    padding: 60px 0 30px;
}
.footer-main__grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}
.footer-brand {
    flex: 0 0 269px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.footer-brand__logo,
.footer-brand__social-link {
    display: block;
    line-height: 0;
}
.footer-brand__logo-img {
    display: block;
    width: 270px;
    max-width: 100%;
    height: auto;
}
.footer-brand__social {
    display: flex;
    align-items: center;
    gap: 15px;
}
.footer-brand__social-link {
    transition: var(--transition-02);
}
.footer-brand__social-link:hover {
    opacity: 0.7;
}
.footer-brand__social-link img {
    display: block;
    width: 40px;
    height: 40px;
}

/* Three columns to the right of the brand */
.footer-cols {
    flex: 0 1 792px;
    display: flex;
    align-items: flex-start;
    gap: 60px;
}
.footer-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.footer-contacts {
    flex: 0 0 269px;
}
/* Widget wrapper: a widget area holds the heading and the list in one item,
   so it repeats the column's own rhythm. */
.footer-col__widget {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.footer-col__title {
    color: var(--accent);
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
}
/* Any list in a column, so a Navigation Menu widget needs no extra classes. */
.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-col ul li {
    list-style: none;
}
.footer-col ul a {
    display: inline-block;
    padding: 5px 0;
    color: var(--second);
    font-size: 16px;
    line-height: 135%;
    text-decoration: none;
    transition: var(--transition-02);
}
.footer-col ul a:hover {
    color: var(--accent);
}
.footer-col__list--legal a {
    padding: 5px 15px;
}

/* Contact info */
.footer-contacts__address {
    color: var(--black);
    font-size: 18px;
    font-style: normal;
    line-height: 130%;
}
.footer-contacts__row {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--black);
    font-size: 18px;
    line-height: 130%;
    text-decoration: none;
    transition: var(--transition-02);
}
.footer-contacts__row:hover {
    color: var(--accent);
}
.footer-contacts__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* Legal links above the copyright line — the `Footer — Privacy & Terms` widget
   area. Nothing renders until a widget is added, and nothing is drawn above 768:
   the desktop footer keeps these links inside the Contact info column, where the
   mockup puts them, and the phone gets a row of its own instead. Any list inside
   is styled, so a plain Navigation Menu widget needs no extra classes. */
.footer-legal {
    display: none;
}
.footer-legal__title {
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 18px;
    font-weight: 400;
    line-height: 130%;
    text-align: center;
}
.footer-legal ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-legal ul li {
    list-style: none;
}
.footer-legal ul a {
    display: inline-block;
    color: var(--second);
    font-size: 14px;
    line-height: 135%;
    text-decoration: none;
    transition: var(--transition-02);
}
.footer-legal ul a:hover {
    color: var(--accent);
}

.footer-copy {
    margin-top: 30px;
    color: var(--black);
    font-size: 12px;
    line-height: 130%;
}

/* Tablet / mobile — stack: brand on top, Catalog + Other side by side,
   Contact full width */
@media (max-width: 992px) {
    .footer-main__grid {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    /* Unwrap the brand so the logo sits on top and the social row can move
       below the columns (as in the 375 mockup) via order */
    .footer-brand {
        display: contents;
    }
    .footer-brand__logo {
        align-self: center;
    }
    .footer-brand__social {
        order: 1;
        align-self: center;
    }
    .footer-cols {
        flex: none;
        width: 100%;
        flex-wrap: wrap;
        gap: 30px 15px;
    }
    .footer-col {
        flex: 1 1 40%;
    }
    .footer-contacts {
        flex: 1 1 100%;
    }
    .footer-copy {
        margin-top: 20px;
        text-align: center;
    }
}
/* The one width the legal row exists at */
@media (max-width: 768px) {
    .footer-legal {
        display: block;
        margin-top: 20px;
    }
}
@media (max-width: 575px) {
    .footer-brand__logo-img {
        width: 190px;
    }
}

/* ==================
 * Home / Advantages
 * ================== */
.advantages__row {
    position: relative; /* anchor for the JS-pinned aside's bottom "dock" state */
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

/* Left column — heading */
.advantages__aside {
    flex: 1 1 0;
    min-width: 0;
}
.advantages__title {
    color: var(--accent);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 100%;
}

/* Right column — list of advantages */
.advantages__list {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.advantage {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 15px;
    border-left: 3px solid var(--second);
    overflow: hidden;
}
.advantage__head {
    display: flex;
    align-items: center;
    gap: 15px;
}
.advantage__icon {
    flex-shrink: 0;
    width: clamp(48px, calc(36.73px + 3vw), 80px);
    height: clamp(48px, calc(36.73px + 3vw), 80px);
}
.advantage__icon img,
.advantage__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.advantage__title {
    color: var(--second);
    font-size: var(--fs-h5);
    font-weight: 400;
    line-height: 130%;
}
.advantage__text {
    color: var(--black);
    font-size: var(--fs-text);
    font-weight: 400;
    line-height: 130%;
}

/* ==================
 * Tablet — stack heading above the list (organic between 1440 and 375)
 * ================== */
@media (max-width: 992px) {
    .advantages__row {
        flex-direction: column;
        gap: 30px;
    }
}

/* ==================
 * Mobile — matches 375 mockup: icon above the title
 * ================== */
@media (max-width: 575px) {
    .advantage__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .advantage__title {
        line-height: 120%;
    }
}

/* ==================
 * Home / Why VAGOTEQ? (accordion)
 * ================== */
.why__title {
    color: var(--accent);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 30px;
}
.why__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Item = native <details>; exclusive via shared name attribute */
.why__item {
    border-bottom: 2px solid var(--accent);
    padding-bottom: 30px;
}

/* Header row (the clickable <button>) */
.why__head {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 30px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.why__number {
    flex-shrink: 0;
    width: 100px;
    color: var(--accent);
    font-size: var(--fs-h1);
    font-weight: 500;
    line-height: 100%;
    opacity: 0.6;
    text-transform: capitalize;
}
.why__item-title {
    flex: 1 1 0;
    min-width: 0;
    color: var(--second);
    font-size: var(--fs-h4);
    font-weight: 400;
    line-height: 100%;
}
.why__toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--second);
    transition: transform 0.3s ease;
}
.why__icon {
    display: block;
    width: 75%;  /* 36 of 48 — matches Figma icon inset (12.5%) */
    height: 75%;
}
.why__item.is-open .why__toggle {
    transform: rotate(45deg); /* + becomes × */
}

@media (prefers-reduced-motion: reduce) {
    .why__toggle {
        transition: none;
    }
}

/* Expanded body — text aligns under the title (past the number column) */
.why__body {
    padding: 15px 130px 0; /* left: 100 number + 30 gap */
}
.why__text {
    color: var(--black);
    font-size: var(--fs-text);
    font-weight: 400;
    line-height: 130%;
}

/* Tablet — tighten the number column so the jump to mobile stays organic */
@media (max-width: 768px) {
    .why__head {
        gap: 20px;
    }
    .why__number {
        width: 72px;
    }
    .why__item {
        padding-bottom: 20px;
    }
    .why__toggle {
        width: 40px;
        height: 40px;
    }
    .why__body {
        padding: 15px 0 0 92px; /* 72 + 20 */
    }
}

/* Mobile — matches 375 mockup: no number, title + toggle only, full-width body */
@media (max-width: 575px) {
    .why__title {
        margin-bottom: 30px; /* 375 mockup: heading and rows share one 30px step */
    }
    .why__head {
        gap: 15px;
    }
    .why__number {
        display: none;
    }
    .why__item {
        padding-bottom: 15px;
    }
    .why__toggle {
        width: 30px;
        height: 30px;
    }
    .why__body {
        padding: 15px 0 0;
    }
}

/* ==================
 * Home / Our Partners
 * ================== */
.partners__head {
    max-width: 982px;
    margin-bottom: 30px;
}
.partners__title {
    color: var(--accent);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 15px;
}
.partners__subtitle {
    color: var(--black);
    font-size: var(--fs-text);
    font-weight: 400;
    line-height: 130%;
}

/* Staggered logo wall — 8-col grid, each logo spans 2 cols (4 per row);
   the middle row is offset by one column, giving the 4-3-4 brick. */
.partners__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: 30px;
    row-gap: 30px;
    grid-auto-rows: clamp(98px, calc(72px + 6.95vw), 172px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.partner {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: var(--white-true);
    border-radius: var(--radius-45);
}
/* Light logos (e.g. Philips) get a dark card so they stay legible */
.partner--dark {
    background: #012b5c;
}
.partner__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 68%;
    object-fit: contain;
}
.partner--dark .partner__logo {
    max-height: 77%;
}

/* Desktop 4-3-4 placement (item order matches the mockup) */
.partner:nth-child(1)  { grid-area: 1 / 1 / 2 / 3; }
.partner:nth-child(2)  { grid-area: 1 / 3 / 2 / 5; }
.partner:nth-child(3)  { grid-area: 1 / 5 / 2 / 7; }
.partner:nth-child(4)  { grid-area: 1 / 7 / 2 / 9; }
.partner:nth-child(5)  { grid-area: 2 / 2 / 3 / 4; }
.partner:nth-child(6)  { grid-area: 2 / 4 / 3 / 6; }
.partner:nth-child(7)  { grid-area: 2 / 6 / 3 / 8; }
.partner:nth-child(8)  { grid-area: 3 / 1 / 4 / 3; }
.partner:nth-child(9)  { grid-area: 3 / 3 / 4 / 5; }
.partner:nth-child(10) { grid-area: 3 / 5 / 4 / 7; }
.partner:nth-child(11) { grid-area: 3 / 7 / 4 / 9; }

/* Tablet — drop the stagger, straight 3-column grid */
@media (max-width: 768px) {
    .partners__grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 20px;
        row-gap: 20px;
    }
    .partners__grid .partner {
        grid-area: auto;
    }
}

/* Mobile — matches 375 mockup: straight 2-column grid */
@media (max-width: 575px) {
    .partners__grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 15px;
        row-gap: 15px;
    }
    .partner {
        border-radius: var(--radius-30);
    }
}

/* ==================
 * Home / Recent News
 * ================== */
.news__header {
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--black);
}
.news__all {
    gap: 5px;
    color: var(--second);
    font-size: 18px;
    line-height: 1.35;
    text-decoration: none;
    transition: var(--transition-02);
}
.news__all:hover {
    color: var(--accent);
}
.news__all svg,
.news__all svg path {
    transition: var(--transition-02);
}

/* Slider wrapper holds the swiper + the (external) nav */
.news__slider {
    position: relative;
}

/* Card = one slide: image left, info right (bottom-aligned) */
.news-card {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    height: auto; /* override swiper-slide stretch */
}
.news-card__media {
    flex: 0 0 calc((100% - 30px) / 2);
    max-width: calc((100% - 30px) / 2);
    aspect-ratio: 645 / 484;
    overflow: hidden;
    display: block;
}
.news-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease-in-out;
}

/* Hover — slow fluid zoom with a soft light lift and a shine sweep */
.news-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
    transform: translateX(-130%) skewX(-8deg);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.news-card__media:hover::before {
    transform: translateX(130%) skewX(-8deg);
}
@media (prefers-reduced-motion: reduce) {
    .news-card__image {
        transition: opacity 0.3s ease-in-out;
    }
    .news-card__media::before {
        content: none;
    }
    .news-card__media:hover .news-card__image {
        transform: none;
        filter: none;
    }
}

/* Image preloader — `.is-pending` is set by JS while the image loads */
.news-card__media {
    position: relative;
}
.news-card__media.is-pending {
    background: var(--light);
}
.news-card__media.is-pending .news-card__image {
    opacity: 0;
}
.news-card__media.is-pending::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 40%, rgba(235, 245, 255, 0.75) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: news-media-shimmer 1.2s linear infinite;
}
@keyframes news-media-shimmer {
    from {
        background-position: 120% 0;
    }
    to {
        background-position: -80% 0;
    }
}
.news-card__media:hover .news-card__image {
    transform: scale(1.07);
    filter: brightness(1.05) saturate(1.05);
}
.news-card__content {
    flex: 0 0 calc((100% - 30px) / 2);
    max-width: calc((100% - 30px) / 2);
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.news-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.news-card__tag {
    display: block;
    padding: 5px 10px;
    border: 1px solid var(--black);
    border-radius: var(--radius-30);
    color: var(--black);
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--transition-02);
}
a.news-card__tag:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.news-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-h3); /* fluid 29 -> 44: both mockups' own sizes */
    font-weight: 400;
    line-height: 100%;
}
.news-card__title a {
    color: var(--second);
    text-decoration: none;
    transition: var(--transition-02);
}
.news-card__title a:hover {
    color: var(--accent);
}
.news-card__excerpt {
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--black);
    font-size: var(--fs-text);
    line-height: 130%;
}
.news-card__more {
    gap: 5px;
    align-self: flex-start;
    padding: 5px 0;
    color: var(--accent);
    font-size: 18px;
    line-height: 1.35;
    text-decoration: none;
    transition: var(--transition-02);
}
.news-card__more:hover {
    color: var(--second);
}

/* Slider nav — sits in the right column, above the article info */
.news__nav {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
    width: calc((100% - 30px) / 2);
}
.news__arrows {
    flex-shrink: 0;
    gap: 5px;
}
.news__arrow {
    position: relative; /* reset swiper-button absolute positioning */
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin: 0;
    color: var(--second);
    opacity: 0.8;
    cursor: pointer;
    transition: var(--transition-02);
}
.news__arrow:hover {
    opacity: 1;
    color: var(--accent);
}
.news__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}
.news__arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}
.news__pagination.swiper-pagination {
    position: relative; /* keep it in the nav row (swiper base sets absolute) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    width: auto;
    margin: 0;
}
/* On the light section background the progress bars are dark */
.news .swiper-pagination-bullet {
    background: var(--black);
}

/* Tablet — nav drops under the slider */
@media (max-width: 940px) {
    .news__nav {
        position: static;
        width: 100%;
        margin-top: 24px;
        justify-content: flex-start;
    }
}

/* Mobile — matches 375 mockup: stacked card, progress bars only */
@media (max-width: 575px) {
    .news-card {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .news-card__media,
    .news-card__content {
        flex: 1 1 auto;
        max-width: 100%;
    }
    .news-card__media {
        aspect-ratio: 345 / 259;
    }
    /* `.radius-45` is a utility further down the file, so plain
       `.news-card__media` would lose to it on source order alone. */
    .news-card__media.radius-45 {
        border-radius: var(--radius-30);
    }
    .news-card__content {
        gap: 10px;
    }
    /* The 375 card gives its two clamped lines auto leading (986:6611 measures
       75 for them), where the desktop card sets them solid. */
    .news-card__title {
        line-height: 130%;
    }
    .news__nav {
        margin-top: 30px;
        justify-content: center;
    }
    /* Mobile mockup shows progress bars only. Written against `.d-flex`, which
       the arrows row also carries: the utility sits further down this file and
       a bare `.news__arrows` ties with it on specificity and loses on source
       order, so the arrows stayed on screen and took a third of the row the
       bars needed. */
    .news__arrows.d-flex {
        display: none;
    }
    .news__pagination.swiper-pagination {
        width: 100%;
    }
}

/* ==================
 * News archive (posts page + category archives)
 * ================== */
.news-archive__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px 30px;
    margin: 15px 0 60px;
}
.news-archive__title {
    color: var(--accent);
    font-size: clamp(36px, calc(24.38px + 3.1vw), 69px); /* mob-H1 36 -> 69 */
    font-weight: 500;
    line-height: 100%;
    text-transform: capitalize;
}
.news-archive__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.news-archive__filter {
    display: block;
    padding: 5px 10px;
    border: 1px solid var(--black);
    border-radius: var(--radius-30);
    color: var(--black);
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--transition-02);
}
.news-archive__filter:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.news-archive__filter.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

/* Cards list — the horizontal card variant of .news-card */
.news-archive__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.news-card--row .news-card__media {
    flex: 0 0 clamp(280px, 29.17vw, 420px);
    max-width: clamp(280px, 29.17vw, 420px);
    aspect-ratio: 420 / 316;
}
.news-card--row .news-card__content {
    flex: 1 1 auto;
    max-width: none;
}
.news-card--row .news-card__title {
    font-size: clamp(29px, calc(26.89px + 0.56vw), 35px); /* mob-H3 29 -> 35 */
}

/* Load more */
/* The category listing's "Load more" is the same button as the news archive's,
   down to the spinning icon, so the two share these rules. */
.news-archive__more-wrap,
.catalog-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.news-archive__more,
.catalog-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 15px 33px;
    background: var(--accent);
    border-radius: var(--radius-15);
    color: var(--white);
    font-size: 18px;
    line-height: 1.35;
    text-decoration: none;
    transition: var(--transition-02);
}
.news-archive__more:hover,
.catalog-more:hover {
    background: var(--second);
}
.news-archive__more svg,
.catalog-more svg {
    flex-shrink: 0;
}
.news-archive__more.is-loading,
.catalog-more.is-loading {
    opacity: 0.6;
    pointer-events: none;
}
.news-archive__more.is-loading svg,
.catalog-more.is-loading svg {
    animation: news-more-spin 0.8s linear infinite;
}
@keyframes news-more-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Tablet — the row card gets tight, stack it a bit earlier than the slider card */
@media (max-width: 768px) {
    .news-archive__head {
        margin-bottom: 40px;
    }
    .news-archive__filters {
        justify-content: flex-start;
    }
}
@media (max-width: 575px) {
    .news-archive__head {
        margin-bottom: 30px;
    }
    .news-archive__title {
        font-weight: 400; /* mob-H1 is Regular */
    }
    .news-archive__list {
        gap: 15px;
    }
    .news-card--row .news-card__media,
    .news-card--row .news-card__content {
        flex: 1 1 auto;
        max-width: 100%;
    }
    .news-card--row .news-card__media {
        aspect-ratio: 345 / 259;
        border-radius: var(--radius-30);
    }
    .news-card--row .news-card__content {
        gap: 10px;
    }
}

/* ==================
 * About — Corporate Social Responsibility (image slider)
 * ================== */
.csr__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 28px;
}
.csr__intro {
    max-width: 745px;
}
.csr__lead {
    color: var(--black);
    font-weight: 400;
    font-size: 18px;
    line-height: 130%;
}
.csr__lead p + p {
    margin-top: 15px;
}
.csr__arrows {
    flex-shrink: 0;
    align-self: flex-end;
    gap: 5px;
    margin-bottom: 6px;
}
.csr__arrow {
    position: relative; /* reset swiper-button absolute positioning */
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin: 0;
    color: var(--second);
    opacity: 0.8;
    cursor: pointer;
    transition: var(--transition-02);
}
.csr__arrow:hover {
    opacity: 1;
    color: var(--accent);
}
.csr__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}
.csr-slide {
    height: auto;
    overflow: hidden;
}
.csr-slide__image {
    display: block;
    width: 100%;
    aspect-ratio: 645 / 363;
    object-fit: cover;
}
.csr__pagination.swiper-pagination {
    position: relative; /* swiper base sets absolute */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: auto;
    margin: 30px 0 0;
}
/* On the light section background the progress bars are dark. Scoped to the
 * sections themselves — two class names is enough to out-specify swiper's own
 * `.swiper-pagination-horizontal.swiper-pagination-bullets …` rule, and unlike
 * the old page-template scoping it follows the CSR component onto every page
 * that reuses it. */
.csr .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet,
.reviews .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    background: var(--black);
}

/* ==================
 * About — Clients reviews (testimonial slider)
 * ================== */
.reviews__head {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--black);
}
/* Full-width carousel: the first card starts flush with the left viewport edge
 * and the rest bleed off the right edge (swiper spans the full width and clips
 * with overflow:hidden). */
.reviews__swiper {
    margin: 0;
}
.reviews__swiper .swiper-wrapper {
    align-items: stretch; /* equal-height cards */
}
.reviews__swiper .swiper-slide {
    width: min(533px, calc(100vw - 30px));
    height: auto;
}
.review-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    background: var(--white-true);
}
.review-card__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.review-card__name {
    color: var(--accent);
    font-weight: 400;
    font-size: 28px;
    line-height: 130%;
}
.review-card__role {
    color: var(--black-60);
    font-weight: 400;
    font-size: 14px;
    line-height: 135%;
}
.review-card__divider {
    margin-top: 2px;
    width: 100%;
    height: 1px;
    background: var(--black);
}
.review-card__text {
    color: var(--black);
    font-weight: 400;
    font-size: 18px;
    line-height: 130%;
}
.reviews__nav {
    justify-content: center; /* centered navigation, per mockup */
    margin-top: 57px;
    gap: 9px;
}
.reviews__arrows {
    flex-shrink: 0;
    gap: 5px;
}
.reviews__arrow {
    position: relative; /* reset swiper-button absolute positioning */
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin: 0;
    color: var(--second);
    opacity: 0.8;
    cursor: pointer;
    transition: var(--transition-02);
}
.reviews__arrow:hover {
    opacity: 1;
    color: var(--accent);
}
.reviews__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}
.reviews__pagination.swiper-pagination {
    position: relative; /* keep it in the nav row */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    width: auto;
    margin: 0;
}

/* ==================
 * Classes
 * ================== */
.container {
	width: 1350px;
    max-width: 100%;
    padding: 0 15px;
	margin: 0 auto;
}

.block {
    margin-bottom: 180px;
}
.block-title {
    color: var(--accent);
    font-size: var(--fs-h2); /* fluid 32 -> 55 (matches mobile mockups) */
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.block-title-mb-15 {
    margin-bottom: 15px;
}
.info-block-image {
    flex: 1 1 757px;
}
.info-block-text {
    flex: 1 1 533px;
}
.plain-text {
    padding-bottom: 7px;
    color: var(--black);
    font-size: 18px;
    line-height: 130%;
}
.plain-text p {
    margin-bottom: 20px;
}
.text-center {
    text-align: center;
}

/* Label that only assistive tech reads — used where the mockup shows a control
 * without a visible label (e.g. the vacancy filter dropdowns). `_s` names this
 * class in includes/core/template-tags.php but never styled it. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.width-100 {
    width: 100%;
}
.height-100 {
    height: 100%;
}

.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.fixed {
    position: fixed;
}

.index-1 {
    z-index: 1;
}
.index-2 {
    z-index: 2;
}
.index-3 {
    z-index: 3;
}
.index-10 {
    z-index: 10;
}
.index-100 {
    z-index: 100;
}
.index-999 {
    z-index: 999;
}

.top {
    top: 0;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.bottom {
    bottom: 0;
}

.w-100 {
    width: 100%;
}

.text-white {
    color: #fff;
}
.text-black {
    color: #000;
}

.d-flex {
    display: flex;
}
.flex-row {
    flex-direction: row;
}
.flex-column {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.flex-grow {
    flex-grow: 1;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.align-start {
    align-items: flex-start;
}
.align-end {
    align-items: flex-end;
}
.align-center {
    align-items: center;
}
.align-baseline {
    align-items: baseline;
}
.align-stretch {
    align-items: stretch;
}

.radius-15 {
    -webkit-border-radius: var(--radius-15);
    -moz-border-radius: var(--radius-15);
    border-radius: var(--radius-15);
}
.radius-30 {
    -webkit-border-radius: var(--radius-30);
    -moz-border-radius: var(--radius-30);
    border-radius: var(--radius-30);
}
.radius-45 {
    -webkit-border-radius: var(--radius-45);
    -moz-border-radius: var(--radius-45);
    border-radius: var(--radius-45);
}

.hidden {
    overflow: hidden;
}

/* Hide anything, from anywhere — including a Contact Form 7 field that is only
   there to carry a value into the mail (`class:hide` on the tag). `!important`
   on purpose: it has to beat the `display` a component sets on itself, such as
   `.form-field { display: flex }`, which is exactly the trap a plain
   `display: none` utility falls into. */
.hide {
    display: none !important;
}

.btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    position: relative;
    padding: 14px 29px;
    background: var(--accent);
    border: none;
    font-family: var(--font-family);
    color: var(--white);
    font-size: 18px;
    line-height: 135%; /* 24.3px */
    outline: none;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    -webkit-transition: var(--transition-02);
    -moz-transition: var(--transition-02);
    -ms-transition: var(--transition-02);
    -o-transition: var(--transition-02);
    transition: var(--transition-02);
}
.btn:hover {
    color: var(--white);
}
.btn-small {
    padding: 9px 15px 10px;
    font-size: 16px;
}
.btn:before,
.btn::before {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    content: '';
    background: var(--second);

    -webkit-transition: var(--transition-02);
    -moz-transition: var(--transition-02);
    -ms-transition: var(--transition-02);
    -o-transition: var(--transition-02);
    transition: var(--transition-02);
}
.btn:hover:before,
.btn:hover::before {
    width: 100%;
}
.btn svg,
.btn span {
    position: relative;
    z-index: 1;
}
.btn svg path {
    -webkit-transition: var(--transition-02);
    -moz-transition: var(--transition-02);
    -ms-transition: var(--transition-02);
    -o-transition: var(--transition-02);
    transition: var(--transition-02);
}
.btn:hover svg path {
    fill: var(--white);
}

/* ==================
 * About — Hero banner
 * ================== */
.about-hero__frame {
    width: 100%;
    aspect-ratio: 1320 / 745; /* mockup 1320x745 — stays fluid, no fixed height */
}
.about-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.about-hero__gradient {
    inset: 0;
    opacity: 0.2;
    background: linear-gradient(180deg, rgba(0, 20, 41, 0.00) 0%, rgba(0, 20, 41, 0.80) 100%);
}
.about-hero__box {
    max-width: 930px; /* 60 padding + 870 content */
    padding: 60px;
}
.about-hero__desc {
    max-width: 660px;
    color: var(--white);
    font-weight: 400;
    font-size: 22px;
    line-height: 130%; /* 28.6px */
}

/* ==================
 * About — History and experience
 * ================== */
.about-history__row {
    position: relative; /* anchor for the JS-pinned media's bottom "dock" state */
    gap: 30px;
    align-items: flex-start;
}
.about-history__aside {
    flex: 1 1 757px;
    min-width: 0;
    max-width: 757px;
    align-self: flex-start;
}
.about-history__media {
    width: 100%;
    aspect-ratio: 757 / 568; /* 4:3, stays fluid */
}
.about-history__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-history__content {
    flex: 1 1 533px;
    min-width: 0;
}
.about-history__body h2,
.about-history__body h3,
.about-history__body h4 {
    margin-bottom: 0;
    color: var(--second);
    font-weight: 400;
    font-size: 22px;
    line-height: 130%;
}
.about-history__body p {
    margin-bottom: 15px;
    color: var(--black);
    font-weight: 400;
    font-size: 18px;
    line-height: 130%;
}
.about-history__body p:last-child {
    margin-bottom: 0;
}

/* ==================
 * About — Our Mission and Values
 * ================== */
.about-mission__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* text + 2 card columns, all equal */
    gap: 30px;
    align-items: start;
}
.about-mission__intro {
    grid-column: 1; /* first column, top row; cell below it stays empty */
}
.about-mission__lead {
    color: var(--black);
    font-weight: 400;
    font-size: 18px;
    line-height: 130%;
}
.about-mission__grid {
    grid-column: 2 / -1; /* spans the two right-hand columns */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* The card is a fixed 3:2 box whose copy has to fit inside it, and the two
   mockups draw it at two sizes — 420 wide with 28/18/69 type at 1440, 310 wide
   with 23/16/55 at 375. So the card is its own inline-size container and the
   type is written against its width — `cqw` counts the content box, so the
   divisor is 360, not 420. It lands on each mockup's figures exactly at that
   mockup's width, and in between it scales rather than overrunning the
   box and being cut off by `overflow: hidden`. The Career page's own cards
   keep their `body.page-template-vacancies-page` sizes. */
.value-card {
    container-type: inline-size;
    aspect-ratio: 420 / 280;
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--white-true);
    color: var(--black);
}
.value-card--dark {
    color: var(--white);
}
/* The `values` component fills its photograph with `rgba(0, 20, 41, 0.6)` in
   Figma — one symbol, so both mockups carry the same figure (`367:3595` at 1440,
   the same node inside every 375 instance). At 0.2 the white title and copy sat
   on an almost untouched photograph. */
.value-card__overlay {
    inset: 0;
    z-index: 0;
    background: rgba(0, 20, 41, 0.10);
}
.value-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.value-card__num {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    font-weight: 500;
    font-size: clamp(55px, 19.17cqw, 69px); /* 69 / 360, the card's content box */
    line-height: 100%;
    text-transform: capitalize;
    opacity: 0.2;
}
.value-card--dark .value-card__num {
    opacity: 0.4;
}
.value-card__title {
    position: relative;
    z-index: 1;
    padding-right: 57px; /* clear the number */
    font-weight: 400;
    font-size: clamp(23px, 7.78cqw, 28px); /* 28 / 360, the card's content box */
    line-height: 130%;
}
.value-card__desc {
    position: relative;
    z-index: 1;
    font-weight: 400;
    font-size: clamp(16px, 5cqw, 18px); /* 18 / 360, the card's content box */
    line-height: 130%;
}

/* ==================
 * About — Standards & certifications
 * (reuses .value-card; blue title + red number variant)
 * ================== */
.about-standards__row {
    position: relative; /* anchor for the JS-pinned intro's bottom "dock" state */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* intro + 2 card columns */
    gap: 30px;
    align-items: start;
}
.about-standards__intro {
    grid-column: 1;
}
.about-standards__lead {
    color: var(--black);
    font-weight: 400;
    font-size: 18px;
    line-height: 130%;
}
.about-standards__lead p + p {
    margin-top: 15px;
}
.about-standards__grid {
    grid-column: 2 / -1; /* spans the two right-hand columns */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.value-card--standards .value-card__title {
    color: var(--second);
}
.value-card--standards .value-card__num {
    color: var(--accent);
}

/* Documents card (viewable certificates) */
.about-standards__docs {
    margin-top: 30px;
    padding: 30px;
    background: var(--light);
    list-style: none;
}
.doc-list__item + .doc-list__item {
    margin-top: 5px;
}
.doc-list__link {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    justify-content: space-between;
    color: var(--accent);
    font-size: 18px;
    line-height: 130%;
    text-decoration: none; /* 589:4593 draws no rule under it; the eye is the cue */
    transition: var(--transition-02);
}
.doc-list__link:hover {
    opacity: 0.7;
}
.doc-list__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.doc-list__icon svg {
    display: block;
    width: 16px;
    height: auto;
}

/* ==================
 * About — Global Supply Network (interactive map)
 * ================== */
.supply__head {
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--black);
}
.supply__body {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.supply__left {
    flex: 1 1 420px;
    max-width: 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.supply__tabs {
    display: flex;
    gap: 15px;
}
/* `tab-btn` (Figma `385:6368` / `385:6375`) is one component and both mockups
   draw it the same way: `--radius-15`, a `--light` fill while it is not the
   region being shown, and the `--second` fill with its 1px border when it is.
   The border stays on every state, transparent when unused, so the row does not
   change height as the selection moves. */
.supply__tab {
    flex: 1;
    min-width: 0;
    height: 54px;
    padding: 0 30px;
    border: 1px solid transparent;
    border-radius: var(--radius-15);
    background: var(--light);
    color: var(--second);
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 1.35;
    cursor: pointer;
    transition: var(--transition-02);
}
.supply__tab:hover {
    border-color: var(--second);
}
.supply__tab.is-active {
    border-color: var(--second);
    background: var(--second);
    color: var(--white);
}

/* Custom dropdown */
.supply__select {
    position: relative;
}
.supply__select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px;
    border: 1px solid var(--second);
    border-radius: var(--radius-15);
    background: var(--white);
    color: var(--second);
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.supply__select-label {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.supply__select-caret {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--second);
    transition: var(--transition-02);
}
.supply__select.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}
/* Open: button + list read as one seamless box (single border, no divider/shadow) */
.supply__select.is-open .supply__select-btn {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.supply__select-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 264px; /* ~6 rows, then scroll */
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--second);
    border-top: none;
    border-radius: 0 0 var(--radius-15) var(--radius-15);
    overflow-y: auto;
    display: none;
}
.supply__select.is-open .supply__select-list {
    display: block;
}
.supply__select-option {
    padding: 10px 15px;
    color: var(--second);
    font-size: 18px;
    line-height: 1.35;
    cursor: pointer;
    transition: var(--transition-02);
}
.supply__select-option:hover,
.supply__select-option.is-active {
    background: var(--light);
}

/* Country description panel */
.supply__panel {
    position: relative; /* anchors the bottom fade overlay */
    min-width: 0;
}
.supply__country {
    margin-bottom: 15px;
    color: var(--accent);
    font-weight: 400;
    font-size: 28px;
    line-height: 130%;
}
.supply__scroll {
    height: 450px; /* fixed so switching countries doesn't shift the layout */
    padding-right: 15px;
}
/* Custom scrollbar (SimpleBar): track always visible, blue thumb, no auto-hide */
.supply__scroll .simplebar-track.simplebar-vertical {
    width: 3px;
    background: var(--light);
    border-radius: var(--radius-5);
}
.supply__scroll .simplebar-track.simplebar-horizontal {
    display: none; /* vertical only */
}
.supply__scroll .simplebar-scrollbar::before {
    left: 0;
    right: 0;
    background: var(--second);
    border-radius: var(--radius-5);
}
.supply__scroll .simplebar-scrollbar.simplebar-visible::before {
    opacity: 1; /* solid — no fade */
}
/* White fade at the bottom of the scroll area (over the scrollbar block).
 * Fades out smoothly once the panel is scrolled to the bottom (or when the
 * content is too short to scroll) — toggled via `.is-scroll-end` in JS. */
.supply__panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 141px; /* 419:4415 at 1440, 995:6576 at 375 — the same fade */
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
    background: linear-gradient(180deg, rgba(235, 245, 255, 0) 0%, var(--white) 100%);
}
.supply__panel.is-scroll-end::after {
    opacity: 0;
}
.supply__desc {
    color: var(--second);
    font-weight: 400;
    font-size: 14px;
    line-height: 135%;
}
.supply__desc p {
    margin: 0 0 12px; /* gap between items */
}
.supply__desc p:has(strong) {
    margin-bottom: 4px; /* label sits tight above its description */
}
.supply__desc p:last-child {
    margin-bottom: 0;
}
.supply__desc {
    color: var(--black-60);
}
.supply__desc strong {
    color: var(--black);
    font-weight: 400;
}

/* Map */
.supply__maps {
    flex: 1 1 auto;
    position: relative;
    min-width: 0;
}
.supply__map[hidden] {
    display: none;
}
.supply__map svg {
    display: block;
    width: 100%;
    height: auto;
}
.supply__map [id$="_country"],
.supply__map g[id] {
    cursor: pointer;
    transition: fill-opacity 0.2s ease-in-out;
}
.supply__map .is-hover,
.supply__map .is-hover path {
    fill-opacity: 0.5;
}
.supply__map .is-active,
.supply__map .is-active path {
    fill-opacity: 1;
}
.supply__map-empty {
    padding: 60px 0;
    color: var(--black-60);
    text-align: center;
}
.supply__hint {
    margin-top: 15px;
    color: var(--black-60);
    font-size: 16px;
    text-align: right;
}

/* ==================
 * Animation
 * ================== */
/*
 * Bullet Progress
 */
@-webkit-keyframes bulletProgress {
    from { width: 0; }
    to   { width: 100%; }
}
@-moz-keyframes bulletProgress {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes bulletProgress {
    from { width: 0; }
    to   { width: 100%; }
}

@media (max-width: 768px) {
    .block {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }
}
/* ==================
 * Breadcrumbs
 * ================== */
.breadcrumbs-nav {
    padding-bottom: 11px;
}
.breadcrumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    color: var(--black-60);
    font-size: 14px;
    line-height: 1.35;
}
.breadcrumbs__link {
    color: var(--black-60);
    text-decoration: none;
    transition: var(--transition-02);
}
.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
    color: var(--accent);
}
.breadcrumbs .kb_sep {
    display: inline-flex;
    align-items: center;
    color: var(--black-60);
}
.breadcrumbs__current {
    display: block;
    max-width: 200px;
    overflow: hidden;
    color: var(--black);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================
 * Article (single post)
 * ================== */
/* Hero — cover image with a dark bottom gradient carrying the title block */
.article-hero {
    margin-bottom: 60px;
}
.article-hero__media {
    position: relative;
    aspect-ratio: 1320 / 745;
    border-radius: var(--radius-45);
}
/* Clipped picture frame — on mobile it keeps the image rounded while the
 * media box itself grows to hold the title block underneath. */
.article-hero__frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--second);
    border-radius: inherit;
}
.article-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 41, 0) 0%, rgba(0, 20, 41, 0.8) 100%);
}

/* Back to the news archive — 60x60 tile, top-left inside the cover */
.article-hero__back {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--white);
    border-radius: var(--radius-15);
    color: var(--second);
    transition: var(--transition-02);
}
.article-hero__back:hover,
.article-hero__back:focus-visible {
    background: var(--light);
    color: var(--accent);
}
.article-hero__back-icon {
    width: 30px;
    height: auto;
}

/* Publish date — top-right inside the cover */
.article-hero__date {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 15px 13px;
    background: var(--white);
    border-radius: var(--radius-15);
    color: var(--black);
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
}

/* Title block — centred over the bottom edge of the cover */
.article-hero__info {
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(1000px, calc(100% - 120px));
    text-align: center;

    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.article-hero__tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.article-hero__tag {
    display: block;
    padding: 5px 10px;
    background: var(--white);
    border: 1px solid var(--white);
    border-radius: var(--radius-30);
    color: var(--black);
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--transition-02);
}
a.article-hero__tag:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}
.article-hero__title {
    color: var(--white);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 100%;
}
.article-hero__author {
    color: var(--white-true);
    font-size: 18px;
    line-height: 1.3;
}

/* Body — rich text in a narrower, centred column */
.article-body {
    margin-bottom: 90px;
}
.article-body__inner {
    max-width: 1095px;
    margin: 0 auto;
}

/* ==================
 * Share block (shared component)
 * ================== */
.share {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 870px;
    padding: 60px;
    margin: 0 auto;
    background: var(--white-true);
    border-radius: var(--radius-30);
}
.share__title {
    color: var(--accent);
    font-size: var(--fs-h4);
    font-weight: 400;
    line-height: 100%;
    text-align: center;
}
.share__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.share__btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    background: var(--white);
    border: 0;
    border-radius: var(--radius-15);
    color: var(--accent);
    cursor: pointer;
    transition: var(--transition-02);
}
.share__btn:hover,
.share__btn:focus-visible {
    background: var(--light);
}
.share__btn svg {
    flex: none;
}
/* The copy button says so. A background change alone reads as a hover state,
   so the click is confirmed twice: the glyph becomes a checkmark and a label
   rises over the button — the wording comes from the button's `data-copied`,
   which is a Polylang string, so the German site says it in German. */
.share__btn-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.share__btn-icon--done,
.share__btn--copy.is-copied .share__btn-icon {
    display: none;
}
.share__btn--copy.is-copied .share__btn-icon--done {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.share__btn--copy.is-copied {
    background: var(--light);
    color: var(--second);
}
/* The label is a sibling of the button, not its child: a live region inside
   the control that triggers it is announced unreliably. It is absolutely
   positioned so it cannot push the row around while it is on screen, and it
   sits in the card's own bottom padding — over the buttons is the heading,
   10px away, while under them 60px of padding is free at every width. */
.share {
    position: relative;
}
.share__copied {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 2;
    padding: 5px 10px;
    background: var(--second);
    border-radius: var(--radius-15);
    color: var(--white-true);
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    translate: -50% 5px;
    pointer-events: none;
    transition: var(--transition-02);
}
/* `:empty` rather than a second class: the text is the state — JavaScript
   writes it to say the link was copied and clears it to take the label away. */
.share__copied:not(:empty) {
    opacity: 1;
    translate: -50% 0;
}

/* ==================
 * News (Single Post)
 * ================== */
.other-news .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-bullet {
    background: var(--black);
}
.other-news .news__header {
    padding-bottom: 9px;
}
.other-news .news-card__excerpt {
    margin-bottom: 4px;
}

/* ==================
 * Rich text (blog styles — Figma 368:4151)
 * ================== */
.entry-content > * {
    margin-bottom: 15px;
}
.entry-content > *:last-child {
    margin-bottom: 0;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--black);
    font-weight: 400;
}
.entry-content h1,
.entry-content h2 {
    color: var(--accent);
    font-size: var(--fs-h2);
    line-height: 100%;
}
.entry-content h3 {
    font-size: var(--fs-h3);
    line-height: 100%;
}
.entry-content h4 {
    font-size: var(--fs-h4);
    line-height: 100%;
}
.entry-content h5 {
    font-size: var(--fs-h5);
    line-height: 1.3;
}
.entry-content h6 {
    font-size: var(--fs-h6);
    line-height: 1.3;
}
.entry-content p,
.entry-content li,
.entry-content blockquote {
    color: var(--black);
    font-size: var(--fs-text);
    line-height: 1.3;
}
.entry-content strong,
.entry-content b {
    font-weight: 600;
}
.entry-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-position: from-font;
    transition: var(--transition-02);
}
.entry-content a:hover {
    color: var(--second);
}
.entry-content ul,
.entry-content ol {
    padding-left: 27px;
}
.entry-content ul {
    list-style: disc;
}
.entry-content ol {
    list-style: decimal;
}
.entry-content li {
    margin-bottom: 5px;
}
.entry-content li:last-child {
    margin-bottom: 0;
}
.entry-content blockquote {
    padding: 15px;
    background: var(--light);
    border-radius: var(--radius-15);
}
.entry-content blockquote > *:last-child {
    margin-bottom: 0;
}
.entry-content hr {
    height: 2px;
    background: var(--black);
    border: 0;
}
.entry-content img {
    width: 100%;
    border-radius: var(--radius-30);
}
.entry-content figure {
    margin: 0;
}
.entry-content figcaption {
    margin-top: 5px;
    color: var(--black-60);
    font-size: 14px;
    line-height: 1.35;
}
/* WP wraps standalone images in a paragraph — keep it a plain image row */
.entry-content p:has(> img:only-child) {
    line-height: 0;
}

/* ==================
 * Standard page (Figma privacy 270:1138, 270:1139)
 * ================== */
.standard-page__hero {
    position: relative;
}
.standard-page__hero-media {
    position: relative;
    overflow: hidden;
}
/* Height stays intrinsic on purpose — the band follows whatever image is uploaded.
   Mobile is the exception: it is pinned to the 375x250 mockup band (see below). */
.standard-page__hero-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}
.standard-page__hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #ebf5ff 0%, rgba(235, 245, 255, 0.2) 30.17%, #ebf5ff 100%);
}
.standard-page__hero-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    padding-bottom: 56px;
}
.standard-page__title {
    width: min(1142px, 100%);
    margin: 0;
    color: var(--accent);
    font-size: 69px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-transform: capitalize;
}
.standard-page__body {
    position: relative;
    z-index: 2;
    max-width: 1095px;
    margin: -46px auto 180px;
}
body.page-template-privacy-page .standard-page__content > p:first-child {
    width: min(476px, 100%);
    margin: 0 auto 60px;
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
}
.standard-page__content:not(:has(> p:first-child)) {
    padding-top: 106px;
}
.standard-page__hero--no-media {
    height: auto;
}
.standard-page__hero--no-media .standard-page__hero-inner {
    position: relative;
    inset: auto;
    height: auto;
    padding-top: 60px;
    padding-bottom: 0;
}
.standard-page__hero--no-media + .container .standard-page__body {
    margin-top: 60px;
}
.standard-page__hero--no-media + .container .standard-page__content:not(:has(> p:first-child)) {
    padding-top: 0;
}

@media (max-width: 575px) {
    .standard-page__hero {
        height: auto;
    }
    .standard-page__hero-media {
        position: relative;
        height: 250px;
    }
    .standard-page__hero-image {
        height: 100%;
        object-fit: initial;
    }
    .standard-page__hero-gradient {
        background: linear-gradient(180deg, #ebf5ff 0%, rgba(235, 245, 255, 0.2) 13.91%, rgba(235, 245, 255, 0.2) 80.97%, #ebf5ff 100%);
    }
    .standard-page__hero-inner {
        position: relative;
        inset: auto;
        display: block;
        height: auto;
        padding-top: 15px;
        padding-bottom: 0;
    }
    .standard-page__title {
        width: 100%;
        font-size: 36px;
        font-weight: 400;
        line-height: 1.25;
        text-align: left;
        text-transform: none;
    }
    .standard-page__body {
        max-width: none;
        margin: 15px 0 120px;
    }
    .standard-page__content > p:first-child {
        width: 100%;
        margin: 0 0 30px;
        font-size: 18px;
        text-align: left;
    }
    .standard-page__content:not(:has(> p:first-child)) {
        padding-top: 0;
    }
    .standard-page__hero--no-media .standard-page__hero-inner {
        padding-top: 30px;
    }
    .standard-page__hero--no-media + .container .standard-page__body {
        margin-top: 30px;
    }
}

/* ==================
 * Contacts — Hero (Figma 385:6328 desktop / 995:6521 mobile)
 * ================== */
.contacts-hero.block {
    margin-bottom: 60px; /* mockup: hero ends 825 -> map starts 885 */
}
.contacts-hero__frame {
    width: 100%;
    aspect-ratio: 1320 / 745; /* mockup 1320x745 — fluid, no fixed height */
}
.contacts-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.contacts-hero__gradient {
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 41, 0) 0%, rgba(0, 20, 41, 0.8) 100%);
}
.contacts-hero__box {
    gap: 15px;
    max-width: 930px; /* 60 padding + 870 content */
    padding: 60px;
}
.contacts-hero__title {
    margin: 0;
    color: var(--white);
    font-size: var(--fs-h1); /* fluid 40 -> 69 (desktop mockup) */
    font-weight: 500;
    line-height: 100%;
    text-transform: capitalize;
}
.contacts-hero__desc {
    max-width: 660px;
    color: var(--white);
    font-size: var(--fs-h6); /* fluid 20 -> 22 (desktop mockup) */
    font-weight: 400;
    line-height: 130%;
}
.contacts-hero__desc p {
    margin: 0;
}
.contacts-hero__desc p + p {
    margin-top: 15px;
}
.contacts-hero__social {
    gap: 15px;
}
/* 54x54 icon button — the shared .btn, squared off to the mockup's box */
.contacts-hero__social-link.btn {
    padding: 15px;
    gap: 0;
}
.contacts-hero__social-link.btn svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* ==================
 * Contacts — Map + head office card (Figma 385:7131 / 997:11391)
 * ================== */
.contacts-map__frame {
    display: block;
    width: 100%;
    aspect-ratio: 1320 / 745;
    background: #f2f2f2; /* map base colour, shown while the tiles load */
}
/* Google injects its own markup into the frame — keep the rounded corners */
.contacts-map__frame > div {
    border-radius: inherit;
}
/* The office card overlaps the map's bottom-left corner, so the map must not
   swallow clicks meant for it — Google's own panes stay interactive. */
.contacts-map__frame .gm-style-cc {
    opacity: 0.7;
}
/* Desktop: the card sits inside the map, 30px from its bottom-left corner */
.contacts-map__card {
    position: absolute;
    left: 30px;
    bottom: 30px;
    gap: 30px;
    width: 420px;
    max-width: calc(100% - 60px);
    padding: 30px;
    background: var(--white-true);
}
.contacts-map__title {
    margin: 0;
    color: var(--accent);
    font-size: var(--fs-h3); /* fluid 29 -> 44 (both mockups) */
    font-weight: 400;
    line-height: 100%;
    text-align: center;
}
.contacts-map__info {
    gap: 15px;
}
.contacts-map__address {
    margin: 0;
    color: var(--black);
    font-size: var(--fs-text); /* fluid 16 -> 18 (both mockups) */
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    text-align: center;
}
.contacts-map__row {
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--black);
    font-size: var(--fs-text);
    line-height: 130%;
    text-decoration: none;
    transition: var(--transition-02);
}
.contacts-map__row:hover {
    color: var(--accent);
}
.contacts-map__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* ==================
 * Contacts — "Start a Reliable Partnership" form (Figma 410:4059 / 997:11485)
 * ================== */
.contacts-form__row {
    align-items: center;
    gap: 30px;
    max-width: 1095px; /* mockup row 533 + 30 + 532 */
    margin: 0 auto;
}
.contacts-form__text {
    flex: 1 1 533px;
    gap: 15px;
    min-width: 0;
}
.contacts-form__title {
    margin: 0;
    color: var(--accent);
    font-size: var(--fs-h2); /* fluid 32 -> 55 (both mockups) */
    font-weight: 400;
    line-height: 100%;
}
.contacts-form__desc {
    color: var(--black);
    font-size: 18px;
    font-weight: 400;
    line-height: 130%;
}
.contacts-form__desc p {
    margin: 0;
}
.contacts-form__desc p + p {
    margin-top: 15px;
}
.contacts-form__card {
    flex: 0 0 532px;
    min-width: 0; /* the CF7 inputs must not inflate the card past its 532px */
    max-width: 100%;
    padding: 45px;
    background: var(--white-true);
}
/* Card internals reuse the shared .form-* styles (same CF7 markup as
 * .have-question__form); the mockup only differs in rhythm and field height. */
.contacts-form__card .form-row {
    margin-bottom: 15px;
}
.contacts-form__card .form-row.form-row-submit {
    margin-bottom: 0;
}
.contacts-form__card .form-field-cell {
    min-width: 0;
}
.contacts-form__card .form-field {
    width: 100%;
    height: 53px; /* mockup input box, both breakpoints */
    padding: 15px 0;
}
.contacts-form__card .form-field.wpcf7-textarea {
    height: 76px;
}
.contacts-form__card .filepond--panel-root {
    background: var(--white);
}
.contacts-form__card .form-privacy-policy {
    opacity: 0.6;
}
.contacts-form__card .form-privacy-policy a {
    opacity: 1;
}

/* Tablet: the two-column form row no longer fits, hero padding eases off */
@media (max-width: 992px) {
    .contacts-hero__box {
        padding: 30px;
    }
    .contacts-form__row {
        flex-direction: column;
        align-items: stretch;
    }
    .contacts-form__text {
        flex: none;
    }
    .contacts-form__card {
        flex: none;
        width: 100%;
    }
}

/* The hero's step between the two mockups — 4:3, the same one the other heroes
   take, so the portrait below 575 is not a 360px jump across one pixel. */
@media (max-width: 768px) {
    .contacts-hero__frame {
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-30);
    }
}

/* Mobile mockups: contact 375 (995:6521 · 997:11391 · 997:11485) */
@media (max-width: 575px) {
    .contacts-hero__frame {
        aspect-ratio: 345 / 670; /* portrait hero */
        max-height: 670px; /* the ratio alone reaches 1058 by 575 */
        border-radius: var(--radius-30);
    }
    .contacts-hero__box {
        max-width: 100%;
        padding: 15px;
    }
    .contacts-hero__title {
        font-size: 32px;
        font-weight: 400;
        line-height: 125%;
        text-transform: none;
    }
    .contacts-hero__desc {
        max-width: 100%;
        font-size: 16px;
    }

    .contacts-map.block {
        margin-bottom: 120px;
    }
    /* Map goes edge to edge; the card stays in the 15px gutter and overlaps it */
    .contacts-map__frame {
        width: auto;
        margin: 0 -15px;
        aspect-ratio: 375 / 745;
    }
    .contacts-map__card {
        position: relative;
        z-index: 1;
        left: auto;
        bottom: auto;
        gap: 15px;
        width: 100%;
        max-width: none;
        margin-top: -90px;
    }

    .contacts-form.block {
        margin-bottom: 120px;
    }
    .contacts-form__desc {
        font-size: 14px;
        line-height: 135%;
    }
    .contacts-form__card {
        padding: 15px;
        border-radius: var(--radius-30);
    }
    /* Mockup stacks the four short inputs 5px apart; everything else keeps 15px */
    .contacts-form__card .form-row {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 15px;
    }
    .contacts-form__card .form-row.form-row-name-email {
        margin-bottom: 5px;
    }
    .contacts-form__card .form-field {
        font-size: 16px;
    }
    .contacts-form__card .form-field.wpcf7-textarea {
        height: 85px;
    }
    .contacts-form__card .filepond--panel-root {
        background: var(--light);
    }
    .contacts-form__card .filepond--root .filepond--drop-label {
        min-height: 68px;
    }
}

/* ==================
 * 404 page (Figma 270:1141)
 * ================== */
.error-404 {
    margin-bottom: 75px;
}
.error-404__hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 1320 / 745;
    padding: 60px;
    background: var(--black) url(../images/404/hero.webp) center / cover no-repeat;
    border-radius: var(--radius-45);
    overflow: hidden;
}
.error-404__hero::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: '';
    background: linear-gradient(180deg, rgba(0, 20, 41, 0) 0%, rgba(0, 20, 41, 0.8) 100%);
    pointer-events: none;
}
.error-404__content {
    position: relative;
    z-index: 1;
    width: min(670px, 100%);
}
.error-404__code {
    height: 90px;
    margin-bottom: 15px;
    color: var(--accent);
    font-size: 128px;
    font-weight: 600;
    line-height: 90px;
}
.error-404__title {
    margin-bottom: 15px;
    color: var(--white);
    font-size: 69px;
    font-weight: 500;
    line-height: 1;
    text-transform: capitalize;
}
.error-404__description {
    width: min(476px, 100%);
    margin-bottom: 15px;
    color: var(--white);
    font-size: 22px;
    line-height: 1.3;
}
.error-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.error-404__button {
    min-height: 54px;
}
.error-404__button-icon {
    flex: none;
    width: 24px;
    height: auto;
}

@media (max-width: 768px) {
    .error-404 {
        margin-bottom: 60px;
    }
    .error-404__hero {
        aspect-ratio: 4 / 3;
        padding: 30px;
        background-position: 62% center;
        border-radius: var(--radius-30);
    }
    .error-404__code {
        height: 60px;
        font-size: 84px;
        line-height: 60px;
    }
    .error-404__title {
        font-size: 40px;
    }
    .error-404__description {
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .error-404 {
        margin-bottom: 30px;
    }
    .error-404__hero {
        aspect-ratio: 345 / 670; /* portrait hero */
        max-height: 670px; /* the ratio alone reaches 1058 by 575 */
        padding: 15px;
        background-position: 82% center;
    }
    .error-404__code {
        height: 70px;
        margin-bottom: 15px;
        font-size: 95px;
        line-height: 70px;
    }
    .error-404__title {
        margin-bottom: 15px;
        font-size: 36px;
        font-weight: 400;
        line-height: 45px;
        text-transform: none;
    }
    .error-404__description {
        margin-bottom: 15px;
        font-size: 20px;
        line-height: 25px;
    }
    .error-404__actions {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 15px;
    }
    .error-404__button {
        flex: 1 1 50%;
        width: 50%;
        padding-right: 15px;
        padding-left: 15px;
    }
    .error-404__button-icon {
        display: none;
    }
}

@media (max-width: 350px) {
    .error-404__actions {
        flex-direction: column;
    }
    .error-404__button {
        flex-basis: auto;
        width: 100%;
    }
}

/* Tablet — the hero title block may use the full cover width */
@media (max-width: 992px) {
    .article-hero__info {
        width: calc(100% - 60px);
    }
}

/* Mobile — matches the 375 mockup (Figma 270:1134).
 * The title block leaves the cover and sits under it in dark text; only the
 * category pill stays pinned inside the image, bottom-left. */
@media (max-width: 575px) {
    .breadcrumbs-nav {
        padding-bottom: 14px;
    }
    .breadcrumbs {
        font-size: 12px;
    }

    .site-main.article .block {
        margin-bottom: 120px;
    }

    .article-hero {
        margin-bottom: 60px;
    }
    .article-hero__media {
        aspect-ratio: auto;
        border-radius: 0;
    }
    .article-hero__frame {
        position: relative;
        aspect-ratio: 345 / 195;
        border-radius: var(--radius-15);
    }
    .article-hero__back,
    .article-hero__date {
        top: 5px;
        border-radius: 10px;
    }
    .article-hero__back {
        left: 5px;
        width: 40px;
        height: 40px;
        padding: 15px;
    }
    .article-hero__back-icon {
        width: 16px;
    }
    .article-hero__date {
        right: 5px;
        min-height: 40px;
        padding: 0 5px;
        font-size: 14px;
        line-height: normal;
    }
    .article-hero__info {
        position: relative;
        inset: auto;
        align-items: flex-start;
        width: 100%;
        margin-top: 15px;
        text-align: left;

        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
    /* Pinned 5px above the frame's bottom edge: the info block starts 15px
     * below it, so 100% + 20px lands the pill inside the picture. */
    .article-hero__tags {
        position: absolute;
        bottom: calc(100% + 20px);
        left: 5px;
        z-index: 2;
        justify-content: flex-start;
    }
    .article-hero__tag {
        padding: 5px;
        font-size: 12px;
    }
    .article-hero__title,
    .article-hero__author {
        color: var(--black);
    }

    .article-body {
        margin-bottom: 60px;
    }

    .share {
        padding: 60px 45px;
    }
    .share__title {
        line-height: normal;
    }

    .entry-content ul,
    .entry-content ol {
        padding-left: 24px;
    }
    .entry-content img {
        border-radius: var(--radius-15);
    }
}

/* ==================
 * Services — Hero (Figma 383:6057 desktop / 995:6505 mobile)
 * ================== */
.services-hero__frame {
    width: 100%;
    aspect-ratio: 1320 / 745; /* mockup 1320x745 — fluid, no fixed height */
}
.services-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.services-hero__gradient {
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 41, 0) 0%, rgba(0, 20, 41, 0.8) 100%);
}
.services-hero__box {
    gap: 15px;
    max-width: 990px; /* 60 padding + 870 content + 60 padding */
    padding: 60px;
}
.services-hero__title {
    margin: 0;
    color: var(--white);
    /* 69 on the 1440 mockup, 32 on the 375 one. `--fs-h1` bottoms out at 40,
       which left a jump from 50 to 32 across the 575 line. */
    font-size: clamp(32px, calc(18.97px + 3.47vw), 69px);
    font-weight: 500;
    line-height: 100%;
    text-transform: capitalize;
}
.services-hero__desc {
    max-width: 660px;
    color: var(--white);
    font-size: var(--fs-h6); /* fluid 20 -> 22 (desktop mockup) */
    font-weight: 400;
    line-height: 130%;
}
.services-hero__desc p {
    margin: 0;
}
.services-hero__desc p + p {
    margin-top: 15px;
}

/* ==================
 * Services — Card list (Figma 390:3864 desktop / 997:9597 mobile)
 * ================== */
.services-list__title {
    margin: 0 0 30px;
}
.services-list__items {
    gap: 120px; /* mockup: cards 491 tall, 611 apart */
}
/* Text column 420 + 30 gutter + image 870 = the 1320 container. `fr` keeps the
   ratio while the container shrinks, so nothing is pinned to a fixed width. */
.service-card {
    display: grid;
    grid-template-columns: 420fr 870fr;
    column-gap: 30px;
    align-items: center;
}
.service-card__content {
    grid-row: 1;
    grid-column: 1;
    gap: 15px;
    min-width: 0;
}
.service-card__media {
    grid-row: 1;
    grid-column: 2;
    aspect-ratio: 870 / 491;
}
/* The mockup alternates sides; that is presentation, not content. The track
   widths mirror along with the columns, so the image keeps its 870 share. */
.service-card:nth-child(even) {
    grid-template-columns: 870fr 420fr;
}
.service-card:nth-child(even) .service-card__content {
    grid-column: 2;
}
.service-card:nth-child(even) .service-card__media {
    grid-column: 1;
}
.service-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-card__title {
    margin: 0;
    color: var(--accent);
    font-size: var(--fs-h4); /* fluid 26 -> 35 (both mockups) */
    font-weight: 400;
    line-height: 100%;
}
.service-card__desc {
    color: var(--black);
    font-size: 18px;
    font-weight: 400;
    line-height: 130%;
}
.service-card__desc p {
    margin: 0;
}
.service-card__desc p + p {
    margin-top: 15px;
}

/* ==================
 * Shared form section — copy beside the card (Services, Figma 385:6155)
 * Home and the news pages pass no title/desc, so these rules never apply there.
 * ================== */
.have-question__text {
    flex: 1 1 645px;
    gap: 15px;
    min-width: 0;
    max-width: 645px;
    color: var(--white);
}
.have-question__title {
    margin: 0;
    font-size: var(--fs-h2); /* fluid 32 -> 55 (both mockups) */
    font-weight: 400;
    line-height: 100%;
}
.have-question__desc {
    max-width: 533px;
    font-size: 18px;
    font-weight: 400;
    line-height: 130%;
}
.have-question__desc p {
    margin: 0;
}
.have-question__desc p + p {
    margin-top: 15px;
}
/* The Services mockup gives this section more air than the card-only variant:
   198px above and below the card (900 tall around a 504 card). The horizontal
   padding drops to 45 so `.container` lands the copy on the same 60px grid
   line the rest of the page uses.
   The copy is white on the mockup's photograph, so the section carries a dark
   ground of its own: with the background image unset the heading would be
   white on the page's light blue and read as an empty band. With one uploaded,
   `.have-question__bg` covers it. */
.have-question:has(.have-question__text) {
    padding: 198px 45px;
    background-color: var(--second);
}
body.page-template-services-page .have-question:has(.have-question__text) {
    margin-bottom: 120px;
}
.have-question__row:has(.have-question__text) {
    gap: 30px;
    max-width: 1207px; /* mockup row: 645 + 30 + 532 */
    margin-right: auto;
}

/* Intermediate: the two-column card gets cramped before it stacks */
@media (max-width: 992px) {
    .services-list__items {
        gap: 90px;
    }
    .service-card {
        grid-template-columns: 1fr 1.4fr;
    }
    .service-card:nth-child(even) {
        grid-template-columns: 1.4fr 1fr;
    }
    .services-hero__box {
        padding: 45px;
    }
}

@media (max-width: 768px) {
    /* The hero's own step between the two mockups, the same one the home and
       About heroes take: 4:3 here, the 375 mockup's portrait below 575. Without
       it the frame went straight from the desktop's 1320:745 to the portrait
       and jumped 360px across a single pixel of viewport. */
    .services-hero__frame {
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-30);
    }
    /* Cards stack: title, copy, then the image (mobile mockup order) */
    .service-card {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* the grid centring would size the media to its image */
        gap: 15px;
    }
    .service-card__content {
        order: 1;
    }
    .service-card__media {
        order: 2;
        aspect-ratio: 345 / 195;
        border-radius: var(--radius-15);
    }
    .services-list__items {
        gap: 60px;
    }
    /* 997:9598 sets the card title in auto leading; 1440 sets it solid. */
    .service-card__title {
        line-height: 125%;
    }

    /* Stacked: the copy sits on the photo, the card follows 30px below it and
       runs to the bottom edge — `.container` alone supplies the 15px gutter.
       `z-index` opens a stacking context so the band stays behind the copy and
       the card. */
    .have-question:has(.have-question__text) {
        position: relative;
        z-index: 0;
        padding: 120px 0 0;
    }
    /* Built the same way the card-only variant is on the home page: the
       photograph is a band the copy sits on, and the form is a card inset in the
       page gutter that overlaps its lower edge. `995:9466` draws it at 345 wide,
       true white, `--radius-30`, 15 all round. It used to be a backdrop bled out
       to the section edges instead, which is not a card at all.
       The overlap is a consequence rather than a number: the copy starts at the
       section's padding and the card follows it by the row's own 30px gap, which
       on the mockup's copy puts it 30 inside the band. */
    .have-question:has(.have-question__text) .have-question__form {
        position: relative; /* paints over the band it overlaps */
        padding: 15px;
        background: var(--white-true);
        border-radius: var(--radius-30);
    }
    body.page-template-services-page .have-question:has(.have-question__text) .have-question__form {
        padding-top: 30px;
    }
    /* The photograph is a band, not the section's ground: 375x500 in the mockup
       (995:9464 on the catalog, the same symbol on Services), with the copy
       inside it and the card overlapping its lower edge. Left on `inset: 0` it
       stretched to the whole section — 1051px at 375 — so the picture ran on
       behind the form instead of ending above it. `bottom: auto` hands the
       height to the ratio, and the cap keeps it at the mockup's 500 once the
       viewport is wide enough to ask for more. */
    .have-question:has(.have-question__text) .have-question__bg {
        bottom: auto;
        /* Not `aspect-ratio`: the band is pinned `left: 0; right: 0`, and with
           the height clamped the ratio turns around and drives the *width* from
           it — the band came out 375 wide at every viewport, which only looked
           right at 375. A viewport-relative height keeps the mockup's 375:500
           on narrow phones and the cap takes over above it. */
        height: 133.34vw;
        max-height: 500px;
    }
    .have-question__row:has(.have-question__text) {
        flex-direction: column;
        max-width: none;
    }
    .have-question__text {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .have-question__desc {
        max-width: 100%;
    }
}

/* Mobile mockups: services 375 (995:6505 · 997:9597 · 997:9701) */
@media (max-width: 575px) {
    .services-hero__frame {
        aspect-ratio: 345 / 670; /* portrait hero */
        max-height: 670px; /* the ratio alone reaches 1058 by 575 */
        border-radius: var(--radius-30);
    }
    .services-hero__box {
        max-width: 100%;
        padding: 15px;
    }
    .services-hero__title {
        font-weight: 400;
        line-height: 125%;
        text-transform: none;
    }
    .services-hero__desc {
        max-width: 100%;
        font-size: 16px;
    }

    .service-card__desc {
        font-size: 16px;
    }

    /* Mockup 997:9701: the copy starts 228px down, on the photo band */
    .have-question:has(.have-question__text) {
        padding: 228px 0 0;
    }
    .have-question__desc {
        font-size: 16px;
    }
    .site-main.catalog-page .have-question__desc {
        font-size: 14px;
        line-height: 135%;
    }
}

/* ==================
 * Career — Hero (Figma 386:7132 desktop / 995:6513 mobile)
 * ================== */
.vacancies-hero__frame {
    width: 100%;
    aspect-ratio: 1320 / 745; /* mockup 1320x745 — fluid, no fixed height */
}
.vacancies-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.vacancies-hero__gradient {
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 41, 0) 0%, rgba(0, 20, 41, 0.8) 100%);
}
.vacancies-hero__box {
    gap: 15px;
    align-items: flex-start;
    max-width: 765px; /* 60 padding + 645 content + 60 padding */
    padding: 60px;
}
.vacancies-hero__title {
    margin: 0;
    color: var(--white);
    font-size: var(--fs-h1); /* fluid 40 -> 69 */
    font-weight: 500;
    line-height: 100%;
    text-transform: capitalize;
}
.vacancies-hero__desc {
    color: var(--white);
    font-size: var(--fs-h6); /* fluid 20 -> 22 */
    font-weight: 400;
    line-height: 130%;
}
.vacancies-hero__desc p {
    margin: 0;
}
.vacancies-hero__desc p + p {
    margin-top: 15px;
}
.vacancies-hero__btn {
    padding: 15px 30px;
}

/* The hero button is a plain in-page link — the smooth part is CSS, not JS. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
.vacancies,
.talent {
    scroll-margin-top: 30px;
}

/* ==================
 * Career — Grow With Our Expertise (Figma 388:7607 / 997:9970)
 * ================== */
.vacancies-values__inner {
    position: relative; /* anchor for the JS-pinned head's bottom "dock" state */
    display: grid;
    grid-template-columns: 420fr 870fr; /* mockup ratio, no fixed column */
    gap: 30px;
}
/* The heading column is pinned while the cards scroll past it, exactly like the
   home page's Advantages aside — same initStickyColumn, same 993 breakpoint.
   `__head` keeps the grid column's width while `__head-inner` leaves the flow. */
.vacancies-values__head {
    align-self: start;
    min-width: 0;
}
.vacancies-values__title {
    margin-bottom: 15px;
}
.vacancies-values__desc {
    color: var(--black);
    font-size: var(--fs-text);
    line-height: 130%;
}
.vacancies-values__desc p {
    margin: 0;
}
.vacancies-values__desc p + p {
    margin-top: 15px;
}
.vacancies-values__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

/* Card 420x280: title top-left, number top-right, copy pinned to the bottom.
 *
 * `.value-card` is already About's card (Mission & Values, Standards) — there it
 * inherits its colour from the card, so a `--dark` one has a white title, and on
 * mobile responsive.css turns it into a 310px carousel item. Career's card is
 * close but not the same, so every rule that would reach About is scoped to this
 * template's body class. That also out-specifies responsive.css, which loads
 * after this file. */
body.page-template-vacancies-page .value-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    min-height: 280px;
    padding: 30px;
    overflow: hidden;
    background: var(--white-true);
    aspect-ratio: auto; /* About pins one; here the copy decides the height */
    flex: 0 1 auto;
}
body.page-template-vacancies-page .value-card__number {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--black);
    opacity: 0.2;
    font-size: var(--fs-h1); /* fluid 40 -> 69 */
    font-weight: 500;
    line-height: 100%;
    text-transform: capitalize;
}
body.page-template-vacancies-page .value-card__title {
    margin: 0;
    padding-right: 57px; /* clears the number (87 from the card edge) */
    color: var(--second);
    font-size: var(--fs-h5); /* fluid 23 -> 28 */
    font-weight: 400;
    line-height: 130%;
}
body.page-template-vacancies-page .value-card__desc {
    color: var(--black-60);
    font-size: var(--fs-text);
    line-height: 130%;
}
body.page-template-vacancies-page .value-card__desc p {
    margin: 0;
}
body.page-template-vacancies-page .value-card__desc p + p {
    margin-top: 15px;
}

/* ==================
 * Career — Current vacancies (Figma 387:7605 / 997:10016)
 * ================== */
.vacancies__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}
.vacancies__title {
    margin: 0;
}
.vacancies__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

/* 280x54 pill around a native <select>: it carries the `name`, works without
   JavaScript and keeps the platform's keyboard and touch behaviour. */
.vacancies__select {
    position: relative;
    display: block;
    width: 280px;
    max-width: 100%;
}
.vacancies__select-control {
    width: 100%;
    padding: 15px 45px 15px 15px;
    border: 1px solid var(--second);
    border-radius: var(--radius-15);
    background: var(--white);
    color: var(--second);
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 135%;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.vacancies__select-caret {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: var(--second);
    pointer-events: none;
}
/* Enhanced: the selects filter on change, so the submit button has no job. */
.vacancies__filters.is-enhanced .vacancies__submit {
    display: none;
}

/* ------------------
 * Select2 skin — matches the custom dropdown in About's "Global Supply Network"
 * (`.supply__select`, above): same pill, same seamless open state, same rows.
 * Select2 replaces the native control, so the fallback caret is dropped with it.
 * ------------------ */
.vacancies__filters.is-select2 .vacancies__select-caret {
    display: none;
}
.vacancies__select .select2-container,
.wpcf7-form .select2-container {
    width: 100% !important; /* select2 writes an inline px width */
}
.vacancies__select .select2-container--default .select2-selection--single,
.wpcf7-form .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    gap: 5px;
    height: auto;
    padding: 15px;
    border: 1px solid var(--second);
    border-radius: var(--radius-15);
    background: var(--white);
}
.vacancies__select .select2-container--default .select2-selection--single .select2-selection__rendered,
.wpcf7-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    /* Select2 ships 8px left / 20px right to clear its absolute arrow; the
       arrow is in flow here, so the padding only pulls the label off-centre. */
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--second);
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 1.35;
}
/* The chevron sits at the far right of the pill, after the label. Select2 pins
   this box `absolute` to the control; here it is a flex item instead — but it
   must stay `relative`, because the `b` inside it is absolutely positioned and
   would otherwise resolve against `.vacancies__select` and land in the middle
   of the pill, on top of the label. */
.vacancies__select .select2-container--default .select2-selection--single .select2-selection__arrow,
.wpcf7-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    position: relative;
    flex: 0 0 24px;
    margin-left: auto;
    width: 24px;
    height: 24px;
}
/* Select2 draws its arrow as a CSS triangle; the mockup's is a chevron. */
.vacancies__select .select2-container--default .select2-selection--single .select2-selection__arrow b,
.wpcf7-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -7px 0 0 -5px;
    border: none;
    border-right: 2px solid var(--second);
    border-bottom: 2px solid var(--second);
    transform: rotate(45deg);
}
/* Open: the pill and the list read as one box, as in About's dropdown.
   Which edge joins them depends on where Select2 put the list — it flips to
   `--above` when there is no room below, which near the end of a long form is
   most of the time. Without the `--below` / `--above` split the control kept
   squaring its bottom and hiding its bottom border while the list sat above it,
   so the seam was on the wrong side and a border ran through the middle. */
.vacancies__select .select2-container--open.select2-container--below .select2-selection--single,
.wpcf7-form .select2-container--open.select2-container--below .select2-selection--single {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.vacancies__select .select2-container--open.select2-container--above .select2-selection--single,
.wpcf7-form .select2-container--open.select2-container--above .select2-selection--single {
    border-top-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Invalid, the same `--accent` the text fields use (`.form-field.wpcf7-not-valid`
   above). Contact Form 7 flags the control it validated — the native <select>,
   which Select2 has hidden — so the state has to be carried over to the pill
   rendered in its place. Select2 inserts its container immediately after the
   element (`_placeContainer`), which is what makes the sibling selector hold.
   The native control keeps its own rule below for the no-JS case. */
.wpcf7-form select.wpcf7-not-valid + .select2-container--default .select2-selection--single {
    border-color: var(--accent);
}
.wpcf7-form select.wpcf7-not-valid + .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--accent);
}
.wpcf7-form select.wpcf7-not-valid + .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-right-color: var(--accent);
    border-bottom-color: var(--accent);
}

/* `overflow: hidden` is what clips the rows to the rounded corners. A row's
   highlight is a plain rectangle, so without it the first (or last, depending
   on which way the list opened) row shows its square corners poking past the
   radius on hover. The scroll lives on `.select2-results__options` below, so
   clipping here costs nothing. */
.vacancies__select-dropdown.select2-dropdown,
.form-select2-dropdown.select2-dropdown {
    border: 1px solid var(--second);
    background: var(--white);
    overflow: hidden;
}
/* Select2 does this for its own 4px radius; ours has to as well, or the list
   keeps a rounded corner where it meets the control. */
.vacancies__select-dropdown.select2-dropdown--below,
.form-select2-dropdown.select2-dropdown--below {
    border-top: none;
    border-radius: 0 0 var(--radius-15) var(--radius-15);
}
.vacancies__select-dropdown.select2-dropdown--above,
.form-select2-dropdown.select2-dropdown--above {
    border-bottom: none;
    border-radius: var(--radius-15) var(--radius-15) 0 0;
}
.vacancies__select-dropdown .select2-results__options,
.form-select2-dropdown .select2-results__options {
    max-height: 264px; /* ~6 rows, then scroll */
}
.vacancies__select-dropdown .select2-results__option,
.form-select2-dropdown .select2-results__option {
    padding: 10px 15px;
    color: var(--second);
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 1.35;
}
.form-select2-dropdown .select2-results__option--highlighted[aria-selected],
.form-select2-dropdown .select2-results__option[aria-selected="true"],
.form-select2-dropdown .select2-results__option--selected,
.vacancies__select-dropdown .select2-results__option--highlighted[aria-selected],
.vacancies__select-dropdown .select2-results__option[aria-selected="true"],
.vacancies__select-dropdown .select2-results__option--selected {
    background: var(--light);
    color: var(--second);
}
/* A combination that would return nothing is not offered. */
.vacancies__select-dropdown .select2-results__option[aria-disabled="true"],
.vacancies__select-dropdown .select2-results__option--disabled {
    opacity: 0.4;
    background: transparent;
    cursor: not-allowed;
}
/* Without JS the native control is what the user gets. */
.vacancies__select-control option:disabled {
    color: var(--black-60);
}

.vacancies__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.vacancies__empty {
    margin: 30px 0 0;
    color: var(--black-60);
    font-size: var(--fs-text);
    line-height: 130%;
    text-align: center;
}

.vacancy {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
/* `display: flex` above out-specifies the browser's `[hidden] { display: none }`,
   so a filtered-out row would stay on screen. Every `display` declaration on a
   class needs this companion. */
.vacancy[hidden] {
    display: none;
}
.vacancy__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}
.vacancy__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* The sheet reuses this block and hides it for an opening with no department;
   `display: flex` above out-specifies the browser's `[hidden]` without this. */
.vacancy__chips[hidden] {
    display: none;
}
.vacancy__chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--black);
    border-radius: var(--radius-30);
    color: var(--black);
    font-size: 14px;
    line-height: 135%;
}
.vacancy__row {
    display: grid;
    grid-template-columns: 870fr 195fr 195fr;
    align-items: center;
    gap: 30px;
    width: 100%;
}
.vacancy__name {
    margin: 0;
    color: var(--second);
    font-size: var(--fs-h3); /* fluid 29 -> 44 */
    font-weight: 400;
    line-height: 100%;
}
.vacancy__location {
    margin: 0;
    color: var(--black-60);
    font-size: var(--fs-text);
    line-height: 130%;
    text-align: center;
}
.vacancy__apply.btn {
    width: 100%;
    padding: 15px 30px;
}

.vacancy__details {
    display: grid;
    grid-template-columns: 870fr 420fr;
    gap: 30px;
}
.vacancy__subtitle {
    margin: 0 0 15px;
    color: var(--black);
    font-size: var(--fs-h6); /* fluid 20 -> 22 */
    font-weight: 400;
    line-height: 130%;
}
/* Both columns are a WYSIWYG, so either can hold paragraphs, a list, a link or
   bold copy — the two are styled together and differ only in the block they
   normally carry. */
.vacancy__text,
.vacancy__requirements {
    color: var(--black);
    font-size: var(--fs-text);
    line-height: 130%;
}
.vacancy__text > :first-child,
.vacancy__requirements > :first-child {
    margin-top: 0;
}
.vacancy__text > :last-child,
.vacancy__requirements > :last-child {
    margin-bottom: 0;
}
.vacancy__text p,
.vacancy__requirements p {
    margin: 15px 0 0;
}
.vacancy__text a,
.vacancy__requirements a {
    color: inherit;
    text-decoration: underline;
}
.vacancy__text a:hover,
.vacancy__requirements a:hover {
    color: var(--accent);
}
/* The mockup's bullets have no hanging indent — wrapped lines return to the
   left edge — so the marker is content, not a list-style. A numbered list keeps
   its numbers: the editor asked for them. */
.vacancy__text ul,
.vacancy__requirements ul {
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}
.vacancy__text ul li::before,
.vacancy__requirements ul li::before {
    content: '\2022\00a0';
}
.vacancy__text ol,
.vacancy__requirements ol {
    margin: 15px 0 0;
    padding-left: 20px;
}

.vacancy__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
/* 2px rule closing the row */
.vacancy__bottom::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--black);
}
/* Two triggers, one skin: `.vacancy__toggle` expands the row on desktop,
   `.vacancy__open` opens the phone's sheet. Which of the two is on screen is
   decided at the end of this block. */
.vacancy__toggle,
.vacancy__open,
.vacancy-sheet__close {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 135%;
    cursor: pointer;
}
/* Off until `is-enhanced` says the sheet can be opened — a button that opens
   nothing must never ship. */
.vacancy__open {
    display: none;
}
.vacancy__toggle-icon,
.vacancy__open-icon {
    flex-shrink: 0;
    transition: var(--transition-02);
}
.vacancy.is-open .vacancy__toggle-icon {
    transform: rotate(180deg);
}

/* ==================
 * Career — Join Our Talent Pool (Figma 394:3865 / 997:10576)
 * ================== */
/* The mockup's row is 1208 of the 1320 container: copy 533, gutter 143, form
   532, and 112 of slack on the right. All four are columns, so the whole thing
   scales instead of pinning anything. */
.talent__inner {
    display: grid;
    /* 539 on the copy column, not 533: the mockup's heading sits on one line. */
    grid-template-columns: 539fr 143fr 532fr 112fr;
}
.talent__copy {
    grid-column: 1;
}
.talent__form {
    grid-column: 3;
}
.talent__desc {
    margin: 0;
    color: var(--black);
    font-size: var(--fs-text);
    line-height: 130%;
}
/* A cell that takes the whole row where the others split 50/50 — the modal's
   Email sits under Name + Phone that way. */
.form-field-cell.form-field-cell-wide {
    flex: 1 1 100%;
    width: 100%;
}

/* One field per row in the open application form (its mockup stacks them all). */
.talent__form .form-field-cell {
    flex: 1 1 100%;
    width: 100%;
}
.talent__form .form-field.wpcf7-textarea {
    height: 88px;
}
.talent__form .form-row.form-row-submit,
.apply-modal__form .form-row.form-row-submit {
    justify-content: center;
}

/* Both pop-ups — Career's "Apply Now" (Figma 1024:10144) and the product
   page's request (413:4383). One card, 532 wide, r30, 60/45/45, and the same
   grid inside: two fields to a row, with the message, the drop zone and
   anything marked wide taking the whole card — whichever of those three
   classes the CF7 markup happens to carry.

   The row rhythm stays the shared 30px on purpose. The mockups' field
   component is 53 tall where ours renders 35, because it carries 18px of its
   own trailing space, so their 15px gaps come out as the same ~65px
   baseline-to-baseline every other form on the site already has. */
/* Half the card minus the gap, not a bare 50%: the row wraps, and two cells
   at 50% plus a 15px gap do not fit on one line — they would drop onto lines
   of their own and the two-column card would silently become a stack. */
.apply-modal__form .form-field-cell {
    flex: 1 1 calc((100% - 15px) / 2);
    width: calc((100% - 15px) / 2);
}
.apply-modal__form .form-field-cell.form-field-cell-message,
.apply-modal__form .form-field-cell.form-field-cell-file,
.apply-modal__form .form-field-cell.form-field-cell-wide,
/* A row holding one field spans the card whether or not anyone remembered to
   mark it — there is nothing for it to sit beside. */
.apply-modal__form .form-row > .form-field-cell:only-child {
    flex: 1 1 100%;
    width: 100%;
}
/* The message box, in lines above a single field: three in the Career modal
   (99 against 53 in 1024:10151), two in the product one (76 in 413:4389). */
.apply-modal[data-apply-modal] .form-field.wpcf7-textarea {
    height: 82px;
}
.apply-modal[data-request-modal] .form-field.wpcf7-textarea {
    height: 58px;
}

/* Bordered pill <select> — distinct from the underlined text inputs. Add
   `class:form-field-select` to the CF7 tag instead of `class:form-field`. */
.form-field-select {
    width: 100%;
    padding: 15px 45px 15px 15px;
    border: 1px solid var(--second);
    border-radius: var(--radius-15);
    background: transparent;
    color: var(--second);
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 135%;
    cursor: pointer;
    outline: none;
}
/* The no-JS half of the rule above: without Select2 this is the visible
   control, so it carries the invalid state itself. */
.form-field-select.wpcf7-not-valid {
    border-color: var(--accent);
    color: var(--accent);
}

/* ------------------
 * Phone field — intl-tel-input, on the line every other field is drawn as.
 *
 * The widget is not in the mockups: it was asked for after them, for the
 * country code in front of the line, and the look here is taken from the two
 * controls the mockups do draw. It checks nothing — see `initPhoneInputs()`. The line is unchanged —
 * the library lays its country button over the input's left padding and pads
 * the input by exactly that much, so the underline still runs the full width of
 * the cell and only the label starts further in. The list is About's dropdown:
 * the 1px `--second` box with `--radius-15`, rows at 10px 15px highlighting on
 * `--light`, in the same 18px `--second` as the Select2 lists beside it.
 *
 * `.form-phone` is the class the theme puts on the widget itself
 * (`containerClass`, see `initPhoneInputs()` in custom.js). It has to be a
 * class of ours rather than a `.wpcf7-form` descendant selector, because the
 * country list is moved out of the form — into the dialog on a pop-up, into
 * `<body>` for the phone's fullscreen sheet — and nothing about the form can
 * reach it there. The library's stylesheet is enqueued in the head, before this
 * file, so everything below wins on source order where specificity ties.
 * ------------------ */
.form-phone {
    /* The library's palette, swapped for the theme's. Everything it draws —
       the chevron, the search icon, the tick on the chosen row, the hover —
       reads these, so most of the skin is these six lines. */
    --iti-hover-color: var(--light);
    --iti-border-color: var(--second);
    --iti-country-selector-bg: var(--white-true);
    --iti-icon-color: var(--second);
    --iti-arrow-size: 6px;
    --iti-arrow-width: 2px;
    --iti-mobile-popup-margin: 15px;
    /* The wash behind a refused keystroke — the library's own bare red,
       taken to the theme's. It is only drawn under
       `prefers-reduced-motion: reduce`, where the shake is replaced by a
       flash; everywhere else the field shakes and no colour is used. */
    --iti-strict-reject-flash-color: var(--red20);

    /* `--iti-spacer-horizontal` and `--iti-arrow-padding` are left at the
       library's 10px and 7px on purpose, and the button's own left padding is
       dropped below. The flag, the chevron and the dial code stand in front of
       the placeholder — the library pads the input by exactly their width — and
       at the theme's 15px they came to 89px, where 83 already leaves only 131px
       of the 214 a half-width cell has in the 532 card. That is what took the
       label off the line: "Phone number*" is 137 of it at 18px Geologica and
       "Telefonnummer*" 147, so it was drawn with its last character cut off.
       The line carries no placeholder at all now (`initPhoneInputs()`), so
       nothing here has a width to fit any more. */

    /* The size the field is. The button and the rows inherit it, so the widget
       follows the field at every width — `responsive.css` sizes this class
       beside `.form-field` for exactly that reason. */
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 130%;
}
/* The wrapper the library puts around the input is `inline-block`; the cell it
   sits in expects the field to fill it. */
.form-phone.iti {
    display: block;
    width: 100%;
}
/* The 50% every field rests at moves from the input to the wrapper, so the flag
   and the dial code dim with the line rather than staying bright over a faded
   one — a child at full opacity inside a half-transparent parent still
   composites at half. Invalid takes it back to full the same way the input's
   own rule does, since the `--accent` line must not be a faded one. */
.form-phone.iti {
    opacity: 0.5;
}
.form-phone.iti:focus-within,
.form-phone.iti:has(.wpcf7-not-valid) {
    opacity: 1;
}
.form-phone .form-field {
    opacity: 1;
}
/* The button is inset by the field's own padding, so it centres on the line of
   text rather than on the box the underline draws: the flag and the dial code
   sit level with the placeholder. The two values are written onto the wrapper
   by `initPhoneInputs()`, read from the input itself — the plain field pads
   11px at the bottom and nothing at the top, the Contacts card 15px at both. */
.form-phone .iti__country-container {
    top: -1px;
    bottom: initial;
}

.contacts-form__card .form-phone .iti__country-container {
    top: 14px;
}
/* The flag starts where the field's text would, so the line still begins on the
   page grid; the right-hand padding stays the library's, since that is the gap
   the input is padded by. */
.form-phone .iti__selected-country-primary {
    padding-left: 0;
    border-radius: var(--radius-5);
}
.form-phone .iti__selected-dial-code {
    color: var(--black);
}
/* The list, as one box: `overflow: hidden` is what clips the rows to the
   radius — a row's highlight is a plain rectangle and would otherwise show its
   square corners past the first and last one. Same reason as the Select2 list
   above, which is also where the 264px comes from: about six rows, then scroll.
   The library's own border and drop shadow are dropped with it. */
.form-phone .iti__country-selector {
    border: 1px solid var(--second);
    border-radius: var(--radius-15);
    box-shadow: none;
    overflow: hidden;
}
/* A card in its own right rather than a box glued to the field: it stands over
   the form, so it is given the depth to say so — the theme's own dark, at the
   weight the vacancy sheet's bar uses, and nothing stronger. */
.form-phone .iti__country-selector {
    box-shadow: 0 10px 30px rgba(0, 13, 26, 0.12);
}
/* A row on one line. The list is as wide as its longest country, so there is
   room for every name, and a wrapped row is what made the list look ragged. */
.form-phone .iti__country {
    white-space: nowrap;
}
/* The scrollbar is the site's, not the browser's: 4px, the same track and
   thumb SimpleBar draws everywhere else (the vacancy sheet, the catalog menu).
   SimpleBar itself cannot be used here — the library scrolls this element to
   the selected country by hand — so the native bar is dressed as one. */
.form-phone .iti__country-list {
    scrollbar-width: thin;
    scrollbar-color: var(--red20) rgba(0, 13, 26, 0.1);
}
.form-phone .iti__country-list::-webkit-scrollbar {
    width: 4px;
}
.form-phone .iti__country-list::-webkit-scrollbar-track {
    margin: 5px 0;
    background: rgba(0, 13, 26, 0.1);
    border-radius: 2px;
}
.form-phone .iti__country-list::-webkit-scrollbar-thumb {
    background: var(--red20);
    border-radius: 2px;
}
.form-phone .iti__country-list {
    max-height: 264px;
}
.form-phone .iti__country {
    padding: 10px 15px;
    color: var(--second);
}
/* `display: inline` because the theme makes every `span` inside a field's cell
   a block, and the list is rendered inside the field's own cell — without this
   every dial code takes a line of its own and half the list is two rows tall. */
.form-phone .iti__dial-code {
    display: inline;
}
/* The search box is the top row of the list, not a control of its own: no box,
   no radius, no focus ring — the divider under it is the library's, in
   `--second` like the border around everything. An `<input>` inherits no font,
   hence `font: inherit`. */
.form-phone .iti__search-input {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0;
    font: inherit;
    color: var(--second);
}
.form-phone .iti__search-input:focus {
    outline: none;
}
.form-phone .iti__search-input::placeholder {
    font: inherit;
    color: var(--second);
}
.form-phone .iti__no-results {
    color: var(--second);
}
/* The phone's fullscreen list is the theme's own veil, the one the modals draw
   (`.apply-modal::backdrop`), rather than the library's flat black. */
.form-phone.iti--fullscreen-popup.iti--detached-country-selector {
    background-color: rgba(0, 13, 26, 0.55);
    backdrop-filter: blur(3px);
}

/* ==================
 * Career — "Apply Now" modal (Figma 1024:10142 / 1024:10291)
 * ================== */
.apply-modal {
    width: 532px;
    max-width: calc(100% - 30px);
    padding: 0;
    border: none;
    background: transparent;

    /* The browser centres an open modal with `margin: auto` on the dialog; the
       `* { margin: 0 }` reset at the top of this file wipes that out, and the
       card ends up in the top-left corner. Put it back explicitly. */
    margin: auto;

    /* The scrolling belongs to the card, not to the dialog (2026-09-12).
       The phone field's country list is rendered into the *dialog* — that is
       how it stays in the top layer with the form — so a dialog that clips its
       overflow cuts the list off at the card's edge. Measured before the
       change: `elementFromPoint` over the open list answered `.apply-modal`.
       With the constraint on the card, a card taller than the screen still
       scrolls and the list, a sibling of that card, is not clipped by it. */
    overflow: visible;
}
.apply-modal::backdrop {
    background: rgba(0, 13, 26, 0.55);
    backdrop-filter: blur(3px);
}
.apply-modal__card {
    position: relative;
    padding: 60px 45px 45px;
    background: var(--white);
    /* Keep a card taller than the screen reachable, rather than letting it run
       off the bottom with the submit button on it. */
    max-height: calc(100vh - 30px);
    overflow: auto;
}
.apply-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    color: var(--second);
    cursor: pointer;
    transition: var(--transition-02);
}
.apply-modal__close:hover {
    color: var(--accent);
}
/* 35/1 centred, and 35 at both widths — this is the one heading the mockups
   pin rather than scale: 1024:10145 and 1024:10197 are the same size, and so
   are the product pop-up's (413:4395). It wraps to two lines on mobile, which
   is what those frames show. */
.apply-modal__title {
    margin: 0 0 28px;
    color: var(--second);
    font-size: 35px;
    font-weight: 400;
    line-height: 100%;
    text-align: center;
}
/* The card's form wraps, so a full-width cell drops to its own line beside two
   halves — Name and Phone, then Email across (1024:10146). */
.apply-modal .form-row {
    flex-wrap: wrap;
}
/* The dialog is modal — stop the page behind it from scrolling. */
html:has(dialog[open]) {
    overflow: hidden;
}

/* ==================
 * Career — Frequently Asked Questions (Figma 388:7681 / 997:10615)
 * ================== */
.faq__inner {
    display: grid;
    grid-template-columns: 420fr 870fr;
    gap: 30px;
}
.faq__title {
    margin: 0;
}
.faq__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.faq__item {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
/* 2px rule closing each question */
.faq__item::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--black);
}
.faq__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}
.faq__question {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--font-family);
    color: var(--second);
    font-size: 28px;
    font-weight: 400;
    line-height: 100%;
}
.faq__toggle {
    flex-shrink: 0;
    display: flex;
    color: var(--black);
    transition: var(--transition-02);
}
.faq__item.is-open .faq__toggle {
    transform: rotate(180deg);
}
.faq__answer {
    color: var(--black);
    font-size: var(--fs-text);
    line-height: 130%;
}
.faq__answer p {
    margin: 0;
}
.faq__answer p + p {
    margin-top: 15px;
}

/* ==================
 * Career — intermediate breakpoints
 * ================== */
@media (max-width: 1200px) {
    .vacancy__row {
        grid-template-columns: 1fr 195fr 195fr;
    }
    .vacancy__details {
        grid-template-columns: 1.6fr 1fr;
    }
    .talent__inner {
        grid-template-columns: 1fr 60px 1fr;
    }
}

@media (max-width: 992px) {
    .vacancies-hero__box {
        padding: 45px;
    }
    .vacancies-values__inner,
    .faq__inner {
        grid-template-columns: 1fr; /* heading above its content */
    }
    .vacancy__row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            'name name'
            'location apply';
        align-items: end;
        gap: 15px 30px;
    }
    .vacancy__name {
        grid-area: name;
    }
    .vacancy__location {
        grid-area: location;
        text-align: left;
    }
    .vacancy__apply.btn {
        grid-area: apply;
        width: auto;
    }
}

@media (max-width: 768px) {
    /* The hero's own step between the two mockups, the one the Services, home
       and About heroes already take: 4:3 here, the 375 mockup's portrait below
       575. Without it the frame went straight from the desktop's 1320:745 to
       the portrait and jumped 360px across a single pixel of viewport. */
    .vacancies-hero__frame {
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-30);
    }
    .vacancies-values__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .vacancy__details {
        grid-template-columns: minmax(0, 1fr);
    }
    .talent__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 30px;
    }
    .talent__copy,
    .talent__form {
        grid-column: 1;
    }
}

/* Mobile mockups: vacancies 375 (995:6513 · 997:9970 · 997:10016 · 997:10576 ·
 * 997:10615) */
@media (max-width: 575px) {
    .vacancies-hero.block,
    .vacancies-values.block,
    .vacancies.block,
    .talent.block,
    .faq.block {
        margin-bottom: 120px;
    }
    .vacancies-hero__frame {
        aspect-ratio: 345 / 670; /* portrait hero */
        max-height: 670px; /* the ratio alone reaches 1058 by 575 */
        border-radius: var(--radius-30);
    }
    .vacancies-hero__box {
        max-width: 100%;
        padding: 15px;
    }
    .vacancies-hero__desc {
        font-size: var(--fs-text);
    }

    .vacancies-values__inner {
        gap: 15px;
    }
    .vacancies-values__grid {
        gap: 15px;
    }
    /* Scoped like the desktop rules above — from 768 down responsive.css turns
       About's card into a 310px carousel item, which must not reach this grid.
       The fluid --fs-h5 / --fs-text already land on the mockup's 23/16 here. */
    body.page-template-vacancies-page .value-card {
        min-height: 220px;
        gap: 15px;
    }

    .vacancies__head {
        gap: 15px;
    }
    .vacancies__filters {
        flex-direction: column;
        gap: 15px;
    }
    .vacancy {
        gap: 15px;
    }
    .vacancy__row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .vacancy__apply.btn {
        width: auto;
    }

    /* Figma 1024:10196 — the card is the screen minus 15 a side, the heading
       starts 30 down and everything else keeps the 15 gutter. */
    .apply-modal__card {
        padding: 30px 15px 15px;
    }
    .apply-modal__close {
        top: 0;
        right: 15px;
    }
    /* The drop zone is a row here, not the desktop panel: 53 tall, the label
       beside the paperclip rather than above the fold of a 84px box. */
    .apply-modal .filepond--root .filepond--drop-label {
        min-height: 53px;
    }
    /* Stacked, and in the mockup's order — Name, Email, Phone — where the
       desktop card puts Name and Phone side by side with Email under them.
       Order rather than a second block of markup, so there is one form. */
    .apply-modal .form-field-cell {
        flex: 1 1 100%;
        width: 100%;
    }
    .apply-modal .form-field-cell-name {
        order: 1;
    }
    .apply-modal .form-field-cell-email {
        order: 2;
    }
    .apply-modal .form-field-cell-phone {
        order: 3;
    }
    /* Company closes the group. Without an order of its own it kept the
       default 0 and jumped ahead of Phone — the two share a row, and `order`
       only sorts within one. */
    .apply-modal .form-field-cell-company {
        order: 4;
    }

    /* Product pop-up, measured against 997:11753 (the card in "pop-up 375").
       Scoped to this dialog: the Career modal has its own mobile frame and is
       not what these numbers come from. */
    .apply-modal[data-request-modal] .apply-modal__card {
        border-radius: var(--radius-15); /* 15 here, not the desktop card's 30 */
    }
    /* The close button's 40x40 box sits in the card's corner, not on the
       15px gutter the copy keeps. */
    .apply-modal[data-request-modal] .apply-modal__close {
        right: 0;
    }
    /* The fields keep 18 in this card, where the page's forms drop to 16 at
       768 (`responsive.css`). Out-specifies that rule rather than relying on
       source order, since responsive.css loads last. */
    .apply-modal[data-request-modal] .form-field {
        font-size: 18px;
    }
}

/* ==================
 * Career — vacancy details as a mobile sheet (Figma 997:10235 · 997:10316)
 *
 * Below 768 the mockup does not expand the row in place: "View Details" opens
 * the opening full screen, scrollable, with the chip, title and location at the
 * top and a bar carrying "Close ×" and "Apply Now" at the bottom.
 *
 * It is a <dialog>, not the row itself turned `fixed`, which is what it was
 * until now. The row was sliding open and being lifted out of the page in the
 * same frame, so the slide played against a box that had already moved, and
 * closing undid the two in the other order — the sheet vanished and the
 * details were then seen collapsing back into the list behind it. The dialog
 * owns the whole screen and the row underneath never changes state at all.
 *
 * There is still one copy of the opening's text: `custom.js` moves the row's
 * own `.vacancy__details` into the card and puts it back on close, and the
 * head reuses the row's classes so chip, title and location read the same in
 * both places. The scroll lock is the shared `html:has(dialog[open])` rule.
 * ================== */
.vacancy-sheet {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: none;
    background: none;

    /* The browser centres an open modal with `margin: auto`, and the
       `* { margin: 0 }` reset at the top of this file wipes it out — see the
       apply pop-up above. Full screen still needs it: without a margin the
       card is laid out from the top-left with the page's own scroll under it. */
    margin: auto;
    overflow: hidden; /* the scroll belongs to the middle of the card */
}
.vacancy-sheet__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white-true);

    /* The arrival, in CSS rather than in the fade `custom.js` gives the pop-up
       cards: the close has to put the details back in the frame it closes in,
       so there is no animation to wait for on the way out and none to schedule
       from script on the way in. Opacity only — the card is exactly as tall as
       the screen and the bar is the bottom of it, so anything that moved the
       card would draw that bar off the bottom while it played.

       No fill mode on purpose: the card's own opacity is 1, so if the
       animation never runs the sheet is simply there. `both` would hold it at
       the keyframe's `opacity: 0` instead — an invisible sheet over a locked
       page, which is not a failure worth risking for an entrance. */
    animation: vacancy-sheet-in 200ms var(--ease-reveal);
}
@keyframes vacancy-sheet-in {
    from {
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .vacancy-sheet__card {
        animation: none;
    }
}
/* Everything above the bar scrolls. SimpleBar takes this element, so the
   column it scrolls has to be a child of it — `[data-simplebar]` overwrites the
   host's own flex settings, and the gap would end up between SimpleBar's
   internal elements rather than between the chip, the title and the copy.
   `overflow-y` stays for the case where the library is not there. */
.vacancy-sheet__scroll {
    flex: 1 1 auto;
    min-height: 0; /* or the flex item refuses to shrink and nothing scrolls */
    padding: 30px 15px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.vacancy-sheet__scroll .simplebar-content-wrapper {
    overscroll-behavior: contain;
}
.vacancy-sheet__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px; /* the head's own rhythm — 997:10307 */
}
/* SimpleBar, as everywhere else the theme draws its own scrollbar: 4px wide,
   5px in from the screen's edge, and 30 clear of the top and of the bar —
   997:10391 puts the track at 30…683 of the 713 above the bar. */
.vacancy-sheet__scroll .simplebar-track.simplebar-vertical {
    top: 30px;
    right: 5px;
    bottom: 30px;
    width: 4px;
    background: rgba(0, 13, 26, 0.1); /* the mockup's track; no token for it */
    border-radius: 10px;
}
.vacancy-sheet__scroll .simplebar-track.simplebar-horizontal {
    display: none; /* vertical only */
}
.vacancy-sheet__scroll .simplebar-scrollbar::before {
    left: 0;
    right: 0;
    background: var(--red20);
    border-radius: 10px;
}
.vacancy-sheet__scroll .simplebar-scrollbar.simplebar-visible::before {
    opacity: 1; /* solid — no fade */
}
/* 30 from the location to "Description:", 5 of which the column already gives. */
.vacancy-sheet__body {
    width: 100%;
    margin-top: 25px;
}
/* The bar is true white over a card of the same colour, so what separates the
   two is the shadow the mockup casts upwards (999:14795). 30 below the button
   rather than the 15 above it — the mockup keeps the thumb's reach off the
   phone's bottom edge. */
.vacancy-sheet__bar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 15px 30px;
    background: var(--white-true);
    box-shadow: 0 -5px 7.5px rgba(0, 0, 0, 0.1);
}
/* `Icon::plus()` draws the × itself, so there is nothing to rotate here — only
   to keep it from being squeezed when the job title makes the bar tight. */
.vacancy-sheet__cross {
    flex-shrink: 0;
}
/* The row's button is full width in its grid cell; in the bar it is a pill
   beside "Close". */
.vacancy-sheet__apply.btn {
    width: auto;
}

/* The type is the sheet's own, not the row's — 997:10235 is drawn at its own
   sizes and the row's are the list's. Scoped to the component rather than to a
   width, which is the same thing here: below 768 the details are only ever
   read in the sheet, the accordion being hidden.
     · title 26 with the font's own leading, where the row sets 100%
     · location and "Close" 18, where the page's text is 16 at this width
     · "Description:" / "Requirements:" 20, and 5 to their copy, not 15
     · the copy itself 14 */
.vacancy-sheet__title {
    font-size: 26px;
    line-height: normal;
}
.vacancy-sheet__location {
    font-size: 18px;
}
.vacancy-sheet .vacancy__details {
    gap: 15px; /* between Description and Requirements */
}
.vacancy-sheet .vacancy__subtitle {
    margin-bottom: 5px;
    font-size: 20px;
    line-height: normal;
}
.vacancy-sheet .vacancy__text,
.vacancy-sheet .vacancy__requirements {
    font-size: 14px;
}
/* The editor's list keeps the theme's own bullet (drawn as content, no hanging
   indent); the mockup only opens the rows up. */
.vacancy-sheet .vacancy__text ul li + li,
.vacancy-sheet .vacancy__requirements ul li + li {
    margin-top: 5px;
}

@media (max-width: 768px) {
    /* The swap. `is-enhanced` is added by `initVacancies()` only when the
       dialog can actually be opened, so without JavaScript — or without
       <dialog> — the accordion stays the mechanism at every width. */
    .vacancies__list.is-enhanced .vacancy__toggle {
        display: none;
    }
    .vacancies__list.is-enhanced .vacancy__open {
        display: flex;
    }
}

/* ==================
 * Catalog — product archive (Figma 270:1123 desktop, 270:1122 mobile)
 * ================== */
/* The catalog's own heading and a category's are one type: 69/100% in
   `--accent`, Medium and capitalised (Figma 350:1601 / 362:1941), coming down
   to 36 on the 375 mockups, where the leading opens to 125%. Well above the
   site-wide `--fs-h2`, hence its own clamp rather than `.block-title`.
   The mobile frames also drop to Regular and lose the capitalisation; that
   reads as drift in the file rather than intent, so weight and case hold at
   every width and only the size and the leading move. */
.catalog__title,
.category-hero__title {
    color: var(--accent);
    font-family: var(--font-family);
    font-size: clamp(36px, calc(24.38px + 3.1vw), 69px);
    font-weight: 500;
    line-height: 100%;
    text-transform: capitalize;
}
.catalog__title {
    margin: 15px 0 0;
}
.catalog {
    margin-top: 30px;
}
/* `body.archive .have-question.block { margin-bottom: 0 }` was written for the
   news archive, where the band is the last thing before the footer. The shop
   page is an archive too, but its band is followed by the catalog text and
   keeps the page's normal rhythm. */
body.archive .catalog-page .have-question.block {
    margin-bottom: 180px;
}
.catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}
/* The tile is the photo: title over it, bottom-centred, on a card that only
   shows its border on hover (the mockup's "Construction" state). */
.catalog-card {
    position: relative;
    display: block;
    aspect-ratio: 420 / 280;
    background: var(--white-true);
    border: 1px solid transparent;
    border-radius: var(--radius-45);
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition-08);
}
.catalog-card:hover,
.catalog-card:focus-visible {
    border-color: var(--second);
}
.catalog-card__media {
    position: absolute;
    inset: 0;
    display: block;
}
.catalog-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    /* The news card's zoom, timing and all — the one hover the theme plays on
       a photograph, and the same one the home tiles and the subcategory cards
       already borrowed. The card clips it: `.catalog-card` is `overflow:
       hidden` at `--radius-45`, so the picture grows inside the rounded
       corners while the tile keeps its edges — and the border that turns
       `--second` on the same hover stays exactly where it is drawn. */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.catalog-card:hover .catalog-card__image,
.catalog-card:focus-visible .catalog-card__image {
    transform: scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
    .catalog-card__image {
        transition: none;
    }
    .catalog-card:hover .catalog-card__image,
    .catalog-card:focus-visible .catalog-card__image {
        transform: none;
    }
}
.catalog-card__title {
    position: absolute;
    right: 46px;
    bottom: 15px;
    left: 46px;
    z-index: 1;
    color: var(--second);
    font-size: var(--fs-h5); /* fluid 23 -> 28 */
    line-height: 1.3;
    text-align: center;
}

/* The rich text under the grid sits in the same 1095 column the article body
   uses (Figma 368:4201 / 381:5908 — both start at x=173 in a 1440 frame). */
.catalog-text__inner,
.product-text__inner {
    max-width: 1095px;
    margin: 0 auto;
}
/* The product's name above its own rich text (Figma 381:5909): 55/1 in
   `--accent`, 15px above the editor's first heading. Same fluid token as the
   section headings, so it comes down to 32 on mobile with everything else. */
.product-text__title {
    margin: 0 0 15px;
    color: var(--accent);
    font-size: var(--fs-h2); /* fluid 32 -> 55 */
    line-height: 1;
}

/* Products inside a category archive. The category mockups (Figma 582:4038 and
   its siblings) are not built yet — this reuses the product card so a category
   page stays on-brand until they are. */
.catalog-products__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}

/* ==================
 * Catalog — a category's banner and name (Figma 960:4498 / 995:7478 mobile)
 * ================== */
.category-hero {
    margin-bottom: 30px;
}
/* 530 tall on the 1440 mockup, 250 on the 375 one. */
.category-hero__media {
    position: relative;
    height: clamp(250px, calc(151.41px + 26.29vw), 500px);
}
.category-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The photograph fades into the page at both edges rather than ending on a
   line, and the heading sits in the lower fade. Absolutely positioned, so it
   paints over the picture — the heading takes `position` back below. */
.category-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--white) 0%, rgba(235, 245, 255, 0.2) 30.17%, var(--white) 100%);
}
/* The type is shared with `.catalog__title`; what is the hero's own is that it
   is centred and overlaps the picture by 39px (15px below it on mobile — see
   the 767 rules). */
.category-hero__title {
    position: relative;
    margin: -39px 0 0;
    text-align: center;
}
/* Without the photograph there is nothing to overlap. */
.category-hero--plain .category-hero__title {
    margin-top: 15px;
}

/* ==================
 * Catalog — small category tiles (Figma 364:2433 / 995:7652 mobile)
 * ================== */
/* Every category below the top level: a category's children and the "Other
   category" row. The top level keeps the large `.catalog-card` tiles. */
.subcat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}
.subcat-card {
    position: relative;
    display: block;
    aspect-ratio: 308 / 200;
    background: var(--light);
    border-radius: var(--radius-30);
    overflow: hidden; /* holds the picture's zoom inside the tile's corners */
    text-decoration: none;
}
.subcat-card__media {
    position: absolute;
    inset: 0;
    display: block;
}
.subcat-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    /* The news card's zoom, timing and all — the one hover the theme already
       plays on a photograph. */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hover — the picture alone moves. The tile keeps its edges: the frame that
   used to draw itself in `--second` was a second thing happening at once.
   Clipped by the card here and by `.subcat-card__media` once the mobile layout
   takes the overflow off the card. */
.subcat-card:hover .subcat-card__image,
.subcat-card:focus-visible .subcat-card__image {
    transform: scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
    .subcat-card__image {
        transition: none;
    }
    .subcat-card:hover .subcat-card__image,
    .subcat-card:focus-visible .subcat-card__image {
        transform: none;
    }
}
/* The name reads on the photo's own darkening, not on a plate under it. */
.subcat-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 13, 26, 0) 68.75%, rgba(0, 13, 26, 0.7) 100%);
}
.subcat-card__title {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    z-index: 1;
    color: var(--white);
    font-size: 18px;
    line-height: 1.35;
    text-align: center;
}

/* ==================
 * Catalog — "Other category" (Figma 364:2376 / 582:4045)
 * ================== */
/* The heading row the news and "Other products" sliders already use. */
.other-cats__header {
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--black);
}
.other-cats__link {
    gap: 5px;
    flex-shrink: 0;
    color: var(--second);
    font-size: 18px;
    line-height: 1.35;
    text-decoration: none;
    transition: var(--transition-02);
}
.other-cats__link:hover,
.other-cats__link:focus-visible {
    color: var(--accent);
}

/* ==================
 * Catalog — product card (Figma 381:5791 desktop, 995:7966 mobile)
 * ================== */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto; /* override swiper-slide stretch */
    padding: 15px 0 30px;
    background: var(--white-true);
    border-radius: var(--radius-30);
    overflow: hidden;
    text-decoration: none;
}
.product-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}
/* Component renders must not be cropped — the photo is contained, not covered. */
.product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-card__title {
    padding: 0 15px;
    color: var(--black);
    font-size: var(--fs-h6); /* fluid 20 -> 22 */
    line-height: 1.3;
    transition: var(--transition-02);
}
.product-card:hover .product-card__title,
.product-card:focus-visible .product-card__title {
    color: var(--accent);
}

/* ==================
 * Item page — hero (Figma 999:13324 desktop, 995:7925 mobile)
 * ================== */
.product-hero {
    margin-top: 10px;
    margin-bottom: 220px;
}
.product-hero__row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.product-hero__media {
    flex: 0 0 calc((100% - 30px) / 2);
    max-width: calc((100% - 30px) / 2);
    aspect-ratio: 645 / 600;
}
.product-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-hero__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}
.product-hero__title {
    margin: 0;
    color: var(--accent);
    font-size: var(--fs-h2); /* fluid 32 -> 55 */
    font-weight: 400;
    line-height: 1;
}
.product-hero__brand {
    margin: 0;
    color: var(--black);
    font-size: var(--fs-h5); /* fluid 23 -> 28 */
    line-height: 1.3;
}
.product-hero__block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.product-hero__label {
    margin: 0;
    color: var(--black);
    font-size: var(--fs-text);
    line-height: 1.3;
}
.product-hero__value {
    margin: 0;
    color: var(--black-60);
    font-size: var(--fs-text);
    line-height: 1.3;
}
.product-hero__value p {
    margin: 0;
}
.product-hero__cta {
    align-self: flex-start;
}

/* ==================
 * Item page — "Other products" (Figma 381:5764 desktop, 995:7943 mobile)
 * ================== */
.related__header {
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--black);
}
.related__all {
    gap: 5px;
    flex-shrink: 0;
    color: var(--second);
    font-size: 18px;
    line-height: 1.35;
    text-decoration: none;
    transition: var(--transition-02);
}
.related__all:hover,
.related__all:focus-visible {
    color: var(--accent);
}
.related__all svg,
.related__all svg path {
    transition: var(--transition-02);
}
.related__slider {
    position: relative;
}
/* Unlike the news slider the mockup centres the navigation under the cards. */
.related__nav {
    gap: 5px;
    margin-top: 30px;
}
.related__arrows {
    flex-shrink: 0;
    gap: 12px;
}
.related__arrow {
    position: relative; /* reset swiper-button absolute positioning */
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin: 0;
    color: var(--second);
    opacity: 0.8;
    cursor: pointer;
    transition: var(--transition-02);
}
.related__arrow:hover {
    opacity: 1;
    color: var(--accent);
}
.related__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}
.related__pagination.swiper-pagination {
    position: relative; /* swiper base sets absolute */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
/* Dark progress bars on the light section background — scoped to the component,
   the same way `.csr` / `.reviews` do it. */
.related .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    background: var(--black);
}

/* ==================
 * Catalog / item page — intermediate widths
 * ================== */
@media (max-width: 1200px) {
    .catalog-card__title {
        right: 30px;
        left: 30px;
    }
    .catalog-products__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .catalog__grid {
        gap: 20px;
    }
    .catalog-card {
        border-radius: var(--radius-30);
    }
    .catalog-card__title {
        right: 15px;
        left: 15px;
    }
    .subcat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    /* The two columns get cramped well before they stack */
    .product-hero__row {
        gap: 20px;
    }
    .product-hero__media {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}

@media (max-width: 767px) {
    /* Mobile catalog: two columns with the first tile across the row, the
       title under the photo instead of over it (Figma 995:7237). */
    .catalog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }
    .catalog-card {
        display: flex;
        flex-direction: column;
        gap: 5px;
        aspect-ratio: auto;
        background: none;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .catalog-card:first-child {
        grid-column: 1 / -1;
    }
    .catalog-card__media {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 420 / 280;
        border-radius: var(--radius-15);
        overflow: hidden;
    }
    .catalog-card__title {
        position: static;
        font-size: 16px;
        line-height: normal;
    }

    .catalog-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    /* Both headings open their leading to 125% here, and the banner stops
       overlapping: the name stands under it. */
    .catalog__title,
    .category-hero__title {
        line-height: 1.25;
    }
    .category-hero__title {
        margin-top: 15px;
    }

    /* Mobile tiles: the name moves out from over the photo and turns
       `--second` under it, like the large catalog cards (Figma 995:7652). */
    .subcat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }
    .subcat-card {
        display: flex;
        flex-direction: column;
        gap: 5px;
        aspect-ratio: auto;
        background: none;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .subcat-card__media {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 165 / 107;
        border-radius: var(--radius-15);
        overflow: hidden;
    }
    .subcat-card__media::after {
        content: none;
    }
    .subcat-card__title {
        position: static;
        color: var(--second);
        font-size: 14px;
        line-height: 1.35;
    }

    .product-card {
        gap: 10px;
        padding: 0 0 15px;
        border-radius: var(--radius-15);
    }
    .product-card__title {
        padding: 0 5px;
        font-size: 14px;
        line-height: 1.35;
    }

    /* The photo moves between the brand and the description, so the info
       column dissolves into the same flex column and CSS reorders it. */
    .product-hero__row {
        flex-direction: column;
        gap: 15px;
    }
    .product-hero__info {
        display: contents;
    }
    .product-hero__media {
        order: 3;
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        aspect-ratio: 345 / 321;
    }
    .product-hero__title {
        order: 1;
    }
    .product-hero__brand {
        order: 2;
    }
    .product-hero__block {
        order: 4;
    }
    .product-hero__value p + p {
        margin-top: 15px;
    }
    /* Figma 995:8199 — the only "Contact us" on mobile is pinned to the
       viewport, so the inline one leaves the flow entirely. */
    .product-hero__cta {
        position: fixed;
        left: 50%;
        bottom: 30px;
        z-index: 30;
        transform: translateX(-50%);
    }
    /* Out of the way once the footer is on screen (toggled by
       `initProductCtaFooter`): the footer opens with "Have a question?", so a
       button floating over that form asks for what the visitor already has.
       It slides down rather than blinking out, and `visibility` takes it off
       the tap layer for good — `pointer-events` alone would leave it focusable.
       Only written here: above 768 the button stands in the page's flow and
       must never disappear. */
    .product-hero__cta.is-hidden {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(20px);
        pointer-events: none;
    }

    .related__arrows {
        display: none;
    }
    .related__nav {
        margin-top: 15px;
    }
}

@media (max-width: 575px) {
    /* Same rhythm the article page uses on the 375 mockups */
    .catalog-page .block,
    .product-page .block {
        margin-bottom: 120px;
    }
    body.archive .catalog-page .have-question.block {
        margin-bottom: 120px;
    }
    .product-hero {
        margin-top: 15px;
        margin-bottom: 120px;
    }
}

/* ==================
 * Thank You page (Figma 1002:14952 desktop / 1002:14939 mobile)
 * ==================
 * The 404 page's shape carrying a different message, so the geometry is the
 * heroes' — a 1320x745 frame at `--radius-45` with the copy over its lower
 * fade. It keeps its own classes rather than borrowing `.error-404__*`: that
 * page has a code, two buttons and a type scale of its own.
 */
.thank-you.block {
    margin-bottom: 75px;
}
.thank-you__frame {
    width: 100%;
    aspect-ratio: 1320 / 745; /* mockup 1320x745 — fluid, no fixed height */
}
.thank-you__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.thank-you__gradient {
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 41, 0) 0%, rgba(0, 20, 41, 0.8) 100%);
}
.thank-you__box {
    gap: 15px;
    max-width: 790px; /* 60 padding + 670 copy + 60 padding */
    padding: 60px;
}
.thank-you__title {
    margin: 0;
    color: var(--white);
    /* 36 on the 375 mockup, 69 on the 1440 one — neither end is a token. */
    font-size: clamp(36px, calc(24.38px + 3.1vw), 69px);
    font-weight: 500;
    line-height: 100%;
    text-transform: capitalize;
}
.thank-you__subtitle {
    margin: 0;
    color: var(--white);
    font-size: var(--fs-h4); /* fluid 26 -> 35 (both mockups) */
    font-weight: 400;
    line-height: 100%;
}
.thank-you__desc {
    color: var(--white);
    font-size: var(--fs-text); /* fluid 16 -> 18 */
    font-weight: 400;
    line-height: 130%;
}
.thank-you__desc p {
    margin: 0;
}
.thank-you__desc p + p {
    margin-top: 15px;
}
.thank-you__actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.thank-you__button {
    min-height: 54px;
}
.thank-you__button-icon {
    flex: none;
    width: 24px;
    height: auto;
}

@media (max-width: 992px) {
    .thank-you__box {
        padding: 45px;
    }
}

/* It borrows the heroes' geometry, so it borrows their step too: 4:3 between
   the two mockups rather than the portrait held at tablet widths. */
@media (max-width: 768px) {
    .thank-you__frame {
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-30);
    }
}

/* Mobile mockup 1002:14939: a 345x670 portrait frame, the copy 15px in from
   its edges, and the type dropping to 36 / 26 / 16 with room to wrap. */
@media (max-width: 575px) {
    .thank-you__frame {
        aspect-ratio: 345 / 670;
        max-height: 670px; /* the ratio alone reaches 1058 by 575 */
        border-radius: var(--radius-30);
    }
    .thank-you__box {
        max-width: 100%;
        padding: 15px;
    }
    .thank-you__title,
    .thank-you__subtitle {
        line-height: 125%;
    }
    .thank-you__title {
        text-transform: none;
    }
    .thank-you__desc {
        line-height: 125%;
    }
}

/* ==================
 * Mobile menu (Figma 979:4510 the bar, 270:554 the pages, 982:4727 / 982:4890
 * the catalog)
 * ==================
 * Two panels under the header bar, one per button: the catalog tree on the
 * left, the plain pages on the right. Both are widget areas, so everything
 * below styles what a Navigation Menu widget prints — `ul.menu`, `ul.sub-menu`,
 * `li.menu-item` — plus the toggle button `Vagoteq\MobileMenuWalker` writes
 * beside a link that has children.
 *
 * The desktop navigation is untouched: every rule here is scoped to
 * `.mobile-nav` or `.main-header__toggle`, both of which exist only on the
 * phone header, and the whole block is off above 992.
 */
.main-header__toggle,
.mobile-nav {
    display: none;
}

@media (max-width: 992px) {
    /* 40px controls in 10px of padding is the mockup's 60px bar. */
    .main-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .main-header__navigation {
        display: none;
    }
    .site-branding img {
        width: 188px;
        max-height: 40px;
        object-fit: contain;
    }

    .main-header__toggle {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;

        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border: 1px solid var(--second);
        color: var(--second);
        cursor: pointer;

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;

        -webkit-transition: var(--transition-02);
        -moz-transition: var(--transition-02);
        transition: var(--transition-02);
    }
    /* The open button is filled — the same red the panel's links are drawn in. */
    .main-header__toggle[aria-expanded="true"] {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--white);
    }
    .main-header__toggle-icon {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
    .main-header__toggle-icon--open,
    .main-header__toggle[aria-expanded="true"] .main-header__toggle-icon--closed {
        display: none;
    }
    .main-header__toggle[aria-expanded="true"] .main-header__toggle-icon--open {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }

    /*
     * The panel covers the page under the bar. While one is open the header is
     * pinned to the top and the page behind it does not scroll, so the panel
     * always starts exactly under the bar — whatever the visitor had scrolled
     * to stays where it was.
     */
    body.has-mobile-nav {
        overflow: hidden;
    }
    body.has-mobile-nav .main-header {
        position: fixed;
        z-index: 100;
        top: 0;
        right: 0;
        left: 0;
        background: var(--white);
    }
    .mobile-nav {
        display: block;
        position: fixed;
        z-index: 90;
        top: 60px;
        right: 0;
        bottom: 0;
        left: 0;
        background: var(--white);
    }
    /* The catalog's own scroll box, so SimpleBar has an element to own — it
       sets `position: relative` on whatever it is given, and the panel above
       must stay fixed. The 15px is here rather than on the panel so the
       scrollbar can sit 5px from the screen edge, as the mockup draws it. */
    .mobile-nav__scroll {
        height: 100%;
        padding: 15px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* `[hidden]` is the browser's lowest-specificity rule and loses to the
       `display` above, so it needs saying again. */
    .mobile-nav[hidden] {
        display: none;
    }
    .mobile-nav ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .mobile-nav a {
        text-decoration: none;
    }

    /*
     * A row: the link takes the width, the button keeps its 40px box, and an
     * open sub-list wraps onto its own line under both. One `display: flex`
     * does all three, which is why the walker can put the button next to the
     * link and nothing needs a wrapper.
     */
    .mobile-nav .menu-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 15px 5px;
    }
    .mobile-nav__toggle {
        display: none; /* no script, no button — the sub-lists stay open */
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;

        width: 40px;
        height: 40px;
        padding: 0;
        background: var(--light);
        border: none;
        color: var(--second);
        cursor: pointer;

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    .mobile-nav.is-enhanced .mobile-nav__toggle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .mobile-nav__toggle-icon {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
    .mobile-nav__toggle-icon--open,
    .mobile-nav__toggle[aria-expanded="true"] .mobile-nav__toggle-icon--closed {
        display: none;
    }
    .mobile-nav__toggle[aria-expanded="true"] .mobile-nav__toggle-icon--open {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }

    /*
     * Catalog: red rows, each on a hairline, with the children indented under
     * the one that is open.
     */
    .mobile-nav--catalog ul.menu {
        gap: 15px;
    }
    .mobile-nav--catalog ul.menu > .menu-item {
        padding-bottom: 15px;
        border-bottom: 1px solid var(--second);
    }
    .mobile-nav--catalog ul.menu > .menu-item > a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 40px;
        color: var(--accent);
        font-size: 16px;
        line-height: 1.35;
    }
    .mobile-nav--catalog .sub-menu {
        flex: 0 0 100%;
    }
    .mobile-nav--catalog .sub-menu a {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 15px;
        color: var(--second);
        font-size: 14px;
        line-height: 1.35;
    }
    /* A third level, which no mockup has: same row, indented one step further,
       and its toggle is the bare chevron rather than the filled box. */
    .mobile-nav--catalog .sub-menu .sub-menu a {
        padding-left: 30px;
    }
    .mobile-nav--catalog .sub-menu .mobile-nav__toggle {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        background: transparent;
    }
    /* SimpleBar, as everywhere else the theme draws its own scrollbar: the
       track is always visible, 4px wide, 5px in from the panel's edge. */
    .mobile-nav .simplebar-track.simplebar-vertical {
        width: 4px;
        right: 5px;
        top: 15px;
        bottom: 15px;
        background: rgba(0, 13, 26, 0.1); /* the mockup's track; no token for it */
        border-radius: 10px;
    }
    .mobile-nav .simplebar-track.simplebar-horizontal {
        display: none; /* vertical only */
    }
    .mobile-nav .simplebar-scrollbar::before {
        left: 0;
        right: 0;
        background: var(--red20);
        border-radius: 10px;
    }
    .mobile-nav .simplebar-scrollbar.simplebar-visible::before {
        opacity: 1; /* solid — no fade */
    }

    /*
     * Pages: everything centred in a column, the language row and the call to
     * action under the links (Figma 270:554).
     */
    .mobile-nav--main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 15px 30px;
        text-align: center;
        overflow-y: auto;
    }
    .mobile-nav--main ul.menu {
        align-items: center;
        gap: 15px;
    }
    .mobile-nav--main .menu-item {
        justify-content: center;
    }
    .mobile-nav--main .menu-item a {
        padding: 10px 15px;
        color: var(--second);
        font-size: 16px;
        line-height: 1.35;
    }
    .mobile-nav--main .menu-item.current-menu-item > a,
    .mobile-nav--main .menu-item.current-menu-ancestor > a {
        color: var(--accent);
    }
    .mobile-nav__lang {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 5px 15px 15px;
    }
    .mobile-nav__lang-sep {
        align-self: stretch;
        width: 1px;
        background: var(--second);
    }
    .mobile-nav__lang-link {
        color: var(--second);
        font-size: 16px;
        line-height: 1.35;
    }
    .mobile-nav__lang-link.is-current {
        color: var(--accent);
    }
}

/* ==================
 * Sections rendered without their photo
 * ==================
 * Every mockup has a picture, but a field can be empty while a page is being
 * filled in, and losing a whole section — heading, intro, call to action —
 * because one image is missing is worse than the section looking plainer than
 * the mockup. The rule is: drop the field that is empty, keep the rest; only an
 * entirely empty section disappears.
 *
 * The frames below exist purely to hold an aspect ratio and give the copy
 * something to be positioned against. With no image there is nothing to
 * position against, so the frame collapses to its content, the copy leaves the
 * absolute layer (the `absolute left bottom` utilities are not printed by the
 * view in that case) and switches from white-over-photo to dark-on-page.
 *
 * Placed last in the file on purpose: the mobile rules for these boxes live in
 * media queries above, and media queries add no specificity — only source order
 * decides, so these have to come after to win at every width.
 */
.about-hero__frame--plain,
.contacts-hero__frame--plain,
.services-hero__frame--plain,
.vacancies-hero__frame--plain,
.thank-you__frame--plain {
    aspect-ratio: auto;
    max-height: none; /* the portrait cap belongs to the photograph, not to copy
                         standing on the page's own background */
}
.about-hero__frame--plain .about-hero__box,
.contacts-hero__frame--plain .contacts-hero__box,
.services-hero__frame--plain .services-hero__box,
.vacancies-hero__frame--plain .vacancies-hero__box,
.thank-you__frame--plain .thank-you__box {
    max-width: 100%;
    padding: 0;
}
.about-hero__frame--plain .about-hero__title,
.contacts-hero__frame--plain .contacts-hero__title,
.services-hero__frame--plain .services-hero__title,
.vacancies-hero__frame--plain .vacancies-hero__title,
.thank-you__frame--plain .thank-you__title {
    color: var(--accent);
}
.about-hero__frame--plain .about-hero__desc,
.contacts-hero__frame--plain .contacts-hero__desc,
.services-hero__frame--plain .services-hero__desc,
.vacancies-hero__frame--plain .vacancies-hero__desc,
.thank-you__frame--plain .thank-you__desc,
.thank-you__frame--plain .thank-you__subtitle {
    color: var(--black);
}

/* An article keeps its H1, its date, its category chips and its way back to
   the archive even before a cover is uploaded. The back button and the date
   were pinned to the cover's top corners; with no cover they become a row above
   the title block, and their `--white` surface — which is also the page colour —
   goes a shade darker so they still read as chips. */
.article-hero__media--plain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    aspect-ratio: auto;
    border-radius: 0;
}
.article-hero__media--plain .article-hero__back,
.article-hero__media--plain .article-hero__date,
.article-hero__media--plain .article-hero__info {
    position: static;
    width: auto;
    transform: none;
}
.article-hero__media--plain .article-hero__back,
.article-hero__media--plain .article-hero__date,
.article-hero__media--plain .article-hero__tag {
    background: var(--light);
    border-color: var(--light);
}
.article-hero__media--plain .article-hero__info {
    flex: 1 0 100%;
    align-items: flex-start;
    text-align: left;
}
.article-hero__media--plain .article-hero__tags {
    justify-content: flex-start;
}
.article-hero__media--plain .article-hero__title {
    color: var(--accent);
}
.article-hero__media--plain .article-hero__author {
    color: var(--black);
}

/* The office card overlaps the map; with no map it simply sits on the page,
   keeping the width it was designed at rather than stretching the row. */
.contacts-map__inner--plain .contacts-map__card {
    position: static;
    max-width: 420px;
}


/* ==================================================================
 * Motion — entrance reveals
 *
 * The animate.css idea, brought up to date. The first attempt drove these off
 * `animation-timeline: view()`, and it was the wrong mechanism: a view timeline
 * *scrubs* the animation against scroll position, so the element is only ever
 * as far through it as the scrollbar says. It never reads as an animation — it
 * reads as content that was simply already there. animate.css entrances are
 * timed, and that is the half that makes them land.
 *
 * So the trigger is scroll and the playback is a clock: `initReveals()` watches
 * with one IntersectionObserver, adds `.is-revealed` when the element is
 * properly on screen — not as its first pixel clears the bottom edge — and the
 * transition below plays at its own speed from there. Each element is
 * unobserved once it has fired, so nothing re-runs on the way back up.
 *
 * The hidden state is scoped to `html.motion-ready`, a class only that script
 * adds. No JavaScript, an error before it runs, or a visitor who asked for less
 * motion — and the rules never apply, so nothing can be left invisible. That is
 * the same guarantee the previous version made through `@supports`, kept.
 *
 * The travel is deliberately bigger than it was: 48px and a 6px blur, against
 * the 24px of the first pass, which finished while the element was still in the
 * bottom quarter of the screen and so was never actually seen.
 * ================================================================== */
:root {
    --reveal-duration: 0.75s;
    --reveal-stagger: 90ms;
}

html.motion-ready .reveal {
    opacity: 0;
    translate: 0 48px;
    scale: 0.97;
    filter: blur(6px);
}
/* The transition lives here, on the revealed state, and deliberately not on the
   rule above. `.reveal` is added by script after the element has already been
   laid out visible, so a transition on the base rule would animate the element
   *into* hiding — three quarters of a second of the page fading out before
   anything appears. Declared here, adding `.reveal` snaps to the hidden state
   in one frame and only the arrival is animated.
   `--reveal-i` is the element's index inside its own group, set by the script,
   so a row of cards arrives as a run rather than all at once. CSS can count
   siblings itself now (`sibling-index()`), but the index has to survive "Load
   more" appending to a list, and a value written once does that. */
html.motion-ready .reveal.is-revealed {
    transition:
        opacity var(--reveal-duration) var(--ease-reveal),
        translate var(--reveal-duration) var(--ease-reveal),
        scale var(--reveal-duration) var(--ease-reveal),
        filter var(--reveal-duration) var(--ease-reveal);
    transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
    opacity: 1;
    /* `none`, not a zeroed value: a settled `translate: 0 0` is still a
       transform, and a transform makes the element a containing block for any
       `position: fixed` descendant — the pinned aside columns, the phone's
       "Contact us" button, an opened vacancy sheet. */
    translate: none;
    scale: none;
    filter: none;
}

html.motion-ready .catalog__grid .reveal.is-revealed {
    transition: var(--transition-08);
}

html.motion-ready .reveal.is-revealed.product-card {
    border: 1px solid var(--white-true);
    transition: var(--transition-03);
}
html.motion-ready .reveal.is-revealed.product-card:hover {
    border-color: var(--accent);
}

/* Variants — drop one on anything, the way animate.css is used. */
html.motion-ready .reveal--fade {
    translate: none;
    scale: none;
    filter: none;
}
html.motion-ready .reveal--left {
    translate: -48px 0;
}
html.motion-ready .reveal--right {
    translate: 48px 0;
}
html.motion-ready .reveal--zoom {
    translate: none;
    scale: 0.92;
}
/* For headings: no blur, a longer throw, so the line lifts into place. */
html.motion-ready .reveal--rise {
    translate: 0 64px;
    scale: none;
    filter: none;
}

/* ==================
 * Motion — banners
 *
 * The banner photograph fades in, and it does it here rather than through the
 * reveal above. Everything in that system is hidden by `custom.js` on
 * DOMContentLoaded, which is *after* the browser has painted — and the banner
 * is the one picture on the page that is certainly already on screen by then
 * (it carries `fetchpriority="high"` for exactly that reason). Hiding it at
 * that moment is a blink: the photograph arrives, disappears, and comes back
 * animating. Declared in the stylesheet, the entrance starts from the first
 * paint and there is nothing to take away.
 *
 * It is also only opacity. The reveal's 0.92 scale and 6px blur on a
 * full-width photograph are what made that blink read as a glitch rather than
 * as motion; a banner is too big to be moved without the whole page appearing
 * to lurch.
 *
 * `both` is what keeps the picture from being visible for the frame before the
 * animation starts. No `motion-ready` gate is needed the way the reveals need
 * one — an animation that never runs leaves the element at its own styles,
 * which is the visible page.
 * ================== */
.banner,
.about-hero__frame,
.services-hero__frame,
.contacts-hero__frame,
.vacancies-hero__frame,
.category-hero__media,
.article-hero__media,
.standard-page__hero-media,
.thank-you__frame,
.error-404__hero {
    animation: banner-fade-in var(--reveal-duration) var(--ease-reveal) both;
}

@keyframes banner-fade-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner,
    .about-hero__frame,
    .services-hero__frame,
    .contacts-hero__frame,
    .vacancies-hero__frame,
    .category-hero__media,
    .article-hero__media,
    .standard-page__hero-media,
    .thank-you__frame,
    .error-404__hero {
        animation: none;
    }
}

/* A visitor who asked for less motion gets a static page, not a faster one.
   The script checks the same query and never adds `motion-ready`; this is the
   belt to that pair of braces. */
@media (prefers-reduced-motion: reduce) {
    html.motion-ready .reveal {
        opacity: 1;
        translate: none;
        scale: none;
        filter: none;
        transition: none;
    }
}

/* The legal links stand in the Contact info column, under the email row, on the
   desktop as well as on the phone. The nav is a child of that column now rather
   than a sibling of the grid, so it takes the column's own width and the 15px
   the column gaps its rows by, and all the desktop has to do is let it out of
   the display: none above. The phone keeps its own rules in responsive.css,
   hence the 769 floor: the mobile block stops at 768. */
@media (min-width: 769px) {
    .footer-legal {
        display: block;
    }
    /* Centred on the phone, where the block spans the screen; on the desktop it
       lines up with the column it sits in. */
    .footer-legal__title {
        text-align: left;
    }
    .footer-legal ul {
        justify-content: flex-start;
        align-items: flex-start;
    }
}

/* The language switcher is off in every widget area, at every width. */
.widget_polylang {
    display: none;
}

/* A banner slide whose photograph has not been uploaded yet.
 *
 * The copy stands *on* the picture — absolutely positioned, in white — so
 * without one it would be white on an empty box. It leaves the absolute layer,
 * the frame drops the ratio it holds for the photograph, and the type turns
 * dark on the page, which is the same bargain the heroes above make.
 *
 * Only the slide changes: it keeps the `position: relative` Swiper gives it, so
 * the arrows, the pager and every other slide are untouched. */
.banner__item:after,
.banner__item::after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: -webkit-linear-gradient(top, rgba(0, 20, 41, 0) 0%, rgba(0, 20, 41, 0.8) 100%);
    background: linear-gradient(180deg, rgba(0, 20, 41, 0) 0%, rgba(0, 20, 41, 0.8) 100%);
}
.banner__item--plain {
    aspect-ratio: auto;
    max-height: none;
}
.banner__item--plain .banner__box {
    position: static;
    max-width: 100%;
    padding: 30px 0;
}
.banner__item--plain .main-title {
    color: var(--accent);
}
.banner__item--plain .banner__desc {
    color: var(--black);
}

/* The banner's nav lies over the whole bottom of the slider — it is a
   full-width absolutely positioned block, and it is where the slide's own
   "Learn more" sits. Measured: `elementFromPoint` over the middle of that
   button answered `.swiper-button-area`, so the click never reached it.
 *
 * A higher z-index on the button cannot fix this. The copy lives inside
 * `.swiper-wrapper`, which carries `index-1` and therefore opens a stacking
 * context of its own: nothing inside it can rise above the `index-100` of a
 * sibling of that wrapper. What is wrong is not the order but the hit testing —
 * the nav is mostly empty space that still catches the pointer.
 *
 * So the box itself stops taking clicks and the three controls inside it take
 * them back. Scoped to the banner: this is the only slider whose nav stands
 * over its own copy. */
.banner .swiper-button-area {
    pointer-events: none;
}
.banner .swiper-button-area .swiper-button-prev,
.banner .swiper-button-area .swiper-button-next,
.banner .swiper-button-area .swiper-pagination {
    pointer-events: auto;
}