/*
Theme Name: Birds Unlimited
Theme URI: https://birdsunlimited.nl
Description: Child theme of Backpack Traveler for birdsunlimited.nl. Paper neutrals with three tones (bordeaux, mos, oker), Bricolage Grotesque for headings and Albert Sans for text, own header, title band, service cards, contact form and footer.
Author: OK Creative Agency
Template: backpacktraveler
Version: 1.2.0
Text Domain: birdsunlimited
*/

/* ------------------------------------------------------------------
   Palette

   The page is paper. Three neutrals carry every section: papier (the
   light surface), zand (the warm band) and lijn (rules, underlines).
   Colour is an event, and it comes in three tones, one per service,
   so the services read as a set of three cards from one collection:

     bordeaux  #712026  the brand colour, also every primary action
     mos       #35503f  deep moss green
     oker      #c9962e  warm ochre

   Each tone is a scheme: [data-tone] sets --tone, --tone-deep (hover),
   --tone-tint (a wash of it on paper) and --tone-ink, the colour that
   writes on it. Papier writes on bordeaux and mos; oker is light, so
   inkt writes on oker. Every pairing clears 4.5:1.
   ------------------------------------------------------------------ */
:root {
	/* Neutrals */
	--bu-papier: #f6f2ea;
	--bu-zand: #ebe4d4;
	--bu-lijn: #d9ceb8;
	--bu-inkt: #231c1d;
	--bu-grijs: #6b5f61;
	--bu-wit: #ffffff;

	/* Tones */
	--bu-bordeaux: #712026;
	--bu-bordeaux-deep: #561a1e;
	--bu-bordeaux-tint: #efe3e0;
	--bu-mos: #35503f;
	--bu-mos-deep: #27392e;
	--bu-mos-tint: #e3e8e0;
	--bu-oker: #c9962e;
	--bu-oker-deep: #a97a1f;
	--bu-oker-tint: #f3e9d2;

	/* Default scheme: the brand tone */
	--tone: var(--bu-bordeaux);
	--tone-deep: var(--bu-bordeaux-deep);
	--tone-tint: var(--bu-bordeaux-tint);
	--tone-ink: var(--bu-papier);

	/* Type and layout */
	--bu-display: "Bricolage Grotesque", "Albert Sans", "Helvetica Neue", Arial, sans-serif;
	--bu-sans: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
	--bu-wrap: 1160px;
	--bu-gutter: 24px;
	--bu-radius: 8px;
	--bu-section: 104px;
	--bu-measure: 62ch;
	--bu-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Block markup cannot carry data attributes, so the same schemes also
   exist as classes for sections written as blocks */
[data-tone="bordeaux"],
.bu-tone-bordeaux {
	--tone: var(--bu-bordeaux);
	--tone-deep: var(--bu-bordeaux-deep);
	--tone-tint: var(--bu-bordeaux-tint);
	--tone-ink: var(--bu-papier);
}

[data-tone="mos"],
.bu-tone-mos {
	--tone: var(--bu-mos);
	--tone-deep: var(--bu-mos-deep);
	--tone-tint: var(--bu-mos-tint);
	--tone-ink: var(--bu-papier);
}

[data-tone="oker"],
.bu-tone-oker {
	--tone: var(--bu-oker);
	--tone-deep: var(--bu-oker-deep);
	--tone-tint: var(--bu-oker-tint);
	--tone-ink: var(--bu-inkt);
}

@media (max-width: 782px) {
	:root {
		--bu-gutter: 20px;
		--bu-section: 64px;
	}
}

/* ------------------------------------------------------------------
   Base type
   ------------------------------------------------------------------ */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

body {
	font-family: var(--bu-sans);
	font-size: 17px;
	line-height: 1.6;
	color: var(--bu-inkt);
	background: var(--bu-wit);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.mkdf-page-title {
	font-family: var(--bu-display);
	font-weight: 600;
	font-variation-settings: "opsz" 96;
	letter-spacing: -0.025em;
	text-transform: none;
	color: var(--bu-inkt);
	line-height: 1.04;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: clamp(42px, 6vw, 72px); }
h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.06; }
h3 { font-size: clamp(23px, 2.2vw, 27px); line-height: 1.18; letter-spacing: -0.015em; }
h4 { font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; }
h5, h6 { font-size: 18px; line-height: 1.35; letter-spacing: 0; }

p {
	margin: 0 0 1.25em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--bu-bordeaux);
	text-decoration: none;
	transition: color 0.18s var(--bu-ease);
}

a:hover {
	color: var(--bu-bordeaux-deep);
}

strong, b {
	font-weight: 600;
	color: var(--bu-inkt);
}

::selection {
	background: var(--bu-bordeaux);
	color: var(--bu-papier);
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------
   Layout primitives used in page content
   ------------------------------------------------------------------ */
.bu-page {
	overflow: hidden;
}

.bu-wrap {
	max-width: var(--bu-wrap);
	margin: 0 auto;
	padding-left: var(--bu-gutter);
	padding-right: var(--bu-gutter);
	box-sizing: border-box;
}

.bu-section {
	padding: var(--bu-section) 0;
	background: var(--bu-wit);
}

.bu-section.bu-zand {
	background: var(--bu-zand);
}

.bu-section.bu-papier {
	background: var(--bu-papier);
}

/* Two white sections in a row share one gap */
.bu-section:not(.bu-zand):not(.bu-papier):not(.bu-cta) + .bu-section:not(.bu-zand):not(.bu-papier):not(.bu-cta) {
	padding-top: 0;
}

/* Classic theme: Group blocks render an extra inner wrapper. Where a group
   is a grid, let the wrapper fall away so children become grid items. */
.bu-hero-row > .wp-block-group__inner-container,
.bu-service-layout > .wp-block-group__inner-container,
.bu-cta .bu-wrap > .wp-block-group__inner-container,
.bu-cta-action > .wp-block-group__inner-container {
	display: contents;
}

/* Reading column */
.bu-prose {
	max-width: var(--bu-measure);
}

.bu-prose h2 {
	margin-top: 1.6em;
	font-size: clamp(27px, 3vw, 36px);
}

.bu-prose > h2:first-child,
.bu-prose > h3:first-child,
.bu-prose > .wp-block-group__inner-container > h2:first-child,
.bu-prose > .wp-block-group__inner-container > h3:first-child {
	margin-top: 0;
}

.bu-prose h3 {
	margin-top: 1.4em;
}

.bu-prose p a,
.bu-prose li a {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--bu-lijn);
	transition: text-decoration-color 0.18s var(--bu-ease), color 0.18s var(--bu-ease);
}

.bu-prose p a:hover,
.bu-prose li a:hover {
	text-decoration-color: currentColor;
}

.bu-prose ul,
.bu-prose ol {
	margin: 0 0 1.5em;
	padding-left: 0;
	list-style: none;
}

.bu-prose ol {
	list-style: decimal;
	padding-left: 1.4em;
}

.bu-prose ul li {
	position: relative;
	margin: 0 0 0.75em;
	padding-left: 1.5em;
}

.bu-prose ul li::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tone);
}

.bu-prose .wp-block-buttons {
	margin: 2em 0 2.5em;
}

.bu-lead {
	font-size: clamp(19px, 1.6vw, 21px);
	line-height: 1.55;
	color: var(--bu-inkt);
	letter-spacing: -0.005em;
}

.bu-lead + .bu-lead {
	margin-top: -0.4em;
}

/* A sentence that stands on its own between paragraphs, in the page's tone */
.bu-pull {
	font-family: var(--bu-display);
	font-weight: 600;
	font-variation-settings: "opsz" 96;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var(--tone);
	max-width: 22ch;
	margin: 1.8em 0;
	padding-left: 24px;
	border-left: 3px solid var(--tone);
	text-wrap: balance;
}

.bu-role {
	font-size: 17px;
	color: var(--bu-grijs);
	margin: -0.5em 0 1.8em;
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.mkdf-page-header .mkdf-menu-area {
	height: 92px;
	border-bottom: 0;
	transition: height 0.2s var(--bu-ease), box-shadow 0.2s var(--bu-ease);
}

.mkdf-page-header .mkdf-fixed-wrapper.fixed .mkdf-menu-area {
	height: 72px;
	box-shadow: 0 10px 30px -18px rgba(35, 28, 29, 0.25);
}

.mkdf-page-header .mkdf-menu-area .mkdf-vertical-align-containers {
	max-width: var(--bu-wrap);
	margin: 0 auto;
	padding: 0 var(--bu-gutter) !important;
	box-sizing: border-box;
}

.mkdf-page-header .mkdf-logo-wrapper a,
.mkdf-sticky-header .mkdf-logo-wrapper a {
	height: 44px !important;
	max-height: none !important;
	top: 0 !important;
	transform: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
}

.mkdf-page-header .mkdf-fixed-wrapper.fixed .mkdf-logo-wrapper a {
	height: 38px !important;
}

/* The mark: the brand's two birds in their hexagon, small, next to the name */
.bu-mark {
	display: block;
	flex: none;
	height: 100%;
	aspect-ratio: 1;
	background: var(--bu-bordeaux);
	-webkit-mask: url(assets/img/mark.svg) center / contain no-repeat;
	mask: url(assets/img/mark.svg) center / contain no-repeat;
}

.bu-wordmark {
	font-family: var(--bu-display);
	font-weight: 700;
	font-variation-settings: "opsz" 96;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--bu-inkt);
	white-space: nowrap;
	transition: color 0.18s var(--bu-ease);
}

.mkdf-page-header .mkdf-fixed-wrapper.fixed .bu-wordmark {
	font-size: 23px;
}

.bu-logo a:hover .bu-wordmark {
	color: var(--bu-bordeaux);
}

/* Main menu */
.mkdf-main-menu > ul > li > a {
	font-family: var(--bu-sans);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bu-inkt);
	padding: 0 14px;
	line-height: 28px;
}

.mkdf-main-menu > ul > li > a .item_text {
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
}

/* Underline that grows from the left on hover. The parent's "active page"
   state is not used: every item is an anchor into the home, so on the home
   they would all be active at once. */
.mkdf-main-menu > ul > li > a .item_text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--bu-bordeaux);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--bu-ease);
}

.mkdf-main-menu > ul > li:hover > a .item_text::after,
.mkdf-main-menu > ul > li > a:focus-visible .item_text::after {
	transform: scaleX(1);
}

.mkdf-main-menu > ul > li:hover > a,
.mkdf-main-menu > ul > li > a:focus-visible,
.mkdf-main-menu > ul > li.mkdf-active-item > a {
	color: var(--bu-inkt);
}

/* Last item (Contact) is the primary action, so it is a filled button */
.mkdf-main-menu > ul > li:last-child {
	margin-left: 14px;
}

.mkdf-main-menu > ul > li:last-child > a {
	background: var(--bu-bordeaux);
	border-radius: var(--bu-radius);
	color: var(--bu-papier);
	font-weight: 600;
	padding: 0 20px;
	line-height: 42px;
	transition: background-color 0.18s var(--bu-ease), transform 0.18s var(--bu-ease);
}

.mkdf-main-menu > ul > li:last-child > a .item_text {
	padding-bottom: 0;
}

.mkdf-main-menu > ul > li:last-child > a .item_text::after {
	display: none;
}

.mkdf-main-menu > ul > li:last-child:hover > a,
.mkdf-main-menu > ul > li:last-child.mkdf-active-item > a {
	background: var(--bu-bordeaux-deep);
	color: #fff;
}

/* Mobile header */
.mkdf-mobile-header .mkdf-mobile-header-inner {
	height: 68px;
	border-bottom: 0;
}

.mkdf-mobile-header .mkdf-mobile-header-inner .mkdf-vertical-align-containers {
	padding: 0 var(--bu-gutter) !important;
	box-sizing: border-box;
}

.mkdf-mobile-header .mkdf-mobile-logo-wrapper a {
	height: 36px !important;
	max-height: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}

.mkdf-mobile-header .bu-wordmark {
	font-size: 22px;
}

/* Menu opener: two solid bars, drawn here because the parent's icon font
   is not loaded, and its glyph was too thin anyway */
.mkdf-mobile-header .mkdf-mobile-menu-opener a {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	color: var(--bu-inkt);
	line-height: 1;
}

.mkdf-mobile-header .mkdf-mobile-menu-opener a > * {
	display: none !important;
}

.mkdf-mobile-header .mkdf-mobile-menu-opener a::before,
.mkdf-mobile-header .mkdf-mobile-menu-opener a::after {
	content: "";
	position: absolute;
	left: 8px;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.25s var(--bu-ease);
}

.mkdf-mobile-header .mkdf-mobile-menu-opener a::before {
	top: 16px;
}

.mkdf-mobile-header .mkdf-mobile-menu-opener a::after {
	top: 26px;
}

.mkdf-mobile-header .mkdf-mobile-menu-opener a:hover {
	color: var(--bu-bordeaux);
}

.mkdf-mobile-header .mkdf-mobile-menu-opener a:hover::after {
	transform: translateX(-4px);
}

.mkdf-mobile-header .mkdf-mobile-side-area {
	background: var(--bu-papier);
	padding: 96px 28px 48px;
}

.mkdf-mobile-header .mkdf-mobile-side-area .mkdf-close-mobile-side-area-holder {
	position: absolute;
	top: 14px;
	right: 12px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bu-inkt);
	cursor: pointer;
	border-radius: 50%;
}

.mkdf-mobile-header .mkdf-mobile-side-area .mkdf-close-mobile-side-area-holder:hover {
	color: var(--bu-bordeaux);
}

.mkdf-mobile-header .mkdf-mobile-side-area .bu-close-icon {
	display: block;
	width: 26px;
	height: 26px;
}

.mkdf-mobile-header .mkdf-mobile-nav ul li a,
.mkdf-mobile-header .mkdf-mobile-nav ul li h6 {
	font-family: var(--bu-display);
	font-size: 30px;
	font-weight: 600;
	font-variation-settings: "opsz" 96;
	letter-spacing: -0.025em;
	text-transform: none;
	color: var(--bu-inkt);
	padding: 10px 0;
	line-height: 1.15;
	border-bottom: 0;
}

.mkdf-mobile-header .mkdf-mobile-nav ul li a:hover {
	color: var(--bu-bordeaux);
}

.mkdf-mobile-header .mkdf-mobile-nav ul li.mkdf-active-item > a,
.mkdf-mobile-header .mkdf-mobile-nav .mkdf-grid > ul > li.mkdf-active-item > a {
	color: var(--bu-inkt);
}

/* Theme extras that do not belong on this site */
#mkdf-back-to-top,
.mkdf-back-to-top {
	display: none !important;
}

/* ------------------------------------------------------------------
   Title band (every page except home)
   ------------------------------------------------------------------ */
.mkdf-title-holder,
.mkdf-title-holder .mkdf-title-wrapper {
	height: auto !important;
	min-height: 0 !important;
	display: block !important;
	background: var(--bu-zand) !important;
	background-image: none !important;
}

.mkdf-title-holder .mkdf-title-inner {
	display: block !important;
	vertical-align: baseline;
	padding: 0 !important;
}

.mkdf-title-holder .mkdf-grid {
	width: auto !important;
	max-width: var(--bu-wrap);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 96px) var(--bu-gutter) clamp(48px, 6vw, 80px);
	box-sizing: border-box;
}

.mkdf-title-holder .mkdf-page-title {
	font-size: clamp(46px, 7vw, 84px);
	line-height: 1;
	letter-spacing: -0.035em;
	margin: 0;
	color: var(--bu-inkt);
}

.mkdf-title-holder .mkdf-page-subtitle {
	font-family: var(--bu-sans);
	font-size: 19px;
	text-transform: none;
	letter-spacing: 0;
	margin-top: 16px;
	color: var(--bu-grijs);
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.wp-block-buttons {
	gap: 12px 16px;
	align-items: center;
}

.bu-page .wp-block-button__link,
.bu-page .wpcf7-form input[type="submit"] {
	font-family: var(--bu-sans);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.25;
	color: var(--bu-papier) !important;
	background: var(--bu-bordeaux) !important;
	border: 0 !important;
	border-radius: var(--bu-radius) !important;
	padding: 17px 26px !important;
	cursor: pointer;
	transition: background-color 0.18s var(--bu-ease), color 0.18s var(--bu-ease), transform 0.18s var(--bu-ease);
}

.bu-page .wp-block-button__link:hover,
.bu-page .wpcf7-form input[type="submit"]:hover {
	background: var(--bu-bordeaux-deep) !important;
	color: #fff !important;
}

.bu-page .wp-block-button__link:active,
.bu-page .wpcf7-form input[type="submit"]:active {
	transform: translateY(1px);
}

/* Primary buttons carry an arrow that slides on hover */
.bu-page .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.bu-page .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.25s var(--bu-ease);
}

.bu-page .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* Secondary: a plain text link with an underline, next to the primary button */
.bu-page .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--bu-bordeaux) !important;
	padding: 17px 4px !important;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.25em;
	text-decoration-color: var(--bu-lijn);
	transition: text-decoration-color 0.18s var(--bu-ease), color 0.18s var(--bu-ease);
}

.bu-page .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent !important;
	color: var(--bu-bordeaux-deep) !important;
	text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------
   Home hero: words only. One sentence across the width, then the
   lead on the left and the actions on the right.
   ------------------------------------------------------------------ */
.bu-hero {
	padding-top: clamp(72px, 9vw, 128px);
	padding-bottom: clamp(64px, 8vw, 112px);
}

.bu-hero h1 {
	font-size: clamp(44px, 6.6vw, 92px);
	line-height: 0.98;
	letter-spacing: -0.04em;
	max-width: 17ch;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.bu-hero h1 em {
	font-style: normal;
	color: var(--bu-bordeaux);
}

.bu-hero-row {
	display: grid;
	grid-template-columns: minmax(0, 54ch) auto;
	justify-content: space-between;
	align-items: start;
	gap: 32px 64px;
}

.bu-hero-row .bu-lead {
	margin: 0;
	color: var(--bu-inkt);
}

.bu-hero-row .wp-block-buttons {
	margin: 0.35em 0 0;
	flex-wrap: nowrap;
}

/* Hero: text rises line by line */
@keyframes bu-rise {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}

.bu-hero h1,
.bu-hero-row > * {
	animation: bu-rise 0.7s var(--bu-ease) both;
}

.bu-hero-row > :nth-child(1) { animation-delay: 0.12s; }
.bu-hero-row > :nth-child(2) { animation-delay: 0.22s; }

@media (max-width: 900px) {
	.bu-hero-row {
		grid-template-columns: 1fr;
	}

	.bu-hero-row .wp-block-buttons {
		margin-top: 0;
	}
}

/* ------------------------------------------------------------------
   Section headings with a lead line under them
   ------------------------------------------------------------------ */
.bu-section-head {
	max-width: 640px;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.bu-section-head h2 {
	margin-bottom: 0.35em;
}

.bu-section-head .bu-lead {
	color: var(--bu-grijs);
}

/* ------------------------------------------------------------------
   The card set. Three services, three cards from one collection, each
   in its own tone with its own bird: a printed collector's card with an
   inner frame, the bird as the picture, the name and the rate as the
   label. The whole card is the link.
   ------------------------------------------------------------------ */
.bu-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bu-card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 480px;
	padding: 36px 32px 32px;
	border-radius: 14px;
	background: var(--tone);
	color: var(--tone-ink);
	box-shadow: 0 20px 40px -30px rgba(35, 28, 29, 0.5);
	transition: transform 0.45s var(--bu-ease), box-shadow 0.45s var(--bu-ease), opacity 0.6s var(--bu-ease);
}

a.bu-card,
a.bu-card:hover {
	color: var(--tone-ink);
	text-decoration: none;
}

/* The printed frame, a hair inside the edge */
.bu-card::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid color-mix(in srgb, var(--tone-ink) 38%, transparent);
	border-radius: 7px;
	pointer-events: none;
}

.bu-card > * {
	position: relative;
	margin: 0;
}

/* The picture: the bird, in the card's ink */
.bu-card-bird {
	height: 172px;
	margin: 8px auto 36px;
	width: 100%;
	background: var(--tone-ink);
	-webkit-mask: var(--bu-bird) center bottom / contain no-repeat;
	mask: var(--bu-bird) center bottom / contain no-repeat;
	transition: transform 0.6s var(--bu-ease);
}

.bu-bird-sparrow { --bu-bird: url(assets/img/sparrow.svg); }
.bu-bird-swan { --bu-bird: url(assets/img/swan.svg); }
.bu-bird-sparrow-left { --bu-bird: url(assets/img/sparrow.svg); transform: scaleX(-1); }

/* Oker is light, so its bird is drawn in the deep ochre rather than ink:
   a two-colour print instead of a black stamp */
[data-tone="oker"] .bu-card-bird {
	background: var(--tone-deep);
}

.bu-card h3 {
	color: inherit;
	font-size: clamp(25px, 2.3vw, 30px);
	margin-bottom: 4px;
}

.bu-card-rate {
	font-family: var(--bu-display);
	font-variation-settings: "opsz" 48;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
	margin-bottom: 18px;
}

.bu-card p {
	font-size: 16px;
	line-height: 1.5;
	opacity: 0.88;
}

.bu-card-more {
	margin-top: auto;
	padding-top: 28px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bu-card-more::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.25s var(--bu-ease);
}

/* Hover: the card lifts off the table, the bird stirs */
@media (hover: hover) {
	a.bu-card:hover {
		transform: translateY(-10px);
		box-shadow: 0 34px 56px -30px rgba(35, 28, 29, 0.6);
	}

	a.bu-card:hover .bu-card-bird {
		transform: translateY(-6px);
	}

	a.bu-card:hover .bu-card-bird.bu-bird-sparrow-left {
		transform: scaleX(-1) translateY(-6px);
	}

	a.bu-card:hover .bu-card-more::after {
		transform: translateX(4px);
	}
}

a.bu-card:focus-visible {
	outline-offset: 4px;
	border-radius: 14px;
}

/* Dealt onto the table one after the other, once the set scrolls into view */
.bu-js .bu-cards:not(.is-in) .bu-card {
	opacity: 0;
	transform: translateY(48px);
}

.bu-cards.is-in .bu-card:nth-child(2) { transition-delay: 0.08s; }
.bu-cards.is-in .bu-card:nth-child(3) { transition-delay: 0.16s; }

a.bu-card:hover {
	transition-delay: 0s;
}

@media (max-width: 900px) {
	.bu-cards {
		grid-template-columns: 1fr;
		gap: 20px;
		max-width: 480px;
	}

	.bu-card {
		min-height: 0;
		padding: 32px 28px 28px;
	}

	.bu-card-bird {
		height: 140px;
		margin-bottom: 28px;
	}
}

/* A card that is not a link: the fact sheet beside a service page's text */
.bu-card-static {
	min-height: 0;
}

.bu-card-static .bu-card-bird {
	height: 120px;
	margin-bottom: 28px;
}

.bu-card-static ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.5;
}

.bu-card-static ul li {
	position: relative;
	padding-left: 1.3em;
	margin: 0 0 0.5em;
}

.bu-card-static ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

/* Service page: the text on the left, the card on the right */
.bu-service-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px 80px;
	align-items: start;
}

.bu-service-layout .bu-card-static {
	position: sticky;
	top: 104px;
}

@media (max-width: 900px) {
	.bu-service-layout {
		grid-template-columns: 1fr;
	}

	.bu-service-layout .bu-card-static {
		position: static;
		max-width: 480px;
	}
}

/* ------------------------------------------------------------------
   Contact details list: a label above each value, no rules
   ------------------------------------------------------------------ */
.bu-contact {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.bu-contact-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bu-contact-row span {
	font-size: 15px;
	color: var(--bu-grijs);
}

.bu-contact-row a {
	font-family: var(--bu-display);
	font-variation-settings: "opsz" 48;
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: clamp(21px, 2.2vw, 26px);
	line-height: 1.25;
	color: var(--bu-inkt);
	overflow-wrap: anywhere;
	align-self: flex-start;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--bu-lijn);
	transition: text-decoration-color 0.18s var(--bu-ease), color 0.18s var(--bu-ease);
}

.bu-contact-row a:hover {
	color: var(--bu-bordeaux);
	text-decoration-color: currentColor;
}

/* Two columns: text left, list or form right */
.bu-split {
	gap: 80px !important;
	align-items: start !important;
}

.bu-split > .wp-block-column > h2:first-child,
.bu-split > .wp-block-column > h3:first-child {
	margin-top: 0;
}

.bu-split .bu-lead {
	color: var(--bu-grijs);
}

/* The narrow left column carries only the heading */
.bu-split.bu-split-narrow > .wp-block-column:first-child {
	flex-basis: 38% !important;
	flex-grow: 0 !important;
}

@media (max-width: 782px) {
	.bu-split {
		gap: 40px !important;
	}

	.bu-split.bu-split-narrow > .wp-block-column:first-child {
		flex-basis: auto !important;
	}
}

/* ------------------------------------------------------------------
   Closing call to action band on the service pages, in the page's tone
   ------------------------------------------------------------------ */
.bu-section.bu-cta {
	background: var(--tone);
	color: var(--tone-ink);
	padding: clamp(72px, 8vw, 104px) 0;
}

.bu-cta .bu-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 48px 80px;
	align-items: center;
}

.bu-cta h2,
.bu-cta h3 {
	max-width: 20ch;
	margin-bottom: 0;
	color: inherit;
	font-size: clamp(32px, 4.2vw, 52px);
}

.bu-cta p {
	max-width: 52ch;
	margin-top: 0.9em;
	color: inherit;
	opacity: 0.86;
}

.bu-cta .wp-block-buttons {
	margin: 0;
}

.bu-cta .wp-block-button__link {
	background: var(--tone-ink) !important;
	color: var(--tone) !important;
}

.bu-cta .wp-block-button__link:hover {
	background: var(--bu-wit) !important;
	color: var(--tone-deep) !important;
}

.bu-tone-oker .bu-cta .wp-block-button__link:hover,
.bu-cta.bu-tone-oker .wp-block-button__link:hover {
	background: var(--bu-inkt) !important;
	color: var(--bu-papier) !important;
}

/* Under the button: the direct address for people who would rather mail */
.bu-cta-action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.bu-cta-action p {
	margin: 0;
	font-size: 16px;
	opacity: 0.86;
}

.bu-cta-action p a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	transition: text-decoration-color 0.18s var(--bu-ease);
}

.bu-cta-action p a:hover {
	color: inherit;
	text-decoration-color: currentColor;
}

@media (max-width: 782px) {
	.bu-cta .bu-wrap {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ------------------------------------------------------------------
   Contact form (Contact Form 7): soft fields, no card
   ------------------------------------------------------------------ */
.bu-page .wpcf7-form {
	font-family: var(--bu-sans);
}

.bu-page .wpcf7-form > label,
.bu-page .wpcf7-form p > label {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--bu-inkt);
	margin: 0 0 20px;
}

.bu-page .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

.bu-page .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 15px 16px;
	font-family: var(--bu-sans);
	font-size: 17px;
	line-height: 1.45;
	color: var(--bu-inkt);
	background: var(--bu-papier);
	border: 1.5px solid transparent;
	border-radius: var(--bu-radius);
	outline: 0;
	transition: border-color 0.18s var(--bu-ease), background-color 0.18s var(--bu-ease);
}

.bu-page .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):hover {
	background: var(--bu-zand);
}

.bu-page .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus {
	background: var(--bu-wit);
	border-color: var(--bu-bordeaux);
}

.bu-page .wpcf7-form textarea.wpcf7-form-control {
	min-height: 160px;
	height: auto;
	resize: vertical;
}

.bu-page .wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--bu-bordeaux);
	background: var(--bu-wit);
}

.bu-page .wpcf7-form .wpcf7-not-valid-tip {
	font-size: 14px;
	color: var(--bu-bordeaux);
	margin-top: 6px;
}

.bu-page .wpcf7-form input[type="submit"] {
	margin-top: 6px;
}

.bu-page .wpcf7-form .wpcf7-spinner {
	margin: 0 0 0 12px;
}

.bu-page .wpcf7-form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	border: 0;
	border-radius: var(--bu-radius);
	background: var(--bu-papier);
	font-size: 15px;
	color: var(--bu-inkt);
}

.bu-page .wpcf7-form.sent .wpcf7-response-output {
	background: var(--bu-mos-tint);
}

.bu-page .wpcf7-form.invalid .wpcf7-response-output,
.bu-page .wpcf7-form.failed .wpcf7-response-output {
	background: var(--bu-bordeaux-tint);
}

/* ------------------------------------------------------------------
   Footer: the page closes in bordeaux. The mark and the name, the
   menu, and the ways to reach Swaan, with icons.
   ------------------------------------------------------------------ */
.bu-footer {
	background: var(--bu-bordeaux);
	color: var(--bu-papier);
	padding: 80px 0 36px;
	font-family: var(--bu-sans);
	font-size: 16px;
	line-height: 1.6;
}

.bu-footer a {
	color: var(--bu-papier);
	transition: color 0.18s var(--bu-ease), opacity 0.18s var(--bu-ease);
}

.bu-footer a:hover {
	color: var(--bu-wit);
}

.bu-footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 64px;
}

.bu-footer-brand a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--bu-display);
	font-variation-settings: "opsz" 96;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

.bu-footer-brand .bu-mark {
	height: 44px;
	background: var(--bu-papier);
}

.bu-footer-brand .bu-wordmark {
	color: var(--bu-papier);
}

.bu-footer-brand a:hover .bu-wordmark {
	color: var(--bu-wit);
}

.bu-footer-tagline {
	margin: 22px 0 0;
	max-width: 30ch;
	opacity: 0.8;
}

.bu-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bu-footer-menu li {
	margin: 0;
	padding: 0;
}

.bu-footer-menu li a,
.bu-footer-contact > a {
	display: inline-block;
	padding: 5px 0;
}

.bu-footer-contact > a {
	display: block;
	overflow-wrap: anywhere;
}

/* Social icons: round, outlined in the paper colour, filled on hover */
.bu-footer-social {
	display: flex;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.bu-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--bu-papier) 45%, transparent);
	color: var(--bu-papier);
	transition: background-color 0.18s var(--bu-ease), color 0.18s var(--bu-ease), border-color 0.18s var(--bu-ease);
}

.bu-footer-social a:hover {
	background: var(--bu-papier);
	border-color: var(--bu-papier);
	color: var(--bu-bordeaux);
}

.bu-footer-social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.bu-footer-bottom {
	font-size: 14px;
	opacity: 0.7;
}

@media (max-width: 900px) {
	.bu-footer-inner {
		grid-template-columns: 1fr 1fr;
	}

	.bu-footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 540px) {
	.bu-footer {
		padding-top: 64px;
	}

	.bu-footer-inner {
		grid-template-columns: 1fr;
		gap: 36px;
		padding-bottom: 48px;
	}
}

/* ------------------------------------------------------------------
   Page transition: the flock. bu.js builds it on a click and on arrival;
   positions, sizes and timing are set inline there. The curtain under the
   birds is paper, so the page swap happens out of sight.
   ------------------------------------------------------------------ */

/* Before bu.js has run on an arriving page, <html>.bu-covered alone draws
   the curtain, so the new page never shows through */
html.bu-covered::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9997;
	background: var(--bu-zand);
}

.bu-flock {
	position: fixed;
	inset: 0;
	z-index: 9998;
	overflow: hidden;
	pointer-events: none;
}

.bu-flock.is-active {
	pointer-events: auto;
	cursor: progress;
}

.bu-flock-curtain {
	position: absolute;
	inset: 0;
	background: var(--bu-zand);
	opacity: 0;
}

.bu-flock-bird {
	position: absolute;
	display: block;
	opacity: 0;
	-webkit-mask: var(--bu-bird) center / contain no-repeat;
	mask: var(--bu-bird) center / contain no-repeat;
	will-change: transform, opacity;
}

/* In-page links: a few birds cross the page. bu.js flies and paints them
   on this canvas, over everything and in the way of nothing. */
.bu-sky {
	position: fixed;
	inset: 0;
	z-index: 9996;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Gutenberg columns inside our sections: stack on mobile with a sane gap
   ------------------------------------------------------------------ */
@media (max-width: 782px) {
	.bu-page .wp-block-columns {
		gap: 24px !important;
	}
}

/* Images in content never overflow */
.bu-page img {
	max-width: 100%;
	height: auto;
}