/* ============================================================
   Studio Linstra — hero foto-collage

   1-op-1 structuur overgenomen van madewithgsap.com effect094
   ("images drifting around the center"): gepinde full-height
   container, vaste gecentreerde tekst, en een horizontale rij
   kaarten die assets/js/hero-drift.js naar links schuift op scroll.
   ============================================================ */

.ls-hero{
	overflow: hidden;
	position: relative;
	background: var(--ls-bg);
}
.ls-hero__container{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	width: 100%;
}

.ls-hero__center{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
	width: min(712px, 86vw);
	pointer-events: none;
}
.ls-hero__headline{
	margin: 0;
	color: var(--ls-navy);
	font-size: clamp(32px, 5.5vh, 62px);
	font-weight: 500;
	line-height: 1;
}
.ls-hero__proof{
	display: flex;
	align-items: center;
	gap: 16px;
}
.ls-hero__avatars{
	display: flex;
	align-items: center;
}
.ls-hero__avatar{
	display: block;
	width: 45px;
	height: 45px;
	border-radius: 5px;
	border: 3px solid #FFF5E4;
	overflow: hidden;
	margin-right: -13px;
}
.ls-hero__avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-hero__avatar--1{ transform: rotate(3deg); }
.ls-hero__avatar--2{ transform: rotate(-5deg); }
.ls-hero__avatar--3{ transform: rotate(4deg); margin-right: 0; }
.ls-hero__proof-text{
	margin: 0;
	color: var(--ls-navy);
	font-size: 18px;
	font-weight: 300;
}

.ls-hero__cards{
	display: flex;
	width: max-content;
	white-space: nowrap;
	gap: 1vw;
	will-change: transform;
	padding: 0 105vw;
	align-items: center;
}
.ls-hero__card{
	position: relative;
	width: 16vw;
	flex: none;
	border-radius: 0.5vw;
}

.ls-hero__card--photo img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5vw;
	object-fit: cover;
}

.ls-hero__card--stat{
	background: var(--ls-orange);
	color: var(--ls-burgundy);
	padding: 1.2vw 0.9vw;
	display: flex;
	flex-direction: column;
	gap: 8px;
	white-space: normal;
}
.ls-hero__stat-label{ font-size: 0.9vw; opacity: 0.7; font-weight: 300; }
.ls-hero__stat-value{ font-size: 1.6vw; font-weight: 500; }

.ls-hero__card--quote{
	padding: 1.8vw 1.3vw;
	font-size: 1.15vw;
	line-height: 1.3;
	font-weight: 500;
	white-space: normal;
}
.ls-hero__card--burgundy{ background: var(--ls-burgundy); color: var(--ls-lichtblauw); font-weight: 300; }
.ls-hero__card--green{ background: #B4C0A9; color: var(--ls-burgundy); }
.ls-hero__card--yellow{ background: var(--ls-yellow); color: var(--ls-goor); text-align: center; }

@media (max-width: 768px){
	.ls-hero__card{ width: 42vw; }
	.ls-hero__card--stat{ padding: 4vw 3vw; }
	.ls-hero__stat-label{ font-size: 3vw; }
	.ls-hero__stat-value{ font-size: 5.5vw; }
	.ls-hero__card--quote{ padding: 6vw 4.5vw; font-size: 3.8vw; }
}

/* ============================================================
   Studio Linstra — header/nav
   ============================================================ */

.ls-header{
	background: var(--ls-bg);
}
.ls-header__inner{
	max-width: 1512px;
	margin: 0 auto;
	padding: 20px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.ls-header__logo{
	text-decoration: none;
	color: var(--ls-navy);
	font-family: var(--ls-font);
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
}
.ls-header__logo img{
	display: block;
	height: 40px;
	width: auto;
}
.ls-header__nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 37px;
	flex-wrap: wrap;
}
.ls-header__nav a{
	font-family: var(--ls-font);
	font-weight: 300;
	font-size: 18px;
	letter-spacing: -0.09px;
	color: #12151a;
	text-decoration: none;
	white-space: nowrap;
}
/* Voeg de CSS-klasse "ls-nav-cta" toe aan het laatste menu-item
   (bv. "Plan je merkscan") via Appearance > Menus > Screen Options >
   CSS Classes, voor de onderstreepte CTA-stijl uit het ontwerp. */
.ls-header__nav .ls-nav-cta a{
	text-decoration: underline;
}

@media (max-width: 700px){
	.ls-header__inner{ padding: 16px 20px; }
	.ls-header__nav ul{ gap: 20px; }
}

/* ============================================================
   Studio Linstra — sectie: proces-flow (Wat ik doe + Light-Uploading)
   ============================================================ */

.ls-flow{
	position: relative;
	background: var(--ls-bg);
}

/* ---------- scroll-lijn ---------- */
.ls-line{
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 0;
	z-index: 5;
	pointer-events: none;
}
.ls-line__track{
	position: relative;
	width: 2px;
	height: 100%;
	background: rgba(255, 92, 43, 0.25);
	margin-left: -1px;
}
.ls-line__thumb{
	position: absolute;
	left: 50%;
	top: 0;
	width: 6px;
	height: 90px;
	margin-left: -3px;
	border-radius: 999px;
	background: var(--ls-orange);
	will-change: transform;
}

/* ---------- Wat ik doe ---------- */
.ls-process{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 120px 24px;
	display: flex;
	gap: 48px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

/* linkerkolom: badge boven de checklist-kaart */
.ls-process__left{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 353px;
	max-width: 100%;
}
.ls-process__badge{
	display: inline-block;
	background: var(--ls-navy);
	color: var(--ls-white);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	padding: 10px 15px;
	border-radius: 6px;
}
.ls-process__card{
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(6px);
	border-radius: 6px;
	padding: 30px 32px;
	width: 100%;
	box-sizing: border-box;
}

/* rechterkolom: foto met zwevende toasts tegen de rechteronderkant */
.ls-process__visual{
	position: relative;
	width: 380px;
	max-width: 100%;
	flex: none;
}
.ls-process__photo{
	width: 100%;
	border-radius: 5px;
	transform: rotate(-4deg);
}
.ls-toast-stack{
	position: absolute;
	right: -24px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	max-width: 80%;
}
.ls-toast{
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(0, 34, 55, 0.55);
	backdrop-filter: blur(20px);
	color: var(--ls-white);
	padding: 10px 15px;
	border-radius: 6px;
	white-space: nowrap;
}
.ls-toast strong{ display: block; font-size: 16px; font-weight: 700; }
.ls-toast small{ display: block; font-size: 13px; opacity: 0.7; font-weight: 300; }
.ls-toast__icon{ font-size: 20px; }
.ls-checklist{ list-style: none; margin: 0 0 16px; padding: 0; }
.ls-checklist li{ display: flex; gap: 16px; align-items: center; padding: 10px 0; }
.ls-checklist__check{
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: var(--ls-yellow);
	color: var(--ls-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}
.ls-checklist strong{ display: block; font-size: 18px; color: var(--ls-navy); font-weight: 700; }
.ls-checklist small{ display: block; font-size: 14px; color: var(--ls-navy); opacity: 0.7; font-weight: 300; }

.ls-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
}
.ls-btn--light{ background: var(--ls-bg); color: var(--ls-burgundy); }
.ls-btn--ghost{ background: rgba(255, 255, 255, 0.3); border: 1px solid #eaecef; color: var(--ls-white); }
.ls-btn--orange{ background: var(--ls-orange); color: var(--ls-white); }

/* ---------- Light-Uploading ---------- */
.ls-upload{
	position: relative;
	max-width: 640px;
	margin: 0 auto 120px;
	background: var(--ls-burgundy);
	border-radius: 12px;
	padding: 64px 32px 32px;
	color: var(--ls-white);
}
.ls-upload__title{
	color: var(--ls-lichtblauw);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 8px;
}
.ls-upload__title span{ display: block; font-size: 16px; font-weight: 300; color: var(--ls-lichtblauw); }
.ls-upload__spots{ color: var(--ls-orange); font-size: 13px; margin: 0 0 24px; }

/* Formulier-plugin shortcode-output leunt op de kleuren/afstand
   van de omringende kaart, plugin-specifieke input-styling voeg je
   toe zodra bekend is welke formulier-plugin gebruikt wordt. */
.ls-upload__form{ margin-bottom: 24px; }

.ls-upload__disclaimer{ font-size: 12px; opacity: 0.9; margin-top: 12px; }
.ls-upload__disclaimer strong{ color: var(--ls-orange); }

@media (max-width: 900px){
	.ls-line{ display: none; } /* progress-lijn alleen op desktop */
	.ls-process{ padding: 80px 24px 40px; gap: 40px; }
	.ls-toast-stack{ display: none; } /* zwevende toasts overlappen te veel op mobiel */
}