/* ==========================================================================
   Banden Service Veenendaal — L3 brand layer (dark)
   Sits on top of Crafto L1 + logistics L2. The brand lives only here.
   Brand blue measured from the client's logo (#2EA3E0 range); chrome = logo silver.
   Responsive sizes are tokens on :root (breakpoint values directly below it),
   so each component has one rule instead of a rule per breakpoint.
   ========================================================================== */

@font-face {
    font-family: "Urbanist";
    src: url("../fonts/urbanist/urbanist-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Urbanist";
    src: url("../fonts/urbanist/urbanist-latin-ext.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
/* Iconsmind subset (6 glyphs, 2 KB) instead of Crafto's 1.1 MB icomoon.woff — regenerate with build/iconsmind_subset.py */
@font-face {
    font-family: "bsv-iconsmind";
    src: url("../fonts/bsv-iconsmind.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    --alt-font: "Urbanist", system-ui, sans-serif;
    --primary-font: "Urbanist", system-ui, sans-serif;
    --base-color: #2ea3e0;
    --bsv-blue-deep: #1677b3;
    --dark-gray: #12151a;
    --black: #0b0d10;
    --bsv-surface: #171b21;
    --bsv-text: #b9c0ca;
    --light-gray: #b9c0ca;
    --medium-gray: #8a929d;
    --bsv-chrome: linear-gradient(180deg, #ffffff 0%, #d9dee5 45%, #8e98a6 55%, #e8ecf1 100%);
    /* footer text: logistics sets this to white at 40% (3.8:1 on --black); solid grey passes AA (6.2:1) */
    --aluminium-gray: #8a929d;

    /* touch targets >= 44px (FE Gate S10): extra hit area that does not move the layout */
    --bsv-hit: 17px;
    --bsv-hit-box: 11px;

    /* responsive sizes, desktop values */
    --bsv-hero-h: 340vh;
    --bsv-hero-pt: 140px;
    --bsv-hero-row-pb: 120px;
    --bsv-hero-row-align: center;
    --bsv-hero-title-fs: clamp(2.8rem, 4.6vw, 4.8rem);
    --bsv-hero-title-lh: 1.02;
    --bsv-hero-shade:
        linear-gradient(270deg, rgba(11, 13, 16, .9) 0%, rgba(11, 13, 16, .55) 38%, rgba(11, 13, 16, 0) 62%),
        linear-gradient(0deg, rgba(11, 13, 16, .85) 0%, rgba(11, 13, 16, 0) 28%);
    --bsv-page-title-minh: 560px;
    --bsv-page-title-pt: 136px;
    --bsv-reviews-py: 130px;
    --bsv-body-pb: 0px;
    --bsv-logo-h: 44px;
    --bsv-footer-logo-h: 54px;
    --bsv-cue-display: flex;
    --bsv-cue-left: 26px;
    --bsv-cue-bottom: 40px;
    --bsv-cue-line-h: 72px;
    --bsv-badge-size: 168px;
    --bsv-badge-icon: 40px;
    --bsv-badge-intro-r: -40px;
    --bsv-badge-intro-b: -40px;
    --bsv-badge-velgen-r: -56px;
    --bsv-badge-velgen-b: 64px;
}
@media (max-width: 1199px) {
    :root { --bsv-badge-intro-r: 10px; --bsv-badge-intro-b: -30px; --bsv-badge-velgen-r: 20px; --bsv-badge-velgen-b: -50px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    :root { --bsv-logo-h: 36px; }
}
@media (max-width: 991px) {
    :root {
        --bsv-hero-h: auto; /* static poster, no scroll effect (D-019) */
        --bsv-cue-display: none; /* no scroll effect on phones/tablets: no scroll cue either */
        --bsv-hero-pt: 96px;
        --bsv-hero-row-pb: 96px;
        --bsv-hero-row-align: flex-end;
        --bsv-hero-title-fs: clamp(2.6rem, 6vw, 5.4rem);
        --bsv-hero-shade: linear-gradient(0deg, rgba(11, 13, 16, .95) 0%, rgba(11, 13, 16, .6) 55%, rgba(11, 13, 16, .3) 100%);
        --bsv-page-title-minh: 460px;
        --bsv-page-title-pt: 96px;
        --bsv-body-pb: 56px;
    }
}
@media (max-width: 575px) {
    :root { --bsv-hero-title-fs: 2.9rem; --bsv-hero-title-lh: 1.05; --bsv-reviews-py: 80px; --bsv-badge-size: 120px; --bsv-badge-icon: 28px; --bsv-footer-logo-h: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    :root { --bsv-hero-h: auto; }
}

/* ---------- base ---------- */
html { background: var(--black); }
body.bsv { background: var(--black); color: var(--bsv-text); padding-bottom: var(--bsv-body-pb); }
.bsv .bg-black { background-color: var(--black) !important; }
.bsv a:hover { color: var(--white); }
.bsv h1, .bsv h2, .bsv h3, .bsv h4, .bsv h5, .bsv h6 { color: var(--white); }
.bsv p { color: var(--bsv-text); }
::selection { background: var(--base-color); color: var(--black); }

/* skip link waits above the page (not off to the side) and slides in on focus */
.bsv-skip { position: absolute; left: 16px; top: 0; z-index: 10000; transform: translateY(-100%); background: var(--base-color); color: var(--black); padding: 10px 16px; font-weight: 700; }
.bsv-skip:focus { transform: translateY(16px); }
.bsv :focus-visible { outline: 2px solid var(--base-color); outline-offset: 3px; }
.bsv [class^="line-icon-"], .bsv [class*=" line-icon-"] { font-family: "bsv-iconsmind"; }
/* icon.min.css loads without blocking: reserve the icon box in buttons so nothing jumps when it arrives */
.bsv .btn i { display: inline-block; line-height: 1; }
.bsv .btn i.feather { min-width: 1em; }
:where(.bsv .btn i)::before { content: "\200b"; } /* lowest specificity: the real glyph rule always wins */

/* no-JS: Crafto hides every [data-anime] until its JS adds .appear — never let content depend on it */
html:not(.js) [data-anime] { opacity: 1; }

/* ---------- header ---------- */
.bsv header .navbar.bg-dark-gray { background-color: rgba(11, 13, 16, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.bsv header .navbar-brand img { max-height: var(--bsv-logo-h); width: auto; }
.bsv .navbar .navbar-nav .nav-link { color: var(--white); }
.bsv .navbar .navbar-nav .nav-link[aria-current="page"],
.bsv .navbar .navbar-nav .nav-link:hover { color: var(--base-color); }
.bsv .navbar-toggler-line { background-color: var(--white); }
.bsv .navbar-toggler { min-width: 44px; min-height: 44px; }
.bsv .header-top-bar .col-12 > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991px) {
    .bsv .navbar-collapse { background-color: var(--dark-gray); }
    .bsv .navbar .navbar-nav .nav-link { padding-top: 12px; padding-bottom: 12px; }
    .scroll-progress { display: none !important; }
    .bsv-hero-progress { display: none; }
}
@media (min-width: 992px) and (max-width: 1299px) { .bsv .navbar .navbar-nav .nav-link { font-size: 16px; padding-left: 11px; padding-right: 11px; } }
@media (min-width: 992px) and (max-width: 1199px) {
    .bsv .navbar .navbar-nav .nav-link { font-size: 15px; padding-left: 8px; padding-right: 8px; }
    .bsv .header-button { margin-left: 10px !important; }
    .bsv .header-button .btn { padding: 9px 14px; }
}

/* transparent header over hero/page title; dark once Crafto sets 'sticky' (2026-10-04) */
.bsv header .navbar, .bsv header .header-top-bar { transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
.bsv header:not(.sticky) .navbar.bg-dark-gray { background-color: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.bsv header:not(.sticky) .header-top-bar.bg-black { background-color: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* ---------- buttons ---------- */
.bsv .btn.btn-base-color { background-color: var(--base-color); border-color: var(--base-color); color: var(--black); }
.bsv .btn.btn-base-color:hover { background-color: #5bb9ea; border-color: #5bb9ea; color: var(--black); }
.bsv .btn.btn-white { color: var(--black); }
.bsv .btn.btn-transparent-white-light { border-color: rgba(255, 255, 255, .35); color: var(--white); background: transparent; }
.bsv .btn.btn-transparent-white-light:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.bsv .btn.btn-link.text-white:after { background-color: var(--base-color); }

/* ---------- touch targets >= 44px (FE Gate S10) ----------
   Inline links: vertical padding enlarges the hit area without touching the line box.
   (Inline-)block links: padding plus an equal negative margin, so nothing moves.
   Underlined links draw their line as a background instead of a border, so it stays under the text. */
.bsv a.text-decoration-line-bottom {
    padding-block: var(--bsv-hit); margin-block: calc(-1 * var(--bsv-hit)) calc(1px - var(--bsv-hit)); border-bottom: 0;
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - var(--bsv-hit) + 1px) / 100% 1px no-repeat;
}
.bsv footer li > a, .bsv .bsv-footer-contact, .bsv .grapix-trigger { padding-block: var(--bsv-hit); }
/* accordion anchors wrap a block title: make the anchor the block so its box is measurable */
.bsv .accordion-header a { display: block; padding-block: 7px; margin-block: -7px; }
/* short underlined footer links: widen too, underline stays text-width */
.bsv footer p a.text-decoration-line-bottom { padding-inline: 4px; margin-inline: -4px; background-size: calc(100% - 8px) 1px; background-position-x: 4px; }
/* these carry margin utilities (mb-5px etc.), so the extra area only reaches upward */
.bsv .services-box-content a, .bsv .feature-box-content a.d-block, .bsv .header-top-bar a { padding-top: 14px; margin-top: -14px; }
.bsv .btn.btn-link { --bsv-ul: 2px; --bsv-ul-gap: 2px; padding-top: var(--bsv-hit-box); margin-block: calc(-1 * var(--bsv-hit-box)); }
.bsv .btn.btn-link.thin { --bsv-ul: 1px; }
.bsv .services-box-content .btn.btn-link { --bsv-ul-gap: 0px; padding-left: 0; padding-right: 0; }
.bsv .btn.btn-link:not(.btn-hover-animation-switch) {
    border-bottom: 0; padding-bottom: calc(var(--bsv-hit-box) + var(--bsv-ul-gap) + var(--bsv-ul));
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - var(--bsv-hit-box)) / 100% var(--bsv-ul) no-repeat;
}
.bsv .btn.btn-link.btn-hover-animation-switch { padding-bottom: var(--bsv-hit-box); }
.bsv .swiper-pagination-style-2 .swiper-pagination-bullet { padding: 18px; margin: 0 !important; box-sizing: content-box; background-clip: content-box; }
.bsv .swiper-pagination-style-2 { margin-bottom: -23px; }

/* ---------- placeholders (until Ersen's photos land in images/) ---------- */
.bsv-ph {
    position: relative; display: flex; align-items: center; justify-content: center; width: 100%;
    background: repeating-linear-gradient(135deg, #2a2f37 0 14px, #262a31 14px 28px);
    border: 1px solid rgba(255, 255, 255, .08); color: #8a929d; overflow: hidden;
}
.bsv-ph span { font: 600 13px/1.3 var(--primary-font); letter-spacing: .5px; text-transform: uppercase; padding: 6px 10px; background: rgba(0, 0, 0, .35); border-radius: 4px; text-align: center; }
.bsv-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
div.bsv-cover { min-height: 300px; }
.bsv-split-img { min-height: 520px; position: relative; }
.bsv-split-img > * { position: absolute; inset: 0; }

/* ---------- hero: scroll-driven exploded view, video wheel left, copy right ---------- */
.bsv-hero { position: relative; height: var(--bsv-hero-h); background: var(--black); }
.bsv-hero-sticky { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; }
.bsv-hero-stage, .bsv-hero-canvas, .bsv-hero-poster, .bsv-hero-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.bsv-hero-poster { object-fit: cover; object-position: 33% 50%; }
.bsv-hero-canvas { z-index: 1; }
.bsv-hero-ph { border: 0; align-items: flex-end; justify-content: flex-end; padding: 0 24px 28px 0; }
.bsv-hero-shade { position: absolute; inset: 0; z-index: 2; background: var(--bsv-hero-shade); }
/* header legibility on the video: dark band at the top */
.bsv-hero-shade::before, .bsv-page-title::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 240px; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 13, 16, .85) 0%, rgba(11, 13, 16, 0) 100%); }
.bsv-hero-shade::before { z-index: 0; }
.bsv-hero .container { z-index: 3; padding-top: var(--bsv-hero-pt); }
.bsv-hero .row { align-items: var(--bsv-hero-row-align) !important; padding-bottom: var(--bsv-hero-row-pb); }
.bsv .bsv-hero-title { font-size: var(--bsv-hero-title-fs); line-height: var(--bsv-hero-title-lh); }
.bsv-chrome { background: var(--bsv-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bsv-hero-steps { counter-reset: s; border-left: 1px solid rgba(255, 255, 255, .15); }
.bsv-hero-step { position: relative; padding: 14px 0 14px 28px; opacity: .38; transition: opacity .4s ease; }
.bsv-hero-step::before { content: ""; position: absolute; left: -5px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: #3a4049; transition: background .4s ease, box-shadow .4s ease; }
.bsv-hero-step.is-active { opacity: 1; }
.bsv-hero-step.is-active::before { background: var(--base-color); box-shadow: 0 0 0 5px rgba(46, 163, 224, .2); }
.bsv-hero-step-n { display: block; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--base-color); }
.bsv-hero-step-t { display: block; font-size: 24px; font-weight: 700; color: var(--white); line-height: 1.2; }
.bsv-hero-step-x { display: block; font-size: 16px; line-height: 1.5; color: var(--bsv-text); max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.bsv-hero-step.is-active .bsv-hero-step-x { max-height: 90px; margin-top: 4px; }
.bsv-hero-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; background: rgba(255, 255, 255, .08); }
.bsv-hero-progress span { display: block; height: 100%; width: 0; background: var(--base-color); }
@media (min-width: 992px) {
    .bsv-hero-steps { position: absolute; left: 15px; right: 15px; bottom: 34px; display: flex; gap: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .15); }
    .bsv-hero-step { flex: 1; padding: 18px 20px 0 0; }
    .bsv-hero-step::before { left: 0; top: -5px; }
    .bsv-hero-step-x { max-height: none; opacity: 0; transition: opacity .4s ease; font-size: 15px; }
    .bsv-hero-step.is-active .bsv-hero-step-x { opacity: 1; margin-top: 4px; max-height: none; }
    .bsv-hero-step-t { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .bsv-hero-sticky { position: relative; height: 100vh; }
    .bsv-hero-step { opacity: 1; }
    .bsv-hero-step-x { max-height: none; }
}
html:not(.js) .bsv-hero { height: auto; }
html:not(.js) .bsv-hero-sticky { position: relative; }

/* ---------- sections ---------- */
.bsv .services-box-style-02 .services-box { min-height: 100%; }
.bsv .services-box-style-02 .services-box-img > * { height: 100%; min-height: 300px; }
.bsv .swiper-pagination-style-2 .swiper-pagination-bullet { background-color: rgba(255, 255, 255, .3); }
.bsv .swiper-pagination-style-2 .swiper-pagination-bullet-active { background-color: var(--base-color); }
.bsv-usp { transition: color .3s ease, transform .3s ease; }
.bsv-usp:hover { transform: translateY(-3px); color: var(--base-color) !important; }
.bsv .accordion-style-02 .accordion-item { background: transparent; }
.bsv .accordion-style-02 .accordion-header a i, .bsv .accordion-style-02 .accordion-header i { color: var(--white); }
.bsv .review-star-icon i { color: #f5b400; }

.bsv-reviews { padding-top: var(--bsv-reviews-py); padding-bottom: var(--bsv-reviews-py); background: var(--black); }
.bsv-reviews-bg { position: absolute; inset: 0; opacity: .35; }
.bsv-reviews-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--black) 20%, rgba(11, 13, 16, .4) 100%); }
.bsv-reviews .swiper-button-prev, .bsv-reviews .swiper-button-next { position: static; flex-shrink: 0; margin: 0; width: 48px; height: 48px; border: 0; border-radius: 50%; }
.bsv-reviews .swiper-button-prev:after, .bsv-reviews .swiper-button-next:after { display: none; }
/* prev/next on service photos (phones): shows the slider can be swiped */
.bsv-slide-arrow { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: rgba(11, 13, 16, .65); color: var(--white); font-size: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.bsv-slide-prev { left: 12px; }
.bsv-slide-next { right: 12px; }
.bsv-slide-arrow:active { background: var(--base-color); color: var(--black); }
.bsv .services-box-style-02 .services-box-img > .bsv-slide-arrow { height: 44px; min-height: 0; } /* the photo-cell rule stretches every child */
.bsv-rating { color: var(--bsv-text); }
.bsv-rating:hover { border-color: var(--base-color) !important; }

.bsv-page-title { min-height: var(--bsv-page-title-minh); padding-top: var(--bsv-page-title-pt); display: flex; align-items: center; background: var(--black); }
.bsv-page-title .small-screen { min-height: 420px; padding-top: 60px; }
.bsv-page-title-bg { position: absolute; inset: 0; opacity: .55; }
.bsv-page-title-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--black) 0%, rgba(11, 13, 16, .45) 55%, rgba(11, 13, 16, .2) 100%); }
.bsv .page-title-double-large h1 { font-size: clamp(2.6rem, 5vw, 4.375rem); line-height: 1.1; }

.bsv-points li { padding: 4px 0; color: var(--bsv-text); }
.bsv-hours li span:first-child { color: var(--bsv-text); }
/* footer landmark line: muted but AA (opacity .7 gave 3.6:1) */
.bsv footer address .opacity-7 { opacity: 1; color: #7d8590; }
.bsv .bsv-hours-panel { background-color: var(--bsv-surface) !important; }
.bsv-contact-card { border: 1px solid rgba(255, 255, 255, .08); transition: border-color .3s ease, transform .3s ease; }
.bsv-contact-card:hover { border-color: var(--base-color); transform: translateY(-3px); }
.bsv-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bsv-text); margin-bottom: 6px; }
.bsv-tag-on { color: var(--base-color); }
.bsv-price-tbd { color: var(--medium-gray); font-style: italic; }
.bsv-notice { background: rgba(46, 163, 224, .1); border: 1px solid rgba(46, 163, 224, .35); color: var(--white); padding: 12px 18px; border-radius: 6px; }
.bsv-missing { color: #ff9b6b; }
.bsv-prose h2 { margin-top: 30px; margin-bottom: 10px; }
.bsv-404 { font-size: clamp(6rem, 18vw, 12rem); line-height: 1; letter-spacing: -6px; }
.bsv .bg-base-color p, .bsv .bg-base-color a, .bsv .bg-base-color a:hover { color: var(--black) !important; }
@media (min-width: 992px) { .bsv .bsv-oneline { white-space: nowrap; } }

/* ---------- mobile sticky contact bar ---------- */
.bsv-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; box-shadow: 0 -6px 24px rgba(0, 0, 0, .45); }
.bsv-mobile-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; font-weight: 700; font-size: 17px; }
.bsv-mobile-cta a i { font-size: 20px; }
.bsv-mobile-cta-call { background: var(--base-color); color: var(--black); }
.bsv-mobile-cta-call:hover { color: var(--black); }
.bsv-mobile-cta-wa { background: #1f2329; color: var(--white); }

/* ---------- mobile readability (SOP: min 1rem on 375px) ---------- */
@media (max-width: 575px) {
    .bsv p, .bsv li { font-size: 1rem; line-height: 1.6; }
}

/* ---------- Grapix credit-popup — overgenomen uit DO Administratie (do-custom.css), Grapix-huisstijl ongewijzigd ---------- */
.grapix-trigger {
  opacity: 0.55;
  font-size: 0.8125rem;
  transition: opacity 0.2s;
}
.grapix-trigger:hover {
  opacity: 1;
  color: inherit;
  text-decoration: none;
}

.grapix-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.grapix-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

.grapix-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #0f1923;
  color: #fff;
  border-radius: 20px 20px 0 0;
  padding: 40px 48px 48px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  max-width: 680px;
  margin: 0 auto;
}
.grapix-panel.is-open {
  transform: translateY(0);
}

.grapix-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.grapix-close:hover {
  background: rgba(255,255,255,0.2);
}

.grapix-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.grapix-wordmark {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.grapix-tag {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  padding: 3px 9px;
  border-radius: 999px;
}

.grapix-headline {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 20px;
  color: #fff;
}

.grapix-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.grapix-list li {
  padding: 6px 0 6px 20px;
  position: relative;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
}
.grapix-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f9e6f;
}

.grapix-cta {
  display: inline-block;
  background: #4f9e6f;
  color: #fff !important;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none !important;
  transition: background 0.2s;
}
.grapix-cta:hover {
  background: #3d8059;
}

@media (max-width: 767px) {
  .grapix-panel {
    padding: 32px 24px 36px;
    border-radius: 16px 16px 0 0;
  }
}
/* site-side overrides for the popup */
.bsv .grapix-trigger { color: inherit; opacity: .8; }
.bsv .grapix-panel p, .bsv .grapix-panel li { font-size: .9375rem; }
/* the headline is a <p> (no heading in the page outline); keep the popup's own look over .bsv p */
.bsv .grapix-panel .grapix-headline { font-family: var(--alt-font); font-size: 1.75rem; line-height: 1.25; color: #fff; }
.grapix-panel :focus-visible { outline: 2px solid #4f9e6f; outline-offset: 3px; }
@media (max-width: 991px) { .grapix-panel { padding-bottom: 92px; } }
@media (max-width: 767px) { .bsv .grapix-panel .grapix-headline { font-size: 1.375rem; } }

/* ---------- WhatsApp button bottom right (desktop; mobile has the contact bar), appears after the hero with a "pop" ---------- */
.bsv .bsv-wa-fab { position: fixed; right: 28px; bottom: 28px; z-index: 1001; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%;
    background: #25d366; color: #0b0d10; font-size: 30px; box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(30px); pointer-events: none; transition: none; }
.bsv .bsv-wa-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 34px rgba(37, 211, 102, .35); color: #0b0d10; }
.bsv .bsv-wa-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; animation: bsv-pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.bsv .bsv-wa-fab.is-visible:hover { transform: translateY(-3px) scale(1.05); transition: transform .25s ease; }
.bsv-wa-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; opacity: 0; pointer-events: none; }
.bsv-wa-fab.is-visible::after { animation: bsv-splash 1s ease-out .25s 1, bsv-splash 1.4s ease-out 4s 2; }
.bsv-wa-fab-label { position: absolute; right: 72px; white-space: nowrap; background: #fff; color: #0b0d10; font-size: 14px; font-weight: 700; padding: 7px 12px; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3); opacity: 0; transform: translateX(8px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.bsv-wa-fab:hover .bsv-wa-fab-label, .bsv-wa-fab:focus-visible .bsv-wa-fab-label { opacity: 1; transform: none; }
.bsv-wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes bsv-pop {
    0% { opacity: 0; transform: scale(.2) translateY(30px) rotate(-25deg); }
    55% { opacity: 1; transform: scale(1.18) translateY(-4px) rotate(8deg); }
    75% { transform: scale(.92) rotate(-4deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes bsv-splash { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

/* ---------- border glow on hover (AYCE technique, in brand blue) ---------- */
.bsv-glow { position: relative; isolation: isolate; --glow-x: 50%; --glow-y: 50%; transition: transform .3s ease, box-shadow .3s ease; }
.bsv-glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(260px circle at var(--glow-x) var(--glow-y), rgba(46, 163, 224, .22) 0%, rgba(46, 163, 224, .08) 40%, transparent 70%); }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .bsv-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .3s ease;
        background:
            radial-gradient(300px circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 1) 0%, rgba(126, 203, 243, .9) 14%, rgba(46, 163, 224, .65) 30%, rgba(46, 163, 224, .2) 52%, transparent 74%),
            linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(46, 163, 224, .18), rgba(255, 255, 255, .04));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
}
@media (hover: hover) and (pointer: fine) {
    .bsv-glow:hover::before, .bsv-glow:hover::after { opacity: 1; }
    .bsv-glow:hover { box-shadow: 0 0 0 1px rgba(46, 163, 224, .28), 0 0 42px rgba(46, 163, 224, .22), 0 18px 50px rgba(0, 0, 0, .45); }
}
.bsv-wf .bsv-glow::before, .bsv-wf .bsv-glow::after { display: none; }

/* ---------- scroll cue on the left (animated) ---------- */
.bsv-scroll-cue { position: fixed; left: var(--bsv-cue-left); bottom: var(--bsv-cue-bottom); z-index: 1000; display: var(--bsv-cue-display); flex-direction: column; align-items: center; gap: 14px; pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.bsv-scroll-cue-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #fff; opacity: .85; }
.bsv-scroll-cue-line { position: relative; width: 2px; height: var(--bsv-cue-line-h); background: rgba(255, 255, 255, .2); border-radius: 2px; overflow: hidden; }
.bsv-scroll-cue-line span { position: absolute; left: 0; top: -30%; width: 100%; height: 30%; background: var(--base-color); border-radius: 2px; animation: bsv-cue 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
.bsv-scroll-cue.is-hidden { opacity: 0; transform: translateY(12px); }
@keyframes bsv-cue { to { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .bsv-scroll-cue-line span { animation: none; top: 35%; }
    .bsv-wa-fab.is-visible, .bsv-wa-fab.is-visible::after { animation: none; }
    .bsv-wa-fab, .bsv-wa-fab-label { transition: none; }
}
.bsv-wf .bsv-scroll-cue-line span { background: #8a8a8a; }
.bsv-wf .bsv-scroll-cue-text { color: #555; }

/* ---------- spinning tyre badge (rolls along with scrolling) ---------- */
.bsv-badge { position: absolute; width: var(--bsv-badge-size); height: var(--bsv-badge-size); z-index: 5; pointer-events: none; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .55)); }
.bsv-badge-spin, .bsv-badge-spin svg { width: 100%; height: 100%; display: block; }
.bsv-badge-spin { will-change: transform; }
.bsv-badge-tyre { fill: #0f1216; stroke: rgba(255, 255, 255, .12); stroke-width: 1.5; }
.bsv-badge-tread { fill: none; stroke: #1d2229; stroke-width: 12; stroke-dasharray: 6 5; }
.bsv-badge-rim { fill: #12161b; stroke: var(--base-color); stroke-width: 2.5; }
.bsv-badge-text { fill: #fff; font-family: var(--primary-font); font-size: 13.2px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.bsv-badge-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: var(--bsv-badge-icon); color: var(--base-color); line-height: 1; }
.bsv-badge-intro { right: var(--bsv-badge-intro-r); bottom: var(--bsv-badge-intro-b); }
.bsv-split-img > .bsv-badge { inset: auto; }
.bsv-split-img > .bsv-badge-velgen { right: var(--bsv-badge-velgen-r); bottom: var(--bsv-badge-velgen-b); margin-top: 0; }

/* ---------- floating particles (subtle, desktop only) ---------- */
.bsv-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bsv-particles canvas { display: block; }
@media (prefers-reduced-motion: reduce) { .bsv-particles { display: none !important; } }

/* footer logo: keep its own aspect ratio (Crafto sets max-height 30px on a fixed width) */
.bsv footer .footer-logo img.bsv-footer-logo { width: auto; height: var(--bsv-footer-logo-h); max-height: none; }