/* Premium polish layer: keeps the existing identity, tightens rhythm and details. */
:root{
  --accent: #d9b66d;
  --accent-soft: #a98242;
  --gold-hi: #f3d99a;
  --gold-shadow: rgba(217, 182, 109, .26);
  --panel-shadow: 0 22px 70px rgba(0, 0, 0, .34);
}

html{ scroll-padding-top: 88px; }

body{
  background:
    linear-gradient(180deg, #12100f 0%, var(--bg) 42%, #0f0e0d 100%);
  text-rendering: geometricPrecision;
}

body::selection{
  background: rgba(217, 182, 109, .28);
  color: var(--ink);
}

.nav{
  height: 66px;
  padding: 10px clamp(18px, 3.3vw, 44px);
  background:
    linear-gradient(180deg, rgba(14, 12, 10, .98), rgba(8, 7, 6, .95));
  border-bottom: 1px solid rgba(217, 182, 109, .24);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28), 0 1px 0 rgba(243, 217, 154, .05) inset;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav.scrolled{
  background: rgba(8, 7, 6, .98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}

.brand-mark{
  width: 38px;
  height: 38px;
  border-color: rgba(217, 182, 109, .34);
  box-shadow: 0 0 0 1px rgba(243, 217, 154, .1), 0 8px 22px rgba(217, 182, 109, .16);
  filter: drop-shadow(0 8px 18px rgba(217, 182, 109, .16));
}

.brand-text{
  font-size: 21px;
  color: #fff7e7;
  text-shadow: 0 0 18px rgba(217, 182, 109, .18);
}

.brand-text,
.hero-eyebrow,
.page-hero-kicker{
  letter-spacing: .24em;
}

.nav-cta{
  padding: 11px 24px;
  color: #130f09;
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold-hi), var(--accent) 52%, #9f7a3e);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22), 0 0 24px rgba(217, 182, 109, .18);
}

.nav-cta:hover{
  color: #11100f;
  background: linear-gradient(135deg, #fff1bd, var(--gold-hi) 48%, var(--accent));
  border-color: transparent;
  box-shadow: 0 16px 34px var(--gold-shadow), 0 0 34px rgba(243, 217, 154, .2);
}

.theme-toggle,
.burger{
  border-radius: 8px;
}

.menu{
  width: min(420px, calc(100vw - 26px));
  padding-top: 108px;
  background:
    linear-gradient(180deg, rgba(217, 182, 109, .08), transparent 92px),
    rgba(15, 13, 12, .96);
  border-left: 1px solid rgba(217, 182, 109, .2);
  box-shadow: -34px 0 90px rgba(0, 0, 0, .4);
}

.menu a{
  width: 100%;
  border-bottom: 1px solid rgba(217, 182, 109, .1);
}

.menu a:hover,
.menu a:focus-visible{
  color: var(--gold-hi);
}

.menu-overlay.open{
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.hero{
  min-height: 100svh;
  grid-template-columns: minmax(420px, .78fr) minmax(560px, 1fr);
  background: #11100f;
}

.hero-portrait{
  background:
    linear-gradient(90deg, #050505 0%, #0c0b0a 52%, #11100f 100%);
}

.hero-portrait-img{
  background-image: url("../images/henk-hero.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: auto 95% !important;
  background-position: 48% 64% !important;
  filter: grayscale(1) contrast(1.08) brightness(.92) !important;
  transform: none !important;
  animation: none !important;
}

.hero-portrait::after{
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .02) 0%, rgba(17, 16, 15, .12) 62%, rgba(17, 16, 15, .84) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, transparent 34%, rgba(0, 0, 0, .25) 100%);
}

.hero-credit,
.hero-scroll{
  display: none;
}

.hero-content{
  min-height: 100svh;
  justify-content: center;
  padding: clamp(78px, 8vh, 104px) clamp(52px, 6vw, 98px) 58px;
}

.hero-content::before{
  top: 108px;
  bottom: 84px;
  opacity: .74;
  background: linear-gradient(to bottom, transparent, rgba(243, 217, 154, .14) 18%, rgba(217, 182, 109, .32) 50%, rgba(243, 217, 154, .14) 82%, transparent);
}

.hero-eyebrow{
  margin-bottom: 22px;
  color: var(--gold-hi);
  text-shadow: 0 0 20px rgba(217, 182, 109, .24);
}

.hero-eyebrow::before{
  background: linear-gradient(90deg, rgba(243, 217, 154, .1), var(--gold-hi));
  opacity: 1;
}

.hero-title{
  font-size: clamp(56px, 5.4vw, 88px);
  line-height: .9;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero-title .line-2{
  color: var(--gold-hi);
  text-shadow: 0 0 34px rgba(217, 182, 109, .28), 0 0 1px rgba(255, 247, 231, .18);
}

.hero-divider{
  width: min(210px, 44vw);
  margin: 28px 0 22px;
  background: linear-gradient(90deg, var(--gold-hi), rgba(217, 182, 109, .52), rgba(217, 182, 109, .05));
  box-shadow: 0 0 18px rgba(217, 182, 109, .22);
}

.hero-tagline{
  max-width: 620px;
  margin-bottom: 0;
}

.hero-cta{
  margin: 30px 0 32px;
}

.hero-audio{
  max-width: 560px;
  border-radius: 8px;
  border-color: rgba(217, 182, 109, .28);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
    rgba(20, 18, 16, .68);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

.hero-audio:hover,
.hero-audio:focus-visible,
.hero-audio.is-playing,
.hero-audio.is-loading,
.hero-audio.has-audio-note{
  border-color: rgba(217, 182, 109, .72);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .3), 0 0 0 1px rgba(217, 182, 109, .08);
}

.hero-audio.is-loading .hero-audio-icon{
  animation: audioPulse 1s ease-in-out infinite;
}

.hero-audio.has-audio-note .hero-audio-sub{
  color: var(--gold-hi);
}

@keyframes audioPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(.94); }
}

/* Calm premium motion: keep the site elegant and stop attention-grabbing jumps. */
.hero-content,
.hero-meta,
.hero-portrait-img,
.hero-scroll,
.hero-credit,
.video-featured-label .dot,
.video-card-thumb,
.video-card-play::before,
.gallery-item img,
.gallery-page-item img,
.timeline-marker-final{
  animation: none !important;
}

.reveal,
.reveal.in,
.timeline-row-fade,
.timeline-row-visible{
  opacity: 1 !important;
  transform: none !important;
  transition:
    border-color .28s ease,
    background-color .28s ease,
    color .28s ease,
    box-shadow .28s ease !important;
}

.proof-stat-num,
.proof-stat-num .plus,
.timeline-year,
.timeline-period-num{
  animation: none !important;
  transition: color .2s ease !important;
  font-variant-numeric: lining-nums tabular-nums;
}

.video-card-thumb,
.gallery-item img,
.gallery-page-item img{
  opacity: 1 !important;
}

.credential:hover,
.service-card:hover,
.boeken-method:hover,
.event-type:hover,
.video-card:hover,
.video-feature:hover,
.video-item-link:hover,
.media-teaser-card:hover,
.contact-option:hover,
.gallery-page-item:hover,
.band-card:hover,
.proof-stat:hover,
.timeline-row:hover .timeline-card,
.stem-strip-card:hover{
  transform: none !important;
}

.video-card:hover .video-card-thumb,
.video-feature:hover img,
.video-item-link:hover img,
.gallery-item:hover img,
.gallery-page-item:hover img,
.media-teaser-card:hover .media-teaser-image img,
.media-teaser-card:hover.media-teaser-gallery .media-teaser-image img,
.stem-strip-card:hover .stem-strip-thumb img{
  transform: none !important;
}

.media-teaser-image img{
  transform: scale(1.08) !important;
}

.media-teaser-gallery .media-teaser-image img{
  transform: scale(1) !important;
}

.video-card:hover .video-card-play{
  transform: translate(-50%, -50%) !important;
}

.video-feature:hover .video-play-overlay,
.video-item-link:hover .video-play-overlay{
  transform: translate(-50%, -50%) !important;
}

.media-teaser-card:hover .media-teaser-overlay{
  transform: translate(-50%, -50%) !important;
}

.timeline-row:hover .timeline-marker{
  transform: translate(-50%, -50%) !important;
}

.video-featured-label .dot{
  box-shadow: 0 0 0 1px rgba(217, 182, 109, .28), 0 0 12px rgba(217, 182, 109, .18) !important;
}

.timeline-marker-final{
  box-shadow:
    0 0 0 1px rgba(255, 230, 180, .4),
    0 0 14px rgba(210, 172, 101, .5),
    0 0 28px rgba(210, 172, 101, .22) !important;
}

.hero-meta{
  max-width: 620px;
  padding-top: 25px;
  gap: clamp(18px, 2.3vw, 32px);
  border-top-color: rgba(217, 182, 109, .34);
}

.hero-meta .v{
  color: var(--ink);
}

.page-hero{
  min-height: min(62vh, 620px);
}

.page-hero-title{
  letter-spacing: 0;
  text-wrap: balance;
}

.page-hero-title::after{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
}

.credential,
.service-card,
.boeken-method,
.event-type,
.video-card,
.video-feature,
.video-item,
.media-teaser-card,
.contact-option,
.gallery-page-item,
.faq-item,
.band-card{
  border-radius: 8px !important;
  border-color: rgba(217, 182, 109, .16) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

.credential:hover,
.service-card:hover,
.boeken-method:hover,
.event-type:hover,
.video-card:hover,
.media-teaser-card:hover,
.contact-option:hover,
.gallery-page-item:hover,
.band-card:hover{
  border-color: rgba(217, 182, 109, .42) !important;
  box-shadow: var(--panel-shadow), 0 0 0 1px rgba(217, 182, 109, .08);
}

.contact-option-icon,
.boeken-method-icon,
.service-card-icon,
.event-type-icon,
.video-card-play,
.lightbox-close,
.lightbox-nav{
  border-radius: 8px;
}

.contact-option-value,
.boeken-method-value{
  overflow-wrap: anywhere;
}

.final-cta,
.contact-strip{
  border-top-color: rgba(217, 182, 109, .18);
  border-bottom-color: rgba(217, 182, 109, .12);
}

.gallery-page-item{
  overflow: hidden;
}

.gallery-page-item:focus-visible{
  outline: 2px solid var(--gold-hi);
  outline-offset: 4px;
}

.lightbox{
  background: rgba(5, 5, 5, .9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lightbox-img{
  border-radius: 8px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .56), 0 0 0 1px rgba(217, 182, 109, .18);
}

.lightbox-close,
.lightbox-nav{
  border: 1px solid rgba(217, 182, 109, .28);
  background: rgba(18, 16, 14, .74);
  color: var(--ink);
}

.lightbox-close:hover,
.lightbox-nav:hover,
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible{
  background: var(--accent);
  color: #11100f;
}

.lightbox-caption{
  color: var(--ink-dim);
}

summary:focus-visible,
a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--gold-hi);
  outline-offset: 4px;
}

html[data-theme="light"]{
  --accent: #b7822f;
  --accent-soft: #8b6326;
  --gold-hi: #a87324;
  --gold-shadow: rgba(183, 130, 47, .22);
}

html[data-theme="light"] body{
  background: linear-gradient(180deg, #f7f2e7 0%, #ece2ce 100%);
  color: #211c17;
}

html[data-theme="light"] .nav{
  background:
    linear-gradient(180deg, rgba(248, 244, 235, .99), rgba(234, 225, 207, .97));
  border-bottom-color: rgba(139, 99, 38, .28);
  box-shadow: 0 14px 36px rgba(68, 49, 20, .12), 0 1px 0 rgba(255, 255, 255, .58) inset;
}

html[data-theme="light"] .brand-text{
  color: #2b251d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .62);
}

html[data-theme="light"] .brand-mark{
  border-color: rgba(139, 99, 38, .3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .64), 0 8px 20px rgba(68, 49, 20, .12);
}

html[data-theme="light"] .nav-cta{
  color: #21170a;
  background: linear-gradient(135deg, #e5c576, #c99539 52%, #95671f);
  box-shadow: 0 14px 30px rgba(68, 49, 20, .14), 0 0 22px rgba(183, 130, 47, .2);
}

html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .burger{
  border-color: rgba(139, 99, 38, .25);
  color: #2b251d;
}

html[data-theme="light"] .menu{
  background:
    linear-gradient(180deg, rgba(155, 118, 54, .1), transparent 92px),
    rgba(249, 245, 237, .98);
}

html[data-theme="light"] .hero{
  background:
    linear-gradient(90deg, #e7dfd0 0%, #f2eadc 54%, #f9f4ea 100%);
}

html[data-theme="light"] .hero-portrait{
  background: #11100f;
}

html[data-theme="light"] .hero-portrait-img{
  filter: grayscale(1) contrast(1.14) brightness(.72) !important;
}

html[data-theme="light"] .hero-portrait::after{
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .02) 0%, rgba(232, 223, 205, .05) 56%, rgba(242, 235, 220, .42) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, transparent 48%, rgba(21, 18, 14, .12) 100%);
}

html[data-theme="light"] .hero-content{
  color: #211c17;
}

html[data-theme="light"] .hero-content::before{
  background: linear-gradient(to bottom, transparent, rgba(139, 99, 38, .12) 18%, rgba(183, 130, 47, .28) 50%, rgba(139, 99, 38, .12) 82%, transparent);
}

html[data-theme="light"] .hero-eyebrow{
  color: #a87324;
  text-shadow: none;
}

html[data-theme="light"] .hero-eyebrow-num{
  color: #756850;
}

html[data-theme="light"] .hero-title{
  color: #211c17;
}

html[data-theme="light"] .hero-title .line-2{
  color: #9a6720;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

html[data-theme="light"] .hero-divider{
  background: linear-gradient(90deg, #b7822f, rgba(183, 130, 47, .44), rgba(183, 130, 47, .06));
  box-shadow: none;
}

html[data-theme="light"] .hero-tagline{
  color: #3a3127;
}

html[data-theme="light"] .hero-tagline strong{
  color: #211c17;
}

html[data-theme="light"] .hero-meta{
  border-top-color: rgba(139, 99, 38, .28);
}

html[data-theme="light"] .hero-meta-item .k{
  color: #9a6720;
}

html[data-theme="light"] .hero-meta .v{
  color: #2b251d;
}

html[data-theme="light"] .hero-audio{
  background: rgba(255, 255, 255, .78);
}

@media (max-width: 1100px){
  .hero{
    grid-template-columns: minmax(390px, .82fr) minmax(410px, 1fr);
  }

  .hero-title{
    font-size: clamp(54px, 7vw, 82px);
  }
}

@media (max-width: 900px){
  html{ scroll-padding-top: 72px; }

  .nav{
    height: 68px;
    padding-inline: 18px;
  }

  .brand-text{
    font-size: 12px;
  }

  .menu{
    right: 10px;
    top: 10px;
    height: calc(100dvh - 20px);
    padding: 92px 28px 34px;
    border: 1px solid rgba(217, 182, 109, .18);
    border-radius: 8px;
  }

  .menu a{
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 20px;
  }

  .hero{
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .hero-content{
    order: 1;
    min-height: auto;
    padding: 98px 22px 38px;
  }

  .hero-content::before{
    top: 84px;
    bottom: 28px;
  }

  .hero-portrait{
    order: 2;
    height: 42vh;
    min-height: 320px;
  }

  .hero-portrait-img{
    background-size: cover !important;
    background-position: 50% 30% !important;
    filter: grayscale(1) contrast(1.06) brightness(.86) !important;
  }

  .hero-portrait::after{
    background: linear-gradient(180deg, rgba(17, 16, 15, .08), rgba(17, 16, 15, .72));
  }

  .hero-title{
    font-size: clamp(50px, 16vw, 76px);
  }

  .hero-tagline{
    max-width: 100%;
    font-size: 21px;
  }

  .hero-audio{
    padding: 14px 16px;
    min-height: 72px;
  }

  .hero-meta{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-hero{
    min-height: 52vh;
  }

  .contact-option,
  .boeken-method,
  .event-type,
  .credential,
  .service-card,
  .faq-item{
    box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
  }

  .whatsapp-float{
    width: 48px;
    height: 48px;
    right: 16px;
    bottom: 16px;
  }
}

@media (max-width: 520px){
  .hero-content{
    padding-inline: 18px;
  }

  .hero-title{
    font-size: clamp(46px, 15vw, 62px);
  }

  .hero-tagline{
    font-size: 19px;
  }

  .hero-audio-sub{
    font-size: 13px;
  }

  .contact-option-value,
  .boeken-method-value{
    font-size: clamp(15px, 4.5vw, 18px);
  }
}