/* NGB homepage selling blocks — category tiles, featured machines, polovna teaser.
   Palette matches the rest of the site: navy #002145, gold #ECB62E, Montserrat. */

.ngb-block {
    --n-navy: #002145;
    --n-gold: #ECB62E;
    --n-line: #DDE4EE;
    --n-muted: #63738C;
    --n-soft: #F5F7FA;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    color: var(--n-navy);
    margin: 0 0 3.5rem;
}

/* ---------- section head ---------- */
.ngb-block__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 0 1.75rem;
}
.ngb-block__title {
    margin: 0;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--n-navy);
}
/* gold rule under the heading, the site's existing accent device */
.ngb-block__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 0.7rem;
    background: var(--n-gold);
}
.ngb-block__sub {
    margin: 0.75rem 0 0;
    max-width: 58ch;
    color: var(--n-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}
.ngb-block__all {
    flex: 0 0 auto;
    padding: 0.65rem 1.1rem;
    border: 1px solid var(--n-navy);
    color: var(--n-navy);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.ngb-block__all:hover { background: var(--n-navy); color: #fff; }

/* ---------- grids ---------- */
.ngb-grid { display: grid; gap: 1.15rem; }
.ngb-grid--tiles { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.ngb-grid--cards { grid-template-columns: repeat(4, 1fr); }

/* ---------- category tile ----------
   Square media on white: the artwork is cut-outs, so images are CONTAINED, never
   cropped. Gaps + a hairline border rather than edge-to-edge — without them the
   white image backgrounds would run together and the cards would vanish.
   No resting shadow; the border defines the card and the shadow is spent on
   signalling that the tile is clickable. */
.ngb-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    /* the page behind is white too, so this line is the only thing defining the
       card — a pale hairline simply disappears. Stepped up twice from #DDE4EE. */
    border: 1px solid #94A9C2;
    text-decoration: none;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ngb-tile:hover,
.ngb-tile:focus-visible {
    border-color: var(--n-navy);
    box-shadow: 0 12px 30px rgba(0, 33, 69, .11);
    transform: translateY(-3px);
}

.ngb-tile__media {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    padding: .75rem .75rem .25rem;
    background: #fff;
}
.ngb-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .35s ease;
}
.ngb-tile:hover .ngb-tile__media img { transform: scale(1.04); }

.ngb-tile__label {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    padding: 0 1.2rem 1.25rem;
    margin-top: auto;
}
.ngb-tile__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--n-navy);
}
.ngb-tile__count {
    font-size: .8rem;
    font-weight: 500;
    color: var(--n-muted);
    font-variant-numeric: tabular-nums;
}

/* gold rule grows across the foot on hover — the site's accent device */
.ngb-tile::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--n-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.ngb-tile:hover::after { transform: scaleX(1); }

/* ---------- centred head + "see all" under the grid ---------- */
/* the hero runs full-bleed right up to this block, so it needs real air above it */
.ngb-block--cats {
    padding-top: 4.5rem;
    /* Break out of the boxed container: `width: min(1320px, 100%)` simply
       resolved to the parent's 1140px. Centring on the parent and translating
       back by half lets the grid exceed it without overflowing the page. */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(1560px, 94vw);
}
@media (max-width: 767px) { .ngb-block--cats { padding-top: 2.75rem; } }

.ngb-block--cats .ngb-block__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}
.ngb-block--cats .ngb-block__title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
.ngb-block--cats .ngb-block__title::after { margin-left: auto; margin-right: auto; }
.ngb-block--cats .ngb-block__sub { font-size: 1.05rem; max-width: 52ch; }

.ngb-block__more { display: flex; justify-content: center; margin-top: 2.25rem; }
.ngb-more {
    display: inline-block;
    padding: .9rem 2rem;
    border: 2px solid var(--n-navy);
    color: var(--n-navy);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}
.ngb-more:hover,
.ngb-more:focus-visible { background: var(--n-navy); color: #fff; }

/* ---------- product card ---------- */
.ngb-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--n-line);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ngb-card:hover {
    border-color: var(--n-navy);
    box-shadow: 0 10px 26px rgba(0, 33, 69, 0.1);
    transform: translateY(-3px);
}
.ngb-card__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--n-soft);
    overflow: hidden;
}
.ngb-card__media img {
    width: 100%; height: 100%;
    /* contain, not cover: Nova images are cut-outs that must not be cropped, and
       the Polovna imports are real photographs where cropping loses the machine.
       No blend mode — it would darken the photographed backgrounds. */
    object-fit: contain;
    display: block;
}
.ngb-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.05rem 1.15rem;
    flex: 1 1 auto;
}
.ngb-card__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--n-muted);
}
.ngb-card__title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--n-navy);
    /* keep every card the same height regardless of title length */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ngb-card__cta {
    margin-top: auto;
    padding-top: 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--n-navy);
    letter-spacing: 0.02em;
}
.ngb-card__cta::after {
    content: " →";
    color: var(--n-gold);
    transition: margin-left .18s ease;
    display: inline-block;
}
.ngb-card:hover .ngb-card__cta::after { margin-left: 4px; }

/* ---------- polovna teaser ---------- */
.ngb-block--polovna {
    background: var(--n-soft);
    padding: 2.5rem 2rem;
    border-left: 4px solid var(--n-gold);
}
.ngb-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.75rem;
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
}
.ngb-points li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--n-navy);
}
.ngb-points li::before {
    content: "";
    width: 8px; height: 8px;
    flex: 0 0 auto;
    background: var(--n-gold);
    transform: rotate(45deg);
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
    .ngb-grid--tiles,
    .ngb-grid--cards { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- mobile ----------
   A 1-column stack makes these sections endless to scroll past, so product rows
   become a horizontal snap rail and tiles drop to two per row. */
@media (max-width: 767px) {
    .ngb-block { margin-bottom: 2.5rem; }
    .ngb-block__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .ngb-block__all { align-self: stretch; text-align: center; }

    .ngb-grid--tiles { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .ngb-tile__label { padding: 1.1rem 0.75rem 0.8rem; }
    .ngb-tile__name { font-size: 0.85rem; }

    .ngb-grid--cards {
        display: flex;
        gap: 0.85rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* bleed to the screen edge so the rail reads as scrollable */
        margin-inline: -1rem;
        padding: 0.25rem 1rem 1rem;
        scrollbar-width: none;
    }
    .ngb-grid--cards::-webkit-scrollbar { display: none; }
    .ngb-card {
        flex: 0 0 68vw;
        max-width: 280px;
        scroll-snap-align: start;
    }

    .ngb-block--polovna { padding: 1.75rem 1rem; }
    .ngb-block--polovna .ngb-grid--cards { margin-inline: -1rem; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ngb-tile__media img,
    .ngb-card,
    .ngb-card__cta::after,
    .ngb-tile::after { transition: none; }
    .ngb-card:hover { transform: none; }
    .ngb-tile:hover .ngb-tile__media img { transform: none; }
}

/* ---------- entrance animation ----------
   Everything below is scoped to `.ngb-js`, a class an inline head script sets
   before first paint. Without JS nothing is ever hidden, so the page degrades to
   the finished state rather than to blank space. The classes are stripped once
   the animation has played (see home-blocks.js) — `animation-fill-mode: both`
   would otherwise latch the final transform and kill the tile's hover lift. */
@keyframes ngb-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

.ngb-js .ngb-anim .ngb-block__head,
.ngb-js .ngb-anim .ngb-tile,
.ngb-js .ngb-anim .ngb-block__more { opacity: 0; }

.ngb-js .ngb-anim.is-in .ngb-block__head,
.ngb-js .ngb-anim.is-in .ngb-tile,
.ngb-js .ngb-anim.is-in .ngb-block__more {
    animation: ngb-rise .55s cubic-bezier(.22, .61, .36, 1) both;
}

/* the tiles follow the heading, one after another */
.ngb-js .ngb-anim.is-in .ngb-tile:nth-child(1) { animation-delay: .10s; }
.ngb-js .ngb-anim.is-in .ngb-tile:nth-child(2) { animation-delay: .16s; }
.ngb-js .ngb-anim.is-in .ngb-tile:nth-child(3) { animation-delay: .22s; }
.ngb-js .ngb-anim.is-in .ngb-tile:nth-child(4) { animation-delay: .28s; }
.ngb-js .ngb-anim.is-in .ngb-block__more       { animation-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
    .ngb-js .ngb-anim .ngb-block__head,
    .ngb-js .ngb-anim .ngb-tile,
    .ngb-js .ngb-anim .ngb-block__more { opacity: 1; animation: none; }
}

/* ---------- stats band ----------
   Navy band, full-bleed. The background is painted with a border-image outset
   rather than width:100vw: 100vw includes the scrollbar on Windows and causes a
   horizontal scroll, whereas border-image outset is paint only and never widens
   the page. The figures themselves stay aligned to the content column. */
.ngb-stats {
    --s-navy: #002145;
    --s-gold: #ECB62E;
    position: relative;
    margin: 0 0 4rem;
    padding: 3.25rem 0;
    background: var(--s-navy);
    border-image: linear-gradient(var(--s-navy), var(--s-navy)) fill 0 / 0 / 0 100vmax;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    color: #fff;
}
.ngb-stats__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.ngb-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .25rem 1.5rem;
    text-align: center;
}
.ngb-stats__item + .ngb-stats__item { border-left: 1px solid rgba(236, 182, 46, .35); }
.ngb-stats__num {
    font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--s-gold);
    font-variant-numeric: tabular-nums;   /* digits keep their width while counting */
}
.ngb-stats__label {
    font-size: clamp(.85rem, .78rem + .3vw, 1.05rem);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

@media (max-width: 640px) {
    .ngb-stats { padding: 2.25rem 0; margin-bottom: 2.75rem; }
    .ngb-stats__item { padding: .25rem .5rem; gap: .4rem; }
    /* three across a phone: ~38px figures crowded "1000+" against the dividers */
    .ngb-stats__num { font-size: 1.75rem; }
    .ngb-stats__label { font-size: .72rem; letter-spacing: .03em; }
}

/* entrance: the three figures rise in turn (same keyframes as the grid) */
.ngb-js .ngb-anim .ngb-stats__item { opacity: 0; }
.ngb-js .ngb-anim.is-in .ngb-stats__item { animation: ngb-rise .55s cubic-bezier(.22, .61, .36, 1) both; }
.ngb-js .ngb-anim.is-in .ngb-stats__item:nth-child(2) { animation-delay: .12s; }
.ngb-js .ngb-anim.is-in .ngb-stats__item:nth-child(3) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .ngb-js .ngb-anim .ngb-stats__item { opacity: 1; animation: none; }
}

/* ---------- "Zašto N&G Bakery" ----------
   Light full-bleed ground to contrast with the navy stats band above it; painted
   with a border-image outset (paint only, never widens the page). The content
   breaks out of the boxed container the same way the category grid does, so the
   two sections share one column edge. */
/* ---------- Zašto izabrati N&G Bakery ----------
   Scroll-driven: the section is one viewport tall plus 45vh per extra step, and the
   panel inside is sticky, so scrolling through the section walks the steps. Below
   900px the height and the stickiness are dropped and it reads as a plain list. */
.ngb-why {
    --w-navy: #002145;
    --w-gold: #ECB62E;
    --w-muted: #55657C;
    --w-line: #94A9C2;
    position: relative;
    height: calc(100vh + (var(--why-steps, 5) - 1) * 45vh);
    background: #F4F6F9;
    border-image: linear-gradient(#F4F6F9, #F4F6F9) fill 0 / 0 / 0 100vmax;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
.ngb-why__sticky {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 88px 0;
}
.ngb-why__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: clamp(32px, 4vw, 80px);
    align-items: stretch;
}
.ngb-why__col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
}
.ngb-why__title {
    margin: 0;
    font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--w-navy);
    text-wrap: pretty;
}
/* every step's text is in the DOM; only the active one is shown */
.ngb-why__texts { margin: 22px 0 0; min-height: 7.5em; }
.ngb-why__p {
    display: none;
    margin: 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--w-muted);
    text-align: justify;
    text-wrap: pretty;
}
.ngb-why__p.is-on {
    display: block;
    animation: ngb-why-text 0.4s ease both;
}
@keyframes ngb-why-text {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.ngb-why__nav { display: flex; align-items: center; gap: 12px; }
.ngb-why__arrow {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid var(--w-navy);
    border-radius: 2px;
    background: transparent;
    color: var(--w-navy);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.ngb-why__arrow--filled { background: var(--w-navy); color: #fff; }
.ngb-why__arrow:hover,
.ngb-why__arrow:focus-visible { background: var(--w-navy); color: #fff; }
.ngb-why__arrow--filled:hover,
.ngb-why__arrow--filled:focus-visible { background: transparent; color: var(--w-navy); }

.ngb-why__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    /* the steps run out into the right gutter, as in the design */
    margin-right: calc(-1 * var(--ngb-gutter-r, 0px));
}
.ngb-why__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 84px;
    padding: 22px 28px;
    border: 1px solid var(--w-line);
    border-radius: 2px;
    background: #fff;
    color: var(--w-navy);
    font-family: inherit;
    font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    text-wrap: balance;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.2s ease;
}
.ngb-why__step::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--w-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.ngb-why__step:hover,
.ngb-why__step:focus-visible {
    /* background/colour restated: Astra's reset paints every button :hover #c36 */
    background: #fff;
    color: var(--w-navy);
    border-color: var(--w-navy);
    box-shadow: 0 12px 30px rgba(0, 33, 69, 0.11);
    transform: translateY(-3px);
}
.ngb-why__step[aria-current="true"]:hover,
.ngb-why__step[aria-current="true"]:focus-visible {
    background: var(--w-navy);
    color: #fff;
}
.ngb-why__step:hover::after,
.ngb-why__step:focus-visible::after,
.ngb-why__step[aria-current="true"]::after { transform: scaleX(1); }
.ngb-why__step[aria-current="true"] {
    background: var(--w-navy);
    border-color: var(--w-navy);
    color: #fff;
}
.ngb-why__num {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--w-gold);
}

@media (max-width: 900px) {
    .ngb-why { height: auto; }
    .ngb-why__sticky { position: static; min-height: 0; padding: 3.5rem 0; }
    .ngb-why__inner { grid-template-columns: 1fr; gap: 2rem; }
    .ngb-why__list { margin-right: 0; }
    .ngb-why__texts { min-height: 0; }
    .ngb-why__p { text-align: left; }
    .ngb-why__nav { display: none; }   /* the whole list is visible; arrows add nothing */
}
@media (prefers-reduced-motion: reduce) {
    .ngb-why__p.is-on { animation: none; }
}

/* ---------- O nama ----------
   Framed 4:3 photo with a navy place-caption on the left, copy on the right.
   Grey ground, continuing from the "Zašto" band above it. */
.ngb-about {
    --a-navy: #002145;
    --a-muted: #55657C;
    --a-line: #94A9C2;
    margin: 0;
    padding: 88px 0;
    background: #F4F6F9;
    border-image: linear-gradient(#F4F6F9, #F4F6F9) fill 0 / 0 / 0 100vmax;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
.ngb-about__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.ngb-about__media {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--a-line);
    background: #fff;
}
.ngb-about img.ngb-about__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
}
.ngb-about__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 12px 18px;
    background: var(--a-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ngb-about__title {
    margin: 0;
    font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--a-navy);
    text-wrap: balance;
}
.ngb-about__p {
    margin: 22px 0 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--a-muted);
    text-wrap: pretty;
}
.ngb-about__p + .ngb-about__p { margin-top: 14px; }
.ngb-about__btn {
    display: inline-block;
    margin-top: 32px;
    padding: 14px 32px;
    border: 2px solid var(--a-navy);
    border-radius: 2px;
    color: var(--a-navy);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.ngb-about__btn:hover,
.ngb-about__btn:focus-visible {
    background: var(--a-navy);
    color: #fff;
}

@media (max-width: 900px) {
    .ngb-about { padding: 3.5rem 0; }
    .ngb-about__inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 767px) {
    .ngb-about__title { text-align: center; }
}

/* ---------- 360° izložbeni salon ----------
   Full-width stage: a still from the tour under a charcoal scrim (same tone as
   the hero), copy and a gold button on the left. On click the tour iframe takes
   over the stage. The stage breaks out with 100vw; the half-scrollbar overshoot
   is clipped by the html:has() rule shared with the Zašto section. */
.ngb-salon {
    margin: 0 0 4.5rem;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
.ngb-salon__stage {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: clamp(460px, 72vh, 720px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #1b1d21;
    color: #fff;
}
/* three classes deep so `.elementor img { height:auto }` cannot shrink it */
.ngb-salon .ngb-salon__stage .ngb-salon__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 55%;
    display: block;
}
.ngb-salon__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(38, 39, 43, .84) 0%, rgba(38, 39, 43, .62) 42%, rgba(38, 39, 43, .18) 100%),
        linear-gradient(0deg, rgba(38, 39, 43, .45) 0%, rgba(38, 39, 43, 0) 45%);
}
.ngb-salon__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    width: min(1240px, 94vw);
    margin-inline: auto;
    padding: 56px 0;
}
/* the still beside the copy; clicking it starts the tour like the button does */
.ngb-salon__card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #1b1d21;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ngb-salon .ngb-salon__card .ngb-salon__cardimg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.ngb-salon__card:hover,
.ngb-salon__card:focus-visible {
    /* white rather than the navy of the light-background cards: navy is invisible here */
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}
.ngb-salon__card:hover .ngb-salon__cardimg { transform: scale(1.04); }
.ngb-salon__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #ECB62E;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.ngb-salon__card:hover::after,
.ngb-salon__card:focus-visible::after { transform: scaleX(1); }
.ngb-salon__title {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    text-wrap: balance;
}
.ngb-salon__text {
    margin: 19px 0 0;
    max-width: 40ch;
    font-size: clamp(0.9375rem, .85rem + .3vw, 1.0625rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
}
.ngb-salon__btn {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-top: 32px;
    padding: 16px 32px;
    background: #ECB62E;
    border: 2px solid #ECB62E;
    color: #002145;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}
.ngb-salon__btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.ngb-salon__btn:hover,
.ngb-salon__btn:focus-visible { background: #fff; border-color: #fff; color: #002145; }

/* live tour takes over the stage */
.ngb-salon__stage.is-live .ngb-salon__bg,
.ngb-salon__stage.is-live .ngb-salon__overlay,
.ngb-salon__stage.is-live .ngb-salon__content { display: none; }
.ngb-salon__frame {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    border: 0;
}
.ngb-salon__bar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 4;
    display: flex;
    gap: .5rem;
}
.ngb-salon__ctl {
    padding: .6rem 1rem;
    background: rgba(0, 33, 69, .9);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font: 600 .78rem/1 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}
.ngb-salon__ctl:hover,
.ngb-salon__ctl:focus-visible { background: #ECB62E; border-color: #ECB62E; color: #002145; }

@media (max-width: 767px) {
    .ngb-salon__stage { height: auto; min-height: clamp(420px, 68vh, 560px); align-items: flex-end; }
    .ngb-salon__content { grid-template-columns: 1fr; padding: 2.5rem 0; }
    .ngb-salon__overlay {
        background: linear-gradient(0deg, rgba(38, 39, 43, .9) 0%, rgba(38, 39, 43, .55) 55%, rgba(38, 39, 43, .15) 100%);
    }
    .ngb-salon__content { padding-bottom: 2.5rem; }
    .ngb-salon__btn { display: flex; justify-content: center; }
}

.ngb-js .ngb-anim .ngb-salon__content { opacity: 0; }
.ngb-js .ngb-anim.is-in .ngb-salon__content { animation: ngb-rise .6s cubic-bezier(.22, .61, .36, 1) .1s both; }
@media (prefers-reduced-motion: reduce) {
    .ngb-js .ngb-anim .ngb-salon__content { opacity: 1; animation: none; }
}

/* ---------- Brendovi ----------
   Light-grey band (border-image outset: paint only, never widens the page) so
   the white logo tiles read as tiles and the section separates from the white
   category grid above. Greyscale-until-hover only where hover exists; touch
   screens show the logos in colour. */
.ngb-brands {
    --b-navy: #002145;
    --b-gold: #ECB62E;
    --b-soft: #F4F6F9;
    --b-muted: #55657C;
    position: relative;
    margin: 0 0 4.5rem;
    padding: 4.5rem 0;
    background: var(--b-soft);
    border-image: linear-gradient(var(--b-soft), var(--b-soft)) fill 0 / 0 / 0 100vmax;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    color: var(--b-navy);
}
.ngb-brands__inner {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(1240px, 94vw);
}
.ngb-brands__head { margin: 0 0 2.25rem; text-align: center; }
.ngb-brands__title {
    margin: 0;
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--b-navy);
}
.ngb-brands__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .75rem auto 0;
    background: var(--b-gold);
}
.ngb-brands__sub {
    margin: 1rem auto 0;
    max-width: 52ch;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--b-muted);
}
.ngb-brands__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ngb-brands__grid > li { margin: 0; }
.ngb-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: .8rem 1rem;
    background: #fff;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* three classes deep so `.elementor img { height:auto }` cannot override */
.ngb-brands .ngb-brand .ngb-brand__logo {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    display: block;
    transition: filter .25s ease, opacity .25s ease;
}
@media (hover: hover) {
    .ngb-brands .ngb-brand .ngb-brand__logo { filter: grayscale(1); opacity: .7; }
    .ngb-brands .ngb-brand:hover .ngb-brand__logo,
    .ngb-brands .ngb-brand:focus-visible .ngb-brand__logo { filter: none; opacity: 1; }
    .ngb-brand:hover {
        transform: translateY(-3px);
        border-color: #C9D4E2;
        box-shadow: 0 10px 24px rgba(0, 33, 69, .10);
    }
}
.ngb-brand:focus-visible { outline: 2px solid var(--b-navy); outline-offset: 2px; }

@media (max-width: 1024px) { .ngb-brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .ngb-brands { padding: 3rem 0; }
    .ngb-brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
    .ngb-brand { padding: .5rem .6rem; }
}
@media (max-width: 480px) { .ngb-brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* entrance: heading, then the logos in reading order */
.ngb-js .ngb-anim .ngb-brands__head,
.ngb-js .ngb-anim .ngb-brands__grid > li { opacity: 0; }
.ngb-js .ngb-anim.is-in .ngb-brands__head,
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li { animation: ngb-rise .5s cubic-bezier(.22, .61, .36, 1) both; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(1) { animation-delay: 0.13s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(2) { animation-delay: 0.18s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(3) { animation-delay: 0.23s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(4) { animation-delay: 0.28s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(5) { animation-delay: 0.33s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(6) { animation-delay: 0.38s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(7) { animation-delay: 0.43s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(8) { animation-delay: 0.48s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(9) { animation-delay: 0.53s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(10) { animation-delay: 0.58s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(11) { animation-delay: 0.63s; }
.ngb-js .ngb-anim.is-in .ngb-brands__grid > li:nth-child(12) { animation-delay: 0.68s; }
@media (prefers-reduced-motion: reduce) {
    .ngb-js .ngb-anim .ngb-brands__head,
    .ngb-js .ngb-anim .ngb-brands__grid > li { opacity: 1; animation: none; }
}


/* ---------- align homepage sections with the header ----------
   The header content spans 95% of the page on desktop (2.5% each side) and
   5% each side on phones. These sections take exactly those edges, so
   every left edge sits under the logo and every right edge under the search
   icon. --ngb-page-w is the page width WITHOUT the scrollbar (set by
   home-blocks.js); 100vw includes it and would be ~8px off on Windows. */
:root { --ngb-l: .025; --ngb-r: .025; }
@media (max-width: 767px) { :root { --ngb-l: .05; --ngb-r: .05; } }

.ngb-block--cats,
.ngb-brands__inner,
.ngb-why__inner,
.ngb-about__inner {
    width: calc(var(--ngb-page-w, 100vw) * (1 - var(--ngb-l) - var(--ngb-r)));
    transform: translateX(calc(-50% + var(--ngb-page-w, 100vw) * (var(--ngb-l) - var(--ngb-r)) / 2));
}
/* the Zašto photo still bleeds off the right edge of the screen */
.ngb-why__media { margin-right: calc(var(--ngb-page-w, 100vw) * var(--ngb-r) * -1); }
@media (max-width: 900px) {
    .ngb-why__media {
        margin-left:  calc(var(--ngb-page-w, 100vw) * var(--ngb-l) * -1);
        margin-right: calc(var(--ngb-page-w, 100vw) * var(--ngb-r) * -1);
    }
}

/* ngb-why: centred head on phones — heading, gold rule and intro line */
@media (max-width: 767px) {
    .ngb-why__head { text-align: center; }
    .ngb-why__title::after { margin-left: auto; margin-right: auto; }
    .ngb-why__intro { margin-left: auto; margin-right: auto; }
}

/* ngb-about: centred heading on phones (heading + gold rule; body text stays left) */
@media (max-width: 767px) {
    .ngb-about__title { text-align: center; }
    .ngb-about__title::after { margin-left: auto; margin-right: auto; }
}

/* ---------- ngb-akcija: featured-brand promo band ----------
   Designer spec: two panels, copy 5fr / composition 7fr, both navy, the band
   bleeding to the viewport edges while its content keeps the page gutters.
   The bleed uses the same border-image trick as .ngb-stats. */
.ngb-akcija {
    --a-navy: #002145;
    --a-gold: #ECB62E;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    /* no bottom margin: the featured rail below is part of the same promo, and
       supplies the 40px the design puts between them */
    margin: 0;
    background: var(--a-navy);
    border-image: linear-gradient(var(--a-navy), var(--a-navy)) fill 0 / 0 / 0 100vmax;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
.ngb-akcija__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 3.5rem 5% 3.5rem 0;
    color: #fff;
}
.ngb-akcija__tag {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 2px;
    background: var(--a-gold);
    color: var(--a-navy);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ngb-akcija__title {
    margin: 20px 0 0;
    font-size: clamp(1.625rem, 1rem + 1.8vw, 2.375rem);
    font-weight: 700;
    line-height: 1.12;
    color: #fff;
    text-wrap: balance;
}
.ngb-akcija__p {
    margin: 1rem 0 0;
    max-width: 40ch;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.ngb-akcija__btn {
    margin-top: 1.75rem;
    padding: 14px 32px;
    border: 2px solid var(--a-gold);
    border-radius: 2px;
    background: var(--a-gold);
    color: var(--a-navy);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ngb-akcija__btn:hover,
.ngb-akcija__btn:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--a-navy);
}
.ngb-akcija__media {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 2.25rem 0 1.75rem 4%;
    overflow: hidden;
}
/* the element selector is deliberate: Elementor's `.elementor img { height:auto }`
   outranks a lone class, so the logo needs the extra specificity to keep its height */
.ngb-akcija img.ngb-akcija__logo {
    display: block;
    align-self: flex-end;
    height: 44px;
    width: auto;
}
.ngb-akcija img.ngb-akcija__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}

@media (max-width: 900px) {
    .ngb-akcija { grid-template-columns: minmax(0, 1fr); }
    .ngb-akcija__text { padding: 3rem 0 2rem; }
    .ngb-akcija__media { padding: 0 0 2.5rem; }
    .ngb-akcija img.ngb-akcija__img { max-height: 300px; }
}

/* ---------- ngb-feat: featured machines, horizontal drag-scroller ----------
   Spec: cards sized to 3.4 per view so the next one peeks; snap, hidden
   scrollbar, grab cursor. Works without JS — the script only adds dots,
   drag-to-scroll and the auto-advance. */
.ngb-feat {
    --f-navy: #002145;
    --f-gold: #ECB62E;
    --f-line: #B5C6DA;
    --f-muted: #63738C;
    margin: 0 0 4rem;
    padding: 2.5rem 0 1rem;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
.ngb-feat__track {
    display: flex;
    align-items: stretch;
    gap: 24px;
    /* 2px of inline padding, matched by scroll-padding: without it a snapped card's
       1px border sits exactly on the clip edge and rounds out of view.
       The vertical padding keeps the hover lift and shadow from being clipped. */
    padding: 8px 2px 24px;
    scroll-padding-inline: 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.ngb-feat__track::-webkit-scrollbar { display: none; }
.ngb-feat__track[data-drag="1"] {
    cursor: grabbing;
    scroll-snap-type: none;
}
/* a drag must not fire the card's link */
.ngb-feat__track[data-drag="1"] .ngb-feat__card { pointer-events: none; }

.ngb-feat__card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 72px) / 4);
    min-width: 0;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--f-line);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ngb-feat__card:hover,
.ngb-feat__card:focus-visible {
    border-color: var(--f-navy);
    box-shadow: 0 12px 30px rgba(0, 33, 69, 0.11);
    transform: translateY(-3px);
}
/* gold bar growing from the left along the bottom edge — the site-wide card tell */
.ngb-feat__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--f-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.ngb-feat__card:hover::after,
.ngb-feat__card:focus-visible::after { transform: scaleX(1); }

.ngb-feat__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
}
.ngb-feat img.ngb-feat__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}
.ngb-feat__card:hover img.ngb-feat__img { transform: scale(1.04); }

.ngb-feat__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 22px 20px 30px;
    text-align: center;
}
.ngb-feat__name {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--f-navy);
    text-wrap: balance;
}
.ngb-feat__cat {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--f-muted);
}

.ngb-feat__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}
.ngb-feat__dots:empty { display: none; }
.ngb-feat__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid var(--f-navy);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.ngb-feat__dot:hover,
.ngb-feat__dot:focus-visible { background: transparent; transform: scale(1.2); }
.ngb-feat__dot[aria-current="true"]:hover,
.ngb-feat__dot[aria-current="true"]:focus-visible { background: var(--f-navy); }
.ngb-feat__dot[aria-current="true"] { background: var(--f-navy); }

@media (max-width: 1200px) {
    .ngb-feat__card { flex: 0 0 calc((100% - 48px) / 3); }
}
@media (max-width: 900px) {
    .ngb-feat__card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
    .ngb-feat__card { flex: 0 0 82%; }
    .ngb-feat__name { font-size: 16px; }
}

/* Astra's reset paints button:focus #c36, which sticks after a mouse click.
   Restore each button's resting look for focus-without-focus-visible, so only
   keyboard focus and real hover change anything. */
.ngb-why__arrow:focus:not(:focus-visible):not(:hover) {
    background: transparent;
    color: var(--w-navy);
}
.ngb-why__arrow--filled:focus:not(:focus-visible):not(:hover) {
    background: var(--w-navy);
    color: #fff;
}
.ngb-why__step:focus:not(:focus-visible):not(:hover) {
    background: #fff;
    color: var(--w-navy);
    border-color: var(--w-line);
    box-shadow: none;
    transform: none;
}
.ngb-why__step[aria-current="true"]:focus:not(:focus-visible):not(:hover) {
    background: var(--w-navy);
    color: #fff;
    border-color: var(--w-navy);
}
.ngb-feat__dot:focus:not(:focus-visible):not(:hover) {
    background: transparent;
    transform: none;
}
.ngb-feat__dot[aria-current="true"]:focus:not(:focus-visible):not(:hover) {
    background: var(--f-navy);
}

/* ---------- Naši klijenti: logo marquee ----------
   The list is duplicated in the markup and the track slides exactly half its own
   width (plus half a gap), which is what makes the loop seamless. Pure CSS, so it
   runs without JS; hover pauses it and reduced-motion stops it entirely. */
.ngb-kli {
    --k-navy: #002145;
    --k-gold: #ECB62E;
    --k-muted: #55657C;
    --k-bg: #F4F6F9;
    margin: 0;
    padding: 64px 0 80px;
    /* no overflow:hidden here — it would clip the rail's break-out to full page
       width; the rail clips itself instead */
    background: var(--k-bg);
    border-image: linear-gradient(var(--k-bg), var(--k-bg)) fill 0 / 0 / 0 100vmax;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
.ngb-kli__head { margin-bottom: 44px; text-align: center; }
.ngb-kli__title {
    margin: 0;
    font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--k-navy);
}
.ngb-kli__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 12px auto 0;
    background: var(--k-gold);
}
.ngb-kli__sub {
    margin: 16px auto 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--k-muted);
}

/* the rail runs the full width of the page, not just the content column.
   --ngb-page-w is the viewport minus the scrollbar, so this can't overshoot the
   way 100vw does; the clip on <html> is the belt-and-braces for the fallback. */
.ngb-kli__marquee {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: var(--ngb-page-w, 100vw);
    overflow: hidden;
}
html:has(.ngb-kli),
html:has(.ngb-salon) { overflow-x: clip; }
/* the track fades out at both edges instead of being cut off */
.ngb-kli__marquee::before,
.ngb-kli__marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(40px, 8vw, 140px);
    pointer-events: none;
}
.ngb-kli__marquee::before { left: 0; background: linear-gradient(90deg, var(--k-bg), rgba(244, 246, 249, 0)); }
.ngb-kli__marquee::after { right: 0; background: linear-gradient(270deg, var(--k-bg), rgba(244, 246, 249, 0)); }

.ngb-kli__track {
    display: flex;
    gap: 18px;
    width: max-content;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    animation: ngb-marquee 38s linear infinite;
}
.ngb-kli__marquee:hover .ngb-kli__track { animation-play-state: paused; }
@keyframes ngb-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 9px)); }
}
.ngb-kli__tile {
    display: flex;
    flex: 0 0 clamp(180px, 16vw, 220px);
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: 18px 22px;
    background: #fff;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.ngb-kli__tile:hover {
    box-shadow: 0 10px 26px rgba(0, 33, 69, 0.12);
    transform: translateY(-4px);
}
.ngb-kli img.ngb-kli__img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 96px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.ngb-kli__tile:hover img.ngb-kli__img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .ngb-kli__track { animation: none; }
}

/* ---------- Kontakt ----------
   Navy band, centred uppercase heading, one white card holding the map and the
   three columns. Replaces the pair of Elementor sections that shipped a desktop
   and a mobile copy of the same content. */
.ngb-kontakt {
    --c-navy: #002145;
    --c-gold: #ECB62E;
    --c-text: #666;
    /* the gap lives on the flex container: a margin on the heading gets zeroed by
       the theme's heading reset, a flex gap cannot be */
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 4vw, 72px);
    margin: 0;
    padding: 64px 0 80px;
    background: var(--c-navy);
    border-image: linear-gradient(var(--c-navy), var(--c-navy)) fill 0 / 0 / 0 100vmax;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
.ngb-kontakt__title {
    margin: 0;
    font-size: clamp(1.375rem, 0.9rem + 1.3vw, 1.875rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}
.ngb-kontakt__card { background: #fff; }
.ngb-kontakt__map {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
}
.ngb-kontakt__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
    padding: 44px 40px 50px;
    text-align: center;
}
.ngb-kontakt__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.ngb-kontakt__icon { color: var(--c-gold); line-height: 0; }
.ngb-kontakt__icon svg { display: block; }
.ngb-kontakt__sub {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text);
}
.ngb-kontakt__p {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--c-text);
}
.ngb-kontakt__p strong { font-weight: 700; }
.ngb-kontakt__p a {
    color: inherit;
    text-decoration: none;
}
.ngb-kontakt__p a:hover,
.ngb-kontakt__p a:focus-visible {
    color: var(--c-navy);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .ngb-kontakt { padding: 3rem 0 3.5rem; }
    .ngb-kontakt__map { height: 340px; }
    .ngb-kontakt__cols { padding: 2rem 1.25rem 2.25rem; gap: 2rem; }
}

/* ---------- back to top ---------- */
.ngb-totop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    padding: 0;
    background: #ECB62E;
    color: #002145;
    box-shadow: 0 8px 24px rgba(0, 20, 45, 0.28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, background-color 0.18s ease;
}
.ngb-totop[data-show="1"] { opacity: 1; visibility: visible; transform: none; }
.ngb-totop:hover,
.ngb-totop:focus-visible { background: #fff; color: #002145; }
.ngb-totop:focus:not(:focus-visible):not(:hover) { background: #ECB62E; color: #002145; }
.ngb-totop svg { display: block; width: 20px; height: 20px; }
@media (max-width: 767px) {
    .ngb-totop { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}