/*
Theme Name: Hotelesque
Theme URI: https://hotelesque.com.au
Author: Mojo Dojo
Author URI: https://mojodojo.io
Description: Child theme of Twenty Twenty-Five for Hotelesque — home hotel living in Sydney's most sought-after suburbs. Design tokens and layout live in theme.json; this file is for the handful of things theme.json cannot express.
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hotelesque
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles
*/

/*
 * This is a block theme. Prefer theme.json for anything it can express —
 * colours, typography, spacing, and per-block styles all belong there, because
 * those values are also surfaced to the Site Editor and the block editor canvas.
 *
 * Reach for this stylesheet only when theme.json genuinely cannot do the job:
 * pseudo-elements, complex selectors, media queries beyond the built-in
 * breakpoints, keyframes, and third-party plugin overrides (Gravity Forms).
 *
 * Loaded after the parent's style.min.css — see functions.php.
 */

:root {
	/*
	 * Mundial is served by Adobe Fonts as the lowercase family "mundial" — see
	 * hotelesque_enqueue_fonts(). Weights 100-700 are available; the design uses
	 * Thin (200) for body copy and Light (300) for buttons and labels.
	 */
	--hotelesque-font-ui: "mundial", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/*
	 * The same stack is set on the body in theme.json, which is what stops
	 * anything without a rule of its own inheriting the parent theme's Manrope
	 * at 300. It cannot read this variable — global styles are emitted for the
	 * editor too, where this stylesheet is not loaded — so the two are written
	 * out separately and have to be changed together.
	 */

	/*
	 * Display face is Canela Deck Thin, licensed from Commercial Type and served
	 * from assets/fonts. The served family is "Canela Deck Web" — the licence's
	 * own name for it, not the "Canela Deck Trial" the Figma file is set in.
	 *
	 * The face is registered in theme.json rather than declared here, so it is
	 * there in the editor too, which does not load this stylesheet.
	 *
	 * One weight is licensed and one is used: everything that reaches for this
	 * variable sets font-weight 100. Anything asking for another weight gets a
	 * browser-synthesised one, so do not.
	 */
	--hotelesque-font-display: "Canela Deck Web", "Canela Deck", Georgia, "Times New Roman", serif;

	/*
	 * Every size the site sets, named once. Nothing below writes a font-size in
	 * pixels — it reaches for one of these — so a size is changed here and every
	 * element set at it follows, and two elements set at the same size stay that
	 * way instead of drifting apart.
	 *
	 * These are read inside the listing page's shadow roots as well: custom
	 * properties inherit through a shadow boundary, which is why
	 * assets/css/property-details.css can use them from in there.
	 *
	 * The seven that change on a narrow screen carry their line height with them,
	 * because a size that moves and a line height that does not is a gap. The
	 * four that do not change are set at one line height everywhere they are
	 * used, so theirs stay written where they are used — as do the two places
	 * that deliberately set 20px against something other than its usual 27: the
	 * eyebrows, at 20, and the footer's rating, at 40.
	 */

	/* Canela, largest first. */
	--hotelesque-size-hero: 80px;
	--hotelesque-line-hero: 90px;
	--hotelesque-size-title: 60px;
	--hotelesque-line-title: 70px;
	--hotelesque-size-title-sm: 45px;
	--hotelesque-line-title-sm: 55px;
	--hotelesque-size-title-xs: 40px;
	--hotelesque-line-title-xs: 52px;
	--hotelesque-size-subtitle: 28px;
	--hotelesque-line-subtitle: 40px;

	/* Mundial. Body and Body Small are the design's own names for 20 and 16. */
	--hotelesque-size-figure: 24px;
	--hotelesque-line-figure: 22px;
	--hotelesque-size-body: 20px;
	--hotelesque-line-body: 27px;
	--hotelesque-size-body-sm: 16px;
	--hotelesque-size-label: 15px;
	--hotelesque-size-credit: 13px;
	--hotelesque-size-unit: 12px;

	/*
	 * What every band's own top and bottom padding is multiplied by. The design
	 * stands the sections a long way apart — 271 above the appraisal, 262 above
	 * the areas — which is right on a wide screen and is most of a phone on a
	 * narrow one. Halved from a tablet down, in one number rather than a second
	 * set of paddings to keep in step with the first.
	 *
	 * It also scales the four large gaps that stand one block off another inside
	 * a section — 150 above the monogram and 204 below it, 150 down to the
	 * residences carousel, 110 down to the partners band — which are the same
	 * kind of space as the padding around a section and read the same way on a
	 * narrow screen.
	 *
	 * What it does not touch is the space that sets type: the 40 under a
	 * heading, the 47 above a lede, the 21 of a list's rows. Those hold a
	 * heading to what it introduces and are not the page breathing.
	 */
	--hotelesque-section-scale: 1;
}

/* Half the space around every band from a tablet down — see the scale above. */
@media ( max-width: 1024px ) {
	:root {
		--hotelesque-section-scale: 0.5;
	}
}

/*
 * The narrow screen's type, from 767 down — Elementor's mobile layout, and one
 * of the three widths this site changes at. The other two are 1024 and 1200,
 * and every media query in this file is on one of them.
 *
 * Only the seven largest move. Body Small, the labels, the credit and the unit
 * are already small enough to read on a phone and are the same on both.
 *
 * Each line height holds the ratio its size had: 54 keeps the 1.125 that 80 had
 * against 90, and so on down. Rounded to the pixel, which is what moves 24.3 to
 * 24 and 60.75 to 61.
 */
@media ( max-width: 767px ) {
	:root {
		--hotelesque-size-hero: 54px;
		--hotelesque-line-hero: 61px;
		--hotelesque-size-title: 48px;
		--hotelesque-line-title: 56px;
		--hotelesque-size-title-sm: 40px;
		--hotelesque-line-title-sm: 49px;
		--hotelesque-size-title-xs: 36px;
		--hotelesque-line-title-xs: 47px;
		--hotelesque-size-subtitle: 24px;
		--hotelesque-line-subtitle: 34px;

		--hotelesque-size-figure: 22px;
		--hotelesque-line-figure: 20px;
		--hotelesque-size-body: 18px;
		--hotelesque-line-body: 24px;
	}
}

/* Homepage hero
   ---------------------------------------------------------------------- */

.hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero__title {
	color: var(--wp--preset--color--base);
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-hero);
	font-weight: 100;
	line-height: var(--hotelesque-line-hero);
	margin: 0;
	max-width: 928px;
	padding-top: 209px;
}

/*
 * The search bar drops a menu that is taller than the room left under it, so
 * the hero has to let it out and stand over what follows. A cover clips itself
 * — that is core's, and it is there to hold the background picture in, which an
 * absolutely positioned image the size of the box does anyway — and both it and
 * the section beneath are positioned without a z-index, so the later one wins
 * and the menu was drawn under the Discover band.
 */
.hero.wp-block-cover {
	overflow: visible;
	z-index: 2;
}

/*
 * Holds the booking engine's search bar — see [tac_searchbar] in
 * templates/front-page.html. Only the band it stands in is set here; the bar
 * itself is styled in assets/css/tac.css, which is loaded on the pages the
 * plugin loads on rather than with the rest of the site.
 */
.hero__search {
	margin-top: 77px;
	max-width: 952px;
	width: 100%;
}

/* Search bar
   ---------------------------------------------------------------------- */

/*
 * Figma 48:3087: 952 by 72 on white with a 6px corner, one line holding three
 * things and a button — the first word 89 in from the left, a 25px rule between
 * each pair, and a 174 by 50 plum EXPLORE ending 10 from the right.
 *
 * The design is one line with an even 75 between every part of it, drawn around
 * a stay already chosen. Ours has to hold "Add dates" as well, which is 92
 * narrower, so the 75 is not a number to write down — it is what an even split
 * comes to at the width the design was drawn at. Hence space-between: the six
 * parts sit at the two ends and share what is left, which lands within four
 * pixels of every position in the frame and keeps doing so once the answers are
 * longer than the questions.
 *
 * See blocks/search-bar. It is a GET form pointed at the search page, so the
 * whole of it works before a line of script runs; only the calendar needs one.
 */
.search-bar {
	align-items: center;
	background: var(--wp--preset--color--base);
	border-radius: 6px;
	display: flex;
	justify-content: space-between;
	padding: 11px 10px 11px 89px;
}

/*
 * Laid out rather than left inline: an inline-block control sits in a line box
 * that carries a descender's worth of space with it, which made each field 26.2
 * tall around a 22 tall word and left all three of them 2.1 below the rules and
 * the button.
 */
.search-bar__field {
	display: flex;
	position: relative;
}

/*
 * The rule between the fields. A part of the row rather than something hung off
 * a field, because that is what puts it midway between the two words either
 * side of it however wide they are.
 */
.search-bar__rule {
	background: #CECECE;
	height: 25px;
	width: 1px;
}

/*
 * The three of them read as one line of words rather than as form controls: no
 * box, no border, and no arrow — the design draws three plain words and a
 * button, and the rules either side are what group them as things to answer.
 */
.search-bar__control {
	appearance: none;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 300;
	line-height: 22px;
	padding: 0;
	white-space: nowrap;
}

/*
 * A menu is otherwise as wide as its longest choice, so "Where to?" sat in the
 * width of "Bondi Junction" with 35px of nothing after it and the rule beyond
 * that read as belonging to the next word. Sized to what it says instead, each
 * word is its own width and the rules fall midway between them. Where this is
 * not understood the menus go back to their widest choice, which is spacing,
 * not breakage.
 */
select.search-bar__control {
	field-sizing: content;
}

/*
 * Underlined rather than boxed. Chrome counts a menu as focus-visible the
 * moment it is clicked, so the ring the rest of the site shows only to the
 * keyboard was landing on every click here — and a square drawn around one word
 * in a line of words is the wrong shape for this bar in any case. The line is
 * on the field because text-decoration does not reach the value a menu draws.
 */
.search-bar__control:focus-visible {
	outline: none;
}

.search-bar__field:has( :focus-visible )::after {
	background: var(--wp--preset--color--plum);
	bottom: -6px;
	content: "";
	height: 2px;
	inset-inline: 0;
	position: absolute;
}

/* 174 by 50, as drawn, and the site's button in every other respect. */
.search-bar__go {
	background: var(--wp--preset--color--plum);
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	height: 50px;
	letter-spacing: 1.5px;
	line-height: 20px;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	width: 174px;
}

.search-bar__go:hover,
.search-bar__go:focus-visible {
	background: transparent;
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
}

/*
 * The calendar, which the design does not draw — it shows the bar with a stay
 * already chosen. So it is built out of what the rest of the site is made of:
 * the display face for the month, the label style for the days of the week, and
 * plum for the nights that have been picked.
 */
.search-bar__calendar {
	background: var(--wp--preset--color--base);
	border-radius: 6px;
	box-shadow: 0 18px 40px rgba( 25, 40, 61, 0.14 );
	/*
	 * Said outright because of where this opens: the hero writes in white, and
	 * a panel that inherits it puts white months and white days of the week on
	 * white paper. Only the numbers were legible, and only because they name
	 * their own colour.
	 */
	color: var(--wp--preset--color--navy);
	inset-inline-start: 50%;
	padding: 28px 32px 24px;
	position: absolute;
	top: calc(100% + 22px);
	translate: -50% 0;
	width: 620px;
	z-index: 20;
}

.search-bar__nav {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.search-bar__step {
	background: url("assets/images/chevron.svg") center / 13px auto no-repeat;
	border: 0;
	cursor: pointer;
	height: 24px;
	rotate: -90deg;
	width: 24px;
}

.search-bar__step--back {
	rotate: 90deg;
}

.search-bar__months {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat( 2, 1fr );
	margin-top: 8px;
}

.search-bar__month-name {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-subtitle);
	font-weight: 100;
	line-height: var(--hotelesque-line-subtitle);
	margin: 0 0 12px;
	text-align: center;
}

.search-bar__grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	row-gap: 2px;
}

.search-bar__dow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-unit);
	font-weight: 300;
	letter-spacing: 1.5px;
	padding-bottom: 8px;
	text-align: center;
	text-transform: uppercase;
}

.search-bar__day {
	aspect-ratio: 1;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 1;
}

.search-bar__day:disabled {
	cursor: default;
	opacity: 0.25;
}

.search-bar__day:hover:not( :disabled ),
.search-bar__day.is-between {
	background: var(--wp--preset--color--oatmeal);
}

.search-bar__day.is-from,
.search-bar__day.is-to {
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--base);
}

.search-bar__hint {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-credit);
	font-weight: 200;
	margin: 20px 0 0;
	opacity: 0.7;
	text-align: center;
}

/*
 * The 89 in from the left is a proportion of the 952 the bar is drawn at. Once
 * the bar is narrower than that, it is just the widest thing in the row, and it
 * is taking its width from the words: at 768 a filled bar had four pixels
 * between each word and its rule. Back to the padding the narrow bar uses.
 */
@media ( max-width: 1024px ) {
	.search-bar {
		padding-inline-start: 32px;
	}
}

/* Stacked, once three fields and a button no longer share a line. */
@media ( max-width: 767px ) {
	.search-bar {
		align-items: stretch;
		flex-direction: column;
		gap: 18px;
		padding: 20px;
	}

	.search-bar__rule {
		display: none;
	}

	.search-bar__go {
		width: 100%;
	}

	.search-bar__calendar {
		inset-inline: 0;
		translate: none;
		width: auto;
	}

	.search-bar__months {
		grid-template-columns: 1fr;
	}
}

/* Focus
   ---------------------------------------------------------------------- */

/*
 * Twenty Twenty-Five outlines any :focus element, and :focus fires on mouse
 * click as well as keyboard, so clicking a link or button leaves a ring behind.
 * Suppressing it only for :focus:not(:focus-visible) drops it for pointer
 * interaction while keyboard users keep the parent's 2px indicator, which they
 * need to tell where they are on the page.
 *
 * Matching the parent's zero-specificity :where() selector, and winning on
 * source order because this stylesheet loads after style.min.css.
 */
:where(.wp-site-blocks *:focus:not(:focus-visible)) {
	outline: none;
}

/* Buttons
   ---------------------------------------------------------------------- */

/*
 * Primary is filled plum, secondary is outlined, and each becomes the other on
 * hover.
 *
 * Both carry a 1px border at all times — transparent on the filled one — so the
 * swap changes only colour and never the button's size. Padding is 13/33/15
 * rather than 14/34/14 to absorb that border and land on the design's 174x50.
 *
 * The 2px it leans is deliberate and shared by every button on the site: the
 * line box is centred but the letters are not centred in it, because these are
 * capitals and the space a descender would take is reserved and unused. Centred
 * padding therefore reads low. This lifts the words 1px and is the reason the
 * vertical is uneven wherever a button is set.
 *
 * Radius comes from theme.json (styles.blocks.core/button), not from here.
 */
.wp-block-button > .wp-block-button__link {
	border: 1px solid transparent;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	padding: 13px 33px 15px;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wp-block-button:not( .is-style-outline ) > .wp-block-button__link {
	background-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--base);
}

.wp-block-button:not( .is-style-outline ) > .wp-block-button__link:hover,
.wp-block-button:not( .is-style-outline ) > .wp-block-button__link:focus-visible {
	background-color: transparent;
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--plum);
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--base);
}

/* Header
   ---------------------------------------------------------------------- */

.site-header__inner {
	min-height: 92px;
	gap: 40px;
}

/*
 * The logo is centred on the page, not between its neighbours, so the two
 * flanking groups take equal share of the remaining space regardless of how
 * long the menu labels are.
 */
.site-header__nav--start,
.site-header__end {
	flex: 1 1 0;
}

.site-header__logo {
	flex: 0 0 auto;
}

/*
 * blockGap is 0 globally, so every gap in the header is set explicitly. The
 * design spaces menu items, and the last item from the button, at 40px.
 */
.site-header__end,
.site-header__nav .wp-block-navigation__container {
	gap: 40px;
}

.site-header__nav .wp-block-navigation-item__content,
.site-header__menu .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 0.1em;
	line-height: 20px;
	text-transform: uppercase;
}

/*
 * The bar holds as much as it can and then gives up all of it at once.
 *
 * 1568 is where it stops fitting. The side carrying the button needs 568 and
 * the other needs 417, but the logo is centred on the page rather than between
 * its neighbours, so both sides are held to the wider of the two: 568 and 568
 * either side of the logo's 285, with 40 between each, is a 1501 band — a 1568
 * window. Below that the side with the button wraps to a second line, and by
 * 768 the bar is 250 tall and six lines deep.
 *
 * So below 1568 both menus and the button come off the bar and the same links
 * show as one menu behind a button. The left nav is left in place with its list
 * hidden: it is the other half of the pair the logo is centred against, and
 * without it the logo would sit left of the middle of the page.
 */
.site-header__inner .site-header__menu {
	display: none;
}

@media ( max-width: 1568px ) {
	.site-header__nav--start .wp-block-navigation__container,
	.site-header__inner .site-header__end {
		display: none;
	}

	.site-header__inner .site-header__menu {
		display: flex;
		flex: 1 1 0;
	}
}

/*
 * Named through the bar because the block layout sets display on a class and
 * an element — body .is-layout-flex — which one class of ours cannot outrank.
 *
 * The button that opens it, and the panel it opens. WordPress draws both and
 * carries the focus trap and the Escape key with them; this is only their
 * colour and their type.
 */
.site-header__menu .wp-block-navigation__responsive-container-open,
.site-header__menu .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--navy);
}

.site-header__menu .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy);
	padding: 40px var(--wp--style--root--padding-left, 26px);
}

.site-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 28px;
}

/*
 * The logo is drawn 285 wide and held there at every width, which is most of a
 * phone: 285 of the 338 a 390 screen leaves, with the menu button still to come.
 * It gives way here instead, and the page stops scrolling sideways.
 */
@media ( max-width: 767px ) {
	.site-header__logo {
		max-width: 200px;
	}

	.site-header__logo img {
		height: auto;
		width: 100%;
	}
}

/* Homepage — Discover your way
   ---------------------------------------------------------------------- */

/*
 * A note on the padding of every section below, because the numbers are not the
 * ones Figma shows. This is the homepage's; List With Us is the same and its
 * own sections say so where they are set.
 *
 * The design's page frame (48:3060) is a column with -71 item spacing: each
 * section carries a -71 bottom margin and the next starts before it finishes.
 * The padding reported on a section says nothing about that, so setting the two
 * numbers off a pair of sections as they read leaves 71 too much between them.
 *
 * Each join therefore gives up 71. It comes off the top padding of the section
 * that starts early, or — where that top is less than 71 — off the bottom of
 * the one above, which is the same space either way. So: Discover 175/186 is
 * 104/115, holding the join above it and the one below; Difference 237 is 166;
 * Partners 250 is 179; Collections 150 is 79; About 200 is 129 at both ends;
 * Testimonials 252 is 181; Social 303 is 232.
 *
 * The header already accounted for it: that frame is drawn 163 tall and
 * overlapped by the same 71, which is the 92 the header is set to — on both
 * pages, which is what confirmed the two use the same figure.
 *
 * List With Us (146:7252) is the same column with the same -71, so the sections
 * it shares with the homepage need nothing further: what Difference and the
 * testimonials give up here is what they owe there. Its own three give it up
 * where they are set — Assurances 174 to 103, the areas 262 to 191, and the
 * appraisal 271 to 200 with its bottom 300 to 229, because the testimonials
 * under it have no top padding of their own to take it from.
 *
 * Three sections of that design are not built — a calculator, a figure, and
 * case studies — and two more below it. They sit between How it works and
 * Assurances in the file, so the join between those two is ours rather than the
 * design's. It still gives up its 71 like every other.
 */

.discover {
	color: var(--wp--preset--color--navy);
	padding-block: calc(104px * var(--hotelesque-section-scale)) calc(115px * var(--hotelesque-section-scale));
	text-align: center;
}

.discover__eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body);
	font-weight: 200;
	letter-spacing: 3px;
	line-height: 20px;;
	margin: 0;
	text-transform: uppercase;
}

.discover__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-hero);
	font-weight: 100;
	line-height: var(--hotelesque-line-hero);
	margin: 40px auto 0;
	max-width: 1011px;
}

.discover__body {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body);
	font-weight: 200;
	line-height: var(--hotelesque-line-body);
	margin: 35px auto 0;
	max-width: 593px;
}

.discover__monogram {
	margin: calc(150px * var(--hotelesque-section-scale)) auto 0;
}

.discover__cards {
	gap: 100px;
	margin: calc(204px * var(--hotelesque-section-scale)) auto 0;
	max-width: 1038px;
}

/*
 * The 100 between the two cards is drawn against a 1038 band, where it is a
 * tenth of the width. On a tablet the band is smaller and the gap is not, so it
 * takes a fifth of it and the cards go narrow to pay for it. 36 from here down.
 */
@media ( max-width: 1024px ) {
	.discover__cards {
		gap: 36px;
	}
}

/*
 * Card framing. The design places each photo with its own scale and offset
 * rather than centring it, and those offsets are not uniform, so replicating
 * them literally would stretch the images. object-position reproduces the same
 * visible region without distortion — derived from the design's placement:
 *   travellers  w 201.92% left -87.6%  / h 133.78% top -24.54%  ->  68% 56%
 *   owners      w 251.37% left -42.18% / h 121.49% top -21.49%  ->  37% 59%
 *
 * The 25% navy wash over each card is the design's own, applied through the
 * cover block's dimRatio so core layers it beneath the copy. The design uses
 * black on the owners card and navy on the other; navy is used for both here.
 */
.discover__card {
	flex: 1 1 0;
	min-width: 280px;
}

.discover__card--travellers .wp-block-cover__image-background {
	object-position: 68% 56%;
}

.discover__card--owners .wp-block-cover__image-background {
	object-position: 37% 59%;
}

.discover__card .wp-block-cover__inner-container {
	padding: 40px;
}

/*
 * The 40 is drawn against a card of 464. Once two of them are sharing a tablet
 * it is a tenth of the card's width on each side, so the words are held to the
 * middle of the picture; 20 gives them the room back.
 */
@media ( max-width: 1024px ) {
	.discover__card .wp-block-cover__inner-container {
		padding: 20px;
	}
}

.discover__card-title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title-xs);
	font-weight: 100;
	line-height: var(--hotelesque-line-title-xs);
	margin: 0;
	text-align: left;
}

.discover__card-body {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 20px 0 0;
	text-align: left;
}

.discover__card-link {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	line-height: 20px;
	margin: 14px 0 0;
	text-align: left;
}

.discover__card-link a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Homepage — Featured Residences
   ---------------------------------------------------------------------- */

.residences {
	color: var(--wp--preset--color--navy);
	padding-block: calc(22px * var(--hotelesque-section-scale)) calc(164px * var(--hotelesque-section-scale));
}

.residences__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title);
	font-weight: 100;
	line-height: var(--hotelesque-line-title);
	margin: 0;
}

.residences__lede {
	align-items: flex-end;
	gap: 40px;
	margin-top: 30px;
}

.residences__intro {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 0;
	max-width: 431px;
}


/*
 * The design puts the arrows at x=149 and x=1771, outside the 1440 card grid in
 * a band wider than our own. Absolutely positioning them there would push them
 * off-screen below about 1800px, so they sit inline at the row's ends instead
 * and the cards take the space between.
 */
/*
 * The arrows are pinned to the media band rather than centred on the track.
 *
 * Centring them on the track meant every change in the track's height moved
 * them, which is why the active card's copy had to expand and collapse in a
 * carefully ordered sequence just to hold that height still. The media band has
 * a fixed aspect ratio on a fixed-width slide, so its height is stable whatever
 * the cards below it do, and the active card is always the tallest — so its
 * media always sits flush with the top of the track.
 *
 * Percentages in these custom properties resolve against the containing block,
 * which is this element, because that is where the arrows' margin is computed.
 */
.residences__carousel {
	--arrow-size: 60px;
	--carousel-gap: 80px;
	--slide-gap: 24px;
	--slides: 1.1;
	--track-width: calc( 100% - ( 2 * var( --arrow-size ) ) - ( 2 * var( --carousel-gap ) ) );
	--card-width: calc( ( var( --track-width ) - ( ( var( --slides ) - 1 ) * var( --slide-gap ) ) ) / var( --slides ) );

	/*
	 * The detail block holds this height whether or not its card is showing
	 * it, so every card is the same height and the track keeps one height as
	 * the copy fades between them.
	 */
	--detail-height: 140px;

	align-items: center;
	gap: var(--carousel-gap);
	margin-top: calc(150px * var(--hotelesque-section-scale));
}

/*
 * The track itself has to fill the full wide grid, with the arrows sitting
 * outside it — so this one row is wider than wideSize by exactly one arrow plus
 * one gap on each side. Below that it just shrinks, and the arrows come in with
 * it.
 *
 * Needs three classes to outrank core's `.is-layout-constrained > .alignwide`,
 * which is itself two. Derived from the wide-size custom property rather than a
 * literal, so it follows theme.json.
 */
.residences .residences__carousel.alignwide {
	max-width: calc(
		var(--wp--style--global--wide-size) +
		( ( var( --arrow-size ) + var( --carousel-gap ) ) * 2 )
	);
}

/*
 * The arrows and the air either side of them are set for a page 1920 across,
 * where they cost 280 of it. On a phone the row has 323 in total, so those 280
 * left the track 43 wide and the card 37 — the row was unreadable at every
 * width below about 500, on the homepage as well as on a property page, which
 * is the same row borrowed.
 *
 * They stay visible, as the design draws them at every width; it is what is
 * around them that gives.
 */
@media ( max-width: 767px ) {
	.residences__carousel {
		--arrow-size: 40px;
		--carousel-gap: 10px;
	}
}

@media ( min-width: 768px ) {
	.residences__carousel {
		--slides: 2;
	}
}

@media ( min-width: 1200px ) {
	.residences__carousel {
		--slides: 3;
	}
}

.residences__arrow {
	background: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 var(--arrow-size);
	line-height: 0;
	padding: 0;
	transition: opacity 0.2s ease;
}

/*
 * Swiper adds these when there is nothing to advance to — is-locked when every
 * slide already fits, is-disabled at either end. Both are renamed from Swiper's
 * defaults in sliders.js so its own stylesheet, which hides locked controls
 * outright, never applies. The design shows the arrows at all widths, so they
 * stay visible and simply read as inert.
 */
/*
 * The mark fills whatever the arrow is set to. Its width and height attributes
 * say 60, which is right at full size and wrong once --arrow-size gives way on
 * a phone — the box came down to 40 and the drawing stayed at 60, hanging over
 * the track either side.
 */
.residences__arrow img {
	display: block;
	height: auto;
	width: 100%;
}

.residences__arrow.is-disabled,
.residences__arrow.is-locked {
	cursor: default;
	opacity: 0.3;
	pointer-events: none;
}

.residences__arrow--prev {
	transform: scaleX( -1 );
}

/*
 * Swiper owns the track's layout, so the group block's own flow rules are
 * cleared — otherwise its margin between siblings shows up between slides. The
 * card grows within the track rather than being transformed out of it, so no
 * clipping headroom is needed.
 */
.residences__slider {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.residences__selection > * {
	margin-block: 0;
}

/*
 * Swiper's slide class is renamed to this in sliders.js, so its own slide rules
 * no longer apply and the one that matters is set here: a slide must not shrink
 * below the width Swiper assigns it.
 */
.residence-card {
	flex-shrink: 0;
	height: auto;
	margin: 0;
}

.residence-card__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

/*
 * Whichever slide Swiper marks active shows its copy; the rest hold the same
 * space with the copy faded out. Nothing changes height, so the track keeps one
 * height and the page below the carousel does not move as the active slide
 * changes.
 */
.residence-card__detail {
	height: var(--detail-height);
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.25s ease;
}

.swiper-slide-active .residence-card__detail {
	opacity: 1;
}



.residence-card__media {
	aspect-ratio: 464 / 398;
	margin: 0;
	position: relative;
}

.residence-card__media > img:first-child {
	border-radius: 6px;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/*
 * The heart is soft-light in the design, so it picks up whatever is beneath it
 * rather than sitting on the photograph as flat white.
 */
.residence-card__save {
	mix-blend-mode: soft-light;
	position: absolute;
	right: 16px;
	top: 16px;
}

.residence-card__meta {
	align-items: center;
	display: flex;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	gap: 16px;
	justify-content: space-between;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 25px 41px 0;
	text-transform: uppercase;
}

.residence-card__name {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-subtitle);
	font-weight: 100;
	line-height: var(--hotelesque-line-subtitle);
	margin: 0 41px;
}

/*
 * Held to three lines so the rate under it is always in view.
 *
 * The block around this is a fixed 140 that hides what will not fit, which is
 * what keeps every card the same height as the copy fades between them. Three
 * lines and the rate come to 128 of that; four come to 153, and it was the
 * rate — the one line on the card a guest is looking for — that went over the
 * edge. Some of these descriptions open with a promotion two sentences long,
 * so this is not a rare case.
 *
 * Clamped rather than the block made taller: a taller block moves every card on
 * the row, and the next description longer than that one would put us here
 * again.
 */
.residence-card__desc {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	line-height: 25px;
	margin: 4px 41px 0;
	max-width: 374px;
	overflow: hidden;
}

.residence-card__detail > *:first-child {
	padding-top: 4px;
}

/* "from" and "/ night" are 12px either side of a 24px figure, on one baseline. */
.residence-card__price {
	align-items: baseline;
	display: flex;
	font-family: var(--hotelesque-font-ui);
	font-weight: 300;
	gap: 8px;
	margin: 18px 41px 0;
}

.residence-card__price-pre,
.residence-card__price-unit {
	font-size: var(--hotelesque-size-unit);
	line-height: 22px;
}

.residence-card__price-value {
	font-size: var(--hotelesque-size-figure);
	line-height: var(--hotelesque-line-figure);
}

/* Difference — reusable section
   ---------------------------------------------------------------------- */

/*
 * An introduction beside a divided list of four points. Registered as a pattern
 * because the homepage and List With Us share the shape but not a word of the
 * copy — see patterns/difference.php.
 */
.difference {
	color: var(--wp--preset--color--navy);
	padding-block: calc(166px * var(--hotelesque-section-scale)) calc(242px * var(--hotelesque-section-scale));
}

/*
 * The two halves are pushed to the ends of the band and hold the widths the
 * design draws them at, so the room a wide screen brings falls between them
 * rather than into either one.
 *
 * The gap is 40 rather than the 146 the design shows between them. That 146 is
 * what is left over at the width it is drawn to, not a minimum: with it set as
 * one, 494 and 830 and 146 come to 1470 and the halves wrapped onto separate
 * lines below a 1470 band — at 1440, which is an ordinary laptop. 40 is the
 * closest they are ever asked to stand, and space-between is what actually
 * spaces them until the band is that narrow.
 */
.difference__inner {
	align-items: center;
	gap: 40px;
	justify-content: space-between;
}

.difference__intro {
	flex: 0 1 494px;
	max-width: 494px;
}

.difference__eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	text-transform: uppercase;
}

.difference__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title);
	font-weight: 100;
	line-height: var(--hotelesque-line-title);
	margin: 16px 0 0;
}

.difference__body {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 16px 0 0;
	max-width: 464px;
}

.difference__list {
	flex: 0 1 830px;
	max-width: 830px;
}

/*
 * A three-column row: icon, title, body. The rule between rows is a border on
 * every row but the first, so adding or removing a point needs no other change.
 *
 * The three sit on the middle of the row rather than at the top of it, so it
 * reads across one line however many lines the body runs to — on the homepage,
 * where the row leads with an icon, and on List With Us, where it leads with a
 * numeral.
 */
.difference__row {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 67px;
	padding-block: 21px;
}

.difference__row + .difference__row {
	border-top: 1px solid color-mix( in srgb, var(--wp--preset--color--navy) 15%, transparent );
}

.difference__icon {
	flex: 0 0 55px;
	margin: 0;
}

.difference__icon img {
	display: block;
	width: 55px;
}

.difference__row-title {
	flex: 0 1 244px;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	text-transform: uppercase;
}

.difference__row-body {
	flex: 0 1 342px;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 0;
}

@media ( max-width: 1024px ) {
	.difference__inner {
		gap: 60px;
	}

	.difference__row {
		flex-wrap: wrap;
		gap: 24px;
	}

	.difference__row-title,
	.difference__row-body {
		flex-basis: 100%;
	}
}

/* Homepage — Our Partners
   ---------------------------------------------------------------------- */

.partners {
	color: var(--wp--preset--color--navy);
	padding-block: calc(179px * var(--hotelesque-section-scale)) calc(100px * var(--hotelesque-section-scale));
	text-align: center;
}

.partners__eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	text-transform: uppercase;
}

.partners__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title);
	font-weight: 100;
	line-height: var(--hotelesque-line-title);
	margin: 16px 0 0;
}

/*
 * The band is a continuous strip rather than a row that starts and stops, so it
 * runs off its own edges rather than ending at them. Those edges are the page's
 * wide measure — the block is alignwide, which is where the 1560 comes from —
 * and a logo reaching one is faded out rather than cut in half by it, which is
 * what the mask does. Tenths rather than a fixed distance: the fade is a tenth
 * of the band at any width, which is about half a logo at the widest and a
 * modest thing on a phone.
 */
.partners__track {
	margin-top: calc(110px * var(--hotelesque-section-scale));
	mask-image: linear-gradient( to right, transparent, #000 10%, #000 90%, transparent );
	overflow: hidden;
}

/*
 * Swiper eases every transition by default, which turns a continuous drift into
 * a series of steps. Linear timing is half of what makes the band move evenly;
 * the other half is the zero autoplay delay in sliders.js.
 */
.partners__track .swiper-wrapper {
	transition-timing-function: linear;
}

/*
 * Each logo keeps the slot the design gives it, and the artwork is contained
 * rather than stretched, so logos of different proportions sit on one optical
 * line without being distorted.
 */
.partners__logo {
	align-items: center;
	display: flex;
	/* Swiper gives .swiper-slide flex-shrink: 0, and the band uses its own
	   slide class, so without this the twenty slides compress to fit the
	   viewport instead of overflowing it. */
	flex-shrink: 0;
	height: 60px;
	justify-content: center;
	width: 220px;
}

.partners__logo img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* Collections — reusable card row
   ---------------------------------------------------------------------- */

/*
 * A heading over a dragged row of photographs, each named and linked. The
 * homepage runs it as the curated collections and List With Us as the areas
 * managed in — the same card and the same row at two sizes, which is the
 * collections--areas modifier further down. One block draws both: see the set
 * attribute in blocks/collections/render.php.
 */
.collections {
	color: var(--wp--preset--color--navy);
	/*
	 * The cards are allowed out of their track, so something has to stop them
	 * widening the page. clip rather than hidden: hidden would make this a
	 * scroll container, which the browser would then scroll to reveal a focused
	 * card, moving the section under everything else.
	 */
	overflow-x: clip;
	padding-block: calc(79px * var(--hotelesque-section-scale)) calc(78px * var(--hotelesque-section-scale));
	text-align: center;
}

.collections__eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	text-transform: uppercase;
}

.collections__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title);
	font-weight: 100;
	line-height: var(--hotelesque-line-title);
	margin: 16px 0 0;
}

/*
 * The design breaks this into four lines by hand. Held to a width instead, so
 * it keeps that shape where it was drawn and rewraps rather than breaking in
 * the wrong places once the column narrows.
 */
.collections__lede {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 16px auto 0;
	max-width: 420px;
}

/*
 * The track is the content column, and its slides are allowed to hang outside
 * it — that overhang is the effect the design draws.
 *
 * Qualified with .swiper because Swiper's own stylesheet hides the overflow
 * and is enqueued after this one, so on equal specificity it wins and the row
 * gets cut off at the column edge.
 */
.collections__track {
	margin-top: 60px;
}

.collections__track.swiper {
	overflow: visible;
}

/*
 * Swiper spaces the slides itself through spaceBetween, so there is no gap
 * here to double it, and the inset that starts the row level with the heading
 * is set as a Swiper offset rather than padding — see alignToColumn in
 * assets/js/sliders.js for why padding here cannot work.
 */
.collections__list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

/*
 * Swiper's slide class is renamed to this in sliders.js, so its own slide rules
 * no longer apply and the one that matters is set here: a slide must not shrink
 * to share the track between them.
 */
.collections__item {
	flex-shrink: 0;
	width: 342px;
}

.collections__media {
	margin: 0;
}

.collections__media img {
	display: block;
	height: 354px;
	object-fit: cover;
	width: 100%;
}

.collections__name {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-subtitle);
	font-weight: 100;
	line-height: var(--hotelesque-line-subtitle);
	margin: 11px 0 0;
}

.collections__link {
	color: inherit;
	display: inline-block;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	text-decoration: underline;
	text-transform: uppercase;
}

/*
 * The areas, on List With Us. Everything above holds — the type, the 16s under
 * the heading, the 11 under each photograph, the 60 down to the row — and only
 * the measurements the design draws larger are set again here. The 78 below the
 * row is the carousel's own in both, so the section's 200 is added to it.
 */
.collections--areas {
	padding-block: calc(191px * var(--hotelesque-section-scale)) calc(278px * var(--hotelesque-section-scale));
}

.collections--areas .collections__title {
	margin-inline: auto;
	max-width: 910px;
}

.collections--areas .collections__lede {
	max-width: 608px;
}

/*
 * Three cards, then two, then one: the count is set in sliders.js and Swiper
 * sizes the slides to this track, so the track has to hold exactly them. The
 * row above hangs its cards outside the column on purpose — inherited here,
 * that overhang stood a fourth card beside the three.
 */
.collections__track--areas.swiper {
	overflow: hidden;
}

/*
 * 464 where it fits, and the page's own width where it does not — a card drawn
 * wider than the window is one nobody can see whole, however far it is dragged.
 * Swiper overrides this once it has sized the row to the count above; it is
 * what the cards fall back to if the script never runs.
 */
.collections--areas .collections__item {
	width: min( 464px, 100% );
}

/*
 * Held to the shape the design draws rather than a height, so the photograph
 * keeps its proportion at the narrow widths the card above gives way at.
 */
.collections--areas .collections__media img {
	aspect-ratio: 464 / 678;
	height: auto;
}

/*
 * From the width the design draws at, the row lets go of what it was hiding:
 * two cards across four fifths of the track, and the start of the third in the
 * fifth left over. The 1440 frame cuts that third card, and since this row has
 * no arrows at any width it is the only thing that says the row moves — which
 * is why it starts here rather than at 1200 with the case studies. The count
 * steps down with it: see CARDS_FROM_1441 in assets/js/sliders.js.
 *
 * The fifth is kept as padding rather than taken off the width, so the row
 * still starts on the page's gutter. Narrowed, it would have centred instead,
 * and the two halves of the leftover fifth would each show a sliver: core
 * centres an alignwide child with margin-left: auto !important, which no
 * selector of ours outranks. Swiper sizes its slides to the track less its
 * padding, so the count is unaffected.
 */
@media ( max-width: 1440px ) {
	.collections__track--areas.swiper {
		overflow: visible;
		padding-inline-end: 20%;
	}
}

/* About — reusable centred block
   ---------------------------------------------------------------------- */

/*
 * An eyebrow, a heading and a wide paragraph, all centred. The homepage runs it
 * as About Us and List With Us as the invitation to book an appraisal, which
 * adds a button under it and stands taller — the about--appraisal modifier
 * below. Every measure between the three lines is shared.
 */
.about {
	color: var(--wp--preset--color--navy);
	padding-block: calc(129px * var(--hotelesque-section-scale));
	text-align: center;
}

.about__eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	text-transform: uppercase;
}

/*
 * One line, as drawn. It needs about 985px and the constrained layout caps
 * its children at the 974px content width, so it wrapped by a hair.
 */
.about__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title);
	font-weight: 100;
	line-height: var(--hotelesque-line-title);
	margin: 17px auto 0;
	max-width: 1440px;
}

/*
 * Body rather than the smaller Body Small the other ledes use — 20/27 against
 * 16/25 — and drawn nearly the full width of the page.
 *
 * The design breaks it into three lines by hand. Held to the width it was drawn
 * at instead, so it keeps that shape here and rewraps rather than breaking
 * mid-thought once the column narrows.
 */
.about__lede {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body);
	font-weight: 200;
	line-height: var(--hotelesque-line-body);
	margin: 47px auto 0;
	/*
	 * Narrower than the 1439px it is drawn at, because at that width the copy
	 * falls into two lines here rather than the three the design sets. Three
	 * holds from about 940px upward; this sits clear of that edge.
	 */
	max-width: 1040px;
}

/*
 * The appraisal, at the foot of List With Us. The same three lines at the same
 * spacings, standing taller and followed by a button.
 */
.about--appraisal {
	padding-block: calc(200px * var(--hotelesque-section-scale)) calc(229px * var(--hotelesque-section-scale));
}

.about--appraisal .about__cta {
	margin-top: 50px;
}

/* Homepage — Testimonials
   ---------------------------------------------------------------------- */

.testimonials {
	color: var(--wp--preset--color--navy);
	padding-block: 0 calc(181px * var(--hotelesque-section-scale));
}

/*
 * The photograph runs to the left edge of the screen and the quotes sit beside
 * it, so this is the full width of the page rather than the content column.
 *
 * Held to the 1920 it is drawn at, though, and centred past that: the quotes
 * are the half that gives way, and on a wide screen a line of them run the
 * width of the glass is not a line anyone wants to read. Below 1920 this
 * changes nothing.
 */
/*
 * The photograph and the words are centred against each other rather than both
 * standing on the top edge: the words are the shorter half and how much shorter
 * depends on the quote showing, so aligned to the top they left the photograph
 * hanging below them by whatever that difference happened to be.
 */
.testimonials__inner {
	align-items: center;
	display: flex;
	margin-inline: auto;
	max-width: 1920px;
}

/*
 * 704 where there is room for it, and less where there is not. Fixed, it was
 * wider on its own than the whole page on a tablet and pushed the quotes
 * out past the edge, taking the page's horizontal scroll with them.
 */
.testimonials__media {
	flex: 1 1 704px;
	margin: 0;
	max-width: 704px;
}

.testimonials__media img {
	display: block;
	height: 644px;
	object-fit: cover;
	width: 100%;
}

/*
 * The rest of the 1920: 1216 beside the photograph's 704. It gives way at the
 * same rate the photograph does rather than being the only half that shrinks.
 */
.testimonials__body {
	flex: 1 1 1216px;
	max-width: 1216px;
	min-width: 0;
}

/*
 * And inside it, 180 less again — the margin the page keeps either side of its
 * own band at the width this is drawn at. That is what finishes the quotes level
 * with every other section instead of running them to the edge of the screen.
 *
 * The 122 is the gap between the photograph and the words, and it is the only
 * thing holding them apart: the two halves are 704 and 1216 and come to 1920
 * exactly, so there is no room between them for a gap as well.
 *
 * border-box because the 1036 is the whole of it. Left to content-box the
 * padding is added on top and the box comes out at 1184.
 */
.testimonials__body-inner {
	box-sizing: border-box;
	max-width: 1036px;
	padding-inline: 122px 26px;
}

.testimonials__eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	text-transform: uppercase;
}

.testimonials__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title);
	font-weight: 100;
	line-height: var(--hotelesque-line-title);
	margin: 16px 0 0;
}

/* The two audiences, split by a short upright rule. */
.testimonials__tabs {
	align-items: center;
	display: flex;
	gap: 24px;
	margin-top: 40px;
}

.testimonials__tab {
	background: none;
	border: 0;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-subtitle);
	font-weight: 100;
	line-height: var(--hotelesque-line-subtitle);
	opacity: 0.3;
	padding: 0;
}

.testimonials__tab.is-selected {
	opacity: 1;
	text-decoration: underline;
}

/*
 * Its own element rather than a rule drawn on the tab beside it, which is how
 * the design has it. An idle tab is dimmed with opacity, and opacity dims
 * everything the element contains — a pseudo-element included — so a rule
 * hanging off that tab was drawn at three tenths of three tenths, then
 * brightened to three tenths as soon as the tab was selected.
 *
 * The 24px either side of it is the row's own gap.
 */
.testimonials__rule {
	background: currentcolor;
	flex: none;
	height: 30px;
	opacity: 0.3;
	width: 1px;
}

/*
 * Arrow, quote, arrow on one row; the progress bar under the quote. The slider's
 * parent is what sliders.js searches for the controls, so all three stay here.
 */
/*
 * Pulled 96 left of everything above it, which is what sets the arrow outside
 * the words rather than in front of them — the quote then starts where the
 * heading starts instead of an arrow's width in from it.
 */
.testimonials__carousel {
	align-items: center;
	column-gap: 32px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	margin-left: -96px;
	margin-top: 60px;
	row-gap: 40px;
}

/*
 * Held to its column, or Swiper and the grid feed each other: Swiper sizes
 * the slide from the track, the slide's width becomes the track's content,
 * and the pair grow until the browser stops them — measured at 16,777,216px,
 * with the page scrolling sideways to match. min-width: 0 alone does not
 * hold it, which is why the max-width is here as well.
 */
.testimonials__slider {
	grid-column: 2;
	max-width: 100%;
	min-width: 0;
}

.testimonials__progress {
	grid-column: 2;
}

.testimonials__arrow {
	background: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
	padding: 0;
}

.testimonials__arrow--prev {
	rotate: 180deg;
}

/* Swiper's own disabled class is renamed in sliders.js, so this is ours. */
.testimonials__arrow.is-disabled {
	cursor: default;
	opacity: 0.2;
}

/*
 * Every slide is as tall as the longest quote, and a column so the quote can
 * take whatever room it does not need — which is what holds the stars and the
 * name on one line from quote to quote instead of letting them climb with the
 * length of the words. The track stops resizing itself in sliders.js.
 *
 * height is the whole of it. Swiper gives every slide 100%, and against a track
 * that is only as tall as what it holds that resolves to nothing definite, so
 * the slide falls back to the words in it — and because the height is then not
 * auto, it never stretches to its neighbours either. Named through the slider
 * because Swiper's stylesheet is enqueued after this one and would otherwise
 * win the tie.
 */
.testimonials__slider .testimonial {
	display: flex;
	flex-direction: column;
	height: auto;
}

.testimonial__quote {
	flex: 1 1 auto;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 0;
}

/*
 * The quote is written in a rich text editor, so what arrives is paragraphs
 * rather than a run of words. They set no space of their own; only the gap
 * between one and the next is worth anything, and that is a line of the copy.
 */
.testimonial__quote p {
	margin: 0;
}

.testimonial__quote p + p {
	margin-top: 25px;
}

.testimonial__stars {
	display: flex;
	gap: 6px;
	margin: 22px 0 0;
}

/*
 * The design fills all five. A rating below five dims the ones not earned
 * rather than hiding them, so the row stays the width it was drawn at.
 */
.testimonial__star {
	display: block;
	fill: #873c3c;
	fill-opacity: 0.12;
}

.testimonial__star.is-earned {
	fill-opacity: 0.4;
}

.testimonial__author {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 200;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 10px 0 0;
	text-transform: uppercase;
}

/* Swiper's progressbar: a track it fills from the left as the slides advance. */
.testimonials__progress.swiper-pagination-progressbar {
	background: var(--wp--preset--color--aqua);
	border-radius: 4px;
	height: 4px;
	position: relative;
}

/* Qualified twice over: Swiper styles its fill through a selector of the same
   weight and is enqueued after this file, so it wins a tie. */
.testimonials__progress.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var(--wp--preset--color--navy);
	border-radius: 4px;
}

/*
 * Below this the photograph and the quotes cannot both hold a column, so the
 * photograph goes above them and each takes the whole width. Everything that
 * was holding the two apart goes with it: the 122 the words were kept off the
 * photograph by, the caps that shared the 1920 between them, and the 96 the
 * arrow was pulled out by — there is nothing to its left to hang over now.
 */
@media ( max-width: 1024px ) {
	/*
	 * The 122 that held the words off the photograph was inline padding, so
	 * stacked there is nothing between them at all and the eyebrow sits on the
	 * picture's edge. The gap only exists here: in a row it would be added to
	 * the two halves, which already come to the full 1920 between them.
	 */
	.testimonials__inner {
		flex-direction: column;
		gap: 60px;
	}

	.testimonials__media,
	.testimonials__body {
		flex: 0 0 auto;
		max-width: none;
		width: 100%;
	}

	.testimonials__body-inner {
		max-width: none;
		padding-inline: 26px;
	}

	/*
	 * Shorter than the 644 it stands at beside the quotes: full width and that
	 * tall, it fills a phone screen on its own before a word is read.
	 */
	.testimonials__media img {
		height: 320px;
	}

	.testimonials__carousel {
		margin-left: 0;
	}

	/*
	 * The arrows go under the quote rather than either side of it. Flanking it
	 * they take 184 of a 390 screen between them and leave the words a column
	 * three of them wide; beneath, the quote has the whole width and they sit at
	 * either end of the progress bar they belong with.
	 */
	.testimonials__slider {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.testimonials__arrow--prev {
		grid-column: 1;
		grid-row: 2;
	}

	.testimonials__progress {
		grid-column: 2;
		grid-row: 2;
	}

	.testimonials__arrow--next {
		grid-column: 3;
		grid-row: 2;
	}
}

/* Homepage — Social Media
   ---------------------------------------------------------------------- */

.social {
	color: var(--wp--preset--color--navy);
	/*
	 * The frame sets 50px above and below, and the row of posts carries another
	 * 253px under itself. Folded together here because that row is the feed
	 * plugin's own markup and nothing of ours wraps it.
	 */
	padding-block: calc(50px * var(--hotelesque-section-scale)) calc(232px * var(--hotelesque-section-scale));
	text-align: center;
}

.social__eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	text-transform: uppercase;
}

.social__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title-sm);
	font-weight: 100;
	line-height: var(--hotelesque-line-title-sm);
	margin: 16px 0 0;
}

/*
 * The design breaks this into two lines by hand. Held to a width instead, so it
 * keeps that shape where it was drawn and rewraps rather than breaking in the
 * wrong place once the column narrows.
 */
.social__lede {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 16px auto 0;
	max-width: 740px;
}

/* The two feeds, split by a short upright rule, as the testimonial tabs are. */
.social__tabs {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: center;
	margin-top: 16px;
}

.social__tab {
	background: none;
	border: 0;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-subtitle);
	font-weight: 100;
	line-height: var(--hotelesque-line-subtitle);
	opacity: 0.3;
	padding: 0;
}

.social__tab.is-selected {
	opacity: 1;
	text-decoration: underline;
}

/*
 * Its own element rather than a rule drawn on the tab beside it, which is how
 * the design has it. An idle tab is dimmed with opacity, and opacity dims
 * everything the element contains — a pseudo-element included — so a rule
 * hanging off that tab was drawn at three tenths of three tenths, then
 * brightened to three tenths as soon as the tab was selected.
 *
 * The 24px either side of it is the row's own gap.
 */
.social__rule {
	background: currentcolor;
	flex: none;
	height: 30px;
	opacity: 0.3;
	width: 1px;
}

/*
 * Held to the width the row of posts is drawn at. What goes inside it is the
 * feed plugin's markup, and is left to the plugin.
 */
.social__panel {
	margin: 60px auto 0;
	max-width: 1440px;
}

/* Call to action band
   ---------------------------------------------------------------------- */

/*
 * One photograph with two invitations over it. The picture is a background
 * rather than a cover block, so the overlay is a layer of this rule's own.
 */
.cta-band {
	align-items: center;
	background-image: url("assets/images/cta-band.jpg");
	background-position: center;
	background-size: cover;
	color: var(--wp--preset--color--base);
	display: flex;
	gap: 13px;
	justify-content: center;
	min-height: 600px;
	/*
	 * The design centres two 708s with 13 between them, which leaves 240 either
	 * side at the width it was drawn at. That 240 is the leftover, not the rule:
	 * set as padding it stops giving way before the halves do, and they are the
	 * part that cannot afford to shrink. The halves carry the 708 instead and
	 * this falls back to the page's own gutter.
	 */
	padding-block: calc(80px * var(--hotelesque-section-scale));
	padding-inline: var(--wp--style--root--padding-left, 26px);
	position: relative;
}

.cta-band::before {
	background: rgba( 25, 40, 61, 0.2 );
	content: "";
	inset: 0;
	position: absolute;
}

.cta-band__half {
	align-items: center;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	max-width: 708px;
	position: relative;
	text-align: center;
}

/* The rule between the two, drawn rather than marked up. */
.cta-band__half + .cta-band__half::before {
	background: currentcolor;
	content: "";
	height: 440px;
	inset-inline-start: -7px;
	opacity: 0.4;
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 1px;
}

/*
 * Below this the two cannot both hold the newsletter field, which is 464 wide
 * with its button inside the end of it, so they stack and the rule between them
 * lies down.
 */
@media ( max-width: 1024px ) {

	.cta-band {
		flex-direction: column;
		gap: 60px;
	}

	.cta-band__half {
		width: 100%;
	}

	.cta-band__half + .cta-band__half::before {
		height: 1px;
		inset-block-start: -30px;
		inset-inline-start: 0;
		translate: none;
		width: 100%;
	}
}

.cta-band__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title-sm);
	font-weight: 100;
	line-height: var(--hotelesque-line-title-sm);
	margin: 0;
	max-width: 560px;
}

.cta-band__body {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body);
	font-weight: 300;
	line-height: var(--hotelesque-line-body);
	margin: 24px 0 0;
	max-width: 532px;
}

.cta-band__actions,
.cta-band__form {
	margin-top: 42px;
	width: 100%;
}

.cta-band__actions {
	justify-content: center;
}

/*
 * Gravity Forms lays a form out as stacked rows with its own spacing. The
 * design has one field with the button inside its right-hand end, so the row is
 * re-laid as a single line and the button pulled onto the field's edge.
 */
.cta-band__form .gform_wrapper form {
	margin: 0 auto;
	max-width: 464px;
	position: relative;
}

.cta-band__form .gform_wrapper .gform_fields {
	display: block;
}

.cta-band__form .gform_wrapper .gfield_label,
.cta-band__form .gform_wrapper .gform_validation_errors h2 {
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.cta-band__form .gform_wrapper input[type="email"] {
	background: transparent;
	border: 1px solid var(--wp--preset--color--plum);
	border-radius: 6px;
	color: var(--wp--preset--color--base);
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	height: 50px;
	padding-inline: 30px 112px;
	/* The band centres its copy and the field would inherit that. */
	text-align: start;
	width: 100%;
}

.cta-band__form .gform_wrapper input[type="email"]::placeholder {
	color: var(--wp--preset--color--base);
	opacity: 1;
}

.cta-band__form .gform_wrapper .gform_footer {
	inset-block-start: 0;
	inset-inline-end: 0;
	margin: 0;
	padding: 0;
	position: absolute;
}

/*
 * Gravity Forms submits with a <button> under its orbital theme, not the
 * <input> its older markup used, and dresses it through selectors this cannot
 * outweigh from a stylesheet — naming the theme class, matching its element,
 * and setting its own custom properties all left the button Gravity's blue at
 * 61 by 38. Only a declaration it cannot outrank moves it, which is what these
 * are for. Bounded to this band rather than let loose on every form.
 */
.cta-band__form .gform_wrapper.gform-theme .gform_footer button,
.cta-band__form .gform_wrapper.gform-theme .gform_footer input[type="submit"] {
	background: var(--wp--preset--color--plum) !important;
	border: 0 !important;
	border-radius: 0 6px 6px 0 !important;
	color: var(--wp--preset--color--base) !important;
	cursor: pointer;
	/* Its type needs forcing for the same reason its shape did: without this
	   the label is Gravity's Manrope at 500. */
	font-family: var(--hotelesque-font-ui) !important;
	font-size: var(--hotelesque-size-label) !important;
	font-weight: 300 !important;
	height: 50px !important;
	letter-spacing: 1.5px !important;
	/* The 2px lean every button on the site carries — see .wp-block-button__link.
	   The height is fixed and the box border-box, so this moves the word without
	   moving the button. */
	padding: 13px 0 15px !important;
	text-transform: uppercase !important;
	width: 98px !important;
}

.cta-band__form .gform_wrapper .gform_confirmation_message,
.cta-band__form .gform_wrapper .validation_message {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
}

/* List With Us — hero
   ---------------------------------------------------------------------- */

/*
 * Two halves of the page: the invitation on white, the form over a photograph.
 * The design draws each at 960 of 1920 and the section 931 tall.
 *
 * The copy starts 188px in at that width, which is all but exactly where the
 * page's own wide band starts — 180 — so it is aligned to that band rather than
 * inset by a fixed amount. That is what keeps it level with every other section
 * as the window grows, instead of drifting left of them, and what lets it fall
 * back to the page's own 26px gutter rather than 188 of padding on a phone.
 */
.list-hero {
	/*
	 * Half the page's wide band. Each side caps what it holds at this and puts
	 * it against the centre line, so the copy's outer edge lands exactly where
	 * that band starts — right-aligning a band-half inside a screen-half is the
	 * same arithmetic as insetting the half by (100vw - wide) / 2 — and the room
	 * a wider screen brings falls outside them rather than stretching them.
	 */
	--list-hero-half: min( calc( var(--wp--style--global--wide-size, 1560px) / 2 ), 100% );

	color: var(--wp--preset--color--navy);
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 931px;
}

/*
 * The vertical is centred rather than set out, so the design's 244 above and
 * 313 below become whatever the section's height leaves — and the padding is
 * only there to keep the copy off the edges when the window is short.
 */
.list-hero__intro {
	align-content: center;
	display: grid;
	justify-items: end;
	padding: 120px 0 120px var(--wp--style--root--padding-left, 26px);
}

.list-hero__intro-inner {
	max-width: var(--list-hero-half);
	/* The 91px the design leaves between the copy and the middle of the page. */
	padding-inline-end: 60px;
	width: 100%;
}

.list-hero__eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body);
	font-weight: 200;
	letter-spacing: 3px;
	line-height: 20px;;
	margin: 0;
	text-transform: uppercase;
}

.list-hero__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-hero);
	font-weight: 100;
	line-height: var(--hotelesque-line-hero);
	margin: 32px 0 0;
	max-width: 681px;
}

.list-hero__body {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body);
	font-weight: 200;
	line-height: var(--hotelesque-line-body);
	margin: 34px 0 0;
	max-width: 512px;
}

/*
 * The photograph fills the half. Inside it a band-half starts at the middle of
 * the page, so it ends exactly where the page's band ends, and the card is put
 * at the end of it — which mirrors the copy opposite: that starts where the band
 * starts, this finishes where the band finishes.
 *
 * Centring the band-half in the half instead, or the card within it, leaves the
 * card aligned to nothing and hanging past the band on the right, further out
 * the wider the screen.
 */
.list-hero__media {
	align-items: center;
	background: url("assets/images/list-with-us-hero.jpg") center / cover no-repeat;
	display: grid;
	justify-items: start;
	/* No gutter against the middle of the page — the band-half starts there. */
	padding: 40px var(--wp--style--root--padding-left, 26px) 40px 0;
}

.list-hero__media-inner {
	box-sizing: border-box;
	display: grid;
	justify-items: end;
	max-width: var(--list-hero-half);
	/*
	 * Holds the card off the middle of the page, on the same gutter the rest of
	 * the page uses. Inside the band-half rather than beside it, so the card
	 * still finishes on the band.
	 */
	padding-inline-start: var(--wp--style--root--padding-left, 26px);
	width: 100%;
}

/*
 * Below this the halves cannot both hold their contents, so they stack: the
 * copy first, the form under it, both on the page's own gutter.
 */
@media ( max-width: 1024px ) {
	.list-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.list-hero__intro {
		justify-items: start;
		padding: 80px var(--wp--style--root--padding-left, 26px);
	}

	/* Stacked, there is no centre line to hold the copy off. */
	.list-hero__intro-inner {
		padding-inline-end: 0;
	}

	.list-hero__media {
		justify-items: center;
		padding: 60px var(--wp--style--root--padding-left, 26px);
	}

	/* Stacked, there is no centre line to finish against or keep clear of. */
	.list-hero__media-inner {
		justify-items: center;
		padding-inline-start: 0;
	}
}

.list-hero__card {
	background: var(--wp--preset--color--base);
	border-radius: 6px;
	max-width: 533px;
	padding: 35px 23px 23px;
	width: 100%;
}

.list-hero__card-title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-subtitle);
	font-weight: 100;
	line-height: var(--hotelesque-line-subtitle);
	margin: 0 0 24px;
}

/* The form inside it
   ---------------------------------------------------------------------- */

/*
 * Gravity Forms, again through declarations it cannot outrank — see the
 * newsletter field in 028a3fd for why that is necessary and why it is scoped to
 * this card rather than let loose on every form the site will ever have.
 *
 * The two, one, two, three, one shape of the rows is the form's own: the field
 * spans are set on it in Gravity Forms, so nothing here has to know it.
 */
.list-hero__card .gform_wrapper.gform-theme .gform_fields {
	gap: 15px;
}

.list-hero__card .gform_wrapper.gform-theme .gfield input,
.list-hero__card .gform_wrapper.gform-theme .gfield select,
.list-hero__card .gform_wrapper.gform-theme .gfield textarea {
	background-color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--plum) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--navy) !important;
	font-family: var(--hotelesque-font-ui) !important;
	font-size: var(--hotelesque-size-body-sm) !important;
	font-weight: 300 !important;
	line-height: 22px !important;
	min-height: 50px !important;
	padding: 13px 18px !important;
	width: 100% !important;
}

.list-hero__card .gform_wrapper.gform-theme .gfield textarea {
	min-height: 163px !important;
	resize: vertical !important;
}

/*
 * The placeholder is the label here, so it is the field's own type rather than
 * the quieter 14px 400 at seven tenths the plugin gives a hint. Set through the
 * variables the plugin's own rule reads, which is the one thing in this card
 * that does not have to outrank it — everything above is a declaration it makes
 * too, this is a value it asks for.
 */
.list-hero__card .gform_wrapper.gform-theme {
	--gf-ctrl-placeholder-color: var(--wp--preset--color--navy);
	--gf-ctrl-placeholder-font-size: var(--hotelesque-size-body-sm);
	--gf-ctrl-placeholder-font-weight: 300;
}

/* A select shows its placeholder as the option it starts on, greyed by the
   browser; it is the same navy as everything else in the design. */
.list-hero__card .gform_wrapper.gform-theme .gfield select {
	appearance: none !important;
	background-image: url("assets/images/chevron.svg") !important;
	background-position: right 18px center !important;
	background-repeat: no-repeat !important;
	background-size: 13px auto !important;
	padding-right: 40px !important;
}

.list-hero__card .gform_wrapper.gform-theme .gform_footer {
	margin: 15px 0 0 !important;
	padding: 0 !important;
}

.list-hero__card .gform_wrapper.gform-theme .gform_footer button,
.list-hero__card .gform_wrapper.gform-theme .gform_footer input[type="submit"] {
	background: var(--wp--preset--color--plum) !important;
	border: 1px solid var(--wp--preset--color--plum) !important;
	border-radius: 6px !important;
	color: var(--wp--preset--color--base) !important;
	cursor: pointer !important;
	font-family: var(--hotelesque-font-ui) !important;
	font-size: var(--hotelesque-size-label) !important;
	font-weight: 300 !important;
	letter-spacing: 1.5px !important;
	line-height: 20px !important;
	min-height: 50px !important;
	/* The 2px lean every button on the site carries — see .wp-block-button__link.
	   13 and 15 around a 20px line comes to 48, under the 50 the button already
	   holds, so this moves the words and not the button. */
	padding: 13px 0 15px !important;
	text-transform: uppercase !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
	width: 100% !important;
}

.list-hero__card .gform_wrapper.gform-theme .gform_footer button:hover,
.list-hero__card .gform_wrapper.gform-theme .gform_footer input[type="submit"]:hover {
	background: transparent !important;
	color: var(--wp--preset--color--plum) !important;
}

/* List With Us — How it works
   ---------------------------------------------------------------------- */

/*
 * The Difference section again, numbered and on a blush band — every measure it
 * is drawn to is already up in "Difference — reusable section", so this is only
 * what the two instances do not share. See patterns/how-it-works.php.
 */
.difference--steps {
	background-color: color-mix( in srgb, var(--wp--preset--color--blush) 25%, transparent );
}

/*
 * Drawn in blush multiplied against the band, which lands a few per cent darker
 * than the stroke itself. A border cannot blend, so this is the stroke as drawn.
 */
.difference--steps .difference__row + .difference__row {
	border-top-color: var(--wp--preset--color--blush);
}

/*
 * The list is 830 wide and the design finishes the body on the rule's own end,
 * where the row's three parts come to 775. Putting the slack in front of the
 * body rather than after it is what lands that edge on the rule.
 */
.difference--steps .difference__row-body {
	margin-inline-start: auto;
}

/*
 * The two halves stand side by side down to 1440 and the list takes the row to
 * itself from there. Held to its 830 it wrapped below the intro and then stood
 * short of the band it belongs to, finishing in the middle of the page with the
 * space it had given up sitting empty beside it.
 */
@media ( max-width: 1440px ) {
	.difference--steps .difference__list {
		flex-basis: 100%;
		max-width: none;
	}
}

/*
 * The numeral takes the icon's place and its 55px. Nothing lifts it — the row
 * centres what it holds, here and on the homepage.
 */
.difference--steps .difference__row .difference__number {
	color: var(--wp--preset--color--plum);
	flex: 0 0 55px;
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title);
	font-weight: 100;
	line-height: var(--hotelesque-line-title);
	margin: 0;
}

/* List With Us — Assurances
   ---------------------------------------------------------------------- */

/*
 * A centred heading over four columns, each an icon, a label and a paragraph.
 * The type is the Difference section's throughout — the same 15/20 at 1.5 for
 * the eyebrow and the labels, 60/70 for the heading, 16/25 for the bodies — but
 * nothing else is: that section sets its four points in a row beside its
 * heading, and this stands them under one. Only the measurements are shared,
 * so they are written again here rather than the layout being unpicked.
 */
.assurances {
	color: var(--wp--preset--color--navy);
	padding-block: calc(103px * var(--hotelesque-section-scale)) calc(190px * var(--hotelesque-section-scale));
	padding-inline: var(--wp--style--root--padding-left, 26px);
}

/*
 * 1341 is the design's own, narrower than the page's 1560 band, and it is what
 * breaks the heading over two lines where the design breaks it.
 */
.assurances__inner {
	margin-inline: auto;
	max-width: 1341px;
}

.assurances__intro {
	text-align: center;
}

.assurances__eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	text-transform: uppercase;
}

.assurances__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title);
	font-weight: 100;
	line-height: var(--hotelesque-line-title);
	margin: 40px 0 0;
}

/*
 * Four columns sharing what there is, with the design's own 141 between them.
 * At the width it is drawn to — 1315, which is four 223s and three 141s — that
 * comes to the drawn column exactly, and below it the columns give way rather
 * than the space between them closing up.
 */
.assurances__list {
	display: grid;
	gap: 60px 141px;
	grid-template-columns: repeat( 4, 1fr );
	margin: 81px auto 0;
	max-width: 1315px;
}

/*
 * The design sets the icon and the label 5px in from the paragraph under them.
 */
.assurances__icon {
	margin: 0 0 0 5px;
}

.assurances__icon img {
	display: block;
	width: 55px;
}

.assurances__item-title {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 33px 0 0 5px;
	text-transform: uppercase;
}

.assurances__item-body {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 18px 0 0;
}

/*
 * Below this the four columns and the room between them no longer fit the page,
 * so they go two by two, and then one under another.
 */
@media ( max-width: 1200px ) {
	.assurances__list {
		grid-template-columns: repeat( 2, 1fr );
		max-width: none;
	}
}

@media ( max-width: 767px ) {
	.assurances__list {
		grid-template-columns: 1fr;
	}
}

/* List With Us — Case studies
   ---------------------------------------------------------------------- */

/*
 * A heading and an invitation over a row of studies. The row is the Collections
 * row again at a third size — same card, same 28/40 name, same underlined link,
 * so the measurements it shares are up in "Collections — reusable card row" and
 * only what differs is here.
 *
 * What it adds is the line above the name and a pair of arrows either side,
 * neither of which the other two instances have.
 *
 * The studies are posts, not a list in the theme: see blocks/case-studies and
 * tools/register-case-studies.php.
 */
.case-studies {
	color: var(--wp--preset--color--navy);
	/*
	 * The track is let out past its own edges below 1200 so the next card shows
	 * — see the media query at the end of this section — and something has to
	 * stop the cards past it widening the page. clip rather than hidden: hidden
	 * would make this a scroll container, which the browser would then scroll to
	 * reveal a focused card, moving the section under everything else.
	 */
	overflow-x: clip;
	padding-block: calc(132px * var(--hotelesque-section-scale)) calc(200px * var(--hotelesque-section-scale));
}

.case-studies__intro {
	margin-inline: auto;
	max-width: 1439px;
}

.case-studies__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title);
	font-weight: 100;
	line-height: var(--hotelesque-line-title);
	margin: 0;
}

/* The invitation and the button either end of the same line. */
.case-studies__row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
	margin-top: 30px;
}

.case-studies__body {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 0;
	max-width: 431px;
}

/*
 * The arrows sit outside the cards rather than over them, which is why this is
 * the width of the page and the row inside it is not.
 */
/*
 * The arrows sit outside the cards rather than over them, which is why this is
 * the width of the page and the row inside it is not.
 *
 * It is a full-bleed block, so it is pulled out past the padding the section
 * keeps — which put the arrows hard against the edge of the screen at every
 * width. The page's own gutter is given back here, and the arrows stand on it:
 * space-between puts one on each, and the cards take the middle.
 *
 * The 91 is what is left between an arrow and the cards at the width this is
 * drawn to. As a minimum it is what stops them touching once there is less room.
 */
.case-studies__carousel {
	align-items: center;
	display: flex;
	gap: 91px;
	justify-content: space-between;
	margin-top: 150px;
	padding-inline: var(--wp--style--root--padding-left, 26px);
}

/*
 * Held to the three cards sliders.js sizes to it, and clipped at its own edges,
 * so the row starts and stops inside the arrows rather than running past them.
 *
 * The overflow is the part that has to be said. The Collections track it borrows
 * from is deliberately visible — that row hangs its cards outside the column and
 * the section clips them — and inherited here it put the fourth card and beyond
 * out past the page, which scrolled sideways by 416 at a tablet.
 */
.case-studies__track.swiper {
	/*
	 * Told what it is worth rather than measured from what is in it. Swiper
	 * sizes the cards to the track, so a track sized to its cards is an
	 * argument with no end: it settled on whatever it happened to hold when
	 * the page loaded and stayed there as the window changed around it.
	 */
	flex: 1 1 0;
	max-width: 1440px;
	min-width: 0;
	overflow: hidden;
}

.case-studies__arrow {
	background: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
	padding: 0;
}

.case-studies__arrow--prev {
	rotate: 180deg;
}

/* Swiper's own disabled class is renamed in sliders.js, so this is ours. */
.case-studies__arrow.is-disabled {
	cursor: default;
	opacity: 0.2;
}

/*
 * What a card falls back to if the script never runs — Swiper sizes the row to
 * the count in sliders.js and writes over this — held to the page where 464 is
 * more than there is.
 */
.case-studies__item {
	width: min( 464px, 100% );
}

/*
 * The shape the design draws rather than a height. Sized to the track, the card
 * is a different width at every window, and a fixed height would crop the
 * photograph harder the narrower it got.
 */
.case-studies__item .collections__media img {
	aspect-ratio: 464 / 398;
	height: auto;
}

/*
 * The three lines under the photograph are set in from its edge, which is the
 * design's own — the picture runs to the edge of the card and the words do not.
 */
.case-studies__meta {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 27px 0 0 41px;
	text-transform: uppercase;
}

.case-studies__item .collections__name {
	margin: 5px 0 0 41px;
}

.case-studies__item .collections__link {
	margin: 9px 0 0 41px;
}

/*
 * Below this the arrows and the cards cannot share the width, so the arrows go
 * and the row is dragged instead — it is a carousel either way.
 *
 * Which leaves nothing on screen to say so, and that is what the fifth held
 * back is for: two cards across four fifths of the track, the start of the
 * third in what is left. Padding rather than a narrower track, as on the areas
 * row above — narrowed, this one centres too, on Swiper's own auto margins
 * against the free space in the flex row. The section clips what runs past the
 * page.
 */
@media ( max-width: 1200px ) {
	.case-studies__arrow {
		display: none;
	}

	.case-studies__carousel {
		gap: 0;
		margin-top: calc(150px * var(--hotelesque-section-scale));
	}

	.case-studies__track.swiper {
		overflow: visible;
		padding-inline-end: 20%;
	}
}

/* List With Us — Meet our owners, meet the team
   ---------------------------------------------------------------------- */

/*
 * The homepage's pair of cards, standing on their own. Everything about them is
 * up in "Discover" — the photographs, the wash, the 100 between them and the 36
 * it becomes on a tablet, the type — and the pattern wears those classes rather
 * than repeating any of it here. See patterns/meet.php.
 *
 * The 70 above is the design's; the 171 below is its 242 less the 71 every
 * section on this page overlaps the one before it by.
 */
.meet {
	padding-block: calc(70px * var(--hotelesque-section-scale)) calc(171px * var(--hotelesque-section-scale));
}

/* On the homepage the row stands off the heading above it. Here there is none. */
.meet .discover__cards {
	margin-top: 0;
}

/* List With Us — Frequently asked questions
   ---------------------------------------------------------------------- */

/*
 * A heading over six questions, each a rule apart. The column is 974, which is
 * the page's own content width, so nothing here sets one.
 *
 * The 250 the design leaves below is 179 here, less the 71 every section on
 * this page overlaps the one before it by. It takes no padding above: the
 * section over it carries the space between them.
 */
.faq {
	color: var(--wp--preset--color--navy);
	/*
	 * A height cannot be animated to auto unless the browser is told it may. Set
	 * here rather than on the root, so nothing else on the page quietly starts
	 * animating between a number and a keyword.
	 */
	interpolate-size: allow-keywords;
	padding-block: 0 calc(179px * var(--hotelesque-section-scale));
}

.faq__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title-sm);
	font-weight: 100;
	line-height: var(--hotelesque-line-title-sm);
	margin: 0 0 70px;
}

/*
 * The rule belongs to the question above it — 41 under the words, and 41 again
 * before the next question, which is the gap between the items.
 *
 * The question carries 12 of each of those itself, so that what is clickable is
 * 44 tall rather than the 20 the words are: 29 here and 12 on the summary come
 * to the same 41, and the rhythm the design draws does not change.
 */
.faq__item {
	border-bottom: 1px solid #F3ECED;
	padding-bottom: 29px;
}

.faq__item + .faq__item {
	margin-top: 29px;
}

/*
 * The question and its chevron at either end of one line. list-style is what
 * takes the browser's own disclosure triangle off the summary; Safari needs the
 * pseudo-element as well.
 */
.faq__item summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	justify-content: space-between;
	letter-spacing: 1.5px;
	line-height: 20px;
	list-style: none;
	padding-block: 12px;
	text-transform: uppercase;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

/*
 * The same chevron the form's selects wear, at the size the design draws it —
 * 15 across, and pointing the other way once the answer is open.
 */
.faq__item summary::after {
	background: url("assets/images/chevron.svg") center / 15px auto no-repeat;
	content: "";
	flex: 0 0 auto;
	height: 8px;
	margin-inline-start: 24px;
	transition: rotate 250ms ease;
	width: 15px;
}

.faq__item[open] summary::after {
	rotate: 180deg;
}

/* The design draws every question shut, so what an open one looks like is ours. */
.faq__answer {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 20px 0 0;
	max-width: 889px;
}

/*
 * The answer opens and shuts rather than appearing. ::details-content is the
 * browser's own box around everything after the summary, and it is the only
 * thing there is to take hold of: a <details> gives no element of its own, and
 * the answer is written in the editor, so it cannot be wrapped in one either.
 *
 * content-visibility is what the browser flips to hide a shut answer. It has no
 * in-between values, so it is transitioned discretely — held at the visible end
 * for the length of the animation rather than switching at the start of it,
 * which is what stops the words vanishing before the box has finished closing.
 *
 * A browser that does not know ::details-content throws both of these rules
 * away, selector and all, and opens the answer at once as it did before. So
 * there is no state where the answer is held at nothing by the first rule and
 * not let back out by the second.
 */
.faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition:
		block-size 250ms ease,
		content-visibility 250ms allow-discrete;
}

.faq__item[open]::details-content {
	block-size: auto;
}

/* Nothing moves for somebody who has asked for that. */
@media ( prefers-reduced-motion: reduce ) {
	.faq__item::details-content,
	.faq__item summary::after {
		transition: none;
	}
}

/* Guides
   ---------------------------------------------------------------------- */

/*
 * The guides, laid out as the Collections card — the same photograph, name and
 * underlined link, drawn to the same proportion — but standing still in a grid
 * rather than carried past on a track. Everything about the card itself is up
 * in "Collections — reusable card row"; what is here is the grid it sits in.
 *
 * The posts are the Guide category rather than a list written into the page, so
 * the grid is whatever is in that category, in the order it was published.
 */
.guides {
	color: var(--wp--preset--color--navy);
	padding-block: calc(120px * var(--hotelesque-section-scale)) calc(160px * var(--hotelesque-section-scale));
}

.guides__intro {
	text-align: center;
}

.guides__eyebrow {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	text-transform: uppercase;
}

.guides__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title);
	font-weight: 100;
	line-height: var(--hotelesque-line-title);
	margin: 16px 0 0;
}

/*
 * Three across, and the 70 between the rows is the room the name and the link
 * need under one card before the next one starts.
 *
 * Named twice for the margin alone: core zeroes the margins on a post template
 * in a stylesheet of its own, at the same weight as a single class of ours and
 * later in the page than this file.
 */
.guides .guides__grid {
	display: grid;
	gap: 70px 24px;
	grid-template-columns: repeat( 3, 1fr );
	list-style: none;
	margin: 80px 0 0;
	padding: 0;
	text-align: left;
}

/*
 * The card is drawn 342 by 354. Held to that shape rather than that height, the
 * photograph keeps its proportion as the column it sits in changes width.
 */
.guides__grid .collections__media img {
	aspect-ratio: 342 / 354;
	height: auto;
}

/* The name and the link are links here, which they are not on the drawn card. */
.guides__grid .collections__name a,
.guides__grid .collections__media a {
	color: inherit;
	text-decoration: none;
}

@media ( max-width: 1024px ) {
	.guides .guides__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {
	.guides .guides__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * The archive of them, which is the guides page's grid holding the case study
 * card instead of the collections one — same columns, same gaps, same steps
 * down to two and one. The card brings its own line above the name, which is
 * the only thing that makes it a different card, and it comes from a field, so
 * the grid is drawn by the block rather than by a query loop. See the display
 * attribute in blocks/case-studies.
 */
.case-studies__grid {
	display: grid;
	gap: 70px 24px;
	grid-template-columns: repeat( 3, 1fr );
	list-style: none;
	margin: 80px 0 0;
	padding: 0;
	text-align: left;
}

/*
 * The card is set 41 in from the photograph's edge on the carousel, where it
 * hangs off the side of the page. In a grid it stands on the column, so the
 * words start where the picture starts.
 */
.case-studies__grid .case-studies__meta,
.case-studies__grid .collections__name,
.case-studies__grid .collections__link {
	margin-inline-start: 0;
}

/*
 * The card holds a width of its own for the carousel, which Swiper writes over
 * once it has sized the row. Nothing writes over it here, so the column does.
 */
.case-studies__grid .case-studies__item {
	width: auto;
}

.case-studies__grid .collections__media img {
	aspect-ratio: 464 / 398;
	height: auto;
}

@media ( max-width: 1024px ) {
	.case-studies__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {
	.case-studies__grid {
		grid-template-columns: 1fr;
	}
}

/* Blog post
   ---------------------------------------------------------------------- */

/*
 * A post is read rather than looked at, and there is no design for one, so it
 * is the theme's own type at a width the eye can hold and nothing else. The
 * posts are mostly classic content — paragraphs and headings written as plain
 * HTML rather than blocks — so what is styled here are the elements themselves
 * and not the classes a block would have brought with it.
 *
 * The parent theme's own single.html is what this replaces, and with it go the
 * byline, the tags, the post-to-post navigation and the comments.
 */
.post-single {
	color: var(--wp--preset--color--navy);
	padding-block: calc(120px * var(--hotelesque-section-scale)) calc(160px * var(--hotelesque-section-scale));
}

.post-single__date {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 20px;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

.post-single__title {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-title-sm);
	font-weight: 100;
	line-height: var(--hotelesque-line-title-sm);
	margin: 16px 0 0;
	text-align: center;
}

/* A post without one renders nothing here rather than a gap. */
.post-single__media {
	margin-top: 70px;
}

.post-single__media img {
	display: block;
	width: 100%;
}

/*
 * 720 rather than the page's own 974: a line of this size wants somewhere near
 * seventy characters and the wider column gives it a hundred. Named twice to
 * outrank the width core hands every child of a constrained group.
 */
.post-single .post-single__content {
	margin-top: 70px;
	max-width: 720px;
}

.post-single__content p,
.post-single__content ul,
.post-single__content ol {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-body-sm);
	font-weight: 200;
	line-height: 25px;
	margin: 25px 0 0;
}

.post-single__content ul,
.post-single__content ol {
	padding-inline-start: 20px;
}

.post-single__content li + li {
	margin-top: 8px;
}

/*
 * h4 is included because it is what the posts actually use for their second
 * level — 63 of them against three h3s — and left out it was the one thing on
 * the page still set in the parent theme's face.
 */
.post-single__content h2,
.post-single__content h3,
.post-single__content h4 {
	font-family: var(--hotelesque-font-display);
	font-weight: 100;
}

.post-single__content h2 {
	font-size: var(--hotelesque-size-title-xs);
	line-height: var(--hotelesque-line-title-xs);
	margin: 50px 0 0;
}

.post-single__content h3,
.post-single__content h4 {
	font-size: var(--hotelesque-size-subtitle);
	line-height: var(--hotelesque-line-subtitle);
	margin: 40px 0 0;
}

.post-single__content a {
	color: inherit;
	text-decoration: underline;
}

/*
 * What an owner says about their property, on the case studies. Set in the
 * display face at the size the section headings use, with the rule down its
 * side rather than quotation marks.
 */
.post-single__content blockquote {
	border-inline-start: 1px solid var(--wp--preset--color--blush);
	margin: 50px 0 0;
	padding-inline-start: 30px;
}

.post-single__content blockquote p {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-subtitle);
	font-weight: 100;
	line-height: var(--hotelesque-line-subtitle);
}

.post-single__content blockquote cite {
	display: block;
	font-size: var(--hotelesque-size-label);
	font-style: normal;
	letter-spacing: 1.5px;
	margin-top: 20px;
	text-transform: uppercase;
}

/* The small print under the figures, which is not read at the same weight. */
.post-single__content .case-study__note {
	font-size: var(--hotelesque-size-credit);
	line-height: 20px;
	margin-top: 20px;
	opacity: 0.7;
}

.post-single__content img {
	height: auto;
	max-width: 100%;
}

/* Whatever the post opens with stands on the space above it, not its own. */
.post-single__content > :first-child {
	margin-top: 0;
}

/* Footer
   ---------------------------------------------------------------------- */

.site-footer__main {
	align-items: flex-start;
	gap: 60px;
	padding-block: 129px 0;
}

.site-footer__brand-row {
	gap: 150px;
}

.site-footer__social {
	gap: 17px;
}

/*
 * The rating sits below the logo inside the left block rather than below the
 * whole footer: in the design the link columns are still to its right.
 */
.site-footer__rating {
	gap: 12px;
	padding-top: 62px;
}

/* Canela at 20/40 in the design (48:3440), not body copy — it was rendering
   in the parent theme's Manrope because it named no family of its own. */
.site-footer__rating-label {
	font-family: var(--hotelesque-font-display);
	font-size: var(--hotelesque-size-body);
	font-weight: 100;
	line-height: 40px;;
	margin: 0;
}

.site-footer__rating-count {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	margin: 0;
}

.site-footer__rating-count strong {
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-footer__links {
	align-items: flex-start;
	gap: 60px;
}

.site-footer__heading {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	/* Light in the design (48:3372), as every other label on the page is. */
	font-weight: 300;
	letter-spacing: 0.1em;
	line-height: 20px;
	margin: 0 0 19px;
	text-transform: uppercase;
}

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

.site-footer__list li + li {
	margin-top: 10px;
}

.site-footer__list a {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-label);
	line-height: 20px;
	text-decoration: none;
}

.site-footer__list a:hover {
	text-decoration: underline;
}

.site-footer__credit {
	margin-top: 105px;
	padding-block: 10px;
}

.site-footer__credit p {
	font-family: var(--hotelesque-font-ui);
	font-size: var(--hotelesque-size-credit);
	line-height: 20px;
	margin: 0;
}

.site-footer a {
	color: var(--wp--preset--color--navy);
}

.site-footer__logo img,
.site-footer__monogram img,
.site-footer__social img,
.site-footer__stars img {
	display: block;
}