/* =========================================================================
   JC Interior Design — "Editorial" alternative theme stylesheet.
   Fonts: Tenor Sans (nav, buttons, small labels, body) and Fraunces (all
   display headings and italic emphasis, at a large optical size). Loaded
   via functions.php (Google Fonts).

   This is a genuinely different COMPOSITION from the primary theme, not
   just a different palette on the same layout:
     - full-width alternating colour bands set the rhythm of every page,
       the way Interieur voor Jou does, instead of a mostly-white page
       with the odd band dropped in;
     - the USP row is photo-backed dark-overlay tiles (Luxus' pricing-tile
       device), not bordered icon cards;
     - testimonials are a single large quote spotlighted over a photo,
       navigated one at a time, instead of a multi-card horizontal
       carousel;
     - the home portfolio teaser leads with one large featured project
       instead of a repeating bento pattern;
     - sharp, mostly-rectangular edges, thin borders instead of heavy
       shadows, outline buttons that invert on hover, small-caps tracked
       labels.
   ========================================================================= */

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

/* ---- Design tokens ------------------------------------------------------ */
:root {
	--jc-font-display: 'Fraunces', Georgia, serif;
	--jc-font-italic: 'Fraunces', Georgia, serif;
	--jc-font-body: 'Tenor Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	--jc-bg: #ffffff;
	--jc-ink: #2a1f18;
	--jc-text: #5a4b3e;
	--jc-text-light: #8c8177;
	--jc-border: #dad5cc;

	--jc-taupe: #ccc9c3;
	--jc-taupe-dark: #b5afa3;
	--jc-cream: #f6f2e9;

	--jc-gold: #a98551;
	--jc-rust: #a3573a;

	--jc-tint-bronze-bg: #f1ece1;
	--jc-tint-silver-bg: #e3ddd0;
	--jc-tint-gold-bg: #d5ccba;
	--jc-tint-diamond-bg: #c7bba5;
	--jc-tint-afstyling-bg: #bbad93;

	--jc-container: 1240px;

	/* Rounding scale — restrained, near-rectangular. */
	--jc-radius-sm: 2px;
	--jc-radius-md: 4px;
	--jc-radius-lg: 6px;
	--jc-radius-xl: 8px;
	--jc-radius-full: 999px;

	/* Elevation — thin borders do most of the work; shadows stay quiet. */
	--jc-shadow-sm: 0 2px 12px rgba(42, 31, 24, .07);
	--jc-shadow-md: 0 10px 28px rgba(42, 31, 24, .11);
	--jc-shadow-lg: 0 20px 54px rgba(42, 31, 24, .16);

	--jc-ease: cubic-bezier(.16, 1, .3, 1);
	--jc-duration: .5s;
}

@media (prefers-reduced-motion: reduce) {
	:root { --jc-duration: 0.001s; }
	html { scroll-behavior: auto; }
}

/* ---- Base --------------------------------------------------------------- */
body {
	font-family: var(--jc-font-body);
	color: var(--jc-text);
	background: var(--jc-bg);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.jc-skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--jc-ink);
	color: #fff;
	padding: 12px 20px;
	z-index: 1000;
}
.jc-skip-link:focus { left: 12px; top: 12px; }

.jc-container {
	max-width: var(--jc-container);
	margin: 0 auto;
	padding: 0 24px;
}

.jc-section { padding: 72px 0; }
.jc-band { background: var(--jc-ink); color: #fff; }
.jc-cream-band { background: var(--jc-cream); }

/* ---- Scroll-reveal (class + "is-visible" are applied by main.js;
   content stays fully visible if JS never runs) ------------------------- */
.jc-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--jc-duration) var(--jc-ease), transform var(--jc-duration) var(--jc-ease);
	will-change: opacity, transform;
}
.jc-reveal.is-visible { opacity: 1; transform: none; }

/* ---- Headings & type ------------------------------------------------- */
.jc-heading {
	font-family: var(--jc-font-display);
	font-optical-sizing: auto;
	color: var(--jc-ink);
	letter-spacing: -0.01em;
	line-height: 1.08;
	font-weight: 340;
}
.jc-heading em {
	font-style: italic;
	font-weight: 340;
	color: var(--jc-rust);
}
.jc-heading--light { color: #fff; }
.jc-heading--light em { color: var(--jc-taupe); }
.jc-heading--center { text-align: center; }

/* Deliberately larger and heavier-set than the primary theme's headings —
   big, confident editorial type is one of the clearest "this isn't the
   same site" signals available without touching a single word of copy. */
.jc-heading--xl { font-size: clamp(2.6rem, 6.4vw, 4.6rem); margin-bottom: 28px; }
.jc-heading--lg { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 22px; }

.jc-lead {
	max-width: 720px;
	margin: 16px auto 0;
	text-align: center;
	color: var(--jc-text);
}

.jc-prose p { margin-bottom: 1.15em; }
.jc-prose p:last-child { margin-bottom: 0; }
.jc-prose--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.jc-prose--muted { color: var(--jc-text-light); font-family: var(--jc-font-italic); font-style: italic; font-size: 1.15em; }
.jc-prose--strong { font-weight: 600; color: var(--jc-ink); }

/* ---- Buttons: thin outline, uppercase tracked, inverts on hover ------- */
.jc-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 15px 26px;
	border-radius: var(--jc-radius-sm);
	border: 1px solid var(--jc-ink);
	background: transparent;
	color: var(--jc-ink);
	font-family: var(--jc-font-body);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .35s var(--jc-ease), color .35s var(--jc-ease), transform .2s var(--jc-ease);
}
.jc-btn:hover { background: var(--jc-ink); color: #fff; }
.jc-btn:active { transform: scale(.97); }
.jc-btn .jc-icon { width: 13px; height: 13px; transition: transform .35s var(--jc-ease); }
.jc-btn:hover .jc-icon { transform: translate(2px, -2px); }
.jc-btn--dark { background: var(--jc-ink); color: #fff; }
.jc-btn--dark:hover { background: transparent; color: var(--jc-ink); }
.jc-band .jc-btn--dark,
.jc-cta .jc-btn--dark { border-color: #fff; background: #fff; color: var(--jc-ink); }
.jc-band .jc-btn--dark:hover,
.jc-cta .jc-btn--dark:hover { background: transparent; color: #fff; }

/* ---- Icons --------------------------------------------------------------- */
.jc-icon { display: inline-flex; width: 26px; height: 26px; }
.jc-icon svg { width: 100%; height: 100%; }

/* ---- Header / nav: a plain bordered bar, not a floating pill ---------- */
.jc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(246, 242, 233, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--jc-border);
	transition: box-shadow .3s var(--jc-ease);
}
.jc-header.is-scrolled { box-shadow: var(--jc-shadow-sm); }
.jc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--jc-container);
	margin: 0 auto;
	padding: 22px 24px;
}

.jc-header__nav { display: none; flex: 1; }
.jc-header__nav--right { justify-content: flex-end; }
.jc-nav { display: flex; gap: 30px; }
.jc-nav--left { justify-content: flex-start; }
.jc-nav__item a {
	position: relative;
	font-family: var(--jc-font-body);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--jc-ink);
	padding-bottom: 4px;
}
.jc-nav__item a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .4s var(--jc-ease);
}
.jc-nav__item a:hover::after,
.jc-nav__item a.is-current::after { transform: scaleX(1); transform-origin: left; }

.jc-header__logo { flex: 0 0 auto; text-align: center; }
.jc-header__logo img { height: 46px; width: auto; margin: 0 auto; }
.jc-header__logo a { display: inline-block; font-family: var(--jc-font-display); font-size: 1.3rem; letter-spacing: .1em; }

.jc-header__toggle { position: relative; width: 30px; height: 30px; }
.jc-header__toggle .jc-icon { position: absolute; inset: 0; width: 26px; height: 26px; }
.jc-header__toggle-close { display: none; }
.jc-header__toggle[aria-expanded="true"] .jc-header__toggle-open { display: none; }
.jc-header__toggle[aria-expanded="true"] .jc-header__toggle-close { display: inline-flex; }

.jc-mobile-nav {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	border-top: 1px solid transparent;
	transition: max-height .45s var(--jc-ease), opacity .35s var(--jc-ease);
}
.jc-mobile-nav.is-open { max-height: 420px; opacity: 1; border-top-color: var(--jc-border); }
.jc-mobile-nav__list { padding: 8px 24px 22px; display: flex; flex-direction: column; }
.jc-mobile-nav__list li a {
	display: block;
	padding: 13px 0;
	font-family: var(--jc-font-body);
	font-size: .85rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--jc-border);
}
.jc-mobile-nav__list li:last-child a { border-bottom: 0; }

@media (min-width: 1024px) {
	.jc-header__nav { display: flex; }
	.jc-header__toggle { display: none; }
	.jc-mobile-nav { display: none; }
}

/* ---- Hero: full-bleed, no inset rounding ------------------------------ */
.jc-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: #241a13;
	display: flex;
	align-items: flex-end;
	min-height: 50vw;
	max-height: 600px;
	animation: jc-fade-in 1s var(--jc-ease) both;
}
.jc-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(20, 15, 10, .58), rgba(20, 15, 10, 0) 62%);
}
.jc-hero .jc-container { position: relative; padding-bottom: 52px; }
.jc-hero--home { min-height: 62vw; max-height: 660px; }
.jc-hero__mark {
	font-family: var(--jc-font-italic);
	font-style: italic;
	color: #fff;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.jc-hero__title {
	font-family: var(--jc-font-display);
	font-optical-sizing: auto;
	color: #fff;
	font-weight: 340;
	letter-spacing: -0.01em;
	font-size: clamp(2.3rem, 6.4vw, 4.4rem);
	line-height: 1.05;
	max-width: 15ch;
}
.jc-hero__title em { font-style: italic; font-weight: 340; color: var(--jc-gold); }

@keyframes jc-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (min-width: 768px) {
	.jc-hero { min-height: 40vw; }
	.jc-hero--home { min-height: 48vw; }
}

/* ---- USPs: photo-backed dark-overlay tiles (Luxus' tile device), not
   bordered icon cards — one of the clearest breaks from the primary
   theme's card language. Background photos are the theme's own existing
   lifestyle shots, referenced with plain relative CSS urls (no PHP/ACF
   needed, purely decorative). --------------------------------------- */
.jc-usps { padding: 0; }
.jc-usps__grid { display: grid; gap: 2px; background: #fff; grid-template-columns: 1fr; }
.jc-usp {
	position: relative;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 30px 28px;
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
}
.jc-usp::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(20, 15, 10, .85), rgba(20, 15, 10, .35) 58%, rgba(20, 15, 10, .12));
	transition: background .4s var(--jc-ease);
}
.jc-usp:hover::before { background: linear-gradient(0deg, rgba(20, 15, 10, .92), rgba(20, 15, 10, .5) 58%, rgba(20, 15, 10, .22)); }
.jc-usp:nth-child(3n+1) { background-image: url('../img/content/portret-home.jpg'); }
.jc-usp:nth-child(3n+2) { background-image: url('../img/content/kwaliteiten-trap.jpg'); }
.jc-usp:nth-child(3n+3) { background-image: url('../img/content/op-maat-1.jpg'); }
.jc-usp__icon, .jc-usp h3, .jc-usp p { position: relative; z-index: 1; }
.jc-usp__icon { width: 32px; height: 32px; margin-bottom: 16px; color: var(--jc-gold); transition: transform .4s var(--jc-ease); }
.jc-usp__icon .jc-icon { width: 100%; height: 100%; }
.jc-usp:hover .jc-usp__icon { transform: translateY(-4px); }
.jc-usp h3 {
	font-family: var(--jc-font-body);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .85rem;
	margin-bottom: 10px;
	color: #fff;
}
.jc-usp p { font-size: .92rem; color: rgba(255, 255, 255, .82); max-width: 34ch; }
@media (min-width: 768px) {
	.jc-usps__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Intro (home) --------------------------------------------------- */
.jc-intro__grid { display: grid; gap: 40px; align-items: center; }
.jc-intro__image img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 3/4;
}
.jc-intro__content .jc-btn { margin-top: 30px; }
/* A classic editorial drop cap on the opening paragraph — a typographic
   flourish the primary theme doesn't use at all. */
.jc-intro__content .jc-prose p:first-of-type::first-letter,
.jc-bio__content .jc-prose p:first-of-type::first-letter {
	font-family: var(--jc-font-display);
	font-style: italic;
	font-weight: 340;
	font-size: 3.4em;
	line-height: .8;
	float: left;
	padding: .05em .08em 0 0;
	color: var(--jc-rust);
}
@media (min-width: 1024px) {
	.jc-intro__grid { grid-template-columns: 0.85fr 1.15fr; gap: 72px; }
}

/* ---- Bio (over mij) --------------------------------------------------- */
.jc-bio__grid { display: grid; gap: 40px; }
.jc-bio__image img { width: 100%; object-fit: cover; aspect-ratio: 3/4; }

@media (min-width: 1100px) {
	.jc-bio__grid {
		grid-template-columns: 1.3fr 1fr;
		gap: 40px 56px;
		align-items: start;
	}
	.jc-bio__content { grid-column: 1; grid-row: 1; }
	.jc-bio__image { grid-column: 2; grid-row: 1; }
	.jc-bio__accordion { grid-column: 1 / -1; grid-row: 2; }
}

.jc-bio__accordion {
	background: var(--jc-cream);
	padding: 8px 28px;
	border: 1px solid var(--jc-border);
}
.jc-accordion-item { border-bottom: 1px solid var(--jc-border); padding: 18px 4px; }
.jc-accordion-item:last-child { border-bottom: 0; }
.jc-accordion-item__panel .jc-prose { max-width: 68ch; }
.jc-accordion-item__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .82rem;
	font-weight: 500;
	color: var(--jc-ink);
	padding: 4px 6px;
}
.jc-accordion-item__icon-plus,
.jc-accordion-item__icon-minus { width: 14px; height: 14px; }
.jc-accordion-item__icon-minus { display: none; }
.jc-accordion-item.is-open .jc-accordion-item__icon-plus { display: none; }
.jc-accordion-item.is-open .jc-accordion-item__icon-minus { display: inline-flex; }
.jc-accordion-item__panel {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .5s var(--jc-ease), opacity .4s var(--jc-ease);
}
.jc-accordion-item.is-open .jc-accordion-item__panel { max-height: 900px; opacity: 1; }
.jc-accordion-item__panel .jc-prose { padding: 14px 6px 6px; font-size: .95rem; }

/* ---- Projects / portfolio grid (home preview) -------------------------- */
.jc-projects__intro { margin-bottom: 48px; }
.jc-page-intro__inner { text-align: center; }

.jc-portfolio-grid {
	display: grid;
	gap: 2px;
	grid-template-columns: 1fr;
	background: var(--jc-border);
}
.jc-portfolio-item a { display: block; overflow: hidden; position: relative; }
.jc-portfolio-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s var(--jc-ease); }
.jc-portfolio-item a:hover img { transform: scale(1.05); }
.jc-portfolio-item figcaption { margin-top: 14px; }
.jc-portfolio-item__title {
	display: block;
	font-family: var(--jc-font-body);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .82rem;
	color: var(--jc-ink);
}
.jc-portfolio-item__desc { display: block; margin-top: 6px; font-size: .9rem; color: var(--jc-text-light); }

@media (min-width: 640px) {
	.jc-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
/* One large featured project leading a uniform grid of the rest, rather
   than the primary theme's alternating large/small bento rhythm — repeats
   every 6 items so more projects later still lay out sensibly. */
@media (min-width: 900px) {
	.jc-portfolio-grid { grid-template-columns: repeat(3, 1fr); }
	.jc-portfolio-item { background: #fff; }
	.jc-portfolio-item:nth-child(6n+1) { grid-column: 1 / -1; }
	.jc-portfolio-item:nth-child(6n+1) img { aspect-ratio: 21/9; }
	.jc-portfolio-item:nth-child(n+2) img { aspect-ratio: 1/1; }
}

/* ---- Dense real-photo wall for the dedicated Portfolio page ------------ */
.jc-photo-wall {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	background: var(--jc-border);
	border: 1px solid var(--jc-border);
}
.jc-photo-wall__item { position: relative; display: block; overflow: hidden; background: #fff; }
.jc-photo-wall__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	transition: transform .6s var(--jc-ease);
}
.jc-photo-wall__item:hover img { transform: scale(1.06); }
.jc-photo-wall__caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 14px 16px;
	background: linear-gradient(0deg, rgba(20, 15, 10, .75), rgba(20, 15, 10, 0));
	color: #fff;
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s var(--jc-ease), transform .35s var(--jc-ease);
}
.jc-photo-wall__item:hover .jc-photo-wall__caption { opacity: 1; transform: none; }

@media (min-width: 640px) { .jc-photo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .jc-photo-wall { grid-template-columns: repeat(4, 1fr); } }

.jc-photo-wall__empty {
	padding: 48px 24px;
	text-align: center;
	color: var(--jc-text-light);
	border: 1px dashed var(--jc-border);
}

/* ---- Qualities band ------------------------------------------------------ */
.jc-qualities { padding: 80px 0; }
.jc-qualities__grid { display: grid; gap: 40px; align-items: center; }
.jc-qualities__list { margin-top: 32px; display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.2); }
.jc-qualities__list li {
	padding: 18px 20px;
	background: rgba(20, 15, 10, .18);
	letter-spacing: .04em;
	font-size: 1rem;
	transition: background .35s var(--jc-ease), padding-left .35s var(--jc-ease);
}
.jc-qualities__list li:hover { background: rgba(20, 15, 10, .3); padding-left: 26px; }
@media (min-width: 480px) {
	.jc-qualities__list { grid-template-columns: 1fr 1fr; }
}
.jc-qualities__image img { width: 100%; max-width: 360px; margin: 0 auto; object-fit: cover; aspect-ratio: 2/3; }
@media (min-width: 900px) {
	.jc-qualities__grid { grid-template-columns: 1fr 1fr; }
	.jc-qualities__image img { margin: 0 0 0 auto; }
}

/* ---- Custom "op maat" section --------------------------------------------- */
.jc-custom__images { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2px; margin-bottom: 32px; align-items: end; }
.jc-custom__images img { width: 100%; object-fit: cover; aspect-ratio: 3/4; }
.jc-custom__images img:last-child { aspect-ratio: 1/1; }
@media (min-width: 1024px) {
	.jc-custom__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
	.jc-custom__images { margin-bottom: 0; }
}

/* ---- Testimonials: a single quote spotlighted over a full-width photo,
   navigated one at a time — not a multi-card horizontal carousel. ------- */
.jc-spotlight-section {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: #241a13;
	padding: 96px 0;
}
.jc-spotlight-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(20, 15, 10, .72);
}
.jc-spotlight-section .jc-container { position: relative; }

.jc-spotlight { margin-top: 40px; max-width: 760px; margin-left: auto; margin-right: auto; }
.jc-spotlight__stage { position: relative; min-height: 260px; }
.jc-spotlight__item {
	position: absolute;
	inset: 0;
	text-align: center;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .5s var(--jc-ease), transform .5s var(--jc-ease);
}
.jc-spotlight__item.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.jc-spotlight .jc-stars { justify-content: center; margin-bottom: 22px; }
.jc-spotlight__quote {
	font-family: var(--jc-font-display);
	font-optical-sizing: auto;
	font-weight: 340;
	font-style: italic;
	font-size: clamp(1.3rem, 3vw, 1.9rem);
	line-height: 1.4;
	color: #fff;
	margin-bottom: 28px;
}
.jc-spotlight__name { font-family: var(--jc-font-body); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: var(--jc-gold); }
.jc-spotlight__location { font-weight: 400; letter-spacing: .06em; color: rgba(255, 255, 255, .6); }

.jc-spotlight__controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; }
.jc-testimonials__arrow {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border-radius: var(--jc-radius-full);
	border: 1px solid rgba(255, 255, 255, .5);
	background: transparent;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: background .3s var(--jc-ease), color .3s var(--jc-ease), transform .3s var(--jc-ease), opacity .3s var(--jc-ease);
}
.jc-testimonials__arrow .jc-icon { width: 16px; height: 16px; }
.jc-testimonials__arrow:hover:not(:disabled) { background: #fff; color: var(--jc-ink); }
.jc-testimonials__arrow:active:not(:disabled) { transform: scale(.92); }
.jc-testimonials__arrow:disabled { opacity: .3; cursor: default; }

.jc-testimonials__dots { display: flex; justify-content: center; gap: 8px; }
.jc-testimonials__dots button {
	width: 7px; height: 7px; border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	transition: background .3s var(--jc-ease), transform .3s var(--jc-ease);
}
.jc-testimonials__dots button.is-active { background: #fff; transform: scale(1.3); }

/* ---- Fact / "wist je dat" band --------------------------------------------- */
.jc-fact { text-align: center; padding: 100px 0; }
.jc-fact__text { max-width: 640px; margin: 20px auto 0; }

/* ---- CTA band -------------------------------------------------------------- */
.jc-cta { background: var(--jc-ink); color: #fff; padding: 72px 16px; }
.jc-cta__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: flex-start;
	justify-content: space-between;
	max-width: var(--jc-container);
	margin: 0 auto;
}
.jc-cta .jc-heading { max-width: 22ch; }
@media (min-width: 768px) {
	.jc-cta__inner { flex-direction: row; align-items: center; }
}

/* ---- Footer ----------------------------------------------------------------- */
.jc-footer { background: var(--jc-taupe); color: var(--jc-ink); padding: 0 16px 28px; }
.jc-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; padding: 56px 24px 0; max-width: var(--jc-container); margin: 0 auto; }
.jc-footer__col p { margin-bottom: 10px; }
.jc-footer__col a { transition: opacity .3s var(--jc-ease); }
.jc-footer__col a:hover { opacity: .6; }
.jc-footer__label { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; margin-bottom: 14px; opacity: .7; }
.jc-footer__nav li a { display: block; padding: 6px 0; }
.jc-footer__socials { display: flex; gap: 10px; margin-bottom: 24px; }
.jc-footer__socials a {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: var(--jc-ink); color: #fff;
	transition: opacity .3s var(--jc-ease);
}
.jc-footer__socials a:hover { opacity: .75; }
.jc-footer__socials a.jc-footer__social--facebook { background: var(--jc-ink); }
.jc-footer__socials .jc-icon { width: 18px; height: 18px; }
.jc-footer__logo img { height: 80px; width: auto; opacity: .85; }
.jc-footer__bottom { border-top: 1px solid rgba(42,31,24,.2); margin: 32px 24px 0; padding: 20px 0 0; max-width: calc(var(--jc-container) - 48px); margin-left: auto; margin-right: auto; font-size: .8rem; opacity: .7; }
@media (min-width: 900px) {
	.jc-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- Contact ------------------------------------------------------------- */
.jc-contact__grid { display: grid; gap: 48px; }
.jc-contact__details { margin-top: 28px; display: flex; flex-direction: column; gap: 20px; }
.jc-contact__details li { display: flex; align-items: center; gap: 14px; }
.jc-contact__details .jc-icon {
	width: 36px; height: 36px; padding: 9px;
	border: 1px solid var(--jc-border);
	color: var(--jc-ink);
}
.jc-contact__label { display: block; text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; color: var(--jc-text-light); }
.jc-contact__socials { margin-top: 28px; }

@media (min-width: 1024px) {
	.jc-contact__grid { grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
}

.jc-form { display: flex; flex-direction: column; gap: 18px; }
.jc-form__honeypot { position: absolute; left: -9999px; opacity: 0; }
.jc-form__row { display: flex; }
.jc-form__row--split { gap: 18px; flex-wrap: wrap; }
.jc-form__row--split input { flex: 1 1 200px; }
.jc-form input,
.jc-form select,
.jc-form textarea {
	width: 100%;
	border: 1px solid var(--jc-border);
	border-radius: var(--jc-radius-sm);
	padding: 15px 18px;
	background: #fff;
	transition: border-color .3s var(--jc-ease);
}
.jc-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 44px;
	cursor: pointer;
	color: var(--jc-ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8177' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
}
.jc-form input:focus,
.jc-form select:focus,
.jc-form textarea:focus {
	outline: none;
	border-color: var(--jc-ink);
}
.jc-form textarea { resize: vertical; }
.jc-form button { align-self: flex-start; }
.jc-form-notice { padding: 15px 20px; border: 1px solid transparent; margin-bottom: 24px; }
.jc-form-notice--success { background: #eef3ec; border-color: #b9d0b1; color: #33502c; }
.jc-form-notice--error { background: #f7ecea; border-color: #dbb2a8; color: #7a3324; }

/* ---- Tarieven / packages --------------------------------------------------- */
.jc-packages { padding-top: 24px; }
.jc-packages__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	margin-top: 48px;
	align-items: stretch;
	background: var(--jc-border);
	border: 1px solid var(--jc-border);
}
@media (min-width: 640px) {
	.jc-packages__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1180px) {
	.jc-packages__list { grid-template-columns: repeat(4, 1fr); }
	.jc-package--afstyling { grid-column: 1 / -1; }
}

.jc-package {
	padding: 36px 30px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: var(--jc-tint-bronze-bg);
}
.jc-package__name { font-family: var(--jc-font-body); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 1rem; color: var(--jc-ink); }
.jc-package__disclaimer { margin-top: 10px; font-size: .82rem; color: var(--jc-text-light); }
.jc-package__body { flex: 1; }
.jc-package__features li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 12px;
	color: var(--jc-ink);
}
.jc-package__features li::before {
	content: '—';
	position: absolute;
	left: 0; top: 0;
	color: var(--jc-taupe-dark);
}
.jc-package__price { font-family: var(--jc-font-display); font-size: 2rem; color: var(--jc-ink); display: flex; align-items: baseline; gap: 8px; justify-content: flex-start; }
.jc-package__price-prefix { font-family: var(--jc-font-body); font-size: .95rem; color: var(--jc-text-light); }
.jc-package__cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.jc-package__btn { background: var(--jc-ink); color: #fff; justify-content: center; border-color: var(--jc-ink); }
.jc-package__btn:hover { background: transparent; color: var(--jc-ink); }

.jc-package--bronze { background: var(--jc-tint-bronze-bg); }
.jc-package--silver { background: var(--jc-tint-silver-bg); }
.jc-package--gold { background: var(--jc-tint-gold-bg); }
.jc-package--diamond { background: var(--jc-tint-diamond-bg); }
.jc-package--afstyling { background: var(--jc-tint-afstyling-bg); }

@media (min-width: 640px) {
	.jc-package--afstyling { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	.jc-package--afstyling .jc-package__meta { flex: 0 0 200px; }
	.jc-package--afstyling .jc-package__body { flex: 1 1 320px; }
	.jc-package--afstyling .jc-package__cta { flex: 0 0 auto; flex-direction: row; align-items: center; }
	.jc-package--afstyling .jc-package__btn { align-self: auto; }
}

/* ---- Lightbox --------------------------------------------------------------- */
.jc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(20, 15, 10, .93);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s var(--jc-ease);
}
.jc-lightbox.is-open { opacity: 1; pointer-events: auto; }
.jc-lightbox > div {
	transform: scale(.97);
	transition: transform .4s var(--jc-ease);
}
.jc-lightbox.is-open > div { transform: none; }
.jc-lightbox img { max-width: min(90vw, 1100px); max-height: 85vh; object-fit: contain; }
.jc-lightbox__caption { color: #fff; text-align: center; margin-top: 16px; font-family: var(--jc-font-italic); font-style: italic; font-size: 1.2rem; }
.jc-lightbox__close {
	position: absolute; top: 24px; right: 24px; color: #fff; width: 40px; height: 40px;
	border: 1px solid rgba(255,255,255,.4);
	display: flex; align-items: center; justify-content: center;
	transition: background .3s var(--jc-ease), transform .3s var(--jc-ease);
}
.jc-lightbox__close:hover { background: rgba(255,255,255,.12); transform: rotate(90deg); }
.jc-lightbox__close .jc-icon { width: 18px; height: 18px; }

/* ---- Misc ---------------------------------------------------------------- */
.jc-single-thumb img { margin-bottom: 32px; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
}