.home-page { --h1: clamp(2.65rem, 6.4vw, 7rem); }
.home-page h1,.home-page h2,.home-page h3 { overflow-wrap: anywhere; }
.home-page .eyebrow { margin-bottom: 1.2rem; }
.home-page .header-inner { flex-wrap: wrap; }
.home-hero { min-height: calc(100svh - var(--header-height)); position: relative; overflow: clip; isolation: isolate; display: flex; flex-direction: column; }
.hero-landscape { position: absolute; inset: 0 0 -6% 0; z-index: -3; }
.atmosphere-media { position: absolute; inset: 0; overflow: hidden; }
.atmosphere-media picture, .atmosphere-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-landscape img { object-position: 70% 0%; }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#171916ed 0%,#171916d9 27%,#17191666 58%,#1719160a 87%),linear-gradient(0deg,#171916c7,transparent 36%,#17191636); }
.hero-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.15rem; }
.hero-region { color: var(--cream); font-size: var(--text-sm); letter-spacing: 0.025em; }
.hero-content { position: relative; padding-block: clamp(1.5rem, 4vw, 4rem) 2.25rem; flex: 1; }
.hero-content h1 { max-width: 13ch; letter-spacing: -0.05em; line-height: 1.02; }
.hero-line { display: block; }
.hero-line em { color: var(--gold); font-weight: 500; }
.hero-intro { margin-top: 1.75rem; max-width: 28rem; font-size: var(--text-lg); line-height: 1.6; color: var(--cream); }
.hero-content .inline-actions { margin-top: 1.75rem; }
.hero-whatsapp { margin-top: 0.9rem; gap: 0.6rem; color: var(--cream); }
.hero-whatsapp svg { width: 1.1rem; height: 1.1rem; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem 1.75rem; }
.scroll-cue { min-height: 2.75rem; display: inline-flex; align-items: center; gap: 1.1rem; font-size: var(--text-sm); text-decoration: none; }
.scroll-cue span { height: 2rem; width: 1px; background: var(--gold); }
.scene-label { font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.03em; background: #171916b8; color: var(--cream); padding: 0.35rem 0.6rem; }
.brand-marquee { overflow: hidden; padding-block: 1.45rem; background: var(--sand); border-bottom: 1px solid var(--line); }
.brand-marquee__track { display: flex; width: max-content; }
.brand-marquee ul { display: flex; gap: 3.5rem; align-items: center; list-style: none; padding: 0 1.75rem; }
.brand-marquee li { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; white-space: nowrap; }
.philosophy-grid { display: grid; gap: 2.5rem; align-items: center; }
.philosophy h2 em { font-weight: 500; color: var(--cognac); }
.stitched-heading { position: relative; padding-bottom: 1.5rem; }
.stitched-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 5rem; height: 2px; background: repeating-linear-gradient(90deg,var(--cognac) 0 6px,transparent 6px 10px); transform-origin: left; }
.surface-dark .stitched-heading::after { background: repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 10px); }
.service-section { background: var(--paper); }
.travel-note { border-left: 2px solid var(--cognac); padding-left: 1rem; color: var(--muted); font-size: var(--text-sm); }
.home-service-card { position: relative; overflow: hidden; padding: 1.75rem; background: var(--cream); border: 1px solid var(--line); }
.home-service-card .text-link { padding-top: 0.75rem; }
.gallop-strip { position: relative; height: clamp(16rem, 40vw, 44rem); overflow: hidden; background: #4d3826; isolation: isolate; }
.gallop-strip .atmosphere-media { z-index: -3; }
.gallop-strip .atmosphere-media::before { content: ""; position: absolute; inset: -6%; background: url(../../images/atmosphere-gallop-640.webp?v=397ce424a362) center / cover; filter: blur(22px) brightness(0.85); }
/* Het hele paard blijft zichtbaar (oren en hoeven): de foto past in de strook en loopt aan de zijkanten uit in een vervaagde kopie. */
.gallop-strip .atmosphere-media picture { position: relative; display: flex; justify-content: center; }
.gallop-strip .atmosphere-media img { width: auto; max-width: 100%; aspect-ratio: 1672 / 941; object-fit: contain; object-position: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.gallop-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#171916d9,#17191647 70%); z-index: -1; }
.gallop-strip .scene-label { position: absolute; top: 1rem; right: var(--gutter); }
.gallop-ground { position: absolute; bottom: 0; width: 100%; height: 6.5rem; overflow: hidden; border-bottom: 1px solid var(--gold); }
.section-action { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 4rem; }
.john-copy, .sell-grid > .stack { display: flex; flex-direction: column; align-items: flex-start; }
.featured-grid .product-card__media { aspect-ratio: 4 / 4.5; }
.product-card { transform-style: preserve-3d; transform-origin: center; }
.john-grid { display: grid; gap: 3rem; align-items: center; }
.john-photo { max-width: 34rem; }
.john-photo picture,.john-photo img { display: block; width: 100%; }
.john-photo img { aspect-ratio: 1; object-fit: cover; }
.john-photo figcaption { color: var(--muted-on-dark); padding-top: 0.8rem; font-size: var(--text-sm); }
.john-copy .button { align-self: start; }
.craft-section { min-height: clamp(22rem, 44vw, 36rem); position: relative; isolation: isolate; display: grid; align-items: center; overflow: clip; }
.craft-visual { position: absolute; inset: 0; z-index: -2; }
.craft-visual img { object-position: 70% center; }
.craft-section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#171916f0 0%,#171916a3 37%,#1719160a 85%); z-index: -1; }
.craft-copy { padding-block: 4rem; }
.craft-copy h2 { max-width: 12ch; margin-bottom: 2rem; font-size: clamp(3rem,5.5vw,6rem); }
.steps-layout { display: grid; gap: 3rem; }
.steps-list { list-style: none; padding: 0; }
.story-step { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding: 0 0 2.75rem; position: relative; }
.story-step:not(:last-child)::before { content: ""; position: absolute; top: 3.1rem; left: 1.5rem; bottom: 0; border-left: 1px dashed var(--line-control); }
.step-number { width: 3rem; height: 3rem; border: 1px solid var(--line-control); border-radius: 50%; display: grid; place-items: center; font-size: var(--text-sm); }
.story-step h3 { padding-top: 0.45rem; }
.story-step p { color: var(--muted); margin-top: 0.8rem; }
.story-step.is-active .step-number { background: var(--cognac); border-color: var(--cognac); color: var(--paper); }
.sell-section { background: var(--sand); }
.sell-grid { display: grid; gap: 3rem; align-items: center; }
.sell-grid .button { width: fit-content; }
.photo-checklist { padding: clamp(1.5rem,4vw,3rem); border: 1px solid var(--line-control); background: var(--cream); }
.photo-checklist ol { list-style: none; padding: 0; margin-top: 1.5rem; }
.photo-checklist li { display: flex; align-items: center; gap: 1rem; min-height: 4rem; padding-block: 0.8rem; border-bottom: 1px solid var(--line); font-size: var(--text-base); }
.photo-checklist li:last-child { border-bottom: 0; }
.photo-checklist li span { color: var(--cognac); font-size: var(--text-sm); flex: none; }
.home-close { text-align: center; padding-block: var(--section-space); }
.home-close h2 { font-size: clamp(2.75rem,6vw,6.5rem); margin-bottom: 2rem; }
.home-close .lead { max-width: 38rem; margin: auto auto 2rem; }
.home-close .inline-actions { justify-content: center; }
.atmosphere-note { color: var(--muted-on-dark); font-size: 0.8125rem; max-width: 52rem; margin-top: 1rem; }
@media (max-width: 39.999rem) {
  .hero-tools { align-items: start; padding-top: 0.75rem; }
  .hero-region { max-width: 12rem; font-size: var(--text-xs); }
  .hero-content { padding-top: 1.25rem; }
  .hero-content .eyebrow { font-size: var(--text-xs); }
  .hero-content .inline-actions { display: grid; grid-template-columns: 1fr; max-width: 24rem; }
  .home-hero::after { background: linear-gradient(90deg,#171916df,#17191675),linear-gradient(0deg,#171916eb,transparent 75%); }
  .hero-landscape img { object-position: 58% 12%; }
  .hero-bottom { align-items: end; }
  .hero-bottom .scene-label { max-width: 10rem; text-align: right; }
  .hero-intro { font-size: 1rem; }
  .home-service-card { padding: 1.5rem; }
  .home-close .inline-actions { display: grid; }
}
@media (min-width: 64rem) {
  .philosophy-grid { grid-template-columns: 1.25fr 1fr; gap: 6rem; }
  .john-grid { grid-template-columns: 0.85fr 1.15fr; gap: 6rem; }
  .steps-layout { grid-template-columns: 1fr 1.1fr; gap: 6rem; }
  .steps-heading { position: sticky; top: 8rem; align-self: start; }
  .sell-grid { grid-template-columns: 1.1fr 1fr; gap: 6rem; }
}
/* Reflow bij grote tekst: intrinsieke gridbreedtes mogen het scherm niet oprekken. */
.home-page .container { width: min(100% - min(var(--gutter), 5vw) * 2, var(--content-max)); }
.home-page .brand { max-width: 100%; min-width: 0; }
.home-page .brand-name,.home-page .brand-subtitle { overflow-wrap: anywhere; }
.home-page .header-controls { max-width: 100%; gap: min(0.75rem, 3vw); }
.hero-tools,.hero-bottom { flex-wrap: wrap; }
.steps-layout > *,.story-step > *,.sell-grid > *,.john-grid > * { min-width: 0; }
.story-step { grid-template-columns: 3.25rem minmax(0,1fr); }
.story-step p,.photo-checklist li { overflow-wrap: anywhere; }
[data-effects="off"] .brand-marquee li { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
@media (max-width: 39.999rem) {
  .home-page .contact-dock { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,2.3fr); gap: 4px; padding-inline: 6px; }
  .home-page .contact-dock a { flex-wrap: wrap; gap: 4px; overflow-wrap: anywhere; min-width: 0; }
  .story-step { grid-template-columns: minmax(0,1fr); gap: 0.5rem; }
  .story-step::before { display: none; }
}

.brand-marquee__track { width: max-content; }


@media(max-width:40rem) {
 .scene-label { font-size: 0.625rem; padding: 0.2rem 0.35rem; }
 .gallop-strip .scene-label { top: auto; right: 0.5rem; bottom: 0.5rem; }
 .hero-bottom .scene-label { max-width: none; margin-left: auto; }
}