:root {
    --rr-theme-primary: #133C6C;
    --zm-navy: #133C6C;

    /* The template ships 24px; 22px keeps two-word card headings on one line. */
    --rr-fs-h6: 22px;
    --zm-navy-light: #35517F;
    --zm-light-bg: #F4F6F9;
    --zm-light-border: #DDE3EC;
    --zm-open-green: #1B7F4C;
    --zm-closed-red: #A3231C;
    --zm-facebook: #1877F2;
    --zm-facebook-dark: #145FC4;
    --zm-error: #C0392B;
    --zm-error-rgb: 192, 57, 43;
    --zm-error-bg: #FDF6F5;
    --zm-error-border: #E6C3BE;
    --zm-error-text: #8C2A1F;
}

.static-page-content h4 {
    font-size: 22px;
    margin-bottom: 6px;
}

.static-page-content h5 {
    font-size: 20px;
    margin-bottom: 4px;
}

.static-page-content a {
    color: var(--zm-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.static-page-content a:hover,
.static-page-content a:focus {
    color: var(--zm-navy-light);
}

.cc-pc-head-lang {
    font-size: 14px;
}

.about-us__socail {
    height: auto;
}

/* Social tiles carry each network's own brand colour */
.about-us__socail {
    background-color: var(--zm-facebook);
}

.about-us__socail a:hover {
    color: var(--rr-common-white);
}

.about-us__socail:hover {
    background-color: var(--zm-facebook-dark);
}

/**
 * Facebook carries its brand colour permanently rather than only on hover, so the
 * network is recognisable at a glance in the offcanvas menu and the footer.
 */
.offcanvas__social .header-top-socail-menu li:first-child a,
.header-top-socail-menu li:first-child a {
    background-color: var(--zm-facebook);
    color: var(--rr-common-white);
}

.offcanvas__social .header-top-socail-menu li:first-child a:hover,
.header-top-socail-menu li:first-child a:hover {
    background-color: var(--zm-facebook-dark);
    color: var(--rr-common-white);
}

.zm-footer-social a[aria-label="Facebook"] {
    background-color: var(--zm-facebook);
    border-color: var(--zm-facebook);
    color: var(--rr-common-white);
}

.zm-footer-social a[aria-label="Facebook"]:hover {
    background-color: var(--zm-facebook-dark);
    border-color: var(--zm-facebook-dark);
    color: var(--rr-common-white);
}

/* The anchor only covered the glyph, so the navy padding around it stayed dead.
   Dropping the tile's own padding lets each link fill the full width. */
.about-us__socail {
    padding: 0;
    gap: 0;
}

.about-us__socail a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
}

/* The signage sits right of centre, so the crop leans that way to keep it in frame */
.about-us__media img {
    object-position: 60% center;
}

.header__logo img,
.offcanvas__logo img,
.footer__logo img {
    width: auto;
    max-height: 72px;
}

@media (max-width: 575px) {
    .header-1 .header__logo img {
        max-width: none;
        max-height: 42px;
    }
}

/*
 * Header stays light on every page, including over the hero. The template's
 * transparent variant left the active link navy-on-photo, which was unreadable.
 */
/**
 * The template's glass header blurs whatever scrolls beneath it. That filter is
 * composited on its own layer, and on a slow scroll it lags a frame behind the
 * content, so a heading flashes above the menu before the blur repaints over it.
 * Our header is fully opaque, so the blur never showed anything anyway.
 */
#header-sticky {
    background-color: var(--zm-light-bg);
    box-shadow: 0 2px 4px rgba(19, 60, 108, 0.08);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/**
 * The header is already fixed at every scroll position, so going sticky only needs
 * to deepen the shadow. The template's fadeInDown keyframe started at zero opacity
 * and a negative offset, which read as the menu blinking out and dropping back in.
 */
#header-sticky.rr-sticky {
    animation: none;
    box-shadow: 0 4px 14px rgba(19, 60, 108, 0.12);
    transition: box-shadow 0.3s ease-out, background-color 0.3s ease-out;
}

#header-sticky .main-menu {
    border-right-color: var(--zm-light-border);
}

#header-sticky .main-menu ul li > a {
    color: var(--zm-navy);
}

#header-sticky .main-menu ul li > a:hover {
    color: var(--zm-navy-light);
}

#header-sticky .main-menu ul li.active > a {
    color: var(--zm-navy);
    font-weight: var(--rr-fw-bold);
}

#header-sticky .main-menu ul li > a::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 4px;
    background-color: var(--zm-navy);
    transform: scaleX(0);
    transition: transform 0.25s ease-out;
}

#header-sticky .main-menu ul li.active > a::after,
#header-sticky .main-menu ul li > a:hover::after {
    transform: scaleX(1);
}

/* The off-canvas panel parks off-screen to the right and widened the document,
   which showed as a horizontal scrollbar on tablets. It is fixed-positioned, so
   the clip has to happen on the root element rather than on body. */
html,
body {
    overflow-x: clip;
}

/* Anchor jumps must clear the fixed header, plus the gap zimmermann.js adds */
section[id] {
    scroll-margin-top: 160px;
}

@media (max-width: 767px) {
    section[id] {
        scroll-margin-top: 125px;
    }
}

#header-sticky .bar-icon span,
#header-sticky .header__hamburger .bar-icon span {
    background-color: var(--zm-navy);
}

/* The template hides the 6th menu item below 1199px, which drops "Kontakt"
   in the 992-1199px band where the desktop menu is still shown. */
@media (max-width: 1199px) {
    .header-1 .header__main .main-menu ul li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)) {
        display: inline-block;
    }

    .header-1 .header__main .main-menu ul li {
        margin-inline-end: 28px;
    }
}

.header__logo .logo-white {
    display: none;
}

.header__logo .logo-navy {
    display: block;
}

/* The header no longer overlaps the slide, so the padding only has to keep the
   copy clear of the top edge while the slide keeps its full height. */
.banner__space {
    padding-top: 190px;
    padding-bottom: 190px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .banner__space {
        padding-top: 135px;
        padding-bottom: 135px;
    }
}

@media (max-width: 767px) {
    .banner__space {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.banner__item-content {
    display: flex;
    align-items: center;
    min-height: 560px;
}

@media (max-width: 767px) {
    .banner__item-content {
        min-height: 360px;
    }
}

.footer__area-common.theme-bg-heading-primary {
    background-color: var(--zm-light-bg);
}

.footer__bottom-border {
    border-bottom-color: var(--zm-light-border);
}

.footer__content {
    border-bottom-color: var(--zm-light-border);
}

.footer__widget-title h6 {
    color: var(--zm-navy);
}

.footer__content p,
.footer__copyright p {
    color: #4A5568;
}

.footer__link ul li,
.footer__link ul li a,
.footer__contact ul li .text span,
.footer__copyright p a {
    color: var(--zm-navy);
}

.footer__contact ul li .text a {
    color: #4A5568;
}

.footer__link ul li a:hover,
.footer__contact ul li .text a:hover,
.footer__copyright p a:hover {
    color: var(--zm-navy-light);
}

/* Reviewers do not supply a photo, so initials stand in */
.zm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--zm-navy);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

/* The template pinned the percentage to the animated bar, which collided with the
   skill name before the animation ran. It now sits on the title row instead. */
.about-us .skill-one__progress-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.about-us .skill-one__progress-percent {
    font-family: var(--rr-ff-exo);
    font-weight: 400;
    color: var(--zm-navy);
}

.zm-lang-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 24px;
}

/**
 * Each flag owns a fixed box and scales only its image. Scaling the link itself
 * overflowed the gap and made hovering one flag appear to affect its neighbour.
 */
.zm-lang-switcher__link {
    display: inline-flex;
    width: 26px;
    height: 20px;
    padding: 0;
    opacity: 0.4;
    filter: grayscale(0.85);
    transition: opacity 0.2s ease-out, filter 0.2s ease-out;
}

.zm-lang-switcher__link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(19, 60, 108, 0.15);
    transition: transform 0.2s ease-out;
}

.zm-lang-switcher__link:hover {
    opacity: 0.85;
    filter: grayscale(0);
}

/* Full colour marks the current language; no ring, which read as a heavy border */
.zm-lang-switcher__link.is-active {
    opacity: 1;
    filter: grayscale(0);
}

.zm-lang-switcher__link.is-active img {
    transform: scale(1.1);
}

/* Hero titles ran to three lines at the template's 60px */
.banner__item-title {
    font-size: 44px;
    line-height: 56px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .banner__item-title {
        font-size: 38px;
        line-height: 48px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner__item-title {
        font-size: 32px;
        line-height: 42px;
    }
}

@media (max-width: 767px) {
    .banner__item-title {
        font-size: 26px;
        line-height: 34px;
    }
}

/*
 * The template tinted every hero photo orange to match its own accent colour and
 * stacked three separate layers to do it, which made the hero darker than every
 * other photographic section. One neutral scrim now carries the whole tint, set
 * to the same 0.5 the counters and testimonials use.
 */
.banner__item:after,
.banner__item::before {
    background: none;
}

.banner__item__left-bg,
.banner__item__right-bg {
    display: none;
}

/* The template desaturated the team photos and covered them in a heavy gradient.
   The gradient stays, but only low enough to keep the white captions legible. */
.our-team__item-media img {
    filter: none;
}

.our-team__item-media::before {
    background: linear-gradient(180deg, rgba(8, 10, 11, 0) 45%, rgba(8, 10, 11, 0.85) 100%);
}

/**
 * The van fleet sits in the lower half of the photo, so the section anchors the
 * background there instead of centring it, which cropped the vehicles away.
 */
.experience {
    background-size: cover;
    background-position: center 65%;
    padding: 120px 0;
}

@media (max-width: 991px) {
    .experience {
        background-position: center 70%;
        padding: 80px 0;
    }
}

/* The section subtitle is navy, which disappeared on the dark testimonials banner */
.happy-customer .section__subtitle {
    color: var(--rr-common-white);
    opacity: 0.85;
}

.zm-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.zm-rating__stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Partial fill renders the 4.7 honestly instead of rounding up to five stars */
.zm-rating__star {
    position: relative;
    display: inline-flex;
    width: 18px;
    height: 18px;
}

/* The empty part of a star sits on the dark banner, where 0.3 vanished entirely */
.zm-rating__star img {
    width: 18px;
    height: 18px;
    opacity: 0.45;
}

.zm-rating__star::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--zm-star-fill, 100%);
    overflow: hidden;
    background-image: url("../imgs/testimonial/star.svg");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: left center;
}

/* Cards stretched to equal height; the address wraps to two lines, the others do not */
.contact-us__info-item {
    height: 100%;
    margin-bottom: 0;
}

.contact-us__info-row {
    row-gap: 30px;
}

/* Bootstrap's .text-primary blue was hardcoded in the consent copy */
.link-navy {
    color: var(--zm-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-navy:hover {
    color: var(--zm-navy-light);
}

/* The copyright wrapped to a second line inside a half-width column */
.footer__bottom .footer__copyright p {
    font-size: 15px;
}

.zm-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zm-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--zm-light-border);
    border-radius: 50%;
    color: var(--zm-navy);
    font-size: 15px;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
}

.zm-footer-social a:hover {
    background-color: var(--zm-navy);
    border-color: var(--zm-navy);
    color: #fff;
}

/**
 * Floating labels for the contact form.
 *
 * The template relied on placeholders, which vanish as soon as a field is filled
 * in, leaving the reader without a name for what they typed. Each control keeps a
 * blank placeholder so `:placeholder-shown` can tell an empty field from a filled
 * one, and the label rides up out of the way once there is content or focus.
 */
.zm-field {
    position: relative;
}

.contact__form-input input.zm-field__control,
.contact__form-input textarea.zm-field__control {
    width: 100%;
    height: 68px;
    border: 1px solid var(--zm-light-border);
    border-radius: 4px;
    padding: 30px 16px 10px;
    background-color: var(--zm-light-bg);
    font-size: 16px;
    line-height: 24px;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
}

.contact__form-input textarea.zm-field__control {
    height: 190px;
    resize: vertical;
}

@media (max-width: 575px) {
    .contact__form-input textarea.zm-field__control {
        height: 160px;
    }
}

.zm-field__control:focus {
    outline: none;
    border-color: var(--zm-navy);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(19, 60, 108, 0.12);
}

/* At rest the label sits where the value will be, so it reads as the field's text */
.zm-field__label {
    position: absolute;
    top: 22px;
    left: 17px;
    margin: 0;
    color: #6C7A8C;
    font-size: 15px;
    line-height: 24px;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.15s ease-out, color 0.15s ease-out;
}

.zm-field__control:focus + .zm-field__label,
.zm-field__control:not(:placeholder-shown) + .zm-field__label {
    transform: translateY(-14px) scale(0.75);
}

.zm-field__control:focus + .zm-field__label {
    color: var(--zm-navy);
}

.zm-field__control.is-invalid {
    border-color: var(--zm-error);
    background-color: var(--zm-error-bg);
}

.zm-field__control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(var(--zm-error-rgb), 0.12);
}

.zm-field__control.is-invalid + .zm-field__label {
    color: var(--zm-error);
}

/* The Bootstrap alert read as a stock component next to the branded form */
.zm-form-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    border: 1px solid #BFE3CB;
    border-left: 3px solid #2E7D4F;
    border-radius: 4px;
    padding: 16px 20px;
    background-color: #F1F8F3;
    color: #1F5637;
    font-size: 15px;
    line-height: 22px;
}

.zm-form-notice--error {
    border-color: var(--zm-error-border);
    border-left-color: var(--zm-error);
    background-color: var(--zm-error-bg);
    color: var(--zm-error-text);
}

.zm-form-notice--error .zm-form-notice__icon {
    background-color: var(--zm-error);
}

.zm-form-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #2E7D4F;
    color: #fff;
}

/**
 * The template's overlays were tuned for stock photos with busy highlights. Ours
 * are already dark and low-contrast, so the tint buried them. These are the
 * lightest values that still keep the white headings legible over the artwork.
 */
/* One scrim value across every photographic section, so none reads darker */
.banner__item {
    background-color: rgba(8, 10, 11, 0.5);
}

.happy-customer::before {
    background-color: rgba(8, 10, 11, 0.5);
}

/*
 * The template leaves this background at its `0% 0%` default, which on a phone
 * crops a wide group photo to its left edge - one person, off to the side. The
 * team stands in the middle of the frame, so that is where the crop is anchored.
 */
.happy-customer {
    background-position: center;
}

/*
 * The slide keeps a fixed height while it stretches with the viewport, so on a
 * wide screen the template's `0% 0%` default holds the top of the photograph and
 * crops everything below it away. The subject of each slide sits in the middle
 * of the frame, so that is where the crop is anchored.
 */
.banner__item-bg {
    background-position: center;
}

/*
 * On the narrow desktop step the template drops the fixed width off the
 * thumbnail strip, so the bar it sits in grows wider than the viewport and
 * pushes the slider arrows off the left edge. Three thumbnails at their 100px
 * size here is what the bar has room for.
 */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .banner .gallery-thumbs {
        width: 302px;
    }
}

/*
 * The template pulls the last footer widget left to squeeze four columns into
 * the narrow desktop step. The footer stacks two columns wide there, so the pull
 * only knocks that widget out of line with the one above it.
 */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .footer__widget.footer__widget-item-4 {
        margin-left: 0;
    }
}

/**
 * The active thumbnail was covered by a full-strength navy multiply layer, which
 * stained the whole image blue. Nothing is drawn on top of the photograph now:
 * the inactive ones recede behind a scrim and lose their colour, so the current
 * slide stands out by being the only one at full strength.
 */
.banner .gallery-thumbs .swiper-slide::before {
    background: rgba(8, 10, 11, 0.4);
    mix-blend-mode: normal;
    border: 0;
    transition: background-color 0.3s ease-out;
}

.banner .gallery-thumbs .swiper-slide img {
    filter: grayscale(1);
    transition: filter 0.3s ease-out;
}

/* zimmermann.js sets is-current; Swiper's own active class lands on an
   off-screen duplicate once the strip loops */
.banner .gallery-thumbs .swiper-slide.is-current::before {
    background: rgba(8, 10, 11, 0);
}

.banner .gallery-thumbs .swiper-slide.is-current img {
    filter: grayscale(0);
}

/* The counters sat under an 86% black wash, which all but hid the van fleet */
.experience::before {
    opacity: 0.5;
}

/* The reviews are quoted from German; the note says so without competing with the name */
.zm-translation-note {
    font-style: italic;
    opacity: 0.75;
}

.zm-translation-note::before {
    content: "· ";
    font-style: normal;
}

/**
 * Body copy sat at #767676, which clears WCAG AA on white by a hair and drops
 * below it on the light grey sections. A darker neutral with a slight blue cast
 * ties the text to the brand navy and reads comfortably on both grounds.
 */
:root {
    --rr-text-body: #4F5B67;
}

/* Spans both columns so it introduces the section, not just the text side */
.zm-section-intro {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
    text-align: center;
}

@media (max-width: 767px) {
    .zm-section-intro {
        margin-bottom: 22px;
    }
}

/**
 * <picture> is inline by default, so it neither fills a sized container nor
 * inherits the layout rules the template writes against the image itself.
 * Making it a transparent box keeps the existing `.parent img` rules working.
 */
picture {
    display: contents;
}

.offcanvas__area {
    background-color: var(--rr-common-white);
    border-left-color: var(--zm-light-border);
    box-shadow: -8px 0 24px rgba(19, 60, 108, 0.12);
}

.offcanvas__top {
    border-bottom-color: var(--zm-light-border);
}

.offcanvas__area .offcanvas__title,
.offcanvas__area .offcanvas__social p,
.offcanvas__area .mean-nav ul li a {
    color: var(--zm-navy);
}

.offcanvas__area .mean-nav ul li a:hover,
.offcanvas__area .mean-nav ul li.active > a {
    color: var(--zm-navy-light);
}

.offcanvas__area .mean-nav ul li a {
    border-top-color: var(--zm-light-border);
}

.offcanvas__area .offcanvas-m-line {
    background-color: var(--zm-navy);
}

.offcanvas__area .mean-nav ul li > a.mean-expand i {
    color: var(--zm-navy);
}

.zm-map-consent {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 555px;
    padding: 30px;
    background-color: var(--zm-light-bg);
    border: 1px solid var(--zm-light-border);
    text-align: center;
}

.zm-map-consent__inner {
    max-width: 420px;
}

.zm-map-consent i {
    font-size: 42px;
    color: var(--zm-navy);
    margin-bottom: 20px;
}

.zm-map-consent__heading {
    color: var(--zm-navy);
    margin-bottom: 12px;
}

.zm-map-consent__text {
    margin-bottom: 24px;
}

.zm-map-consent__button {
    display: inline-block;
    padding: 12px 32px;
    border: 0;
    background-color: var(--zm-navy);
    color: var(--rr-common-white);
    transition: background-color 0.3s ease;
}

.zm-map-consent__button:hover {
    background-color: var(--zm-navy-light);
}

.zm-map-consent__address {
    margin: 24px 0 8px;
    font-style: normal;
}

.zm-map-consent__address > span {
    display: block;
}

.zm-map-consent__link {
    color: var(--zm-navy);
    text-decoration: underline;
}

@media (max-width: 575px) {
    .zm-map-consent {
        min-height: 420px;
        padding: 20px;
    }
}

/**
 * The template turns every link navy on hover, which is our brand colour on light
 * backgrounds but disappears against the near-black bar under the hero slider.
 */
.banner__bottom-title a:hover,
.banner__bottom-title a:focus {
    color: var(--rr-common-white);
    opacity: 0.75;
}

.zm-quote--clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.testimonial__item .zm-quote--expandable {
    padding-bottom: 0;
}

.zm-quote__toggle {
    margin: 12px 0 30px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--zm-navy);
    text-decoration: underline;
}

/**
 * The template's 120px section gap stacks with the next section's own
 * padding-top, which reads as a broken page rather than a pause.
 */
.testimonial__bottom-space {
    margin-bottom: 40px;
}

.testimonial__slider .swiper-slide {
    height: auto;
}

.testimonial__item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.testimonial__item-bottom {
    margin-top: auto;
}

/**
 * The template sizes project photos with `.latest-project__media img { width/height: 100% }`,
 * which an inline anchor between the two would break, so the lightbox link is a block.
 */
.latest-project__media .zm-lightbox {
    display: block;
    position: relative;
}

/**
 * magnific-popup ships z-index 1042/1043, which loses to the sticky header's
 * 9999: the header stayed clickable over an open lightbox and covered the close
 * button, which the image skin pins to the top edge.
 */
.mfp-bg {
    z-index: 10000;
}

.mfp-wrap {
    z-index: 10001;
}


/**
 * The magnifier badge: main.css whitens only `path` on hover, but the glyph's
 * ring is a `circle`, which left it navy on the near-black hover fill.
 */
.latest-project__media .icon svg [stroke="#133C6C"] {
    transition: stroke 300ms ease;
}

.latest-project__media .icon:hover svg [stroke="#133C6C"] {
    stroke: var(--rr-common-white);
}

/* The template fills the badge with near-black on hover; brand navy sits better
   against the photos and keeps the pair a straight inversion of the resting state. */
.latest-project__media .icon:hover {
    background-color: var(--zm-navy);
}

/**
 * magnific-popup draws its arrows as CSS border triangles. The hero slider's
 * long-shafted arrow is the one this site already uses, so the lightbox borrows it.
 *
 * Selectors keep the `button` element: magnific's own `button.mfp-arrow` sets the
 * `background` shorthand, which a bare class selector loses to and which resets
 * background-image to none.
 */
button.mfp-arrow::before,
button.mfp-arrow::after {
    display: none;
}

button.mfp-arrow {
    width: 72px;
    height: 72px;
    margin-top: -36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 19px;
    opacity: 0.85;
    transition: opacity 300ms ease;
}

button.mfp-arrow:hover,
button.mfp-arrow:focus {
    opacity: 1;
}

/**
 * magnific nudges the arrow 1px down while pressed by moving margin-top from
 * -55px to -54px, which assumes its own 110px arrow. Against the 72px arrow
 * here that same -54px is an 18px jump upwards, and `.mfp-arrow:active` outranks
 * a plain class, so the button selector has to restate the resting position.
 */
button.mfp-arrow:active {
    margin-top: -35px;
}

button.mfp-arrow-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='16' viewBox='0 0 27 16' fill='none'%3E%3Cpath d='M26 8L1 8' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.25 1L1 8L7.25 15' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

button.mfp-arrow-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='16' viewBox='0 0 27 16' fill='none'%3E%3Cpath d='M1 8L26 8' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.75 1L26 8L19.75 15' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/**
 * Hovering a team photo washed it near-black and lifted the caption 68px to clear
 * the social row - but no team member has social links, so it dimmed the portrait
 * to make room for nothing. The gradient that keeps the caption legible stays.
 */
.our-team__item:hover .our-team__item-media::before {
    opacity: 1;
    visibility: visible;
}

.our-team__item:hover .our-team__item-media::after {
    opacity: 0;
    height: 0;
}

.our-team__item:hover .our-team__item__text {
    transform: none;
}

.our-team__item:has(.our-team__item__socail):hover .our-team__item__text {
    transform: translate(0, -68px);
}


/**
 * The caption sat 4px under the photo, which reads as sitting on it: the image
 * carries 40px of border-box padding and the bar is pulled 36px back into it.
 * Widening the strip gives the title and counter their own band.
 */
img.mfp-img {
    padding-bottom: 76px;
}

.mfp-figure::after {
    bottom: 76px;
}

.mfp-bottom-bar {
    margin-top: -60px;
}

.mfp-title,
.mfp-counter {
    color: var(--rr-common-white);
    font-size: 15px;
    line-height: 24px;
}

/**
 * The preloader covered the first paint in near-black before a light page
 * appeared underneath it. It now carries the header's own background, and the
 * bouncing dots are already brand navy, so they stay legible on it.
 */
#preloader,
.preloader {
    background-color: var(--zm-light-bg);
}

/**
 * The dot container is not just a wrapper: it stretches to the full viewport and
 * paints its own #121212, so recolouring the preloader alone changed nothing.
 * Scoped to the page preloader, since the same spinner also sits on the form
 * overlay, where the dark scrim is deliberate.
 */
#preloader .sk-three-bounce {
    background-color: transparent;
}

/**
 * Opening times inside the contact card and the offcanvas panel. The day column is fixed
 * so the times line up across rows instead of drifting with the day names.
 */
.zm-opening-hours {
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 20px;
    justify-content: center;
    margin: 0;
    text-align: left;
}

.zm-opening-hours dt {
    font-weight: var(--rr-fw-sbold);
}

.zm-opening-hours dd {
    margin: 0;
    text-align: right;
}

/* A day that opens twice stacks its ranges, so the day name stays on the first line. */
.zm-opening-hours dd span {
    display: block;
}

/* The offcanvas panel reads as a column of text, so the pairs align left there. */
.zm-opening-hours--stacked {
    justify-content: start;
}

.offcanvas__hours-title {
    margin-bottom: 10px;
}

/**
 * The footer says whether the showroom is open right now and opens the full week
 * on click, so the common question is answered without leaving the page.
 */
.zm-hours-trigger {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    /* The siblings in this list are 14px links; `font: inherit` would take the parent's size. */
    font-size: 14px;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.zm-hours-trigger--open {
    color: var(--zm-open-green);
}

.zm-hours-dialog {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    padding: 30px 34px 34px;
    border-radius: 8px;
    background: var(--rr-common-white);
    box-shadow: 0 18px 40px -12px rgba(19, 60, 108, 0.35);
}

.zm-hours-dialog__title {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--zm-light-border);
}

.zm-opening-hours--dialog {
    justify-content: space-between;
    width: 100%;
    gap: 10px 20px;
}

/*
 * Today is the row a visitor is looking for, so it is the one set apart - by
 * weight alone. Colouring it navy read as a link in a list where nothing else
 * is clickable, next to the red that marks a closed day.
 */
.zm-opening-hours dt.is-today,
.zm-opening-hours dd.is-today {
    font-weight: var(--rr-fw-sbold);
}

.zm-opening-hours__closed {
    color: var(--zm-closed-red);
}

/* The inline skin keeps magnific's white 65%-opacity cross, invisible on a white dialog. */
/*
 * magnific anchors the close button to `.mfp-content`, which spans the whole
 * container. Without this the cross lands outside the dialog it belongs to,
 * floating on the overlay past the rounded corner.
 */
.zm-hours-popup .mfp-content {
    max-width: 420px;
    margin: 0 auto;
}

/*
 * One close button for every popup this site opens.
 *
 * magnific ships two different crosses: a 44px box for inline content, and for
 * images one stretched to `width: 100%` and right-aligned, which makes the whole
 * top edge of the photo a closing click - people aiming at the picture lose it.
 * Both are restated as the same 32px button with the glyph centred in it, so the
 * control means the same thing wherever it appears.
 */
.mfp-wrap button.mfp-close,
.mfp-image-holder button.mfp-close {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    opacity: 0.65;
    transition: opacity 300ms ease;
}

/*
 * The cross itself is a Font Awesome glyph the template draws in `::after` and
 * pushes 20px right and 25px up of its own button, so moving the button moved an
 * empty box while the mark stayed behind. Cleared here and centred in the button
 * it belongs to.
 */
.mfp-wrap button.mfp-close::after,
.mfp-image-holder button.mfp-close::after {
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    right: 0;
    margin-top: 0;
    font-size: 20px;
}

.mfp-wrap button.mfp-close:hover,
.mfp-wrap button.mfp-close:focus {
    opacity: 1;
}

/* Only the colour differs, because one sits on a white card and the other on a photo. */
.zm-hours-popup button.mfp-close {
    color: var(--rr-heading-primary);
}

/*
 * White alone is not enough over a photograph: half the pictures here are pale
 * marble, and the cross disappears into them. The disc keeps it readable on any
 * of them without darkening the image itself.
 */
.mfp-image-holder button.mfp-close {
    /* The image reserves a 40px strip above itself; a 32px button centres in it
       at 4px and so never lands on the photograph, however narrow the screen. */
    top: 4px;
    background: rgba(8, 10, 11, 0.45);
    color: var(--rr-common-white);
    opacity: 0.9;
}

/*
 * The offcanvas heading repeats the page's welcome line in a panel roughly a
 * third of the width, where the template's h4 size wrapped it onto three lines.
 */
.offcanvas__social .offcanvas__title {
    font-size: 24px;
    line-height: 1.35;
}

/* The social row followed the opening times with almost nothing between them. */
.offcanvas__social .header-top-socail-menu {
    margin-top: 34px;
}

/* In the contact card the trigger stands alone under the heading, so it centres. */
.zm-hours-trigger--card {
    margin: 0 auto;
    font-size: 16px;
    text-align: center;
}

/*
 * Both halves of the before/after slider have to render the photograph in the
 * same frame, otherwise the comparison shows two different parts of the room:
 * the template anchors the left layer to the image's left edge and the right
 * layer to its right, and `cover` scales by height. On a 375px phone that puts
 * a 549px-wide render inside a 330px container, so ~219px of the middle is
 * never visible on either side. Painting both layers on a pseudo-element as
 * wide as the container and pinned to its right edge makes the two renders
 * identical at every width and every handle position.
 *
 * The URL comes from the Blade view as `--zm-pic` rather than from main.js's
 * `data-background` handler, so a template update cannot change how the layer
 * is painted. Browsers without container queries fall back to the template's
 * own left/right anchoring.
 */
.filter__container .pic {
    background-image: var(--zm-pic);
}

@supports (container-type: inline-size) {
    .filter__container {
        container-type: inline-size;
    }

    .filter__container .pic {
        overflow: hidden;
        background-size: 0 0;
    }

    .filter__container .pic::before {
        content: "";
        position: absolute;
        inset: 0 0 0 auto;
        width: 100cqw;
        background-image: var(--zm-pic);
        background-size: cover;
        background-position: center;
    }
}

/*
 * The about column lost its skill bars, so the two paragraphs now carry the section on
 * their own; at the template's 16px they read as a caption next to a heading this size.
 */
.about-us__content .section__title-wrapper p {
    font-size: 18px;
    line-height: 1.65;
}