/*
 * BVO 2026 – Complete Visual Redesign
 * Fonts  : Bebas Neue (display) · Oswald (headings) · Inter (body) · Pacifico (accent)
 * Colors : Lime #7DC242  Sky Blue #29ABE2  Dark #0d1a07
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Pacifico&display=swap');

/* ═══════════════════════════════════════
   TOKENS
═══════════════════════════════════════ */
:root {
    --lime:          #7DC242;
    --lime-lt:       #a6d96a;
    --lime-dk:       #4a8a15;
    --blue:          #29ABE2;
    --blue-lt:       #87CEEB;
    --blue-dk:       #006fa3;
    --dark:          #0d1a07;
    --dark-2:        #1c2f10;
    --off-white:     #f6fef0;
    --white:         #ffffff;
    --text:          #1a1a1a;
    --text-muted:    #666;
    --grad:          linear-gradient(135deg,#7DC242 0%,#29ABE2 100%);
    --grad-hero:     linear-gradient(135deg,rgba(125,194,66,.72) 0%,rgba(41,171,226,.72) 100%);
    --grad-dark:     linear-gradient(160deg,#0d1a07 0%,#0a1828 100%);
    --shadow-sm:     0 2px 12px rgba(0,0,0,.08);
    --shadow-md:     0 6px 28px rgba(0,0,0,.13);
    --shadow-lg:     0 16px 56px rgba(0,0,0,.2);
    --radius:        14px;
    --radius-lg:     22px;
    --radius-pill:   100px;

    /* override main.css */
    --typo-body:            'Inter', sans-serif;
    --typo-heading:         'Oswald', sans-serif;
    --color-primary:        #4a8a15;
    --color-secondary:      #006fa3;
    --color-accent:         #7DC242;
    --color-button-bg:      #7DC242;
    --color-button-bg-hover:#4a8a15;
    --color-link:           #4a8a15;
    --color-link-hover:     #29ABE2;
}

/* ═══════════════════════════════════════
   BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--off-white);
    color: var(--text);
    overflow-x: hidden;
    margin: 0;
}

img { max-width: 100%; display: block; }

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
#BVO-main-header {
    transition: background .4s ease, box-shadow .4s ease, border-color .4s ease;
    background: linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 100%);
    /* position:fixed comes from Bootstrap fixed-top — do NOT override */
}
#BVO-main-header.bvo-scrolled {
    background: rgba(10,20,5,.9) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border-bottom: 2px solid var(--lime) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(125,194,66,.12) !important;
}
/* Decorative hop in the right corner when scrolled */
#BVO-main-header.bvo-scrolled::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    background: url('../img/hop-hero.webp') center / contain no-repeat;
    opacity: .22;
    pointer-events: none;
    transition: opacity .4s ease;
}
/* Left decorative hop */
#BVO-main-header.bvo-scrolled::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
    width: 58px;
    height: 58px;
    background: url('../img/hop-hero.webp') center / contain no-repeat;
    opacity: .14;
    pointer-events: none;
    z-index: 0;
}

/* nav links */
#BVO-main-header .navbar .nav > li > a {
    font-family: 'Oswald', sans-serif !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
    letter-spacing: 1.8px;
    text-transform: uppercase !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.45);
    padding: 10px 15px !important;
    position: relative;
    transition: color .2s;
}
#BVO-main-header .navbar .nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 5px; left: 15px; right: 15px;
    height: 2px;
    background: var(--lime);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}
#BVO-main-header .navbar .nav > li > a:hover { color: var(--lime-lt) !important; }
#BVO-main-header .navbar .nav > li > a:hover::after { transform: scaleX(1); }

/* hamburger */
#BVO-main-header .navbar-toggler { color: #fff; border-color: rgba(255,255,255,.4); }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.bvo-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    clip-path: polygon(0 0,100% 0,100% 93%,0 100%);
    /* Flyer background extracted from PDF */
    background: url('../img/hero-bg.webp') center center / cover no-repeat;
    padding: 110px 5% 88px;
}

/* Subtle darkening so text stays readable */
.bvo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.18);
    z-index: 1;
}

/* ── Hop illustration — big background centrepiece ── */
.bvo-hop {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(560px, 85vh, 1050px);
    z-index: 4;
    pointer-events: none;
    opacity: .92;
    animation: hopEntrance 1.1s cubic-bezier(.22,1.5,.4,1) .15s both,
               hopFloat 5s ease-in-out 1.3s infinite;
    filter: drop-shadow(0 40px 90px rgba(0,50,0,.65))
            drop-shadow(0 0 120px rgba(125,194,66,.28));
}

@keyframes hopEntrance {
    0%   { transform: translate(-50%,-50%) scale(.08) rotate(-18deg); opacity:0; }
    55%  { transform: translate(-50%,-50%) scale(1.1)  rotate(3deg);  opacity:1; }
    78%  { transform: translate(-50%,-50%) scale(.97)  rotate(-1deg); opacity:1; }
    100% { transform: translate(-50%,-50%) scale(1)    rotate(0deg);  opacity:1; }
}

@keyframes hopFloat {
    0%,100% { transform: translate(-50%,-50%) scale(1)    rotate(0deg); }
    50%     { transform: translate(-50%,calc(-50% - 18px)) scale(1.02) rotate(1.5deg); }
}

/* ── bubbles ── */
.bvo-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}
.bvo-bubble {
    position: absolute;
    bottom: -110px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.28);
    animation: bvoBubble linear infinite;
}
.bvo-bubble:nth-child(1)  {width:19px;height:19px;left:3%;  animation-duration:9s; animation-delay:0s;  }
.bvo-bubble:nth-child(2)  {width:11px;height:11px;left:8%;  animation-duration:12s;animation-delay:1.3s;}
.bvo-bubble:nth-child(3)  {width:35px;height:35px;left:16%; animation-duration:14s;animation-delay:2s;  }
.bvo-bubble:nth-child(4)  {width: 8px;height: 8px;left:24%; animation-duration:8s; animation-delay:.5s; }
.bvo-bubble:nth-child(5)  {width:27px;height:27px;left:33%; animation-duration:11s;animation-delay:3.1s;}
.bvo-bubble:nth-child(6)  {width:16px;height:16px;left:42%; animation-duration:13s;animation-delay:1.8s;}
.bvo-bubble:nth-child(7)  {width:30px;height:30px;left:51%; animation-duration:10s;animation-delay:4.4s;}
.bvo-bubble:nth-child(8)  {width:10px;height:10px;left:60%; animation-duration:11s;animation-delay:.8s; }
.bvo-bubble:nth-child(9)  {width:24px;height:24px;left:69%; animation-duration:15s;animation-delay:2.7s;}
.bvo-bubble:nth-child(10) {width:14px;height:14px;left:78%; animation-duration:9s; animation-delay:3.8s;}
.bvo-bubble:nth-child(11) {width:42px;height:42px;left:12%; animation-duration:17s;animation-delay:1s;  }
.bvo-bubble:nth-child(12) {width: 6px;height: 6px;left:22%; animation-duration:7s; animation-delay:5.1s;}
.bvo-bubble:nth-child(13) {width:20px;height:20px;left:36%; animation-duration:11s;animation-delay:2.3s;}
.bvo-bubble:nth-child(14) {width:13px;height:13px;left:55%; animation-duration:13s;animation-delay:6.7s;}
.bvo-bubble:nth-child(15) {width:45px;height:45px;left:84%; animation-duration:16s;animation-delay:.3s; }
.bvo-bubble:nth-child(16) {width: 9px;height: 9px;left:90%; animation-duration:8s; animation-delay:7s;  }
.bvo-bubble:nth-child(17) {width:28px;height:28px;left:47%; animation-duration:12s;animation-delay:1.5s;}
.bvo-bubble:nth-child(18) {width:15px;height:15px;left:72%; animation-duration:10s;animation-delay:4.2s;}
.bvo-bubble:nth-child(19) {width:22px;height:22px;left:29%; animation-duration:14s;animation-delay:2.9s;}
.bvo-bubble:nth-child(20) {width:33px;height:33px;left:95%; animation-duration:11s;animation-delay:.6s; }

@keyframes bvoBubble {
    0%   { transform:translateY(0);   opacity:0;  }
    5%   { opacity:.75; }
    92%  { opacity:.4;  }
    100% { transform:translateY(-118vh); opacity:0; }
}

/* ── hero top (label + title) ── */
.bvo-hero__top {
    position: relative;
    z-index: 10;
    text-align: center;
    flex-shrink: 0;
    animation: bvoFade .6s ease .1s both;
}

/* ── hero bottom (date / location / badges) ── */
.bvo-hero__bottom {
    position: relative;
    z-index: 10;
    text-align: center;
    flex-shrink: 0;
    animation: bvoFade .7s ease .9s both;
}

.hero-eyebrow {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(.72rem,1.6vw,.95rem);
    font-weight: 500;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(6px);
    padding: 6px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,.28);
    margin-bottom: 14px;
}

/* White logo replaces text title */
.hero-logo-white {
    display: block;
    width: clamp(240px, 42vw, 520px);
    margin: 0 auto 16px;
    /* logo is already white on transparent — just add depth */
    filter: drop-shadow(0 4px 24px rgba(0,0,0,.45))
            drop-shadow(0 0 60px rgba(125,194,66,.18));
    animation: bvoFade .7s ease .2s both;
}

.hero-subtitle {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(.9rem, 2.2vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #c9f53e;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
    padding: 7px 26px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(201,245,62,.45);
    margin: 0;
    text-shadow: 0 0 24px rgba(201,245,62,.55);
    animation: bvoFade .7s ease .5s both;
}

.hero-date {
    font-family: 'Pacifico', cursive;
    font-size: clamp(1.6rem,5vw,3.6rem);
    color: #c9f53e;
    text-shadow:
        0 2px 14px rgba(0,80,0,.45),
        0 0 50px rgba(201,245,62,.25);
    margin: 0 0 14px;
}

.hero-location {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(.82rem,2vw,1.2rem);
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
    margin: 0 0 26px;
}
.hero-location i { margin-right: 8px; color: var(--lime-lt); }

/* badges */
.hero-badges {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.h-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    border-radius: var(--radius);
    border: 2px solid rgba(255,255,255,.35);
    backdrop-filter: blur(8px);
    transition: transform .25s, box-shadow .25s;
}
.h-badge:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.h-badge--green {
    background: rgba(58,110,16,.82);
    font-size: clamp(.95rem,2.5vw,1.35rem);
    padding: 14px 38px;
}
.h-badge--blue {
    background: rgba(0,90,140,.82);
    font-size: clamp(.85rem,2vw,1.15rem);
    padding: 12px 26px;
    text-align: left;
}
.h-badge__icon { font-size: 1.5em; }

/* scroll hint */
.bvo-scroll-hint {
    position: absolute;
    bottom: 38px; left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255,255,255,.7);
    font-size: 1.5rem;
    text-decoration: none;
    animation: bvoBounce 2s ease-in-out infinite;
}
@keyframes bvoBounce {
    0%,100% { transform: translateX(-50%) translateY(0);  }
    50%      { transform: translateX(-50%) translateY(9px);}
}

@keyframes bvoFade {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:translateY(0);    }
}

/* ═══════════════════════════════════════
   INFO STRIP
═══════════════════════════════════════ */
.bvo-strip {
    background: var(--grad-dark);
    padding: 26px 20px;
}
.bvo-strip__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 980px;
    margin: 0 auto;
}
.bvo-strip__item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 8px 28px;
    white-space: nowrap;
}
.bvo-strip__item i { color: var(--lime); font-size: 1rem; flex-shrink: 0; }
.bvo-strip__sep { width: 1px; height: 26px; background: rgba(255,255,255,.14); flex-shrink: 0; }

/* ═══════════════════════════════════════
   SECTION WRAPPERS
═══════════════════════════════════════ */
.bvo-section          { padding: 90px 0; }
.bvo-section--white   { background: #fff; }
.bvo-section--off     { background: var(--off-white); }
.bvo-section--gradient{ background: linear-gradient(150deg,#eafad8 0%,#d6f0ff 100%); }

/* ── headings ── */
.bvo-heading {
    text-align: center;
    margin-bottom: 58px;
}
.bvo-heading__eyebrow {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 6px;
}
.bvo-heading__title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.6rem,6vw,5.2rem);
    line-height: 1;
    letter-spacing: 3px;
    color: var(--dark);
    margin: 0 0 18px;
}
.bvo-heading__title--light { color: #fff; }
.bvo-heading__bar {
    display: inline-block;
    width: 60px; height: 4px;
    background: var(--grad);
    border-radius: 2px;
}

/* ═══════════════════════════════════════
   TABS
═══════════════════════════════════════ */
.bvo-tabs {
    display: flex !important;
    gap: 10px;
    justify-content: center;
    margin-bottom: 40px !important;
    border: none !important;
    padding-bottom: 0 !important;
    flex-wrap: wrap;
}
.bvo-tabs .nav-item { margin: 0; }
.bvo-tabs .nav-link {
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: 2px;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    background: rgba(125,194,66,.1);
    border: 2px solid rgba(125,194,66,.25) !important;
    border-radius: var(--radius-pill) !important;
    padding: 9px 32px !important;
    transition: all .28s;
}
.bvo-tabs .nav-link i { margin-right: 7px; }
.bvo-tabs .nav-link:hover {
    background: rgba(125,194,66,.18);
    border-color: var(--lime) !important;
    color: var(--lime-dk) !important;
}
.bvo-tabs .nav-link.active {
    background: var(--grad) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(125,194,66,.38);
}

/* ═══════════════════════════════════════
   BREWER CARDS  — beer glass style
═══════════════════════════════════════ */
.bvo-brewer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
    gap: 22px;
}

.bvo-card {
    background: linear-gradient(180deg,
        #F8C832 0%,
        #E5900A 28%,
        #C06010 62%,
        #8C3A00 100%
    );
    border-radius: 18px 18px 14px 14px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 8px 32px rgba(120,55,0,.42),
        inset 5px 0 18px rgba(255,210,60,.14),
        inset -4px 0 12px rgba(0,0,0,.22);
    transition: transform .3s ease, box-shadow .3s ease;
}
/* Glass shine — vertical highlight on left edge */
.bvo-card::before {
    content: '';
    position: absolute;
    top: 0; left: 7%;
    width: 16%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255,255,255,.24) 0%,
        rgba(255,255,255,.05) 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 6;
    border-radius: 0 0 60% 0;
}
/* Glass rim — thin bright highlight at very top */
.bvo-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(255,255,255,.2) 0%,
        rgba(255,255,255,.65) 50%,
        rgba(255,255,255,.2) 100%
    );
    z-index: 8;
    pointer-events: none;
}
.bvo-card:hover {
    transform: translateY(-8px) scale(1.025);
    box-shadow:
        0 24px 64px rgba(120,55,0,.52),
        inset 5px 0 22px rgba(255,210,60,.2),
        inset -4px 0 14px rgba(0,0,0,.28);
}

/* ── Foam head ── */
.bvo-card__thumb {
    height: 158px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow: hidden;
    position: relative;
}
/* Creamy foam blob at top with wavy edge */
.bvo-card__thumb::before {
    content: '';
    position: absolute;
    top: 0; left: -6%; right: -6%;
    height: 58px;
    background: linear-gradient(180deg, #FFFEF8 0%, #FFF8D4 55%, transparent 100%);
    border-radius: 0 0 58% 58% / 0 0 28px 28px;
    z-index: 1;
}
/* Rising bubble animation */
.bvo-card__thumb::after {
    content: '';
    position: absolute;
    inset: 58px 0 0 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.55) 2px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,.38) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,.48) 2.5px, transparent 2.5px),
        radial-gradient(circle, rgba(255,255,255,.3) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.42) 2px, transparent 2px);
    background-size: 52px 78px, 38px 58px, 66px 92px, 34px 54px, 56px 74px;
    background-position: 18px 60px, 33px 35px, 7px 80px, 46px 55px, 27px 45px;
    animation: bvoBubbleRise 4.5s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes bvoBubbleRise {
    0%   { background-position: 18px 90px,  33px 70px,  7px 110px, 46px 85px,  27px 75px; opacity: 1; }
    100% { background-position: 18px -55px, 33px -30px, 7px -40px, 46px -45px, 27px -25px; opacity: .25; }
}
/* Circular logo medallion — floating in the beer */
.bvo-card__thumb img {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid rgba(255,225,100,.85);
    outline: 2px solid rgba(255,190,50,.32);
    outline-offset: 3px;
    object-fit: contain;
    padding: 10px;
    box-shadow:
        0 8px 22px rgba(0,0,0,.45),
        0 2px 6px rgba(180,80,0,.35),
        inset 0 1px 4px rgba(255,255,255,.6);
    max-height: unset; max-width: unset;
    position: relative; z-index: 2;
    transition: transform .35s ease, box-shadow .35s ease;
}
.bvo-card:hover .bvo-card__thumb img {
    transform: scale(1.09) rotate(-2deg);
    box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 4px rgba(255,210,60,.65);
}

/* ── Label panel — dark amber base of glass ── */
.bvo-card__body {
    padding: 10px 14px 14px;
    text-align: center;
    position: relative;
    background: rgba(0,0,0,.2);
    border-top: 1px solid rgba(255,200,80,.18);
}
/* Bubble dots divider */
.bvo-card__body::before {
    content: '· · · · ·';
    display: block;
    text-align: center;
    color: rgba(255,225,120,.55);
    font-size: .65rem;
    letter-spacing: 5px;
    margin-bottom: 7px;
}
.bvo-card__name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: #FFF8DC;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 3px;
    line-height: 1.15;
    text-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.bvo-card__city {
    font-family: 'Oswald', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,225,140,.72);
    margin: 0 0 10px;
}
.bvo-card__links {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.bvo-card__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: #fff !important;
    font-size: .8rem;
    text-decoration: none;
    border: 1.5px solid rgba(255,215,80,.4);
    backdrop-filter: blur(4px);
    transition: background .22s, color .22s, transform .22s, box-shadow .22s;
}
.bvo-card__links a:hover {
    background: rgba(255,205,60,.82);
    color: #5a2000 !important;
    transform: scale(1.18);
    box-shadow: 0 4px 14px rgba(200,140,0,.5);
}

/* ═══════════════════════════════════════
   BEER TABLE
═══════════════════════════════════════ */
.bvo-beer-wrap {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.bvo-beer-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
}
.bvo-beer-wrap thead th {
    background: var(--grad) !important;
    color: #fff !important;
    font-family: 'Oswald', sans-serif;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 16px 18px !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,.15) !important;
}
.bvo-beer-wrap thead th:last-child { border-right: none !important; }
.bvo-beer-wrap tbody tr { transition: background .18s; border-bottom: 1px solid #e4f5d0; }
.bvo-beer-wrap tbody tr:last-child { border-bottom: none; }
.bvo-beer-wrap tbody tr:nth-child(even) { background: rgba(125,194,66,.04); }
.bvo-beer-wrap tbody tr:hover { background: rgba(41,171,226,.09) !important; }
.bvo-beer-wrap tbody td { padding: 12px 18px !important; border: none !important; vertical-align: middle; }
.bvo-beer-wrap tbody td:first-child { font-weight: 600; color: var(--lime-dk); }
.bvo-beer-wrap tbody td.numeric { font-weight: 700; color: var(--blue-dk); white-space: nowrap; }

/* ═══════════════════════════════════════
   GALLERY SECTION
═══════════════════════════════════════ */
.bvo-gallery-section {
    padding: 120px 0 130px;
    background:
        linear-gradient(160deg,rgba(13,26,7,.92) 0%,rgba(10,24,40,.92) 100%),
        url('../img/hero-bg.webp') center / cover no-repeat fixed;
    clip-path: polygon(0 7%,100% 0,100% 93%,0 100%);
    margin: -50px 0;
}
.bvo-gallery-section .bvo-heading__eyebrow { color: var(--lime-lt); }
.bvo-gallery-section .bvo-heading__bar { background: var(--grad); }

/* CSS grid photo wall */
.bvo-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 200px);
    gap: 10px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.bvo-photo { position: relative; overflow: hidden; border-radius: 8px; }
.bvo-photo--hero  { grid-column: span 2; grid-row: span 2; }
.bvo-photo--wide  { grid-column: span 2; }
.bvo-photo--tall  { grid-row: span 2; }

.bvo-photo a {
    display: block;
    width: 100%; height: 100%;
    position: relative;
}
.bvo-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
.bvo-photo:hover img { transform: scale(1.1); }

.bvo-photo__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0) 35%,
        rgba(13,26,7,.75) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .35s ease;
}
.bvo-photo:hover .bvo-photo__overlay { opacity: 1; }
.bvo-photo__overlay i {
    color: #fff;
    font-size: 1.8rem;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50%;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    transform: scale(.7);
    transition: transform .3s cubic-bezier(.22,1.5,.4,1);
}
.bvo-photo:hover .bvo-photo__overlay i { transform: scale(1); }

@media (max-width: 768px) {
    .bvo-photo-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 8px;
    }
    .bvo-photo--hero, .bvo-photo--wide, .bvo-photo--tall {
        grid-column: span 1;
        grid-row: span 1;
    }
    .bvo-photo { height: 160px; }
    .bvo-gallery-section { clip-path: polygon(0 4%,100% 0,100% 96%,0 100%); padding: 100px 0; }
}

/* ═══════════════════════════════════════
   SPONSORS SECTION
═══════════════════════════════════════ */
/* Override section background — distinct from white brewer section */
#sponsors.bvo-section {
    background:
        linear-gradient(160deg, rgba(13,26,7,.96) 0%, rgba(18,36,10,.96) 100%),
        url('../img/hero-bg.webp') center / cover no-repeat fixed;
}
#sponsors .bvo-heading__eyebrow { color: var(--lime-lt); }
#sponsors .bvo-heading__title   { color: #fff; }
#sponsors .bvo-heading__bar     { background: var(--grad); }

.bvo-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap: 16px;
}

/* ═══════════════════════════════════════
   SPONSORS SECTION
═══════════════════════════════════════ */
.bvo-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap: 20px;
}

.bvo-sponsor-card {
    background: rgba(255,255,255,.97);
    border-radius: var(--radius);
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 26px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
/* animated lime gradient border on hover */
.bvo-sponsor-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    padding: 2px;
    background: var(--grad);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
}
.bvo-sponsor-card:hover::after { opacity: 1; }
.bvo-sponsor-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
.bvo-sponsor-card img {
    max-height: 88px;
    max-width: 90%;
    object-fit: contain;
    filter: none;
    transition: transform .35s;
}
.bvo-sponsor-card:hover img { transform: scale(1.08); }

/* Word sponsor CTA */
.bvo-sponsor-cta {
    text-align: center;
    margin-top: 48px;
}
.bvo-sponsor-cta p {
    font-family: 'Inter', sans-serif;
    font-size: .92rem;
    color: rgba(255,255,255,.65);
    margin-bottom: 16px;
}
.bvo-brewer-cta {
    margin-top: 40px;
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(58,110,16,.06) 0%, rgba(248,200,50,.10) 100%);
    border: 1px dashed rgba(58,110,16,.35);
    border-radius: 16px;
}
.bvo-brewer-cta p {
    color: #2a4d08;
    font-weight: 600;
    font-size: 1rem;
}
.bvo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: var(--grad);
    border: none;
    border-radius: var(--radius-pill);
    padding: 14px 38px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(125,194,66,.35);
    transition: transform .25s, box-shadow .25s;
}
.bvo-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(125,194,66,.5);
    color: #fff;
    text-decoration: none;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.bvo-footer {
    background: var(--grad-dark);
    padding: 80px 0 0;
    margin-top: 60px;
}

.bvo-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 30px;
}

.bvo-footer__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 26px;
}
.bvo-footer__logo img { height: 60px; width: auto; }
.bvo-footer__logo-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 3px;
    color: #fff;
    line-height: 1;
}

.bvo-footer__heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    letter-spacing: 3px;
    color: #fff;
    margin: 0 0 22px;
}

.bvo-footer__list { list-style: none; margin: 0; padding: 0; }
.bvo-footer__list li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin-bottom: 13px;
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    line-height: 1.6;
    color: rgba(255,255,255,.7);
    text-align: left;
}
.bvo-footer__list li i { color: var(--lime); font-size: .88rem; margin-top: 3px; flex-shrink: 0; }
.bvo-footer__list a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s; }
.bvo-footer__list a:hover { color: var(--lime-lt); }

.bvo-footer__social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}
.bvo-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff !important;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background .25s, border-color .25s, transform .25s;
}
.bvo-footer__social a:hover {
    background: var(--grad);
    border-color: transparent;
    transform: scale(1.12);
}

.bvo-footer__map {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 50px rgba(0,0,0,.45);
}
.bvo-footer__map iframe { width: 100%; height: 300px; display: block; border: none; }

.bvo-footer__bottom {
    margin-top: 60px;
    padding: 18px 20px;
    border-top: 1px solid rgba(255,255,255,.07);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: .78rem;
    color: rgba(255,255,255,.3);
}
.bvo-footer__bottom a { color: rgba(255,255,255,.3); text-decoration: none; transition: color .2s; }
.bvo-footer__bottom a:hover { color: var(--lime-lt); }

/* ═══════════════════════════════════════
   COUNTDOWN TIMER
═══════════════════════════════════════ */
.bvo-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 22px;
}
.bvo-cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,.32);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    padding: 10px 18px 8px;
    min-width: 72px;
}
.bvo-cd-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem,5vw,3.2rem);
    line-height: 1;
    color: #c9f53e;
    text-shadow: 0 0 20px rgba(201,245,62,.5);
    letter-spacing: 2px;
}
.bvo-cd-label {
    font-family: 'Oswald', sans-serif;
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    margin-top: 2px;
}
.bvo-cd-sep {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.8rem,4vw,2.8rem);
    color: rgba(255,255,255,.4);
    margin-bottom: 16px;
    line-height: 1;
}

/* ═══════════════════════════════════════
   STATISTICS BAR
═══════════════════════════════════════ */
.bvo-stats-bar {
    background: var(--grad);
    padding: 36px 20px;
}
.bvo-stats__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
}
.bvo-stat {
    flex: 1 1 180px;
    text-align: center;
    padding: 16px 20px;
    position: relative;
}
.bvo-stat + .bvo-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: rgba(255,255,255,.25);
}
.bvo-stat__num {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem,6vw,4.5rem);
    line-height: 1;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.bvo-stat__suffix {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.8rem,4vw,3rem);
    color: rgba(255,255,255,.8);
    vertical-align: super;
    line-height: 1;
}
.bvo-stat__label {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
    margin-top: 4px;
}
@media (max-width: 600px) {
    .bvo-stats__inner { gap: 0; }
    .bvo-stat { flex: 1 1 140px; }
    .bvo-stat + .bvo-stat::before { display: none; }
}

/* ═══════════════════════════════════════
   BEER TYPE FILTER
═══════════════════════════════════════ */
.bvo-beer-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 28px;
}
.bvo-filter-btn {
    font-family: 'Oswald', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lime-dk);
    background: rgba(125,194,66,.1);
    border: 1.5px solid rgba(125,194,66,.3);
    border-radius: var(--radius-pill);
    padding: 7px 20px;
    cursor: pointer;
    transition: all .22s;
    line-height: 1;
}
.bvo-filter-btn:hover {
    background: rgba(125,194,66,.2);
    border-color: var(--lime);
}
.bvo-filter-btn.active {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(125,194,66,.35);
}
.bvo-beer-wrap tr.bvo-hidden { display: none; }

/* ═══════════════════════════════════════
   MYSTERY CARD (TBA brewer) — dark stout glass
═══════════════════════════════════════ */
.bvo-card--mystery {
    background: linear-gradient(180deg,
        #2a2a3a 0%,
        #181824 30%,
        #100e18 65%,
        #08060e 100%
    ) !important;
    box-shadow:
        0 8px 36px rgba(0,0,0,.6),
        inset 5px 0 18px rgba(255,255,255,.04),
        inset -4px 0 12px rgba(0,0,0,.4) !important;
    animation: mysteryShimmer 3s ease-in-out infinite;
}
@keyframes mysteryShimmer {
    0%,100% {
        box-shadow: 0 8px 36px rgba(0,0,0,.6), inset 5px 0 18px rgba(255,255,255,.04), inset -4px 0 12px rgba(0,0,0,.4);
    }
    50% {
        box-shadow: 0 14px 52px rgba(0,0,0,.75), inset 5px 0 22px rgba(180,140,255,.06), inset -4px 0 14px rgba(0,0,0,.5);
    }
}
/* Override foam head for stout — very thin creamy head */
.bvo-card--mystery .bvo-card__thumb::before {
    height: 28px !important;
    background: linear-gradient(180deg, #F0ECD8 0%, rgba(220,210,180,.6) 60%, transparent 100%) !important;
    border-radius: 0 0 60% 60% / 0 0 16px 16px !important;
}
/* Override bubbles — very slow, barely visible (stout doesn't carbonate fast) */
.bvo-card--mystery .bvo-card__thumb::after {
    opacity: .18 !important;
    animation-duration: 9s !important;
}
.bvo-card__thumb--mystery {
    flex-direction: column;
    gap: 8px;
}
.mystery-icon {
    width: 82px; height: 82px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 3px solid rgba(180,140,255,.5);
    outline: 2px solid rgba(160,120,255,.2);
    outline-offset: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: rgba(200,170,255,.8);
    box-shadow: 0 6px 24px rgba(0,0,0,.6), 0 0 20px rgba(140,100,255,.2);
    animation: mysteryPulse 2.5s ease-in-out infinite;
    position: relative; z-index: 2;
}
@keyframes mysteryPulse {
    0%,100% { transform: scale(1);    box-shadow: 0 6px 24px rgba(0,0,0,.6), 0 0 20px rgba(140,100,255,.2); }
    50%     { transform: scale(1.08); box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 32px rgba(140,100,255,.35); }
}
.mystery-teaser {
    font-family: 'Oswald', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(200,170,255,.65);
    position: relative; z-index: 2;
}
/* Override body text for dark stout */
.bvo-card--mystery .bvo-card__body {
    background: rgba(0,0,0,.35);
    border-top-color: rgba(180,140,255,.12);
}
.bvo-card--mystery .bvo-card__body::before {
    color: rgba(200,170,255,.4);
}
.mystery-badge {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(200,170,255,.8);
    background: rgba(140,100,255,.12);
    border: 1px solid rgba(180,140,255,.35);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
}

/* ═══════════════════════════════════════
   VIDEO SECTION
═══════════════════════════════════════ */
.bvo-video-section {
    background:
        linear-gradient(160deg, rgba(13,26,7,.96) 0%, rgba(10,24,40,.96) 100%),
        url('../img/hero-bg.webp') center / cover no-repeat;
    padding: 100px 0 110px;
    position: relative;
}
.bvo-video-section .bvo-heading__eyebrow { color: var(--lime-lt); }
.bvo-video-section .bvo-heading__title--light { color: #fff; }
.bvo-video-section .bvo-heading__bar { background: var(--grad); }

.bvo-video-wrap {
    max-width: 880px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 80px rgba(0,0,0,.6),
                0 0 0 1px rgba(125,194,66,.2);
    position: relative;
}
.bvo-video-wrap video {
    width: 100%;
    display: block;
    border-radius: var(--radius-lg);
    background: #000;
}
/* video autoplays — no overlay needed */

/* ── Sfeer surrounded layout: photos left + video centre + photos right ── */
.bvo-sfeer-surround {
    display: grid;
    grid-template-columns: 1fr 2.2fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    min-height: 540px;
}

/* Video occupies centre column, all 3 rows */
.bvo-sfeer-video-center {
    grid-column: 2;
    grid-row: 1 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 70px rgba(0,0,0,.6),
                0 0 0 2px rgba(125,194,66,.25);
    position: relative;
}
.bvo-sfeer-video-center video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
    background: #000;
}

/* Photo tiles (cols 1 & 3, rows 1-3) */
.bvo-sfeer-photo {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    min-height: 0;
}
.bvo-sfeer-photo a {
    display: block;
    width: 100%; height: 100%;
    position: relative;
}
.bvo-sfeer-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
.bvo-sfeer-photo:hover img { transform: scale(1.1); }

.bvo-sfeer-photo .bvo-sfeer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(13,26,7,.72) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
    border-radius: 10px;
}
.bvo-sfeer-photo:hover .bvo-sfeer-overlay { opacity: 1; }
.bvo-sfeer-overlay i {
    color: #fff;
    font-size: 1.3rem;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    border: 1.5px solid rgba(255,255,255,.35);
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    transform: scale(.65);
    transition: transform .3s cubic-bezier(.22,1.5,.4,1);
}
.bvo-sfeer-photo:hover .bvo-sfeer-overlay i { transform: scale(1); }

/* Left column */
.bvo-sfeer-photo.left-1 { grid-column: 1; grid-row: 1; }
.bvo-sfeer-photo.left-2 { grid-column: 1; grid-row: 2; }
.bvo-sfeer-photo.left-3 { grid-column: 1; grid-row: 3; }
/* Right column */
.bvo-sfeer-photo.right-1 { grid-column: 3; grid-row: 1; }
.bvo-sfeer-photo.right-2 { grid-column: 3; grid-row: 2; }
.bvo-sfeer-photo.right-3 { grid-column: 3; grid-row: 3; }

/* Tablet: stack photos above/below video */
@media (max-width: 900px) {
    .bvo-sfeer-surround {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto;
        min-height: unset;
        gap: 8px;
    }
    .bvo-sfeer-video-center {
        grid-column: 1 / 4;
        grid-row: 2;
        aspect-ratio: 16 / 9;
        height: auto;
    }
    .bvo-sfeer-video-center video { height: auto; object-fit: unset; }
    .bvo-sfeer-photo.left-1  { grid-column: 1; grid-row: 1; }
    .bvo-sfeer-photo.left-2  { grid-column: 2; grid-row: 1; }
    .bvo-sfeer-photo.left-3  { grid-column: 3; grid-row: 1; }
    .bvo-sfeer-photo.right-1 { grid-column: 1; grid-row: 3; }
    .bvo-sfeer-photo.right-2 { grid-column: 2; grid-row: 3; }
    .bvo-sfeer-photo.right-3 { grid-column: 3; grid-row: 3; }
    .bvo-sfeer-photo { aspect-ratio: 4 / 3; height: auto; }
}
@media (max-width: 600px) {
    .bvo-sfeer-surround {
        grid-template-columns: repeat(2, 1fr);
    }
    .bvo-sfeer-video-center { grid-column: 1 / 3; grid-row: 2; }
    .bvo-sfeer-photo.left-1  { grid-column: 1; grid-row: 1; }
    .bvo-sfeer-photo.left-2  { grid-column: 2; grid-row: 1; }
    .bvo-sfeer-photo.left-3  { grid-column: 1; grid-row: 3; }
    .bvo-sfeer-photo.right-1 { grid-column: 2; grid-row: 3; }
    .bvo-sfeer-photo.right-2 { display: none; }
    .bvo-sfeer-photo.right-3 { display: none; }
}

/* ═══════════════════════════════════════
   SCROLL TO TOP
═══════════════════════════════════════ */
#scroll-to-top {
    background: var(--grad) !important;
    color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(125,194,66,.45) !important;
    transition: transform .25s, box-shadow .25s !important;
}
#scroll-to-top:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 32px rgba(125,194,66,.6) !important;
}

/* ═══════════════════════════════════════
   PRELOADER
═══════════════════════════════════════ */
.preloader {
    background: linear-gradient(135deg,#c8efac 0%,#b5e3f7 100%) !important;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
    /* hero */
    .bvo-hop { width: clamp(400px, 72vw, 600px); top: 46%; }
    .bvo-hero { padding: 90px 5% 65px; clip-path: polygon(0 0,100% 0,100% 97%,0 100%); }
    .hero-logo-white { width: clamp(200px, 52vw, 360px); }

    /* countdown */
    .bvo-cd-unit { min-width: 58px; padding: 8px 12px 6px; }

    /* stats */
    .bvo-stats__inner { gap: 0; }
    .bvo-stat { flex: 1 1 140px; }

    /* footer is now flex-centred; no grid override needed */
    .bvo-footer__inner { padding: 0 20px; }

    /* decorative hops in header — hide on tablet to avoid clutter */
    #BVO-main-header.bvo-scrolled::after,
    #BVO-main-header.bvo-scrolled::before { display: none; }
}

/* ══════════════════════════════════════════
   MOBILE — complete redesign (≤768px)
   Stack layout: logo → hop behind → info below
══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── HEADER: centre the round logo badge on mobile ── */
    #BVO-main-header .navbar {
        position: relative;
        min-height: 64px;
    }
    #BVO-main-header .navbar-toggler {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        z-index: 5;
    }
    #BVO-main-header .navbar-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #BVO-main-header .navbar-brand img {
        margin: 0 auto;
    }
    /* keep the original header logic: only one of the two logo images is visible */
    #BVO-main-header .navbar-brand img:first-child { display: none; }

    /* ── HERO ── */
    .bvo-hero {
        /* Only the bottom block lives in flex flow — it anchors to the bottom */
        justify-content: flex-end;
        padding: 0 5% 52px;
        min-height: 100svh;
        min-height: 100vh; /* fallback */
    }

    /* Logo block: pulled OUT of flex flow, pinned just below the header */
    .bvo-hero__top {
        position: absolute;
        top: 80px;          /* just below the fixed header */
        left: 0;
        right: 0;
        text-align: center;
        z-index: 10;
        padding: 0 16px;
    }
    .hero-logo-white {
        width: clamp(180px, 68vw, 300px);
        margin: 0 auto 8px;
    }
    .hero-subtitle {
        font-size: .88rem;
        letter-spacing: 3px;
        padding: 8px 22px;
    }

    /* Hop: sits BEHIND the logo text, fully visible on-screen.
       Top of the hop image = just below the header; the cone overlaps
       the lower half of the logo block thanks to the PNG's transparency above. */
    .bvo-hop {
        width: min(85vw, 380px);
        top: 18%;
        transform: translate(-50%, -25%);   /* anchor near top instead of centre */
        z-index: 2;
        opacity: .95;
    }
    /* Override the infinite-float translate for mobile so it doesn't re-centre */
    @keyframes hopFloat {
        0%,100% { transform: translate(-50%,-25%) scale(1)    rotate(0deg); }
        50%     { transform: translate(-50%,calc(-25% - 10px)) scale(1.02) rotate(1deg); }
    }
    @keyframes hopEntrance {
        0%   { transform: translate(-50%,-25%) scale(.08) rotate(-18deg); opacity:0; }
        55%  { transform: translate(-50%,-25%) scale(1.1)  rotate(3deg);  opacity:1; }
        78%  { transform: translate(-50%,-25%) scale(.97)  rotate(-1deg); opacity:1; }
        100% { transform: translate(-50%,-25%) scale(1)    rotate(0deg);  opacity:1; }
    }

    /* Bottom info block: the only flex child, anchors to bottom */
    .bvo-hero__bottom {
        width: 100%;
        position: relative;
        z-index: 10;
    }
    .hero-date {
        font-size: clamp(1.1rem, 5vw, 1.5rem);
        margin-bottom: 14px;
    }

    /* ── COUNTDOWN — big & readable ── */
    .bvo-countdown { gap: 6px; margin-bottom: 16px; }
    .bvo-cd-unit {
        min-width: 62px;
        padding: 10px 12px 8px;
        border-radius: 10px;
    }
    .bvo-cd-num  { font-size: 2.2rem; }
    .bvo-cd-label { font-size: .58rem; letter-spacing: 1.5px; }
    .bvo-cd-sep  { font-size: 1.8rem; margin-bottom: 16px; }

    /* ── LOCATION ── */
    .hero-location { font-size: .82rem; letter-spacing: 1px; margin-bottom: 18px; }

    /* ── CTA BADGES — finger-friendly, full width ── */
    .hero-badges {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    .h-badge--green,
    .h-badge--blue {
        width: 100%;
        max-width: 360px;
        min-height: 58px;
        justify-content: center;
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        border-radius: 16px;
        padding: 14px 24px;
    }

    /* ── GENERAL BUTTONS throughout site ── */
    .bvo-btn {
        min-height: 54px;
        font-size: 1rem;
        padding: 14px 32px;
        border-radius: 14px;
        width: 100%;
        max-width: 360px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── STATS BAR ── */
    .bvo-stats__inner { flex-wrap: wrap; }
    .bvo-stat { flex: 1 1 45%; padding: 18px 10px; }
    .bvo-stat + .bvo-stat::before { display: none; }
    .bvo-stat__num { font-size: 2.8rem; }

    /* ── INFO STRIP ── */
    .bvo-strip__sep { display: none; }
    .bvo-strip__item { padding: 10px 16px; font-size: .85rem; }

    /* ── BREWER GRID ── */
    .bvo-brewer-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* ── BEER FILTER BUTTONS ── */
    .bvo-beer-filter { gap: 8px; flex-wrap: wrap; justify-content: center; }
    .bvo-filter-btn {
        padding: 10px 18px;
        font-size: .82rem;
        min-height: 42px;
        border-radius: 10px;
    }

    /* ── SPONSORS ── */
    .bvo-sponsor-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .bvo-sponsor-card { height: 90px; padding: 12px 16px; }
    .bvo-sponsor-cta { padding-top: 32px; }

    /* ── SECTIONS ── */
    .bvo-section { padding: 70px 0; }
    .bvo-video-section { padding: 80px 0; }

    /* ── SFEER SURROUND — stack on mobile ── */
    .bvo-sfeer-surround {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 8px;
    }
    .bvo-sfeer-video-center {
        grid-column: 1;
        grid-row: 1;
        border-radius: 12px;
        max-height: 55vw;
    }
    .bvo-sfeer-photo.left-1  { grid-column: 1; grid-row: 2; }
    .bvo-sfeer-photo.left-2  { grid-column: 1; grid-row: 3; }
    .bvo-sfeer-photo.left-3  { grid-column: 1; grid-row: 4; }
    .bvo-sfeer-photo.right-1 { grid-column: 1; grid-row: 5; }
    .bvo-sfeer-photo.right-2 { grid-column: 1; grid-row: 6; }
    .bvo-sfeer-photo.right-3 { grid-column: 1; grid-row: 7; }
    /* 2-column photo grid below the video */
    .bvo-sfeer-surround {
        grid-template-columns: 1fr 1fr;
    }
    .bvo-sfeer-video-center {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .bvo-sfeer-photo.left-1  { grid-column: 1; grid-row: 2; }
    .bvo-sfeer-photo.left-2  { grid-column: 2; grid-row: 2; }
    .bvo-sfeer-photo.left-3  { grid-column: 1; grid-row: 3; }
    .bvo-sfeer-photo.right-1 { grid-column: 2; grid-row: 3; }
    .bvo-sfeer-photo.right-2 { grid-column: 1; grid-row: 4; }
    .bvo-sfeer-photo.right-3 { grid-column: 2; grid-row: 4; }

    /* ── MOBILE NAV ── */
    #mega-menu.show, #mega-menu.collapsing {
        background: rgba(10,20,5,.97) !important;
        border-top: 1px solid rgba(125,194,66,.25) !important;
        padding: 12px 0 !important;
    }
    #mega-menu .nav > li > a {
        padding: 15px 28px !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
        font-size: 1.1rem !important;
        min-height: 52px;
        display: flex !important;
        align-items: center !important;
    }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
    /* Hero — tighter fit for small screens */
    .bvo-hero { padding: 0 4% 32px; min-height: 100svh; min-height: 100vh; }
    .bvo-hero__top { top: 72px; }
    .bvo-hop { width: min(82vw, 320px); top: 14%; }
    .hero-logo-white { width: clamp(150px, 64vw, 240px); }
    .hero-subtitle { font-size: .78rem; letter-spacing: 2px; padding: 6px 14px; }

    /* Compact countdown on small screens */
    .bvo-countdown { gap: 4px; margin-bottom: 10px; }
    .bvo-cd-unit { min-width: 50px; padding: 7px 8px 5px; }
    .bvo-cd-num { font-size: 1.7rem; }
    .bvo-cd-sep { font-size: 1.4rem; margin-bottom: 12px; }
    .hero-date { font-size: 1rem; margin-bottom: 8px; }
    .hero-location { font-size: .75rem; margin-bottom: 12px; }
    .hero-badges { gap: 8px; }
    .h-badge--green, .h-badge--blue { min-height: 50px; font-size: .95rem; padding: 10px 16px; }

    /* Sections */
    .bvo-section { padding: 55px 0; }
    .bvo-heading { margin-bottom: 36px; }
    .bvo-heading__title { font-size: 2.4rem; }

    /* Cards */
    .bvo-card__thumb { height: 120px; }
    .bvo-beer-wrap tbody td { padding: 10px !important; font-size: .8rem; }
    .bvo-beer-wrap thead th { padding: 12px 10px !important; font-size: .8rem; }

    /* Stats 2×2 */
    .bvo-stat { flex: 1 1 45%; }
    .bvo-stat__num { font-size: 2.4rem; }
    .bvo-stat__label { font-size: .72rem; letter-spacing: 2px; }

    /* Sponsors */
    .bvo-sponsor-grid { grid-template-columns: repeat(2, 1fr); }
    .bvo-sponsor-card { height: 80px; }
}

/* ═══════════════════════════════════════
   ADD TO CALENDAR BUTTONS
═══════════════════════════════════════ */
.bvo-cal-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 18px 0 6px;
}
.bvo-cal-label {
    font-family: 'Oswald', sans-serif;
    font-size: .72rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
}
.bvo-cal-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.bvo-cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Oswald', sans-serif;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff !important;
    background: rgba(255,255,255,.14);
    border: 1.5px solid rgba(255,255,255,.28);
    border-radius: 8px;
    padding: 8px 16px;
    text-decoration: none !important;
    backdrop-filter: blur(6px);
    transition: background .22s, border-color .22s, transform .22s;
}
.bvo-cal-btn:hover {
    background: rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.55);
    transform: translateY(-2px);
    color: #fff !important;
    text-decoration: none !important;
}
.bvo-cal-btn--wa { background: rgba(37,211,102,.22); border-color: rgba(37,211,102,.45); }
.bvo-cal-btn--wa:hover { background: rgba(37,211,102,.42); border-color: rgba(37,211,102,.75); }

/* ═══════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
═══════════════════════════════════════ */
.bvo-reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .7s ease, transform .7s ease;
}
.bvo-reveal.bvo-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════
   STICKY MOBILE BOTTOM BAR
═══════════════════════════════════════ */
.bvo-sticky-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9000;
    background: rgba(10,20,5,.96);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 2px solid var(--lime);
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    display: flex;
    gap: 8px;
    transform: translateY(110%);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.bvo-sticky-bar.bvo-bar-visible { transform: translateY(0); }
.bvo-sticky-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: 'Oswald', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.85) !important;
    text-decoration: none !important;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.14);
    border-radius: 10px;
    padding: 10px 4px 8px;
    min-height: 58px;
    transition: background .2s;
}
.bvo-sticky-btn i { font-size: 1.25rem; }
.bvo-sticky-btn:hover { background: rgba(255,255,255,.18); color: #fff !important; text-decoration: none !important; }
.bvo-sticky-btn--cal {
    background: rgba(125,194,66,.22);
    border-color: rgba(125,194,66,.45);
    color: #c9f53e !important;
}
.bvo-sticky-btn--cal:hover { background: rgba(125,194,66,.38); color: #c9f53e !important; }
.bvo-sticky-btn--wa { background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.38); }
.bvo-sticky-btn--wa:hover { background: rgba(37,211,102,.32); }
@media (min-width: 769px) { .bvo-sticky-bar { display: none !important; } }
@media (max-width: 768px) { body.has-sticky-bar { padding-bottom: 86px; } }

/* ═══════════════════════════════════════
   BREWER CARD MODAL / BOTTOM SHEET
═══════════════════════════════════════ */
.bvo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.62);
    z-index: 9500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.bvo-modal-overlay.bvo-modal-open { opacity: 1; pointer-events: all; }
.bvo-modal-sheet {
    background: #faf3df;
    border-radius: 22px 22px 0 0;
    width: 100%;
    max-width: 580px;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(100%);
    transition: transform .42s cubic-bezier(.22,1,.36,1);
    padding: 12px 28px 48px;
    padding-bottom: max(48px, env(safe-area-inset-bottom));
    box-shadow: 0 -24px 70px rgba(0,0,0,.45);
    border: 1px solid rgba(185,140,55,.25);
    border-bottom: none;
}
.bvo-modal-overlay.bvo-modal-open .bvo-modal-sheet { transform: translateY(0); }
.bvo-modal-sheet::before {
    content: '';
    display: block;
    width: 44px; height: 5px;
    background: rgba(185,140,55,.35);
    border-radius: 3px;
    margin: 10px auto 22px;
}
.bvo-modal-close {
    position: absolute;
    top: 18px; right: 18px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(185,140,55,.15);
    border: 1.5px solid rgba(185,140,55,.3);
    color: #8a6830;
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s;
}
.bvo-modal-close:hover { background: rgba(185,140,55,.32); transform: scale(1.1); }
.bvo-modal-brewer-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    color: #1a3a08;
    letter-spacing: 2px;
    margin: 0 0 4px;
    line-height: 1;
}
.bvo-modal-brewer-city {
    font-family: 'Oswald', sans-serif;
    font-size: .78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8a6830;
    margin: 0 0 18px;
}
.bvo-modal-story {
    font-family: 'Inter', sans-serif;
    font-size: .92rem;
    line-height: 1.75;
    color: #4a3010;
    margin-bottom: 12px;
}
.bvo-modal-beers-title {
    font-family: 'Oswald', sans-serif;
    font-size: .72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8a6830;
    margin: 18px 0 10px;
    border-top: 1px dashed rgba(185,140,55,.3);
    padding-top: 18px;
}
.bvo-modal-beers { display: flex; flex-direction: column; gap: 8px; }
.bvo-modal-beer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(185,140,55,.08);
    border: 1px solid rgba(185,140,55,.22);
    border-radius: 8px;
    padding: 9px 14px;
}
.bvo-modal-beer-name { font-family: 'Oswald', sans-serif; font-size: .9rem; font-weight: 600; color: #1a3a08; }
.bvo-modal-beer-meta { font-size: .78rem; color: #8a6830; text-align: right; }
.bvo-modal-tba { text-align: center; padding: 20px 0 12px; }
.bvo-modal-tba i { font-size: 3.2rem; color: rgba(185,140,55,.45); margin-bottom: 14px; display: block; }
.bvo-modal-tba-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 2px;
    color: #1a3a08;
    margin: 0 0 8px;
}
.bvo-modal-tba-sub {
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    color: #8a6830;
    margin: 0 0 18px;
    line-height: 1.6;
}
.bvo-modal-tba-socials { display: flex; gap: 12px; justify-content: center; }
.bvo-modal-tba-socials a {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #1a3a08;
    color: #c8a44a !important;
    border: 2px solid rgba(200,164,74,.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    text-decoration: none !important;
    transition: background .2s, transform .2s;
}
.bvo-modal-tba-socials a:hover { background: #c8a44a; color: #1a3a08 !important; transform: scale(1.1); }
@media (min-width: 600px) {
    .bvo-modal-overlay { align-items: center; }
    .bvo-modal-sheet { border-radius: 20px; border: 1px solid rgba(185,140,55,.25); transform: scale(.9) translateY(20px); }
    .bvo-modal-overlay.bvo-modal-open .bvo-modal-sheet { transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════
   SECTION WAVE DIVIDERS + HOP WATERMARK
═══════════════════════════════════════ */
/* Hop watermark behind brewer cards */
.bvo-section--white {
    position: relative;
    background: #fff;
}
.bvo-section--white::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/hop-hero.webp') center / 50% no-repeat;
    opacity: .022;
    pointer-events: none;
    z-index: 0;
}
.bvo-section--white .container { position: relative; z-index: 1; }

/* Wave dividers */
.bvo-wave-divider {
    height: 70px;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.bvo-wave-divider--to-dark {
    background: linear-gradient(135deg, #7DC242 0%, #29ABE2 100%); /* same as stats bar */
}
.bvo-wave-divider--to-dark::after {
    content: '';
    position: absolute;
    bottom: 0; left: -5%; right: -5%;
    height: 75px;
    background: linear-gradient(160deg, rgba(13,26,7,.97) 0%, rgba(10,24,40,.97) 100%);
    clip-path: ellipse(55% 100% at 50% 100%);
}
.bvo-wave-divider--to-light {
    background: linear-gradient(160deg, rgba(13,26,7,.97) 0%, rgba(10,24,40,.97) 100%);
}
.bvo-wave-divider--to-light::after {
    content: '';
    position: absolute;
    bottom: 0; left: -5%; right: -5%;
    height: 75px;
    background: #fff;
    clip-path: ellipse(55% 100% at 50% 100%);
}

/* ══════════════ ACCESSIBILITY ══════════════ */
.bvo-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Improve focus visibility for keyboard users */
a:focus-visible, button:focus-visible,
.bvo-cal-btn:focus-visible, .bvo-sticky-btn:focus-visible,
.bvo-card:focus-visible, .bvo-modal-close:focus-visible {
    outline: 3px solid #F8C832;
    outline-offset: 3px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .bvo-reveal { opacity: 1 !important; transform: none !important; }
    .bvo-bubble, .bvo-card__thumb::after { display: none !important; }
}

/* ══════════════ BEER LIST PLACEHOLDER (Coming soon) ══════════════ */
.bvo-beer-placeholder {
    max-width: 620px;
    margin: 20px auto 40px;
    padding: 48px 28px;
    text-align: center;
    background: linear-gradient(180deg, #FFFEF8 0%, #FFF4C2 100%);
    border: 2px dashed rgba(58,110,16,.35);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(58,110,16,.08);
}
.bvo-beer-placeholder__icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 78px; height: 78px;
    border-radius: 50%;
    background: linear-gradient(180deg, #F8C832 0%, #E5900A 100%);
    color: #fff;
    font-size: 2rem;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(140,58,0,.28);
    animation: bvoPlaceholderBob 2.8s ease-in-out infinite;
}
@keyframes bvoPlaceholderBob {
    0%,100% { transform: translateY(0) rotate(-5deg); }
    50%     { transform: translateY(-6px) rotate(5deg); }
}
.bvo-beer-placeholder h3 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    color: #3A6E10;
    margin: 0 0 10px;
    letter-spacing: .02em;
}
.bvo-beer-placeholder p {
    margin: 0 0 10px;
    color: #4a5a3a;
    font-size: 1rem;
    line-height: 1.55;
}
.bvo-beer-placeholder__hint {
    margin-top: 18px !important;
    font-size: .88rem !important;
    color: #3A6E10 !important;
    font-weight: 600;
}
.bvo-beer-placeholder__hint i { margin-right: 6px; }

/* ══════════════ HOW TO GET THERE (brand green/teal) ══════════════ */
.bvo-location {
    padding: 100px 0 80px;
    background:
        radial-gradient(ellipse 80% 60% at 85% 10%, rgba(125,194,66,.18) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 10% 95%, rgba(0,90,140,.14) 0%, transparent 55%),
        linear-gradient(180deg, #fff 0%, #f1faea 100%);
    position: relative;
    overflow: hidden;
}
.bvo-location::before {
    content: '';
    position: absolute;
    top: -60px; right: -80px;
    width: 320px; height: 320px;
    background: url('../img/hop-hero.webp') center/contain no-repeat;
    opacity: .08;
    transform: rotate(25deg);
    pointer-events: none;
    z-index: 0;
}
.bvo-location__wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.bvo-location__map {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 3px solid rgba(58,110,16,.25);
    box-shadow: 0 14px 38px rgba(0, 60, 90, 0.18);
    aspect-ratio: 16 / 11;
    background: #eee;
}
.bvo-location__map iframe,
.bvo-location__map img {
    width: 100%; height: 100%;
    display: block;
    border: 0;
    object-fit: cover;
}
.bvo-location__map-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.25) 100%);
}
.bvo-location__info h2 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    color: #2a4d08;
    margin: 0 0 6px;
    letter-spacing: .02em;
}
.bvo-location__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    letter-spacing: .2em;
    color: #3A6E10;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding: 6px 14px 6px 10px;
    background: rgba(58,110,16,.1);
    border-radius: 999px;
}
.bvo-location__kicker i { color: #3A6E10; }
.bvo-location__addr {
    font-size: 1.1rem;
    color: #2d3a1a;
    margin: 0 0 24px;
    line-height: 1.5;
}
.bvo-location__addr strong { color: #2a4d08; }
.bvo-nav-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.bvo-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid #3A6E10;
    color: #2a4d08;
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
    transition: transform .2s, background .2s, color .2s, box-shadow .2s;
    box-shadow: 0 3px 10px rgba(58,110,16,.12);
}
.bvo-nav-btn:hover, .bvo-nav-btn:focus {
    background: #3A6E10;
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(58,110,16,.3);
}
.bvo-nav-btn i { font-size: 1.05rem; }
.bvo-nav-btn--primary {
    background: linear-gradient(180deg, #4a8c18 0%, #3A6E10 100%);
    color: #fff;
    border-color: #3A6E10;
}
.bvo-nav-btn--primary:hover, .bvo-nav-btn--primary:focus {
    background: linear-gradient(180deg, #005A8C 0%, #00476e 100%);
    border-color: #005A8C;
    color: #fff;
}
.bvo-travel-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin-top: 20px;
}
.bvo-travel-fact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .95rem;
    color: #2d3a1a;
    padding: 10px 12px;
    background: rgba(255,255,255,.7);
    border-left: 3px solid #3A6E10;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}
.bvo-travel-fact i {
    color: #3A6E10;
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}
.bvo-travel-fact strong { color: #2a4d08; display: block; margin-bottom: 2px; }

@media (max-width: 860px) {
    .bvo-location { padding: 64px 0 48px; }
    .bvo-location__wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .bvo-location__map { aspect-ratio: 4 / 3; }
    .bvo-location__info h2 { font-size: 1.75rem; }
    .bvo-nav-btn { font-size: .9rem; padding: 10px 15px; }
    .bvo-travel-facts { grid-template-columns: 1fr; gap: 10px; }
}

/* ══════════════ SPONSOR FORM MODAL ══════════════ */
.bvo-sponsor-modal {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.bvo-sponsor-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.bvo-sponsor-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 35, 5, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.bvo-sponsor-modal__sheet {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #fff 0%, #f6fbee 100%);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0, 40, 0, .4),
                0 0 0 1px rgba(58,110,16,.18);
    padding: 40px 36px 32px;
    transform: translateY(30px) scale(.97);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.bvo-sponsor-modal.is-open .bvo-sponsor-modal__sheet {
    transform: translateY(0) scale(1);
}
.bvo-sponsor-modal__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    background: rgba(58,110,16,.08);
    color: #3A6E10;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.bvo-sponsor-modal__close:hover {
    background: #3A6E10;
    color: #fff;
    transform: rotate(90deg);
}

.bvo-sponsor-modal__header { margin-bottom: 26px; }
.bvo-sponsor-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(90deg, #F8C832 0%, #E5900A 100%);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(229,144,10,.3);
}
.bvo-sponsor-modal__header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: #2a4d08;
    margin: 0 0 10px;
    letter-spacing: .02em;
    line-height: 1.15;
}
.bvo-sponsor-modal__intro {
    color: #4a5a3a;
    line-height: 1.55;
    margin: 0;
    font-size: .95rem;
}

/* Form */
.bvo-sponsor-form { display: block; }
.bvo-form-row {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}
.bvo-form-row--2 { grid-template-columns: 1fr 1fr; }

.bvo-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}
.bvo-field__label {
    font-size: .82rem;
    font-weight: 700;
    color: #2a4d08;
    margin-bottom: 6px;
    letter-spacing: .02em;
}
.bvo-field__label em {
    color: #c0370e;
    font-style: normal;
    margin-left: 2px;
}
.bvo-field input,
.bvo-field textarea {
    font-family: inherit;
    font-size: 1rem;
    color: #1a2810;
    background: #fff;
    border: 2px solid rgba(58,110,16,.25);
    border-radius: 10px;
    padding: 11px 14px;
    transition: border-color .2s, box-shadow .2s, background .2s;
    width: 100%;
    box-sizing: border-box;
}
.bvo-field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.bvo-field input:focus,
.bvo-field textarea:focus {
    outline: none;
    border-color: #3A6E10;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(58,110,16,.15);
}
.bvo-field input::placeholder,
.bvo-field textarea::placeholder { color: #a0aa90; }

/* Invalid state (after first submit attempt) */
.bvo-form--invalid .bvo-field input:invalid,
.bvo-form--invalid .bvo-field textarea:invalid {
    border-color: #c0370e;
    background: #fff7f4;
}

.bvo-form-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6a7a5a;
    font-size: .82rem;
    margin: 6px 0 22px;
}
.bvo-form-note i { color: #3A6E10; }

.bvo-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.bvo-btn--ghost {
    background: transparent !important;
    color: #3A6E10 !important;
    border: 2px solid rgba(58,110,16,.3) !important;
    box-shadow: none !important;
}
.bvo-btn--ghost:hover {
    background: rgba(58,110,16,.08) !important;
    border-color: #3A6E10 !important;
}
.bvo-btn--submit {
    background: linear-gradient(180deg, #4a8c18 0%, #3A6E10 100%) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 12px 26px !important;
    font-weight: 700 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(58,110,16,.32) !important;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.bvo-btn--submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(58,110,16,.4) !important;
}
.bvo-btn--submit:disabled { opacity: .7; cursor: wait; }

.bvo-form-success {
    margin-top: 18px;
    padding: 18px 22px;
    background: linear-gradient(90deg, rgba(58,110,16,.1) 0%, rgba(248,200,50,.12) 100%);
    border-left: 4px solid #3A6E10;
    border-radius: 10px;
    color: #2a4d08;
    font-size: 1rem;
    line-height: 1.5;
}
.bvo-form-success i {
    color: #3A6E10;
    font-size: 1.3rem;
    margin-right: 8px;
    vertical-align: -2px;
}
.bvo-form-success strong { color: #2a4d08; margin-right: 4px; }

.bvo-form-error {
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .35);
    border-radius: 10px;
    color: #8a1a24;
    font-size: .95rem;
    line-height: 1.4;
}

/* Volledig bevestigingsscherm dat het formulier vervangt */
.bvo-form-success-screen {
    text-align: center;
    padding: 20px 10px 10px;
    animation: bvoSuccessIn .45s ease-out both;
}
.bvo-form-success-screen__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3A6E10 0%, #5a9821 100%);
    color: #fff;
    font-size: 2.6rem;
    margin: 0 auto 22px;
    box-shadow: 0 10px 28px rgba(58,110,16,.35);
    animation: bvoCheckPop .55s cubic-bezier(.17,.88,.32,1.28) both;
    animation-delay: .1s;
}
.bvo-form-success-screen h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.9rem;
    color: #2a4d08;
    margin: 0 0 12px;
}
.bvo-form-success-screen p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: #3a4d28;
    max-width: 420px;
    margin: 0 auto 10px;
}
.bvo-form-success-screen__sub {
    font-size: .85rem !important;
    color: #7a8a60 !important;
    margin-bottom: 24px !important;
}
.bvo-form-success-screen .bvo-btn {
    margin-top: 8px;
}
@keyframes bvoSuccessIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bvoCheckPop {
    0%   { transform: scale(0);   opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

@media (max-width: 560px) {
    .bvo-sponsor-modal__sheet {
        padding: 32px 22px 24px;
        max-height: 94vh;
        border-radius: 18px;
    }
    .bvo-form-row--2 { grid-template-columns: 1fr; }
    .bvo-form-actions { justify-content: stretch; }
    .bvo-form-actions .bvo-btn,
    .bvo-form-actions .bvo-btn--submit { flex: 1; justify-content: center; }
}