body {
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
    transition: background-color var(--transition), color var(--transition)
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto
}

.skip-link {
    position: fixed;
    top: -80px;
    left: 20px;
    z-index: 999;
    background: #fff;
    color: #000;
    padding: 12px 18px
}

.skip-link:focus {
    top: 12px
}

.eyebrow {
    display: block;
    color: var(--accent-text);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    margin-bottom: 18px
}

.section {
    padding-block: var(--section-space-desktop)
}

.light {
    background: var(--surface-alt);
    color: var(--text)
}

.section-title {
    font-size: clamp(2.25rem, 4vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.055em;
    max-width: 820px
}

.section-copy {
    color: var(--muted);
    max-width: 680px;
    line-height: 1.75;
    margin-top: 22px
}

.light .section-copy {
    color: var(--muted)
}

.section,
.site-header,
.submenu,
.drawer,
.service-card,
.case-card,
.lead-modal__panel,
.modal-content,
.cookie-consent,
.cookie-settings__panel,
.site-footer,
input,
textarea {
    transition-property: background-color, color, border-color;
    transition-duration: 200ms;
    transition-timing-function: ease
}

.section-head {
    margin-bottom: 44px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--bbm-orange);
    background: var(--bbm-orange);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition)
}

.button:hover {
    background: var(--bbm-orange-hover);
    transform: translateY(-2px)
}

.button--outline {
    background: transparent;
    border-color: var(--border);
    color: var(--text)
}

.icon {
    width: 24px;
    height: 24px;
    object-fit: contain
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: var(--delay, 0ms);
    will-change: opacity, transform
}

.reveal[data-reveal="left"] {
    transform: translateX(-24px)
}

.reveal[data-reveal="right"] {
    transform: translateX(24px)
}

.reveal[data-reveal="scale"] {
    transform: scale(.97)
}

html[data-scroll-direction="up"] .reveal:not(.is-visible)[data-reveal="up"] {
    transform: translateY(-18px)
}

.reveal.is-visible {
    opacity: 1;
    transform: none
}

:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 4px
}