/*
 * The home page, to the Main (1440) and HomeMobile (390) boards, in the friendly house style: bold two-tone
 * titles, centred over grids, soft rounded cards and photo tiles, and blue bands for the strong moments.
 *
 * Each band is a section with its own class; the phone and wide-screen rules for a band sit under it. The
 * phone leaves three bands out (the payment plans, the five steps and the closing invitation; see the end of
 * the file) and shortens some wording, which the template carries as phone labels.
 */

/* Sections stack edge to edge; each one sets its own padding on the design's side gutter. */
.maxkan-home .wp-block-group > *,
.maxkan-home > * {
	margin-block: 0;
}

.maxkan-home h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand);
}

@media (min-width: 782px) {
	.maxkan-home h2 {
		font-size: var(--maxkan-title);
		line-height: 1.1;
	}
}

/*
 * Hero. Wide: a navy panel of words and the photograph, half the width each, 600px tall. Phone: the photograph
 * fills a 560px band and the words sit at its foot over a navy fade.
 */
/*
 * The hero on a phone: the photograph, then the words on a navy block beneath it. Nothing is laid over the
 * picture, so it stays sharp and the words never fight it; on a wide screen the two sit side by side.
 */
.wp-site-blocks .maxkan-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.maxkan-hero .maxkan-hero__photo {
	order: -1; /* The picture first, though the words come first in the markup (and on a wide screen). */
	height: clamp(220px, 62vw, 320px);
}

.maxkan-hero .maxkan-hero__photo img {
	object-position: 50% 30%;
}

.maxkan-hero .maxkan-hero__panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 16px 32px;
	background: var(--wp--preset--color--brand);
}

.maxkan-hero__title {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.maxkan-hero .maxkan-hero__lead {
	max-width: 480px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--wp--preset--color--sky);
}

.maxkan-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * Wide, the land is the hero: the photograph runs the full width and the words sit over its left side, where a
 * navy shade comes in from the edge. One large statement in white, rather than half the screen given to a
 * navy panel that says nothing the photograph could not.
 */
@media (min-width: 782px) {
	/* At least 660px tall, and taller if the words need it, so the search below never covers them. */
	.wp-site-blocks .maxkan-hero {
		display: grid;
		grid-template-areas: "hero";
		min-height: 660px;
	}

	.maxkan-hero .maxkan-hero__photo,
	.maxkan-hero .maxkan-hero__panel {
		grid-area: hero;
	}

	.maxkan-hero .maxkan-hero__photo {
		position: relative;
		order: 0;
		height: 100%;
		min-height: 660px;
		margin: 0;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(
				to right,
				rgb(7 28 61 / 90%) 0%,
				rgb(7 28 61 / 72%) 42%,
				rgb(7 28 61 / 0%) 76%
			);
		}
	}

	/* The photograph fills whatever height the words need; it never sets the height itself. */
	.maxkan-hero .maxkan-hero__photo img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 45%;
	}

	.wp-site-blocks .maxkan-hero .maxkan-hero__panel {
		position: relative;
		z-index: 1;
		justify-content: center;
		gap: 24px;

		/*
		 * The words get 760px of their own, measured from the page's edge margin: the margin grows with the
		 * screen, so a width that included it left a wide screen's statement a word to a line.
		 */
		box-sizing: border-box;
		max-width: calc(760px + var(--maxkan-gutter));
		padding: 64px 0 112px var(--maxkan-gutter);
		background: none;
	}

	/* The statement carries the page: set large and tight, two lines at most on a laptop. */
	.maxkan-hero .maxkan-hero__title {
		max-width: 13ch;
		margin: 0;
		font-size: clamp(48px, 5.6vw, 84px);
		line-height: 0.98;
		letter-spacing: -0.035em;
	}

	/* "title deeds" stays together: the line breaks before the phrase, never inside it. */
	.maxkan-hero .maxkan-hero__title .maxkan-accent {
		white-space: nowrap;
	}

	.maxkan-hero .maxkan-hero__lead {
		max-width: 520px;
		font-size: 19px;
		line-height: 1.55;
		color: rgb(255 255 255 / 86%);
	}

	.maxkan-hero .maxkan-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		margin-block-start: 4px;
	}
}

/*
 * The search. Wide: a white card lifted 52px into the hero. Phone: the fields stack on a navy band under it,
 * white wells and a green button, the way the phone board draws it.
 */
.wp-site-blocks .maxkan-hero-search {
	padding: 20px var(--maxkan-gutter);
	background: var(--wp--preset--color--brand);
}

@media (max-width: 781px) {
	/* On the navy under the photograph, the chosen kind is gold, so it never sinks into the ground. */
	.maxkan-hero-search .maxkan-search__kind input:checked + span {
		background: var(--wp--preset--color--gold);
		color: var(--wp--preset--color--brand);
	}

	.maxkan-hero-search .maxkan-search {
		gap: 10px;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.maxkan-hero-search .maxkan-search__field {
		gap: 2px;
		padding: 10px 14px;
		background: var(--wp--preset--color--white);
	}

	.maxkan-hero-search .maxkan-action-button {
		background: var(--wp--preset--color--green);
		font-size: 15px;
	}

	.maxkan-hero-search .maxkan-action-button svg {
		display: none;
	}
}

@media (min-width: 782px) {
	.wp-site-blocks .maxkan-hero-search {
		position: relative;
		z-index: 2;
		margin-block-start: -52px;
		padding: 0 var(--maxkan-gutter);
		background: none;
	}
}

/*
 * Four promises as one plain row of facts, divided by rules on a wide screen, two by two on a phone. No ticks
 * in circles: the words carry it.
 */
.wp-site-blocks .maxkan-promises {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 12px;
	padding: 24px var(--maxkan-gutter);
}

.maxkan-promises__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.maxkan-promises__title {
	font-size: 15px;
	font-weight: 800;
	line-height: normal;
	color: var(--wp--preset--color--brand);
}

.maxkan-promises__text {
	font-size: 13px;
	line-height: normal;
	color: var(--wp--preset--color--slate);
}

@media (min-width: 782px) {
	.wp-site-blocks .maxkan-promises {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		padding: 48px var(--maxkan-gutter) 8px;
	}

	.maxkan-promises__item {
		gap: 6px;
		margin-inline-end: 28px;
		padding: 2px 28px 2px 0;
		border-inline-end: 1px solid var(--wp--preset--color--line);
	}

	.maxkan-promises__item:last-child {
		margin-inline-end: 0;
		padding-inline-end: 0;
		border: 0;
	}

	.maxkan-promises__title {
		font-size: 17px;
	}

	.maxkan-promises__text {
		font-size: 14px;
		line-height: 1.5;
	}
}

/* What are you looking for: four doors on white, straight after the promises. */
.wp-site-blocks .maxkan-home-sells {
	padding: 40px var(--maxkan-gutter) var(--maxkan-section);
}

/* Plots selling now, on the tinted band. */
.wp-site-blocks .maxkan-home-plots {
	display: flex;
	flex-direction: column;

	/* Two headed sections share this band; they need the air between them to read as two, not one. */
	gap: 32px;
	padding: 32px var(--maxkan-gutter);
}

/* The phone's extra way onward, centred under the button to all the properties. */
.maxkan-home-plots .maxkan-home-plots__faqs {
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
}

@media (max-width: 781px) {
	.maxkan-home-plots .maxkan-home-plots__faqs {
		display: flex;
	}
}

@media (min-width: 782px) {
	.wp-site-blocks .maxkan-home-plots {
		gap: 64px;
		padding: var(--maxkan-section) var(--maxkan-gutter);
	}

	/* The same section header as the places band: the heading on the left, the way out on the right. */
	.maxkan-home-plots .maxkan-properties__head {
		display: flex;
		gap: 24px;
		align-items: baseline;
		justify-content: space-between;
	}

	.maxkan-home-plots .maxkan-properties__head > div {
		text-align: start;
	}

	.maxkan-home-plots .maxkan-properties__link {
		justify-self: start;
		order: 0;
		height: auto;
		padding: 0;
		border: 0;
		border-bottom: 2px solid var(--wp--preset--color--gold);
		border-radius: 0;

		/* The pill's white ground has to go with its pill shape, or a white box is left behind the words. */
		background: transparent;
		color: var(--wp--preset--color--brand);
		white-space: nowrap;
	}

	.maxkan-home-plots .maxkan-properties__link:hover,
	.maxkan-home-plots .maxkan-properties__link:focus-visible {
		background: transparent;
		border-bottom-color: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--brand);
	}
}

/*
 * Where we sell: a centred title over photo tiles, the name on each one's top corner and how many projects at
 * its foot, and a pill to all the properties under them. Wide: four columns of 260px tiles. Phone: one row of
 * 220px tiles that scrolls sideways.
 */
.wp-site-blocks .maxkan-home-places {
	padding: 36px var(--maxkan-gutter);
}

.maxkan-home-places .maxkan-locations {
	gap: 16px;
}

.maxkan-home-places .maxkan-locations__head {
	display: contents;
}

.maxkan-home-places .maxkan-locations__intro {
	font-size: 15px;
	line-height: normal;
	margin-block-start: -8px;
}

.maxkan-home-places .maxkan-locations__link {
	order: 1;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	height: var(--wp--custom--tap--button);
	padding: 0 28px;
	border: 1.5px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--brand);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.maxkan-home-places .maxkan-locations__link:hover,
.maxkan-home-places .maxkan-locations__link:focus-visible {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

.maxkan-home-places .maxkan-locations__name {
	font-size: 20px;
}

@media (min-width: 782px) {
	/* The payment plans above are on white too, and already leave their own space under them. */
	.wp-site-blocks .maxkan-home-places {
		padding: var(--maxkan-section) var(--maxkan-gutter);
	}

	.maxkan-home-places .maxkan-locations {
		gap: 36px;
	}

	/*
	 * The heading sits on the left with the way out of the band beside it, rather than centred with a pill
	 * underneath. Four bands in a row on the same centre line read as a template; this one turns the axis.
	 */
	.maxkan-home-places .maxkan-locations__head {
		display: flex;
		gap: 24px;
		align-items: baseline;
		justify-content: space-between;
	}

	.maxkan-home-places .maxkan-locations__intro {
		margin-block-start: -20px;
		font-size: 17px;
	}

	.maxkan-home-places .maxkan-locations__link {
		order: 0;
		height: auto;
		padding: 0;
		border: 0;
		border-bottom: 2px solid var(--wp--preset--color--gold);
		border-radius: 0;

		/* The pill's white ground has to go with its pill shape, or a white box is left behind the words. */
		background: transparent;
		color: var(--wp--preset--color--brand);
		white-space: nowrap;
	}

	.maxkan-home-places .maxkan-locations__link:hover,
	.maxkan-home-places .maxkan-locations__link:focus-visible {
		background: transparent;
		border-bottom-color: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--brand);
	}

	.maxkan-home-places .maxkan-locations__name {
		font-size: 24px;
	}

	.maxkan-home-places .maxkan-locations__meta {
		font-size: 14px;
	}
}

/*
 * From site visit to title deed: the heading on the left, the five steps across the page on one line, each a
 * navy number (the last in gold, the title deed), and under them the road photograph beside the figures.
 * A phone runs the steps down the page.
 */
.wp-site-blocks .maxkan-steps {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding: var(--maxkan-section) var(--maxkan-gutter);
}

.maxkan-steps__head {
	display: grid;
	gap: 8px;
}

.maxkan-steps__head p {
	font-size: 17px;
	color: var(--wp--preset--color--slate);
}

.maxkan-steps .maxkan-steps__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 28px;
}

.maxkan-steps .maxkan-steps__list li {
	padding: 58px 0 0;
	border: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--slate);
}

/* The number, a rounded square, and the line that runs on from it to the next step. */
.maxkan-steps .maxkan-steps__list li::before {
	inset-block-start: 0;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 14px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-size: 16px;
	font-weight: 800;
}

.maxkan-steps .maxkan-steps__list li::after {
	content: "";
	position: absolute;
	inset-block-start: 21px;
	inset-inline: 56px -16px;
	height: 2px;
	background: #e1d6b4;
}

.maxkan-steps .maxkan-steps__list li:last-child::before {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--brand);
}

.maxkan-steps .maxkan-steps__list li:last-child::after {
	display: none;
}

.maxkan-steps .maxkan-steps__list strong {
	display: block;
	margin-block-end: 6px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--wp--preset--color--brand);
}

/* The proof under the steps: the road photograph beside the figures, in one white panel. */
.maxkan-steps__proof {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-block-start: 12px !important;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
}

.maxkan-steps .maxkan-steps__photo {
	min-height: 280px;
}

.maxkan-steps__proof .maxkan-numbers {
	border: 0;
	border-inline-start: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
}

/* No photograph chosen: the figures take the whole panel. */
.maxkan-steps__proof:not(:has(.maxkan-steps__photo img[src])) {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1099px) {
	.maxkan-steps .maxkan-steps__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.maxkan-steps .maxkan-steps__list li {
		min-height: 64px;
		padding: 0 0 22px 60px;
	}

	.maxkan-steps .maxkan-steps__list li::before {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}

	.maxkan-steps .maxkan-steps__list li::after {
		display: none;
	}

	.maxkan-steps__proof {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked over the figures, the photograph is a strip, not a square the width of the screen. */
	.maxkan-steps .maxkan-steps__photo {
		height: clamp(200px, 32vw, 300px);
		min-height: 0;
	}

	.maxkan-steps__proof .maxkan-numbers {
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--line);
	}
}

/*
 * Buying from abroad. Wide: the photograph (640 of 1440) beside the words on navy. Phone: the photograph is a
 * 200px picture inside the band, over a shorter paragraph and one button.
 */
.wp-site-blocks .maxkan-abroad {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px var(--maxkan-gutter);
}

.maxkan-abroad .maxkan-abroad__photo {
	height: 200px;
}

.maxkan-abroad .maxkan-abroad__photo img {
	border-radius: var(--wp--custom--radius--card);
}

.maxkan-abroad .maxkan-abroad__panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0;
}

.maxkan-abroad__kicker {
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	color: var(--wp--preset--color--mint);
}

.maxkan-home .maxkan-abroad__title {
	letter-spacing: 0;
	color: var(--wp--preset--color--white);
}

/* Three things a buyer abroad needs to hear, each after a short gold dash. */
.maxkan-abroad .maxkan-abroad__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--haze);
}

.maxkan-abroad__list li {
	display: flex;
	gap: 12px;
}

.maxkan-abroad__list li::before {
	content: "—";
	flex: none;
	font-weight: 800;
	color: var(--wp--preset--color--mint);
}

.maxkan-abroad__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 782px) {
	.wp-site-blocks .maxkan-abroad {
		display: grid;
		grid-template-columns: calc(640 / 1440 * 100%) minmax(0, 1fr);
		gap: 0;
		padding: 0;
	}

	.maxkan-abroad .maxkan-abroad__photo {
		height: 560px;
	}

	.maxkan-abroad .maxkan-abroad__photo img {
		border-radius: 0;
	}

	.maxkan-abroad .maxkan-abroad__panel {
		justify-content: center;
		gap: 22px;
		padding: 72px var(--maxkan-gutter) 72px 72px;
	}

	.maxkan-home .maxkan-abroad__title {
		letter-spacing: -0.01em;
	}

	.maxkan-abroad__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/*
 * From our buyers: the title on the left, the first story large on the gold tint and the other two stacked
 * beside it. A phone runs them in a row that scrolls
 * sideways, so the stories stay near the top of what a thumb reaches.
 */
.wp-site-blocks .maxkan-stories {
	padding: 36px var(--maxkan-gutter);
}

.maxkan-stories .maxkan-quotes {
	gap: 18px;
}

.maxkan-stories .maxkan-quotes__grid {
	display: flex;
	gap: 14px;
	margin-inline-end: calc(var(--maxkan-gutter) * -1);
	padding: 0 var(--maxkan-gutter) 24px 0;
	overflow-x: auto;
	scroll-snap-type: x proximity;
}

.maxkan-stories .maxkan-quote {
	flex: none;
	width: 290px;
	scroll-snap-align: start;
}

@media (min-width: 782px) {
	.wp-site-blocks .maxkan-stories {
		padding: var(--maxkan-section) var(--maxkan-gutter);
	}

	.maxkan-stories .maxkan-quotes {
		gap: 36px;
	}

	.maxkan-stories .maxkan-quotes__grid {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 24px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.maxkan-stories .maxkan-quote {
		width: auto;
	}

	.maxkan-stories .maxkan-quote:first-child {
		grid-row: span 2;
		justify-content: space-between;
		padding: 36px;
		border: 0;
		background: var(--wp--preset--color--green-tint);
	}

	.maxkan-stories .maxkan-quote:first-child .maxkan-quote__body {
		font-size: 22px;
		font-weight: 700;
		line-height: 1.4;
		color: var(--wp--preset--color--brand);
	}
}

/*
 * Frequently asked questions. Wide: the heading, the "Still unsure?" card and the link in a 400px column beside
 * the questions. Phone: the heading, the questions and the link, one after another; the card is left out.
 */
.wp-site-blocks .maxkan-home-faqs {
	padding: 32px var(--maxkan-gutter);
}

.maxkan-home-faqs .maxkan-faqs {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.maxkan-home-faqs .maxkan-faqs__aside {
	display: contents;
}

.maxkan-home-faqs .maxkan-faqs__aside h2 {
	margin-block-end: 8px;
}

.maxkan-home-faqs .maxkan-faqs__card {
	display: none;
}

.maxkan-home-faqs .maxkan-faqs__card p {
	font-size: 14px;
	line-height: normal;
}

.maxkan-home-faqs .maxkan-faqs__card .maxkan-action-button {
	margin: 0;
}

.maxkan-home-faqs .maxkan-faqs__card .maxkan-faqs__aside-heading {
	font-size: 17px;
	color: var(--wp--preset--color--brand);
}

.maxkan-home-faqs .maxkan-faqs__all a {
	font-size: 16px;
	line-height: normal;
}

.maxkan-home-faqs .maxkan-faqs__all {
	order: 1;
	margin-block-start: 16px;
}

/* Each question is a white rounded card on the tint, a little apart from the next. */
.maxkan-home-faqs .maxkan-faqs__list {
	gap: 10px;
}

.maxkan-home-faqs .maxkan-faq {
	padding: 0 18px;
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
}

.maxkan-home-faqs .maxkan-faq summary {
	gap: 12px;
	min-height: 0;
	padding: 18px 0;
	font-size: 16px;
	line-height: normal;
}

.maxkan-home-faqs .maxkan-faq[open] summary {
	padding-block-end: 8px;
}

.maxkan-home-faqs .maxkan-faq__mark {
	width: 12px;
	height: 12px;
	color: var(--wp--preset--color--green);
}

.maxkan-home-faqs .maxkan-faq__mark::before,
.maxkan-home-faqs .maxkan-faq__mark::after {
	width: 12px;
}

.maxkan-home-faqs .maxkan-faq__answer {
	max-width: 680px;
	padding-block-end: 18px;
	font-size: 15px;
	line-height: 1.55;
}

.maxkan-home-faqs .maxkan-faq__answer p {
	margin: 0;
}

@media (min-width: 782px) {
	.wp-site-blocks .maxkan-home-faqs {
		padding: var(--maxkan-section) var(--maxkan-gutter);
	}

	.maxkan-home-faqs .maxkan-faqs {
		display: grid;
		grid-template-columns: 400px minmax(0, 1fr);
		gap: 72px;
		align-items: start;
	}

	.maxkan-home-faqs .maxkan-faqs__aside {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.maxkan-home-faqs .maxkan-faqs__aside h2 {
		margin: 0;
	}

	.maxkan-home-faqs .maxkan-faqs__card {
		display: flex;
		flex-direction: column;
	}

	.maxkan-home-faqs .maxkan-faqs__all {
		margin: 0;
	}

	.maxkan-home-faqs .maxkan-faqs__all a {
		font-size: 15px;
	}

	.maxkan-home-faqs .maxkan-faqs__list {
		gap: 12px;
	}

	.maxkan-home-faqs .maxkan-faq {
		padding: 0 26px;
	}

	.maxkan-home-faqs .maxkan-faq summary {
		padding: 22px 0;
		font-size: 18px;
	}

	.maxkan-home-faqs .maxkan-faq[open] summary {
		padding-block-end: 10px;
	}

	.maxkan-home-faqs .maxkan-faq__mark {
		width: 14px;
		height: 14px;
	}

	.maxkan-home-faqs .maxkan-faq__mark::before,
	.maxkan-home-faqs .maxkan-faq__mark::after {
		width: 14px;
	}

	.maxkan-home-faqs .maxkan-faq__answer {
		padding-block-end: 22px;
		font-size: 16px;
		line-height: 1.6;
	}
}

@media (min-width: 782px) and (max-width: 1099px) {
	.maxkan-home-faqs .maxkan-faqs {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/*
 * See the land before you pay: one rounded navy panel, the photograph of the gate on its left, the words and the
 * two ways to book on its right.
 */
.wp-site-blocks .maxkan-cta-visit {
	padding: var(--maxkan-section) var(--maxkan-gutter);
	background: var(--wp--preset--color--white);
}

.wp-site-blocks .maxkan-cta-visit {
	gap: 0;
}

.maxkan-cta-visit > * {
	margin: 0;
}

.maxkan-cta-visit .maxkan-cta-visit__photo,
.maxkan-cta-visit .maxkan-cta-visit__panel {
	background: var(--wp--preset--color--brand);
}

.maxkan-cta-visit .maxkan-cta-visit__photo {
	border-radius: 24px 0 0 24px;
}

.maxkan-cta-visit .maxkan-cta-visit__panel {
	align-self: stretch;
	justify-content: center;
	padding: 48px;
	border-radius: 0 24px 24px 0;
}

.maxkan-cta-visit .maxkan-cta-visit__panel h2 {
	max-width: 14ch;
	font-size: clamp(2rem, 3vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.maxkan-cta-visit__lead {
	max-width: 440px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--wp--preset--color--haze);
}

.maxkan-cta-visit__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.maxkan-cta-visit .maxkan-action-button--outline {
	background: transparent;
	border-color: rgb(255 255 255 / 50%);
	color: var(--wp--preset--color--white);
}

/*
 * What the phone leaves out: two whole bands, and the extras marked wide-only. Last in the file, so it
 * outranks each band's own display.
 */
@media (max-width: 781px) {
	.wp-site-blocks .maxkan-plans,
	.wp-site-blocks .maxkan-cta-visit,
	.maxkan-home .maxkan-home__wide-only {
		display: none;
	}
}

/*
 * Read before you buy: the title, a line and the link to every guide on the left, and the three guides as a
 * reading list on the right, each a topic, a title and an arrow on a hairline. Not three nearly empty boxes.
 */
.wp-site-blocks .maxkan-home-guides {
	display: grid;
	gap: 20px;
	padding: 0 var(--maxkan-gutter) var(--maxkan-section);
}

/* The guides block brings a page's own padding; inside this band the band's is enough. */
.wp-site-blocks .maxkan-home-guides > .maxkan-guides,
.maxkan-home-guides .maxkan-guides__results {
	display: contents;
	padding: 0;
}

.maxkan-home-guides .maxkan-guides__intro {
	align-items: flex-start;
	padding: 0;
	text-align: start;
}

.maxkan-home-guides .maxkan-guides__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.maxkan-home-guides .maxkan-guide-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.maxkan-home-guides .maxkan-guide-card::after {
	content: "→";
	font-size: 22px;
	color: var(--wp--preset--color--brand);
}

.maxkan-home-guides .maxkan-guides__media {
	display: none;
}

.maxkan-home-guides .maxkan-guide-card__body {
	padding: 0;
}

.maxkan-home-guides .maxkan-guides__kicker {
	color: var(--wp--preset--color--green);
	font-weight: 700;
}

.maxkan-home-guides .maxkan-guide-card__title {
	font-size: 19px;
	font-weight: 800;
	color: var(--wp--preset--color--brand);
}

.maxkan-home-guides .maxkan-home-guides__all {
	justify-self: start;
}

@media (min-width: 900px) {
	.wp-site-blocks .maxkan-home-guides {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 64px;
	}

	.maxkan-home-guides .maxkan-guides__intro {
		grid-column: 1;
		grid-row: 1;
	}

	.maxkan-home-guides .maxkan-guides__grid {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.maxkan-home-guides .maxkan-home-guides__all {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
	}
}

/*
 * The ways onward from a band ("All 11 properties", "All locations", "All guides", "See all FAQs"): a navy outline
 * pill with a gold circle and an arrow at its end, so the way on reads as a button, not a footnote.
 */
.maxkan-home .maxkan-properties__link,
.maxkan-home .maxkan-locations__link,
.maxkan-home .maxkan-faqs__all a,
.maxkan-home .maxkan-home-guides__all {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: auto;
	min-height: 48px;
	padding: 4px 4px 4px 22px;
	border: 1.5px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.maxkan-home .maxkan-properties__link::after,
.maxkan-home .maxkan-locations__link::after,
.maxkan-home .maxkan-faqs__all a::after,
.maxkan-home .maxkan-home-guides__all::after {
	content: "→";
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--brand);
	font-size: 17px;
}

.maxkan-home .maxkan-properties__link:hover,
.maxkan-home .maxkan-locations__link:hover,
.maxkan-home .maxkan-faqs__all a:hover,
.maxkan-home .maxkan-home-guides__all:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

/* Buying from abroad: the three points as a list on the navy, the first lifted onto a white card. */
.maxkan-abroad .maxkan-abroad__list {
	gap: 0;
}

.maxkan-abroad__list li {
	padding: 14px 0;
	border-bottom: 1px solid rgb(255 255 255 / 15%);
}

.maxkan-abroad__list li:first-child {
	margin-block-end: 6px;
	padding: 18px 20px;
	border: 0;
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.maxkan-abroad__list li:first-child::before {
	color: var(--wp--preset--color--green);
}

/*
 * The promises, running: one navy band before the invitation to visit, the four promises sliding past with a
 * gold star between them. Two copies of the line, so it loops without a seam; anyone who asks for less movement
 * gets it standing still.
 */
.wp-site-blocks .maxkan-marquee {
	display: flex;
	margin: 0;
	padding: 26px 0;
	overflow: hidden;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-size: clamp(22px, 3vw, 36px);
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.maxkan-marquee span {
	flex: none;
	padding-inline-end: 0.6em;
	animation: maxkan-marquee 40s linear infinite;
}

.maxkan-marquee em {
	padding-inline: 0.5em;
	font-style: normal;
	color: var(--wp--preset--color--gold);
}

@keyframes maxkan-marquee {
	to {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.maxkan-marquee span {
		animation: none;
	}
}