.hwm {
  --hwm-yellow: #f2de35;
  --hwm-yellow-text: #111111;
  --hwm-white: #ffffff;
  --hwm-bg: #222222;
  --hwm-grid-opacity: 0.38;
  --hwm-overlay: rgba(10, 15, 24, 0.34);
  --hwm-menu-hover: #2b7f97;
  --hwm-tagline-bg: #f2de35;
  --hwm-tagline-color: #111111;
  --hwm-tagline-padding: 26px;
  font-family: 'Montserrat', sans-serif;
  color: var(--hwm-white);
}

.hwm--light {
  --hwm-bg: #222222;
  --hwm-grid-opacity: 0.38;
  --hwm-overlay: rgba(10, 15, 24, 0.34);
}

.hwm--dark {
  --hwm-bg: #111317;
  --hwm-grid-opacity: 0.62;
  --hwm-overlay: rgba(0, 0, 0, 0.56);
  --hwm-yellow: #dec824;
}

@media (prefers-color-scheme: dark) {
  .hwm--auto {
    --hwm-bg: #111317;
    --hwm-grid-opacity: 0.62;
    --hwm-overlay: rgba(0, 0, 0, 0.56);
    --hwm-yellow: #dec824;
  }
}

.hwm-hero {
  position: relative;
  height: var(--hwm-hero-height, 760px);
  max-height: var(--hwm-hero-max-height, 100vh);
  min-height: 200px;
  background-color: var(--hwm-bg);
  background-image: var(--hwm-hero);
  background-size: var(--hwm-hero-size, cover);
  background-position: var(--hwm-hero-pos, center center);
  overflow: hidden;
}

.hwm-overlay {
  position: absolute;
  inset: 0;
  background-image: var(--hwm-raster);
  background-repeat: repeat;
  background-size: auto;
  opacity: var(--hwm-grid-opacity);
  pointer-events: none;
}

.hwm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hwm-overlay);
  pointer-events: none;
}

.hwm-logo {
  position: absolute;
  width: clamp(180px, 28vw, 480px);
  z-index: 3;
}

.hwm-logo--left-top { left: clamp(24px, 4vw, 80px); top: clamp(24px, 5vw, 86px); }
.hwm-logo--center-top { left: 50%; top: clamp(24px, 4vw, 70px); transform: translateX(-50%); }
.hwm-logo--right-top { right: clamp(24px, 4vw, 80px); top: clamp(24px, 5vw, 86px); }
.hwm-logo--left-middle { left: clamp(24px, 4vw, 80px); top: 50%; transform: translateY(-50%); }
.hwm-logo--right-middle { right: clamp(24px, 4vw, 80px); top: 50%; transform: translateY(-50%); }

.hwm-logo img { width: 100%; height: auto; display: block; }

.hwm-icons {
  position: absolute;
  z-index: 4;
  display: flex;
  gap: 10px;
}
.hwm-icons--boxed {
  background: var(--hwm-social-box-color, #000000);
  border-radius: var(--hwm-social-box-radius, 10px);
  padding: 6px 8px;
}

.hwm-pos--right-top { top: clamp(22px, 3vw, 42px); right: clamp(22px, 4vw, 70px); }
.hwm-pos--left-top { top: clamp(22px, 3vw, 42px); left: clamp(22px, 4vw, 70px); }
.hwm-pos--right-bottom { bottom: clamp(18px, 3vw, 42px); right: clamp(22px, 4vw, 70px); }
.hwm-pos--left-bottom { bottom: clamp(18px, 3vw, 42px); left: clamp(22px, 4vw, 70px); }

.hwm-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.24);
  opacity: var(--hwm-icon-opacity, 0.9);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}

.hwm-icons a:hover {
  transform: scale(1.1);
  opacity: 1;
  background: rgba(0, 0, 0, 0.45);
}

.hwm-icons img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hwm-icons img.hwm-icon-svg {
  filter: brightness(0) invert(1);
}

.hwm-slogan-band {
  --hwm-tagline-content-width: 1200px;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  min-height: clamp(118px, 8vw, 220px);
  display: block;
  z-index: 4;
}

.hwm-slogan-band::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  /* Start bij begin van de tekstzone */
  left: max(25vw, calc(50% - 300px));
  right: 0;
  background: var(--hwm-tagline-bg);
  z-index: 1;
}

.hwm-slogan-inner {
  width: min(var(--hwm-tagline-content-width), 100%);
  margin: 0 auto;
  min-height: inherit;
  display: grid;
  grid-template-columns: 25% 75%;
  align-items: stretch;
  position: relative;
  z-index: 2;
}
.hwm-slogan-band--no-image::before { left: max(0px, calc(50% - 600px)); }
.hwm-slogan-band--no-image .hwm-slogan-inner { grid-template-columns: 1fr; }

.hwm-tagline--top-left { top: clamp(120px, 14vw, 230px); left: 0; transform: none; }
.hwm-tagline--top-center { top: clamp(120px, 14vw, 230px); left: 50%; transform: translateX(-50%); }
.hwm-tagline--top-right { top: clamp(120px, 14vw, 230px); right: 0; left: 0; transform: none; }
.hwm-tagline--middle-left { top: 50%; left: 0; transform: translateY(-50%); }
.hwm-tagline--middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hwm-tagline--middle-right { top: 50%; right: 0; left: 0; transform: translateY(-50%); }
.hwm-tagline--bottom-left { bottom: clamp(26px, 6vw, 120px); left: 0; transform: none; }
.hwm-tagline--bottom-center { bottom: clamp(26px, 6vw, 120px); left: 50%; transform: translateX(-50%); }
.hwm-tagline--bottom-right { bottom: clamp(26px, 6vw, 120px); right: 0; left: 0; transform: none; }
/* Keep full-width strip regardless of horizontal preset */
.hwm-tagline--top-left,
.hwm-tagline--top-center,
.hwm-tagline--top-right,
.hwm-tagline--middle-left,
.hwm-tagline--middle-center,
.hwm-tagline--middle-right,
.hwm-tagline--bottom-left,
.hwm-tagline--bottom-center,
.hwm-tagline--bottom-right {
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

.hwm-slogan-band.hwm-tagline-v--top { top: 0 !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--10 { top: 10% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--20 { top: 20% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--25 { top: 25% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--30 { top: 30% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--40 { top: 40% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--50 { top: 50% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--55 { top: 55% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--60 { top: 60% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--65 { top: 65% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--70 { top: 70% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--75 { top: 75% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--80 { top: 80% !important; bottom: auto !important; transform: none !important; }
.hwm-slogan-band.hwm-tagline-v--bottom { top: auto !important; bottom: 0 !important; transform: none !important; }

.hwm-sign-wrap {
  position: relative;
  z-index: 3;
  --hwm-sign-rotate: -12deg;
}

.hwm-sign {
	position: absolute;
	width: clamp(120px, 17vw, 330px);
	height: auto;
	transform: rotate(var(--hwm-sign-rotate));
	right: -27px !important;
	max-width: 200px;
	bottom: -12px !important;
}
.hwm-sign-wrap--left-overlap .hwm-sign { right: clamp(-10px, -2.0vw, -30px); bottom: clamp(-24px, -1.6vw, -40px); }
.hwm-sign-wrap--left-inline .hwm-sign { right: 12px; top: 50%; transform: translateY(-50%) rotate(var(--hwm-sign-rotate)); }
.hwm-sign-wrap--right-overlap { grid-column: 2; }
.hwm-sign-wrap--right-overlap .hwm-sign { left: clamp(-18px, -1.6vw, -30px); bottom: clamp(-24px, -1.6vw, -40px); }
.hwm-sign-wrap--right-inline { grid-column: 2; }
.hwm-sign-wrap--right-inline .hwm-sign { left: 12px; top: 50%; transform: translateY(-50%) rotate(var(--hwm-sign-rotate)); }
.hwm-sign-wrap--none { display: none; }

.hwm-slogan {
  grid-column: 2;
  background: transparent;
  color: var(--hwm-tagline-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--hwm-tagline-padding) clamp(20px, 3.2vw, 48px);
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .01em;
}

.hwm-slogan strong { font-weight: 900; }
.hwm-slogan-band--no-image .hwm-slogan { grid-column: 1; }

.hwm-slogan > * {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}

.hwm-slogan p,
.hwm-slogan div,
.hwm-slogan h1,
.hwm-slogan h2,
.hwm-slogan h3,
.hwm-slogan h4,
.hwm-slogan h5,
.hwm-slogan h6 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}

.hwm-nav {
  background: var(--hwm-yellow);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  position: relative;
  z-index: 5;
}

.hwm-nav__inner { max-width: 1380px; margin: 0 auto; padding: 0 16px; }

.hwm-nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  margin: 6px 0;
}

.hwm-nav-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  margin: 5px auto;
  background: #111;
}

.hwm-menu,
.hwm-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hwm-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 36px);
  min-height: 84px;
}

.hwm-menu li { position: relative; }

.hwm-menu > li > a {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1;
  padding: 8px 2px;
  display: inline-flex;
  transition: color .2s ease;
}

.hwm-menu > li > a:hover,
.hwm-menu > li > a:focus,
.hwm-menu > li > a.menu-current { color: var(--hwm-menu-hover); }

.hwm-menu li ul {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  background: var(--hwm-yellow);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  display: none;
  padding: 8px 0;
}

.hwm-menu li:hover > ul,
.hwm-menu li:focus-within > ul { display: block; }

.hwm-menu li ul li a {
  display: block;
  padding: 10px 14px;
  color: #111;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.hwm-menu li ul li a:hover,
.hwm-menu li ul li a:focus { color: var(--hwm-menu-hover); }

.hwm-fx { animation-duration: .9s; animation-fill-mode: both; animation-timing-function: ease; }
.hwm-fx--fade-in { animation-name: hwmFadeIn; }
.hwm-fx--rise-in { animation-name: hwmRiseIn; }
.hwm-fx--fall-in { animation-name: hwmFallIn; }
.hwm-fx--zoom-in { animation-name: hwmZoomIn; }
.hwm-fx--slide-left { animation-name: hwmSlideLeft; }
.hwm-fx--slide-right { animation-name: hwmSlideRight; }

@keyframes hwmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hwmRiseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hwmFallIn { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hwmZoomIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes hwmSlideLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hwmSlideRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 980px) {
  .hwm-hero { background-position: var(--hwm-hero-pos, center center); }
  .hwm-logo { width: clamp(138px, 46vw, 290px); }
  .hwm-logo--left-top,
  .hwm-logo--left-middle { left: 16px; top: 18px; transform: none; }
  .hwm-logo--right-top,
  .hwm-logo--right-middle { right: 16px; top: 18px; transform: none; }

  .hwm-icons { gap: 8px; }
  .hwm-icons a { width: 30px; height: 30px; }
  .hwm-pos--right-top { top: 12px; right: 12px; }
  .hwm-pos--left-top { top: 12px; left: 12px; }

  .hwm-slogan-band { bottom: 0; top: auto; transform: none; min-height: 114px; }
  .hwm-slogan-band::before { left: 25vw; }
  .hwm-slogan-inner { grid-template-columns: 25% 75%; }
  .hwm-tagline--top-left,
  .hwm-tagline--top-center,
  .hwm-tagline--top-right,
  .hwm-tagline--middle-left,
  .hwm-tagline--middle-center,
  .hwm-tagline--middle-right,
  .hwm-tagline--bottom-left,
  .hwm-tagline--bottom-center,
  .hwm-tagline--bottom-right { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; }

  .hwm-sign { width: clamp(95px, 30vw, 190px); }
  .hwm-sign-wrap--left-overlap .hwm-sign,
  .hwm-sign-wrap--right-overlap .hwm-sign { right: -8px; left: auto; bottom: 50px; }

  .hwm-slogan { font-size: 23px; padding: 14px 16px; }

  .hwm-nav-toggle { display: block; }
  .hwm-nav-menu { display: none; padding-bottom: 8px; }
  .hwm-nav-menu.is-open { display: block; }

  .hwm-menu { display: block; min-height: 0; padding: 4px 0 8px; }
  .hwm-menu > li > a { display: block; padding: 10px 8px; font-size: 20px; }
  .hwm-menu li ul { position: static; display: block; box-shadow: none; padding: 0 0 8px 16px; background: transparent; }
  .hwm-menu li ul li a { padding: 8px 0; font-size: 17px; }
}