:root {
    --wine: #4a1328;
    --wine-deep: #2d0d1a;
    --wine-light: #7a2744;
    --cream: #f6f0e6;
    --paper: #fffdf9;
    --ink: #201b18;
    --muted: #746d67;
    --gold: #c6a15b;
    --bs-primary: var(--wine);
    --bs-primary-rgb: 74, 19, 40;
    --bs-link-color: var(--wine);
    --bs-link-hover-color: var(--wine-light);
    --bs-focus-ring-color: rgba(122, 39, 68, .28);
}

@font-face {
    font-family: "Steve Serif";
    src: local("Georgia");
    font-display: swap;
}

html { width: 100%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { width: 100%; max-width: 100%; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 1.7; }
img { max-width: 100%; }
h1, h2, blockquote { font-family: "Steve Serif", Georgia, serif; font-weight: 400; letter-spacing: -.035em; }
a { color: var(--wine); text-underline-offset: .2em; }
.skip-link { position: fixed; z-index: 1100; top: -100px; left: 1rem; padding: .75rem 1rem; background: var(--paper); color: var(--wine); }
.skip-link:focus { top: 1rem; }
.section-space { padding: clamp(5rem, 9vw, 9rem) 0; }
.display-title { font-size: clamp(2.45rem, 5vw, 5rem); line-height: 1.02; }
.eyebrow { margin-bottom: 1rem; font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.text-brand { color: var(--wine) !important; }

.btn { --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .72rem; font-size: .82rem; font-weight: 700; letter-spacing: .035em; }
.btn-primary { --bs-btn-bg: var(--wine); --bs-btn-border-color: var(--wine); --bs-btn-hover-bg: var(--wine-light); --bs-btn-hover-border-color: var(--wine-light); --bs-btn-active-bg: var(--wine-deep); --bs-btn-active-border-color: var(--wine-deep); --bs-btn-disabled-bg: #866c76; --bs-btn-disabled-border-color: #866c76; }
.btn-primary:focus-visible, .btn-light:focus-visible, .btn-outline-light:focus-visible, .nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(198, 161, 91, .45); }

.site-header { background: rgba(255, 253, 249, .96); border-bottom: 1px solid rgba(74, 19, 40, .08); transition: box-shadow .25s ease, background .25s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 35px rgba(45, 13, 26, .1); }
.navbar { min-height: 86px; padding: .35rem 0; }
.navbar-brand img { width: 66px; height: 66px; object-fit: contain; }
.navbar-toggler { border-color: rgba(74, 19, 40, .22); }
.navbar-toggler:focus { box-shadow: 0 0 0 .25rem rgba(122, 39, 68, .2); }
.nav-link { color: var(--ink); font-size: .83rem; font-weight: 650; }
.nav-link:hover, .nav-link:focus { color: var(--wine); }

.hero { position: relative; min-height: 100svh; padding: 10rem 0 7rem; background: var(--wine-deep) url('../img/selectie-kisten.webp') center/cover no-repeat; color: #fff; overflow: hidden; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 7, 16, .93) 0%, rgba(42, 8, 21, .66) 48%, rgba(20, 6, 12, .14) 100%), linear-gradient(0deg, rgba(25, 7, 13, .48), transparent 45%); }
.hero-content { z-index: 1; }
.hero h1 { font-size: clamp(4.2rem, 9.3vw, 9.8rem); line-height: .82; letter-spacing: -.055em; }
.hero .animate__animated { --animate-duration: .85s; }
.hero-delay-1 { animation-delay: .16s; }
.hero-delay-2 { animation-delay: .3s; }
.hero-lead { max-width: 580px; margin-top: 2rem; font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(255,255,255,.86); }
.hero .btn-light { --bs-btn-color: var(--wine); --bs-btn-hover-color: var(--wine); --bs-btn-hover-bg: var(--cream); }
.hero-scroll { position: absolute; z-index: 2; right: clamp(1.5rem, 5vw, 5rem); bottom: 2.5rem; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; text-decoration: none; animation: floatArrow 2.3s ease-in-out infinite; }
.hero-scroll:hover { background: #fff; color: var(--wine); }

.intro-section { background: var(--paper); }
.lead-copy { color: #4f4742; font-size: 1.16rem; }
.feature-line { display: flex; align-items: center; gap: 1rem; font-weight: 700; }
.feature-line i { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--cream); color: var(--wine); }

.selection-section { background: var(--cream); }
.wine-tile { position: relative; min-height: 380px; margin: 0; overflow: hidden; background: var(--wine-deep); }
.wine-tile.tile-large { min-height: 580px; }
.wine-tile img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.2,1); }
.wine-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(26,6,13,.85), transparent 55%); }
.wine-tile:hover img { transform: scale(1.035); }
.wine-tile:hover figcaption { transform: translateY(-5px); }
.wine-tile figcaption { position: absolute; z-index: 1; right: 2rem; bottom: 2rem; left: 2rem; color: #fff; }
.wine-tile figcaption { transition: transform .35s ease; }
.wine-tile figcaption span { display: block; font-family: Georgia, serif; font-size: 2.1rem; }
.wine-tile figcaption small { color: rgba(255,255,255,.78); }
.link-arrow { display: inline-flex; align-items: center; gap: .75rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }

.advice-section { background: var(--paper); }
.advice-card { background: var(--wine); color: #fff; box-shadow: 0 30px 80px rgba(45, 13, 26, .18); }
.advice-image { width: 100%; height: 100%; min-height: 620px; object-fit: cover; }
.advice-copy { padding: clamp(3rem, 7vw, 6.5rem); }
.advice-copy p:not(.eyebrow) { color: rgba(255,255,255,.78); }
.advice-copy .btn-primary { --bs-btn-bg: var(--cream); --bs-btn-color: var(--wine); --bs-btn-border-color: var(--cream); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--wine); --bs-btn-hover-border-color: #fff; }
.check-list { margin: 2rem 0; }
.check-list li { margin: .8rem 0; }
.check-list i { margin-right: .65rem; color: var(--gold); }

.quote-section { background: var(--wine-deep); color: #fff; }
.quote-icon { margin-bottom: 2rem; color: var(--gold); font-size: 2rem; }
.quote-section blockquote { max-width: 980px; margin: 0 auto 2rem; font-size: clamp(2.2rem, 5.5vw, 5.2rem); line-height: 1.08; }
.quote-name { color: rgba(255,255,255,.6); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }

.service-section { background: var(--paper); }
.service-card { position: relative; height: 100%; min-height: 300px; padding: 2.5rem; border: 1px solid #dfd6ca; }
.service-card > span { position: absolute; top: 1.5rem; right: 1.7rem; color: #a6998e; font-size: .74rem; letter-spacing: .15em; }
.service-card > i { margin-bottom: 3.5rem; color: var(--wine); font-size: 2rem; }
.service-card h3 { font-family: Georgia, serif; font-size: 1.65rem; }
.service-card p { margin: 1rem 0 0; color: var(--muted); }
.service-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.service-card:hover { transform: translateY(-7px); border-color: rgba(74,19,40,.35); box-shadow: 0 22px 55px rgba(45,13,26,.09); }
.service-card > i { transition: transform .35s ease; }
.service-card:hover > i { transform: rotate(-7deg) scale(1.08); }

.visit-photo img { width: 100%; height: 100%; min-height: 680px; object-fit: cover; }
.visit-info { display: flex; align-items: center; background: var(--wine); color: #fff; }
.visit-inner { width: 100%; padding: clamp(3.5rem, 8vw, 7rem); }
.visit-info h3 { margin-bottom: 1rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.visit-info h3 i { margin-right: .5rem; color: var(--gold); }
.visit-info address, .hours { color: rgba(255,255,255,.78); }
.link-light-line { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.link-light-line:hover { color: var(--gold); }
.hours div { margin-bottom: .65rem; }
.hours dt { font-weight: 400; }
.hours dd { margin: 0; font-weight: 700; color: #fff; }
.contact-people { display: flex; flex-wrap: wrap; gap: 2rem 4rem; border-top: 1px solid rgba(255,255,255,.18); }
.contact-people strong, .contact-people a { display: block; }
.contact-people a { color: rgba(255,255,255,.75); }

.site-footer { background: #1e1719; color: rgba(255,255,255,.7); }
.footer-logo { border-radius: 50%; }
.footer-title { color: #fff; font-family: Arial, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.site-footer a { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.code-credit { text-decoration: none; }

@keyframes floatArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.wow { --animate-duration: .72s; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 991.98px) {
    .navbar-collapse { padding: 1rem 0 1.5rem; }
    .navbar-nav { align-items: stretch !important; }
    .hero { min-height: 850px; }
    .hero h1 { font-size: clamp(4rem, 15vw, 7rem); }
    .wine-tile.tile-large { min-height: 480px; }
    .advice-image, .visit-photo img { min-height: 500px; }
}
@media (max-width: 575.98px) {
    .navbar { min-height: 76px; }
    .navbar-brand img { width: 56px; height: 56px; }
    .hero { min-height: 760px; padding-bottom: 5.5rem; }
    .hero h1 { font-size: clamp(3.7rem, 18vw, 5.5rem); }
    .hero-scroll { right: 1.25rem; bottom: 1.5rem; }
    .wine-tile, .wine-tile.tile-large { min-height: 420px; }
    .advice-image, .visit-photo img { min-height: 390px; }
    .service-card { min-height: 260px; }
}