:root {
  --main-color: #1b4332;
  --accent-color: #bf9e5d;
  --background-color: #faf7f2;
  --button-color: #1b4332;
  --font-color: #2b2b2b;
  --font-family: 'Montserrat', sans-serif;
}

/* ===== Base ===== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: var(--font-family); 
  }

body { 
    background: var(--background-color); 
    color: var(--main-color); 
    line-height: 1.5; 
    font-size: 1.1rem; 
  }

/* Provide top offset for fixed header (adjust to header height) */
main { padding-top: 120px; }

/* ===== Hero ===== */
.hero { 
    background: linear-gradient(rgba(27,67,50,0.6), rgba(27,67,50,0.6)), url(/images/restaurant-image.webp) center/cover no-repeat; 
    color: #fff; 
    text-align: center; 
    padding: 7rem 1.5rem; 
  }

.hero h1 { 
    font-size: 3rem; 
    margin-bottom: 1rem; 
  }

.hero p { 
    font-size: 1.5rem; 
    margin-bottom: 2.5rem; 
  }

.hero a { 
    background: var(--button-color); 
    color: #fff; 
    padding: 1rem 2rem; 
    text-decoration: none; 
    border-radius: 50px; 
    font-weight: 700; 
    transition: transform .3s ease, background .3s ease; 
  }

.hero a:hover { 
    transform: scale(1.05); 
    background: var(--accent-color); 
  }

/* ===== HOE KAN IK HELPEN (3 specialisaties) ===== */

/* Sectie-container */
#intro-servizi{
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1.25rem;
  text-align: center;
}
#intro-servizi h2{
  color: var(--main-color);
  font-size: clamp(1.9rem, 1vw + 1.6rem, 2.6rem);
  letter-spacing: .5px;
  margin: 0 0 .75rem;
}
#intro-servizi .intro-text,
#intro-servizi .closing-text{
  color: var(--main-color);
  opacity: .95;
  font-size: clamp(1rem, .25vw + .95rem, 1.15rem);
  line-height: 1.75;
  margin: 0 auto 1.75rem;
  max-width: 900px;
}

/* Grid */
.specialties{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
  margin: 0 auto 2.25rem;
}
@media (max-width: 1024px){
  .specialties{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px){
  .specialties{ grid-template-columns: 1fr; }
}

/* Kaarten */
.spec-card{
  border-radius: 16px;
  padding: 1.6rem 1.4rem 1.4rem;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.spec-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
}

/* Groot icoon gecentreerd */
.spec-icon{
  display: grid;
  place-items: center;
  margin-bottom: 1.65rem;
}
.spec-icon i{
  font-size: clamp(2.2rem, 1.2vw + 1.8rem, 3rem);
  line-height: 1;
  color: var(--accent-color);
}

/* Titels en teksten in kaart */
.spec-card h3{
  margin: .15rem 0 1.45rem;
  font-size: clamp(1.15rem, .3vw + 1rem, 1.35rem);
  color: var(--main-color);
  text-align: center;           /* centreren onder icoon */
}
.spec-lead{
  margin: 0 0 1.6rem;
  color: var(--main-color);
  opacity: .95;
  padding-left: 1rem;
  text-align: left;           /* korte pitch ook centreren */
}

/* Bullets compact en goed leesbaar */
.spec-points{
  margin: .25rem 0 0;
  padding-left: 1.15rem;
  color: var(--main-color);
  line-height: 1.6;
  font-size: .98rem;
}
.spec-points li{ margin: .25rem 0; }

/* Mobiel finetuning */
@media (max-width: 767px){
  #intro-servizi{ margin: 1.5rem auto 0; }
  #intro-servizi .intro-text{ margin-bottom: 1.25rem; }
  .spec-card{ padding: 1.25rem 1rem; }
  .spec-points{ font-size: .97rem; }
}

/* Scroll-stagger animatie (blijft zoals je had) */
.spec-card.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.spec-card.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.specialties .spec-card.reveal:nth-child(1){ transition-delay: .06s; }
.specialties .spec-card.reveal:nth-child(2){ transition-delay: .14s; }
.specialties .spec-card.reveal:nth-child(3){ transition-delay: .22s; }



/* ===== Sections ===== */
.section { 
    text-align: center; 
    padding: 2rem 1.5rem; 
  }

.section h2 { 
    font-size: 2.2rem; 
    margin-bottom: 2rem; 
  }

.button-main { 
    margin-top: 4rem; 
    background: var(--button-color); 
    color: #fff; 
    padding: 1rem 2rem; 
    text-decoration: none; 
    border-radius: 50px; 
    font-weight: 700; 
    transition: transform .3s ease, background .3s ease; 
    display: inline-block; 
  }

.button-main:hover { 
    transform: scale(1.05); 
    background: var(--accent-color); 
    cursor: pointer;
  }



/* ===== Chi sono ===== */
.chi-sono { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 2rem; 
    max-width: 1000px; 
    margin: 0 auto; 
    text-align: center; 
  }

.chi-sono img { 
    width: 220px; 
    border-radius: 50%; 
    box-shadow: 0 8px 16px rgba(0,0,0,.1); 
  }


/* ===== Footer ===== */
footer { 
    background: var(--main-color); 
    color: #fff; 
    text-align: center; 
    padding: 3rem 1rem; 
    font-size: 1.1rem; 
  }


/* ===== Back to top ===== */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background: transparent;   /* geen extra kleur, alleen jouw icoon */
  border: none;
  border-radius: 0;          /* icoon is zelf rond */
  cursor: pointer;
  z-index: 999;
  box-shadow: none;          /* evt. uitzetten */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

#back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}

#back-to-top img {
  width: 100%;   /* vult de hele knop */
  height: auto;
  display: block;
}



/* ===== Fade-in ===== */
.fade-in { 
    opacity: 0; 
    transform: translateY(40px); 
    transition: opacity 1s ease, transform 1s ease; 
  }

.fade-in.show { 
    opacity: 1; 
    transform: translateY(0); 
  }


/* ===== Navigation / Drawer ===== */

.menu-toggle { 
    position: fixed; 
    top: 1rem; 
    right: 1rem; 
    font-size: 2.2rem; 
    cursor: pointer; 
    color: var(--main-color); 
    background: transparent; 
    border: none; 
    z-index: 1200; 
  }



nav { 
    display: none; 
    flex-direction: column; 
    justify-content: space-between; 
    height: 100vh; 
    width: 260px; 
    position: fixed; 
    top: 0; 
    right: 0; 
    background: var(--background-color); 
    padding: 4rem 1rem 2rem; 
    z-index: 1100; 
    box-shadow: -2px 0 5px rgba(0,0,0,.2); 
  }

nav.is-open { 
    display: flex; 
  }

nav a { 
    padding: 1.2rem; 
    text-decoration: none; 
    color: var(--main-color); 
    text-align: center; 
    font-size: 1.2rem; 
    border-bottom: 1px solid var(--accent-color); 
    font-weight: 600; 
  }

nav a:hover { 
    background: var(--accent-color); 
    color: #fff; 
  }

.nav-links a { 
    display: block; 
    padding: 1rem; 
    text-decoration: none; 
    color: var(--main-color); 
    font-size: 1.1rem; 
    text-align: center; 
    border-bottom: 1px solid var(--accent-color); 
  }

.nav-links a:hover { 
    background: var(--accent-color); 
    color: #fff; 
  }

.nav-button { 
    background: var(--button-color); 
    color: #fff; 
    margin: 2rem auto 1rem; 
    padding: .7rem 1.5rem; 
    text-align: center; 
    font-weight: 600; 
    font-size: .95rem; 
    border-radius: 30px; 
    width: 80%; 
    display: block; 
    text-decoration: none; 
    transition: transform .3s ease, background .3s ease; 
  }

.nav-button:hover { 
    background: var(--accent-color); 
    transform: scale(1.05); 
  }

.overlay { 
    display: none; 
    position: fixed; 
    inset: 0; 
    background: rgba(0,0,0,.5); 
    z-index: 1050; 
  }

.overlay.show { 
  display: block; 
}


/* ===== COME FUNZIONA ===== */

.steps { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 1.25rem; 
    max-width: 1000px; 
    margin: 0 auto; 
    position: relative; 
  }

.steps::before { 
    content: ""; 
    position: absolute; 
    left: 22px; 
    top: 0; 
    bottom: 0; 
    width: 2px; 
    background: rgba(53,97,143,.15); 
  }

.step-card { 
    position: relative; 
    background: white; 
    border-radius: 16px; 
    box-shadow: 0 8px 16px rgba(0,0,0,.08); 
    padding: 2.5rem 1.25rem 1.5rem 3.75rem; 
    transition: transform .25s ease, box-shadow .25s ease; 
    outline: none; 
  }

.step-card:focus-visible { 
    box-shadow: 0 0 0 3px rgba(74,122,183,.35); 
  }

.step-card:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 14px 28px rgba(0,0,0,.12); 
  }

.step-head { 
    display: flex; 
    align-items: center; 
    gap: .75rem; 
    margin-bottom: .25rem; 
  }

.step-badge { 
    position: absolute; 
    left: 8px; 
    top: 1rem; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    background: var(--main-color); 
    color: #fff; 
    font-weight: 700; 
    font-size: .95rem; 
    display: grid; 
    place-items: center; 
    box-shadow: 0 6px 12px rgba(53,97,143,.25); 
  }

.step-icon { 
    font-size: 1.25rem; 
    color: var(--main-color); 
    opacity: .9; 
  }

.step-card h3 { 
    margin: 0; 
    font-size: 1.15rem; 
    color: var(--main-color); 
  }

.step-card p { 
    text-align: center;
  }

.step-teaser { 
    margin: .5rem 0 .25rem; 
    color: #1b4332; 
  }

.step-more { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height .35s ease, opacity .35s ease; 
    opacity: 0; 
  }

.step-card.is-active .step-more { 
    max-height: 220px; 
    opacity: 1; 
    margin-top: .25rem; 
  }

.btn-inline { 
    display: inline-block; 
    margin-top: .75rem; 
    padding: .5rem .9rem; 
    background: var(--button-color); 
    color: #fff; 
    border-radius: 999px; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: .95rem; 
    transition: transform .2s ease, background .2s ease; 
  }

.btn-inline:hover { 
    background: var(--accent-color); 
    transform: translateY(-1px); 
  }

.steps-cta { 
    display: flex; 
    flex-direction: column; 
    gap: .75rem; 
    align-items: center; 
    margin-top: 1.5rem; 
  }

.button-secondary { 
    display: inline-block; 
    margin-top: .5rem; 
    background: transparent; 
    color: var(--main-color); 
    padding: .9rem 1.5rem; 
    text-decoration: none; 
    border-radius: 50px; 
    font-weight: 700; 
    border: 2px solid var(--main-color); 
    transition: all .25s ease; 
  }

.button-secondary:hover { 
    background: var(--main-color); 
    color: #fff; 
  }


/* ===== Media Queries ===== */
@media (min-width: 900px) { /* Steps layout + shared row layouts */
  .steps { 
    grid-template-columns: repeat(4, 1fr); 
    gap: 1rem; }
  .steps::before { 
    content: ""; 
    position: absolute; 
    top: 36px; 
    left: 0; 
    right: 0; 
    height: 2px; 
    width: 100%; 
    background: rgba(53,97,143,.15); }
  .step-card { 
    padding: 1.25rem 1rem 1.5rem; 
    text-align: left; }
  .step-badge { 
    position: static; 
    margin-right: .35rem; }
  .step-head { 
    justify-content: flex-start; }
  .steps-cta { 
    flex-direction: row; 
    justify-content: center; 
    gap: 1rem; }
}

@media (min-width: 768px) { /* Desktop/tablet general grids */
  .cards, .icon-section, .portfolio { 
    flex-direction: row; 
    justify-content: space-between; }
  .card, .icon, .portfolio img { 
    width: 30%; }
  .chi-sono { 
    flex-direction: row; 
    text-align: left; }
}

@media (max-width: 767px) { /* Mobile */
  body { 
    font-size: 1rem; }
  .logo { 
    height: 64px; }
  .hero { 
    padding: 4rem 1rem; }
  .hero h1 { 
    font-size: 2rem; }
  .hero p { 
    font-size: 1.05rem; }
  .hero a { 
    font-size: 1rem; 
    padding: .8rem 1.5rem; }
  #intro-servizi { 
    margin: 2rem 1rem; 
    padding: 2rem 1rem; }
  #intro-servizi h2 { 
    font-size: 1.8rem; }
  #intro-servizi p { 
    font-size: 1rem; }
  .cards, .icon-section, .portfolio, .chi-sono { 
    flex-direction: column; 
    gap: 1.5rem; }
  .card, .icon, .portfolio img { 
    width: 100%; }
  .card { 
    padding: 1.75rem 1rem; }
  .chi-sono { 
    text-align: center; 
    padding: 2rem 1rem; }
  .chi-sono img { 
    width: 160px; }
  #back-to-top { 
    width: 45px; 
    height: 45px; 
    bottom: 1rem; 
    right: 1rem; 
    font-size: 1.2rem; }
  #back-to-top svg { 
    width: 18px; 
    height: 18px; }
  .section { 
    padding: 4rem 1rem; }
  .menu-toggle { 
    font-size: 2rem; 
    top: .8rem; 
    right: .8rem; }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===== Come Funziona – professioneel grid ===== */
#come-funziona h2 {
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
}

.steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto 1rem;
}

/* Vertikale lijn op mobiel */
.steps-grid::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(53,97,143,.18);
}

/* Step card */
.step-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem 1.25rem 1.5rem 3.75rem;
  padding-top: 2.5rem;
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
  transition: box-shadow .25s ease, transform .25s ease;
  outline: none;
  min-height: 170px; /* visuele rust */
}

.step-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.12); }
.step-card:focus-visible { box-shadow: 0 0 0 3px rgba(74,122,183,.35); }

.step-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: .6rem;
  margin-bottom: .35rem;
}

.step-pill {
  position: absolute;
  left: 10px;
  top: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  background: var(--main-color);
  box-shadow: 0 6px 12px rgba(53,97,143,.25);
}

.step-icon {
  font-size: 1.15rem;
  color: var(--main-color);
  opacity: .9;
}

.step-card h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--main-color);
  margin: 0;
}

.step-text {
  margin: .4rem 0 .15rem;
  color: #1b4332;
}

/* Desktop – 4 kolommen & horizontale lijn */
@media (min-width: 960px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  .steps-grid::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    height: 2px;
    width: 100%;
    background: rgba(53,97,143,.18);
  }
  .step-card {
    padding: 1.1rem 1.1rem 1.4rem 1.1rem;
    text-align: left;
    min-height: 230px;
  }
  .step-pill {
    position: static;
    margin-right: .25rem;
  }
  .step-head {
    grid-template-columns: auto auto 1fr;
  }
  .steps-cta { 
    flex-direction: row; 
    justify-content: center; }
}

/* ===== Portfolio ===== */
.portfolio {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

.portfolio-item {
    position: relative;
    flex: 1 1 250px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--main-color);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    border-radius: 12px;
}

.portfolio-item img {
    width: 100%;
    height: 400px; /* vaste hoogte voor consistentie */
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    transition: transform 0.4s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    cursor: pointer;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-caption {
    font-weight: 600;
    font-size: 1rem;
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 1.5rem);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 12px;
    pointer-events: none;
}

/* Hover voor desktop */
.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

/* Actieve klasse voor mobiel */
.portfolio-item.active .portfolio-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* ===== Mobile optimalisatie portfolio ===== */
@media (max-width: 767px) {
    .portfolio {
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .portfolio-item {
        max-width: 100%;
        flex: 1 1 auto;
    }

    .portfolio-item img {
        height: auto; /* Zorgt dat hoogte automatisch schaalt */
        max-height: 280px; /* optioneel, voorkomt dat lange afbeeldingen te groot worden */
    }

    .portfolio-caption {
        font-size: 0.95rem;
    }

    /* Overlay op mobiel minder agressief */
    .portfolio-overlay {
        font-size: 1rem;
        height: 100%;
        opacity: 0; /* standaard uit */
    }

    /* Active class gebruiken voor tap/focus in JS op mobiel */
    .portfolio-item.active .portfolio-overlay {
        opacity: 1;
    }
}

/* ========== Portfolio page ========== */

/* Compactere hero voor subpagina */
.hero--compact { 
  padding: 5.5rem 1.2rem 3.5rem; 
}

/* Container */
.projects{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}



/* Project rij */
.project{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.project:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transform: scale(1.05);
}

/* Media (portret) */
.project__media{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.project__media img{
  width: 80%;
  aspect-ratio: 3/4;            /* rechtopstaand */
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* Content */
.project__content{
  text-align: left;
}
.project__title{
  font-size: clamp(1.25rem, 2vw + 1rem, 2rem);
  color: var(--main-color);
  margin-bottom: .35rem;
}
.project__title span{
  font-weight: 600;
}
.project__lead{
  margin: .25rem 0 1rem;
}
.project__bullets{
  margin: 0 0 1.25rem 1.1rem;
}
.project__bullets li{
  margin: .35rem 0;
}

/* Desktop: om‑en‑om layout */
@media (min-width: 767px){
  .project{
    grid-template-columns: 1fr 1.1fr;
    padding: 2rem 2.25rem;
  }
  .project--reverse{
    grid-template-columns: 1.1fr 1fr;
  }
  .project--reverse .project__media{ order: 2; }
  .project--reverse .project__content{ order: 1; }
}

/* Mobile: altijd eerst tekst, dan foto */
@media (max-width: 767px){
  .project__content{ order: 1; }
  .project__media{ order: 2; }
}

/* ===== Slide-in on scroll ===== */
.fade-in{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: transform, opacity;
}
.fade-in.in-view{ 
  opacity: 1; 
  transform: translateY(0); 
}

/* Richting afhankelijk van data-anim */
.fade-in[data-anim="from-left"]{ transform: translateX(-36px); }
.fade-in[data-anim="from-right"]{ transform: translateX(36px); }
.fade-in.in-view[data-anim="from-left"],
.fade-in.in-view[data-anim="from-right"]{ transform: translateX(0); }

.whatsapp {
  color: white;
}

/* Taalvlaggetjes in hero */
.language-switcher {
  position: absolute;
  top: 35px;
  left: 20px;
  display: flex;
  gap: 10px;
  z-index: 1200; /* boven hero-content */
}

.language-switcher a {
  all: unset;                 /* reset alle button/link-styles */
  display: inline-flex;       /* zodat de img netjes uitlijnt */
  cursor: pointer;
}

.language-switcher .flag img {
  width: 15px;
  height: 15px;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
  border: none;       /* geen rand */
  border-radius: 0;   /* geen cirkel */
  box-shadow: none;   /* geen schaduw */
  background: none;   /* geen achtergrond */
}

.language-switcher .flag img:hover {
  transform: scale(1.1);
  background: none;
}


/* Fix positie van Contatta + vlaggen samen */
.nav-footer .nav-button {
  margin: 0 auto 0.5rem; /* boven geen extra ruimte, onder klein beetje */
  width: 80%;           /* behoudt dezelfde breedte */
  cursor: pointer;
}

/* Standaard bovenop de hero: goud */
.menu-toggle {
  color: var(--accent-color); /* #d4af37 */
  transition: color .25s ease;
}

/* (optioneel) als het menu openklapt, altijd duidelijke kleur */
#menu.is-open ~ .menu-toggle,
.menu-toggle.menu-open {
  color: var(--main-color);
}

/* HERO: op alle schermen logo tonen, tekst verbergen */
.hero {
  display: grid;
  place-items: center;
  text-align: center;
}
.hero .hero-logo { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-bottom: -4rem;
  margin-top: -4rem;
}
.hero .hero-logo img {
  width: clamp(200px, 24vw, 360px); /* schaalt mooi van mobiel tot desktop */
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}
/* tekst in hero overal verbergen */
.hero h1, .hero p { display: none; }

/* (optioneel) als menu open is, iets minder nadruk */
#menu.is-open ~ .site-logo { opacity: .85; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-logo { transition: none; }
}

@media (max-width: 767px) {
  #menu {                     /* specifieker dan 'nav' */
    justify-content: flex-start;   /* zet alles bovenaan i.p.v. verdeeld */
    gap: 12px;                     /* wat ruimte tussen blokken */
  }

  .nav-links {
    margin-bottom: .75rem;         /* kleine ruimte onder de links */
  }

  .nav-button {
    margin: .25rem auto 0;         /* dichter onder de links, gecentreerd */
    width: 80%;
  }
}

/* ===== Einde CSS ===== */