/* ==========================================================================
   Ohana Poké & More
   ========================================================================== */

/* Fonts ------------------------------------------------------------------- */
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-600-normal.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2'); font-weight: 700 800; font-display: swap; }
@font-face { font-family: 'Allison'; src: url('../fonts/allison-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* Tokens ------------------------------------------------------------------ */
:root {
	--c-green: #0F3D3A;
	--c-sage: #A7C4B7;
	--c-mint: #E8F5F0;
	--c-pink: #F6C1C3;
	--c-coral: #E07C73;
	--c-cream: #FFF8F3;
	--c-beige: #F4EDE7;
	--c-dark: #0F2D28;
	--c-white: #FFFFFF;
	--c-band: #D3E3DC;
	--c-coral-dark: #D2665D;
	--c-muted: rgba(15, 45, 40, .72);

	--ff-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--ff-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ff-script: 'Allison', 'Brush Script MT', cursive;

	--container: 1240px;
	--gutter: clamp(20px, 5vw, 40px);
	--header-h: 96px;
	--section-y: clamp(72px, 8.5vw, 124px);

	--ease: cubic-bezier(.22, .61, .36, 1);
	--shadow-card: 0 14px 40px -18px rgba(15, 45, 40, .22);
}

@media (max-width: 1100px) { :root { --header-h: 78px; } }
@media (max-width: 600px)  { :root { --header-h: 70px; } }

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
	margin: 0;
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--c-dark);
	background: var(--c-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
input, select, textarea { font: inherit; }
/* Geen overgangsanimaties tijdens resizen/draaien (voorkomt flitsende dropdowns rond breekpunten) */
.is-resizing *, .is-resizing *::before, .is-resizing *::after { transition: none !important; }
:focus-visible { outline: 2px solid var(--c-coral); outline-offset: 3px; }
::selection { background: var(--c-pink); color: var(--c-dark); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 12px 18px; background: var(--c-green); color: #fff; transform: translateY(-200%); transition: transform .2s; }
.skip-link:focus { transform: none; }

/* Layout ------------------------------------------------------------------ */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(820px + var(--gutter) * 2); }
.site-main { padding-top: var(--header-h); }
.block { position: relative; }

/* Typography -------------------------------------------------------------- */
.h1, .h2, .h3, .content h2, .content h3 { font-family: var(--ff-head); font-weight: 500; color: var(--c-dark); letter-spacing: -.012em; }
.h1 { font-size: clamp(3rem, 6.6vw, 6rem); line-height: .98; }
.h2 { font-size: clamp(2.5rem, 4.7vw, 4.3rem); line-height: 1.02; margin-bottom: clamp(20px, 2vw, 28px); }
.h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; }

.eyebrow {
	font-size: 12px;
	font-weight: 500;
	line-height: 2.1;
	letter-spacing: .44em;
	text-transform: uppercase;
	color: var(--c-dark);
	margin-bottom: clamp(14px, 1.6vw, 22px);
}
.script { font-family: var(--ff-script); font-weight: 400; letter-spacing: 0; text-transform: none; }
.lead { font-size: 18px; max-width: 560px; margin-top: 20px; }

.content { font-size: 16px; }
.content > * + * { margin-top: 1.1em; }
.content h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; margin-top: 1.6em; }
.content h3 { font-size: 1.5rem; margin-top: 1.4em; }
.content a { color: var(--c-coral-dark); text-decoration: underline; text-underline-offset: 3px; }
.content ul { list-style: disc; padding-left: 1.2em; }
.content ol { list-style: decimal; padding-left: 1.2em; }
.content img { border-radius: 3px; }

/* Buttons ----------------------------------------------------------------- */
.btn-group { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 24px); }
.btn {
	--btn-bg: var(--c-coral);
	--btn-fg: #fff;
	--btn-bd: var(--c-coral);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 54px;
	padding: 0 30px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--btn-fg);
	background: var(--btn-bg);
	border: 1.5px solid var(--btn-bd);
	border-radius: 2px;
	overflow: hidden;
	isolation: isolate;
	transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-hover, var(--c-coral-dark));
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn__icon { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
.btn:hover .btn__icon { transform: translateX(4px); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--c-green); --btn-bd: var(--c-green); --btn-hover: var(--c-green); }
.btn--outline:hover, .btn--outline:focus-visible { --btn-fg: #fff; }
.btn--secondary { --btn-bg: #7FA898; --btn-bd: #7FA898; --btn-hover: var(--c-green); }
.btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.8); --btn-hover: #fff; }
.btn--light:hover { --btn-fg: var(--c-green); }
.btn--sm { min-height: 46px; padding: 0 22px; font-size: 11.5px; gap: 14px; }
.experience .btn--outline { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.85); --btn-hover: #fff; }
.experience .btn--outline:hover { --btn-fg: var(--c-green); }

/* Icons ------------------------------------------------------------------- */
.icon { width: 1em; height: 1em; }
.decor { pointer-events: none; }

/* Logo -------------------------------------------------------------------- */
.logo { display: inline-flex; flex-direction: column; align-items: center; color: var(--c-green); font-size: 40px; line-height: 1; flex: none; }
.logo__word { display: flex; align-items: center; }
.logo__mark { width: .98em; height: .98em; margin-right: .04em; }
.logo__letters { font-family: var(--ff-body); font-weight: 400; letter-spacing: .015em; line-height: .86; }
.logo__sub { padding-left: .9em; margin-top: .26em; font-size: max(8.5px, .225em); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--c-green); }
.logo__img { width: auto; max-height: 58px; }
.logo--light, .logo--light .logo__sub { color: #fff; }

/* Header ------------------------------------------------------------------ */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--header-h);
	background: var(--c-cream);
	transition: transform .45s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px -18px rgba(15, 45, 40, .35); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 100%; }

.site-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.nav__menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav__menu > li { position: relative; display: flex; align-items: center; gap: 4px; }
.nav__menu > li > a {
	position: relative;
	display: block;
	padding: 10px 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-dark);
}
.nav__menu > li > a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 3px;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .35s var(--ease);
}
.nav__menu > li:hover > a::after,
.nav__menu > li > a:focus-visible::after,
.nav__menu > .current-menu-item > a::after,
.nav__menu > .current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left; }
.nav__toggle { display: grid; place-items: center; width: 16px; height: 16px; }
.nav__toggle .icon { width: 12px; height: 12px; transition: transform .3s var(--ease); }

.nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -22px;
	min-width: 230px;
	padding: 14px 0;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 24px 50px -24px rgba(15, 45, 40, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.nav__menu .sub-menu::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 14px; }
.nav__menu > li:hover > .sub-menu,
.nav__menu > li:focus-within > .sub-menu,
.nav__menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__menu > li:hover > .nav__toggle .icon,
.nav__menu > li.is-open > .nav__toggle .icon { transform: rotate(180deg); }
.nav__menu .sub-menu a { display: block; padding: 9px 24px; font-size: 14px; font-weight: 500; color: var(--c-dark); transition: color .2s, padding .3s var(--ease); }
.nav__menu .sub-menu a:hover, .nav__menu .sub-menu .current-menu-item > a { color: var(--c-coral-dark); padding-left: 30px; }

.socials { display: flex; align-items: center; gap: 14px; }
.socials a { display: grid; place-items: center; width: 26px; height: 26px; transition: color .25s, transform .25s var(--ease); }
.socials a:hover { color: var(--c-coral); transform: translateY(-2px); }
.socials .icon { width: 21px; height: 21px; }
.socials--lg { gap: 26px; }
.socials--lg a { width: 36px; height: 36px; }
.socials--lg .icon { width: 34px; height: 34px; }

.site-nav__actions { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }

.burger { display: none; width: 46px; height: 46px; margin-right: -10px; place-items: center; }
.burger__lines { position: relative; display: block; width: 26px; height: 16px; }
.burger__lines span { position: absolute; left: 0; height: 1.8px; width: 100%; background: var(--c-dark); border-radius: 2px; transition: transform .4s var(--ease), opacity .3s, width .3s var(--ease); }
.burger__lines span:nth-child(1) { top: 0; }
.burger__lines span:nth-child(2) { top: 7px; }
.burger__lines span:nth-child(3) { top: 14px; width: 65%; }
.nav-open .burger__lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .burger__lines span:nth-child(2) { opacity: 0; }
.nav-open .burger__lines span:nth-child(3) { width: 100%; transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
	.burger { display: grid; position: relative; z-index: 2; }
	.site-nav {
		position: fixed;
		inset: var(--header-h) 0 0;
		z-index: 1;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		gap: 40px;
		padding: 28px var(--gutter) calc(32px + env(safe-area-inset-bottom));
		background: var(--c-cream);
		overflow-y: auto;
		overscroll-behavior: contain;
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		transition: clip-path .6s var(--ease), visibility 0s .6s;
	}
	.nav-open .site-nav { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
	.nav-open { overflow: hidden; }
	.nav-open .site-header { transform: none; box-shadow: none; }

	.nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__menu > li { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid rgba(15, 45, 40, .1); }
	.nav__menu > li > a { padding: 16px 0; font-family: var(--ff-head); font-size: clamp(1.7rem, 6vw, 2.2rem); font-weight: 500; letter-spacing: 0; text-transform: none; }
	.nav__menu > li > a::after { display: none; }
	.nav__toggle { width: 44px; height: 44px; }
	.nav__toggle .icon { width: 18px; height: 18px; }
	.nav__menu .sub-menu {
		position: static; flex-basis: 100%; min-width: 0; padding: 0 0 0 4px;
		background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none;
		max-height: 0; overflow: hidden; transition: max-height .45s var(--ease), padding .3s;
	}
	.nav__menu .sub-menu::before { display: none; }
	.nav__menu > li.is-open > .sub-menu { max-height: 600px; padding-bottom: 14px; }
	.nav__menu > li:hover > .nav__toggle .icon { transform: none; }
	.nav__menu > li.is-open > .nav__toggle .icon { transform: rotate(180deg); }
	.nav__menu .sub-menu a { padding: 8px 0; font-size: 16px; }
	.nav__menu .sub-menu a:hover { padding-left: 6px; }

	.site-nav__actions { flex-direction: column; align-items: stretch; gap: 26px; }
	.site-nav__actions .btn { width: 100%; min-height: 54px; }
	.site-nav__actions .socials { gap: 22px; }
	.site-nav__actions .socials .icon { width: 26px; height: 26px; }
	.logo { font-size: 32px; }
}

@media (max-width: 600px) { .logo { font-size: 28px; } }

/* ==========================================================================
   Blok: Hero
   ========================================================================== */
.hero {
	min-height: clamp(560px, 47vw, 720px);
	display: flex;
	align-items: center;
	z-index: 2;
}
.hero__media { position: absolute; top: 0; right: 0; bottom: 0; left: 32%; overflow: hidden; }
.hero__image { position: absolute; inset: -6% 0; }
.hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(15, 45, 40, .25), transparent 40%); pointer-events: none; }

.hero__panel {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 46%;
	background: linear-gradient(180deg, #FCF1EC 0%, var(--c-cream) 100%);
	border-top-right-radius: 17.5% 56%;
}

.hero__inner { position: relative; z-index: 2; padding-block: clamp(56px, 6vw, 90px); }
.hero__content { max-width: min(500px, 40vw); }
.hero__eyebrow { margin-bottom: clamp(16px, 1.9vw, 28px); }
.hero__title {
	position: relative;
	margin-bottom: clamp(18px, 2vw, 30px);
	font-family: var(--ff-head);
	font-size: clamp(3.6rem, 7.4vw, 6.9rem);
	font-weight: 500;
	line-height: .9;
	letter-spacing: -.02em;
	color: var(--c-dark);
}
.line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line__inner { display: block; }
.hero__script {
	display: block;
	width: max-content;
	margin: -.36em 0 0 -.06em;
	font-size: 1.72em;
	line-height: 1;
	color: var(--c-coral);
	transform: rotate(-7deg);
	transform-origin: 0 50%;
	position: relative;
	z-index: 1;
}
.hero__text { max-width: 440px; margin-bottom: clamp(26px, 2.8vw, 40px); font-size: 17px; line-height: 1.75; }

.hero__image-script {
	position: absolute;
	top: 13%;
	right: 6%;
	font-size: clamp(2.6rem, 4.4vw, 4.4rem);
	line-height: .78;
	color: #fff;
	transform: rotate(-14deg);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
.hero__image-script-line { width: 44%; margin: .1em 0 0 34%; color: #fff; }

.hero__brush {
	position: absolute;
	right: clamp(-70px, -3.5vw, -30px);
	bottom: clamp(-130px, -7.5vw, -70px);
	z-index: 3;
	width: clamp(220px, 21vw, 310px);
	height: auto;
	transform: rotate(-34deg);
	opacity: .95;
}

@media (max-width: 900px) {
	.hero { flex-direction: column; align-items: stretch; min-height: 0; }
	.hero__panel { display: none; }
	.hero__inner { order: 1; padding-block: 44px 46px; }
	.hero__content { max-width: 560px; }
	.hero__media { position: relative; order: 2; left: auto; height: clamp(340px, 78vw, 560px); border-top-left-radius: 62% 20%; }
	.hero__title { font-size: clamp(3.4rem, 15vw, 5.6rem); }
	.hero__brush { right: -40px; bottom: -80px; width: clamp(170px, 44vw, 230px); }
	.hero__image-script { top: 20%; font-size: clamp(2.4rem, 10vw, 3.6rem); }
}

/* ==========================================================================
   Blok: Locaties
   ========================================================================== */
.locations { padding-block: var(--section-y) clamp(56px, 6vw, 84px); }
.locations__head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	gap: 20px 48px;
	margin-bottom: clamp(32px, 4vw, 52px);
}
.locations__head .h2 { margin-bottom: 0; }
.locations__intro {
	position: relative;
	padding-left: 32px;
	margin-top: clamp(20px, 3vw, 44px);
	font-size: 15px;
	line-height: 1.7;
	max-width: 340px;
}
.locations__intro::before { content: ''; position: absolute; left: 0; top: .85em; width: 22px; height: 1px; background: currentColor; }

.locations__grid {
	--gap: clamp(14px, 1.6vw, 24px);
	display: grid;
	grid-template-columns: repeat(min(var(--count, 4), 4), minmax(0, 1fr));
	gap: var(--gap);
	max-width: 1560px;
	margin-inline: auto;
	padding-inline: clamp(14px, 2vw, 28px);
}

.loc-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.loc-card__link:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(15, 45, 40, .35); }
.loc-card__media { aspect-ratio: 1 / 1.02; overflow: hidden; background: var(--c-beige); }
.loc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.loc-card__link:hover .loc-card__media img { transform: scale(1.06); }
.loc-card__body { position: relative; flex: 1; padding: clamp(20px, 1.9vw, 28px) clamp(18px, 1.8vw, 26px) clamp(20px, 1.8vw, 26px); padding-right: 64px; }
.loc-card__title { margin-bottom: 12px; font-size: clamp(14px, 1.15vw, 16.5px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.loc-card__address { font-size: 13px; line-height: 1.6; color: var(--c-muted); }
.loc-card__arrow {
	position: absolute;
	right: clamp(16px, 1.6vw, 24px);
	bottom: clamp(20px, 1.8vw, 26px);
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--c-dark);
	border-radius: 50%;
	transition: background-color .3s, color .3s, border-color .3s;
}
.loc-card__arrow .icon { width: 14px; height: 14px; }
.loc-card__link:hover .loc-card__arrow { background: var(--c-coral); border-color: var(--c-coral); color: #fff; }

@media (max-width: 1100px) {
	.locations__head { grid-template-columns: 1fr; }
	.locations__intro { margin-top: 0; }
	.locations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: var(--gutter); }
}

/* Mobiel: compacte lijst, zodat alle locaties direct zichtbaar zijn */
@media (max-width: 700px) {
	.locations__grid { grid-template-columns: 1fr; gap: 12px; }
	.loc-card__link { flex-direction: row; align-items: stretch; }
	.loc-card__link:hover { transform: none; }
	.loc-card__media { flex: none; width: 112px; aspect-ratio: auto; min-height: 104px; }
	.loc-card__body { display: flex; flex-direction: column; justify-content: center; padding: 16px 58px 16px 18px; }
	.loc-card__title { margin-bottom: 4px; font-size: 14.5px; }
	.loc-card__address { font-size: 12.5px; line-height: 1.5; }
	.loc-card__arrow { top: 50%; bottom: auto; right: 16px; transform: translateY(-50%); background: var(--c-coral); border-color: var(--c-coral); color: #fff; }
}

/* ==========================================================================
   Locatiepagina: menukaarten
   ========================================================================== */
.location-intro__text { max-width: 480px; margin: -6px 0 28px; font-size: 16px; line-height: 1.75; }
.menus { padding-block: clamp(30px, 4vw, 60px) var(--section-y); }
.menus__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(28px, 3.4vw, 46px); }
.menus__head .h2 { margin-bottom: 0; }
.menus__allergens { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1.5px solid currentColor; transition: color .25s; }
.menus__allergens span { font-weight: 500; opacity: .6; }
.menus__allergens .icon { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.menus__allergens:hover { color: var(--c-coral-dark); }
.menus__allergens:hover .icon { transform: translateX(4px); }
.menus__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.menu-card__link { display: block; height: 100%; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.menu-card__link:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(15, 45, 40, .35); }
.menu-card__media { aspect-ratio: 416 / 278; overflow: hidden; background: var(--c-mint); }
.menu-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.menu-card__link:hover .menu-card__media img { transform: scale(1.05); }
.menu-card__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; }
.menu-card__title { font-family: var(--ff-head); font-size: 1.45rem; font-weight: 500; line-height: 1.2; }
.menu-card__cta { display: inline-flex; flex: none; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-coral-dark); }
.menu-card__cta .icon { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.menu-card__link:hover .menu-card__cta .icon { transform: translateX(4px); }

/* ==========================================================================
   Blok: USP-balk
   ========================================================================== */
.usps { color: var(--c-band); background: var(--c-band); padding-block: clamp(38px, 3.8vw, 50px) clamp(30px, 3vw, 42px); margin-bottom: 26px; }
.usps__list { display: grid; grid-template-columns: repeat(var(--usp-count, 4), minmax(0, 1fr)); color: var(--c-dark); }
.usp { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 16px; text-align: center; }
.usp + .usp::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 8%; width: 1px; background: rgba(15, 45, 40, .28); }
.usp__icon { display: grid; place-items: center; height: 54px; margin-bottom: 14px; color: var(--c-dark); }
.usp__icon .icon { width: 50px; height: 50px; }
.usp__icon img { width: 50px; height: 50px; object-fit: contain; }
.usp__title { font-size: 12.5px; font-weight: 700; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; }
.usp__text { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.usps__edge { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 28px; }

@media (max-width: 800px) {
	.usps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
	.usp:nth-child(odd)::before { display: none; }
}

/* ==========================================================================
   Blok: Tekst + fotocollage
   ========================================================================== */
.collage { padding-block: var(--section-y); overflow: clip; }
.collage__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 6vw, 90px); }
.collage__content { max-width: 500px; }
.collage__text { margin-bottom: clamp(28px, 3vw, 40px); font-size: 16px; line-height: 1.75; }
.collage--reverse .collage__content { order: 2; }

.collage__media { position: relative; aspect-ratio: 352 / 279; margin-right: calc(var(--gutter) * -.25); }
.collage__media > * { position: absolute; }
.collage__img { overflow: hidden; background: var(--c-beige); }
.collage__img img { width: 100%; height: 100%; object-fit: cover; }
.collage__shape--pink { left: 7%; top: 9.7%; width: 46%; height: 42%; background: var(--c-pink); z-index: 1; }
.collage__img--side { left: 53%; top: 0; width: 47%; height: 76.3%; z-index: 2; }
.collage__img--main { left: 0; top: 21%; width: 68.2%; height: 79%; z-index: 3; box-shadow: 0 30px 60px -30px rgba(15, 45, 40, .45); border-radius: 2px; }
.collage__shape--pink-sm { left: 68.2%; top: 76.3%; width: 8%; height: 14.6%; background: var(--c-pink); z-index: 1; }
.collage__shape--mint { left: 76.2%; top: 76.3%; width: 17.8%; height: 14.6%; background: #BCD4CA; z-index: 1; }
.collage__leaf { left: 80%; top: 71%; width: 13%; height: auto; color: var(--c-green); z-index: 4; }

@media (max-width: 900px) {
	.collage__grid { grid-template-columns: 1fr; }
	.collage--reverse .collage__content { order: 0; }
	.collage__media { width: min(100%, 620px); margin-inline: auto; }
}

/* ==========================================================================
   Blok: Sfeerbanner
   ========================================================================== */
.experience {
	display: flex;
	align-items: center;
	min-height: clamp(520px, 43vw, 640px);
	padding-block: clamp(70px, 7vw, 100px);
	color: #fff;
	background: #12211C;
	overflow: hidden;
	isolation: isolate;
}
.experience__bg { position: absolute; inset: -12% 0; z-index: -2; }
.experience__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 38%; }
.experience--focus-center .experience__bg img { object-position: center; }
.experience--focus-left .experience__bg img { object-position: 20% 50%; }
.experience::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(14, 30, 24, .94) 0%, rgba(14, 30, 24, .82) 26%, rgba(14, 30, 24, .35) 50%, rgba(14, 30, 24, 0) 68%),
		linear-gradient(0deg, rgba(14, 30, 24, .35), transparent 30%);
}
.experience__content { max-width: 540px; }
.experience .eyebrow, .experience .h2 { color: #fff; }
.experience__text { margin-bottom: clamp(28px, 3vw, 40px); font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .92); }
.experience__edge { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(14px, 1.8vw, 26px); color: var(--c-cream); filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, .18)); }

@media (max-width: 900px) {
	.experience { align-items: flex-end; min-height: clamp(560px, 130vw, 720px); }
	.experience::before { background: linear-gradient(0deg, rgba(14, 30, 24, .95) 0%, rgba(14, 30, 24, .8) 45%, rgba(14, 30, 24, .1) 80%); }
	.experience__bg img { object-position: 78% 50%; }
}

/* ==========================================================================
   Blok: Afbeelding + call-to-action
   ========================================================================== */
.split { display: grid; grid-template-columns: 52% 48%; min-height: clamp(440px, 36vw, 560px); background: var(--c-cream); overflow: hidden; }
.split__media { position: relative; overflow: hidden; min-height: 320px; background: var(--c-beige); }
.split__image { position: absolute; inset: -6% 0; }
.split__image img { width: 100%; height: 100%; object-fit: cover; }
.split__wave { position: absolute; left: 0; bottom: -1px; width: 92%; height: clamp(46px, 5vw, 80px); color: #BCD4CA; opacity: .92; z-index: 1; }
.split__content { position: relative; display: flex; align-items: center; padding: clamp(60px, 7vw, 100px) var(--gutter) clamp(70px, 7vw, 100px) clamp(40px, 6.6vw, 96px); }
.split__inner { position: relative; z-index: 2; max-width: 470px; }
.split__text { margin-bottom: clamp(28px, 3vw, 38px); font-size: 16px; line-height: 1.75; }
.split__leaf { position: absolute; top: -6px; right: -10px; width: clamp(120px, 13vw, 190px); color: var(--c-green); opacity: .9; }
.split__blob { position: absolute; right: 0; bottom: 0; width: clamp(150px, 18vw, 260px); z-index: 0; }
.split--image-right .split__media { order: 2; }
.split--image-right .split__wave { left: auto; right: 0; transform: scaleX(-1); }

@media (max-width: 900px) {
	.split { grid-template-columns: 1fr; }
	.split__media { aspect-ratio: 4 / 3; min-height: 0; }
	.split--image-right .split__media { order: 0; }
	.split__content { padding: 64px var(--gutter) 96px; }
}

/* ==========================================================================
   Blok: Tekst / pagina-intro / locatie
   ========================================================================== */
.block-text { padding-block: var(--section-y); }
.block-text--center { text-align: center; }
.block-text--center .content ul, .block-text--center .content ol { text-align: left; display: inline-block; }

.page-intro { position: relative; padding-block: clamp(80px, 10vw, 150px) clamp(40px, 5vw, 70px); overflow: hidden; }
.page-intro__leaf { position: absolute; right: 6%; bottom: -30px; width: clamp(80px, 9vw, 130px); color: var(--c-green); opacity: .7; }

.location-intro { padding-block: clamp(50px, 6vw, 90px); }
.location-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.location-intro .h1 { margin-bottom: 30px; }
.location-meta { display: grid; gap: 14px; margin-bottom: 26px; }
.location-meta li { display: flex; gap: 14px; align-items: flex-start; }
.location-meta .icon { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--c-coral); }
.location-meta__route { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-coral-dark); }
.location-meta__route .icon { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.location-meta__route:hover .icon { transform: translateX(4px); }
.location-meta li > span { display: flex; flex-direction: column; align-items: flex-start; }
.location-hours { display: grid; gap: 6px; max-width: 380px; padding: 22px 0; margin-bottom: 34px; border-block: 1px solid rgba(15, 45, 40, .14); font-size: 15px; }
.location-hours div { display: flex; justify-content: space-between; gap: 20px; }
.location-hours dt { font-weight: 600; }
.location-intro__media { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3.4; }
.location-intro__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .location-intro__grid { grid-template-columns: 1fr; } }

.post-list { display: grid; gap: 30px; }
.post-list__item a { display: block; padding-bottom: 30px; border-bottom: 1px solid rgba(15, 45, 40, .12); }
.post-list__item .h3 { margin-bottom: 8px; transition: color .25s; }
.post-list__item a:hover .h3 { color: var(--c-coral-dark); }

/* ==========================================================================
   Blok: Formulier (Gravity Forms)
   ========================================================================== */
.form-block { padding-block: var(--section-y); overflow: clip; }
.form-block__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.form-block__content { position: relative; padding-top: clamp(0px, 2vw, 24px); }
.form-block__text { max-width: 440px; margin-bottom: clamp(28px, 3vw, 40px); font-size: 16px; line-height: 1.75; }
.form-block__details { display: grid; gap: 18px; }
.form-block__details li { display: flex; gap: 14px; align-items: flex-start; }
.form-block__details .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--c-coral); }
.form-block__details span { display: flex; flex-direction: column; font-size: 15px; line-height: 1.5; }
.form-block__details strong { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.form-block__details a { transition: color .25s; }
.form-block__details a:hover { color: var(--c-coral-dark); }
.form-block__leaf { position: absolute; left: -10px; bottom: -150px; width: clamp(70px, 7vw, 100px); color: var(--c-green); opacity: .55; }
.form-block__card { position: relative; padding: clamp(28px, 4vw, 56px); background: #fff; border-radius: 4px; box-shadow: var(--shadow-card); }
.form-block__aside { position: relative; isolation: isolate; }
.form-block__aside::before { content: ''; position: absolute; z-index: -1; right: -18px; bottom: -18px; width: min(40%, 220px); height: min(30%, 160px); background: var(--c-pink); }

/* Gravity Forms velden */
.gform_wrapper .gform_validation_container, .gform_wrapper .gform_hidden, .gform_wrapper [style*="display:none"] { display: none !important; }
.gform_wrapper .gform_fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px 20px; }
.gform_wrapper .gfield { grid-column: span 12; min-width: 0; }
.gform_wrapper .gfield--width-half { grid-column: span 6; }
.gform_wrapper .gfield--width-third { grid-column: span 4; }
.gform_wrapper .gfield_label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-dark); }
.gform_wrapper .gfield_required { margin-left: 3px; color: var(--c-coral-dark); }
.gform_wrapper input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	min-height: 54px;
	padding: 14px 18px;
	font-size: 15px;
	color: var(--c-dark);
	background: var(--c-cream);
	border: 1.5px solid transparent;
	border-bottom-color: rgba(15, 45, 40, .25);
	border-radius: 2px;
	transition: border-color .25s, background-color .25s, box-shadow .25s;
	-webkit-appearance: none;
	appearance: none;
}
.gform_wrapper textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.gform_wrapper select {
	padding-right: 48px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2D28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 16px;
}
.gform_wrapper ::placeholder { color: rgba(15, 45, 40, .42); }
.gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus { outline: none; background-color: #fff; border-color: var(--c-coral); box-shadow: 0 0 0 4px rgba(224, 124, 115, .15); }
.gform_wrapper .gfield_description:not(.validation_message) { margin-top: 6px; font-size: 13px; color: var(--c-muted); }
.gform_wrapper .gform_footer { margin-top: 30px; display: flex; align-items: center; gap: 16px; }
.gform_wrapper .gform_ajax_spinner { width: 22px; height: 22px; }

/* Validatie */
.gform_wrapper .gform_validation_errors { margin-bottom: 26px; padding: 16px 20px; background: #FDECEA; border-left: 3px solid var(--c-coral-dark); border-radius: 2px; }
.gform_wrapper .gform_validation_errors h2 { font-family: var(--ff-body); font-size: 14px; font-weight: 600; color: var(--c-coral-dark); }
.gform_wrapper .gform_validation_errors ol { display: none; }
.gform_wrapper .gfield_error input, .gform_wrapper .gfield_error select, .gform_wrapper .gfield_error textarea { border-bottom-color: var(--c-coral-dark); background: #FFF5F4; }
.gform_wrapper .validation_message { margin-top: 6px; font-size: 13px; color: var(--c-coral-dark); }
.gform_confirmation_message { padding: 30px 0; font-family: var(--ff-head); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3; color: var(--c-dark); }

@media (max-width: 900px) {
	.form-block__grid { grid-template-columns: 1fr; }
	.form-block__leaf { display: none; }
	.form-block__aside::before { right: -10px; bottom: -10px; }
}
@media (max-width: 560px) {
	.gform_wrapper .gfield--width-half { grid-column: span 12; }
	.form-block__aside { margin-inline: calc(var(--gutter) * -.4); }
	.gform_wrapper .gform_footer .btn { width: 100%; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; color: rgba(255, 255, 255, .86); background: var(--c-green); overflow: hidden; }
.site-footer__leaf { position: absolute; top: -10px; right: -30px; width: clamp(140px, 13vw, 210px); color: rgba(255, 255, 255, .32); }
.site-footer__top {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .95fr) minmax(0, 1.25fr);
	gap: 40px clamp(28px, 4vw, 56px);
	padding-block: clamp(64px, 6vw, 84px) clamp(56px, 5.4vw, 78px);
}
.site-footer .logo { font-size: 42px; }
.site-footer__text { margin: 28px 0 32px; font-size: 14px; line-height: 1.8; max-width: 340px; }
.footer-title {
	position: relative;
	margin: 8px 0 22px;
	font-family: var(--ff-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
}
.footer-title::before { content: ''; position: absolute; right: calc(100% + 10px); top: 50%; width: 22px; height: 1px; background: rgba(255, 255, 255, .55); }
.footer-menu li + li { margin-top: 4px; }
.footer-menu a { font-size: 14.5px; line-height: 1.75; transition: color .25s, padding .3s var(--ease); }
.footer-menu a:hover, .footer-menu .current-menu-item > a { color: var(--c-pink); }
.site-footer__newsletter p { font-size: 14.5px; line-height: 1.75; }
.newsletter { display: flex; max-width: 340px; height: 52px; margin-top: 22px; border-radius: 2px; overflow: hidden; }
.newsletter input { flex: 1; min-width: 0; padding: 0 18px; color: var(--c-dark); background: #fff; border: 0; font-size: 14px; }
.newsletter input::placeholder { color: rgba(15, 45, 40, .45); }
.newsletter input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-coral); }
.newsletter button { display: grid; place-items: center; width: 54px; flex: none; color: #fff; background: var(--c-coral); transition: background-color .3s; }
.newsletter button:hover { background: var(--c-coral-dark); }
.newsletter button .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.newsletter button:hover .icon { transform: translateX(3px); }
.newsletter__message { margin-top: 12px; font-size: 14px; color: var(--c-pink); }

.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 30px; padding-block: 26px; font-size: 13px; }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; }
.legal-menu { display: flex; flex-wrap: wrap; }
.legal-menu li::after { content: '|'; margin: 0 14px; opacity: .6; }
.site-footer__copy { display: flex; flex-wrap: wrap; gap: 4px 0; }
.site-footer__credits::before { content: '|'; margin: 0 14px; opacity: .6; }
.site-footer__credits a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; transition: color .25s, text-decoration-color .25s; }
.site-footer__credits a:hover { color: var(--c-pink); text-decoration-color: currentColor; }
.legal-menu li:last-child::after { content: none; }
.site-footer__legal a:hover { color: var(--c-pink); }
@media (max-width: 560px) { .site-footer__copy { flex-direction: column; } .site-footer__credits::before { content: none; } }

@media (max-width: 1000px) {
	.site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
	.footer-title::before { position: static; display: inline-block; vertical-align: middle; margin-right: 10px; }
}
@media (max-width: 560px) {
	.site-footer__top { grid-template-columns: 1fr; }
	.site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Animatie-startstaten (alleen als JS draait en beweging gewenst is)
   ========================================================================== */
.js:not(.reduced-motion) [data-anim],
.js:not(.reduced-motion) .hero__content .eyebrow,
.js:not(.reduced-motion) [data-hero-vibes],
.js:not(.reduced-motion) [data-hero-script] { opacity: 0; }
.js:not(.reduced-motion) .hero__title .line__inner { transform: translateY(105%); }
.js:not(.reduced-motion) [data-card] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}