/* ==========================================================================
   Maatwerk "Van idee tot overhandiging"
   ========================================================================== */

.as-mw { background: var(--linnen); }
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * .12s); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Opening */
.as-mw-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(40px, 6vw, 80px) var(--edge) clamp(56px, 7vw, 104px); }
.as-mw-hero__title { max-width: 14ch; margin: 0 0 1.4rem; font: 400 clamp(3rem, 6vw, 6.2rem)/.95 var(--f-h1); letter-spacing: .04em; color: var(--kop); }
.as-mw-hero__lead { max-width: 46ch; margin-bottom: 2rem; font-size: 1.2rem; }
.as-mw-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.4rem; }
.as-mw-hero__quote { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center; max-width: 36rem; margin: 0; }
.as-mw-hero__mono { width: 70px; color: var(--taupe); }
.as-mw-hero__mono path { stroke-width: 110; }
.as-mw-hero__quote p { margin: 0; font: 400 clamp(1.9rem, 2.4vw, 2.4rem)/1.15 var(--f-script); color: var(--kop); }
.as-mw-hero__media { position: relative; }
.as-mw-hero__main { aspect-ratio: 5 / 6; border-radius: 6px; overflow: hidden; background: var(--kiezel); box-shadow: 0 50px 90px -60px rgba(59, 52, 45, .6); }
.as-mw-hero__main img, .as-mw-hero__main .as-ph { width: 100%; height: 100%; object-fit: cover; }
.as-mw-hero__small { position: absolute; right: -6%; bottom: -8%; width: 34%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 8px var(--linnen), 0 30px 50px -30px rgba(59, 52, 45, .6); }
.as-mw-hero__small img { width: 100%; height: 100%; object-fit: cover; }

/* Soorten opdrachten */
.as-kinds { background: var(--wit); }
.as-kinds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: 1rem; align-items: start; }
.as-kind { border-radius: 6px; background: var(--linnen); overflow: hidden; transition: background-color .4s, box-shadow .4s; }
.as-kind.is-open { background: var(--kop); color: var(--wit); box-shadow: 0 30px 60px -40px rgba(59, 52, 45, .9); }
.as-kind__face {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 1.1rem;
	align-items: center;
	width: 100%;
	padding: 1.5rem 3.4rem 1.5rem 1.4rem;
	border: 0;
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.as-kind__icon { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--wit); transition: background-color .4s; }
.as-kind.is-open .as-kind__icon { background: rgba(255, 255, 255, .1); }
.as-kind__icon .as-wicon, .as-melt { width: 42px; height: 42px; }
.as-kind.is-open .as-wicon { stroke: var(--mint); }
.as-kind__title { font: 700 1.9rem/1 var(--f-h2); letter-spacing: .02em; }
.as-kind__short { font-size: .98rem; opacity: .8; }
.as-kind__plus { position: absolute; right: 1.3rem; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); }
.as-kind__plus::before, .as-kind__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.as-kind__plus::after { transform: rotate(90deg); }
.as-kind.is-open .as-kind__plus::after { transform: rotate(0deg); }
.as-kind__story { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.as-kind.is-open .as-kind__story { grid-template-rows: 1fr; }
.as-kind__inner { min-height: 0; overflow: hidden; }
.as-kind__inner p { margin: 0; padding: 0 1.4rem; color: rgba(255, 255, 255, .88); }
.as-kind__inner .as-link { display: inline-block; margin: 1rem 1.4rem 1.4rem; color: var(--wit); text-decoration-color: var(--mint); }

/* Smeltende ring */
.as-melt * { fill: none; stroke: var(--taupe); stroke-width: 1.5; stroke-linejoin: round; transform-origin: 24px 26px; }
.as-kind.is-open .as-melt * { stroke: var(--mint); }
.as-melt__drop, .as-melt__new { opacity: 0; }
.as-kind--erfgoud.is-in .as-melt__old { animation: as-melt-old 6s var(--ease) infinite; }
.as-kind--erfgoud.is-in .as-melt__drop { animation: as-melt-drop 6s var(--ease) infinite; }
.as-kind--erfgoud.is-in .as-melt__new { animation: as-melt-new 6s var(--ease) infinite; }
@keyframes as-melt-old { 0%, 22% { opacity: 1; transform: none; } 34% { opacity: 0; transform: scaleY(.6) translateY(6px); } 100% { opacity: 0; } }
@keyframes as-melt-drop { 0%, 26% { opacity: 0; transform: scale(.6) translateY(6px); } 38%, 56% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: scale(.7); } }
@keyframes as-melt-new { 0%, 60% { opacity: 0; transform: scale(.8); } 72%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Werkwijze: route */
.as-route { position: relative; background: var(--taupe-diep); color: var(--wit); }
.as-route .as-h2 { color: var(--wit); }
.as-route__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.as-route__head { margin-bottom: clamp(24px, 4vh, 48px); }
.as-route__head p { max-width: 44ch; margin: 0; color: rgba(255, 255, 255, .85); }
.as-route__viewport { position: relative; padding-left: var(--edge); }
.as-route__track { display: flex; gap: clamp(20px, 2vw, 32px); width: max-content; padding-right: var(--edge); padding-bottom: 64px; transform: translateX(var(--x, 0px)); will-change: transform; }
.as-stop {
	position: relative;
	flex: none;
	width: clamp(280px, 26vw, 380px);
	padding: 1.6rem 1.6rem 1.8rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, .07);
	opacity: .55;
	transition: opacity .5s var(--ease), background-color .5s;
}
.as-stop.is-active { opacity: 1; background: rgba(255, 255, 255, .12); }
.as-stop__num { position: absolute; right: 1.4rem; top: 1rem; font: 400 3.4rem/1 var(--f-h1); color: rgba(255, 255, 255, .14); }
.as-stop__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.1rem; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.as-stop__icon .as-wicon { width: 40px; height: 40px; stroke: var(--mint); }
.as-stop__title { margin-bottom: .6rem; font: 700 2rem/1 var(--f-h2); letter-spacing: .02em; }
.as-stop p { margin: 0; color: rgba(255, 255, 255, .86); }
.as-route__line { position: absolute; left: var(--edge); right: var(--edge); bottom: 12px; width: calc(100% - 2 * var(--edge)); height: 40px; overflow: visible; }
.as-route__line path { fill: none; stroke: var(--mint); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }

/* Eerlijke afspraken */
.as-deals__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: 1rem; }
.as-deal { position: relative; padding: clamp(24px, 2.6vw, 40px); border-radius: 6px; background: var(--wit); }
.as-deal__num { display: block; margin-bottom: .6rem; font: 700 3rem/1 var(--f-h2); color: var(--mint); }
.as-deal__title { margin-bottom: .6rem; font: 500 1.3rem/1.25 var(--f-body); color: var(--kop); }
.as-deal p { margin: 0; }

/* Cadeau en ringmaat */
.as-tools { background: var(--wit); }
.as-tools__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); }
.as-tools__title { margin-bottom: .6rem; font: 700 clamp(2.2rem, 3vw, 3rem)/1 var(--f-h2); color: var(--kop); }
.as-gift, .as-size { padding: clamp(24px, 3vw, 48px); border-radius: 6px; background: var(--linnen); }
.as-gift__list { display: grid; gap: .5rem; margin: 1.2rem 0 1.4rem; }
.as-check { display: flex; align-items: center; gap: .8rem; cursor: pointer; }
.as-check input, .as-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.as-check__box { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; background: var(--wit); color: transparent; box-shadow: inset 0 0 0 1px var(--kiezel); transition: background-color .3s, color .3s; }
.as-check__box .as-icon { width: 18px; height: 18px; }
.as-check input:checked + .as-check__box { background: var(--kop); color: var(--mint); box-shadow: none; }
.as-check input:focus-visible + .as-check__box, .as-pill input:focus-visible + span { outline: 2px solid var(--kop); outline-offset: 3px; }
.as-gift__pref { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; padding: 0; border: 0; }
.as-gift__pref legend { width: 100%; margin-bottom: .6rem; padding: 0; font: 400 1rem/1 var(--f-h1); letter-spacing: .1em; color: var(--taupe-diep); }
.as-pill { cursor: pointer; }
.as-pill span { display: inline-block; padding: .5rem 1rem; border-radius: 30px; background: var(--wit); font-weight: 500; font-size: .95rem; transition: background-color .3s, color .3s; }
.as-pill input:checked + span { background: var(--kop); color: var(--wit); }

.as-size__calc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: end; margin-top: 1.2rem; }
.as-size__calc .as-field input { font-size: 1.3rem; font-weight: 500; }
.as-size__eq { padding-bottom: 1.1rem; font: 400 2rem/1 var(--f-h1); color: var(--taupe); }
.as-size__ring { display: flex; align-items: center; gap: 1.2rem; margin: .4rem 0 1rem; }
.as-size__ring svg { width: 120px; height: 120px; }
.as-size__band { fill: none; stroke: #C9A15A; stroke-width: 7; transition: r .4s var(--ease); }
.as-size__inner { fill: var(--wit); transition: r .4s var(--ease); }
.as-size__label { margin: 0; font: 400 2.4rem/1 var(--f-h1); letter-spacing: .04em; color: var(--kop); }
.as-size__tip { margin: 0; font-size: .98rem; color: var(--taupe-diep); }

@media (max-width: 999px) {
	.as-mw-hero { grid-template-columns: minmax(0, 1fr); padding: 32px var(--gutter) 72px; }
	.as-mw-hero__media { order: -1; width: min(92%, 520px); }
	.as-kinds__grid, .as-deals__grid { grid-template-columns: minmax(0, 1fr); }
	.as-tools__grid { grid-template-columns: minmax(0, 1fr); }
	/* Route op mobiel: gewoon onder elkaar */
	.as-route { height: auto !important; padding-block: 72px; }
	.as-route__sticky { position: static; height: auto; overflow: visible; }
	.as-route__viewport { padding: 0 var(--gutter); }
	.as-route__track { flex-direction: column; width: auto; padding: 0; transform: none !important; }
	.as-stop { width: auto; opacity: 1; }
	.as-route__line { display: none; }
}
@media (min-width: 640px) and (max-width: 999px) { .as-kinds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; }
	.as-melt__old, .as-melt__drop, .as-melt__new { animation: none !important; }
	.as-melt__new { opacity: 1; }
	.as-melt__old, .as-melt__drop { opacity: 0; }
}