@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("montserrat-400.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("montserrat-600.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("montserrat-700.woff2") format("woff2");
}

/*
 * Honden Hoeve de Lies — herbruikbaar ontwerpraamwerk
 * ---------------------------------------------------
 * Alleen selectors met hdl-voorvoegsel raken componenten. De globale regels
 * beperken zich tot merkkleuren, basistypografie en de vaste-header-offset.
 */

:root {
  --hdl-creme: #f7f0e8;
  --hdl-groen: #41532b;
  --hdl-oranje: #ff914d;
  --hdl-bruin: #644117;
  --hdl-zwart: #000000;
  --hdl-font-body: "Montserrat", sans-serif;
  --hdl-font-title: Georgia, "Times New Roman", serif;
  --hdl-content-width: 1200px;
  --hdl-content-fluid: 90%;
  --hdl-header-height: 88px;
  --hdl-radius: 5px;
  --hdl-focus: 3px solid var(--hdl-oranje);
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdl-header-height) + 16px);
}

body {
  overflow-x: hidden;
  margin: 0;
  background: var(--hdl-creme);
  color: var(--hdl-zwart);
  font-family: var(--hdl-font-body);
  font-size: 16px;
  line-height: 1.7;
}

body.hdl-has-fixed-header {
  padding-top: var(--hdl-header-height);
}

body.admin-bar .hdl-site-header {
  top: 32px;
}

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

:where(.hdl-page, .hdl-site-header, .hdl-site-footer) img,
:where(.hdl-page, .hdl-site-header, .hdl-site-footer) video {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.hdl-page, .hdl-site-header, .hdl-site-footer) :is(h1, h2) {
  font-family: var(--hdl-font-title);
  text-wrap: balance;
}

:where(.hdl-page, .hdl-site-header, .hdl-site-footer) :is(h3, h4, h5, h6, p, ul, ol) {
  margin-top: 0;
}

:where(.hdl-page, .hdl-site-header, .hdl-site-footer) a {
  text-underline-offset: 0.18em;
}

:where(.hdl-page, .hdl-site-header, .hdl-site-footer) :focus-visible {
  outline: var(--hdl-focus);
  outline-offset: 3px;
}

.hdl-skip-link {
  position: fixed;
  z-index: 10001;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: var(--hdl-radius);
  color: var(--hdl-zwart);
  background: var(--hdl-oranje);
  font-weight: 700;
  transform: translateY(-160%);
}

.hdl-skip-link:focus {
  transform: translateY(0);
}

.hdl-shell,
.hdl-section__inner,
.hdl-page__inner {
  width: var(--hdl-content-fluid);
  max-width: var(--hdl-content-width);
  margin-inline: auto;
}

.hdl-page {
  min-height: 50vh;
  background: var(--hdl-creme);
  color: var(--hdl-zwart);
}

.hdl-page h1 {
  margin: 0 0 20px;
  font-size: clamp(2.45rem, 5vw, 4.25rem);
  line-height: 1.04;
}

.hdl-page h2 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 3.5vw, 3.1rem);
  line-height: 1.12;
}

.hdl-page h3 {
  margin-bottom: 10px;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.3;
}

.hdl-page p,
.hdl-page li {
  max-width: 74ch;
}

.hdl-page a:not(.hdl-button):not(.hdl-card__link) {
  color: var(--hdl-oranje);
  font-weight: 700;
  text-decoration-thickness: 2px;
}

.hdl-page a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page a:not(.hdl-button):not(.hdl-card__link):focus-visible {
  color: var(--hdl-groen);
}

.hdl-section {
  position: relative;
  width: 100%;
  padding-block: clamp(52px, 7vw, 92px);
}

.hdl-section--creme {
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
}

.hdl-section--green {
  color: var(--hdl-creme);
  background: var(--hdl-groen);
}

.hdl-section--green :is(h1, h2, h3, h4, p, li, strong) {
  color: var(--hdl-creme);
}

.hdl-section--accent-top {
  border-top: 5px solid var(--hdl-oranje);
}

.hdl-page-hero {
  display: grid;
  min-height: clamp(360px, 56vw, 620px);
  place-items: center;
  color: var(--hdl-creme);
  background-color: var(--hdl-groen);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hdl-page-hero__content {
  width: var(--hdl-content-fluid);
  max-width: 900px;
  margin-inline: auto;
  padding-block: clamp(70px, 10vw, 140px);
  text-align: center;
}

.hdl-page-hero :is(h1, h2, p) {
  color: var(--hdl-creme);
}

.hdl-page-hero p {
  max-width: 62ch;
  margin-inline: auto;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
}

.hdl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}

.hdl-button,
.hdl-page :is(.wp-block-button__link, button[type="submit"], input[type="submit"]) {
  display: inline-flex;
  min-height: 48px;
  padding: 12px 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--hdl-radius);
  color: var(--hdl-zwart);
  background: var(--hdl-oranje);
  font-family: var(--hdl-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.hdl-button:hover,
.hdl-button:focus-visible,
.hdl-page :is(.wp-block-button__link, button[type="submit"], input[type="submit"]):hover,
.hdl-page :is(.wp-block-button__link, button[type="submit"], input[type="submit"]):focus-visible {
  color: var(--hdl-creme);
  background: var(--hdl-groen);
  transform: translateY(-2px);
}

.hdl-button--light {
  color: var(--hdl-groen);
  background: var(--hdl-creme);
}

.hdl-button--light:hover,
.hdl-button--light:focus-visible {
  color: var(--hdl-creme);
  background: var(--hdl-groen);
}

.hdl-grid {
  display: grid;
  gap: clamp(18px, 2.5vw, 30px);
}

.hdl-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hdl-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hdl-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hdl-card {
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-top: 5px solid var(--hdl-groen);
  border-radius: var(--hdl-radius);
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
  transition: border-color 160ms ease, transform 160ms ease;
}

.hdl-card:hover,
.hdl-card:focus-within {
  border-top-color: var(--hdl-oranje);
  transform: translateY(-3px);
}

.hdl-card__body {
  padding: clamp(22px, 3vw, 32px);
}

.hdl-card :is(h2, h3, h4, p, li, strong, span) {
  color: var(--hdl-zwart);
}

.hdl-card__link {
  display: block;
  color: var(--hdl-zwart);
  text-decoration: none;
}

.hdl-card__title {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.hdl-card__media,
.hdl-card__media img {
  width: 100%;
}

.hdl-card__media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* De teksten van alle werkwijzekaarten blijven bewust zwart. */
.hdl-steps .hdl-card,
.hdl-steps .hdl-card :is(h2, h3, h4, p, li, strong, span, a) {
  color: var(--hdl-zwart);
}

.hdl-steps {
  counter-reset: hdl-step;
}

.hdl-step {
  counter-increment: hdl-step;
}

.hdl-step__number::before {
  content: counter(hdl-step, decimal-leading-zero);
  color: var(--hdl-oranje);
  font-family: var(--hdl-font-title);
  font-size: 2rem;
  font-weight: 700;
}

.hdl-icon-box {
  min-width: 0;
  padding: clamp(22px, 3vw, 32px);
  border: 2px solid var(--hdl-groen);
  border-radius: var(--hdl-radius);
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
  transition: border-color 160ms ease, transform 160ms ease;
}

.hdl-icon-box:hover,
.hdl-icon-box:focus-within {
  border-color: var(--hdl-oranje);
  transform: translateY(-3px);
}

.hdl-icon-box__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: var(--hdl-oranje);
}

.hdl-icon-box__title {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.hdl-media {
  overflow: hidden;
}

.hdl-media img,
.hdl-media video {
  width: 100%;
  object-fit: cover;
}

.hdl-map {
  overflow: hidden;
  border: 5px solid var(--hdl-oranje);
  border-radius: var(--hdl-radius);
  background: var(--hdl-creme);
}

.hdl-map img {
  width: 100%;
}

.hdl-note {
  padding: 20px 22px;
  border-left: 5px solid var(--hdl-oranje);
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
}

/* Header */
.hdl-site-header {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  min-height: var(--hdl-header-height);
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
  border-bottom: 1px solid var(--hdl-groen);
}

.hdl-header__inner {
  position: relative;
  display: flex;
  width: var(--hdl-content-fluid);
  max-width: var(--hdl-content-width);
  min-height: var(--hdl-header-height);
  margin-inline: auto;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.hdl-header__brand {
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
}

.hdl-header__logo {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.hdl-nav {
  min-width: 0;
  margin-left: auto;
}

.hdl-nav__list,
.hdl-nav__sub-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hdl-nav__list {
  display: flex;
  gap: clamp(17px, 1.6vw, 25px);
  align-items: center;
}

.hdl-nav__item {
  position: relative;
  min-width: 0;
}

.hdl-nav__item-row {
  display: flex;
  align-items: center;
}

.hdl-nav__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--hdl-zwart);
  font-family: var(--hdl-font-body);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.hdl-nav__link:hover,
.hdl-nav__link:focus-visible,
.hdl-nav__link[aria-current="page"],
.hdl-nav__link[aria-current="true"] {
  color: var(--hdl-oranje);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.hdl-menu-contact > .hdl-nav__link,
.hdl-menu-contact.current-menu-item > .hdl-nav__link,
.hdl-menu-contact.current_page_item > .hdl-nav__link,
.hdl-menu-contact > .hdl-nav__link[aria-current="page"],
.hdl-menu-contact > .hdl-nav__link[aria-current="true"] {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--hdl-radius);
  color: var(--hdl-creme) !important;
  background: var(--hdl-groen);
  text-decoration: none;
}

.hdl-menu-contact > .hdl-nav__link:hover,
.hdl-menu-contact > .hdl-nav__link:focus-visible {
  color: var(--hdl-zwart) !important;
  background: var(--hdl-oranje);
  text-decoration: none;
}

.hdl-nav__submenu-toggle {
  display: inline-grid;
  width: 30px;
  height: 40px;
  padding: 0;
  border: 0;
  place-items: center;
  color: var(--hdl-zwart);
  background: transparent;
  cursor: pointer;
}

.hdl-nav__submenu-toggle svg {
  width: 14px;
  transition: transform 160ms ease;
}

.hdl-nav__item.is-submenu-open > .hdl-nav__item-row .hdl-nav__submenu-toggle svg {
  transform: rotate(180deg);
}

.hdl-nav__sub-menu {
  position: absolute;
  top: calc(100% - 2px);
  left: -18px;
  display: none;
  min-width: 255px;
  padding: 10px 18px 14px;
  border-top: 5px solid var(--hdl-oranje);
  border-radius: 0 0 var(--hdl-radius) var(--hdl-radius);
  background: var(--hdl-creme);
}

.hdl-nav__sub-menu .hdl-nav__link {
  width: 100%;
  min-height: 40px;
}

.hdl-nav__item--has-children:hover > .hdl-nav__sub-menu,
.hdl-nav__item--has-children:focus-within > .hdl-nav__sub-menu,
.hdl-nav__item--has-children.is-submenu-open > .hdl-nav__sub-menu {
  display: block;
}

.hdl-header__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
}

.hdl-header__menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 2px solid var(--hdl-groen);
  border-radius: var(--hdl-radius);
  align-items: center;
  justify-content: center;
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
  cursor: pointer;
}

.hdl-header__menu-icon {
  position: relative;
  width: 23px;
  height: 16px;
}

.hdl-header__menu-icon::before,
.hdl-header__menu-icon::after,
.hdl-header__menu-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  content: "";
  transition: transform 160ms ease, top 160ms ease;
}

.hdl-header__menu-icon::before {
  top: 0;
}

.hdl-header__menu-icon span {
  top: 7px;
}

.hdl-header__menu-icon::after {
  top: 14px;
}

.hdl-header__menu-toggle[aria-expanded="true"] .hdl-header__menu-icon::before {
  top: 7px;
  transform: rotate(45deg);
}

.hdl-header__menu-toggle[aria-expanded="true"] .hdl-header__menu-icon span {
  transform: scaleX(0);
}

.hdl-header__menu-toggle[aria-expanded="true"] .hdl-header__menu-icon::after {
  top: 7px;
  transform: rotate(-45deg);
}

/* Footer */
.hdl-site-footer {
  width: 100%;
  border-top: 5px solid var(--hdl-oranje);
  color: var(--hdl-creme);
  background: var(--hdl-groen);
}

.hdl-footer__main {
  display: grid;
  width: var(--hdl-content-fluid);
  max-width: var(--hdl-content-width);
  margin-inline: auto;
  padding-block: clamp(44px, 6vw, 72px);
  grid-template-columns: minmax(270px, 1.25fr) minmax(210px, 0.8fr) minmax(330px, 1.4fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.hdl-footer__brand,
.hdl-footer__column {
  min-width: 0;
}

.hdl-footer__brand-link {
  display: block;
  width: min(100%, 360px);
}

.hdl-footer__logo {
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.hdl-site-footer h2,
.hdl-site-footer h3,
.hdl-footer__title {
  margin: 0 0 18px;
  color: var(--hdl-creme);
  font-family: var(--hdl-font-title);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.hdl-footer__contact,
.hdl-footer__menu,
.hdl-footer__legal-links,
.hdl-footer__socials {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hdl-footer__contact li + li {
  margin-top: 5px;
}

.hdl-site-footer a {
  color: var(--hdl-creme);
  font-weight: 600;
  text-decoration: none;
}

.hdl-site-footer a:hover,
.hdl-site-footer a:focus-visible,
.hdl-site-footer a[aria-current="page"],
.hdl-site-footer a[aria-current="true"] {
  color: var(--hdl-oranje);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.hdl-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 20px;
}

.hdl-footer__social-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.hdl-footer__social-link svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.hdl-footer__menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 24px;
}

.hdl-footer__menu a {
  display: inline-block;
  line-height: 1.35;
}

.hdl-footer__legal {
  width: 100%;
  color: var(--hdl-creme);
  background: var(--hdl-bruin);
}

.hdl-footer__legal-inner {
  display: flex;
  width: var(--hdl-content-fluid);
  max-width: var(--hdl-content-width);
  min-height: 62px;
  margin-inline: auto;
  padding-block: 12px;
  gap: 12px 30px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.87rem;
}

.hdl-footer__legal-inner p {
  margin: 0;
  color: var(--hdl-creme);
}

.hdl-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

@media (max-width: 1399px) {
  .hdl-nav {
    position: absolute;
    top: 100%;
    left: 50%;
    display: none;
    width: 100vw;
    max-height: calc(100vh - var(--hdl-header-height));
    margin: 0;
    padding: 12px max(5%, calc((100vw - var(--hdl-content-width)) / 2)) 22px;
    overflow-y: auto;
    border-top: 5px solid var(--hdl-oranje);
    background: var(--hdl-creme);
    transform: translateX(-50%);
  }

  .hdl-nav.is-open {
    display: block;
  }

  .hdl-nav__list {
    display: block;
  }

  .hdl-nav__item + .hdl-nav__item {
    border-top: 1px solid var(--hdl-groen);
  }

  .hdl-nav__item-row {
    justify-content: space-between;
  }

  .hdl-nav__link {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
  }

  .hdl-nav__submenu-toggle {
    flex: 0 0 46px;
  }

  .hdl-nav__sub-menu {
    position: static;
    min-width: 0;
    padding: 0 0 10px 18px;
    border-top: 0;
    border-left: 5px solid var(--hdl-oranje);
    border-radius: 0;
  }

  .hdl-nav__item--has-children:hover > .hdl-nav__sub-menu:not([data-hdl-open="true"]),
  .hdl-nav__item--has-children:focus-within > .hdl-nav__sub-menu:not([data-hdl-open="true"]) {
    display: none;
  }

  .hdl-nav__item--has-children.is-submenu-open > .hdl-nav__sub-menu {
    display: block;
  }

  .hdl-header__menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 1024px) {
  .hdl-grid--4,
  .hdl-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hdl-footer__main {
    grid-template-columns: minmax(260px, 1fr) minmax(210px, 0.8fr);
  }

  .hdl-footer__nav-column {
    grid-column: 1 / -1;
  }
}

@media (max-width: 782px) {
  body.admin-bar .hdl-site-header {
    top: 46px;
  }
}

@media (max-width: 767px) {
  :root {
    --hdl-content-fluid: 100%;
    --hdl-header-height: 72px;
  }

  .hdl-shell,
  .hdl-section__inner,
  .hdl-page__inner {
    width: 100%;
    max-width: none;
    padding-inline: 5px;
  }

  .hdl-page-hero__content {
    width: 100%;
    max-width: none;
    padding-inline: 5px;
  }

  .hdl-page h1 {
    font-size: clamp(2.2rem, 12vw, 3.25rem);
  }

  .hdl-page h2 {
    font-size: clamp(1.85rem, 9vw, 2.6rem);
  }

  .hdl-grid--4,
  .hdl-grid--3,
  .hdl-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .hdl-actions {
    flex-direction: column;
  }

  .hdl-actions .hdl-button {
    width: min(100%, 260px);
  }

  /* Tekst houdt 5px rand; foto's en video's lopen exact van rand tot rand. */
  .hdl-page :where(.hdl-media--full-mobile, figure.wp-block-image, .wp-block-video) {
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }

  .hdl-page :where(.hdl-media--full-mobile, figure.wp-block-image, .wp-block-video) :is(img, video) {
    width: 100%;
  }

  .hdl-card :where(figure.wp-block-image, .wp-block-video),
  .hdl-media--contained {
    width: auto;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .hdl-header__inner {
    width: 100%;
    max-width: none;
    min-height: var(--hdl-header-height);
    padding-inline: 5px;
    gap: 7px;
  }

  .hdl-header__logo {
    width: 56px;
    height: 56px;
  }

  .hdl-header__actions {
    gap: 7px;
  }

  .hdl-header__menu-toggle {
    width: 44px;
    height: 44px;
  }

  .hdl-nav {
    padding-inline: 5px;
  }

  .hdl-footer__main {
    width: 100%;
    max-width: none;
    padding: 42px 5px 36px;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    text-align: center;
  }

  .hdl-footer__brand-link {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .hdl-footer__logo {
    width: 100%;
    max-width: 360px;
    height: auto;
  }

  .hdl-footer__nav-column {
    grid-column: auto;
  }

  .hdl-footer__socials {
    justify-content: center;
  }

  .hdl-footer__menu {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    text-align: center;
  }

  .hdl-footer__legal-inner {
    width: 100%;
    max-width: none;
    padding: 16px 5px;
    flex-direction: column;
    text-align: center;
  }

  .hdl-footer__legal-links {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Raw, audited page content.
 * Every selector stays below .hdl-page so the Elementor homepage keeps its
 * existing section design. Only the deliberately listed old home components
 * are hidden further below.
 */
.hdl-page-content {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--hdl-creme);
}

.hdl-page-content > .hdl-page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 475px;
  height: 475px;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  place-items: end center;
  color: var(--hdl-creme);
  background: var(--hdl-groen);
}

.hdl-page-hero__media,
.hdl-page-hero__shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.hdl-page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: var(--hdl-hero-fit, cover);
  object-position: var(--hdl-hero-position-desktop, 50% 50%);
}

.hdl-page-hero__shade {
  display: none;
}

.hdl-page-hero__media {
  left: 0;
  width: 100%;
}

.hdl-page-hero--fit-contain,
.hdl-page-hero--fit-contain .hdl-page-hero__media {
  background: var(--hdl-creme);
}

/* Match the direct-child hero rule's specificity for logo-based heroes. */
.hdl-page-content > .hdl-page-hero--fit-contain {
  background: var(--hdl-creme);
}

.hdl-page-hero--fit-contain .hdl-page-hero__intro :is(h1, h2, h3, p, strong, time) {
  color: var(--hdl-groen) !important;
  text-shadow: none;
}

.hdl-page-hero__intro {
  position: relative;
  z-index: 2;
  width: var(--hdl-content-fluid);
  max-width: var(--hdl-content-width);
  padding-block: clamp(70px, 9vw, 126px) clamp(46px, 7vw, 82px);
}

.hdl-page-hero--image .hdl-page-hero__intro {
  width: var(--hdl-content-fluid);
  max-width: var(--hdl-content-width);
  padding: clamp(70px, 9vw, 126px) 0 clamp(46px, 7vw, 82px);
  margin: 0 auto;
  background: none;
}

.hdl-page-hero__intro :is(h1, h2, h3, p, strong, time) {
  color: var(--hdl-creme) !important;
  text-shadow: 0 2px 6px var(--hdl-zwart);
}

.hdl-page-hero__intro h1 {
  max-width: 22ch;
  margin: 0;
}

.hdl-page-hero__caption {
  margin: 12px 0 0 !important;
  font-family: var(--hdl-font-body);
  font-size: clamp(1rem, 1.8vw, 1.15rem) !important;
  font-weight: 600;
}

.hdl-page-hero__intro p {
  max-width: 64ch;
  margin: 0 0 14px;
  font-size: clamp(1.03rem, 1.8vw, 1.18rem);
}

.hdl-blog-post .hdl-page-hero__eyebrow {
  margin-bottom: 16px;
  font-family: var(--hdl-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hdl-blog-post .hdl-page-hero__eyebrow a {
  color: var(--hdl-creme) !important;
}

.hdl-blog-post .hdl-page-hero__eyebrow a:hover,
.hdl-blog-post .hdl-page-hero__eyebrow a:focus-visible {
  color: var(--hdl-oranje) !important;
}

.hdl-blog-post .hdl-page-hero__intro h1 {
  max-width: 22ch;
}

@media (min-width: 768px) {
  /* Internal photo heroes follow the measured Home text geometry. */
  .hdl-page-content > .hdl-page-hero > .hdl-page-hero__intro {
    display: flex;
    width: 100%;
    max-width: none;
    height: 100%;
    box-sizing: border-box;
    padding: 132px 132px 0;
    margin: 0;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .hdl-page-content > .hdl-page-hero > .hdl-page-hero__intro h1 {
    max-width: 100%;
    margin: 0;
    font-size: 60px;
    line-height: 1.2;
  }

  .hdl-page-content > .hdl-page-hero > .hdl-page-hero__intro .hdl-page-hero__caption {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.7;
  }

  .hdl-blog-post .hdl-page-hero__eyebrow {
    margin: 0;
  }

  /* Keep the v1.0.7 52px maximum while fitting the long title at 768–1024px. */
  .hdl-blog-post .hdl-page-content > .hdl-page-hero > .hdl-page-hero__intro h1 {
    order: -1;
    font-size: clamp(2.45rem, 5vw, 3.25rem);
  }

  /* The Gijs logo hero keeps image and copy in separate, readable zones. */
  .hdl-page-content > .hdl-page-hero--fit-contain > .hdl-page-hero__media {
    right: 0;
    left: auto;
    width: 58%;
  }

  .hdl-page-content > .hdl-page-hero--fit-contain > .hdl-page-hero__intro {
    width: 42%;
    padding: 92px 28px 24px max(5%, 52px);
    margin-right: auto;
  }

  .hdl-page-content > .hdl-page-hero--fit-contain > .hdl-page-hero__intro h1 {
    font-size: clamp(2.35rem, 4.4vw, 3.75rem);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hdl-page-hero__media img {
    object-position: var(--hdl-hero-position-tablet, var(--hdl-hero-position-desktop, 50% 50%));
  }

  .hdl-page-content > .hdl-page-hero > .hdl-page-hero__intro {
    padding: 124px 124px 0;
  }

  .hdl-page-content > .hdl-page-hero--fit-contain > .hdl-page-hero__intro {
    padding: 82px 22px 24px max(5%, 38px);
  }
}

.hdl-page-body {
  width: 100%;
  margin: 0;
}

.hdl-page-body > section {
  width: 100%;
  padding: clamp(52px, 7vw, 88px) max(5%, calc((100vw - var(--hdl-content-width)) / 2));
  color: var(--hdl-creme);
  background: var(--hdl-groen);
}

.hdl-page-body > .hdl-page-lead {
  display: flow-root;
  width: 100%;
  padding: clamp(52px, 7vw, 88px) max(5%, calc((100vw - var(--hdl-content-width)) / 2));
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
}

.hdl-page-body > .hdl-page-lead :is(p, ul, ol, dl, blockquote, li, dt, dd, strong, time, a) {
  color: var(--hdl-zwart);
}

.hdl-page-body > .hdl-page-lead > :is(p, ul, ol, dl, blockquote) {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

.hdl-blog-post .hdl-page-body > .hdl-page-lead > :is(p, ul, ol, dl, blockquote) {
  max-width: 820px;
}

/* Existing library media can be mapped between or inside named sections. */
.hdl-inline-media {
  margin-top: 0;
  margin-bottom: clamp(24px, 4vw, 44px);
  color: inherit;
}

.hdl-inline-media__image {
  width: 100%;
  height: clamp(240px, 50vw, 460px);
  max-height: 460px;
  border: 5px solid var(--hdl-oranje);
  border-radius: var(--hdl-radius);
  object-fit: cover;
  object-position: var(--hdl-inline-object-position, 50% 50%);
}

.hdl-inline-media--fit-contain .hdl-inline-media__image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 650px;
  margin-right: auto;
  margin-left: auto;
  object-fit: contain;
}

.hdl-inline-media figcaption {
  margin-top: 8px;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
}

.hdl-page-body > .hdl-inline-media--wide {
  width: min(var(--hdl-content-fluid), var(--hdl-content-width));
  margin: clamp(36px, 6vw, 68px) auto;
}

.hdl-page-body > section > .hdl-inline-media--wide {
  width: min(100%, 900px);
  margin: 22px auto clamp(28px, 5vw, 52px);
}

/*
 * Cover media use the same calm text/photo split as the homepage.
 * The complete original section copy stays together in the left column.
 */
.hdl-inline-split {
  display: grid;
  width: min(100%, 1080px);
  min-height: 400px;
  padding: 0 48px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: 40px;
  align-items: stretch;
  color: inherit;
}

.hdl-inline-split__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  color: inherit;
}

.hdl-inline-split__copy :is(h2, h3, h4, p, ul, ol, dl, blockquote, li, dt, dd, strong, time) {
  color: inherit;
}

.hdl-inline-split__copy > :is(h2, h3, p, ul, ol, dl, blockquote, details) {
  width: 100%;
  max-width: 900px;
  margin-right: 0;
  margin-left: 0;
}

.hdl-blog-post .hdl-inline-split__copy > :is(h2, h3, p, ul, ol, dl, blockquote, details) {
  max-width: 820px;
}

.hdl-inline-split__copy > h2 {
  margin-bottom: 22px;
}

.hdl-inline-split > .hdl-inline-media--split {
  width: 100%;
  min-height: 304px;
  height: 100%;
  margin: 0;
  align-self: stretch;
}

.hdl-inline-media--split .hdl-inline-media__image {
  width: 100%;
  height: 100%;
  min-height: 304px;
  max-height: none;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

@media (min-width: 1025px) {
  .hdl-inline-split > .hdl-inline-media--split {
    position: relative;
    min-height: 400px;
    height: auto;
    overflow: hidden;
  }

  .hdl-inline-media--split .hdl-inline-media__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }
}

.hdl-page-body > section > .hdl-inline-media--left,
.hdl-page-body > section > .hdl-inline-media--right {
  width: min(42%, 430px);
}

.hdl-page-body > section:has(> .hdl-inline-media--left),
.hdl-page-body > section:has(> .hdl-inline-media--right) {
  display: flow-root;
}

.hdl-page-body > section > .hdl-inline-media--left {
  float: left;
  margin-right: clamp(22px, 4vw, 44px);
}

.hdl-page-body > section > .hdl-inline-media--right {
  float: right;
  margin-left: clamp(22px, 4vw, 44px);
}

/* Lead is light; the following first section starts green, then alternates. */
.hdl-page-body > section > :is(h2, h3, h4, p, ul, ol, dl, strong),
.hdl-page-body > section > :is(h2, h3, h4, p, ul, ol, dl) :is(li, dt, dd, strong) {
  color: var(--hdl-creme);
}

.hdl-page-body > section:nth-of-type(even) {
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
}

.hdl-page-body > section:nth-of-type(even) > :is(h2, h3, h4, p, ul, ol, dl, strong),
.hdl-page-body > section:nth-of-type(even) > :is(h2, h3, h4, p, ul, ol, dl) :is(li, dt, dd, strong) {
  color: var(--hdl-zwart);
}

.hdl-page-body > ol + section,
.hdl-page-body > ol + .hdl-inline-media + section {
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
}

.hdl-page-body > ol + section > :is(h2, h3, h4, p, ul, ol, dl, strong),
.hdl-page-body > ol + section > :is(h2, h3, h4, p, ul, ol, dl) :is(li, dt, dd, strong),
.hdl-page-body > ol + .hdl-inline-media + section > :is(h2, h3, h4, p, ul, ol, dl, strong),
.hdl-page-body > ol + .hdl-inline-media + section > :is(h2, h3, h4, p, ul, ol, dl) :is(li, dt, dd, strong) {
  color: var(--hdl-zwart);
}

/* Text links on green top-level sections remain visible in both states. */
.hdl-page-body > section > a:not(.hdl-button):not(.hdl-card__link),
.hdl-page-body > section > :is(h2, h3, h4, p, ul, ol, dl, blockquote) a:not(.hdl-button):not(.hdl-card__link),
.hdl-page-body > section > .hdl-inline-split .hdl-inline-split__copy a:not(.hdl-button):not(.hdl-card__link) {
  color: var(--hdl-oranje);
}

.hdl-page-body > section > a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > section > a:not(.hdl-button):not(.hdl-card__link):focus-visible,
.hdl-page-body > section > :is(h2, h3, h4, p, ul, ol, dl, blockquote) a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > section > :is(h2, h3, h4, p, ul, ol, dl, blockquote) a:not(.hdl-button):not(.hdl-card__link):focus-visible,
.hdl-page-body > section > .hdl-inline-split .hdl-inline-split__copy a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > section > .hdl-inline-split .hdl-inline-split__copy a:not(.hdl-button):not(.hdl-card__link):focus-visible {
  color: var(--hdl-creme);
}

/* Light top-level sections and the light Werkwijze CTA retain green hover. */
.hdl-page-body > section:nth-of-type(even) > a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > section:nth-of-type(even) > a:not(.hdl-button):not(.hdl-card__link):focus-visible,
.hdl-page-body > section:nth-of-type(even) > :is(h2, h3, h4, p, ul, ol, dl, blockquote) a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > section:nth-of-type(even) > :is(h2, h3, h4, p, ul, ol, dl, blockquote) a:not(.hdl-button):not(.hdl-card__link):focus-visible,
.hdl-page-body > section:nth-of-type(even) > .hdl-inline-split .hdl-inline-split__copy a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > section:nth-of-type(even) > .hdl-inline-split .hdl-inline-split__copy a:not(.hdl-button):not(.hdl-card__link):focus-visible,
.hdl-page-body > ol + section > a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > ol + section > a:not(.hdl-button):not(.hdl-card__link):focus-visible,
.hdl-page-body > ol + section > :is(h2, h3, h4, p, ul, ol, dl, blockquote) a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > ol + section > :is(h2, h3, h4, p, ul, ol, dl, blockquote) a:not(.hdl-button):not(.hdl-card__link):focus-visible,
.hdl-page-body > ol + section > .hdl-inline-split .hdl-inline-split__copy a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > ol + section > .hdl-inline-split .hdl-inline-split__copy a:not(.hdl-button):not(.hdl-card__link):focus-visible,
.hdl-page-body > ol + .hdl-inline-media + section > a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > ol + .hdl-inline-media + section > a:not(.hdl-button):not(.hdl-card__link):focus-visible,
.hdl-page-body > ol + .hdl-inline-media + section > :is(h2, h3, h4, p, ul, ol, dl, blockquote) a:not(.hdl-button):not(.hdl-card__link):hover,
.hdl-page-body > ol + .hdl-inline-media + section > :is(h2, h3, h4, p, ul, ol, dl, blockquote) a:not(.hdl-button):not(.hdl-card__link):focus-visible {
  color: var(--hdl-groen);
}

.hdl-page-body > section > :is(h2, h3, p, ul, ol, dl, blockquote, details, table) {
  margin-right: auto;
  margin-left: auto;
}

.hdl-page-body > section > :is(h2, h3, p, ul, ol, dl, blockquote, details) {
  max-width: 900px;
}

.hdl-blog-post .hdl-page-body > section > :is(h2, h3, p, ul, ol, dl, blockquote, details) {
  max-width: 820px;
}

.hdl-page-body > section > h2 {
  margin-bottom: 22px;
}

.hdl-page-body > ol {
  display: grid;
  width: 100%;
  padding: clamp(52px, 7vw, 88px) max(5%, calc((100vw - var(--hdl-content-width)) / 2));
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  counter-reset: hdl-work-step;
  list-style: none;
  background: var(--hdl-groen);
}

.hdl-page-body > ol > li {
  min-width: 0;
  counter-increment: hdl-work-step;
}

.hdl-page-body > ol > li > section {
  position: relative;
  height: 100%;
  padding: clamp(22px, 3vw, 32px);
  border-top: 5px solid var(--hdl-groen);
  border-radius: var(--hdl-radius);
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
  transition: border-color 160ms ease, transform 160ms ease;
}

.hdl-page-body > ol > li > section::before {
  display: block;
  margin-bottom: 12px;
  color: var(--hdl-oranje);
  content: counter(hdl-work-step, decimal-leading-zero);
  font-family: var(--hdl-font-title);
  font-size: 2rem;
  font-weight: 700;
}

.hdl-page-body > ol > li > section:hover,
.hdl-page-body > ol > li > section:focus-within {
  border-top-color: var(--hdl-oranje);
  transform: translateY(-2px);
}

.hdl-page-body > ol > li > section :is(h2, h3, h4, p, li, strong, span, a) {
  color: var(--hdl-zwart);
}

.hdl-page-body > section > section,
.hdl-page-body > section > article {
  width: min(100%, 900px);
  margin: 20px auto 0;
  padding: clamp(22px, 3vw, 32px);
  border-top: 5px solid var(--hdl-groen);
  border-radius: var(--hdl-radius);
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
  transition: border-color 160ms ease, transform 160ms ease;
}

.hdl-page-body > section > section:hover,
.hdl-page-body > section > section:focus-within,
.hdl-page-body > section > article:hover,
.hdl-page-body > section > article:focus-within {
  border-top-color: var(--hdl-oranje);
  transform: translateY(-2px);
}

.hdl-page-body > section > :is(section, article) :is(h2, h3, h4, p, li, strong, time, blockquote) {
  color: var(--hdl-zwart);
}

/* Services and topics with several sub-sections become a restrained grid. */
.hdl-page-body > section:has(> section:nth-of-type(2)),
.hdl-page-body > section:has(> article:nth-of-type(2)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.hdl-page-body > section:has(> section:nth-of-type(2)) > h2,
.hdl-page-body > section:has(> section:nth-of-type(2)) > p,
.hdl-page-body > section:has(> article:nth-of-type(2)) > h2,
.hdl-page-body > section:has(> article:nth-of-type(2)) > p {
  grid-column: 1 / -1;
  width: 100%;
}

.hdl-page-body > section:has(> section:nth-of-type(2)) > section,
.hdl-page-body > section:has(> article:nth-of-type(2)) > article {
  width: 100%;
  margin-top: 0;
}

.hdl-page-body details {
  padding: 18px 20px;
  border-top: 5px solid var(--hdl-groen);
  border-radius: var(--hdl-radius);
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
}

.hdl-page-body details + details {
  margin-top: 14px;
}

.hdl-page-body details[open] {
  border-top-color: var(--hdl-oranje);
}

.hdl-page-body summary {
  color: var(--hdl-zwart);
  font-weight: 700;
  cursor: pointer;
}

.hdl-page-body blockquote,
.hdl-review-single blockquote {
  padding: 22px 24px;
  border: 0;
  border-left: 5px solid var(--hdl-oranje);
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
}

.hdl-page-body table {
  width: min(100%, 1000px);
  border-collapse: collapse;
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
}

.hdl-page-body :is(th, td) {
  padding: 13px 15px;
  border: 1px solid var(--hdl-groen);
  text-align: left;
  vertical-align: top;
}

.hdl-page-body th {
  color: var(--hdl-creme);
  background: var(--hdl-groen);
}

.hdl-page-body dl dt {
  margin-top: 14px;
  font-weight: 700;
}

.hdl-page-body dl dd {
  margin: 3px 0 0;
}

.hdl-page-body [data-form-placeholder] {
  display: none !important;
}

.hdl-page-body .fluentform {
  width: min(100%, 900px);
  margin-inline: auto;
}

.hdl-page-body .fluentform :is(input, textarea, select) {
  width: 100%;
  border: 2px solid var(--hdl-groen);
  border-radius: var(--hdl-radius);
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
}

body.hdl-template .hdl-page-body .fluentform form :is(
  input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select
):is(:focus, :focus-visible) {
  border: 2px solid var(--hdl-oranje) !important;
  border-radius: 5px !important;
  outline: none !important;
  color: var(--hdl-zwart) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.hdl-template .hdl-page-body .fluentform form .ff-btn.ff-btn-submit {
  min-height: 48px;
  padding: 12px 24px;
  border: 0 !important;
  border-radius: 5px !important;
  color: var(--hdl-creme) !important;
  background: var(--hdl-groen) !important;
  box-shadow: none !important;
  font-family: var(--hdl-font-body);
  font-weight: 700;
}

body.hdl-template .hdl-page-body .fluentform form .ff-btn.ff-btn-submit:hover,
body.hdl-template .hdl-page-body .fluentform form .ff-btn.ff-btn-submit:focus,
body.hdl-template .hdl-page-body .fluentform form .ff-btn.ff-btn-submit:focus-visible {
  color: var(--hdl-zwart) !important;
  background: var(--hdl-oranje) !important;
}

.hdl-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.hdl-review-card {
  overflow: hidden;
  border-top: 5px solid var(--hdl-groen);
  border-radius: var(--hdl-radius);
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
  transition: border-color 160ms ease, transform 160ms ease;
}

.hdl-review-card:hover,
.hdl-review-card:focus-within {
  border-top-color: var(--hdl-oranje);
  transform: translateY(-3px);
}

.hdl-review-card__media img,
.hdl-review-card > a > img.hdl-review-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: var(--hdl-review-card-fit, cover);
  object-position: var(--hdl-review-card-position, 50% 50%);
  background: var(--hdl-creme);
}

.hdl-review-card__body {
  padding: 22px;
}

.hdl-review-card__body :is(h3, p, a) {
  color: var(--hdl-zwart);
}

.hdl-review-stars {
  color: var(--hdl-oranje);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
}

.hdl-review-post .hdl-page-body > .wp-block-image:first-of-type {
  display: none;
}

.hdl-review-post .hdl-page-body > .hdl-review-single {
  width: 100%;
  padding: clamp(52px, 7vw, 88px) max(5%, calc((100vw - var(--hdl-content-width)) / 2));
  color: var(--hdl-zwart);
  background: var(--hdl-creme);
}

.hdl-review-post .hdl-page-body > .hdl-review-single > :is(p, blockquote, .hdl-review-stars) {
  width: min(100%, 820px);
  margin-right: auto;
  margin-left: auto;
}

/* Existing homepage: replace only its audited old header/footer and home map. */
body.home.hdl-has-fixed-header {
  padding-top: 0;
}

body.home .elementor-element-76026f1,
body.home .elementor-element-db6f34d,
body.home .elementor-element-e47c97c {
  display: none !important;
}

body.home .elementor-element-3f7fe9b > img.e-image-base,
body.home .elementor-element-3f7fe9b > img,
body.home [data-interaction-id="3f7fe9b"] > img.e-image-base,
body.home [class*="e-3f7fe9b-"] > img.e-image-base,
body.home .elementor-element-9ab231e img,
body.home [data-interaction-id="9ab231e"] img,
body.home [class*="e-9ab231e-"] img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 650px !important;
  margin-inline: auto !important;
  border: 5px solid var(--hdl-oranje);
  border-radius: var(--hdl-radius);
  object-fit: contain;
}

body.home :is(.elementor-element-0006b56, [data-interaction-id="0006b56"], [class*="e-0006b56-"]) > em {
  color: var(--hdl-creme) !important;
}

body.home :is(.elementor-element-0006b56, [data-interaction-id="0006b56"], [class*="e-0006b56-"]) a,
body.home :is(.elementor-element-0006b56, [data-interaction-id="0006b56"], [class*="e-0006b56-"]) a * {
  color: var(--hdl-zwart) !important;
}

@media (max-width: 1024px) {
  .hdl-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hdl-inline-split {
    width: min(90vw, 1080px);
    min-height: 0;
    padding: 0 32px;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .hdl-inline-split > .hdl-inline-media--split {
    min-height: 0;
    height: auto;
  }

  .hdl-inline-media--split .hdl-inline-media__image {
    height: clamp(320px, 48vw, 460px);
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .hdl-page-hero__intro,
  .hdl-page-body > .hdl-page-lead,
  .hdl-page-body > section {
    width: 100%;
    max-width: none;
    padding-right: 5px;
    padding-left: 5px;
  }

  .hdl-page-content > .hdl-page-hero {
    min-height: min(112vw, 460px);
    height: min(112vw, 460px);
    place-items: end stretch;
  }

  .hdl-page-content > .hdl-page-hero--image {
    display: grid;
  }

  .hdl-page-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hdl-page-hero__media img {
    object-position: var(--hdl-hero-position-mobile, 50% 50%);
  }

  .hdl-page-hero__intro {
    width: 100%;
    padding: 72px 5px 38px;
  }

  .hdl-page-hero--image .hdl-page-hero__intro {
    width: 100%;
    max-width: none;
    padding: 72px 5px 38px;
    margin: 0;
  }

  /* Keep the full Gijs logo above the copy instead of overlaying both. */
  .hdl-page-content > .hdl-page-hero--fit-contain {
    display: flex;
    min-height: 0;
    height: auto;
    flex-direction: column;
    place-items: initial;
  }

  .hdl-page-content > .hdl-page-hero--fit-contain > .hdl-page-hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: min(72vw, 280px);
    flex: 0 0 auto;
  }

  .hdl-page-content > .hdl-page-hero--fit-contain > .hdl-page-hero__intro {
    position: relative;
    width: 100%;
    max-width: none;
    padding: 24px 5px 30px;
    margin: 0;
    align-self: auto;
  }

  /* Keep the one deliberately long article title fully inside the photo. */
  .hdl-blog-post .hdl-page-hero__intro {
    padding: 48px 5px 28px;
  }

  .hdl-blog-post .hdl-page-hero__intro h1 {
    max-width: 100%;
    font-size: clamp(1.9rem, 9vw, 2.35rem);
  }

  .hdl-page-body > .hdl-inline-media--wide,
  .hdl-page-body > section > .hdl-inline-media--left,
  .hdl-page-body > section > .hdl-inline-media--right {
    float: none;
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }

  .hdl-inline-split {
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .hdl-inline-split__copy {
    padding-right: 0;
    padding-left: 0;
  }

  .hdl-inline-split > .hdl-inline-media--split {
    width: 100vw;
    max-width: 100vw;
    min-height: 0;
    height: auto;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }

  .hdl-inline-media--split .hdl-inline-media__image {
    height: clamp(240px, 70vw, 460px);
    min-height: 0;
  }

  .hdl-page-body > section:has(> section:nth-of-type(2)),
  .hdl-page-body > section:has(> article:nth-of-type(2)),
  .hdl-page-body > ol,
  .hdl-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hdl-page-body > ol {
    padding-right: 5px;
    padding-left: 5px;
  }

  .hdl-review-post .hdl-page-body > .hdl-review-single {
    padding-right: 5px;
    padding-left: 5px;
  }

  .hdl-page-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  .hdl-page-body > section > :is(figure, .wp-block-image, .wp-block-video),
  .hdl-page-body > .wp-block-image,
  .hdl-page-body > .wp-block-video {
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
}