/* ==========================================================================
   Anja Stefen Sieraden, hoofdstijl
   Huisstijl: licht en natuurlijk, taupetinten, mint en roze als accent,
   het "as."-monogram als signatuur dat zichzelf tekent.
   ========================================================================== */

/* Vrije alternatieven voor de huisstijlfonts (StyleThief, Gill Sans Nova, Scriptina).
   De originele namen staan bewust niet in de font-variabelen: wie die fonts zelf op de
   computer heeft staan, zou de site anders in een afwijkende letter zien. Komt er een
   webfontlicentie, zet dan het webfontbestand hier als @font-face erbij. */
@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Amatic SC"; src: url("../fonts/amatic-sc-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Amatic SC"; src: url("../fonts/amatic-sc-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Mrs Saint Delafield"; src: url("../fonts/mrs-saint-delafield-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
	/* Huisstijlkleuren */
	--wit: #FFFFFF;
	--linnen: #E6E0DB;
	--kiezel: #C5BDB2;
	--zand: #ACA193;
	--taupe: #867B6B;
	--mint: #9FC7AA;
	--roze: #C45A83;
	/* Afgeleid, voor leesbaarheid */
	--taupe-diep: #6B6155;
	--tekst: #4A423A;
	--kop: #3B342D;
	--roze-diep: #9C3A62;

	--f-h1: "Bebas Neue", "Oswald", Impact, sans-serif;
	--f-h2: "Amatic SC", cursive;
	--f-body: "Alegreya Sans", "Segoe UI", sans-serif;
	--f-script: "Mrs Saint Delafield", cursive;

	--container: 1480px;
	--gutter: clamp(20px, 4vw, 56px);
	--edge: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	--section: clamp(88px, 11vw, 168px);
	--header-h: 92px;
	--ease: cubic-bezier(.2, .7, .1, 1);
	--ease-slow: cubic-bezier(.65, 0, .35, 1);
}

/* Basis
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
	margin: 0;
	background: var(--linnen);
	color: var(--tekst);
	font: 300 1.125rem/1.7 var(--f-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
strong, b { font-weight: 500; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: inherit; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--mint); color: var(--kop); }

:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; border-radius: 2px; }

.as-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.as-section { padding-block: var(--section); }
.as-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.as-skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: .8rem 1.2rem; background: var(--wit); color: var(--kop); text-decoration: none; transition: top .2s; }
.as-skip:focus { top: 16px; }
.as-hp { position: absolute; left: -9999px; }
.grecaptcha-badge { visibility: hidden !important; } /* vermelding staat onder elk formulier */
.as-admin-note { padding-block: 2rem; color: var(--taupe-diep); font-style: italic; }

/* Typografie */
.as-h1 {
	font: 400 clamp(2.6rem, 5vw, 4.8rem)/1 var(--f-h1);
	letter-spacing: .06em;
	color: var(--kop);
}
.as-h2 {
	margin-bottom: .35em;
	font: 700 clamp(2.8rem, 5.2vw, 4.8rem)/1 var(--f-h2);
	letter-spacing: .02em;
	color: var(--kop);
}
.as-prose { max-width: 58ch; }
.as-prose p { margin-bottom: 1.1em; }
.as-hint { font-size: .95rem; color: var(--taupe-diep); }
@media (hover: none) { .as-hint--pointer { display: none !important; } }

.as-link {
	display: inline-block;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: .03em;
	color: var(--kop);
	text-decoration: underline;
	text-decoration-color: var(--taupe);
	text-decoration-thickness: 1px;
	text-underline-offset: .45em;
	transition: color .3s, text-underline-offset .3s, text-decoration-color .3s;
}
.as-link:hover { color: var(--roze-diep); text-decoration-color: var(--roze); text-underline-offset: .3em; }

/* Knoppen */
.as-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	padding: 1rem 1.7rem;
	border: 0;
	border-radius: 2px;
	background: transparent;
	font: 500 1rem/1.1 var(--f-body);
	letter-spacing: .05em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.as-btn .as-icon { width: 20px; height: 20px; }
.as-btn--dark { background: var(--taupe-diep); color: var(--wit); }
.as-btn--dark:hover { background: var(--kop); }
.as-btn--outline { color: var(--kop); box-shadow: inset 0 0 0 1px var(--taupe); }
.as-btn--outline:hover { box-shadow: inset 0 0 0 1px var(--kop); background: rgba(255, 255, 255, .45); }
.as-btn[disabled] { opacity: .6; cursor: progress; }

.as-round {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--kop);
	box-shadow: inset 0 0 0 1px var(--kiezel);
	cursor: pointer;
	transition: background-color .3s, color .3s, box-shadow .3s;
}
.as-round:hover { background: var(--taupe-diep); color: var(--wit); box-shadow: none; }
.as-round[disabled] { opacity: .35; pointer-events: none; }
.as-round .as-icon { width: 20px; height: 20px; }

/* Lijntekening-iconen (keuzekaarten, wegen) */
.as-wicon { width: 46px; height: 46px; fill: none; stroke: var(--taupe); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }

/* Focuspunt: extra zoom rond het sieraad (gezet door main.js) */
img[data-focus] { transform: scale(var(--fz, 1)); transform-origin: var(--fo, 50% 50%); }

.as-ph {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: linear-gradient(160deg, var(--linnen), var(--kiezel));
}

/* Monogram dat zichzelf tekent (signatuur) */
.as-mono { overflow: visible; }
.as-mono--draw path {
	fill-opacity: 0;
	stroke: currentColor;
	stroke-width: 70;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 2.8s var(--ease-slow), fill-opacity 1.2s var(--ease) 2.1s, stroke-opacity 1s ease 2.6s;
}
.is-drawn .as-mono--draw path { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }

/* Loep (hero en collectie) */
.as-loupe {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: clamp(150px, 15vw, 230px);
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	background-color: var(--wit);
	background-repeat: no-repeat;
	box-shadow: 0 0 0 1px var(--wit), 0 0 0 7px rgba(255, 255, 255, .4), 0 26px 50px -12px rgba(59, 52, 45, .45);
	opacity: 0;
	transform: translate(-50%, -50%) scale(.6);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.is-zooming > .as-loupe { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Header: menu links en rechts, het logoblok hangt in het midden
   ========================================================================== */

.as-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	height: var(--header-h);
	color: var(--kop);
	background: rgba(230, 224, 219, .95);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: background-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.is-home .as-header:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.as-header.is-hidden { transform: translateY(-100%); }
.as-header.is-scrolled { box-shadow: 0 10px 30px -24px rgba(59, 52, 45, .5); }
.as-main { padding-top: var(--header-h); }
.is-home .as-main { padding-top: 0; }

.as-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
	height: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.as-header__brand { align-self: start; }

.as-logo { display: block; color: inherit; text-decoration: none; }
.as-logo__svg, .as-logo__img { width: 100%; height: auto; }
.as-logo--block {
	width: 112px;
	box-shadow: 0 18px 34px -22px rgba(59, 52, 45, .55);
	transition: width .45s var(--ease);
}
.as-header.is-scrolled .as-logo--block { width: 76px; }
.as-logo--small { width: 64px; }
.as-logo--footer { width: 128px; margin-bottom: 1.6rem; }

.as-nav--left { justify-self: start; }
.as-nav--right { justify-self: end; display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2.4rem); }
.as-nav__list { display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2.4rem); }
.as-nav__list > li { position: relative; display: flex; align-items: center; }
.as-nav__list a {
	display: block;
	padding: .6rem 0;
	font-size: 1.08rem;
	font-weight: 400;
	letter-spacing: .04em;
	text-decoration: none;
	text-decoration-color: var(--roze);
	text-underline-offset: .5em;
	text-decoration-thickness: 1px;
}
.as-nav__list > li > a:hover,
.as-nav__list > .current-menu-item > a,
.as-nav__list > .current-menu-ancestor > a { text-decoration-line: underline; }
.as-nav__toggle { display: grid; place-items: center; width: 28px; height: 28px; margin-left: .1rem; border: 0; background: none; color: inherit; cursor: pointer; }
.as-nav__toggle .as-icon { width: 16px; height: 16px; transition: transform .3s; }
.as-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -1.4rem;
	min-width: 240px;
	padding: .9rem 1.4rem;
	background: var(--wit);
	border-radius: 2px;
	box-shadow: 0 24px 50px -20px rgba(59, 52, 45, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s;
}
.as-nav .sub-menu a { padding: .45rem 0; }
.as-nav .sub-menu a:hover { color: var(--roze-diep); }
.as-nav li:hover > .sub-menu,
.as-nav li:focus-within > .sub-menu,
.as-nav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.as-nav li.is-open > .as-nav__toggle .as-icon { transform: rotate(180deg); }
.as-nav__wa { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--kiezel); transition: background-color .3s, color .3s; }
.as-nav__wa:hover { background: var(--taupe-diep); color: var(--wit); }
.as-nav__wa .as-icon { width: 20px; height: 20px; }

.as-burger { display: none; place-items: center; width: 46px; height: 46px; border: 0; background: none; color: inherit; cursor: pointer; justify-self: end; }
.as-burger .as-icon { width: 26px; height: 26px; }

@media (max-width: 1023px) {
	:root { --header-h: 76px; }
	.as-header__inner { grid-template-columns: auto 1fr auto; }
	.as-nav { display: none !important; }
	.as-burger { display: grid; grid-column: 3; }
	.as-header__brand { grid-column: 1; grid-row: 1; }
	.as-logo--block, .as-header.is-scrolled .as-logo--block { width: 72px; }
}

/* Mobiel menu */
.as-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--linnen);
	color: var(--kop);
	overflow-y: auto;
	opacity: 0;
	transition: opacity .4s var(--ease);
}
.as-menu.is-open { opacity: 1; }
.as-menu__inner { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 40px; }
.as-menu__top { display: flex; align-items: flex-start; justify-content: space-between; min-height: var(--header-h); }
.as-menu__close { display: grid; place-items: center; width: 46px; height: 46px; margin-top: 15px; border: 0; background: none; color: inherit; cursor: pointer; }
.as-menu__list { margin-top: clamp(24px, 5vh, 56px); }
.as-menu__list--second { margin-top: 0; }
.as-menu__list > li { display: flex; flex-wrap: wrap; align-items: center; }
.as-menu__list a { display: block; padding: .15rem 0; font: 700 clamp(2.6rem, 10vw, 3.6rem)/1.1 var(--f-h2); text-decoration: none; }
.as-menu__list .as-nav__toggle { width: 44px; height: 44px; margin-left: .5rem; }
.as-menu__list .sub-menu { display: none; flex-basis: 100%; padding: .2rem 0 1rem 1.2rem; }
.as-menu__list .is-open > .sub-menu { display: block; }
.as-menu__list .sub-menu a { font: 400 1.35rem/1.6 var(--f-body); color: var(--taupe-diep); }
.as-menu__contact { display: grid; gap: .4rem; margin-top: auto; padding-top: 40px; color: var(--taupe-diep); }
.as-menu__contact a { text-decoration: none; }
body.menu-open { overflow: hidden; }

/* Welkom "Ontmoet Anja"
   ========================================================================== */

.as-welkom { background: var(--wit); overflow: hidden; }
.as-welkom__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }

/* Collage: groot ovaal, twee kleine medaillons die op een andere snelheid meebewegen */
.as-welkom__collage {
	--shift: 0px;
	grid-column: 1 / span 6;
	position: relative;
	width: min(100%, 560px);
	aspect-ratio: 1 / 1.08;
	justify-self: center;
}
.as-welkom__oval {
	position: absolute;
	left: 14%;
	top: 0;
	width: 72%;
	aspect-ratio: 4 / 5;
	border-radius: 50%;
	overflow: hidden;
	background: var(--linnen);
	box-shadow: 0 40px 70px -46px rgba(59, 52, 45, .55);
}
.as-welkom__layer { position: absolute; inset: 0; }
.as-welkom__layer img, .as-welkom__layer .as-ph { width: 100%; height: 100%; object-fit: cover; }
.as-welkom__layer:not(.is-base) {
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .7s var(--ease), transform 1.2s var(--ease);
}
.as-welkom__layer.is-shown { opacity: 1; transform: none; }
.as-welkom__layer.is-base img { transition: transform 1.2s var(--ease), filter .7s; }
.as-welkom__collage.is-swapping .as-welkom__layer.is-base img { transform: scale(calc(var(--fz, 1) * 1.04)); filter: blur(2px); }
.as-welkom__label {
	position: absolute;
	left: 50%;
	bottom: 9%;
	padding: .2rem 1rem .1rem;
	border-radius: 30px;
	background: rgba(255, 255, 255, .88);
	font: 700 1.7rem/1.2 var(--f-h2);
	letter-spacing: .04em;
	color: var(--kop);
	transform: translate(-50%, 10px);
	opacity: 0;
	transition: opacity .5s var(--ease) .15s, transform .6s var(--ease) .15s;
}
.as-welkom__layer.is-shown .as-welkom__label { opacity: 1; transform: translate(-50%, 0); }

.as-welkom__dot {
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	background: var(--linnen);
	box-shadow: 0 0 0 8px var(--wit), 0 30px 50px -30px rgba(59, 52, 45, .55);
	transform: translateY(calc(var(--shift) * var(--d, 0)));
	will-change: transform;
}
.as-welkom__dot img, .as-welkom__dot .as-ph { width: 100%; height: 100%; object-fit: cover; }
.as-welkom__dot--detail { --d: .6; left: 0; bottom: 4%; width: 40%; aspect-ratio: 1; }
.as-welkom__dot--sfeer { --d: -.5; right: 2%; top: 8%; width: 25%; aspect-ratio: 1; }

/* Tekst */
.as-welkom__text { grid-column: 7 / span 6; }
.as-welkom__text .as-h2 { max-width: 14ch; }
.as-welkom__prose { font-size: 1.16rem; }

/* Woorden die een foto tonen */
.as-word {
	display: inline-flex;
	align-items: baseline;
	gap: .32em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 500;
	color: var(--kop);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-color: var(--zand);
	text-decoration-thickness: 1px;
	text-underline-offset: .3em;
	cursor: pointer;
	transition: color .3s, text-decoration-color .3s;
}
.as-word__stone {
	position: relative;
	top: .12em;
	flex-shrink: 0;
	width: .95em;
	height: .95em;
	border-radius: 50%;
	background: var(--img) var(--pos, center) / cover;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset -2px -3px 5px rgba(40, 34, 28, .3), 0 2px 5px -2px rgba(40, 34, 28, .5);
	transition: transform .45s var(--ease);
}
.as-word:hover, .as-word[aria-pressed="true"] { color: var(--roze-diep); text-decoration-color: var(--roze); }
.as-word:hover .as-word__stone, .as-word[aria-pressed="true"] .as-word__stone { transform: scale(1.35) rotate(-12deg); }

/* Citaat (na het interview) */
.as-welkom__quote { margin: 2rem 0 0; padding: 0; }
.as-welkom__quote p { max-width: 30ch; margin: 0; font: 700 clamp(1.9rem, 2.6vw, 2.5rem)/1.15 var(--f-h2); letter-spacing: .02em; color: var(--taupe-diep); }

/* Handtekening die zich schrijft */
.as-signature { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2rem; align-items: center; margin: 2.4rem 0 2.4rem; }
.as-signature__mono { grid-row: span 2; width: 72px; color: var(--taupe); }
.as-signature__mono path { stroke-width: 120; }
.as-signature__name {
	justify-self: start;
	padding: 0 .3em .1em 0;
	font: 400 clamp(2.8rem, 3.8vw, 3.6rem)/1.05 var(--f-script);
	color: var(--kop);
	clip-path: inset(-20% 100% -20% 0);
	transition: clip-path 2.4s cubic-bezier(.45, .05, .3, 1) .5s;
}
.is-drawn .as-signature__name { clip-path: inset(-20% -5% -20% 0); }
.as-signature__role { font-size: 1rem; color: var(--taupe-diep); opacity: 0; transition: opacity 1s var(--ease) 2.2s; }
.is-drawn .as-signature__role { opacity: 1; }

@media (max-width: 899px) {
	.as-welkom__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.as-welkom__collage { grid-column: auto; width: min(92%, 440px); }
	.as-welkom__text { grid-column: auto; }
	.as-welkom__dot { box-shadow: 0 0 0 6px var(--wit), 0 24px 40px -26px rgba(59, 52, 45, .55); }
}

/* Peek: kleine foto onderin bij tikken op een woord (mobiel) */
.as-peek {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .5rem 1.2rem .5rem .5rem;
	border-radius: 60px;
	background: var(--wit);
	box-shadow: 0 20px 40px -18px rgba(40, 34, 28, .5);
	transform: translate(-50%, 30px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.as-peek.is-on { opacity: 1; transform: translate(-50%, 0); }
.as-peek__img { width: 84px; height: 84px; border-radius: 50%; background: var(--linnen) center / cover; }
.as-peek__label { font: 700 1.8rem/1 var(--f-h2); color: var(--kop); }

@media (prefers-reduced-motion: reduce) {
	.as-signature__name { clip-path: none; }
	.as-signature__role { opacity: 1; }
}

/* Collectie "De lade gaat open"
   ========================================================================== */

.as-collectie { background: var(--linnen); }
.as-collectie__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.as-collectie__head .as-h2 { margin: 0; }
.as-collectie__intro p { max-width: 44ch; margin-bottom: .4rem; }

.as-drawers { display: flex; gap: clamp(10px, 1vw, 16px); height: clamp(560px, 76vh, 760px); }
.as-drawer {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	border-radius: 4px;
	overflow: hidden;
	background: color-mix(in srgb, var(--accent) 24%, var(--wit));
	transition: flex-grow .9s var(--ease), background-color .6s;
}
.as-drawer.is-open { flex-grow: 6.5; }

/* Dichte lade: foto met de naam verticaal */
.as-drawer__tab {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--taupe);
	color: var(--wit);
	text-align: left;
	cursor: pointer;
	transition: opacity .5s var(--ease);
}
.as-drawer__cover { position: absolute; inset: 0; }
.as-drawer__cover img, .as-drawer__cover .as-ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s; filter: saturate(.85); }
.as-drawer__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(40, 34, 28, .62) 0%, rgba(40, 34, 28, .1) 55%),
		color-mix(in srgb, var(--accent) 35%, transparent);
	mix-blend-mode: multiply;
}
.as-drawer__tab:hover .as-drawer__cover img { transform: scale(calc(var(--fz, 1) * 1.05)); filter: saturate(1); }
.as-drawer__name {
	position: absolute;
	left: 50%;
	bottom: clamp(22px, 3vh, 34px);
	font: 700 clamp(2.6rem, 3.4vw, 3.6rem)/1 var(--f-h2);
	letter-spacing: .04em;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: translateX(-50%) rotate(180deg);
	text-shadow: 0 2px 18px rgba(40, 34, 28, .35);
}
.as-drawer__count {
	position: absolute;
	top: 18px;
	left: 50%;
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 .5rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, .9);
	color: var(--kop);
	font: 400 1.25rem/1 var(--f-h1);
	letter-spacing: .04em;
	transform: translateX(-50%);
}
.as-drawer.is-open .as-drawer__tab { opacity: 0; pointer-events: none; }

/* Open lade */
.as-drawer__body {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 56px);
	padding: clamp(24px, 3vw, 48px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s var(--ease), visibility 0s .35s;
}
.as-drawer.is-open .as-drawer__body { opacity: 1; visibility: visible; transition: opacity .7s var(--ease) .35s, visibility 0s; }

.as-drawer__stage-wrap { display: flex; flex-direction: column; min-height: 0; gap: .8rem; }
.as-drawer__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: block;
	border-radius: 999px 999px 6px 6px;
	overflow: hidden;
	background: var(--wit);
	cursor: zoom-in;
	box-shadow: 0 30px 60px -40px rgba(59, 52, 45, .6);
}
.as-drawer__slide { position: absolute; inset: 0; opacity: 0; transform: scale(calc(var(--fz, 1) * 1.04)); transition: opacity 1.1s var(--ease-slow), transform 2.4s var(--ease); }
.as-drawer__slide.is-active { opacity: 1; transform: none; }
.as-drawer__slide img, .as-drawer__slide .as-ph { width: 100%; height: 100%; object-fit: cover; }
.as-drawer__piece { margin: 0; min-height: 1.4em; font-size: 1rem; text-align: center; color: var(--taupe-diep); transition: opacity .35s; }
.as-drawer__piece.is-changing { opacity: 0; }

.as-drawer__info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; }
.as-drawer__title { font: 700 clamp(3rem, 4.4vw, 4.6rem)/.95 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-drawer__title a { text-decoration: none; }
.as-drawer__title a:hover { color: var(--roze-diep); }
.as-drawer__total { margin: .5rem 0 1rem; font: 400 1.35rem/1 var(--f-h1); letter-spacing: .08em; color: var(--taupe-diep); }
.as-drawer__text { max-width: 34ch; margin-bottom: 1.6rem; }
.as-drawer__strip { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.as-drawer__strip a {
	display: block;
	width: clamp(52px, 4.4vw, 66px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wit);
	box-shadow: 0 0 0 3px var(--wit), 0 10px 20px -12px rgba(59, 52, 45, .6);
	transition: transform .4s var(--ease), box-shadow .4s;
}
.as-drawer__strip img { width: 100%; height: 100%; object-fit: cover; }
.as-drawer__strip a:hover, .as-drawer__strip a.is-active { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--accent), 0 14px 24px -12px rgba(59, 52, 45, .6); }

/* Zoek op steen */
.as-stonefinder { margin-top: clamp(56px, 6vw, 88px); }
.as-stonefinder__title { margin-bottom: 1.2rem; font: 700 clamp(2.2rem, 3vw, 2.8rem)/1 var(--f-h2); color: var(--kop); }
.as-stonefinder__list { display: flex; flex-wrap: wrap; gap: .7rem; }
.as-chip {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .4rem 1.1rem .4rem .4rem;
	border-radius: 40px;
	background: var(--wit);
	color: var(--kop);
	text-decoration: none;
	box-shadow: 0 10px 22px -18px rgba(59, 52, 45, .7);
	transition: transform .4s var(--ease), box-shadow .4s, background-color .3s;
}
.as-chip__gem {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--linnen) var(--img) var(--pos, center) / 260% no-repeat;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset -4px -6px 9px rgba(40, 34, 28, .25), inset 4px 4px 8px rgba(255, 255, 255, .3);
	transition: transform .5s var(--ease);
}
.as-chip__name { font-weight: 500; }
.as-chip__count { font-size: .9rem; color: var(--taupe-diep); }
.as-chip:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -18px rgba(59, 52, 45, .8); }
.as-chip:hover .as-chip__gem { transform: rotate(-20deg) scale(1.1); }

@media (max-width: 899px) {
	.as-collectie__head { grid-template-columns: minmax(0, 1fr); }
	.as-drawers { flex-direction: column; height: auto; }
	.as-drawer { flex: none; }
	.as-drawer__tab { position: relative; height: 112px; }
	.as-drawer__name { left: 24px; bottom: 50%; writing-mode: horizontal-tb; transform: translateY(50%); font-size: 2.6rem; }
	.as-drawer__count { left: auto; right: 20px; top: 50%; transform: translateY(-50%); }
	.as-drawer.is-open .as-drawer__tab { display: none; }
	.as-drawer__body { position: static; display: none; grid-template-columns: minmax(0, 1fr); padding: 20px; }
	.as-drawer.is-open .as-drawer__body { display: grid; }
	.as-drawer__stage { flex: none; aspect-ratio: 4 / 4.6; }
}

/* Nieuw in de vitrine "Vers uit het atelier"
   ========================================================================== */

.as-vitrine {
	overflow: hidden;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
		var(--linnen);
}
.as-vitrine__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(36px, 4vw, 60px); }
.as-vitrine__intro { max-width: 44ch; margin: 0; }

.as-vitrine__layout {
	display: grid;
	grid-template-columns: minmax(280px, 520px) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
	padding-left: var(--edge);
}
.as-feature { padding-top: 48px; }

/* Vitrine-licht: een lichtvlek boven elk sieraad en een zachte schaduw eronder */
.as-spot { position: relative; isolation: isolate; }
.as-spot::before {
	content: "";
	position: absolute;
	left: -14%;
	right: -14%;
	top: -9%;
	height: 72%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, 0));
	pointer-events: none;
}
.as-spot::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -14px;
	height: 26px;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(59, 52, 45, .28), rgba(59, 52, 45, 0));
	pointer-events: none;
}

/* Klikbaar beeld met tweede foto bij aanwijzen */
.as-piece__open {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: var(--wit);
	cursor: pointer;
}
.as-piece__open:focus-visible { outline-offset: -4px; outline-color: rgba(255, 255, 255, .9); }
.as-piece__open img { width: 100%; height: 100%; object-fit: cover; transition: opacity .8s var(--ease), transform 1.4s var(--ease); -webkit-user-drag: none; }
.as-piece__open .as-swap__b { position: absolute; inset: 0; opacity: 0; transform: scale(calc(var(--fz, 1) * 1.04)); }
.as-piece__open:hover .as-swap__b, .as-piece__open:focus-visible .as-swap__b { opacity: 1; transform: scale(var(--fz, 1)); }
.as-piece__open:hover .as-swap__a { transform: scale(calc(var(--fz, 1) * 1.04)); }
.as-piece__peek {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .9rem;
	border-radius: 30px;
	background: rgba(255, 255, 255, .92);
	font-size: .92rem;
	font-weight: 500;
	color: var(--kop);
	white-space: nowrap;
	transform: translate(-50%, 10px);
	opacity: 0;
	transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.as-piece__peek .as-icon { width: 18px; height: 18px; }
.as-piece__open:hover .as-piece__peek, .as-piece__open:focus-visible .as-piece__peek { opacity: 1; transform: translate(-50%, 0); }

/* Bewaarknop */
.as-fav {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--kop);
	cursor: pointer;
	box-shadow: 0 8px 18px -10px rgba(40, 34, 28, .5);
	transition: transform .3s var(--ease), color .3s, background-color .3s;
}
.as-fav .as-icon { width: 20px; height: 20px; transition: fill .3s; }
.as-fav:hover { transform: scale(1.08); color: var(--roze-diep); }
.as-fav[aria-pressed="true"] { color: var(--roze); }
.as-fav[aria-pressed="true"] .as-icon { fill: var(--roze); }
.as-fav.is-pop .as-icon { animation: as-pop .5s var(--ease); }
@keyframes as-pop { 40% { transform: scale(1.4); } }
.as-fav--inline { position: static; width: auto; height: auto; padding: 1rem 1.2rem; gap: .5rem; display: inline-flex; border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--kiezel); font-weight: 500; }
.as-fav--inline:hover { transform: none; }

/* Statuslabel */
.as-tag { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; min-height: 1.5em; font-size: .92rem; color: var(--taupe-diep); }
.as-tag--empty::before { display: none; }
.as-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kiezel); }
.as-tag.is-uniek::before { background: var(--roze); animation: as-glow 2.4s var(--ease) infinite; }
.as-tag.is-op_bestelling::before { background: var(--mint); }
@keyframes as-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(196, 90, 131, .45); } 60% { box-shadow: 0 0 0 7px rgba(196, 90, 131, 0); } }

/* Uitgelicht */
.as-feature__media .as-piece__open { aspect-ratio: 4 / 5; }
.as-feature__body { padding-top: 1.6rem; }
.as-feature__fresh { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font: 400 1.15rem/1 var(--f-h1); letter-spacing: .08em; color: var(--taupe-diep); }
.as-feature__fresh::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.as-feature__title { margin-bottom: .5rem; font: 700 clamp(2.4rem, 3.4vw, 3.4rem)/1 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-feature__title a { text-decoration: none; }
.as-feature__title a:hover { color: var(--roze-diep); }
.as-feature__meta { margin-bottom: .4rem; color: var(--taupe-diep); }
.as-feature__price { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-bottom: 1.4rem; font-size: 1.15rem; font-weight: 500; color: var(--kop); }
.as-feature__price .as-tag { margin: 0; font-weight: 400; }
.as-feature__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Rail */
.as-vitrine__railwrap { min-width: 0; }
.as-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(230px, 17vw, 320px);
	gap: clamp(18px, 2vw, 32px);
	padding: 48px var(--edge) 22px 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	scrollbar-width: none;
	cursor: grab;
}
.as-rail::-webkit-scrollbar { display: none; }
.as-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.as-rail.is-dragging a, .as-rail.is-dragging button { pointer-events: none; }
.as-piece { scroll-snap-align: start; user-select: none; }
.as-piece__media .as-piece__open { aspect-ratio: 4 / 5; }
.as-piece__body { padding-top: 1.2rem; }
.as-piece__title { margin-bottom: .2rem; font: 500 1.15rem/1.3 var(--f-body); color: var(--kop); }
.as-piece__title a { text-decoration: none; }
.as-piece__title a:hover { color: var(--roze-diep); }
.as-piece__price { margin: 0; font-size: 1.02rem; }

.as-vitrine__nav { display: flex; align-items: center; gap: .8rem; padding-right: var(--edge); margin-top: 1.2rem; }
.as-vitrine__counter { margin: 0 .6rem 0 0; font: 400 1.5rem/1 var(--f-h1); letter-spacing: .08em; color: var(--kop); font-variant-numeric: tabular-nums; }

@media (max-width: 899px) {
	.as-vitrine__head { flex-direction: column; align-items: flex-start; }
	.as-vitrine__layout { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
	.as-feature { padding: 0 var(--gutter); }
	.as-rail { grid-auto-columns: 68vw; padding: 32px var(--gutter) 20px; scroll-padding-inline: var(--gutter); }
	.as-vitrine__nav { padding-inline: var(--gutter); }
	.as-piece__peek { display: none; }
}

/* Detailpaneel */
html.qv-open { overflow: hidden; }
.as-qv {
	width: min(1180px, calc(100vw - 32px));
	max-height: calc(100svh - 32px);
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--wit);
	color: var(--tekst);
	box-shadow: 0 40px 120px -30px rgba(40, 34, 28, .6);
	overflow: hidden;
}
.as-qv::backdrop { background: rgba(59, 52, 45, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.as-qv.is-in { animation: as-qv-in .55s var(--ease); }
@keyframes as-qv-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.as-qv__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); max-height: calc(100svh - 32px); }
.as-qv__close { position: absolute; top: 14px; right: 14px; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--linnen); color: var(--kop); cursor: pointer; transition: background-color .3s; }
.as-qv__close:hover { background: var(--kiezel); }

.as-qv__gallery { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--linnen); min-height: 0; }
.as-qv__stage { position: relative; flex: 1; min-height: 320px; aspect-ratio: 1 / 1.05; max-height: calc(100svh - 150px); overflow: hidden; border-radius: 4px; background: var(--wit); cursor: zoom-in; touch-action: pan-y; }
.as-qv__stage img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.as-qv__stage img.is-changing { opacity: .2; }
.as-qv__nav { position: absolute; top: 50%; z-index: 3; display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--kop); cursor: pointer; transform: translateY(-50%); }
.as-qv.has-many .as-qv__nav { display: grid; }
.as-qv__nav--prev { left: 12px; }
.as-qv__nav--next { right: 12px; }
.as-qv__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.as-qv__thumbs button { width: 60px; height: 60px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: var(--wit) center / cover; cursor: pointer; opacity: .55; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .3s, outline-color .3s; }
.as-qv__thumbs button[aria-current="true"] { opacity: 1; outline-color: var(--taupe); }

.as-qv__info { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 56px); overflow-y: auto; }
.as-qv__fresh { margin: 0 0 .6rem; font: 400 1.1rem/1 var(--f-h1); letter-spacing: .08em; color: var(--taupe-diep); }
.as-qv__fresh:empty { display: none; }
.as-qv__title { margin-bottom: .8rem; padding-right: 48px; font: 700 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-qv__specs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.4rem; margin: 1rem 0 1.4rem; }
.as-qv__specs dt { font-weight: 500; color: var(--kop); }
.as-qv__specs dd { margin: 0; }
.as-qv__price { margin-bottom: 1.6rem; font-size: 1.3rem; font-weight: 500; color: var(--kop); }
.as-qv__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

@media (max-width: 799px) {
	.as-qv { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; border-radius: 0; }
	.as-qv__inner { grid-template-columns: minmax(0, 1fr); max-height: 100svh; height: 100%; overflow-y: auto; }
	.as-qv__stage { flex: none; aspect-ratio: 1; max-height: none; }
	.as-qv__info { justify-content: flex-start; overflow: visible; }
}

/* Favorietenbalk */
.as-favbar {
	position: fixed;
	left: 50%;
	bottom: clamp(14px, 2vw, 24px);
	z-index: 45;
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: .35rem;
	border-radius: 40px;
	background: var(--kop);
	box-shadow: 0 18px 40px -16px rgba(40, 34, 28, .7);
	transform: translateX(-50%);
	animation: as-favbar-in .6s var(--ease);
}
.as-favbar[hidden] { display: none; }
@keyframes as-favbar-in { from { opacity: 0; transform: translate(-50%, 20px); } }
.as-favbar__ask { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .6rem .55rem 1rem; color: var(--wit); text-decoration: none; font-weight: 500; white-space: nowrap; }
.as-favbar__ask .as-icon { width: 20px; height: 20px; color: var(--roze); fill: var(--roze); }
.as-favbar__count { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 .4rem; border-radius: 14px; background: var(--roze); color: var(--wit); font: 400 1.05rem/1 var(--f-h1); letter-spacing: .04em; }
.as-favbar__clear { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--wit); cursor: pointer; }
.as-favbar__clear .as-icon { width: 16px; height: 16px; }
body.has-favs .as-wa-float { opacity: 0; pointer-events: none; }
@media (max-width: 499px) { .as-favbar__ask span:not(.as-favbar__count) { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; } }

/* Cookiemelding: eenmalig, informatief, geen toestemming nodig */
.as-cookie {
	position: fixed;
	left: clamp(14px, 2vw, 24px);
	bottom: clamp(14px, 2vw, 24px);
	z-index: 60;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	width: min(400px, calc(100vw - 28px));
	padding: 1.2rem 2.8rem 1.2rem 1.2rem;
	border-radius: 8px;
	background: var(--wit);
	color: var(--tekst);
	box-shadow: 0 30px 60px -24px rgba(40, 34, 28, .55), 0 2px 8px -2px rgba(40, 34, 28, .15);
	opacity: 0;
	transform: translateY(24px) scale(.98);
	transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.as-cookie[hidden] { display: none; }
.as-cookie.is-in { opacity: 1; transform: none; }
.as-cookie.is-out { opacity: 0; transform: translateY(16px) scale(.98); transition-duration: .45s; }
.as-cookie__seal {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 47% 53% 50% 48% / 52% 46% 54% 48%;
	background: var(--linnen);
	color: var(--taupe-diep);
	transform: rotate(-6deg);
	transition: background-color .5s, color .5s;
}
.as-cookie.is-in .as-cookie__seal { animation: as-cookie-stamp .7s cubic-bezier(.3, 1.5, .5, 1) .5s both; }
@keyframes as-cookie-stamp { 0% { transform: scale(1.5) rotate(-18deg); opacity: 0; } 70% { transform: scale(.94) rotate(-6deg); opacity: 1; } 100% { transform: rotate(-6deg); } }
.as-cookie__mono { width: 62%; }
.as-cookie__mono path { stroke-width: 120; }
.as-cookie__title { margin: .1rem 0 .3rem; font: 700 1.7rem/1.05 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-cookie__text { margin: 0 0 .9rem; font-size: .98rem; line-height: 1.5; }
.as-cookie__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.as-cookie__ok { min-height: 44px; padding-inline: 1.4rem; }
.as-cookie__close { position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--linnen); color: var(--kop); cursor: pointer; transition: background-color .3s; }
.as-cookie__close:hover { background: var(--kiezel); }
.as-cookie__close .as-icon { width: 16px; height: 16px; }
.as-cookie.is-thanks .as-cookie__seal { background: var(--mint); color: var(--kop); }

/* Andere zwevende onderdelen schuiven omhoog zolang de melding er staat (mobiel) */
@media (max-width: 639px) {
	.as-cookie { left: 14px; right: 14px; width: auto; }
	.as-favbar { bottom: calc(clamp(14px, 2vw, 24px) + var(--note-h, 0px)); transition: bottom .5s var(--ease); }
	.as-wa-float { bottom: calc(clamp(14px, 2vw, 28px) + var(--note-h, 0px)); transition: bottom .5s var(--ease), opacity .4s; }
}
@media (prefers-reduced-motion: reduce) {
	.as-cookie, .as-cookie.is-out { transition: none; transform: none; }
	.as-cookie.is-in .as-cookie__seal { animation: none; }
}
@media print { .as-cookie { display: none !important; } }

/* Regel bij formulieren: verwijzing naar de privacyverklaring */
.as-privacy-note { margin: .8rem 0 0; font-size: .9rem; color: var(--taupe-diep); }
.as-privacy-note a { color: inherit; }
.as-news__form .as-privacy-note { grid-column: 1 / -1; margin-top: .3rem; color: rgba(59, 52, 45, .78); }

/* Formulieren (gedeeld)
   ========================================================================== */

.as-form__title { margin-bottom: 1rem; font: 700 2.2rem/1 var(--f-h2); color: var(--kop); }
.as-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.as-field { display: block; margin-bottom: 1rem; }
.as-field__label { display: block; margin-bottom: .4rem; font-size: .95rem; font-weight: 400; color: var(--kop); }
.as-field input, .as-field textarea {
	display: block;
	width: 100%;
	padding: .95rem 1.05rem;
	border: 0;
	border-radius: 2px;
	background: var(--wit);
	color: var(--kop);
	line-height: 1.4;
	box-shadow: inset 0 0 0 1px transparent;
	transition: box-shadow .3s;
}
.as-field input { height: 56px; }
.as-field textarea { resize: vertical; min-height: 130px; }
.as-field input:focus, .as-field textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--taupe-diep); }
.as-field input[aria-invalid="true"], .as-field textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--roze-diep); }
.as-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .4rem; }
.as-form__status { margin: 0; font-size: 1.02rem; }
.as-form__status.is-ok { color: var(--kop); font-weight: 500; }
.as-form__status.is-error { color: var(--roze-diep); }

@media (max-width: 559px) { .as-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Footer "Tot ziens in het atelier"
   ========================================================================== */

.as-footer { background: var(--taupe-diep); color: rgba(255, 255, 255, .88); padding: clamp(40px, 5vw, 64px) 0 32px; font-size: 1.02rem; overflow: hidden; }
.as-footer a { text-decoration: none; transition: color .3s; }
.as-footer__list a:hover, .as-footer__legal a:hover, .as-footer__credit a:hover { color: var(--mint); }

.as-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: clamp(48px, 6vw, 88px); }
.as-footer__next {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	padding: .6rem 1.2rem;
	border-radius: 40px;
	background: rgba(255, 255, 255, .08);
	color: var(--wit);
	transition: background-color .3s;
}
.as-footer__next:hover { background: rgba(255, 255, 255, .14); }
.as-footer__next-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); animation: as-glow-mint 2.4s var(--ease) infinite; }
@keyframes as-glow-mint { 0%, 100% { box-shadow: 0 0 0 0 rgba(159, 199, 170, .5); } 60% { box-shadow: 0 0 0 8px rgba(159, 199, 170, 0); } }
.as-footer__next-what { font: 700 1.5rem/1 var(--f-h2); letter-spacing: .03em; }
.as-footer__next-when { font: 400 1.05rem/1 var(--f-h1); letter-spacing: .08em; color: var(--mint); }

.as-totop {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: var(--wit);
	cursor: pointer;
	transition: background-color .3s, transform .4s var(--ease);
}
.as-totop:hover { background: var(--mint); color: var(--kop); transform: translateY(-4px); }
.as-totop__mono { width: 60%; height: auto; }
.as-totop__mono path { stroke-width: 110; }
.as-totop .as-mono--draw path { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
.as-totop.is-drawn .as-mono--draw path { animation: as-redraw 1.6s var(--ease-slow); }
@keyframes as-redraw { 0% { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; } 70% { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 1; } 100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; } }

.as-footer__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 2.5fr) minmax(0, 2.5fr); gap: var(--gutter); }
.as-footer__slot { margin: 0 0 .5rem; font: 700 clamp(2.6rem, 4vw, 4rem)/1 var(--f-h2); letter-spacing: .02em; color: var(--wit); }
.as-footer__text { max-width: 40ch; margin-bottom: 1.8rem; }

/* Drie grote contactknoppen */
.as-footer__contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; max-width: 720px; }
.as-contact {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: .8rem;
	align-items: center;
	padding: 1rem 1.1rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, .08);
	color: var(--wit);
	transition: background-color .3s, color .3s, transform .4s var(--ease);
}
.as-contact .as-icon { grid-row: span 2; width: 26px; height: 26px; color: var(--mint); transition: color .3s; }
.as-contact__label { font-weight: 500; }
.as-contact__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; color: rgba(255, 255, 255, .7); transition: color .3s; }
.as-contact:hover { background: var(--mint); color: var(--kop); transform: translateY(-3px); }
.as-contact:hover .as-icon, .as-contact:hover .as-contact__value { color: var(--kop); }

.as-footer__title { margin-bottom: .8rem; font: 700 1.9rem/1 var(--f-h2); color: var(--wit); }
.as-footer__list li { margin-bottom: .55rem; }
.as-footer__list a { display: inline-flex; align-items: center; gap: .6rem; }
.as-footer__list .as-icon { width: 18px; height: 18px; color: var(--mint); }

.as-footer__bottom { margin-top: clamp(56px, 7vw, 96px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; font-size: .92rem; color: rgba(255, 255, 255, .72); }
.as-footer__bottom p { margin: 0; }
.as-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

@media (max-width: 1023px) {
	.as-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
	.as-footer__contact { grid-template-columns: minmax(0, 1fr); }
	.as-contact { padding: 1.1rem 1.2rem; }
}
@media (max-width: 499px) {
	.as-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.as-footer__top { align-items: flex-start; }
}

/* Zwevende WhatsApp-knop (rustig, verschijnt na de hero)
   ========================================================================== */

.as-wa-float {
	position: fixed;
	right: clamp(14px, 2vw, 28px);
	bottom: clamp(14px, 2vw, 28px);
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 52px;
	padding: 0 14px;
	border-radius: 26px;
	background: var(--taupe);
	color: var(--wit);
	text-decoration: none;
	box-shadow: 0 14px 30px -12px rgba(59, 52, 45, .55);
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity .5s var(--ease), transform .5s var(--ease), gap .4s var(--ease), background-color .3s;
}
.as-wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.as-wa-float .as-icon { width: 24px; height: 24px; flex-shrink: 0; }
.as-wa-float__label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: .98rem; transition: max-width .45s var(--ease); }
.as-wa-float:hover, .as-wa-float:focus-visible { gap: .6rem; background: var(--taupe-diep); }
.as-wa-float:hover .as-wa-float__label, .as-wa-float:focus-visible .as-wa-float__label { max-width: 160px; }

/* Algemene pagina's (worden later per pagina uitgewerkt)
   ========================================================================== */

.as-page { padding-block: clamp(72px, 9vw, 130px) var(--section); }
.as-page__head { margin-bottom: clamp(32px, 4vw, 56px); }
.as-list { display: grid; gap: 2.4rem; max-width: 760px; }
.as-list__title { font: 700 2.2rem/1.05 var(--f-h2); color: var(--kop); }
.as-list__title a { text-decoration: none; }
.as-list__meta { margin: .3rem 0; color: var(--taupe-diep); }

/* Minder beweging
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	.as-mono--draw path { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
	.as-timeline__line path { stroke-dashoffset: 0; }
}