/* ===========================================================================
   Van Vleymen Las & Metaalwerken — stylesheet
   Colors: rood #C62127 / #9A191E · antraciet #2D2D2D · zwart #141414 · #0A0A0A
   Fonts:  Bebas Neue (display) · Barlow Condensed (labels) · Barlow (body)
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; }

body {
  font-family: 'Barlow', sans-serif;
  color: #2D2D2D;
  background: #fff;
  overflow-x: hidden;
}

a { color: #C62127; text-decoration: none; }
a:hover { color: #9A191E; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ---- animations ---------------------------------------------------------- */
@keyframes vvUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes vvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vvDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes vvSlide{ from { transform: translateX(100%); } to { transform: none; } }

/* ---- page transition ----------------------------------------------------- */
main { transition: opacity .35s ease, transform .35s ease; }
main.is-out { opacity: 0; transform: translateY(10px); }

/* ---- desktop nav dropdowns ---------------------------------------------- */
.navitem { position: relative; display: flex; align-items: center; }
.navitem .dropdown { display: none; }
.navitem:hover .dropdown { display: block; }

/* ---- "Wat we maken" accordion (desktop hover-to-expand) ------------------ */
.m-acc { display: flex; height: 440px; background: #141414; }
.m-acc .strip {
  position: relative; overflow: hidden; cursor: pointer;
  flex: 1; transition: flex .7s cubic-bezier(.4,0,.2,1);
}
.m-acc .strip + .strip { border-left: 1px solid rgba(255,255,255,.12); }
.m-acc .strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity .7s cubic-bezier(.4,0,.2,1); }
.m-acc .strip .lbl-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75), transparent 45%); }
.m-acc .strip .lbl { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 22px; }
.m-acc .strip .full { position: absolute; left: 26px; bottom: 24px; right: 26px; opacity: 0; transform: translateY(8px); transition: opacity .4s ease .1s, transform .4s ease .1s; }
.m-acc .strip .full-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent 55%); opacity: 0; transition: opacity .5s ease; }
.m-acc .strip:hover { flex: 2.2; }
.m-acc .strip:hover img { opacity: 1; }
.m-acc .strip:hover .lbl-scrim, .m-acc .strip:hover .lbl { opacity: 0; }
.m-acc .strip:hover .full, .m-acc .strip:hover .full-scrim { opacity: 1; transform: none; }
/* first strip expanded by default until the user hovers another */
.m-acc:not(:hover) .strip:first-child { flex: 2.2; }
.m-acc:not(:hover) .strip:first-child img { opacity: 1; }
.m-acc:not(:hover) .strip:first-child .lbl-scrim, .m-acc:not(:hover) .strip:first-child .lbl { opacity: 0; }
.m-acc:not(:hover) .strip:first-child .full, .m-acc:not(:hover) .strip:first-child .full-scrim { opacity: 1; transform: none; }

/* card-grid variant (tablet / mobile) */
.m-accgrid { display: none; grid-template-columns: 1fr 1fr; gap: 3px; background: #F4F4F4; }

/* ---- generic image zoom on project tiles -------------------------------- */
.tile img { transition: transform .5s ease; }
.tile:hover img { transform: scale(1.05); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .m-acc { display: none; }
  .m-accgrid { display: grid; }
}

@media (max-width: 820px) {
  .navdesk { display: none !important; }
  .mham { display: flex !important; }
  .m-hero, .m-stack, .m-1, .m-contact, .m-foot { grid-template-columns: 1fr !important; }
  .m-2 { grid-template-columns: 1fr 1fr !important; }
  .m-cphoto { min-height: 56vh !important; }
  .m-accgrid { grid-template-columns: 1fr; }
  /* keep the decorative accent block inside the viewport when full-bleed */
  .vv-accent { right: 0 !important; width: 130px !important; height: 130px !important; }
}