/* Footer image band: grey background with the cropped portraits on the left. */
.footer-image { background:#8a8a8a; line-height:0; text-align:left; }
.footer-image img { display:block; max-width:540px; width:auto; height:auto; }
@media (max-width:640px){ .footer-image img { max-width:100%; } }

/* Nav: the vendored CSS hides the separator after the 2nd-to-last item (.nav__item:nth-last-child(2)),
   which on our 6-item menu drops the slash between Beurzen and Contact. Restore it. */
@media (min-width:1131px){
  .navigation .nav .nav__item:nth-last-child(2) a:after { display:block; }
}

/* Home intro: the vendored 1.4rem / line-height:2 / 1.5px tracking + 5rem heading gap reads very
   large and loose. Tighten to a more refined, readable scale. */
.page-content.intro-home { font-size:1.1rem; line-height:1.7; letter-spacing:.3px; }
.page-content.intro-home .page-content { line-height:1.7; }
#homeContent .main__title.hero { margin-bottom:2.5rem; }

/* Rich-text divider + black-section text colour (safety). */
.content-divider { border:none; border-top:1px solid rgba(0,0,0,.15); margin:2rem 0; }
.content-section--black, .content-section--black .page-content, .content-section--black h1, .content-section--black h2,
.content-section--black h1.main__title, .content-section--black h2.main__title, .content-section--black .main__title { color:#fff; }
.photo-block__subtitle { opacity:.7; margin:.25rem 0 1rem; }

/* Home video hero */
.hd-hero { position:relative; min-height:70vh; display:flex; align-items:flex-end; overflow:hidden; background-size:cover; background-position:center; padding:0; }
.hd-hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hd-hero__overlay { position:relative; z-index:1; width:100%; padding:3rem 1.5rem; text-align:center; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.45)); }
.hd-hero__overlay .main__title.hero { color:#fff; }
.hd-hero__sub { color:#fff; opacity:.9; }

/* Generic fade slider (home / detail) — drives the live .ref-slider markup without slick */
.hd-slider { position:relative; width:100%; aspect-ratio:946/385; overflow:hidden; }
.hd-slide { position:absolute; inset:0; opacity:0; transition:opacity 1s ease; background-size:cover; background-position:center; }
.hd-slide.is-active { opacity:1; }
@media (max-width:768px){ .hd-slider { aspect-ratio:4/3; } }

/* .ref-slider: the live items are float+opacity:0 (slick-driven). Make them a fade stack. */
.ref-wrap .ref__block .ref-slider { position:relative; }
.ref-wrap .ref__block .ref-slider .ref-slider__item { position:absolute; top:0; left:0; float:none; transition:opacity .9s ease; }
.ref-wrap .ref__block .ref-slider .ref-slider__item.is-active { opacity:1; }

/* Desktop nav: sits in flow inside .sticky-wrapper, becomes .stuck (fixed top) once it
   reaches the top — like the live. JS sets the wrapper height when stuck so nothing jumps.
   The logo is centred in BOTH states (the vendored CSS only centres it when .stuck). */
@media (min-width:1131px){
  .navigation h1.logo { top:50%; -webkit-transform:translate(0,-50%); transform:translate(0,-50%); }
}

/* Home: full-height video hero ABOVE the nav, so the menu sits at the bottom of the first screen.
   Use a custom wrapper class (NOT the vendored .main-slider-wrap, which forces its own
   height/overflow/grey bg and caused a white seam against the nav). margin-bottom:-1px lets the
   black nav cover any sub-pixel seam. */
.hd-hero-wrap { width:100%; background:#000; line-height:0; }
/* hero a touch shorter than (100vh - navHeight) so the nav's bottom lands just past the fold —
   otherwise a sliver of the white content section peeks under the menu bar. */
.hd-home-hero { position:relative; width:100%; height:calc(100vh - 62px); min-height:420px; background:#000; overflow:hidden; }
/* Video is a few px taller than the hero so its own top/bottom edges are clipped by overflow:hidden
   — that removes the light hairline at the seam without adding any black band. */
.hd-home-hero video { display:block; width:100%; height:calc(100% + 6px); margin-top:-3px; object-fit:cover; }
.hd-home-hero .play-button { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100px; height:100px; border-radius:50%; border:2px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; z-index:2; transition:background .2s ease,color .2s ease; }
.hd-home-hero .play-button__inner { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.hd-home-hero .play-button:hover { background:#fff; color:#000; }
.hd-home-hero .play-button i { font-size:2rem; margin-left:.25rem; }
.hd-home-hero .scroll-down { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); color:#fff; font-size:4rem; z-index:2; animation:hd-bounce 1.8s infinite; }
@keyframes hd-bounce { 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(8px);} }
@media (max-width:1130px){ .hd-home-hero { height:100vh; } }

/* Contact page */
.form.contact .field_row { margin-bottom:1rem; }
.form.contact input, .form.contact textarea { width:100%; padding:.7rem .9rem; border:1px solid #cfcfcf; font:inherit; background:#fff; }
.form.contact textarea { resize:vertical; }
.contact-gdpr { display:flex; align-items:flex-start; gap:.5rem; margin:.5rem 0 1.2rem; font-size:.9rem; opacity:.85; }
.contact-gdpr input { width:auto; margin-top:.2rem; }
.contact-map { width:100%; height:420px; border:0; display:block; }
.contact-cta { color:#fff; }
.contact-cta .main__title.hero, .contact-cta a { color:#fff; }
.contact-cta__line a { text-decoration:none; margin:0 .4rem; }
.contact-cta__sep { opacity:.5; }

/* Mobile top bar: keep it fixed at the top (the full-height home hero would otherwise push
   it down) and give .show-mobile a real height so the absolutely-positioned logo + hamburger
   anchor inside the 65px bar instead of the tall hero. */
@media (max-width:900px){
  header > .header { position:fixed; top:0; left:0; right:0; z-index:60; }
  .header .show-mobile { position:relative; height:65px; }
  .header .show-mobile .mobile-nav-icon { top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); }
}

/* Click-to-play hero: fade the play button while playing (reappears on hover to pause) */
.hd-home-hero .play-button { transition:opacity .3s ease, background .2s ease, color .2s ease; }
.hd-home-hero.is-playing .play-button { opacity:0; }
.hd-home-hero.is-playing:hover .play-button { opacity:1; }
.hd-home-hero .play-button, .hd-home-hero .scroll-down { text-decoration:none; }

/* Hoet logo top-left of the home hero (matches the live .hero-logo) */
.hd-home-hero .hero-logo { position:absolute; top:0; left:0; width:101px; height:87px; background:url('/theme/images/skin/default/logo-hoet.png') no-repeat 50% 50%; background-size:70%; z-index:3; text-indent:-9999px; overflow:hidden; }
@media (max-width:900px){ .hd-home-hero .hero-logo { display:none; } }

/* Home (mobile): transparent top bar so logo/phone/hamburger float over the video — like the live.
   Scoped via the hero-wrap that precedes the header on the home; inner pages keep the black bar. */
@media (max-width:900px){
  .hd-hero-wrap ~ header > .header { background:transparent; }
}

/* Cookie consent banner (matches the live's look; remembers the choice in localStorage) */
.cookie-banner { position:fixed; right:0; bottom:0; z-index:200; width:500px; max-width:100%; background:#f3f2f0; color:#1a1a1a; padding:2rem 3rem; box-shadow:0 10px 40px rgba(0,0,0,.25); font-family:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
.cookie-banner[hidden] { display:none; }
.cookie-banner__title { margin:0 0 .8rem; font-size:24px; font-weight:600; line-height:1.5; }
.cookie-banner__text { margin:0 0 1.25rem; font-size:16px; line-height:1.5; }
.cookie-banner__actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.cookie-banner__btn { background:#1a1a1a; color:#fff; border:0; padding:8px 16px; font-size:14px; font-weight:700; cursor:pointer; }
.cookie-banner__btn:hover { background:#000; }
.cookie-banner__prefs { display:inline-block; margin-top:.7rem; background:#dcdbd8; color:#1a1a1a; border:0; padding:8px 16px; font-size:14px; font-weight:700; cursor:pointer; }
.cookie-banner__prefs:hover { background:#cfcecb; }
@media (max-width:640px){ .cookie-banner { left:0; right:0; bottom:0; max-width:none; } }

/* Site-wide contact CTA background. The live uses background-size:cover, which blows the two
   portraits up huge on narrower widths. Instead show them at NATURAL height on the left and let
   the matching grey (#5f5f5f, sampled from the photo) fill the rest. Mobile: plain grey only. */
section.content-section--cta-contact { background-color:#5f5f5f; background-image:none; position:relative; }
/* Desktop: portraits become a fixed left column (~32%, like the live photo), and the text is
   centred in the GREY area to the right of them — not over the full width (which crowded them). */
@media (min-width:901px){
  section.content-section--cta-contact { padding-left:32%; }
  section.content-section--cta-contact::before { content:''; position:absolute; left:0; top:0; bottom:0; width:32%; background:var(--cta-bg) left center / cover no-repeat; }
  section.content-section--cta-contact .contact-cta-block { width:auto; max-width:700px; margin:0 auto; }
}

/* Site-wide contact CTA: make the h2 heading match the vendored h1.main__title (white, centred accent) */
section.content-section--cta-contact .main__title { color:#fff; text-align:center; margin-bottom:50px; }
section.content-section--cta-contact .main__title::after { background:#fff; left:50%; -webkit-transform:translate(-50%,0); transform:translate(-50%,0); }
.content-section--cta-contact .contact-cta-info a { color:#fff; text-decoration:none; }

/* CTA scroll-reveal (way-point): add a transition + replicate the heading animation for our h2
   (the vendored anim targets h1.main__title). JS adds .in-view when scrolled into view. */
section.content-section--cta-contact .way-point { -webkit-transition:all .6s cubic-bezier(.55,0,.1,1); transition:all .6s cubic-bezier(.55,0,.1,1); }
section.content-section--cta-contact .main__title.way-point { opacity:0; -webkit-transform:translate(0,30px) scale(.5); transform:translate(0,30px) scale(.5); }
section.content-section--cta-contact .main__title.way-point.in-view { opacity:1; -webkit-transform:translate(0,0) scale(1); transform:translate(0,0) scale(1); }