/*
 * Rebuild Personal Training — the whole site's styles.
 *
 * Ported from the WordPress build (ICONS framework 0.48.2, child theme 0.19.5)
 * by measuring what the live page actually computed, not by copying its source.
 * The difference matters: on that page a third of the rules lost to other rules
 * -- WordPress core's button and navigation styles, the framework's footer
 * rules -- so the source said one thing and the screen showed another. Where a
 * value here looks arbitrary, it is what the screen showed.
 *
 * The page keeps the builder's structure (row > inner grid > column > element
 * wrapper > element) on purpose. Several of the measured spacings only exist
 * because of that nesting -- heading margins collapse through a block wrapper
 * and do not collapse inside a flex card -- so flattening the markup would have
 * changed the rhythm even with identical CSS.
 */

/* ── tokens ──────────────────────────────────────────────────────────────── */

:root {
	--icons-color-base: #0c0c0d;
	--icons-color-surface: #141416;
	--icons-color-border: #28282c;
	--icons-color-muted: #9a968c;
	--icons-color-contrast: #f3f1ec;
	--icons-color-primary: #ff3b30;
	--icons-color-secondary: #ff5247;

	/*
	 * The named faces are never served -- the WordPress site declared them and
	 * loaded none -- so every visitor sees their system font, and so does this.
	 * Kept identical on purpose: changing it is a design decision, not a port.
	 */
	--icons-font-body: "Inter", system-ui, sans-serif;
	--icons-font-heading: "Sora", system-ui, sans-serif;
	--icons-font-mono: "JetBrains Mono", ui-monospace, monospace;

	--icons-text-xs: clamp(0.6664rem, 0.666rem + ((1vw - 0.2rem) * -0.246), 0.5rem);
	--icons-text-sm: clamp(0.8163rem, 0.816rem + ((1vw - 0.2rem) * -0.098), 0.75rem);
	--icons-text-md: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.185), 1.125rem);
	--icons-text-lg: clamp(1.225rem, 1.225rem + ((1vw - 0.2rem) * 0.686), 1.6875rem);
	--icons-text-xl: clamp(1.5006rem, 1.501rem + ((1vw - 0.2rem) * 1.526), 2.5313rem);
	--icons-text-3xl: clamp(2.2519rem, 2.252rem + ((1vw - 0.2rem) * 5.101), 5.6953rem);
	--icons-text-4xl: clamp(2.7585rem, 2.759rem + ((1vw - 0.2rem) * 8.569), 8.543rem);

	--icons-space-2xs: clamp(5px, 4.74px + 0.1852vw, 7px);
	--icons-space-xs: clamp(8px, 7.11px + 0.2778vw, 11px);
	--icons-space-sm: clamp(12px, 10.67px + 0.4167vw, 16px);
	--icons-space-md: clamp(18px, 16px + 0.625vw, 24px);
	--icons-space-lg: clamp(27px, 24px + 0.9375vw, 36px);
	--icons-space-xl: clamp(41px, 36px + 1.4063vw, 54px);
	--icons-space-2xl: clamp(61px, 54px + 2.1094vw, 81px);

	--icons-heading-line-height: 0.98;
	--icons-container: 1440px;
	--icons-header-padding: 12px;

	--rb-edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	--rb-lift: 0 12px 32px rgba(0, 0, 0, 0.45);
}

@media (min-width: 64rem) {
	:root {
		--icons-header-padding: 20px;
	}
}

/* ── base ────────────────────────────────────────────────────────────────── */

/*
 * scroll-padding is the one deliberate behaviour change from the old page. The
 * header is sticky, so an in-page jump used to land the section's first line
 * underneath it -- tap "Tarieven" and the eyebrow saying so was hidden. Padding
 * by the header's own height (96px, 112px from 64rem) lands it in view.
 */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

@media (min-width: 64rem) {
	html {
		scroll-padding-top: 112px;
	}
}

body {
	margin: 0;
	background-color: var(--icons-color-base);
	color: var(--icons-color-contrast);
	font-family: var(--icons-font-body);
	font-size: var(--icons-text-md);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

p,
h1,
h2,
h3,
h4,
li {
	overflow-wrap: break-word;
}

/*
 * Heading margins are left to the browser on purpose -- only the start margin is
 * reset, on `.ib-heading`. The end margin is the browser's `0.67em`-to-`1.33em`,
 * and the page's vertical rhythm was tuned with it in place. See the pricing
 * cards for the one place it was taken out.
 */
h1,
h2,
h3,
h4 {
	font-family: var(--icons-font-heading);
	font-weight: 700;
	line-height: 0.98;
}

h1 { letter-spacing: -0.022em; }
h2 { letter-spacing: -0.018em; }
h3 { letter-spacing: -0.014em; }
h4 { letter-spacing: -0.01em; }

a {
	color: var(--icons-color-primary);
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: from-font;
}

a:hover {
	text-decoration: none;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--icons-color-primary);
	outline-offset: 2px;
	border-radius: 8px;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	position: fixed;
	left: var(--icons-space-2xs);
	top: var(--icons-space-2xs);
	z-index: 999999;
	padding: var(--icons-space-2xs) var(--icons-space-xs);
	background: var(--icons-color-base);
	color: var(--icons-color-contrast);
	border-radius: 8px;
}

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

	*,
	::before,
	::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── header ──────────────────────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--icons-color-base);
	transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.is-pinned {
	background-color: color-mix(in srgb, var(--icons-color-base) 88%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.rb-header {
	padding: var(--icons-header-padding) var(--icons-space-sm);
}

.rb-header__bar {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--icons-space-md);
	min-height: 72px;
	max-inline-size: var(--icons-container);
	margin-inline: auto;
}

.rb-brand {
	display: inline-flex;
	align-items: center;
	color: var(--icons-color-contrast);
	text-decoration: none;
}

.rb-logo {
	display: block;
	width: auto;
	height: 46px;
}

.rb-logo path {
	fill: var(--icons-color-contrast);
}

@media (max-width: 900px) {
	.rb-logo {
		height: 38px;
	}
}

.rb-header__end {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--icons-space-md);
}

/* The navigation: a row of links on anything wider than a phone. */

.rb-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--icons-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rb-nav__list a {
	display: block;
	font-family: var(--icons-font-mono);
	font-size: var(--icons-text-sm);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--icons-color-contrast);
	text-decoration: none;
	transition: color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rb-nav__list a:hover {
	color: var(--icons-color-primary);
}

.rb-nav__open,
.rb-nav__close {
	display: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: currentColor;
	cursor: pointer;
}

.rb-nav__open svg,
.rb-nav__close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/*
 * Below 600px -- the width WordPress's navigation block collapsed at -- the row
 * becomes a menu button and a full-screen sheet. The sheet is the site's own
 * black with left-aligned links: the WordPress version opened white, from a
 * core fallback, until 0.48.2 overrode it.
 */
@media (max-width: 599px) {
	.rb-nav__open {
		display: flex;
	}

	.rb-nav__panel {
		display: none;
	}

	.rb-nav__panel.is-open {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		z-index: 100000;
		padding: 16px;
		background-color: var(--icons-color-base);
		color: var(--icons-color-contrast);
		overflow-y: auto;
	}

	.rb-nav__panel.is-open .rb-nav__close {
		display: flex;
		position: absolute;
		top: 16px;
		right: 16px;
	}

	.rb-nav__panel.is-open .rb-nav__list {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: var(--icons-space-xs);
		padding-top: calc(2rem + 24px);
	}

	.rb-nav__panel.is-open .rb-nav__list a {
		font-size: var(--icons-text-xl);
	}
}

/* The two calls to action. The quiet one is a hairline so the red one is the
 * only red in the bar. */

.rb-header__cta {
	display: flex;
	align-items: center;
	gap: var(--icons-space-md);
}

.rb-header__cta a {
	display: inline-block;
	font-family: var(--icons-font-mono);
	font-size: 10.5px;
	font-weight: 550;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: 0.7em 1.2em;
	border-radius: 8px;
	white-space: nowrap;
}

.rb-header__cta .is-quiet {
	background: transparent;
	border: 1px solid var(--icons-color-border);
	color: var(--icons-color-muted);
}

.rb-header__cta .is-quiet:hover {
	border-color: var(--icons-color-contrast);
	color: var(--icons-color-contrast);
}

.rb-header__cta .is-loud {
	background: var(--icons-color-primary);
	color: var(--icons-color-base);
}

.rb-header__cta .is-loud:hover {
	background: var(--icons-color-secondary);
}

@media (max-width: 900px) {
	.rb-header__cta .is-quiet {
		display: none;
	}
}

/* ── layout: rows, the twelve-column grid, columns, elements ─────────────── */

main {
	margin-top: var(--icons-space-md);
}

.ib-row {
	position: relative;
	z-index: 1;
	--ib-row-pad: var(--ib-row-pad-mobile, var(--icons-space-xl));
	padding-block: var(--ib-row-pad);
	padding-inline: var(--icons-space-sm);
}

@media (min-width: 48rem) {
	.ib-row { --ib-row-pad: var(--ib-row-pad-tablet, var(--ib-row-pad-mobile, var(--icons-space-xl))); }
}

@media (min-width: 64rem) {
	.ib-row { --ib-row-pad: var(--ib-row-pad-desktop, var(--ib-row-pad-tablet, var(--ib-row-pad-mobile, var(--icons-space-xl)))); }
}

.ib-row__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--ib-row-gap, var(--icons-space-md));
	margin-inline: auto;
	inline-size: 100%;
	max-inline-size: var(--icons-container);
}

/*
 * Eleven gaps between twelve tracks can be wider than a phone. Below the desktop
 * breakpoint the column gap is capped at a share of the row so the tracks keep
 * the room -- the fix that went into the framework as 0.48.1.
 */
@media (max-width: 63.999rem) {
	.ib-row__inner {
		column-gap: min(var(--ib-row-gap, var(--icons-space-md)), 3%);
	}
}

.ib-col {
	--ib-span: var(--ib-span-mobile, 12);
	grid-column: span var(--ib-span);
	min-inline-size: 0;
	padding: var(--ib-col-pad-mobile, 0);
}

@media (min-width: 48rem) {
	.ib-col {
		--ib-span: var(--ib-span-tablet, var(--ib-span-mobile, 12));
		padding: var(--ib-col-pad-tablet, var(--ib-col-pad-mobile, 0));
	}
}

@media (min-width: 64rem) {
	.ib-col {
		--ib-span: var(--ib-span-desktop, var(--ib-span-tablet, var(--ib-span-mobile, 12)));
		padding: var(--ib-col-pad-desktop, var(--ib-col-pad-tablet, var(--ib-col-pad-mobile, 0)));
	}
}

.ib-col.is-valign-center {
	align-self: center;
}

.ib-el + .ib-el {
	margin-block-start: var(--icons-space-sm);
}

/* ── elements ────────────────────────────────────────────────────────────── */

.ib-heading {
	margin-block-start: 0;
	line-height: var(--icons-heading-line-height);
	text-align: left;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.ib-heading.is-eyebrow {
	font-size: var(--icons-text-sm);
	color: var(--icons-color-primary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.fs-sm { font-size: var(--icons-text-sm); }
.fs-md { font-size: var(--icons-text-md); }
.fs-xl { font-size: var(--icons-text-xl); }
.fs-3xl { font-size: var(--icons-text-3xl); }
.fs-4xl { font-size: var(--icons-text-4xl); }

.c-primary { color: var(--icons-color-primary); }
.ib-heading.c-muted,
.c-muted { color: var(--icons-color-muted); }

.ib-text {
	text-align: left;
}

.ib-text > :first-child { margin-block-start: 0; }
.ib-text > :last-child { margin-block-end: 0; }

.ib-image {
	margin: 0;
}

.ib-image img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 8px;
}

.ib-image.is-3x4 img {
	aspect-ratio: 3 / 4;
}

.ib-icon {
	line-height: 0;
}

.ib-iconlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--icons-space-2xs);
	font-size: var(--icons-text-sm);
}

.ib-iconlist li {
	display: flex;
	align-items: flex-start;
	gap: var(--icons-space-2xs);
}

.ib-iconlist svg {
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: middle;
	width: 1.2em;
	height: 1.2em;
	margin-block-start: 0.15em;
	color: var(--icons-color-primary);
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

/*
 * Flat fills, no gradients -- "gloss buttons all look very 1995". The weight,
 * line height and padding below are the cascade's result on the old page: the
 * framework's size rule, WordPress's own button line height and the child's
 * weight, each winning a different property.
 */
.ib-button {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-width: 0;
	padding: 0.6em 1.4em;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: inherit;
	font-size: var(--icons-text-md);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.ib-button:hover {
	text-decoration: none;
}

.ib-button.is-solid {
	background: var(--icons-color-primary);
	color: var(--icons-color-base);
}

.ib-button.is-solid:hover {
	background: color-mix(in srgb, var(--icons-color-primary) 88%, #fff);
}

.ib-button.is-inverse {
	background: var(--icons-color-contrast);
	color: var(--icons-color-base);
}

.ib-button.is-inverse:hover {
	background: #fff;
}

.ib-button.is-outline {
	background: transparent;
	border-color: color-mix(in srgb, var(--icons-color-contrast) 30%, transparent);
	color: var(--icons-color-contrast);
}

.ib-button.is-outline:hover {
	border-color: var(--icons-color-contrast);
	background: color-mix(in srgb, var(--icons-color-contrast) 8%, transparent);
}

/* The in-card link is a link, not a third button competing with the two above. */
.ib-button.is-text {
	padding: 0;
	background: transparent;
	color: var(--icons-color-primary);
	font-family: var(--icons-font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ib-el--button + .ib-el--button {
	margin-top: 0;
}

/* ── hero ────────────────────────────────────────────────────────────────── */

#hero {
	--ib-row-pad-mobile: 72px;
	--ib-row-pad-tablet: 88px;
	--ib-row-pad-desktop: 96px;
	--ib-row-gap: var(--icons-space-md);

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	min-height: 92vh;
	color: var(--icons-color-contrast);
	isolation: isolate;
	overflow: hidden;
}

#hero > .ib-row__inner {
	position: relative;
	z-index: 1;
	padding-bottom: clamp(28px, 4vw, 56px);
}

#hero .ib-col {
	align-self: end;
}

/* An <img> rather than the background-image the old page used: it gets a
 * srcset, so a phone downloads a phone-sized photograph. Same crop either way,
 * cover from the centre. */
.rb-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-inline-size: none;
	object-fit: cover;
	object-position: center;
}

.rb-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--icons-color-base);
	opacity: 0.62;
	pointer-events: none;
}

/* The oversized letterform half out of frame. Decorative, and a pseudo-element
 * so it is never read out or selected. */
#hero::after {
	content: "RB";
	position: absolute;
	right: -0.08em;
	bottom: -0.28em;
	z-index: 0;
	font-family: var(--icons-font-heading);
	font-weight: 800;
	font-size: clamp(180px, 32vw, 460px);
	line-height: 0.8;
	letter-spacing: -0.06em;
	color: var(--icons-color-contrast);
	opacity: 0.06;
	pointer-events: none;
}

@media (max-width: 781px) {
	#hero::after { display: none; }
}

#hero .ib-el--heading + .ib-el--button {
	margin-top: clamp(20px, 2.4vw, 36px);
}

#hero .ib-col > .ib-el--button {
	display: inline-flex;
	margin-inline-end: 12px;
}

/* The pair is one object: one width, wide enough for the longer label. */
#hero .ib-button {
	min-width: 19rem;
}

@media (max-width: 600px) {
	.ib-button,
	#hero .ib-button {
		min-width: 0;
		width: 100%;
	}

	#hero .ib-col > .ib-el--button {
		display: block;
		margin-inline-end: 0;
	}

	.ib-el--button + .ib-el--button {
		margin-top: 12px;
	}
}

/* ── sections ────────────────────────────────────────────────────────────── */

/* A section head: eyebrow and display line, nine columns wide on desktop. */
.rb-section {
	--ib-row-pad-mobile: 56px;
	--ib-row-pad-tablet: 72px;
	--ib-row-pad-desktop: 104px;
	--ib-row-gap: var(--icons-space-xl);
}

.rb-section > .ib-row__inner > .ib-col {
	--ib-span-desktop: 9;
}

/* A grid of cards under a section head: no padding of its own, the gap from
 * the next section is a margin, because head and cards are one unit. */
.rb-grid {
	--ib-row-pad-mobile: 0px;
	--ib-row-pad-tablet: 0px;
	--ib-row-pad-desktop: 0px;
	--ib-row-gap: var(--icons-space-md);
	margin-bottom: var(--icons-space-2xl);
}

@media (max-width: 781px) {
	.rb-grid {
		margin-bottom: var(--icons-space-xl);
	}
}

.is-surface {
	background-color: var(--icons-color-surface);
}

#doelen,
#tarieven {
	padding-bottom: var(--icons-space-sm);
}

/* ── cards ───────────────────────────────────────────────────────────────── */

/*
 * Their own ground, a lit top edge, 8px corners. The card is a flex column so
 * its last line -- the link, the price note, the button -- sits on the floor
 * whatever the copy above it does, and the row of cards reads as a row.
 */
.rb-card {
	--ib-col-pad-mobile: 24px;
	--ib-col-pad-tablet: 26px;
	--ib-col-pad-desktop: 32px;

	background-color: var(--icons-color-surface);
	border-radius: 8px;
	box-shadow: var(--rb-edge);
	border: 1px solid color-mix(in srgb, var(--icons-color-border) 70%, transparent);
	transition: box-shadow 220ms ease, border-color 220ms ease;
}

#aanbod-grid .rb-card,
#doelen-grid .rb-card,
#tarieven-grid .rb-card {
	display: flex;
	flex-direction: column;
}

#aanbod-grid .rb-card:hover,
#doelen-grid .rb-card:hover,
#tarieven-grid .rb-card:hover {
	border-color: color-mix(in srgb, var(--icons-color-primary) 35%, transparent);
	box-shadow: var(--rb-edge-strong), var(--rb-lift);
}

#doelen-grid .rb-card > .ib-el--button,
#aanbod-grid .rb-card > .ib-el--text:last-child,
#tarieven-grid .rb-card > .ib-el--button {
	margin-top: auto;
	padding-top: var(--icons-space-sm);
}

/* Standing figures shot in portrait: bias the crop upward so a centred crop
 * does not take the head off. */
#aanbod-grid .ib-image img,
#doelen-grid .ib-image img {
	object-position: center 18%;
}

#aanbod-grid .rb-card {
	--ib-span-tablet: 6;
	--ib-span-desktop: 4;
}

#doelen-grid .rb-card {
	--ib-span-tablet: 4;
	--ib-span-desktop: 4;
}

#traject-rail .rb-card {
	--ib-span-tablet: 6;
	--ib-span-desktop: 3;
}

/* The step icons: a thin line drawing, no tile. */
#traject-rail .ib-el--icon {
	margin-bottom: 22px;
}

#traject-rail .ib-el--icon svg {
	width: 40px;
	height: 40px;
	stroke-width: 1.25;
	color: var(--icons-color-contrast);
	opacity: 0.92;
}

/* ── vrouwen ─────────────────────────────────────────────────────────────── */

#vrouwen .ib-col {
	--ib-span-desktop: 6;
}

/* ── tarieven ────────────────────────────────────────────────────────────── */

#tarieven > .ib-row__inner > .ib-col {
	--ib-span-desktop: 8;
}

#tarieven-grid .rb-card {
	--ib-col-pad-mobile: 26px;
	--ib-col-pad-tablet: 32px;
	--ib-col-pad-desktop: 40px;
	--ib-span-tablet: 6;
	--ib-span-desktop: 4;
}

/* The recommended plan reads brighter, not bigger. */
#tarieven-grid .rb-card.is-marked {
	background-color: var(--icons-color-border);
	box-shadow: var(--rb-edge-strong), var(--rb-lift);
	border-color: color-mix(in srgb, var(--icons-color-primary) 45%, transparent);
}

#tarieven-grid h3 {
	font-family: var(--icons-font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

/* A price belongs on top of its own caption, not 85px above it. */
#tarieven-grid .ib-el--heading > .ib-heading {
	margin-block-end: 0;
}

.rb-spacer {
	block-size: 0;
}

@media (min-width: 48rem) {
	.rb-spacer {
		block-size: 18px;
	}
}

#tarieven-voorwaarde {
	--ib-row-pad-mobile: 16px;
	--ib-row-pad-tablet: 20px;
	--ib-row-pad-desktop: 24px;
}

/* ── contact ─────────────────────────────────────────────────────────────── */

#contact {
	--ib-row-pad-mobile: 52px;
	--ib-row-pad-tablet: 64px;
	--ib-row-pad-desktop: 80px;
	--ib-row-gap: var(--icons-space-lg);

	background-color: var(--icons-color-primary);
	color: var(--icons-color-base);
}

#contact .ib-col:first-child { --ib-span-desktop: 5; }
#contact .ib-col:last-child { --ib-span-desktop: 7; }

/* ── the intake form ─────────────────────────────────────────────────────── */

/*
 * On the red closing band, so every control has to hold its own against a loud
 * ground: white fields with a real border.
 */
.rb-form {
	display: grid;
	gap: 14px;
	max-width: 34rem;
}

.rb-form__row {
	display: grid;
	gap: 6px;
}

.rb-form label {
	font-family: var(--icons-font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--icons-color-base);
}

.rb-form label span {
	text-transform: none;
	letter-spacing: 0.02em;
	opacity: 0.6;
}

.rb-form input,
.rb-form select,
.rb-form textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: var(--icons-text-md);
	color: var(--icons-color-base);
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--icons-color-base) 22%, transparent);
	border-radius: 8px;
	padding: 0.7em 0.9em;
	-webkit-appearance: none;
	appearance: none;
}

.rb-form textarea {
	resize: vertical;
	min-height: 6.5rem;
}

.rb-form input:focus-visible,
.rb-form select:focus-visible,
.rb-form textarea:focus-visible {
	outline: 2px solid var(--icons-color-base);
	outline-offset: 2px;
	border-color: transparent;
}

/* Near-black on the band, so the submit inverts. A grid item, so it is a block
 * box and takes the body's line height rather than the button's. */
.rb-form .ib-button.is-solid {
	display: flex;
	justify-self: start;
	line-height: 1.6;
	background: var(--icons-color-base);
	color: var(--icons-color-contrast);
}

.rb-form .ib-button.is-solid:hover {
	background: color-mix(in srgb, var(--icons-color-base) 88%, #fff);
}

@media (max-width: 600px) {
	.rb-form .ib-button.is-solid {
		width: 100%;
	}
}

.rb-form__note {
	margin: 0;
	font-size: var(--icons-text-xs);
	color: color-mix(in srgb, var(--icons-color-base) 72%, transparent);
	max-width: 42ch;
}

.rb-form__note a {
	color: inherit;
}

/* The honeypot: off-screen rather than display:none, because a bot that reads
 * the stylesheet skips anything hidden. aria-hidden keeps it from screen readers. */
.rb-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── footer ──────────────────────────────────────────────────────────────── */

.site-footer {
	margin-top: var(--icons-space-md);
	padding: var(--icons-space-xl) var(--icons-space-sm) 0;
	border-top: 1px solid var(--icons-color-border);
}

.site-footer > * {
	max-inline-size: var(--icons-container);
	margin-inline: auto;
}

.rb-footer__grid {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--icons-space-md);
}

.rb-footer__grid > div {
	flex: 1 1 0;
	min-width: 0;
}

.rb-footer__grid > div:first-child {
	flex: 0 0 34%;
}

@media (max-width: 781px) {
	.rb-footer__grid {
		flex-wrap: wrap;
	}

	.rb-footer__grid > div,
	.rb-footer__grid > div:first-child {
		flex-basis: 100%;
	}
}

.rb-logo--footer {
	height: 72px;
	margin-bottom: var(--icons-space-sm);
}

/* On the old page the header's phone-size rule came later in the file and
 * caught this one too, so the footer wordmark drops to 38px below 900px. */
@media (max-width: 900px) {
	.rb-logo--footer {
		height: 38px;
	}
}

.rb-footer__address {
	margin-top: var(--icons-space-md);
	font-style: normal;
	font-size: var(--icons-text-sm);
	line-height: 1.8;
}

.rb-footer__address p {
	margin: 0;
}

.rb-footer__address p + p {
	margin-top: 1em;
}

/* The column is a flex item, so this margin stays inside it rather than
 * collapsing away -- and it is what the old footer's first column measured. */
.rb-footer__address p:last-child {
	margin-bottom: 1em;
}

/*
 * Footer headings: on the old page the framework's footer rule outweighed the
 * child's, so these came out bright, tighter-tracked and heavier than site.css
 * asked for. Ported as they rendered.
 */
.rb-footer__head {
	margin: 0 0 var(--icons-space-2xs);
	font-family: var(--icons-font-mono);
	font-size: var(--icons-text-xs);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--icons-color-contrast);
}

.rb-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rb-footer__list li {
	padding: 7px 0;
	font-size: var(--icons-text-sm);
}

.site-footer a {
	color: inherit;
	opacity: 0.72;
	text-decoration: none;
	transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1), color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer a:hover {
	opacity: 1;
	color: var(--icons-color-primary);
}

.rb-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--icons-space-md);
	flex-wrap: wrap;
	margin-top: var(--icons-space-lg);
	padding-top: var(--icons-space-sm);
	border-top: 1px solid var(--icons-color-border);
	font-family: var(--icons-font-mono);
	font-size: var(--icons-text-xs);
	color: var(--icons-color-muted);
}

.rb-footer__legal {
	display: flex;
	gap: var(--icons-space-md);
	flex-wrap: wrap;
	margin: 0;
}

.rb-footer__copyright {
	margin: 0;
	text-align: right;
}

/* ── booking bar ─────────────────────────────────────────────────────────── */

/* Fixed, in after the hero and out again at the closing band: a bar still
 * there when the page's own call to action is on screen competes with it. */
.rb-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 180;
	background: color-mix(in srgb, var(--icons-color-surface) 94%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--icons-color-border);
	transform: translateY(110%);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.rb-bar.is-in {
	transform: none;
}

.rb-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--icons-space-md);
	max-width: 1400px;
	margin: 0 auto;
	padding: 12px var(--icons-space-md);
	min-height: 66px;
}

.rb-bar__text {
	margin: 0;
	font-size: var(--icons-text-sm);
	line-height: 1.35;
	color: var(--icons-color-muted);
}

.rb-bar__text b {
	display: block;
	color: var(--icons-color-contrast);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--icons-text-xs);
	letter-spacing: 0.02em;
}

.rb-bar__actions {
	margin-left: auto;
	display: flex;
	gap: 10px;
	align-items: center;
	flex-shrink: 0;
}

.rb-bar__actions a {
	font-family: var(--icons-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.75em 1.2em;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 8px;
}

.rb-bar__actions .is-quiet {
	border: 1px solid var(--icons-color-border);
	color: var(--icons-color-muted);
}

.rb-bar__actions .is-loud {
	background: var(--icons-color-primary);
	color: var(--icons-color-base);
	font-weight: 700;
}

@media (max-width: 720px) {
	.rb-bar__text { display: none; }
	.rb-bar__actions { margin-left: 0; width: 100%; }
	.rb-bar__actions a { flex: 1; text-align: center; }
}

/* ── back to top ─────────────────────────────────────────────────────────── */

.rb-top {
	position: fixed;
	bottom: var(--icons-space-sm);
	right: var(--icons-space-sm);
	z-index: 90;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 1px 6px;
	border: 1px solid var(--icons-color-border);
	border-radius: 999px;
	background: var(--icons-color-base);
	color: var(--icons-color-contrast);
	box-shadow: 0 4px 12px -2px rgba(17, 19, 24, 0.10);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), visibility 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rb-top.is-visible {
	opacity: 1;
	visibility: visible;
}

/* ── a plain page: privacy, bedankt ──────────────────────────────────────── */

.rb-page {
	padding: var(--icons-space-2xl) var(--icons-space-sm);
}

.rb-page__inner {
	max-width: 704px;
	margin: 0 auto;
}

.rb-page h1 {
	font-size: var(--icons-text-3xl);
	margin: 0 0 var(--icons-space-md);
}

.rb-page h2 {
	font-size: var(--icons-text-xl);
	margin: var(--icons-space-xl) 0 var(--icons-space-xs);
}

.rb-page p,
.rb-page li {
	color: var(--icons-color-contrast);
}

.rb-page .is-lead {
	font-size: var(--icons-text-lg);
	line-height: 1.5;
}

.rb-page .ib-button {
	margin-top: var(--icons-space-md);
}

/* A plain page's footer is only the bottom line, which carries its own rule --
 * the footer's top border on top of it drew two hairlines. */
.rb-page + .site-footer {
	padding-top: 0;
	border-top: 0;
}