/* Alleen de hero krijgt een nieuwe compositie. De bestaande sticky panelen,
   z-indexen en scrollanimatie van de eerste secties blijven ongewijzigd. */
.brand-hero.home-hero.v8-hero {
  min-height: 100svh;
  padding: 150px 0 80px;
  display: flex;
  align-items: flex-start;
  background: #100f0c;
  color: #f7f1e6;
  isolation: isolate;
}

/* Vrijblijvend homepageconcept, direct onder de hero. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference) {
  .home-services-section .home-service-story figure {
    --mobile-image-offset: 44px;
    opacity: 0;
    transform: translateX(var(--mobile-image-offset));
    transition: none;
  }
  .home-services-section .home-service-story--reverse figure { --mobile-image-offset: -44px; }
  .home-services-section .home-service-story figure.mobile-image-visible { opacity: 1; transform: translateX(0); animation: mobile-service-image-in 1.6s cubic-bezier(.22,.75,.22,1) both; }
  @keyframes mobile-service-image-in {
    from { opacity: 0; transform: translateX(var(--mobile-image-offset)); }
    to { opacity: 1; transform: translateX(0); }
  }
}
.values-section.home-concept-section {
  position: relative;
  z-index: 2;
  min-height: auto;
  padding: clamp(80px, 9vw, 128px) 0;
  background: #f4efe7;
  color: var(--warm-ink);
  transform: none;
}
.home-concept-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 100px); align-items: start; }
.home-concept-heading h2 { margin: 18px 0 0; max-width: 540px; color: var(--warm-ink); font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: clamp(32px, 3.8vw, 56px); line-height: 1.07; letter-spacing: -.045em; }
.home-concept-copy>p { margin: 0 0 20px; color: #665d51; font-size: 17px; line-height: 1.75; }
.home-concept-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 10px; padding: 15px 24px; border-radius: 999px; background: #25231e; color: #faf4e9; font-size: 14px; font-weight: 700; text-align: center; }
.home-concept-button:hover { background: #423a2a; }
.home-concept-button:focus-visible { outline: 2px solid #9b702f; outline-offset: 5px; }
.home-concept-copy>.home-concept-note { padding-top: 18px; margin-bottom: 0; border-top: 1px solid #d8cebc; font-size: 12px; line-height: 1.65; }
@media(max-width:760px) {
  .values-section.home-concept-section { padding: 64px 0; }
  .home-concept-layout { grid-template-columns: 1fr; gap: 28px; }
  .home-concept-copy>p { font-size: 15px; }
  .home-concept-button { width: 100%; padding: 14px 18px; }
}
.v8-hero-image { position: absolute; inset: 0 0 0 27%; z-index: -3; overflow: hidden; }
.v8-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; filter: saturate(.65); }
.v8-hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #100f0c 0%, rgba(16,15,12,.98) 21%, rgba(16,15,12,.88) 38%, rgba(16,15,12,.36) 65%, rgba(16,15,12,.14) 100%), linear-gradient(0deg, rgba(16,15,12,.9), transparent 24%, transparent 75%, rgba(16,15,12,.48)); }
.v8-hero-inner { position: relative; width: min(100% - 112px, 1360px); }
.v8-hero-content { max-width: 760px; }
.v8-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 27px; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #d3b576; }
.v8-eyebrow>span { width: 27px; height: 1px; background: #d3b576; }
.v8-hero h1 { margin: 0; color: #faf6ee; font-family: 'Bricolage Grotesque',sans-serif; font-size: clamp(52px, 5.8vw, 86px); line-height: 1.04; letter-spacing: -.055em; font-weight: 700; }
.v8-hero h1>span { color: #d7b46f; }
.v8-hero-intro { max-width: 555px; margin: 27px 0 0; color: #d5d0c6; font-size: 17px; line-height: 1.85; }
.v8-hero-intro a { color: #e3ca97; font-weight: 600; }
.v8-hero .hero-actions { display: flex; align-items: center; gap: 14px; margin: 48px 0 0; }
.v8-hero .hero-actions>a { min-height: 54px; padding: 16px 24px; font-size: 14px; line-height: 1.4; }
.v8-hero .hero-actions>.button-dark { background: #d5b477; color: #211e17; box-shadow: none; }
.v8-hero .hero-actions>.button-dark:hover { background: #ebcf99; }
.v8-hero .hero-actions>.button-line { border-color: #d8cba344; background: #17161350; color: #f1e9db; }
.v8-hero-price { margin-top: 36px; }
.v8-hero-price>p { margin: 0; color: #c6c0b3; font-size: 13px; line-height: 1.7; }
.v8-hero-price a { color: #e2c58b; }
.v8-hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 60px; padding-top: 19px; border-top: 1px solid #e5dcc32c; color: #c6bdac; font-size: 11px; letter-spacing: .02em; }
.v8-hero-bottom>span { display: flex; align-items: center; gap: 19px; }
.v8-hero-bottom i { font-style: normal; color: #a89061; }
.v8-hero-bottom>a { display: flex; align-items: center; gap: 17px; }
.v8-scroll { font-size: 21px; color: #e2c58b; }
@media(min-width:761px) {
  .v8-hero-bottom { position: relative; top: auto; margin-top: 160px; padding-top: 24px; }
}
.v8-photo-credit { position: absolute; z-index: 2; bottom: 48px; right: 32px; font-size: 9px; line-height: 1.5; letter-spacing: .03em; color: #e0d9cad9; text-shadow: 0 1px 4px #000; }
@media(min-width:1600px) { .v8-hero-intro { max-width: 590px; font-size: 18px; } .v8-hero h1 { font-size: 94px; } }
@media(max-width:1040px) and (min-width:761px) {
  .brand-hero.home-hero.v8-hero { padding: 150px 0 70px; }
  .v8-hero-inner { width: calc(100% - 64px); }
  .v8-hero h1 { font-size: 65px; }
  .v8-hero-content { max-width: 660px; }
  .v8-hero-shade { background: linear-gradient(90deg,#100f0c 0%,#100f0ce8 34%,#100f0c66 100%); }
}
@media(max-width:760px) {
  .brand-hero.home-hero.v8-hero { --v8-mobile-top: 112px; --v8-mobile-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); position: relative; top: auto; height: auto; max-height: none; min-height: calc(100svh + 34px); min-height: calc(100dvh + 34px); padding: var(--v8-mobile-top) 0 var(--v8-mobile-bottom); }
  .v8-hero-image { inset: 0; }
  .v8-hero-image img { object-position: 71% center; filter: none; }
  .v8-hero-shade { background: linear-gradient(90deg,rgba(16,15,12,.68),rgba(16,15,12,.32) 64%,rgba(16,15,12,.08)),linear-gradient(0deg,#100f0c 0%,rgba(16,15,12,.32) 24%,transparent 65%); }
  .v8-hero-content { text-shadow: 0 2px 12px rgba(0,0,0,.7); }
  .v8-hero .hero-actions { text-shadow: none; }
  .v8-hero-inner { width: calc(100% - 40px); display: flex; flex-direction: column; gap: 48px; min-height: calc(100svh + 34px - var(--v8-mobile-top) - var(--v8-mobile-bottom)); min-height: calc(100dvh + 34px - var(--v8-mobile-top) - var(--v8-mobile-bottom)); }
  .v8-eyebrow { font-size: 10px; gap: 10px; margin-bottom: 16px; }
  .v8-eyebrow>span { width: 21px; }
  .v8-hero h1 { font-size: clamp(34px,9vw,49px); line-height: 1.06; letter-spacing: -.05em; }
  .v8-hero-intro { margin-top: 16px; font-size: 14px; line-height: 1.6; max-width: 450px; }
  .v8-hero .hero-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 8px; min-height: 98px; margin-top: 56px; }
  .v8-hero .hero-actions>a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: 8px 10px; font-size: 12px; line-height: 1.3; text-align: center; white-space: normal; }
  .v8-hero-price { position: relative; top: clamp(24px, 4dvh, 36px); margin-top: 40px; }
  .v8-hero-price>p { font-size: 12px; line-height: 1.5; }
  .v8-hero-bottom { position: relative; top: auto; margin-top: auto; padding-top: 18px; font-size: 10px; line-height: 1.5; gap: 8px; flex-wrap: wrap; }
  .v8-hero-bottom>span { gap: 11px; flex-wrap: wrap; }
  .v8-hero-bottom>a { min-height: 44px; flex-shrink: 0; color: #e2c58b; }
  .v8-hero-bottom>a>span:first-child { display: inline; }
  .v8-photo-credit { bottom: calc(46px + env(safe-area-inset-bottom, 0px)); right: 20px; font-size: 8px; }
}
@media(max-width:760px) and (max-height:740px) {
  .brand-hero.home-hero.v8-hero { --v8-mobile-top: 104px; }
  .v8-eyebrow { margin-bottom: 12px; }
  .v8-hero h1 { font-size: clamp(30px,8.2vw,40px); }
  .v8-hero-intro { margin-top: 12px; font-size: 13px; line-height: 1.55; }
  .v8-hero .hero-actions { margin-top: 48px; }
  .v8-hero-price { margin-top: 36px; }
  .v8-hero-bottom { margin-top: auto; }
}