/* ==========================================================================
   Atelier — Groepen & zakelijk, Agenda, Over Atelier, Contact + menu-card overlay
   ========================================================================== */

/* --------------------------------------------------------------------------
   Forms (shared)
   -------------------------------------------------------------------------- */

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: calc(31 * var(--u));
	row-gap: calc(36 * var(--u));
}

.form-grid .field {
	margin-bottom: 0;
}

.form-grid__full {
	grid-column: 1 / -1;
}

.form-grid__actions {
	margin-top: calc(8 * var(--u));
}

.field__input--area {
	height: calc(148 * var(--u));
	resize: vertical;
}

.chipset {
	margin: 0 0 calc(8 * var(--u));
	padding: 0;
	border: 0;
	min-width: 0;
}

.chipset legend {
	padding: 0;
}

.chipset .chips {
	margin-top: calc(12 * var(--u));
}

.chip--input {
	position: relative;
}

.chip--input input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.chip--input:has(input:checked) {
	background: var(--red);
	border-color: var(--red);
	color: var(--beige);
}

.chip--input:has(input:focus-visible) {
	outline: 2px solid var(--red);
	outline-offset: 4px;
}

.link--button {
	padding-top: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-status {
	margin-bottom: calc(24 * var(--u));
	padding: calc(16 * var(--u)) calc(20 * var(--u));
	border: 1px solid var(--ink);
}

.form-status--ok {
	border-color: var(--red);
	color: var(--red);
}

/* --------------------------------------------------------------------------
   Groepen & zakelijk
   -------------------------------------------------------------------------- */

.request {
	margin-top: calc(213 * var(--u));
	padding: 0 var(--m);
	display: grid;
	grid-template-columns: calc(765 * var(--u)) 1fr;
	grid-template-areas:
		"head  head"
		"aside form";
	align-items: start;
}

.request__head {
	grid-area: head;
	display: grid;
	grid-template-columns: calc(504 * var(--u)) 1fr;
	align-items: start;
}

.request__head .display {
	margin-top: calc(-13 * var(--u));
}

.request__aside {
	grid-area: aside;
	margin-top: calc(86 * var(--u));
	width: calc(600 * var(--u));
	max-width: 100%;
}

.request__info {
	display: grid;
	gap: calc(24 * var(--u));
	margin-top: calc(40 * var(--u));
	justify-items: start;
}

.request__form {
	grid-area: form;
	margin-top: calc(86 * var(--u));
}

.why-sleep--flow {
	margin-top: calc(213 * var(--u));
}

.refs {
	margin-top: calc(213 * var(--u));
	padding: 0 var(--m);
}

.refs__head,
.details__head,
.hours__head,
.actions__head {
	display: grid;
	grid-template-columns: calc(504 * var(--u)) 1fr;
	align-items: start;
}

.refs__head .display,
.actions__head .display {
	margin-top: calc(-13 * var(--u));
}

.refs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-top: calc(86 * var(--u));
}

.ref {
	position: relative;
	margin: 0;
	padding-bottom: calc(25 * var(--u));
}

.ref::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--line);
	transform-origin: left center;
}

.ref__quote {
	font-size: max(16px, calc(24 * var(--u)));
	line-height: calc(34 / 24);
}

.ref__name {
	margin-top: calc(24 * var(--u));
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Agenda
   -------------------------------------------------------------------------- */

.page-agenda .events {
	margin-top: calc(261 * var(--u));
}

.menucards {
	position: relative;
	margin-top: calc(199 * var(--u));
	padding: 0 var(--m);
	text-align: center;
}

.menucards__label {
	position: absolute;
	left: var(--m);
	top: calc(20 * var(--u));
	text-align: left;
}

.menucards__text {
	width: calc(560 * var(--u));
	max-width: 100%;
	margin: calc(40 * var(--u)) auto 0;
}

.menucards__chips {
	justify-content: center;
	margin-top: calc(36 * var(--u));
}

.why-sleep--weekly {
	margin-top: calc(210 * var(--u));
}

.page-agenda .insta {
	margin-top: calc(196 * var(--u));
}

main.page-agenda ~ .site-footer {
	margin-top: calc(137 * var(--u));
}

/* Menu-card overlay */
.menucard {
	position: fixed;
	inset: 0;
	z-index: 110;
	display: grid;
	place-items: center;
	padding: calc(40 * var(--u));
	opacity: 0;
	transition: opacity .4s ease;
}

.menucard[hidden] {
	display: none;
}

.menucard.is-open {
	opacity: 1;
}

.menucard__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(32, 32, 32, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.menucard__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(100%, calc(1100 * var(--u)));
	height: min(100%, calc(820 * var(--u)));
	padding: calc(40 * var(--u)) calc(50 * var(--u)) calc(50 * var(--u));
	background: var(--bg);
	border-radius: var(--r) 0 var(--r) 0;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
	translate: 0 calc(30 * var(--u));
	transition: translate .6s var(--ease);
}

.menucard.is-open .menucard__panel {
	translate: 0 0;
}

.menucard__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: .5;
	background: url("../img/texture-paper.webp") top center / 100% auto repeat-y;
	pointer-events: none;
}

.menucard__head,
.menucard__chips,
.menucard__view {
	position: relative;
}

.menucard__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.menucard__close {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: calc(40 * var(--u));
	line-height: 1;
	color: var(--red);
	cursor: pointer;
	transition: rotate .5s var(--ease);
}

.menucard__close:hover {
	rotate: 90deg;
}

.menucard__chips {
	margin-top: calc(24 * var(--u));
}

.menucard__view {
	flex: 1 1 auto;
	margin-top: calc(30 * var(--u));
	border: 1px solid var(--line);
	background: var(--white);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.menucard__frame {
	width: 100%;
	height: 100%;
	border: 0;
}

.menucard__frame[hidden],
.menucard__empty[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Over Atelier
   -------------------------------------------------------------------------- */

.about-hero {
	position: relative;
	min-height: calc(1153 * var(--u));
	padding: calc(131 * var(--u)) var(--m) 0;
}

.about-hero__text {
	width: calc(700 * var(--u));
	max-width: 100%;
}

.about-hero__title {
	margin-top: calc(22 * var(--u));
}

.about-hero__intro {
	width: calc(520 * var(--u));
	max-width: 100%;
	margin-top: calc(40 * var(--u));
}

.about-hero__intro + div {
	margin-top: calc(12 * var(--u));
}

.collage {
	position: absolute;
	inset: calc(131 * var(--u)) 0 0 0;
	pointer-events: none;
}

.collage__item {
	position: absolute;
}

.collage__inner {
	rotate: var(--rot, 0deg);
	will-change: rotate;
}

.collage__item--1 {
	left: calc(899.7 * var(--u));
	top: calc(23.2 * var(--u));
	width: calc(460 * var(--u));
	rotate: -4deg;
}

.collage__item--2 {
	left: calc(1107.4 * var(--u));
	top: calc(317.4 * var(--u));
	width: calc(420 * var(--u));
	rotate: 5deg;
}

.collage__item--3 {
	left: calc(813.6 * var(--u));
	top: calc(565.1 * var(--u));
	width: calc(300 * var(--u));
	rotate: 2deg;
}

.collage__item--1 .collage__photo { aspect-ratio: 460 / 580; }
.collage__item--2 .collage__photo { aspect-ratio: 420 / 500; }
.collage__item--3 .collage__photo { aspect-ratio: 300 / 360; }

.collage__photo {
	box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .12);
}

/* Photographs tossed on the table. */
.js .collage__item[data-reveal="toss"] {
	opacity: 0;
	translate: 0 calc(60 * var(--u));
	transition: opacity .8s ease var(--d, 0s), translate 1.6s var(--ease) var(--d, 0s), rotate 1.6s var(--ease) var(--d, 0s);
}

.js .collage__item--1[data-reveal="toss"] { rotate: -14deg; }
.js .collage__item--2[data-reveal="toss"] { rotate: 15deg; }
.js .collage__item--3[data-reveal="toss"] { rotate: 10deg; }

.js .collage__item[data-reveal="toss"].is-in { opacity: 1; translate: 0 0; }
.js .collage__item--1[data-reveal="toss"].is-in { rotate: -4deg; }
.js .collage__item--2[data-reveal="toss"].is-in { rotate: 5deg; }
.js .collage__item--3[data-reveal="toss"].is-in { rotate: 2deg; }

.ghost--about {
	top: calc(725 * var(--u));
	right: calc(915 * var(--u));
}

.manifest {
	margin-top: calc(83 * var(--u));
	display: grid;
	grid-template-columns: calc(793 * var(--u)) 1fr;
	padding: 0 var(--m);
	text-align: center;
}

.manifest__label,
.manifest__quote {
	grid-column: 1 / -1;
}

.manifest__quote {
	margin: calc(32 * var(--u)) auto 0;
	width: calc(1400 * var(--u));
	max-width: 100%;
}

.manifest__text {
	text-align: left;
	margin-top: calc(87 * var(--u));
}

.manifest__text--left {
	width: calc(640 * var(--u));
	max-width: 100%;
}

.manifest__text--right {
	width: calc(706 * var(--u));
	max-width: 100%;
	margin-top: calc(192 * var(--u));
	justify-self: end;
}

.numbers {
	margin-top: calc(76 * var(--u));
	padding: 0 var(--m);
}

.numbers__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(31 * var(--u));
	margin-top: calc(32 * var(--u));
}

.number__value {
	padding-bottom: calc(10 * var(--u));
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: calc(160 * var(--u));
	line-height: 1;
	color: var(--red);
}

.number__label {
	margin-top: calc(19 * var(--u));
	text-transform: uppercase;
}

.page-over .layers {
	margin-top: calc(190 * var(--u));
}

.timeline {
	margin-top: calc(170 * var(--u));
	padding: 0 var(--m);
}

.timeline__title {
	margin-top: calc(-10 * var(--u));
	text-align: right;
}

.timeline__track {
	position: relative;
	margin-top: calc(90 * var(--u));
}

.timeline__rule {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(10 * var(--u));
}

.timeline__points {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--gap);
}

.moment {
	width: calc(260 * var(--u));
}

.moment__dot {
	width: calc(22 * var(--u));
	height: calc(22 * var(--u));
	min-width: 14px;
	min-height: 14px;
}

.moment__time {
	margin-top: calc(12 * var(--u));
	font-family: var(--font-display);
	font-weight: 600;
	font-size: calc(40 * var(--u));
	line-height: calc(48 / 40);
	color: var(--red);
}

.moment__title {
	margin-top: calc(12 * var(--u));
	text-transform: uppercase;
}

.moment__text {
	margin-top: calc(12 * var(--u));
	opacity: .8;
}

.page-over .coffee {
	margin-top: calc(200 * var(--u));
}

.page-over .insta {
	margin-top: calc(103 * var(--u));
}

.page-over .ghost--insta {
	top: calc(349 * var(--u));
	left: auto;
	right: calc(1120 * var(--u));
}

.team {
	margin-top: calc(180 * var(--u));
	padding: 0 var(--m);
}

.team__title {
	margin-left: calc(504 * var(--u));
}

.team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(31 * var(--u));
	align-items: start;
	margin-top: calc(123 * var(--u));
}

.polaroid {
	padding: calc(16 * var(--u));
	background: var(--beige);
	box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, .12);
}

.polaroid--1 { margin-top: calc(4 * var(--u)); rotate: 2.5deg; }
.polaroid--2 { margin-top: calc(32 * var(--u)); rotate: -1.5deg; }
.polaroid--3 { rotate: 1deg; }
.polaroid--4 { margin-top: calc(31 * var(--u)); rotate: -2deg; }

.polaroid__photo {
	aspect-ratio: 320 / 360;
}

.polaroid__name {
	margin-top: calc(16 * var(--u));
	text-transform: uppercase;
}

.polaroid__fav {
	margin-top: calc(8 * var(--u));
	font-size: max(11px, calc(14 * var(--u)));
	line-height: calc(20 / 14);
	opacity: .7;
}

.js .polaroid[data-reveal="stamp"] {
	transform: scale(1.4) translateY(calc(40 * var(--u)));
}

.js .polaroid[data-reveal="stamp"].is-in,
.js .team .polaroid.is-in {
	transform: none;
}

main.page-over ~ .site-footer {
	margin-top: calc(205 * var(--u));
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.actions {
	margin-top: calc(199 * var(--u));
	padding: 0 var(--m);
}

.actions__head {
	grid-template-columns: calc(504 * var(--u)) 1fr;
}

.actions__head .display {
	grid-column: 2;
}

.actions__text {
	grid-column: 2;
	width: calc(600 * var(--u));
	max-width: 100%;
	margin-top: calc(37 * var(--u));
}

.actions .trio {
	margin-top: calc(63 * var(--u));
}

.details {
	margin-top: calc(200 * var(--u));
	padding: 0 var(--m);
}

.details__head .display,
.hours__head .display {
	margin-top: calc(-13 * var(--u));
	text-align: right;
}

.details__map {
	display: block;
	margin-top: calc(87 * var(--u));
}

.details__mapphoto {
	aspect-ratio: 1500 / 362;
}

.details__street {
	margin-top: calc(14 * var(--u));
}

.facts--row {
	position: relative;
	justify-content: space-between;
	gap: calc(40 * var(--u));
	margin: calc(14 * var(--u)) 0 0;
	padding-bottom: calc(13 * var(--u));
}

.facts--row::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--line);
}

.facts--row .fact {
	padding-bottom: 0;
	white-space: normal;
}

.facts--row .fact::after {
	display: none;
}

.details__cta {
	margin-top: calc(14 * var(--u));
}

.hours {
	margin-top: calc(195 * var(--u));
	padding: 0 var(--m);
}

.hours__table {
	width: 100%;
	margin-top: calc(90 * var(--u));
	border-collapse: collapse;
	text-align: left;
	text-transform: uppercase;
}

.hours__table th,
.hours__table td {
	width: 25%;
	padding: calc(20 * var(--u)) 0 calc(12 * var(--u));
	border-bottom: 1px solid var(--line);
	font-weight: 400;
	vertical-align: top;
}

.hours__table thead th {
	padding: 0 0 calc(12 * var(--u));
	font-size: max(11px, calc(14 * var(--u)));
	line-height: calc(20 / 14);
	opacity: .6;
}

.faq {
	display: grid;
	grid-template-columns: calc(950 * var(--u)) 1fr;
	column-gap: calc(70 * var(--u));
	align-items: start;
	margin-top: calc(232 * var(--u));
	padding: 0 var(--m);
}

.faq .display {
	grid-column: 1 / -1;
	margin-top: calc(-13 * var(--u));
}

.faq__list {
	margin-top: calc(55 * var(--u));
}

.faq-item {
	position: relative;
	padding-top: calc(28 * var(--u));
	padding-bottom: calc(20 * var(--u));
}

.faq-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--line);
	transform-origin: left center;
}

.faq-item__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: calc(20 * var(--u));
	list-style: none;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: calc(40 * var(--u));
	line-height: calc(48 / 40);
	color: var(--red);
	text-transform: uppercase;
	cursor: pointer;
}

.faq-item__q::-webkit-details-marker {
	display: none;
}

.faq-item__sign::before {
	content: "+";
}

.faq-item[open] .faq-item__sign::before {
	content: "–";
}

.faq-item__a {
	max-width: calc(900 * var(--u));
	margin-top: calc(20 * var(--u));
}

.faq__photo {
	margin-top: calc(83 * var(--u));
}

.faq__photoframe {
	aspect-ratio: 480 / 620;
}

.message {
	display: grid;
	grid-template-columns: calc(600 * var(--u)) 1fr;
	column-gap: calc(165 * var(--u));
	align-items: start;
	margin-top: calc(190 * var(--u));
	padding: 0 var(--m);
}

.message__title {
	grid-column: 1 / -1;
	margin: calc(-13 * var(--u)) 0 0 calc(504 * var(--u));
}

.message__photo,
.message__form {
	margin-top: calc(100 * var(--u));
}

.message__photoframe {
	aspect-ratio: 600 / 700;
}

.message__note {
	margin-top: calc(-2 * var(--u));
	width: calc(600 * var(--u));
	max-width: 100%;
	font-size: max(11px, calc(14 * var(--u)));
	line-height: calc(20 / 14);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.form-grid {
		grid-template-columns: 1fr;
		row-gap: calc(26 * var(--u));
	}

	.request,
	.request__head,
	.refs__head,
	.details__head,
	.hours__head,
	.actions__head,
	.manifest,
	.faq,
	.message {
		display: block;
	}

	.request,
	.refs,
	.why-sleep--flow,
	.why-sleep--weekly,
	.menucards,
	.details,
	.hours,
	.faq,
	.message,
	.numbers,
	.timeline,
	.team,
	.actions,
	.page-over .layers,
	.page-over .coffee {
		margin-top: calc(100 * var(--u));
	}

	.request__head .display,
	.refs__head .display,
	.actions__head .display,
	.details__head .display,
	.hours__head .display,
	.faq .display,
	.message__title,
	.timeline__title {
		margin: calc(14 * var(--u)) 0 0;
		text-align: left;
	}

	.request__aside,
	.request__form {
		width: auto;
		margin-top: calc(30 * var(--u));
	}

	.refs__grid {
		grid-template-columns: 1fr;
		gap: calc(30 * var(--u));
		margin-top: calc(30 * var(--u));
	}

	.page-agenda .events {
		margin-top: calc(100 * var(--u));
	}

	.menucards {
		text-align: left;
	}

	.menucards__label {
		position: static;
	}

	.menucards__title {
		margin-top: calc(14 * var(--u));
	}

	.menucards__text {
		width: auto;
		margin: calc(20 * var(--u)) 0 0;
	}

	.menucards__chips {
		justify-content: flex-start;
		margin-top: calc(22 * var(--u));
	}

	.menucard {
		padding: calc(16 * var(--u));
	}

	.menucard__panel {
		height: 100%;
		padding: calc(24 * var(--u)) calc(20 * var(--u));
		border-radius: calc(24 * var(--u)) 0 calc(24 * var(--u)) 0;
	}

	.about-hero {
		min-height: 0;
		padding-top: calc(96 * var(--u));
	}

	.about-hero__text,
	.about-hero__intro {
		width: auto;
	}

	.about-hero__intro {
		margin-top: calc(20 * var(--u));
	}

	.collage {
		position: relative;
		inset: auto;
		height: 70vw;
		margin-top: calc(40 * var(--u));
	}

	.collage__item--1 { left: 2vw; top: 0; width: 42vw; }
	.collage__item--2 { left: 50vw; top: 10vw; width: 40vw; }
	.collage__item--3 { left: 24vw; top: 36vw; width: 30vw; }

	.ghost--about {
		top: calc(60 * var(--u));
		right: 20%;
	}

	.manifest {
		text-align: left;
	}

	.manifest__quote {
		width: auto;
		margin: calc(14 * var(--u)) 0 0;
	}

	.manifest__text,
	.manifest__text--right {
		width: auto;
		margin-top: calc(20 * var(--u));
	}

	.numbers__grid {
		grid-template-columns: 1fr 1fr;
		gap: calc(28 * var(--u)) calc(16 * var(--u));
		margin-top: calc(20 * var(--u));
	}

	.number__value {
		font-size: calc(80 * var(--u));
	}

	.timeline__track {
		margin-top: calc(30 * var(--u));
	}

	.timeline__rule {
		display: none;
	}

	.timeline__points {
		flex-direction: column;
		gap: calc(28 * var(--u));
	}

	.moment {
		width: auto;
		display: grid;
		grid-template-columns: calc(22 * var(--u)) 1fr;
		column-gap: calc(16 * var(--u));
	}

	.moment__dot {
		grid-row: 1 / span 3;
		margin-top: calc(6 * var(--u));
	}

	.moment__time,
	.moment__title,
	.moment__text {
		grid-column: 2;
		margin-top: 0;
	}

	.moment__title,
	.moment__text {
		margin-top: calc(4 * var(--u));
	}

	.team__title {
		margin-left: 0;
	}

	.team__grid {
		grid-template-columns: 1fr 1fr;
		gap: calc(28 * var(--u)) calc(14 * var(--u));
		margin-top: calc(34 * var(--u));
	}

	.polaroid {
		padding: calc(10 * var(--u));
	}

	.polaroid--1,
	.polaroid--2,
	.polaroid--3,
	.polaroid--4 {
		margin-top: 0;
	}

	.polaroid__name {
		font-size: calc(13 * var(--u));
		line-height: 1.4;
	}

	.polaroid__fav {
		font-size: calc(11 * var(--u));
	}

	.actions__text {
		width: auto;
		margin-top: calc(18 * var(--u));
	}

	.actions .trio {
		margin-top: calc(28 * var(--u));
	}

	.details__map {
		margin-top: calc(28 * var(--u));
	}

	.details__mapphoto {
		aspect-ratio: 4 / 3;
	}

	.facts--row {
		flex-direction: column;
		gap: calc(10 * var(--u));
	}

	.hours__table {
		margin-top: calc(28 * var(--u));
		font-size: calc(12 * var(--u));
	}

	.hours__table th,
	.hours__table td {
		padding: calc(12 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u)) 0;
	}

	.faq__list {
		margin-top: calc(24 * var(--u));
	}

	.faq-item__q {
		font-size: calc(26 * var(--u));
		line-height: 1.2;
	}

	.faq__photo {
		margin-top: calc(34 * var(--u));
	}

	.message__photo,
	.message__form {
		margin-top: calc(28 * var(--u));
	}

	.message__photoframe {
		aspect-ratio: 4 / 5;
	}

	.message__note {
		width: auto;
	}

	main.page-over ~ .site-footer,
	main.page-agenda ~ .site-footer {
		margin-top: calc(100 * var(--u));
	}
}

/* --------------------------------------------------------------------------
   Three layers of home (arrangement) + reserve block
   -------------------------------------------------------------------------- */

.crumbs {
	display: flex;
	gap: calc(12 * var(--u));
	padding: calc(108 * var(--u)) var(--m) 0;
	text-transform: uppercase;
}

.crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.page-hero--short {
	padding-top: calc(24 * var(--u));
}

.page-hero--short .page-hero__media {
	height: calc(560 * var(--u));
}

.page-three .layers {
	margin-top: calc(201 * var(--u));
}

.page-three .timeline {
	margin-top: calc(190 * var(--u));
}

.extras {
	position: relative;
	margin-top: calc(210 * var(--u));
	padding: 0 var(--m);
}

.extras__title {
	margin: calc(-13 * var(--u)) 0 0 calc(504 * var(--u));
}

.extras .duo {
	margin-top: calc(87 * var(--u));
}

.extras__cta {
	margin-top: calc(-36 * var(--u));
}

.ghost--extras {
	top: calc(999 * var(--u));
	left: calc(1061 * var(--u));
}

.reserve {
	margin-top: calc(120 * var(--u));
	padding: 0 var(--m) calc(120 * var(--u));
}

.reserve__body {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: calc(40 * var(--u));
	margin-top: calc(21 * var(--u));
}

.reserve__title {
	width: calc(780 * var(--u));
	max-width: 100%;
}

.reserve__text {
	width: calc(560 * var(--u));
	max-width: 100%;
}

.reserve__actions {
	display: flex;
	align-items: center;
	gap: calc(32 * var(--u));
	margin-top: calc(32 * var(--u));
}

main.page-three ~ .site-footer {
	margin-top: calc(90 * var(--u));
}

@media (max-width: 767px) {
	.crumbs {
		padding-top: calc(80 * var(--u));
		font-size: calc(13 * var(--u));
	}

	.page-hero--short {
		padding-top: calc(16 * var(--u));
	}

	.page-hero--short .page-hero__media {
		height: auto;
	}

	.page-three .layers,
	.page-three .timeline,
	.extras {
		margin-top: calc(100 * var(--u));
	}

	.extras__title {
		margin: 0;
	}

	.extras .duo {
		margin-top: calc(28 * var(--u));
	}

	.extras__cta {
		margin-top: calc(22 * var(--u));
	}

	.ghost--extras {
		display: none;
	}

	.reserve {
		margin-top: calc(80 * var(--u));
		padding-bottom: calc(60 * var(--u));
	}

	.reserve__body {
		flex-direction: column;
		align-items: flex-start;
		gap: calc(24 * var(--u));
	}

	.reserve__title,
	.reserve__text {
		width: auto;
	}

	.reserve__actions {
		flex-wrap: wrap;
		gap: calc(18 * var(--u));
	}

	main.page-three ~ .site-footer {
		margin-top: calc(80 * var(--u));
	}
}