/* /Userinterface/Components/ArenaCards.razor.rz.scp.css */
.activity-card[b-enpge1lx1o] {
    transition: all 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
}

.activity-card:hover[b-enpge1lx1o] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

.activity-card .card-header[b-enpge1lx1o] {
    border: none;
    padding: 1.5rem;
    border-radius: 0;
}

.activity-card .card-body[b-enpge1lx1o] {
    padding: 1.5rem;
}

.btn[b-enpge1lx1o] {
    border-radius: 25px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn:hover[b-enpge1lx1o] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.btn-danger[b-enpge1lx1o] {
    background: linear-gradient(135deg, #ff4757, #ff3742);
}

.btn-danger:hover[b-enpge1lx1o] {
    background: linear-gradient(135deg, #ff3742, #ff2f3a);
}

.mobile-arena-btn[b-enpge1lx1o] {
    display: none;
}

@media (max-width: 768px) {
    .activity-card[b-enpge1lx1o] {
        margin-bottom: 2rem;
        margin-left: 1rem;
        margin-right: 1rem;
        position: relative;
        height: 250px !important;
    }

    .activity-card .card-header[b-enpge1lx1o] {
        display: none;
    }

    .activity-card .card-body[b-enpge1lx1o] {
        display: none;
    }

    .activity-card .card-img-top[b-enpge1lx1o] {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        z-index: 1;
    }

    .activity-card[b-enpge1lx1o]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 55%;
        background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
        z-index: 2;
        pointer-events: none;
    }

    .mobile-arena-btn[b-enpge1lx1o] {
        display: flex !important;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        white-space: nowrap;
    }

    .mobile-arena-btn:hover[b-enpge1lx1o] {
        transform: translateX(-50%) translateY(-2px);
    }
}
/* /Userinterface/Components/GameTypeSelector.razor.rz.scp.css */
.game-type-selector[b-jhyln1oini] {
    padding: 2rem 0;
}

.selector-cards[b-jhyln1oini] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.type-card[b-jhyln1oini] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    background: white;
    border: 3px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.type-card[b-jhyln1oini]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-color);
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.type-card:hover[b-jhyln1oini] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--card-color);
}

.type-card:hover[b-jhyln1oini]::before {
    transform: scaleX(1);
}

.type-card:active[b-jhyln1oini] {
    transform: translateY(-2px);
}

.type-card.active[b-jhyln1oini] {
    border-color: var(--card-color);
    border-width: 3px;
    background: linear-gradient(135deg, white 0%, color-mix(in srgb, var(--card-color) 5%, white) 100%);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--card-color) 30%, transparent);
}

.type-card.active[b-jhyln1oini]::before {
    transform: scaleX(1);
    height: 6px;
}

.card-icon[b-jhyln1oini] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-color) 10%, white), color-mix(in srgb, var(--card-color) 5%, white));
    margin-bottom: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-icon i[b-jhyln1oini] {
    font-size: 2.5rem;
    color: var(--card-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.type-card:hover .card-icon[b-jhyln1oini] {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-color) 20%, white), color-mix(in srgb, var(--card-color) 10%, white));
}

.type-card.active .card-icon[b-jhyln1oini] {
    transform: scale(1.15);
    background: var(--card-color);
}

.type-card.active .card-icon i[b-jhyln1oini] {
    color: white;
}

.card-content[b-jhyln1oini] {
    text-align: center;
    flex: 1;
}

.card-title[b-jhyln1oini] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.5rem 0;
    transition: color 0.3s ease;
}

.type-card.active .card-title[b-jhyln1oini] {
    color: var(--card-color);
}

.card-description[b-jhyln1oini] {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.card-badge[b-jhyln1oini] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    background: var(--card-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badge-pop-b-jhyln1oini 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.card-badge i[b-jhyln1oini] {
    color: white;
    font-size: 0.9rem;
}

@keyframes badge-pop-b-jhyln1oini {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .selector-cards[b-jhyln1oini] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .type-card[b-jhyln1oini] {
        flex-direction: row;
        padding: 1.25rem;
        text-align: left;
    }
    
    .card-icon[b-jhyln1oini] {
        width: 60px;
        height: 60px;
        margin-bottom: 0;
        margin-right: 1rem;
        flex-shrink: 0;
    }
    
    .card-icon i[b-jhyln1oini] {
        font-size: 1.75rem;
    }
    
    .card-content[b-jhyln1oini] {
        text-align: left;
    }
    
    .card-title[b-jhyln1oini] {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }
    
    .card-description[b-jhyln1oini] {
        font-size: 0.875rem;
    }
    
    .card-badge[b-jhyln1oini] {
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
    }
}

/* Focus styles for accessibility */
.type-card:focus[b-jhyln1oini] {
    outline: 3px solid var(--card-color);
    outline-offset: 2px;
}

.type-card:focus:not(:focus-visible)[b-jhyln1oini] {
    outline: none;
}

/* Color-specific hover effects */
.type-card.robo:hover[b-jhyln1oini] {
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.15);
}

.type-card.vr:hover[b-jhyln1oini] {
    box-shadow: 0 8px 24px rgba(46, 213, 115, 0.15);
}

.type-card.rc:hover[b-jhyln1oini] {
    box-shadow: 0 8px 24px rgba(255, 165, 2, 0.15);
}

/* Loading skeleton (optional) */
.type-card.skeleton[b-jhyln1oini] {
    pointer-events: none;
    animation: skeleton-pulse-b-jhyln1oini 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-jhyln1oini {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
/* /Userinterface/Components/HomePage/BulletPoint.razor.rz.scp.css */
[b-yjg2v0liy2].bullet-points {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    border-radius: 50px;
    width: 90%;
    background: #26272b;
}

[b-yjg2v0liy2].bullet-points i {
        color: #343a40
    }

[b-yjg2v0liy2].bullet-points .box {
        text-decoration: none;
        flex-shrink: 0;
        border: 1px solid #DDDDDD;
        background: #ffffff;
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: -1px;
        height: 100px !important;
        width: 100px !important;
    }

    [b-yjg2v0liy2].bullet-points p {
        font-size: 16px;

    }

    [b-yjg2v0liy2].bullet-points .link {
        color: #007bff !important;
    }
/* /Userinterface/Components/HomePage/HomeArenaCards.razor.rz.scp.css */
/* Arena cards. Same shape as the audience cards on the homepage: 20px radius, an icon in
   a tinted circle beside the title, body copy, then a link row with an arrow. They sit on
   the dark band, so the panel is translucent white like the location cards rather than
   solid, and the accent is the activity colour instead of the site blue.

   Hover is the game type selector's on /games, which the client picked: the card lifts,
   an accent bar wipes in along the top edge, the border takes the accent and the icon
   scales and tilts. */

.arenas__grid[b-f1cz4zj75a] {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    max-width: 1200px;
    margin: 0 auto;
}

.arena-card[b-f1cz4zj75a] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 3px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    /* Opaque: the section's corner artwork passes behind these cards, and a translucent
       surface would let it show through. Same colour the 6% wash gave over the band. */
    background: rgb(15, 46, 57);
    text-decoration: none;
    color: inherit;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                box-shadow .3s cubic-bezier(.4, 0, .2, 1),
                border-color .3s cubic-bezier(.4, 0, .2, 1),
                background .3s cubic-bezier(.4, 0, .2, 1);
}

/* Above the image, hence the z-index: the media sits at the top edge of the card. */
.arena-card[b-f1cz4zj75a]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    height: 4px;
    background: var(--card-color);
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.arena-card:hover[b-f1cz4zj75a],
.arena-card:focus-visible[b-f1cz4zj75a] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--card-color) 28%, transparent);
    border-color: var(--card-color);
    background: rgb(23, 53, 63);
    text-decoration: none;
    color: inherit;
}

.arena-card:hover[b-f1cz4zj75a]::before,
.arena-card:focus-visible[b-f1cz4zj75a]::before {
    transform: scaleX(1);
}

.arena-card:active[b-f1cz4zj75a] {
    transform: translateY(-2px);
}

.arena-card:focus-visible[b-f1cz4zj75a] {
    outline: 3px solid var(--card-color);
    outline-offset: 2px;
}

.arena-card__media[b-f1cz4zj75a] {
    display: block;
    overflow: hidden;
    /* Fixed ratio so three cards line up whatever their copy length. */
    aspect-ratio: 16 / 10;
    background: rgba(0, 0, 0, .25);
}

.arena-card__media img[b-f1cz4zj75a] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.arena-card:hover .arena-card__media img[b-f1cz4zj75a],
.arena-card:focus-visible .arena-card__media img[b-f1cz4zj75a] {
    transform: scale(1.06);
}

.arena-card__body[b-f1cz4zj75a] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .6rem;
    padding: 1.35rem 1.4rem 1.5rem;
}

.arena-card__head[b-f1cz4zj75a] {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.arena-card__icon[b-f1cz4zj75a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--card-color) 18%, transparent);
    color: var(--card-color);
    font-size: 1.2rem;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .3s cubic-bezier(.4, 0, .2, 1);
}

.arena-card:hover .arena-card__icon[b-f1cz4zj75a],
.arena-card:focus-visible .arena-card__icon[b-f1cz4zj75a] {
    transform: scale(1.1) rotate(5deg);
    background: color-mix(in srgb, var(--card-color) 30%, transparent);
}

.arena-card__title[b-f1cz4zj75a] {
    font-size: 1.2rem;
    font-weight: 700;
}

.arena-card__text[b-f1cz4zj75a] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .3rem;
    line-height: 1.55;
    font-size: .96rem;
    color: rgba(255, 255, 255, .82);
}

.arena-card__more[b-f1cz4zj75a] {
    font-weight: 700;
    font-size: .92rem;
    color: var(--card-color);
}

.arena-card__more i[b-f1cz4zj75a] {
    transition: transform .3s ease;
}

.arena-card:hover .arena-card__more i[b-f1cz4zj75a],
.arena-card:focus-visible .arena-card__more i[b-f1cz4zj75a] {
    transform: translateX(4px);
}

@media (min-width: 768px) {
    .arenas__grid[b-f1cz4zj75a] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .arena-card[b-f1cz4zj75a],
    .arena-card[b-f1cz4zj75a]::before,
    .arena-card__icon[b-f1cz4zj75a],
    .arena-card__media img[b-f1cz4zj75a],
    .arena-card__more i[b-f1cz4zj75a] {
        transition: none;
    }

    .arena-card:hover[b-f1cz4zj75a],
    .arena-card:focus-visible[b-f1cz4zj75a],
    .arena-card:active[b-f1cz4zj75a],
    .arena-card:hover .arena-card__icon[b-f1cz4zj75a],
    .arena-card:focus-visible .arena-card__icon[b-f1cz4zj75a],
    .arena-card:hover .arena-card__media img[b-f1cz4zj75a],
    .arena-card:focus-visible .arena-card__media img[b-f1cz4zj75a],
    .arena-card:hover .arena-card__more i[b-f1cz4zj75a],
    .arena-card:focus-visible .arena-card__more i[b-f1cz4zj75a] {
        transform: none;
    }
}
/* /Userinterface/Components/HomePage/HomeCarousel.razor.rz.scp.css */
/* Index Hero section------------------------------------------- */
.hero-item[b-0w1m8rziuv] {
    position: relative;
    height: max-height:90vh;
}

.hero-text-left-1[b-0w1m8rziuv] {
    position: absolute;
    top: 5%;
    left: 10%;
}

.hero-text-left-2[b-0w1m8rziuv] {
    position: absolute;
    top: 10%;
    left: 10%;
}

.hero-text-right-1[b-0w1m8rziuv] {
    position: absolute;
    top: 10%;
    right: 5%;
}

.hero-text-mid[b-0w1m8rziuv] {
    position: absolute;
    top: 10%;
    left: 5%;
}

@supports (-webkit-text-stroke: 1px black) {

    .outline-text[b-0w1m8rziuv] {
        color: #00b1e5;
        text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
    }
}

.btn-hero[b-0w1m8rziuv] {
    cursor: pointer
}

.btn-hero:hover[b-0w1m8rziuv] {
    -webkit-filter: brightness(70%);
}


/*End Index Hero section------------------------------------------- */
/* /Userinterface/Components/HomePage/HomeContact.razor.rz.scp.css */
/* Contact block, in the homepage's card language: two translucent panels on the dark
   band, same 20px radius and border as the arena and location cards. */

.contact__grid[b-2xwe0lqpms] {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    max-width: 1100px;
    margin: 0 auto;
}

.contact__panel[b-2xwe0lqpms] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.6rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    /* Opaque: the section's corner artwork passes behind these panels, and a translucent
       surface would let it show through. Same colour the 6% wash gave over the band. */
    background: rgb(15, 46, 57);
}

.contact__panel-title[b-2xwe0lqpms] {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

/* ---------- details ---------- */

.contact__list[b-2xwe0lqpms] {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact__list a[b-2xwe0lqpms] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .6rem;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    line-height: 1.4;
    transition: background .3s ease;
}

.contact__list a:hover[b-2xwe0lqpms],
.contact__list a:focus-visible[b-2xwe0lqpms] {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
}

.contact__icon[b-2xwe0lqpms] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    background: rgba(0, 177, 229, .18);
    color: var(--bs-primary, #00b1e5);
}

.contact__map[b-2xwe0lqpms] {
    /* Pushes the map to the bottom of the panel so both panels end level on desktop. */
    margin-top: auto;
    overflow: hidden;
    border-radius: 14px;
    line-height: 0;
}

.contact__map iframe[b-2xwe0lqpms] {
    display: block;
    width: 100%;
    height: 260px;
    border: 0;
}

/* ---------- form ---------- */

/* ::deep because EditForm renders the form element itself, so it does not carry this
   component's scope attribute and a plain .contact__form selector is dropped during CSS
   packing. Anchored on .contact__panel, which is a native element from this file. */
.contact__panel[b-2xwe0lqpms]  .contact__form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.contact__row[b-2xwe0lqpms] {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 1fr;
}

.contact__field[b-2xwe0lqpms] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.contact__field label[b-2xwe0lqpms] {
    font-size: .85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

/* ::deep because InputText and friends render their own input elements, which do not
   carry this component's scope attribute. */
.contact__field[b-2xwe0lqpms]  input,
.contact__field[b-2xwe0lqpms]  textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font: inherit;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.contact__field[b-2xwe0lqpms]  textarea {
    resize: vertical;
    min-height: 120px;
}

.contact__field[b-2xwe0lqpms]  input::placeholder,
.contact__field[b-2xwe0lqpms]  textarea::placeholder {
    color: rgba(255, 255, 255, .45);
}

.contact__field[b-2xwe0lqpms]  input:focus,
.contact__field[b-2xwe0lqpms]  textarea:focus {
    outline: none;
    border-color: var(--bs-primary, #00b1e5);
    box-shadow: 0 0 0 3px rgba(0, 177, 229, .25);
}

/* Blazor marks a field it considers invalid; without this the only cue is the browser's
   own tooltip, which disappears as soon as the visitor starts typing again. */
.contact__field[b-2xwe0lqpms]  input.invalid,
.contact__field[b-2xwe0lqpms]  textarea.invalid {
    border-color: #ff6b6b;
}

/* The browser default checkbox is a white square: the one light element in a panel of
   dark inputs. This rebuilds it out of the same border, radius and fill the text fields
   use, with the tick drawn as a background image rather than a pseudo element, which
   checkboxes do not render reliably. */
.contact__check[b-2xwe0lqpms] {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: .4rem;
    font-size: .92rem;
    color: rgba(255, 255, 255, .82);
    cursor: pointer;
}

.contact__check[b-2xwe0lqpms]  input {
    appearance: none;
    flex: 0 0 auto;
    inline-size: 20px;
    block-size: 20px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.contact__check:hover[b-2xwe0lqpms]  input {
    border-color: rgba(255, 255, 255, .45);
}

.contact__check[b-2xwe0lqpms]  input:checked {
    border-color: var(--bs-primary, #00b1e5);
    background-color: var(--bs-primary, #00b1e5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2304222c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}

.contact__check[b-2xwe0lqpms]  input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 177, 229, .25);
}

.contact__submit[b-2xwe0lqpms] {
    align-self: flex-start;
    margin-top: .5rem;
    padding: .8rem 2rem;
    border: none;
    border-radius: 25px;
    background: var(--bs-primary, #00b1e5);
    color: #04222c;
    font-weight: 700;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
}

.contact__submit:hover[b-2xwe0lqpms],
.contact__submit:focus-visible[b-2xwe0lqpms] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 177, 229, .35);
}

.contact__sent[b-2xwe0lqpms] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .8rem 1rem;
    border: 1px solid rgba(46, 213, 115, .5);
    border-radius: 12px;
    background: rgba(46, 213, 115, .12);
    color: #d8ffe9;
}

.contact__sent i[b-2xwe0lqpms] {
    color: #2ed573;
}

@media (min-width: 768px) {
    .contact__row[b-2xwe0lqpms] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .contact__grid[b-2xwe0lqpms] {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .contact__panel[b-2xwe0lqpms] {
        padding: 1.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact__submit[b-2xwe0lqpms],
    .contact__list a[b-2xwe0lqpms],
    .contact__check[b-2xwe0lqpms]  input {
        transition: none;
    }

    .contact__submit:hover[b-2xwe0lqpms],
    .contact__submit:focus-visible[b-2xwe0lqpms] {
        transform: none;
    }
}
/* /Userinterface/Components/HomePage/HomeFaq.razor.rz.scp.css */
/* Sits on the homepage's dark band, so the cards are translucent white rather than solid:
   a solid card would cut the band into stripes. Colours are written against that dark
   background and nothing else uses this component. */

.home-faq[b-7kg5totc0q] {
    display: grid;
    gap: .6rem;
    max-width: 860px;
    margin: 0 auto;
}

.home-faq__item[b-7kg5totc0q] {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    /* Opaque: the section's corner artwork passes behind these rows, and a translucent
       surface would let it show through. Same colour the 6% wash gave over the band. */
    background: rgb(15, 46, 57);
    transition: background .3s ease, border-color .3s ease;
}

.home-faq__item:hover[b-7kg5totc0q] {
    background: rgb(23, 53, 63);
    border-color: rgba(255, 255, 255, .22);
}

.home-faq__item[open][b-7kg5totc0q] {
    background: rgb(23, 53, 63);
    border-color: var(--bs-primary, #00b1e5);
}

.home-faq__question[b-7kg5totc0q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    /* Removes the default disclosure triangle; the chevron replaces it. */
    list-style: none;
}

.home-faq__question[b-7kg5totc0q]::-webkit-details-marker {
    display: none;
}

.home-faq__question:focus-visible[b-7kg5totc0q] {
    outline: 3px solid var(--bs-primary, #00b1e5);
    outline-offset: 2px;
    border-radius: 14px;
}

.home-faq__chevron[b-7kg5totc0q] {
    flex: 0 0 auto;
    font-size: .85rem;
    color: var(--bs-primary, #00b1e5);
    transition: transform .3s ease;
}

.home-faq__item[open] .home-faq__chevron[b-7kg5totc0q] {
    transform: rotate(180deg);
}

.home-faq__answer[b-7kg5totc0q] {
    padding: 0 1.15rem 1.15rem;
}

.home-faq__answer p[b-7kg5totc0q] {
    margin: 0;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}

@media (min-width: 992px) {
    .home-faq__question[b-7kg5totc0q] {
        padding: 1.1rem 1.4rem;
        font-size: 1.05rem;
    }

    .home-faq__answer[b-7kg5totc0q] {
        padding: 0 1.4rem 1.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-faq__item[b-7kg5totc0q],
    .home-faq__chevron[b-7kg5totc0q] {
        transition: none;
    }
}
/* /Userinterface/Components/HomePage/HomeGallery.razor.rz.scp.css */
/* Horizontal photo strip. Scroll snapping rather than a carousel plugin: it swipes
   natively on a phone, needs no JavaScript to work at all, and the next card peeking in
   at the edge is what tells the visitor there is more to see. */

.home-gallery[b-td5e960igf] {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.home-gallery__track[b-td5e960igf] {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: .25rem;
    list-style: none;

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    /* The peek at the right edge is the affordance, so the bar itself only adds noise. */
    scrollbar-width: none;
}

.home-gallery__track[b-td5e960igf]::-webkit-scrollbar {
    display: none;
}

.home-gallery__item[b-td5e960igf] {
    flex: 0 0 auto;
    /* Just under full width so the next photo shows at the edge. */
    inline-size: 82%;
    scroll-snap-align: center;
}

.home-gallery__item figure[b-td5e960igf] {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

/* height: auto is load-bearing. The width and height attributes on the element reserve
   the box before the file arrives, but they also resolve height to a used value, and
   aspect-ratio is only honoured while one dimension is auto. */
.home-gallery__item img[b-td5e960igf] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.home-gallery__item figcaption[b-td5e960igf] {
    padding: .9rem 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1a202c;
}

/* ---------- arrows ---------- */

/* Hidden until modules.js finds the strip scrollable, so a short list never shows two
   dead buttons. Also hidden outright where the thumb is the pointer. */
.home-gallery__arrow[b-td5e960igf] {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #1a202c;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: background .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.home-gallery.is-scrollable .home-gallery__arrow[b-td5e960igf] {
    display: flex;
}

.home-gallery__arrow:hover[b-td5e960igf],
.home-gallery__arrow:focus-visible[b-td5e960igf] {
    background: var(--bs-primary, #00b1e5);
    color: #04222c;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}

/* Kept in the layout rather than removed, so the strip does not jump as it is scrolled. */
.home-gallery__arrow[disabled][b-td5e960igf] {
    opacity: 0;
    pointer-events: none;
}

.home-gallery__arrow--prev[b-td5e960igf] {
    left: -6px;
}

.home-gallery__arrow--next[b-td5e960igf] {
    right: -6px;
}

@media (hover: none) {
    .home-gallery.is-scrollable .home-gallery__arrow[b-td5e960igf] {
        display: none;
    }
}

@media (min-width: 768px) {
    .home-gallery__item[b-td5e960igf] {
        inline-size: 46%;
    }
}

@media (min-width: 992px) {
    .home-gallery__item[b-td5e960igf] {
        inline-size: 31%;
    }

    .home-gallery__arrow--prev[b-td5e960igf] {
        left: -22px;
    }

    .home-gallery__arrow--next[b-td5e960igf] {
        right: -22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-gallery__track[b-td5e960igf] {
        scroll-behavior: auto;
    }

    .home-gallery__arrow[b-td5e960igf] {
        transition: none;
    }
}
/* /Userinterface/Components/InfoAndFaq/Faq.razor.rz.scp.css */

.faq-section[b-mwh1a7a08t] {
    background: #fdfdfd;
}

.faq-title h2[b-mwh1a7a08t] {
    position: relative;
    margin-bottom: 45px;
    display: inline-block;
    font-weight: 600;
    line-height: 1;
}

    .faq-title h2[b-mwh1a7a08t]::before {
        content: "";
        position: absolute;
        left: 50%;
        width: 60px;
        height: 2px;
        background: #0ab5e6;
        bottom: -25px;
        margin-left: -30px;
    }

.faq-title p[b-mwh1a7a08t] {
    padding: 0 190px;
    margin-bottom: 10px;
}

.faq[b-mwh1a7a08t] {
    background: #FFFFFF;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

    .faq .card[b-mwh1a7a08t] {
        border: none;
        background: none;
        border-bottom: 1px dashed #CEE1F8;
        margin-bottom : 0px !important;
    }

        .faq .card .card-header[b-mwh1a7a08t] {
            padding: 0px;
            border: none;
            background: none;
            -webkit-transition: all 0.3s ease 0s;
            -moz-transition: all 0.3s ease 0s;
            -o-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
        }

            .faq .card .card-header:hover[b-mwh1a7a08t] {
                background: rgba(41,42,45, 0.1);
                padding-left: 10px;
            }

            .faq .card .card-header .faq-title[b-mwh1a7a08t] {
                width: 100%;
                text-align: left;
                padding: 0px;
                padding-left: 30px;
                margin-bottom: 0 !important;
                padding-right: 30px;
                font-weight: 400;
                font-size: 15px;
                letter-spacing: 1px;
                color: #3B566E;
                text-decoration: none !important;
                -webkit-transition: all 0.3s ease 0s;
                -moz-transition: all 0.3s ease 0s;
                -o-transition: all 0.3s ease 0s;
                transition: all 0.3s ease 0s;
                cursor: pointer;
                padding-top: 20px;
                padding-bottom: 20px;
            }

                .faq .card .card-header .faq-title .badge[b-mwh1a7a08t] {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    line-height: 14px;
                    float: left;
                    -webkit-border-radius: 100px;
                    -moz-border-radius: 100px;
                    border-radius: 100px;
                    text-align: center;
                    background: #0ab5e6;
                    color: #fff;
                    font-size: 12px;
                    margin-right: 20px;
                }

        .faq .card .card-body[b-mwh1a7a08t] {
            padding: 30px;
            padding-left: 35px;
            padding-bottom: 16px;
            height:auto!important;
            font-weight: 400;
            font-size: 16px;
            color: #6F8BA4;
            line-height: 28px;
            letter-spacing: 1px;
            border-top: 1px solid #F3F8FF;
        }

            .faq .card .card-body p[b-mwh1a7a08t] {
                margin-bottom: 14px;
            }

@media (max-width: 991px) {
    
        .faq .card .card-header .faq-title[b-mwh1a7a08t] {
            line-height: 26px;
            margin-top: 10px;
        }
}
/* /Userinterface/Components/Invoices/ConfirmStep.razor.rz.scp.css */
[b-d6blvgeok2].confirm-step .align-value-with-table {
    width: 174px
}
/* /Userinterface/Components/Layout/AdminDesktopMenu.razor.rz.scp.css */
[b-7zyz31fqk1].admin-menu{
    z-index : 500;
    color: white;
}

[b-7zyz31fqk1].admin-menu {
    --rz-menu-top-item-color: whithe;
}

[b-7zyz31fqk1].active {
    --rz-menu-top-item-color: #2ebaff;
}
/* /Userinterface/Components/Layout/Footer.razor.rz.scp.css */

.site-footer[b-esn7pvdk7b] {
    background-color: #26272b;
    padding: 45px 0 20px;
    font-size: 15px;
    line-height: 24px;
    color: #737373;
}

    .site-footer hr[b-esn7pvdk7b] {
        border-top-color: #bbb;
        opacity: 0.5
    }

        .site-footer hr.small[b-esn7pvdk7b] {
            margin: 20px 0
        }

    .site-footer h6[b-esn7pvdk7b] {
        color: #fff;
        font-size: 16px;
        text-transform: uppercase;
        margin-top: 5px;
        letter-spacing: 2px
    }

    .site-footer a[b-esn7pvdk7b] {
        color: #737373;
    }

        .site-footer a:hover[b-esn7pvdk7b] {
            color: #3366cc;
            text-decoration: none;
        }

.footer-links[b-esn7pvdk7b] {
    padding-left: 0;
    list-style: none
}

    .footer-links li[b-esn7pvdk7b] {
        display: block
    }

    .footer-links a[b-esn7pvdk7b] {
        color: #737373
    }

        .footer-links a:active[b-esn7pvdk7b], .footer-links a:focus[b-esn7pvdk7b], .footer-links a:hover[b-esn7pvdk7b] {
            color: #3366cc;
            text-decoration: none;
        }

    .footer-links.inline li[b-esn7pvdk7b] {
        display: inline-block
    }

.site-footer .social-icons[b-esn7pvdk7b] {
    text-align: right
}

    .site-footer .social-icons a[b-esn7pvdk7b] {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-left: 6px;
        margin-right: 0;
        border-radius: 100%;
        background-color: #33353d
    }

.copyright-text[b-esn7pvdk7b] {
    margin: 0
}

/* The credit was already a link, but it inherited the grey of the text around it and had
   no underline, so nothing said it was clickable. */
/* Plain inline, not inline-flex. A flex container takes its baseline from its first item,
   and that item is the logo, which has none, so the browser synthesised one from the box
   edge and sat the whole credit seven pixels above the text beside it. */
.developer-credit[b-esn7pvdk7b] {
    color: var(--bs-primary, #00b1e5);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: color .3s ease;
}

.developer-credit:hover[b-esn7pvdk7b],
.developer-credit:focus-visible[b-esn7pvdk7b] {
    color: #fff;
    text-decoration: underline;
}

/* Inline, so it shares the line box with the text and vertical-align actually applies.
   middle centres it on the lowercase x rather than parking it on the baseline. */
.developer-credit img[b-esn7pvdk7b] {
    display: inline-block;
    vertical-align: middle;
    inline-size: 18px;
    block-size: 18px;
    margin-inline-end: .4rem;
    /* Lifts it off the underline the link carries. */
    margin-block-start: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .developer-credit[b-esn7pvdk7b] {
        transition: none;
    }
}

@media (max-width:991px) {
    .site-footer [class^=col-][b-esn7pvdk7b] {
        margin-bottom: 30px
    }
}

@media (max-width:767px) {
    .site-footer[b-esn7pvdk7b] {
        padding-bottom: 0;
        background: #26272b;
    }

        .site-footer .copyright-text[b-esn7pvdk7b], .site-footer .social-icons[b-esn7pvdk7b] {
            text-align: center
        }
}

.social-icons[b-esn7pvdk7b] {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

    .social-icons li[b-esn7pvdk7b] {
        display: inline-block;
        margin-bottom: 4px
    }

        .social-icons li.title[b-esn7pvdk7b] {
            margin-right: 15px;
            text-transform: uppercase;
            color: #96a2b2;
            font-weight: 700;
            font-size: 13px
        }

    .social-icons a[b-esn7pvdk7b] {
        background-color: #eceeef;
        color: #818a91;
        font-size: 16px;
        display: inline-block;
        line-height: 44px;
        width: 44px;
        height: 44px;
        text-align: center;
        margin-right: 8px;
        border-radius: 100%;
        -webkit-transition: all .2s linear;
        -o-transition: all .2s linear;
        transition: all .2s linear
    }

        .social-icons a:active[b-esn7pvdk7b], .social-icons a:focus[b-esn7pvdk7b], .social-icons a:hover[b-esn7pvdk7b] {
            color: #fff;
            background-color: #29aafe
        }

    .social-icons.size-sm a[b-esn7pvdk7b] {
        line-height: 34px;
        height: 34px;
        width: 34px;
        font-size: 14px
    }

    .social-icons a.facebook:hover[b-esn7pvdk7b] {
        background-color: #3b5998
    }

    .social-icons a.instagram:hover[b-esn7pvdk7b] {
        background: linear-gradient(45deg, #fd1d1d, #e1306c,#c13584, #833ab4,#5851db,#405de6)
    }

    .social-icons a.linkedin:hover[b-esn7pvdk7b] {
        background-color: #007bb6
    }

    .social-icons a.twitch:hover[b-esn7pvdk7b] {
        background: #6441a5
    }

    .social-icons a.youtube:hover[b-esn7pvdk7b] {
        background: #f70000
    }

    .social-icons a.tiktok:hover[b-esn7pvdk7b] {
        background: #69C9D0
    }

@media (max-width:767px) {
    .social-icons li.title[b-esn7pvdk7b] {
        display: block;
        margin-right: 0;
        font-weight: 600
    }
}
/* /Userinterface/Components/Layout/NavBarActions.razor.rz.scp.css */
/* These carried margin-top: 45px, which is what centred them by hand in the old 145px
   bar. Centring the row does the same job at any height, so the bar can change without
   dragging every button out of line. */
    [b-dylv5qmpm7].navbar-actions {
        align-items: center;
    }

    [b-dylv5qmpm7].navbar-actions .book {
        /* Block margins zeroed, not just the top: the m-2 class leaves 7px below, which
           on its own is enough to sit the button off centre. */
        margin-block: 0 !important;
    }
    [b-dylv5qmpm7].navbar-actions .profile {
        margin-top: 0 !important;
        height: fit-content;
        margin-left:0;
        z-index: 200;
    }
    [b-dylv5qmpm7].navbar-actions .profile .btn {
        margin-left: 0!important;
    }
    [b-dylv5qmpm7].navbar-actions .menu-toggle {
        cursor: pointer;
        color: #343a40
    }

    [b-dylv5qmpm7].navbar-actions .login {
        margin-top: 0 !important;
        cursor: pointer;
    }
/* /Userinterface/Components/Layout/NavigationBar.razor.rz.scp.css */
[b-fun17hz83l].navigation-bar .menu-divder {
    border-bottom: 2px solid black;
}

/* Was a flat 145px at every width, roughly twice the usual header and 17% of the viewport
   on a 844px phone before any content. The logo is capped alongside it, because the bar is
   only as short as the tallest thing in it. */
[b-fun17hz83l].navigation-bar .menu-bar {
    max-width: 1650px;
    max-height: 88px;
    height: 88px;
}

/* The file carries a viewBox and no width or height, so it has no intrinsic size and the
   width attribute in the markup was the only thing giving it one. Setting a height with
   an explicit ratio replaces that; width:auto alone collapses it to nothing. */
[b-fun17hz83l].navigation-bar .navbar-brand img {
    height: 60px;
    width: auto;
    aspect-ratio: 253.51 / 97.29;
}

@media (max-width: 991px) {
    [b-fun17hz83l].navigation-bar .menu-bar {
        max-height: 72px;
        height: 72px;
    }

    [b-fun17hz83l].navigation-bar .navbar-brand img {
        height: 48px;
    }
}

[b-fun17hz83l].navigation-bar .menu-bar .btn {
    text-align: center;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 20px;
}
/* /Userinterface/Components/Layout/NavLinksDesktopMenu.razor.rz.scp.css */
.nav-item[b-ts547rg4h6] {
    font-size: 20px;
    margin-left: 10px;
    margin-right: 10px;
    
    margin-top: auto;
    margin-bottom: auto;
}

.menu-items ul li a[b-ts547rg4h6] {
    color: rgb(52,58,64) !important;
}

.menu-items ul[b-ts547rg4h6] {
    text-align: center;
    margin: 0;
}
.link-submenu[b-ts547rg4h6]{
    font-size: 25px;
}
.menu-items ul li[b-ts547rg4h6] {
    display: inline-block;
    margin-right: 15px;
    transition: all 0.3s ease-in-out;
}

        .menu-items ul li:hover .submenu[b-ts547rg4h6] {
            height: auto;
        }

        .menu-items ul li:hover a[b-ts547rg4h6] {
            color: rgb(0,177,229)!important;
            font-weight: 600;
        }

            .menu-items ul li:hover a[b-ts547rg4h6]::before {
                visibility: visible;
                transform: scale(1, 1);
            }

        .menu-items ul li .submenu[b-ts547rg4h6] {
            overflow: hidden;
            position: absolute;
            left: 0;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.85);
            height: 0;
            line-height: 40px;
            box-sizing: border-box;
            transition: height 0.3s ease-in-out;
            transition-delay: 0.1s;
        }

            .menu-items ul li .submenu a[b-ts547rg4h6] {
                color: #fff;
                margin-top: 20px;
                font-size: 16px;
            }

                .menu-items ul li .submenu a:hover[b-ts547rg4h6] {
                    color: #fff;
                    text-decoration: underline;
                }

/* The height was a fixed 133px, which with the 10px margin below filled the old 145px
   bar exactly. It left the links sitting well below centre once the bar shrank, so it is
   content driven now and the bar centres them. */
        .menu-items ul li a[b-ts547rg4h6] {
            color: #999;
            display: block;
            padding: 0 7px 0 7px;
            /* Symmetric: the 10px below is what the hover underline hangs in, and matching
               it above keeps the label on the bar's centre line. */
            margin: 10px 0;
            text-decoration: none;
            position: relative;
        }

            .menu-items ul li a[b-ts547rg4h6]::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 3px;
                bottom: -10px;
                left: 0px;
                background-color: rgb(0,177,229);
                transition: all 0.2s ease-in-out;
                transform: scale(0, 0);
                visibility: hidden;
            }
/* /Userinterface/Components/Layout/NavLinksMobileMenu.razor.rz.scp.css */


.panel[b-7dekq8hmbl] {
    transition: 0.3s;
    transform: translateX(+400px);
    position: fixed;
    top: 0;
    right: 0;
    background-color: #f0f2f5;
    width: 300px;
    height: auto;
    overflow-y: scroll;
    height: 100vh;
    z-index: 300;
    box-shadow: 0 0 10px 4px rgba(17, 24, 31, .15);
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.panel[b-7dekq8hmbl]::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.panel[b-7dekq8hmbl] {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
    .panel.panel--open[b-7dekq8hmbl] {
        transform: translateX(0);
    }

.fly-out-wrap .fly-out-menu-actions a[b-7dekq8hmbl] {
    cursor: pointer !important;
}
.fly-out-item li:hover[b-7dekq8hmbl] {
    color: rgb(0,177,229) !important;
}
.fly-out-item[b-7dekq8hmbl] {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .fly-out-item li[b-7dekq8hmbl] {
        margin-bottom: 10px;
        cursor: pointer;
    }

.toggle[b-7dekq8hmbl] {
    position: relative;
    height: 15px;
    width: 20px;
    border-bottom: 1px solid #11181f;
    margin-left: 30px;
    cursor: pointer;
}

    .toggle[b-7dekq8hmbl]::after {
        display: block;
        border-top: 1px solid #11181f;
        content: "";
    }

    .toggle[b-7dekq8hmbl]::before {
        display: block;
        border-top: 1px solid #11181f;
        padding-top: 6px;
        content: "";
    }
/* /Userinterface/Components/Layout/SocialOverlays.razor.rz.scp.css */
/*Social media buttons overlay------------------------------------*/
.social-media-buttons-overlay[b-bprihfpcm2] {
    position: fixed;
    right: 0;
    text-align: center;
    padding: 10px;
    margin-right: 10px;
    margin-top: 160px;
    height: 250px;
    width: 10px;
    z-index: 5;
}

    .social-media-buttons-overlay a[b-bprihfpcm2] {
        text-decoration: none;
        vertical-align: middle !important;
        justify-self: center !important;
        text-align: center !important;
        line-height: 2;
        font-size: 16px;
        text-transform: uppercase;
    }

    .social-media-buttons-overlay p[b-bprihfpcm2] {
        color: #ffffff;
        position: relative;
        text-align: center !important;
        margin: auto 0 auto 0;
        right: -2px;
    }

        .social-media-buttons-overlay p i[b-bprihfpcm2] {
            right: 47px;
            position: relative;
            vertical-align: middle !important;
            text-align: center;
            font-size: 24px;
        }

    .social-media-buttons-overlay div[b-bprihfpcm2] {
        margin-left: -30px;
        width: 225px;
        padding: 0;
        display: inline-table;
        height: 30px;
        transition: margin-left .5s;
        cursor: pointer;
        border-radius: 50px 0 0 50px;
    }

        .social-media-buttons-overlay div:hover[b-bprihfpcm2] {
            margin-left: -200px;
            width: 230px
        }

/*End social media buttons overlay-----------------------------*/
/* /Userinterface/Components/PageCarousels.razor.rz.scp.css */
/* Index Hero section------------------------------------------- */
.hero-item[b-vckebh0uh9] {
    position: relative;
    height: max-height:90vh;
}

.hero-text-left-1[b-vckebh0uh9] {
    position: absolute;
    top: 5%;
    left: 10%;
}

.hero-text-left-2[b-vckebh0uh9] {
    position: absolute;
    top: 10%;
    left: 10%;
}

.hero-text-right-1[b-vckebh0uh9] {
    position: absolute;
    top: 10%;
    right: 5%;
}

.hero-text-mid[b-vckebh0uh9] {
    position: absolute;
    top: 10%;
    left: 5%;
}

@supports (-webkit-text-stroke: 1px black) {

    .outline-text[b-vckebh0uh9] {
        color: #00b1e5;
        text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
    }
}

.btn-hero[b-vckebh0uh9] {
    cursor: pointer
}

.btn-hero:hover[b-vckebh0uh9] {
    -webkit-filter: brightness(70%);
}


/*End Index Hero section------------------------------------------- */
/* /Userinterface/Components/SelectTarief.razor.rz.scp.css */
[b-xpe5mrp9ss].select-tarief tr:hover td {
    cursor: pointer;
    background-color: #a7d1fd !important;
    background-color: rgba(167, 209, 253, 0.25) !important; 
}

[b-xpe5mrp9ss].select-tarief .empty-table {
    color: lightgrey;
    font-size: 24px;
    text-align: center;
    margin: 2rem;
}
/* /Userinterface/Components/Table/CommitCancelActions.razor.rz.scp.css */
/* /Userinterface/Components/Table/DataGridColumnEdit.razor.rz.scp.css */
/* /Userinterface/Components/Table/DataGridColumnEditDelete.razor.rz.scp.css */
/* /Userinterface/Components/Table/EditActions.razor.rz.scp.css */
/* /Userinterface/Components/Table/EditDeleteActions.razor.rz.scp.css */
/* /Userinterface/Components/Table/ReadOnlyCheckBox.razor.rz.scp.css */
[b-h6aq481u92].read-only-checkbox .rz-chkbox-box.rz-state-disabled {
    opacity: 1 !important;
}
/* /Userinterface/Components/Tarieven.razor.rz.scp.css */
.tarief-list[b-wyyj5f8iui] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 450px));
    gap: 1.5rem;
    justify-content: center;
}

.tarief-card[b-wyyj5f8iui] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
    border: 3px solid #e0e0e0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarief-card[b-wyyj5f8iui]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-color);
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.tarief-card:hover[b-wyyj5f8iui] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--card-color);
}

.tarief-card:hover[b-wyyj5f8iui]::before {
    transform: scaleX(1);
}

.card-header[b-wyyj5f8iui] {
    background: var(--card-color);
    color: white;
    padding: 2rem 1.5rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: 0;
    border: none;
}

.card-title[b-wyyj5f8iui] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: white;
}

.card-vat-label[b-wyyj5f8iui] {
    font-size: 0.9rem;
    opacity: 0.85;
    display: block;
    margin-bottom: 0.5rem;
}

.card-price[b-wyyj5f8iui] {
    margin: 0.75rem 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.price-main[b-wyyj5f8iui],
.price-quotation[b-wyyj5f8iui] {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.price-new[b-wyyj5f8iui] {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.price-old[b-wyyj5f8iui] {
    font-size: 1.4rem;
    text-decoration: line-through;
    opacity: 0.65;
    align-self: flex-end;
}

.price-unit[b-wyyj5f8iui] {
    font-size: 1.2rem;
    opacity: 0.85;
    align-self: flex-end;
}

.card-location[b-wyyj5f8iui] {
    display: block;
    font-size: 0.9rem;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}

.card-intro[b-wyyj5f8iui] {
    margin-top: 0.75rem;
}

.intro-line[b-wyyj5f8iui] {
    color: white;
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.card-body[b-wyyj5f8iui] {
    flex: 1;
    padding: 1.5rem;
}

.body-section-title[b-wyyj5f8iui] {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin: 1rem 0 0.5rem 0;
}

.body-section-title:first-child[b-wyyj5f8iui] {
    margin-top: 0;
}

.body-item[b-wyyj5f8iui] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    color: #555;
    font-size: 0.95rem;
}

.body-item i[b-wyyj5f8iui] {
    color: var(--card-color);
    flex-shrink: 0;
}

.card-cta[b-wyyj5f8iui] {
    padding: 0 1.5rem 1.5rem;
    margin-top: auto;
    text-align: center;
}

.cta-button[b-wyyj5f8iui] {
    display: inline-block;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: var(--card-color);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cta-button:hover[b-wyyj5f8iui] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: white;
    text-decoration: none;
    filter: brightness(1.1);
}

.card-ribbon[b-wyyj5f8iui] {
    width: 210px;
    height: 45px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-weight: bold;
    box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25);
    background: #f70000;
    transform: rotate(45deg);
    position: absolute;
    right: -48px;
    top: 30px;
    z-index: 10;
}

.coming-soon[b-wyyj5f8iui] {
    color: #dc3545;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
    .tarief-list[b-wyyj5f8iui] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-header[b-wyyj5f8iui] {
        padding: 1.5rem 1rem;
    }

    .price-main[b-wyyj5f8iui],
    .price-new[b-wyyj5f8iui],
    .price-quotation[b-wyyj5f8iui] {
        font-size: 2.25rem;
    }

    .card-body[b-wyyj5f8iui] {
        padding: 1rem;
    }

    .card-cta[b-wyyj5f8iui] {
        padding: 0 1rem 1rem;
    }
}
/* /Userinterface/Components/TriangleHeader.razor.rz.scp.css */
.triangle-topleft[b-k40wnav92h] {
    width: 0;
    height: 0;
    border-top: 15vh solid #292a2d;
    border-right: 100vw solid transparent;
    transform: translateY(-3px);
}

.triangle-topright[b-k40wnav92h] {
    width: 0;
    height: 0;
    border-top: 10vh solid rgba(0,177,229,0.8);
    border-left: 100vw solid transparent;
}

.header[b-k40wnav92h] {
    height: 15vh;
    width: 100%;
    margin: 0;
    border-bottom: 0 !important;
    transform: translateY(-3px);
}

.header-title[b-k40wnav92h] {
    margin-left: 10%;
}

@media only screen and (max-width: 600px) {
    .header-title[b-k40wnav92h] {
        top: 90px
    }
}
/* /Userinterface/Components/ZoomInTile.razor.rz.scp.css */

.image-box[b-9pqtwpmetj] {
    margin: auto;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    /*border: 1px solid black;*/
    margin-top: 35px;
    cursor: pointer;
    margin-bottom: 35px
}

    .image-box .caption-text[b-9pqtwpmetj] {
        top: 0;
        position: absolute;
        color: white;
        font-size: 20px;
        margin: 10px;
        border-radius: 5px;
    }

    .image-box img[b-9pqtwpmetj] {
        transition: all 0.3s;
        display: block;
        object-fit: cover;
        height: auto;
        transform: scale(1);
    }

    .image-box:hover img[b-9pqtwpmetj] {
        transform: scale(1.1);
    }
/* /Userinterface/Layout/WebsiteLayout.razor.rz.scp.css */

[b-ulfldf46dp]#website-layout {
}



/* /Userinterface/Pages/Admin/Invoice/CreateInvoice.razor.rz.scp.css */
/* /Userinterface/Pages/Admin/Invoice/ViewInvoices.razor.rz.scp.css */


[b-242pmde4v1].view-facturen .rz-chkbox-box {
    cursor: default !important;
}

    [b-242pmde4v1].view-facturen .rz-chkbox-box:hover {
        border-color: var(--rz-base-300);
    }
/* /Userinterface/Pages/Games.razor.rz.scp.css */
/* Modern Games Page Styling */

.modern-games-page[b-556hodcgom] {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    padding-bottom: 4rem;
}

/* Header Section */
.games-header[b-556hodcgom] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 4rem 0 5rem;
    position: relative;
    overflow: hidden;
}

.games-header[b-556hodcgom]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
}

.header-content[b-556hodcgom] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.page-title[b-556hodcgom] {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: white;
    margin: 0 0 1rem 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
}

.page-subtitle[b-556hodcgom] {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-weight: 400;
}

/* Games Grid */
.games-grid[b-556hodcgom] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    gap: 2rem;
    margin-top: 3rem;
    animation: fadeIn-b-556hodcgom 0.6s ease-out;
}

@keyframes fadeIn-b-556hodcgom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Game Card */
.game-card[b-556hodcgom] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    animation: slideUp-b-556hodcgom 0.5s ease-out backwards;
}

.game-card:nth-child(1)[b-556hodcgom] { animation-delay: 0.1s; }
.game-card:nth-child(2)[b-556hodcgom] { animation-delay: 0.2s; }
.game-card:nth-child(3)[b-556hodcgom] { animation-delay: 0.3s; }
.game-card:nth-child(4)[b-556hodcgom] { animation-delay: 0.4s; }
.game-card:nth-child(5)[b-556hodcgom] { animation-delay: 0.5s; }
.game-card:nth-child(6)[b-556hodcgom] { animation-delay: 0.6s; }

@keyframes slideUp-b-556hodcgom {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.game-card:hover[b-556hodcgom] {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Game Image */
.game-image-container[b-556hodcgom] {
    position: relative;
    width: 100%;
    padding-bottom: 60%;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.game-image[b-556hodcgom] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-card:hover .game-image[b-556hodcgom] {
    transform: scale(1.08);
}

.image-overlay[b-556hodcgom] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
}

.game-card:hover .image-overlay[b-556hodcgom] {
    opacity: 1;
}

.category-badge[b-556hodcgom] {
    background: white;
    color: #333;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Game Content */
.game-content[b-556hodcgom] {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.game-title[b-556hodcgom] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.game-description[b-556hodcgom] {
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.7;
    flex: 1;
}

.game-description::v-deep br[b-556hodcgom] {
    display: block;
    content: "";
    margin: 0.5rem 0;
}

/* Empty State */
.empty-state[b-556hodcgom] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 5rem 2rem;
    animation: fadeIn-b-556hodcgom 0.5s ease-out;
}

.empty-icon[b-556hodcgom] {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.empty-icon i[b-556hodcgom] {
    font-size: 3.5rem;
    color: white;
}

.empty-title[b-556hodcgom] {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 1rem 0;
}

.empty-text[b-556hodcgom] {
    font-size: 1.125rem;
    color: #718096;
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .games-header[b-556hodcgom] {
        padding: 3rem 0 4rem;
    }
    
    .page-title[b-556hodcgom] {
        font-size: 2.5rem;
    }
    
    .page-subtitle[b-556hodcgom] {
        font-size: 1.1rem;
    }
    
    .games-grid[b-556hodcgom] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2rem;
    }
    
    .game-card[b-556hodcgom] {
        border-radius: 16px;
    }
    
    .game-content[b-556hodcgom] {
        padding: 1.5rem;
    }
    
    .game-title[b-556hodcgom] {
        font-size: 1.5rem;
    }
    
    .game-description[b-556hodcgom] {
        font-size: 0.95rem;
    }
    
    .empty-state[b-556hodcgom] {
        padding: 3rem 1rem;
    }
    
    .empty-icon[b-556hodcgom] {
        width: 100px;
        height: 100px;
    }
    
    .empty-icon i[b-556hodcgom] {
        font-size: 3rem;
    }
    
    .empty-title[b-556hodcgom] {
        font-size: 1.5rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .games-grid[b-556hodcgom] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .games-grid[b-556hodcgom] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Loading Skeleton (optional) */
.game-card.skeleton[b-556hodcgom] {
    pointer-events: none;
}

.game-card.skeleton .game-image-container[b-556hodcgom],
.game-card.skeleton .game-title[b-556hodcgom],
.game-card.skeleton .game-description[b-556hodcgom] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-556hodcgom 1.5s infinite;
}

@keyframes skeleton-loading-b-556hodcgom {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .game-card[b-556hodcgom] {
        border: 2px solid #000;
    }
    
    .game-title[b-556hodcgom] {
        color: #000;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .game-card[b-556hodcgom],
    .game-image[b-556hodcgom],
    .image-overlay[b-556hodcgom],
    .empty-state[b-556hodcgom],
    .games-grid[b-556hodcgom] {
        animation: none !important;
        transition: none !important;
    }
    
    .game-card:hover[b-556hodcgom] {
        transform: none;
    }
    
    .game-card:hover .game-image[b-556hodcgom] {
        transform: none;
    }
}

/* Print Styles */
@media print {
    .games-header[b-556hodcgom] {
        background: white;
        padding: 1rem 0;
    }
    
    .page-title[b-556hodcgom],
    .page-subtitle[b-556hodcgom] {
        color: black;
    }
    
    .game-card[b-556hodcgom] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }
    
    .image-overlay[b-556hodcgom] {
        display: none;
    }
}
/* /Userinterface/Pages/Home.razor.rz.scp.css */
/* Homepage hero.
   Mobile first: the media sits on top and the sales panel below it, joined by a vertical
   gradient so the two read as one block. From 992px they sit side by side and the same
   gradient runs horizontally. The video is only ever requested on the wide layout. */

.hero[b-im52pf9yfc] {
    --panel: #013b4d;
    --panel-deep: #00212c;
    /* Horizontal focal point on wide screens, biased left so the subject lands in the
       part the fade does not veil. Phones use a pre-cropped asset instead. */
    --focus-x: 85%;
    /* Shared by the eyebrow and the Google score so the two pills match. Also the
       reserved height for the score widget, which loads after paint. */
    --pill-height: 34px;

    position: relative;
    display: grid;
    /* Kept short on phones so the booking button clears the fold on a 844px screen. */
    grid-template-rows: 30svh auto;
    background: var(--panel-deep);
    overflow: hidden;
    /* Contain the panel's z-index. The section below is pulled up 6px by an existing
       translateY, and without a stacking context here the panel painted over that overlap
       while the media column did not, leaving a step at the column boundary. */
    isolation: isolate;
}

.social-overlays-host[b-im52pf9yfc] {
    display: none;
}

@media (min-width: 992px) {
    .social-overlays-host[b-im52pf9yfc] {
        display: block;
    }
}

/* ---------- media ---------- */

/* min-width: 0 is load-bearing. An fr track is minmax(auto, Nfr) and the auto floor is
   min-content, so the video's intrinsic 1280px would otherwise claim the whole column and
   crush the sales panel. */
.hero > *[b-im52pf9yfc] {
    min-width: 0;
}

/* Phones get a poster cropped to the arena, matching the framing of hero-640.mp4, so the
   still and the clip are interchangeable and no CSS zoom is needed to find the subject. */
.hero__media[b-im52pf9yfc] {
    position: relative;
    overflow: hidden;
    background-image: url('/Video/hero-poster-mobile.webp');
    background-position: center;
    background-size: cover;
}

/* Rendered on every layout but left without a src until initHeroVideo() decides the
   screen is wide enough, so phones fetch nothing. Never hidden with CSS: a hidden video
   still downloads. */
.hero__video[b-im52pf9yfc] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
}

.hero__video.is-playing[b-im52pf9yfc] {
    opacity: 1;
}

/* The soft edge. Sits above the media, bleeding the panel colour upwards so there is
   never a hard seam between footage and copy. */
.hero__fade[b-im52pf9yfc] {
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 42%;
    /* Eased rather than linear: a straight ramp still reads as a band against bright
       footage, which is exactly where the seam was showing. */
    background: linear-gradient(to bottom,
        rgba(1, 59, 77, 0) 0%,
        rgba(1, 59, 77, .30) 32%,
        rgba(1, 59, 77, .72) 60%,
        rgba(1, 59, 77, .93) 80%,
        var(--panel) 97%);
    pointer-events: none;
}

/* ---------- panel ---------- */

.hero__panel[b-im52pf9yfc] {
    position: relative;
    z-index: 1;
    background: var(--panel);
    color: #fff;
    padding: 0 6vw 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .85rem;
}

/* Eyebrow left, Google score right, wrapping rather than squeezing on narrow phones. */
.hero__meta[b-im52pf9yfc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
}

/* A bed for the Google score, shaped like the eyebrow pill so the two read as a pair.
   The widget currently paints its own white background, which carries the contrast on
   its own; this translucent fill only shows if that is ever set to transparent.
   Sized ahead of time because it loads after paint and would otherwise push the
   headline down. */
.hero__rating[b-im52pf9yfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pill-height);
    min-width: 150px;
    padding: 0 .8rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
}

.hero__eyebrow[b-im52pf9yfc] {
    display: inline-flex;
    align-items: center;
    /* Height rather than vertical padding, so it matches the score pill exactly whatever
       the widget inside that one turns out to measure. */
    min-height: var(--pill-height);
    /* Narrower than it looks: the separator spans carry their own space either side. */
    gap: .4rem;
    padding: 0 1rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* The site's activity colours, so the three arenas are recognisable here before the
   visitor has read a word. Exactly the values the arena cards use.

   Measured against this pill, the red reaches 2.5:1 and the others are not much better,
   under the 4.5:1 that small text is meant to meet. They are decorative labels repeating
   what the logo directly above already says, so the identity is worth more here than the
   ratio, but a paler tint would pass if that call is ever revisited. */
.hero__tag--robo[b-im52pf9yfc] {
    color: #ff4757;
}

.hero__tag--rc[b-im52pf9yfc] {
    color: #ffa502;
}

.hero__tag--vr[b-im52pf9yfc] {
    color: #2ed573;
}

.hero__tag-sep[b-im52pf9yfc] {
    color: rgba(255, 255, 255, .4);
}

.hero__title[b-im52pf9yfc] {
    font-size: clamp(1.9rem, 7vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.hero__sub[b-im52pf9yfc] {
    font-size: clamp(1rem, 3.6vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
    margin: 0;
    max-width: 52ch;
}

.hero__price[b-im52pf9yfc] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: clamp(1.15rem, 4.4vw, 1.5rem);
    font-weight: 700;
}

.hero__price-vat[b-im52pf9yfc] {
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .7);
}

/* ---------- actions ---------- */

.hero__actions[b-im52pf9yfc] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .35rem;
}

.hero__btn[b-im52pf9yfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .95rem 1.9rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.hero__btn--primary[b-im52pf9yfc] {
    background: var(--bs-primary, #00b1e5);
    color: #04222c;
    box-shadow: 0 6px 20px rgba(0, 177, 229, .35);
}

.hero__btn--secondary[b-im52pf9yfc] {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .55);
}

.hero__btn:hover[b-im52pf9yfc],
.hero__btn:focus-visible[b-im52pf9yfc] {
    transform: translateY(-3px);
    text-decoration: none;
}

.hero__btn--primary:hover[b-im52pf9yfc],
.hero__btn--primary:focus-visible[b-im52pf9yfc] {
    color: #04222c;
    box-shadow: 0 12px 30px rgba(0, 177, 229, .45);
}

.hero__btn--secondary:hover[b-im52pf9yfc],
.hero__btn--secondary:focus-visible[b-im52pf9yfc] {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* ---------- wide layout ---------- */

@media (min-width: 992px) {
    .hero[b-im52pf9yfc] {
        grid-template-rows: none;
        /* 60/40 in favour of the footage: the panel only needs to hold a headline,
           one line of copy, a price and two buttons. */
        grid-template-columns: 3fr 2fr;
        min-height: 82svh;
    }

    /* Wide screens show the full frame and let the fade do the cropping, so both the
       still and the clip are pulled left by --focus-x to keep the subject in the clear. */
    .hero__media[b-im52pf9yfc] {
        background-image: url('/Video/hero-poster.webp');
        background-position: var(--focus-x) center;
        background-size: cover;
    }

    .hero__video[b-im52pf9yfc] {
        object-position: var(--focus-x) center;
    }

    /* Gradient turns horizontal and overlaps the panel edge, so the seam disappears
       instead of landing on the column boundary. */
    .hero__fade[b-im52pf9yfc] {
        inset: 0 -1px 0 auto;
        width: 55%;
        height: auto;
        background: linear-gradient(to right,
            rgba(1, 59, 77, 0) 0%,
            rgba(1, 59, 77, .30) 32%,
            rgba(1, 59, 77, .72) 60%,
            rgba(1, 59, 77, .93) 80%,
            var(--panel) 97%);
    }

    .hero__panel[b-im52pf9yfc] {
        padding: 4rem 5rem 4rem 3rem;
        gap: 1.35rem;
    }

    .hero__actions[b-im52pf9yfc] {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 1400px) {
    .hero__panel[b-im52pf9yfc] {
        padding-right: 8rem;
    }
}

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
    .hero__btn[b-im52pf9yfc] {
        transition: none;
    }

    .hero__btn:hover[b-im52pf9yfc],
    .hero__btn:focus-visible[b-im52pf9yfc] {
        transform: none;
    }
}

/* ==========================================================================
   Page sections below the hero
   ========================================================================== */

.section[b-im52pf9yfc] {
    position: relative;
    overflow: hidden;
    /* Own stacking context, so the corner artwork below can sit at a negative z-index:
       above this section's background, but behind everything in the section. Without it
       the artwork would resolve against the root and disappear under the background. */
    isolation: isolate;
    padding: 3.25rem 6vw;
    background: #fff;
    color: #1a202c;
}

/* Kinked shards at the edges of the dark bands, the gesture the brand artwork uses.
   Decoration only: pseudo-elements, so they never reach the accessibility tree, and
   pointer-events none, so they can never swallow a click.

   Two rules decide where they may appear, and both matter:

   Only on the dark bands, and only at an edge where the next section is a different
   colour. A shard sitting where white meets white has nothing to end against, so its
   cut-off is visible and it reads as a sticker rather than as texture.

   Each is masked so it dissolves as it travels into the section: the shape has a hard
   clip-path edge, and without the fade that edge is the first thing the eye finds. */
.section--dark[b-im52pf9yfc]::before,
.section--dark[b-im52pf9yfc]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    /* Behind the section's content. ::after is the last child, so at the default z-index
       it painted over the cards rather than behind them. */
    z-index: -1;
    background: rgba(0, 177, 229, .09);
}

/* Top edge, running in from the left. */
.section--dark[b-im52pf9yfc]::before {
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 32rem;
    block-size: 13rem;
    clip-path: polygon(0% 0%, 38% 42%, 100% 58%, 100% 72%, 34% 55%, 0% 14%);
    -webkit-mask-image: linear-gradient(115deg, #000, transparent 72%);
    mask-image: linear-gradient(115deg, #000, transparent 72%);
}

/* Bottom edge, running in from the right, kinked the other way so the pair never reads
   as one shape mirrored. */
.section--dark[b-im52pf9yfc]::after {
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: 26rem;
    block-size: 11rem;
    background: rgba(255, 255, 255, .05);
    clip-path: polygon(100% 100%, 54% 56%, 0% 34%, 0% 22%, 58% 44%, 100% 86%);
    -webkit-mask-image: linear-gradient(-65deg, #000, transparent 70%);
    mask-image: linear-gradient(-65deg, #000, transparent 70%);
}

/* Every mark below is drawn once and used once. Sharing one shape across sections is what
   made the first attempt read as a repeating pattern rather than as texture, so each edge
   differs in kind as well as in size: some are a single straight streak, some a pair of
   parallel lines, some bend, and they do not all enter from the same corner.

   Straight and paired marks are gradient stripes with the clip-path switched off; bent
   ones are a solid fill cut by a polygon. */

/* Arenas, top: two parallel straight lines, shallow. */
.arenas[b-im52pf9yfc]::before {
    inline-size: 30rem;
    block-size: 12rem;
    background-color: transparent;
    clip-path: none;
    background-image:
        linear-gradient(112deg, transparent 0 38%, rgba(0, 177, 229, .10) 38% 43%, transparent 43%),
        linear-gradient(112deg, transparent 0 52%, rgba(0, 177, 229, .055) 52% 59%, transparent 59%);
    -webkit-mask-image: linear-gradient(112deg, #000, transparent 70%);
    mask-image: linear-gradient(112deg, #000, transparent 70%);
}

/* Arenas, bottom: one bent shard, the sharpest angle of the set. */
.arenas[b-im52pf9yfc]::after {
    inline-size: 22rem;
    block-size: 14rem;
    clip-path: polygon(100% 100%, 48% 70%, 66% 36%, 22% 8%, 12% 22%, 44% 44%, 26% 78%);
    -webkit-mask-image: linear-gradient(-58deg, #000, transparent 62%);
    mask-image: linear-gradient(-58deg, #000, transparent 62%);
}

/* Locations, top: a single straight streak, nearly flat, so this band reads calmer than
   the one above it. */
.locations[b-im52pf9yfc]::before {
    inline-size: 40rem;
    block-size: 14rem;
    background-color: transparent;
    clip-path: none;
    background-image:
        linear-gradient(98deg, transparent 0 44%, rgba(0, 177, 229, .09) 44% 52%, transparent 52%);
    -webkit-mask-image: linear-gradient(98deg, #000, transparent 80%);
    mask-image: linear-gradient(98deg, #000, transparent 80%);
}

/* Locations, bottom: a bent band running back the other way. */
.locations[b-im52pf9yfc]::after {
    inline-size: 30rem;
    block-size: 13rem;
    clip-path: polygon(100% 100%, 62% 48%, 0% 40%, 0% 28%, 66% 36%, 100% 84%);
    -webkit-mask-image: linear-gradient(-72deg, #000, transparent 68%);
    mask-image: linear-gradient(-72deg, #000, transparent 68%);
}

/* FAQ: enters from the top right instead, a narrow double-bent splinter. This band is
   mostly text, so it stays the smallest mark on the page. */
.faq[b-im52pf9yfc]::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
    inline-size: 20rem;
    block-size: 9rem;
    background-color: rgba(0, 177, 229, .07);
    clip-path: polygon(100% 0%, 70% 30%, 46% 26%, 0% 66%, 0% 78%, 52% 40%, 74% 44%, 100% 16%);
    -webkit-mask-image: linear-gradient(-126deg, #000, transparent 60%);
    mask-image: linear-gradient(-126deg, #000, transparent 60%);
}

/* Contact: bottom left rather than right, two straight lines at a steeper angle. Last
   mark on the page, so it runs the longest. */
.contact[b-im52pf9yfc]::after {
    inset-inline-end: auto;
    inset-inline-start: 0;
    inline-size: 34rem;
    block-size: 16rem;
    background-color: transparent;
    clip-path: none;
    background-image:
        linear-gradient(64deg, transparent 0 40%, rgba(255, 255, 255, .055) 40% 45%, transparent 45%),
        linear-gradient(64deg, transparent 0 56%, rgba(0, 177, 229, .08) 56% 62%, transparent 62%);
    -webkit-mask-image: linear-gradient(44deg, #000, transparent 76%);
    mask-image: linear-gradient(44deg, #000, transparent 76%);
}

/* The FAQ sits directly on top of the contact block and both are dark, so there is no
   colour change at its lower edge for a shard to break. */
.faq[b-im52pf9yfc]::after {
    content: none;
}

/* Same boundary, seen from the other side. */
.contact[b-im52pf9yfc]::before {
    content: none;
}

.section--dark[b-im52pf9yfc] {
    background: var(--panel-deep, #00212c);
    color: #fff;
}


.section__head[b-im52pf9yfc] {
    max-width: 62ch;
    margin: 0 auto 2rem;
    text-align: center;
}

.section__title[b-im52pf9yfc] {
    font-size: clamp(1.5rem, 5.5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 .6rem;
}

.section__intro[b-im52pf9yfc] {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: #4a5568;
}

.section--dark .section__intro[b-im52pf9yfc] {
    color: rgba(255, 255, 255, .82);
}

.section--dark a[b-im52pf9yfc] {
    color: var(--bs-primary, #00b1e5);
}

/* ---------- social proof strip ---------- */

.proof[b-im52pf9yfc] {
    background: #fff;
    padding: 1.75rem 6vw 2rem;
    text-align: center;
}

.proof__label[b-im52pf9yfc] {
    margin: 0 0 .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8a97a5;
}

/* An Elfsight widget fills whatever box it is handed. Left alone on a 1920 screen they
   ran about 1700px wide while every section this page builds itself sits between 860 and
   1200, which made the three widgets the only things touching the edges. */
.widget-wrap[b-im52pf9yfc] {
    max-width: 1200px;
    margin: 0 auto;
}

.proof__logos[b-im52pf9yfc] {
    min-height: 70px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------- audience cards ---------- */

/* Off-screen rather than display:none, so the radios still take keyboard focus and the
   pair still behaves as one radio group. */
.audiences__tab-input[b-im52pf9yfc] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.audiences__tabs[b-im52pf9yfc] {
    display: flex;
    justify-content: center;
    gap: .5rem;
    max-width: 1200px;
    margin: 0 auto 1.5rem;
}

.audiences__tab[b-im52pf9yfc] {
    padding: .55rem 1.3rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 25px;
    background: #fff;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.audiences__groups[b-im52pf9yfc] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Only the chosen group is on the page, at every width. */
#audience-tab-private:checked ~ .audiences__groups .audience-group[data-group="business"][b-im52pf9yfc],
#audience-tab-business:checked ~ .audiences__groups .audience-group[data-group="private"][b-im52pf9yfc] {
    display: none;
}

/* ---------- group selector, wide screens ---------- */

.audiences__select[b-im52pf9yfc] {
    display: none;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;
    margin: 0 auto 1.5rem;
}

.audience-group__head[b-im52pf9yfc] {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--line, #e3e8ec);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.audience-group__head:hover[b-im52pf9yfc] {
    border-color: var(--bs-primary, #00b1e5);
}

.audience-group__icon[b-im52pf9yfc] {
    flex: none;
    color: var(--bs-primary, #00b1e5);
    font-size: 1.6rem;
    line-height: 1;
}

.audience-group__text[b-im52pf9yfc] {
    flex: 1;
}

.audience-group__title[b-im52pf9yfc] {
    display: block;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.audience-group__intro[b-im52pf9yfc] {
    display: block;
    margin: .15rem 0 0;
    color: #4a5568;
    font-size: .95rem;
    line-height: 1.5;
    max-width: 44ch;
}

/* Empty ring until its group is the open one, then a filled tick. */
.audience-group__mark[b-im52pf9yfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 26px;
    block-size: 26px;
    border: 2px solid rgba(0, 0, 0, .18);
    border-radius: 50%;
    color: transparent;
    font-size: .75rem;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}

#audience-tab-private:checked ~ .audiences__select [data-group="private"][b-im52pf9yfc],
#audience-tab-business:checked ~ .audiences__select [data-group="business"][b-im52pf9yfc] {
    border-color: var(--bs-primary, #00b1e5);
    box-shadow: 0 4px 16px rgba(0, 177, 229, .16);
}

#audience-tab-private:checked ~ .audiences__select [data-group="private"] .audience-group__mark[b-im52pf9yfc],
#audience-tab-business:checked ~ .audiences__select [data-group="business"] .audience-group__mark[b-im52pf9yfc] {
    border-color: var(--bs-primary, #00b1e5);
    background: var(--bs-primary, #00b1e5);
    color: #fff;
}

.audiences__tab-input:focus-visible ~ .audiences__select .audience-group__head[b-im52pf9yfc] {
    outline: 2px solid var(--bs-primary, #00b1e5);
    outline-offset: 2px;
}

.audiences__grid[b-im52pf9yfc] {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.audience-card[b-im52pf9yfc] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.5rem;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    text-decoration: none;
    color: inherit;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s cubic-bezier(.4, 0, .2, 1);
}

.audience-card:hover[b-im52pf9yfc],
.audience-card:focus-visible[b-im52pf9yfc] {
    transform: translateY(-6px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
    text-decoration: none;
    color: inherit;
}

.audience-card__icon[b-im52pf9yfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 50%;
    background: rgba(0, 177, 229, .12);
    color: var(--bs-primary, #00b1e5);
    font-size: 1.2rem;
}

.audience-card__title[b-im52pf9yfc] {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.audience-card__body[b-im52pf9yfc] {
    margin: 0;
    flex: 1;
    color: #4a5568;
    line-height: 1.6;
    font-size: .96rem;
}

.audience-card__price[b-im52pf9yfc] {
    font-weight: 700;
    font-size: 1.05rem;
}

.audience-card__price small[b-im52pf9yfc] {
    font-weight: 500;
    font-size: .74rem;
    color: #718096;
    margin-left: .35rem;
}

.audience-card__more[b-im52pf9yfc] {
    font-weight: 700;
    font-size: .92rem;
    color: var(--bs-primary, #00b1e5);
}

.audience-card__more i[b-im52pf9yfc] {
    transition: transform .3s ease;
}

.audience-card:hover .audience-card__more i[b-im52pf9yfc] {
    transform: translateX(4px);
}

/* Two ways to pick the same group: bare pills on a phone, the full headings from 992px
   up. Only one of the two is ever on the page. */
@media (max-width: 991.98px) {
    .audiences__select[b-im52pf9yfc] {
        display: none;
    }

    #audience-tab-private:checked ~ .audiences__tabs [for="audience-tab-private"][b-im52pf9yfc],
    #audience-tab-business:checked ~ .audiences__tabs [for="audience-tab-business"][b-im52pf9yfc] {
        border-color: var(--bs-primary, #00b1e5);
        background: var(--bs-primary, #00b1e5);
        color: #fff;
    }

    /* Keyboard users get the same ring the rest of the page uses. */
    .audiences__tab-input:focus-visible ~ .audiences__tabs [for="audience-tab-private"][b-im52pf9yfc],
    .audiences__tab-input:focus-visible ~ .audiences__tabs [for="audience-tab-business"][b-im52pf9yfc] {
        outline: 2px solid var(--bs-primary, #00b1e5);
        outline-offset: 2px;
    }
}

@media (min-width: 992px) {
    .audiences__tabs[b-im52pf9yfc] {
        display: none;
    }

    .audiences__select[b-im52pf9yfc] {
        display: grid;
    }
}

/* ---------- on-location banner ---------- */

.audiences__banner[b-im52pf9yfc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 1200px;
    margin: 2.5rem auto 0;
    padding: 1.6rem;
    border-radius: 20px;
    background: linear-gradient(120deg, #00212c, #013b4d);
    color: #fff;
    text-decoration: none;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s cubic-bezier(.4, 0, .2, 1);
}

.audiences__banner:hover[b-im52pf9yfc],
.audiences__banner:focus-visible[b-im52pf9yfc] {
    transform: translateY(-4px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
    color: #fff;
    text-decoration: none;
}

.audiences__banner-icon[b-im52pf9yfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: 1.2rem;
}

.audiences__banner-text[b-im52pf9yfc] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.audiences__banner-title[b-im52pf9yfc] {
    font-size: 1.25rem;
    font-weight: 800;
}

.audiences__banner-sub[b-im52pf9yfc] {
    color: rgba(255, 255, 255, .75);
    font-size: .95rem;
}

.audiences__banner-btn[b-im52pf9yfc] {
    padding: .6rem 1.4rem;
    border-radius: 25px;
    background: var(--bs-primary, #00b1e5);
    font-weight: 700;
    font-size: .95rem;
}

/* ---------- how it works ---------- */

.how__steps[b-im52pf9yfc] {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1100px;
    display: grid;
    /* Wide enough for the arrows between the cards to read as their own step. */
    gap: 2.5rem;
    grid-template-columns: 1fr;
    counter-reset: step;
}

.how__lead[b-im52pf9yfc] {
    margin: .4rem auto 0;
    max-width: 60ch;
    color: #5b6b78;
    font-size: .95rem;
}

/* Same card language as the audience cards further up: white, soft shadow, lifts on
   hover. The steps used to be flat grey panels, which read as disabled next to them. */
.how__step[b-im52pf9yfc] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    /* Room at the top for the number banner: it is positioned out of flow, so the padding
       is the only thing keeping the title and its icon clear of it. */
    padding: 3.8rem 1.5rem 1.6rem;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s cubic-bezier(.4, 0, .2, 1);
}

.how__step:hover[b-im52pf9yfc] {
    transform: translateY(-4px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}

.how__step-icon[b-im52pf9yfc] {
    flex: none;
    color: var(--bs-primary, #00b1e5);
    font-size: 1.35rem;
    line-height: 1;
}

/* The arrow between two steps. Drawn as a pseudo-element sitting in the grid gap rather
   than as its own element, so the list still holds exactly three items: an arrow between
   the li's would read as a list entry to a screen reader, and the sequence is already
   carried by the numbers. Hidden on one column, where there is no gap to sit in and the
   stacking order says the same thing. */
/* Width and offset both equal the grid gap, so the arrow spans the space between two
   cards exactly and centres itself in it. Keep the two in step if the gap changes. */
.how__step:not(:last-child)[b-im52pf9yfc]::after {
    content: "\2192";
    display: none;
    position: absolute;
    inset-inline-end: -2.5rem;
    inset-block-start: 50%;
    inline-size: 2.5rem;
    transform: translateY(-50%);
    color: rgba(0, 177, 229, .65);
    font-size: 2rem;
    line-height: 1;
    text-align: center;
}

/* Number and title on one line: the title carries the meaning, the number only says
   where in the sequence it sits, so it reads as a label on the title rather than a
   heading of its own. */
.how__step-head[b-im52pf9yfc] {
    display: flex;
    align-items: center;
    gap: .65rem;
}

/* Slanted banner across the top-left corner, the way the design draws it. The skew is
   undone on the digits so they stay upright. */
.how__step-number[b-im52pf9yfc] {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 0;
    padding: .2rem 1.1rem .2rem 1.5rem;
    background: var(--bs-primary, #00b1e5);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .02em;
    transform: skewX(-12deg);
    transform-origin: left center;
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
}


.how__step-title[b-im52pf9yfc] {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.how__step-body[b-im52pf9yfc] {
    margin: 0;
    color: #4a5568;
    line-height: 1.6;
    font-size: .96rem;
}

/* ---------- locations ---------- */

.locations__grid[b-im52pf9yfc] {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    max-width: 1100px;
    margin: 0 auto;
}

.location-card[b-im52pf9yfc] {
    padding: 1.8rem;
    border-radius: 20px;
    /* Opaque, not a white wash over the band. The section's corner lines pass behind the
       cards, and a translucent surface would let them show through the content. This is
       the exact colour the 5% wash produced over rgb(0, 33, 44), so nothing else moves. */
    background: rgb(13, 44, 55);
    /* Blue outline rather than a white one: on the dark band it reads as part of the
       brand instead of as a plain divider. */
    border: 1px solid rgba(0, 177, 229, .35);
    transition: border-color .3s ease, background .3s ease;
}

.location-card:hover[b-im52pf9yfc] {
    border-color: rgba(0, 177, 229, .7);
    background: rgb(20, 51, 61);
}

.location-card__title[b-im52pf9yfc] {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 .8rem;
}

.location-card__icon[b-im52pf9yfc] {
    flex: none;
    color: var(--bs-primary, #00b1e5);
    font-size: 1.7rem;
    line-height: 1;
}

.location-card p[b-im52pf9yfc] {
    margin: 0 0 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
}

.location-card__link[b-im52pf9yfc] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    text-decoration: none;
}

.location-card__link i[b-im52pf9yfc] {
    transition: transform .3s ease;
}

.location-card:hover .location-card__link i[b-im52pf9yfc] {
    transform: translateX(4px);
}

/* ---------- reviews, faq, instagram ---------- */

.reviews[b-im52pf9yfc],
.instagram[b-im52pf9yfc] {
    overflow: hidden;
}

/* ---------- sticky offer bar ----------
   Anchored to the top, where the page navigation has already scrolled away. Hidden until
   the hero's sales panel leaves the viewport, then it slides down from the same edge it
   came from and retracts the same way. visibility keeps it out of the tab order and the
   accessibility tree while it is off screen, and is delayed so it does not cut the slide
   short on the way out. */

.booking-bar[b-im52pf9yfc] {
    position: fixed;
    inset: 0 0 auto 0;
    background: var(--panel-deep, #00212c);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    /* Below the cookie banner on purpose: consent must never be obstructed. */
    z-index: 1020;

    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s ease,
                visibility 0s linear .35s;
}

.booking-bar.is-visible[b-im52pf9yfc] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s ease,
                visibility 0s;
}

.booking-bar__inner[b-im52pf9yfc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: .6rem 6vw;
}

.booking-bar__text[b-im52pf9yfc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.booking-bar__title[b-im52pf9yfc] {
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-bar__price[b-im52pf9yfc] {
    color: rgba(255, 255, 255, .88);
    font-weight: 700;
    font-size: .92rem;
}

.booking-bar__price small[b-im52pf9yfc] {
    font-weight: 500;
    font-size: .72rem;
    color: rgba(255, 255, 255, .62);
    margin-left: .3rem;
}

.booking-bar__btn[b-im52pf9yfc] {
    flex: 0 0 auto;
    padding: .65rem 1.6rem;
    border-radius: 25px;
    background: var(--bs-primary, #00b1e5);
    color: #04222c;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow .3s ease;
}

.booking-bar__btn:hover[b-im52pf9yfc],
.booking-bar__btn:focus-visible[b-im52pf9yfc] {
    color: #04222c;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 177, 229, .45);
}

@media (prefers-reduced-motion: reduce) {
    .booking-bar[b-im52pf9yfc],
    .booking-bar.is-visible[b-im52pf9yfc] {
        transition: opacity .2s ease, visibility 0s;
        transform: none;
    }

    .booking-bar:not(.is-visible)[b-im52pf9yfc] {
        opacity: 0;
        visibility: hidden;
    }
}

/* ---------- wide layout ---------- */

@media (min-width: 768px) {
    .audiences__grid[b-im52pf9yfc] {
        grid-template-columns: repeat(2, 1fr);
    }

    .audiences__banner[b-im52pf9yfc] {
        flex-direction: row;
        align-items: center;
        gap: 1.3rem;
        padding: 1.6rem 2rem;
    }

    .how__steps[b-im52pf9yfc],
    .locations__grid[b-im52pf9yfc] {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Three across, so there is a gap for the arrows to sit in. */
    .how__step:not(:last-child)[b-im52pf9yfc]::after {
        display: block;
    }

    .locations__grid[b-im52pf9yfc] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .section[b-im52pf9yfc] {
        padding: 4.5rem 5vw;
    }

    /* One group has the whole width to itself, so its three cards sit on one row, all
       the same size. */
    .audiences__grid[b-im52pf9yfc] {
        grid-template-columns: repeat(3, 1fr);
    }

    .audience-card[b-im52pf9yfc] {
        padding: 1.75rem;
    }

    .booking-bar__inner[b-im52pf9yfc] {
        padding: .7rem 5vw;
    }

    .booking-bar__text[b-im52pf9yfc] {
        flex-direction: row;
        align-items: baseline;
        gap: 1rem;
    }
}
/* /Userinterface/Pages/InfoEnTarieven.razor.rz.scp.css */
.header-title h2[b-481z8ota7u] {
    position: relative;
    margin-bottom: 45px;
    display: inline-block;
    font-weight: 600;
    line-height: 1;
}

    .header-title h2[b-481z8ota7u]::before {
        content: "";
        position: absolute;
        left: 30px;
        width: 60px;
        height: 2px;
        background: #0ab5e6;
        bottom: -25px;
        margin-left: -30px;
    }

/* Custom tab styling */
[b-481z8ota7u].custom-tab .rz-tabview-nav li a, .rz-tabview-nav li a[b-481z8ota7u] {
    font-size: 35px !important;
    font-weight: bold!important;
}

[b-481z8ota7u].custom-tab .rz-tabview-top > .rz-tabview-nav {
    justify-content: center;
}

[b-481z8ota7u].custom-tab .rz-tabview-panel {
    padding: 0.5em;
}
/* New professional styling */
.hero-info-section[b-481z8ota7u] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}


.info-details-section .card[b-481z8ota7u] {
    border-radius: 15px;
    transition: all 0.3s ease;
}

.info-details-section .card:hover[b-481z8ota7u] {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

.schedule-container[b-481z8ota7u] {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem;
}

.schedule-container .border-bottom:last-child[b-481z8ota7u] {
    border-bottom: none !important;
}

.activities-showcase[b-481z8ota7u] {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.activity-description[b-481z8ota7u] {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.carousel-container[b-481z8ota7u] {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.faq-section h2[b-481z8ota7u],
.pricing-section h2[b-481z8ota7u] {
    background: linear-gradient(135deg, #667eea 0%, #0d9bd4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sponsors-section[b-481z8ota7u] {
    border-top: 1px solid #e9ecef;
}


/* Card enhancements */
.card[b-481z8ota7u] {
    border: none;
    transition: all 0.3s ease;
}

.card-title[b-481z8ota7u] {
    color: #2c3e50;
}

.text-primary[b-481z8ota7u] {
    color: #0d9bd4 !important;
}

.text-success[b-481z8ota7u] {
    color: #2ed573 !important;
}

.text-info[b-481z8ota7u] {
    color: #0d9bd4 !important;
}

/* Alert styling */
.alert-info[b-481z8ota7u] {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border: none;
    border-radius: 10px;
}

/* List styling */
.list-unstyled li[b-481z8ota7u] {
    transition: all 0.2s ease;
    padding: 0.25rem 0;
}

.list-unstyled li:hover[b-481z8ota7u] {
    transform: translateX(5px);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .display-4[b-481z8ota7u],
    .display-5[b-481z8ota7u] {
        font-size: 2rem;
    }
    
    [b-481z8ota7u].custom-tab .rz-tabview-nav li a {
        font-size: 20px !important;
       
    }
}