/*
 * CaryTamura single-property template.
 *
 * 2026 REDESIGN. The template, its sections and their behaviour (gallery and
 * viewer, video, showing request, mortgage calculator, map) are unchanged.
 * Presentation follows the redesign: sections run full width (no 12px frame)
 * with content on the site measure and gutters (.ct-prop-wrap), and display
 * headings are sentence case on the redesign's type scale. Values marked
 * FACT below were measured from the original site and describe component
 * internals that were kept.
 *
 * SCOPE. Everything here is scoped under .ct-property, the class the Elementor
 * Single template puts on its outer container. Nothing in this file can reach
 * the header, the footer or any other template.
 *
 * NO LITERAL DESIGN VALUES. Every colour and family resolves to a token from
 * tokens.css, which is what the Elementor kit's Global Colors and Global Fonts
 * are bound to — so an administrator changing a global still owns the result.
 * The only absolute lengths are layout measurements and the 13px small print
 * (form hint, agent note). Label size is --ct-size-label, which reads the
 * Elementor Label global (Phase 52.3K).
 *
 * WHAT THIS FILE DOES NOT DO. It never decides what a value means. Whether a
 * price is a sale price or a rent, whether a property has media, an agent or a
 * location, is resolved by the plugin's presentation contract before any of
 * this markup exists. This file styles what arrives and hides what does not.
 */

/* ------------------------------------------------------------- rhythm --- */

.ct-property__section,
.ct-property__band {
	padding-block: var(--ct-section-padding);
}

/*
 * OMIT-WHEN-EMPTY, expressed once.
 *
 * Elementor drops a widget entirely when it renders nothing — verified for the
 * gallery on a property with no attachments and for the post content on a
 * property with no description — which leaves the section container behind and
 * nothing inside it. A section with no widget in it had nothing to say, so it
 * is removed rather than shown as a band of empty space.
 *
 * This is presentation only. The decision about whether there is anything to
 * show was already made by the component that declined to render.
 */
.ct-property__section:not(:has(.elementor-widget)),
.ct-property__band:not(:has(.elementor-widget)) {
	display: none;
}

/* ==================================================== PART 1 (live page) ===
 * The gallery hero, the identity block, FINANCIAL and DOWNLOAD PROPERTY
 * INFORMATION — [ct_property] in inc/property.php, behaviour in
 * property-gallery.js. Every value below is measured from the live property
 * page at 1440, 1024, 768 and 375 wide (FACT) unless marked. Live frames these
 * sections 12px in from 768 up, centres their content in a 1400px container
 * with 50px gutters (25px on phones), and switches to its phone layout at 768.
 */

.ct-property {
	/* Live's lightbox chrome: no role in the design system, used only here. */
	--ct-pg-chip: #1e1e1e;
	--ct-pg-chip-active: #404040;
	--ct-pg-scrim: rgba(0, 0, 0, 0.95);
}

/* The template's outer container keeps Elementor's own padding and gap for
 * the sections that follow. They are read here, where they are defined, so
 * the Part 1 sections can undo them and sit on live's 12px frame without
 * changing the container for anything else. */
.ct-property.e-con {
	--ct-prop-inset: var(--padding-left, 0px);
	--ct-prop-inset-top: var(--padding-top, 0px);
	--ct-prop-gap: var(--row-gap, 0px);
}

.ct-property__hero.e-con,
.ct-property__financial.e-con,
.ct-property__documents.e-con {
	--ct-prop-frame: 0px;
	--width: calc(100% + 2 * var(--ct-prop-inset) - 2 * var(--ct-prop-frame));
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	width: calc(100% + 2 * var(--ct-prop-inset) - 2 * var(--ct-prop-frame));
	max-width: none;
	margin-inline: calc(var(--ct-prop-frame) - var(--ct-prop-inset));
	padding: 0;
	gap: 0;
	/* The price rule and the download rule run to the frame's edge, as live's
	 * do; clipping here keeps them from widening the page. */
	overflow-x: clip;
}

.ct-property__hero.e-con {
	margin-top: calc(var(--ct-prop-frame) - var(--ct-prop-inset-top));
}

/* One continuous run, as live's: no container gap between these three. */
.ct-property__financial.e-con,
.ct-property__documents.e-con {
	margin-top: calc(-1 * var(--ct-prop-gap));
}

/* A shortcode that has nothing to show prints nothing; its section goes too. */
.ct-property__financial:not(:has(.ct-prop-facts)),
.ct-property__documents:not(:has(.ct-prop-docs)) {
	display: none;
}

.ct-prop-wrap {
	max-width: calc(var(--ct-max) + 2 * var(--ct-gutter));
	margin-inline: auto;
	padding-inline: var(--ct-gutter);
}

/* ---------------------------------------------------------- gallery hero */

.ct-pgallery {
	--pg-h: 800px;
	--pg-n: 7;
	--pg-gap: 24px;
	position: relative;
	/* The image's foot to the status badge. */
	padding-bottom: 24px;
}

.ct-pgallery__stage {
	position: relative;
	height: var(--pg-h);
	overflow: hidden;
	background-color: var(--ct-dark);
	cursor: pointer;
	touch-action: pan-y;
	user-select: none;
}

.ct-pgallery__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 500ms ease;
}

.ct-pgallery__slide.is-active {
	z-index: 2;
	opacity: 1;
}

.ct-pgallery__slide.is-leaving {
	z-index: 1;
	opacity: 1;
	transition: none;
}

/* Scoped under .ct-pgallery to outrank Elementor's `.elementor img` reset. */
.ct-pgallery .ct-pgallery__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.2s ease-out;
	-webkit-user-drag: none;
}

/* Live letterboxes a portrait photograph rather than cropping it to a strip. */
.ct-pgallery .ct-pgallery__img--portrait {
	object-fit: contain;
}

.ct-pgallery__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background-color: var(--ct-dark);
	opacity: 0;
	transition: opacity 0.2s ease-out;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.ct-pgallery__stage:hover .is-active .ct-pgallery__img {
		transform: scale(1.05);
	}

	.ct-pgallery__stage:hover::after {
		opacity: 0.3;
	}
}

/* Controls need the script; without it the first photograph stands alone. */
.ct-pgallery:not(.is-ready) .ct-pgallery__arrow,
.ct-pgallery:not(.is-ready) .ct-pgallery__strip,
.ct-pgallery:not(.is-ready) .ct-pgallery__expand {
	display: none;
}

.ct-pgallery__arrow {
	position: absolute;
	z-index: 5;
	top: calc(340px - 24px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--ct-canvas);
	border-radius: 0;
	background-color: var(--ct-canvas);
	color: var(--ct-accent);
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

.ct-pgallery__arrow--prev {
	left: 30px;
}

.ct-pgallery__arrow--next {
	right: 30px;
}

.ct-pgallery__arrow:hover,
.ct-pgallery__arrow:focus {
	background-color: transparent;
	color: var(--ct-on-dark);
}

.ct-pgallery__arrow:focus-visible,
.ct-pgallery__thumb-btn:focus-visible,
.ct-pgallery__expand:focus-visible,
.ct-pgallery__grid-btn:focus-visible,
.ct-pgallery__close:focus-visible,
.ct-pgallery__viewer-arrow:focus-visible,
.ct-prop-intro__more:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

/* The thumbnail strip sits over the image's foot, 11px up from its edge,
 * seven across at 1440 with the next one showing in the 50px to the right. */
.ct-pgallery__strip {
	position: absolute;
	z-index: 4;
	top: calc(var(--pg-h) - 120px);
	left: 0;
	right: 0;
	display: flex;
	margin: 0;
	padding: 0 50px 0 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.ct-pgallery__strip::-webkit-scrollbar {
	display: none;
}

.ct-pgallery__thumb {
	flex: 0 0 calc(100% / var(--pg-n) - var(--pg-gap));
	height: 109px;
	margin: 0 var(--pg-gap) 0 0;
	padding: 0;
}

.ct-pgallery__thumb-btn {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--ct-dark);
	cursor: pointer;
}

.ct-pgallery .ct-pgallery__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The photograph on screen. IMPLEMENTATION DECISION: live marks it nowhere;
 * a hairline in the header's white says which one it is without restyling
 * the strip. */
.ct-pgallery__thumb-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	transition: border-color var(--ct-transition);
	pointer-events: none;
}

.ct-pgallery__thumb-btn[aria-current="true"]::after {
	border-color: var(--ct-on-dark);
}

/* SEE ALL PHOTOS: live pins it 200px up from the bottom of the first screen;
 * it is held to the image's foot so a tall window cannot push it into the
 * title below. */
.ct-pgallery__expand {
	position: absolute;
	z-index: 5;
	top: min(calc(100vh - 200px), calc(var(--pg-h) + 4px));
	right: 54px;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-on-dark);
	cursor: pointer;
}

.ct-pgallery__expand svg {
	display: block;
	flex: none;
}

/* ------------------------------------------------ all photos + viewer --- */

html.ct-pgallery-lock {
	overflow: hidden;
}

.ct-pgallery__modal,
.ct-pgallery__viewer {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	border: 0;
	color: var(--ct-on-dark);
}

.ct-pgallery__modal {
	padding: 24px 64px 76px;
	background-color: var(--ct-ink);
	overflow-y: auto;
	scrollbar-width: none;
}

.ct-pgallery__modal::-webkit-scrollbar {
	display: none;
}

.ct-pgallery__modal::backdrop {
	background-color: var(--ct-ink);
}

.ct-pgallery__modal-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 12px 12px;
}

.ct-pgallery__modal-tab {
	padding: 9px 10px;
	border-radius: 4px;
	background-color: var(--ct-pg-chip-active);
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--ct-on-dark);
}

.ct-pgallery__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background-color: var(--ct-pg-chip);
	color: var(--ct-on-dark);
	cursor: pointer;
	transition: background-color 0.3s linear;
}

.ct-pgallery__close:hover,
.ct-pgallery__close:focus {
	background-color: var(--ct-pg-chip-active);
}

.ct-pgallery__grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One across, then two, then one — live's rhythm. */
.ct-pgallery__grid-item {
	flex: 0 0 50%;
	min-width: 0;
	padding: 12px;
}

.ct-pgallery__grid-item:nth-child(3n + 1) {
	flex-basis: 100%;
}

.ct-pgallery__grid-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
}

.ct-pgallery .ct-pgallery__grid-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 25 / 14;
	object-fit: cover;
}

.ct-pgallery__viewer {
	padding: 0;
	background-color: var(--ct-pg-scrim);
	overflow: hidden;
}

.ct-pgallery__viewer::backdrop {
	background-color: transparent;
}

.ct-pgallery__viewer-figure {
	position: absolute;
	inset: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	touch-action: pan-y;
}

.ct-pgallery .ct-pgallery__viewer-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ct-pgallery .ct-pgallery__viewer-img.is-loaded {
	opacity: 1;
}

.ct-pgallery__close--viewer {
	position: absolute;
	z-index: 2;
	top: 10px;
	right: 10px;
	background-color: transparent;
}

.ct-pgallery__viewer-arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 2px solid var(--ct-on-dark);
	border-radius: 0;
	background-color: transparent;
	color: var(--ct-on-dark);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.3s, color 0.3s;
}

.ct-pgallery__viewer-arrow--prev {
	left: 10px;
}

.ct-pgallery__viewer-arrow--next {
	right: 10px;
}

.ct-pgallery__viewer-arrow:hover,
.ct-pgallery__viewer-arrow:focus {
	background-color: var(--ct-on-dark);
	color: var(--ct-ink);
}

@media (prefers-reduced-motion: reduce) {
	.ct-pgallery__slide,
	.ct-pgallery .ct-pgallery__img,
	.ct-pgallery__stage::after,
	.ct-pgallery .ct-pgallery__viewer-img {
		transition: none;
	}

	.ct-pgallery__stage:hover .is-active .ct-pgallery__img {
		transform: none;
	}
}

/* ------------------------------------------------------------ identity --- */

.ct-prop-intro {
	padding-top: 40px;
	padding-bottom: 40px;
	line-height: 1.6;
	color: var(--ct-ink);
}

/* A property with no photographs has no hero: the block starts the page. */
.ct-property__hero:not(:has(.ct-pgallery)) .ct-prop-intro {
	padding-top: var(--ct-section-padding-compact);
}

/* Inline, as live's: its line box, not its padding, sets the title's place. */
.ct-prop-intro__status {
	display: inline-block;
	padding: 7px 12px;
	background-color: var(--ct-paper);
	border-left: 3px solid var(--ct-accent);
	font-family: var(--ct-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ct-ink);
}

.ct-prop-intro__title {
	margin: 18px 0 8px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h1);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	color: var(--ct-ink);
}

.ct-prop-intro__address {
	margin: 0 0 24px;
	font-family: var(--ct-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ct-label);
}

/* The price, and the rule above it that runs in from the frame to 65% of
 * the measure. */
.ct-prop-intro__price {
	position: relative;
	margin: 0;
	padding-top: 20px;
	font-family: var(--ct-font-display);
	font-size: clamp(28px, 2.6vw, 40px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--ct-ink);
}

.ct-prop-intro__price::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 2px;
	background-color: var(--ct-accent);
}

.ct-prop-intro__more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	margin: 12px auto 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ct-ink);
	cursor: pointer;
}

.ct-prop-intro__more:hover,
.ct-prop-intro__more:focus {
	background: none;
	color: var(--ct-ink);
}

.ct-prop-intro__more svg {
	display: block;
	width: 30px;
	height: 30px;
}

/* ----------------------------------------------------------- financial --- */

.ct-prop-facts {
	padding-bottom: 48px;
	color: var(--ct-ink);
}

.ct-prop-facts__title {
	margin: 0 0 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ct-border);
	font-family: var(--ct-font-display);
	font-size: 29px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	color: var(--ct-ink);
}

.ct-prop-facts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-prop-facts__row {
	display: flex;
	margin-top: 16px;
}

.ct-prop-facts__label {
	width: 40%;
	font-family: var(--ct-font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 2.75px;
	text-transform: uppercase;
	opacity: 0.6;
}

.ct-prop-facts__value {
	width: 60%;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 1px;
}

/* ----------------------------------------------------------- documents --- */

.ct-prop-docs {
	/* Live's own two greys for this section (silver rule, #ddd ring): FACT. */
	--ct-docs-rule: #c0c0c0;
	--ct-docs-ring: #ddd;
	padding: 30px 0 27px;
	color: var(--ct-ink);
}

.ct-prop-docs__title {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	color: var(--ct-ink);
}

/* Live's rule under the heading, running out to the frame's right edge. */
.ct-prop-docs__title::after {
	content: "";
	display: block;
	width: 100vw;
	height: 1px;
	margin: 36px 0 32px;
	background-color: var(--ct-docs-rule);
}

.ct-prop-docs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-prop-docs__item {
	margin: 20px 0;
}

.ct-prop-docs__link {
	display: inline-flex;
	align-items: center;
	color: var(--ct-ink);
	text-decoration: none;
}

.ct-prop-docs__link:hover,
.ct-prop-docs__link:focus {
	color: var(--ct-accent);
}

.ct-prop-docs__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ct-docs-ring);
	border-radius: 50%;
}

.ct-prop-docs__icon svg {
	position: relative;
	top: -1px;
	display: block;
	width: 15px;
	height: 15px;
}

.ct-prop-docs__name {
	margin: 0 20px;
	font-family: var(--ct-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 1px;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.ct-prop-docs__link:hover .ct-prop-docs__name {
	text-decoration: underline;
}

/* ---------------------------------------------------- part 1 responsive ---
 * Thumbnails across the strip follow live's slider: 7, then 6 below 1400,
 * 5 to 1280, 4 to 1024, 3 to 768, 2 below. At 768 and under the hero drops
 * to 545px, the strip hangs 36px below the image and the price rule goes. */

@media (max-width: 1399px) {
	.ct-pgallery {
		--pg-n: 6;
	}
}

@media (max-width: 1280px) {
	.ct-pgallery {
		--pg-n: 5;
	}
}

@media (max-width: 1024px) {
	.ct-pgallery {
		--pg-n: 4;
	}
}

@media (max-width: 992px) {
	.ct-pgallery__grid-item,
	.ct-pgallery__grid-item:nth-child(3n + 1) {
		flex-basis: 100%;
		padding: 3px;
	}
}

@media (max-width: 768px) {
	.ct-pgallery {
		--pg-h: 545px;
		--pg-n: 3;
		--pg-gap: 20px;
		padding-bottom: 66px;
	}

	.ct-pgallery__arrow {
		top: calc(238px - 18px);
		width: 36px;
		height: 36px;
	}

	.ct-pgallery__strip {
		top: calc(var(--pg-h) - 37px);
	}

	.ct-pgallery__thumb {
		height: 73px;
		margin: 0 10px;
	}

	.ct-pgallery__expand {
		top: 450px;
		right: 24px;
	}

	.ct-prop-intro {
		padding-bottom: 0;
	}

	.ct-prop-intro__status {
		display: inline-block;
		margin-bottom: 5px;
	}

	.ct-prop-intro__title {
		margin: 3px 0;
	}

	.ct-prop-intro__address {
		margin: 0 0 3px;
	}

	.ct-prop-intro__price {
		padding-top: 0;
	}

	.ct-prop-intro__price::before {
		display: none;
	}

	.ct-prop-facts {
		padding-bottom: 32px;
	}

	.ct-prop-facts__row {
		flex-wrap: wrap;
		margin-top: 26px;
	}

	.ct-prop-facts__label {
		width: 100%;
		letter-spacing: 1.5px;
	}

	.ct-prop-facts__value {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.ct-property__hero.e-con,
	.ct-property__financial.e-con,
	.ct-property__documents.e-con {
		--ct-prop-frame: 0px;
	}

	.ct-prop-wrap {
		padding-inline: 25px;
	}

	.ct-pgallery {
		--pg-n: 2;
	}

	.ct-pgallery__strip {
		padding-right: 70px;
	}

	.ct-pgallery__arrow--prev {
		left: 25px;
	}

	.ct-pgallery__arrow--next {
		right: 25px;
	}

	.ct-pgallery__expand-label {
		display: none;
	}

	.ct-pgallery__modal {
		padding: 24px 0 64px;
	}

	.ct-pgallery__modal-bar {
		margin: 0 40px 24px;
	}

	.ct-pgallery__viewer-figure {
		inset: 50px 0;
	}

	.ct-prop-facts__title {
		font-size: var(--ct-size-h4);
		line-height: 1.6;
	}

	.ct-prop-docs__title {
		font-size: 32px;
		line-height: 1.4;
		letter-spacing: var(--ct-track-heading);
	}
}

@media (max-width: 680px) {
	.ct-prop-docs__name {
		font-size: 16px;
	}
}

@media (max-width: 560px) {
	.ct-prop-intro__title {
		font-size: var(--ct-size-h4);
		line-height: 1.6;
		letter-spacing: var(--ct-track-heading);
	}

	.ct-prop-intro__price {
		font-size: var(--ct-size-h6);
		line-height: 1.5;
		letter-spacing: 0.75px;
	}
}

@media (min-width: 1800px) {
	.ct-pgallery__modal {
		padding: 8.3333vw 8.3333vw 17.6389vw;
	}
}

/* A phone on its side: the 545-800px hero is taller than the screen. It is
 * held to about half of it so the title and price follow on the first
 * screen. There is no room for the thumbnail strip at that height: the
 * arrows and SEE ALL PHOTOS move to the image's foot, clear of the header,
 * and carry the gallery. */
@media (orientation: landscape) and (max-height: 500px) {
	.ct-pgallery {
		--pg-h: max(180px, 48vh);
		padding-bottom: 24px;
	}

	.ct-pgallery__strip {
		display: none;
	}

	.ct-pgallery__arrow {
		top: calc(var(--pg-h) - 52px);
		width: 36px;
		height: 36px;
	}

	.ct-pgallery__arrow--prev {
		left: 24px;
	}

	.ct-pgallery__arrow--next {
		right: 24px;
	}

	.ct-pgallery__expand {
		top: calc(var(--pg-h) - 54px);
		right: 76px;
	}
}

/* ==================================================== PART 2 (live page) ===
 * The description (Elementor's Post Content widget, the record's own text)
 * beside the stat rail ([ct_property section="stats"]). Measured from the live
 * property page at 1440, 1024, 768 and 375 (FACT): the band sits on the 12px
 * frame with 20px / 86px inside it, its content centred in a 1400px container
 * with 50px gutters (25px on phones); description and rail share the width
 * 8 : 2 (the rail never under 250px) across a 2px rule. At 768 and under the
 * rail moves above the description as a two-up grid over a 2px rule.
 */

.ct-property__overview.e-con {
	--ct-prop-frame: 0px;
	--width: calc(100% + 2 * var(--ct-prop-inset) - 2 * var(--ct-prop-frame));
	/* 86px, plus the one 25.6px line live's band ends with (its icon sprite
	 * is an inline <svg>, so it draws a line box). */
	--ct-prop-overview-end: calc(86px + 25.6px);
	--padding-top: 20px;
	--padding-bottom: var(--ct-prop-overview-end);
	--padding-left: 20px;
	--padding-right: 20px;
	width: calc(100% + 2 * var(--ct-prop-inset) - 2 * var(--ct-prop-frame));
	max-width: none;
	margin-top: calc(-1 * var(--ct-prop-gap));
	margin-inline: calc(var(--ct-prop-frame) - var(--ct-prop-inset));
	padding: 20px 20px var(--ct-prop-overview-end);
}

.ct-prop-overview.e-con {
	/* Live's greys for this band: the rail rule, the icons, and the rule under
	 * a rail that stands alone. FACT. */
	--ct-prop-rail: #d3d3d3;
	--ct-prop-icon-ink: #999;
	--ct-prop-rule: #c0c0c0;
	--width: 100%;
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 50px;
	--padding-right: 50px;
	--flex-direction: row;
	--flex-wrap: nowrap;
	--gap: 0;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding: 0 50px;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}

.ct-prop-overview > .ct-prop-overview__main {
	flex: 8 1 0%;
	width: auto;
	max-width: none;
	min-width: 0;
	padding-right: 90px;
}

.ct-prop-overview > .ct-prop-overview__stats {
	flex: 2 1 0%;
	width: auto;
	max-width: none;
	min-width: 250px;
	padding-left: 90px;
	border-left: 2px solid var(--ct-prop-rail);
}

/* No stats: no rail, and the description takes the width. */
.ct-prop-overview > .ct-prop-overview__stats:not(:has(.ct-prop-stats)) {
	display: none;
}

.ct-prop-overview:not(:has(.ct-prop-stats)) > .ct-prop-overview__main {
	padding-right: 0;
}

/* The description: the record's paragraphs, as stored. Live separates them
 * by an empty paragraph as well as the margin (62px in all); that gap is
 * drawn here, so the stored text needs no filler paragraphs. */
.ct-prop-overview__main p {
	margin: 1.142857em 0;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 1px;
	color: var(--ct-ink);
	overflow-wrap: break-word;
}

.ct-prop-overview__main p + p {
	margin-top: calc(2 * 1.142857em + 1.6em);
}

.ct-prop-stats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-prop-stats__item {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0 28px 28px 0;
}

/* The theme's icon treatment (as the Neighborhood stats): a mask filled with
 * the icon colour, the glyph in --ct-prop-icon. Live's own four glyphs. */
.ct-prop-stats__icon {
	flex: 0 1 32px;
	width: 32px;
	min-width: 0;
	height: 32px;
	margin-top: 6px;
	background-color: var(--ct-prop-icon-ink);
	-webkit-mask: var(--ct-prop-icon) center / contain no-repeat;
	mask: var(--ct-prop-icon) center / contain no-repeat;
}

.ct-prop-stats__item--beds { --ct-prop-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%23000'%3E%3Cpath d='M39.706 22.553c-.127-.137-1.43-1.373-3.87-2.745l-.126-.046V7.87c0-.503-.379-.869-.8-.869H5.048c-.462 0-.799.412-.799.87v11.847c-1.22.777-2.44 1.646-3.912 2.744a.917.917 0 0 0-.336.732v4.895c0 .32.21.64.42.777 0 0 .21.183.632.275h4.332v.046h.21v2.561c0 .503.379.87.8.87.462 0 .798-.412.798-.87v-2.653H32.64v.046h.21V31.7c0 .504.38.87.8.87.462 0 .799-.412.799-.87v-2.653H39.2c.462 0 .799-.411.799-.869v-5.077c-.042-.183-.126-.412-.294-.55zM34.11 8.738v10.11a14.503 14.503 0 0 0-1.85-.778v-4.62c0-.503-.379-.87-.8-.87h-9.127c-.462 0-.799.412-.799.87v2.699h-1.009c-.505 0-1.01.045-1.472.045l-.59.046v-2.79c0-.458-.336-.87-.798-.87h-9.17c-.42 0-.799.367-.799.87v4.574c-.63.229-1.178.458-1.724.778l-.127.046V8.738H34.11zm-3.448 8.783l-.127-.046a26.563 26.563 0 0 0-7.402-1.28v-1.876h7.529v3.202zm-21.325 0v-3.156h7.528v2.058c-2.902.229-5.131.55-6.982.96l-.546.138zm29.022 9.835H1.598V23.65c5.342-3.934 7.782-5.26 18.97-5.673 10.095-.366 16.446 4.483 17.792 5.627v3.75z'/%3E%3C/svg%3E"); }
.ct-prop-stats__item--baths { --ct-prop-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 37' fill='%23000'%3E%3Cpath d='M37.136 16.64h-2.59V5.545c0-1.47-.547-2.881-1.518-3.921C32.056.585 30.738 0 29.364 0c-1.375 0-2.693.584-3.665 1.625-.971 1.04-1.517 2.45-1.517 3.921v1.85h-.864a.833.833 0 0 0-.61.27.959.959 0 0 0-.253.654c0 .245.09.48.253.653a.832.832 0 0 0 .61.271h3.455a.835.835 0 0 0 .61-.27.962.962 0 0 0 .253-.654c0-.245-.09-.48-.253-.654a.835.835 0 0 0-.61-.27h-.864v-1.85c0-.98.364-1.92 1.012-2.614s1.526-1.083 2.443-1.083c.916 0 1.794.39 2.442 1.083a3.832 3.832 0 0 1 1.012 2.614V16.64H.864c-.23 0-.45.098-.611.271a.96.96 0 0 0-.253.654c0 .245.091.48.253.654.162.173.382.27.61.27H1.9l2.85 13.534c.137 1.366.743 2.63 1.7 3.544.957.916 2.198 1.418 3.482 1.41h18.136c1.27.01 2.5-.479 3.456-1.375.955-.896 1.57-2.137 1.726-3.487l2.85-13.626h1.036c.23 0 .45-.097.611-.27a.96.96 0 0 0 .253-.654.96.96 0 0 0-.253-.654.837.837 0 0 0-.61-.27zm-5.613 15.178a3.793 3.793 0 0 1-1.132 2.367 3.326 3.326 0 0 1-2.323.943H9.932a3.339 3.339 0 0 1-2.356-.983 3.815 3.815 0 0 1-1.099-2.438L3.68 18.488h30.66l-2.816 13.33z'/%3E%3C/svg%3E"); }
.ct-prop-stats__item--living { --ct-prop-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%23000'%3E%3Cpath d='M29.063 0H.938A.938.938 0 0 0 0 .937v28.125A.935.935 0 0 0 .937 30h28.125a.935.935 0 0 0 .938-.938V.938a.935.935 0 0 0-.275-.662.932.932 0 0 0-.663-.276zm-.938 28.125H1.875V1.875h26.25v26.25z'/%3E%3Cpath d='M18.479 12.853l4.96-4.969v4.303h1.874V5.625a.936.936 0 0 0-.937-.937h-6.563v1.875h4.303l-4.959 4.959 1.322 1.331zM5.625 25.313h6.563v-1.875H7.883l4.96-4.96-1.322-1.322-4.96 4.96v-4.303H4.688v6.562a.941.941 0 0 0 .938.937z'/%3E%3C/svg%3E"); }
.ct-prop-stats__item--lot { --ct-prop-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.936 0v1.503h6.412l-7.88 7.89 1.061 1.062 7.915-7.925v6.49h1.502V0h-9.01zM0 0v9.02h1.503V2.53l7.914 7.925 1.062-1.063-7.88-7.889h6.41V0H0zm19.521 20.608l7.88 7.889h-6.41V30H30v-9.02h-1.503v6.49l-7.914-7.925-1.061 1.063zM1.503 27.47v-6.49H0V30h9.01v-1.503H2.6l7.879-7.89-1.062-1.062-7.914 7.925z'/%3E%3C/svg%3E"); }

.ct-prop-stats__text {
	margin: 0 0 0 24px;
	font-family: var(--ct-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-ink);
}

/* No description: live lays the rail out as one row over a rule. */
.ct-prop-overview:not(:has(.ct-prop-overview__main)) > .ct-prop-overview__stats {
	flex-basis: 100%;
	min-width: 100%;
	padding: 0 0 80px;
	border-left: 0;
	border-bottom: 1px solid var(--ct-prop-rule);
}

.ct-prop-overview:not(:has(.ct-prop-overview__main)) .ct-prop-stats {
	display: flex;
}

.ct-prop-overview:not(:has(.ct-prop-overview__main)) .ct-prop-stats__item {
	width: 25%;
	margin: 0;
}

@media (max-width: 768px) {
	.ct-property__overview.e-con {
		--ct-prop-overview-end: calc(54px + 25.6px);
	}

	.ct-prop-overview.e-con {
		--flex-direction: column-reverse;
		flex-direction: column-reverse;
	}

	.ct-prop-overview > .ct-prop-overview__main {
		padding-right: 0;
	}

	/* Scoped past Elementor's `.e-con .elementor-widget.elementor-widget`
	 * margin reset. */
	.ct-prop-overview.e-con > .ct-prop-overview__stats.elementor-widget {
		margin-block-end: 24px;
	}

	.ct-prop-overview > .ct-prop-overview__stats {
		flex: none;
		min-width: 0;
		padding: 0;
		border-left: 0;
		border-bottom: 2px solid var(--ct-prop-rail);
	}

	.ct-prop-stats {
		display: flex;
		flex-wrap: wrap;
	}

	.ct-prop-stats__item {
		width: 50%;
		margin: 24px 0;
	}

	.ct-prop-overview.e-con:not(:has(.ct-prop-overview__main)) > .ct-prop-overview__stats.elementor-widget {
		margin-block-end: 0;
	}

	.ct-prop-overview:not(:has(.ct-prop-overview__main)) > .ct-prop-overview__stats {
		padding-bottom: 60px;
		border-bottom-width: 1px;
		border-bottom-color: var(--ct-prop-rule);
	}

	.ct-prop-overview:not(:has(.ct-prop-overview__main)) .ct-prop-stats {
		flex-wrap: wrap;
	}

	.ct-prop-overview:not(:has(.ct-prop-overview__main)) .ct-prop-stats__item {
		width: 50%;
		margin: 20px 0;
	}
}

@media (max-width: 767px) {
	.ct-property__overview.e-con {
		--ct-prop-frame: 0px;
	}

	.ct-prop-overview.e-con {
		--padding-left: 25px;
		--padding-right: 25px;
		padding-inline: 25px;
	}
}

@media (max-width: 500px) {
	.ct-prop-stats__item:nth-child(2n) {
		justify-content: flex-end;
		padding-right: 12px;
	}
}

/* ==================================================== PART 2b (live page) ===
 * VIDEO, the assigned agent and FEATURES & AMENITIES — [ct_property
 * section="video|agent|features"] in inc/property.php, the video dialog in
 * property-video.js. Measured from the live property page at 1440, 1024, 768
 * and 375 (FACT): each band sits on the 12px frame (none on phones), content
 * in the 1400px / 50px container (.ct-prop-wrap, Part 1).
 */

.ct-property__video.e-con,
.ct-property__agent.e-con,
.ct-property__features.e-con {
	--ct-prop-frame: 0px;
	--width: calc(100% + 2 * var(--ct-prop-inset) - 2 * var(--ct-prop-frame));
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	width: calc(100% + 2 * var(--ct-prop-inset) - 2 * var(--ct-prop-frame));
	max-width: none;
	margin-top: calc(-1 * var(--ct-prop-gap));
	margin-inline: calc(var(--ct-prop-frame) - var(--ct-prop-inset));
	padding: 0;
	gap: 0;
}

.ct-property__video:not(:has(.ct-prop-video)),
.ct-property__agent:not(:has(.ct-prop-agent)),
.ct-property__features:not(:has(.ct-prop-features)) {
	display: none;
}

/* --------------------------------------------------------------- video --- */

.ct-prop-video {
	padding: 96px 0;
}

.ct-prop-video__trigger {
	position: relative;
	display: block;
	width: 100%;
	min-height: 240px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--ct-dark);
	color: var(--ct-on-dark);
	text-decoration: none;
	cursor: pointer;
}

.ct-prop-video__trigger:hover,
.ct-prop-video__trigger:focus {
	background-color: var(--ct-dark);
	color: var(--ct-on-dark);
}

.ct-prop-video__trigger:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

/* Live's 50% scrim over the photograph. */
.ct-prop-video__trigger::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.5);
}

/* Scoped past Elementor's `.elementor img` reset. */
.ct-prop-video .ct-prop-video__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 80vh;
	object-fit: cover;
}

.ct-prop-video__play {
	position: absolute;
	z-index: 2;
	bottom: 15%;
	left: 12%;
	display: flex;
}

/* A 76px ring round a 50px disc holding the play triangle. */
.ct-prop-video__btn {
	position: relative;
	flex: none;
	box-sizing: border-box;
	width: 76px;
	height: 76px;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: transform 0.3s;
}

.ct-prop-video__btn::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 12px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: currentColor;
}

.ct-prop-video__btn::after {
	content: "";
	position: absolute;
	top: 32px;
	left: 34px;
	box-sizing: border-box;
	width: 10px;
	height: 12px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #808080;
}

.ct-prop-video__label {
	display: block;
	margin: 30px 0 0 36px;
	font-family: var(--ct-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: currentColor;
}

html.ct-pvideo-lock {
	overflow: hidden;
}

.ct-prop-video__modal {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: rgba(0, 0, 0, 0.92);
	overflow: hidden;
}

.ct-prop-video__modal::backdrop {
	background-color: transparent;
}

/* 16:9, as wide as the window allows, centred — live's player. */
.ct-prop-video__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(100vw, calc(100vh * 16 / 9));
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%);
}

.ct-prop-video__frame iframe,
.ct-prop-video__frame video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ct-prop-video__close {
	position: absolute;
	z-index: 2;
	top: 72px;
	right: max(20px, calc(50% - 605px));
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ct-on-dark);
	cursor: pointer;
}

.ct-prop-video__close:hover,
.ct-prop-video__close:focus {
	background: none;
	color: var(--ct-on-dark);
}

.ct-prop-video__close:focus-visible {
	outline: 2px solid var(--ct-accent);
}

/* --------------------------------------------------------------- agent --- */

.ct-property__agent.e-con {
	/* Live's band is pure black, not the Dark Panel global. FACT. */
	background-color: #000;
}

.ct-prop-agent {
	padding: 96px 0;
	color: var(--ct-on-dark);
}

.ct-prop-agent__inner {
	display: flex;
}

.ct-prop-agent__photo {
	flex: none;
	align-self: flex-end;
	width: 184px;
	height: 200px;
	margin-right: 60px;
	overflow: hidden;
}

.ct-prop-agent .ct-prop-agent__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.ct-prop-agent__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.ct-prop-agent__name {
	margin: 0 0 13px;
	font-family: var(--ct-font-display);
	font-size: 29px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	color: var(--ct-on-dark);
}

.ct-prop-agent__details {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-prop-agent__row {
	margin: 0 0 24px;
	padding-right: 64px;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 1px;
}

.ct-prop-agent__row:last-child {
	margin-bottom: 0;
	padding-right: 10px;
}

.ct-prop-agent__label {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
}

.ct-prop-agent__data {
	font-weight: 400;
	color: var(--ct-on-dark);
	overflow-wrap: anywhere;
}

/* Several agents: live stacks them, one row each with a silver rule between,
 * and puts one CONTACT AGENT beneath them all, centred (full width on
 * phones). FACT: 1px #c0c0c0, 32px above the button. */
.ct-prop-agent--multiple .ct-prop-agent__person:not(:last-child) {
	border-bottom: 1px solid #c0c0c0;
}

.ct-prop-agent__cta-row {
	margin-top: 32px;
	text-align: center;
}

/* Live's link: a grey rule under the value, drawn over in white on hover. */
.ct-prop-agent__link {
	position: relative;
	text-decoration: none;
}

.ct-prop-agent__link:hover,
.ct-prop-agent__link:focus {
	color: var(--ct-on-dark);
}

.ct-prop-agent__link::before,
.ct-prop-agent__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	transition: width 0.4s;
}

.ct-prop-agent__link::before {
	width: 100%;
	background-color: #999;
}

.ct-prop-agent__link::after {
	width: 0;
	background-color: var(--ct-on-dark);
}

.ct-prop-agent__link:hover::after,
.ct-prop-agent__link:focus-visible::after {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.ct-prop-agent__link::before,
	.ct-prop-agent__link::after,
	.ct-prop-video__btn {
		transition: none;
	}
}

/* ------------------------------------------------ features & amenities --- */

.ct-prop-features {
	padding: 96px 0;
	color: var(--ct-ink);
}

.ct-prop-features__title {
	margin: 0 0 73px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--ct-track-heading);
	text-align: left;
	text-transform: none;
	color: var(--ct-ink);
}

.ct-prop-features__cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.ct-prop-features__col {
	width: calc(50% - 18px);
}

.ct-prop-features__item {
	margin-bottom: 72px;
}

.ct-prop-features__item:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------- part 2b responsive */

@media (max-width: 1024px) {
	.ct-prop-video {
		padding: 64px 0;
	}

	.ct-prop-features {
		padding: 64px 0;
	}

	.ct-prop-agent__inner {
		flex-direction: column;
		align-items: center;
	}

	.ct-prop-agent__photo {
		align-self: auto;
		width: 188px;
		height: 214px;
		margin: 0 0 22px;
	}

	.ct-prop-agent__info {
		width: 100%;
		text-align: center;
	}

	.ct-prop-agent__details {
		flex-flow: column;
	}

	.ct-prop-agent__row,
	.ct-prop-agent__row:last-child {
		padding-right: 0;
	}
}

@media (max-width: 1023px) {
	.ct-prop-features__col {
		width: 100%;
	}

	.ct-prop-features__item,
	.ct-prop-features__item:last-child {
		margin-bottom: 62px;
	}
}

@media (max-width: 768px) {
	.ct-prop-video .ct-prop-video__img {
		height: 65vw;
	}

	.ct-prop-video__play {
		left: 50%;
		bottom: 50%;
		margin-left: -36px;
		margin-bottom: -36px;
	}

	.ct-prop-video__label {
		display: none;
	}

	.ct-prop-agent {
		padding: 64px 0;
	}

	.ct-prop-agent__name {
		margin-bottom: 30px;
	}

	.ct-prop-features {
		padding: 64px 0 0;
	}

	.ct-prop-features__title {
		margin-bottom: 20px;
	}
}

@media (max-width: 767px) {
	.ct-property__video.e-con,
	.ct-property__agent.e-con,
	.ct-property__features.e-con {
		--ct-prop-frame: 0px;
	}

	.ct-prop-agent__name {
		font-size: var(--ct-size-h4);
		line-height: 1.6;
	}

	/* Live's agent button keeps its full padding on phones. */
	.ct-prop-agent .ct-prop-agent__cta {
		padding: 20px 46px;
	}

	.ct-prop-agent__cta-row .ct-prop-agent__cta {
		display: block;
		width: 100%;
	}

	.ct-prop-features__title {
		font-size: 32px;
		line-height: 1.4;
		letter-spacing: var(--ct-track-heading);
	}
}

@media (max-width: 560px) {
	.ct-prop-agent__info {
		text-align: left;
	}

	.ct-prop-agent__name {
		text-align: center;
	}
}

/* ===================================================== PART 3 (live page) ===
 * SCHEDULE A SHOWING and the MORTGAGE CALCULATOR — [ct_property
 * section="showing|mortgage"] in inc/property.php, behaviour in
 * property-showing.js and property-mortgage.js. Measured from the live
 * property page at 1440, 1024, 768 and 375 (FACT).
 */

.ct-property__showing.e-con,
.ct-property__mortgage.e-con {
	--ct-prop-frame: 0px;
	--width: calc(100% + 2 * var(--ct-prop-inset) - 2 * var(--ct-prop-frame));
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	width: calc(100% + 2 * var(--ct-prop-inset) - 2 * var(--ct-prop-frame));
	max-width: none;
	margin-top: calc(-1 * var(--ct-prop-gap));
	margin-inline: calc(var(--ct-prop-frame) - var(--ct-prop-inset));
	padding: 0;
	gap: 0;
	overflow-x: clip;
}

.ct-property__showing:not(:has(.ct-prop-showing)),
.ct-property__mortgage:not(:has(.ct-prop-mortgage)) {
	display: none;
}

/* ------------------------------------------------------------- showing --- */

.ct-prop-showing {
	--ct-showing-per-view: 3;
	display: flex;
	padding-bottom: 96px;
	color: var(--ct-ink);
}

.ct-prop-showing[hidden] {
	display: none;
}

.ct-prop-showing__image {
	flex-shrink: 0;
	width: 50%;
	height: 800px;
}

.ct-prop-showing .ct-prop-showing__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.ct-prop-showing__content {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 50%;
	padding: 0 48px;
}

.ct-prop-showing--no-image {
	justify-content: center;
}

.ct-prop-showing--no-image .ct-prop-showing__content {
	width: 100%;
}

/* 640px, with the date arrows' room held inside it. */
.ct-prop-showing__form {
	box-sizing: border-box;
	width: 640px;
	max-width: 100%;
	margin: 0;
	padding: 0 64px;
}

.ct-prop-showing__step[hidden] {
	display: none;
}

.ct-prop-showing__title {
	margin: 0 0 24px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--ct-track-heading);
	text-align: center;
	text-transform: none;
	color: var(--ct-ink);
}

.ct-prop-showing__intro {
	margin: 0 0 32px;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 1px;
	text-align: center;
	color: var(--ct-ink);
}

.ct-prop-showing__dates,
.ct-prop-showing__types {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ct-prop-showing__dates {
	position: relative;
	margin-bottom: 16px;
}

.ct-prop-showing__viewport {
	margin: 0 -8px;
	overflow: hidden;
}

.ct-prop-showing__track {
	display: flex;
	transition: transform 0.5s ease;
}

.ct-prop-showing__date-slot {
	box-sizing: border-box;
	flex: 0 0 calc(100% / var(--ct-showing-per-view));
	padding: 0 8px;
	cursor: pointer;
}

.ct-prop-showing__date-input,
.ct-prop-showing__type-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	opacity: 0;
	pointer-events: none;
}

.ct-prop-showing__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 160px;
	border: 1px solid #c4c4c4;
	border-radius: 2px;
	font-family: var(--ct-font-body);
	letter-spacing: 1px;
	color: var(--ct-ink);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.ct-prop-showing__date-input:checked + .ct-prop-showing__date {
	border-color: var(--ct-accent-strong);
	background-color: var(--ct-accent-strong);
	color: var(--ct-on-dark);
}

.ct-prop-showing__date-input:focus-visible + .ct-prop-showing__date {
	outline: 2px solid var(--ct-ink);
	outline-offset: -6px;
}

.ct-prop-showing__date-input:checked:focus-visible + .ct-prop-showing__date {
	outline-color: var(--ct-on-dark);
}

.ct-prop-showing__day,
.ct-prop-showing__month {
	font-size: 14px;
	line-height: 1.71;
}

.ct-prop-showing__num {
	font-family: var(--ct-font-display);
	font-size: 56px;
	line-height: 1.18;
}

.ct-prop-showing__arrow {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--ct-accent);
	border-radius: 0;
	background-color: var(--ct-accent-strong);
	color: var(--ct-on-dark);
	cursor: pointer;
}

.ct-prop-showing__arrow:hover,
.ct-prop-showing__arrow:focus {
	background-color: var(--ct-accent-strong);
	color: var(--ct-on-dark);
}

.ct-prop-showing__arrow--prev {
	left: 0;
	transform: translate(calc(-100% - 16px), -50%);
}

.ct-prop-showing__arrow--next {
	right: 0;
	transform: translate(calc(100% + 16px), -50%);
}

.ct-prop-showing__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.ct-prop-showing__arrow:focus-visible,
.ct-prop-showing__type-input:focus-visible + .ct-prop-showing__type-label,
.ct-prop-showing__time:focus-visible,
.ct-prop-showing__input:focus-visible,
.ct-prop-showing__change:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

.ct-prop-showing .ct-prop-showing__time {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 27px;
	margin: 0 0 16px;
	padding: 0 24px 0 0;
	border: 0;
	border-bottom: 1px solid var(--ct-ink);
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") right 2px center / 14px 9px no-repeat;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 1px;
	color: var(--ct-ink);
	appearance: none;
	cursor: pointer;
}

.ct-prop-showing__types {
	display: flex;
	margin-bottom: 24px;
}

.ct-prop-showing__type {
	position: relative;
	width: 50%;
	cursor: pointer;
}

.ct-prop-showing__type-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	height: 58px;
	padding: 0 12px;
	border: 2px solid var(--ct-accent);
	background-color: var(--ct-accent-strong);
	font-family: var(--ct-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ct-on-dark);
	opacity: 0.5;
	transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.ct-prop-showing__type-input:checked + .ct-prop-showing__type-label {
	opacity: 1;
}

.ct-prop-showing__type:hover .ct-prop-showing__type-label {
	background-color: transparent;
	color: var(--ct-accent);
}

.ct-prop-showing__next,
.ct-prop-showing__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.ct-prop-showing__next:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* Scoped past the parent theme's input[type] box border. */
.ct-prop-showing .ct-prop-showing__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 26px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #999;
	border-radius: 0;
	background: transparent;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 1px;
	color: var(--ct-ink);
}

.ct-prop-showing__input::placeholder {
	color: var(--ct-ink);
	opacity: 1;
}

.ct-prop-showing__consent {
	display: flex;
	gap: 5px;
	margin: 0 0 16px;
	font-family: var(--ct-font-body);
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 1px;
	text-align: justify;
	color: var(--ct-ink);
}

.ct-prop-showing__consent input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
}

.ct-prop-showing__consent a {
	color: inherit;
}

.ct-prop-showing__pot {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.ct-prop-showing__submit {
	margin-bottom: 8px;
}

.ct-prop-showing__submit-busy,
.ct-prop-showing__submit-done,
.is-busy .ct-prop-showing__submit-text,
.is-done .ct-prop-showing__submit-text {
	display: none;
}

.is-busy .ct-prop-showing__submit-busy,
.is-done .ct-prop-showing__submit-done {
	display: inline;
}

.ct-prop-showing__chosen,
.ct-prop-showing__thanks,
.ct-prop-showing__error {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 1px;
	color: var(--ct-ink);
}

.ct-prop-showing__error {
	color: var(--ct-accent);
}

.ct-prop-showing__thanks,
.is-done .ct-prop-showing__chosen,
.is-done .ct-prop-showing__change {
	display: none;
}

.is-done .ct-prop-showing__thanks {
	display: block;
}

.ct-prop-showing__change {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--ct-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--ct-ink);
	cursor: pointer;
}

.ct-prop-showing__change:hover,
.ct-prop-showing__change:focus {
	background: none;
	color: var(--ct-accent);
}

/* ------------------------------------------------------------ mortgage --- */

.ct-property__mortgage.e-con {
	/* Live's band is pure black. FACT. */
	background-color: #000;
}

.ct-prop-mortgage {
	padding: 96px 0;
	color: var(--ct-on-dark);
}

.ct-prop-mortgage__row {
	position: relative;
	display: flex;
	margin: 0 -5%;
}

.ct-prop-mortgage__col {
	box-sizing: border-box;
	flex: 0 0 50%;
	max-width: 50%;
	padding: 0 5%;
}

.ct-prop-mortgage__title {
	margin: 0 0 16px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	color: var(--ct-on-dark);
}

.ct-prop-mortgage__desc {
	margin: 0 0 24px;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 1px;
	color: var(--ct-on-dark);
}

.ct-prop-mortgage__form {
	margin: 0;
}

.ct-prop-mortgage__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
}

.ct-prop-mortgage__group {
	margin-bottom: 16px;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 1px;
}

.ct-prop-mortgage__head {
	display: flex;
	align-items: center;
}

.ct-prop-mortgage__label {
	display: block;
	margin: 0 5px 0 0;
	line-height: 1.6;
	color: var(--ct-on-dark);
}

.ct-prop-mortgage__tip-wrap {
	position: relative;
	display: inline-flex;
}

.ct-prop-mortgage__info {
	display: flex;
	padding: 5px;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.ct-prop-mortgage__info:hover,
.ct-prop-mortgage__info:focus {
	background: none;
	color: inherit;
}

.ct-prop-mortgage__tip {
	position: absolute;
	z-index: 5;
	bottom: calc(100% + 6px);
	left: 50%;
	width: 240px;
	padding: 12px 14px;
	border-radius: 2px;
	background-color: var(--ct-canvas);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	font-family: var(--ct-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.5px;
	text-align: left;
	text-transform: none;
	color: var(--ct-ink);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
	transition: opacity 0.2s, visibility 0.2s;
	pointer-events: none;
}

.ct-prop-mortgage__tip-wrap:hover .ct-prop-mortgage__tip,
.ct-prop-mortgage__tip-wrap:focus-within .ct-prop-mortgage__tip {
	opacity: 1;
	visibility: visible;
}

/* Scoped past the parent theme's input[type] box border. */
.ct-prop-mortgage .ct-prop-mortgage__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--ct-on-dark);
	border-radius: 0;
	background: transparent;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 1px;
	color: var(--ct-on-dark);
}

.ct-prop-mortgage .ct-prop-mortgage__input:focus {
	outline: none;
	border-bottom-width: 2px;
}

.ct-prop-mortgage__input:focus-visible,
.ct-prop-mortgage__info:focus-visible,
.ct-prop-mortgage__reset:focus-visible,
.ct-prop-mortgage__legend-name:focus-visible,
.ct-prop-mortgage__share-link:focus-visible,
.ct-prop-mortgage__expand:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 2px;
}

.ct-prop-mortgage .ct-prop-mortgage__select {
	padding-right: 24px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") right 2px center / 14px 9px no-repeat;
	appearance: none;
	cursor: pointer;
}

.ct-prop-mortgage__select option {
	color: var(--ct-ink);
}

.ct-prop-mortgage__combo {
	display: flex;
	gap: 5px;
}

.ct-prop-mortgage .ct-prop-mortgage__combo .ct-prop-mortgage__input:first-child {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.ct-prop-mortgage .ct-prop-mortgage__combo .ct-prop-mortgage__pct {
	flex: none;
	width: 80px;
	padding: 0 5px;
	text-align: center;
}

.ct-prop-mortgage__disclaimer {
	margin: 16px 0;
	font-family: var(--ct-font-body);
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 1px;
	text-align: justify;
	color: var(--ct-on-dark);
}

.ct-prop-mortgage__footer {
	padding-top: 96px;
}

.ct-prop-mortgage__reset {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: uppercase;
	color: var(--ct-on-dark);
	cursor: pointer;
}

.ct-prop-mortgage__reset:hover,
.ct-prop-mortgage__reset:focus {
	background: none;
	color: var(--ct-on-dark);
}

.ct-prop-mortgage__reset svg {
	margin-left: 5px;
	transition: transform 0.3s;
}

@media (hover: hover) and (pointer: fine) {
	.ct-prop-mortgage__reset:hover svg {
		transform: rotate(360deg);
	}
}

/* The white results card. */
.ct-prop-mortgage__card {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 4px;
	background-color: var(--ct-canvas);
	color: var(--ct-ink);
}

.ct-prop-mortgage__chart {
	position: relative;
	padding: 30px;
	text-align: center;
	color: var(--ct-ink);
}

.ct-prop-mortgage__chart svg {
	display: inline-block;
	overflow: visible;
}

.ct-prop-mortgage__track {
	stroke-opacity: 0.1;
}

.ct-prop-mortgage__seg {
	transition: stroke-dasharray 0.25s linear, stroke-dashoffset 0.25s linear;
}

.ct-prop-mortgage__seg--tax {
	stroke-opacity: 0.75;
}

.ct-prop-mortgage__seg--hoa {
	stroke-opacity: 0.5;
}

text.ct-prop-mortgage__chart-amount {
	font-family: var(--ct-font-display);
	font-size: 24px;
	fill: currentColor;
}

text.ct-prop-mortgage__chart-label {
	font-family: var(--ct-font-body);
	font-size: 16px;
	letter-spacing: 1px;
	fill: currentColor;
}

.ct-prop-mortgage__chart-text {
	display: none;
}

.ct-prop-mortgage__main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding-top: 40px;
}

.ct-prop-mortgage__legend {
	flex-grow: 1;
	margin: 0;
	padding: 0 40px;
	list-style: none;
}

.ct-prop-mortgage__legend-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-left: 24px;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 1px;
}

.ct-prop-mortgage__legend-item::before {
	content: "";
	position: absolute;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 4px;
	background-color: var(--ct-ink);
}

.ct-prop-mortgage__legend-item--tax::before {
	opacity: 0.75;
}

.ct-prop-mortgage__legend-item--hoa::before {
	opacity: 0.5;
}

.ct-prop-mortgage__legend-name {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-align: left;
	text-decoration: underline;
	text-decoration-color: #ccc;
	text-underline-offset: 4px;
	color: var(--ct-ink);
	cursor: help;
}

.ct-prop-mortgage__legend-name:hover,
.ct-prop-mortgage__legend-name:focus {
	background: none;
	color: var(--ct-ink);
	text-decoration-color: var(--ct-accent);
}

.ct-prop-mortgage__legend-val {
	color: var(--ct-ink);
}

.ct-prop-mortgage__share {
	position: relative;
	display: flex;
	align-items: center;
	padding: 24px 40px;
}

.ct-prop-mortgage__share::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: currentColor;
	opacity: 0.1;
}

.ct-prop-mortgage__share-label {
	margin-right: 20px;
	font-family: var(--ct-font-body);
	font-size: 16px;
	letter-spacing: 1px;
}

.ct-prop-mortgage__share-list {
	display: flex;
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}

.ct-prop-mortgage__share-list li {
	margin: 0 14px 0 0;
}

.ct-prop-mortgage__share-list li:last-child {
	margin-right: 0;
}

.ct-prop-mortgage__share-link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ct-accent);
	border-radius: 50%;
	background-color: var(--ct-accent-strong);
	color: var(--ct-on-dark);
	transition: background-color 0.2s, color 0.2s;
}

.ct-prop-mortgage__share-link:hover,
.ct-prop-mortgage__share-link:focus {
	background-color: var(--ct-canvas);
	color: var(--ct-accent);
}

.ct-prop-mortgage__expand {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ct-prop-showing__track,
	.ct-prop-showing__date,
	.ct-prop-showing__type-label,
	.ct-prop-mortgage__seg,
	.ct-prop-mortgage__reset svg,
	.ct-prop-mortgage__tip,
	.ct-prop-mortgage__expand svg {
		transition: none;
	}
}

/* ----------------------------------------------------- part 3 responsive */

@media (min-width: 1921px) {
	.ct-prop-showing__image {
		height: 1146px;
	}
}

@media (max-width: 1200px) {
	.ct-prop-showing {
		flex-direction: column-reverse;
	}

	.ct-prop-showing__image,
	.ct-prop-showing__content {
		width: 100%;
	}

	.ct-prop-showing__image {
		height: 776px;
	}

	.ct-prop-mortgage__row {
		flex-direction: column-reverse;
		margin: 0;
	}

	.ct-prop-mortgage__col {
		flex: 0 0 100%;
		max-width: 100%;
		padding: 0;
	}

	.ct-prop-mortgage__card {
		margin-bottom: 32px;
	}

	.ct-prop-mortgage__grid {
		column-gap: 16px;
	}

	.ct-prop-mortgage__footer {
		padding-top: 24px;
	}
}

@media (max-width: 1024px) {
	.ct-prop-mortgage {
		padding: 64px 0;
	}
}

@media (max-width: 768px) {
	.ct-prop-showing {
		padding-bottom: 64px;
	}

	.ct-prop-showing__content {
		padding: 0 24px;
	}

	.ct-prop-showing__form {
		padding: 0;
	}

	.ct-prop-showing__dates {
		margin-left: 64px;
		margin-right: 64px;
	}

	.ct-prop-showing__arrow {
		width: 36px;
		height: 36px;
	}

	.ct-prop-showing__type-text {
		display: none;
	}

	.ct-prop-mortgage {
		padding: 0 0 64px;
	}

	.ct-prop-mortgage__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Live's fields keep their 52px rows here; only the down-payment pair
	 * tightens to its 21px inputs. */
	.ct-prop-mortgage .ct-prop-mortgage__combo .ct-prop-mortgage__input {
		height: 21px;
		line-height: 16px;
	}

	/* The card folds to the payment on a white band across the width, and
	 * opens to the breakdown from the red button on its edge. */
	.ct-prop-mortgage__card {
		margin-bottom: 56px;
	}

	.ct-prop-mortgage__card::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0 -100px;
		background-color: var(--ct-canvas);
	}

	.ct-prop-mortgage__chart {
		box-sizing: border-box;
		height: 128px;
		padding: 30px 0;
		text-align: left;
	}

	.ct-prop-mortgage__chart svg {
		width: 70px;
		height: 68px;
	}

	.ct-prop-mortgage__chart svg text {
		display: none;
	}

	.ct-prop-mortgage__chart-text {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		text-align: center;
		transform: translate(-50%, -50%);
	}

	.ct-prop-mortgage__chart-text span {
		display: block;
	}

	span.ct-prop-mortgage__chart-amount {
		font-family: var(--ct-font-display);
		font-size: 24px;
		line-height: 1.6;
	}

	span.ct-prop-mortgage__chart-label {
		font-family: var(--ct-font-body);
		font-size: 16px;
		line-height: 1.6;
		letter-spacing: 1px;
	}

	.ct-prop-mortgage__main {
		display: none;
		padding: 0;
	}

	.is-expanded .ct-prop-mortgage__main {
		display: flex;
	}

	.ct-prop-mortgage__legend {
		padding: 0;
	}

	.ct-prop-mortgage__share {
		justify-content: center;
		padding: 24px 0 40px;
	}

	.ct-prop-mortgage__expand {
		position: absolute;
		bottom: 0;
		left: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: var(--ct-accent-strong);
		color: var(--ct-on-dark);
		transform: translate(-50%, 50%);
		cursor: pointer;
	}

	.ct-prop-mortgage__expand:hover,
	.ct-prop-mortgage__expand:focus {
		background-color: var(--ct-accent-strong);
		color: var(--ct-on-dark);
	}

	.ct-prop-mortgage__expand svg {
		transform: rotate(180deg);
		transition: transform 0.3s;
	}

	.is-expanded .ct-prop-mortgage__expand svg {
		transform: rotate(0deg);
	}
}

@media (max-width: 767px) {
	/* Touch: each field's target runs up under its label to 44px. The padding
	 * is taken back as margin, so the rule, the value and the 52px rows stay
	 * where live has them; the label row is drawn over the field and lets the
	 * tap through to it, the ⓘ excepted. */
	.ct-prop-mortgage .ct-prop-mortgage__input {
		height: 44px;
		margin-top: -18px;
		padding-top: 18px;
	}

	.ct-prop-mortgage .ct-prop-mortgage__combo .ct-prop-mortgage__input {
		height: 44px;
		margin-top: -23px;
		padding-top: 23px;
	}

	.ct-prop-mortgage .ct-prop-mortgage__select {
		background-position: right 2px bottom 8px;
	}

	.ct-prop-mortgage__head {
		position: relative;
		z-index: 1;
		pointer-events: none;
	}

	.ct-prop-mortgage__tip-wrap {
		pointer-events: auto;
	}

	.ct-prop-mortgage__reset {
		margin-block: -14px;
		padding-block: 14px;
	}

	.ct-property__showing.e-con,
	.ct-property__mortgage.e-con {
		--ct-prop-frame: 0px;
	}

	.ct-prop-showing {
		--ct-showing-per-view: 2;
	}

	.ct-prop-showing__title,
	.ct-prop-mortgage__title {
		font-size: 32px;
		line-height: 1.4;
		letter-spacing: var(--ct-track-heading);
	}

	.ct-prop-showing__title,
	.ct-prop-showing__intro {
		margin-bottom: 16px;
	}

	/* Live keeps these buttons at full height on phones. */
	.ct-prop-showing .ct-prop-showing__next,
	.ct-prop-showing .ct-prop-showing__submit {
		padding: 20px 12px;
	}

	.ct-prop-mortgage__title,
	.ct-prop-mortgage__desc {
		text-align: center;
	}
}

@media (max-width: 580px) {
	.ct-prop-showing__image {
		display: none;
	}
}

@media (max-width: 578.98px) {
	.ct-prop-showing {
		--ct-showing-per-view: 1;
	}
}

/* ===================================================== PART 4 (live page) ===
 * The property MAP, its NEIGHBORHOOD and WORK WITH CARY. The map is the
 * listings plugin's location map (the one the Neighborhood page shows); the
 * neighborhood block is [ct_property section="neighborhood"]; Work With Cary
 * is the global template (5331), placed as every other page places it and
 * styled only by sections.css and the template itself. Measured from the live
 * property page at 1440, 1024, 768 and 375 (FACT).
 */

.ct-property__map.e-con,
.ct-property__neighborhood.e-con,
.ct-property__work-with.e-con {
	--ct-prop-frame: 0px;
	--width: calc(100% + 2 * var(--ct-prop-inset) - 2 * var(--ct-prop-frame));
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	width: calc(100% + 2 * var(--ct-prop-inset) - 2 * var(--ct-prop-frame));
	max-width: none;
	margin-top: calc(-1 * var(--ct-prop-gap));
	margin-inline: calc(var(--ct-prop-frame) - var(--ct-prop-inset));
	padding: 0;
	gap: 0;
	overflow-x: clip;
}

/* Work With Cary brings its own 12px frame (.ct-home-section), so its
 * holder spans the full width. */
.ct-property__work-with.e-con {
	--ct-prop-frame: 0px;
}

.ct-property__map:not(:has(.ct-prop-map)),
.ct-property__neighborhood:not(:has(.ct-prop-nb)),
.ct-property__work-with:not(:has(.ct-work-with)) {
	display: none;
}

/* ----------------------------------------------------------------- map --- */

/* A plain block holder: at phone widths Elementor's flex column sized the
 * map widget to nothing, since its height only follows from its width. */
.ct-property__map.e-con {
	--display: block;
	display: block;
}

/* Live's map is 35% as tall as it is wide, at every width. */
.ct-prop-map .rb-point-map {
	position: relative;
	height: 0;
	padding-bottom: 35%;
}

.ct-prop-map .rb-point-map__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #f3f3f3;
}

/* Live's map is greyscale; its pin is the red one. */
.ct-prop-map .leaflet-tile-pane {
	filter: grayscale(1);
}

.ct-prop-map .leaflet-marker-icon {
	filter: hue-rotate(155deg) saturate(1.6) brightness(1.1);
}

.ct-prop-map .rb-point-map__fallback {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1000;
	margin: 0;
}

.ct-prop-map .rb-point-map__link {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ct-prop-map .rb-point-map__link:focus {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	padding: 8px 12px;
	clip-path: none;
	background-color: var(--ct-canvas);
	font-family: var(--ct-font-body);
	font-size: 14px;
	color: var(--ct-ink);
	outline: 2px solid var(--ct-accent);
}

/* -------------------------------------------------------- neighborhood --- */

.ct-prop-nb {
	display: flex;
	align-items: center;
	padding: var(--ct-space-section) 0;
	overflow: hidden;
	color: var(--ct-ink);
}

.ct-prop-nb__media,
.ct-prop-nb__details {
	flex: 1 1 0%;
}

.ct-prop-nb__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 50px;
}

/* The photograph inside an accent hairline offset down and to the right —
 * the frame the home page's Meet Cary portrait uses. */
.ct-prop-nb .ct-prop-nb__img {
	display: block;
	flex: none;
	width: 100%;
	max-width: 600px;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	background-color: var(--ct-surface);
	box-shadow: 20px 20px 0 -1px var(--ct-canvas), 20px 20px 0 0 var(--ct-accent);
}

.ct-prop-nb__details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 48px;
}

.ct-prop-nb__title {
	margin: 0 0 16px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	color: var(--ct-ink);
}

.ct-prop-nb__btn {
	margin-top: 36px;
}

/* ----------------------------------------------------- work with cary --- */

/* ----------------------------------------------------- part 4 responsive */

@media (max-width: 768px) {
	.ct-prop-nb {
		flex-direction: column;
		padding: 74px 0 16px;
	}

	.ct-prop-nb__media {
		padding: 0 var(--ct-gutter) 40px;
	}
}

@media (max-width: 767px) {
	.ct-property__map.e-con,
	.ct-property__neighborhood.e-con {
		--ct-prop-frame: 0px;
	}

	.ct-prop-nb__title {
		font-size: 32px;
		line-height: 1.4;
		letter-spacing: var(--ct-track-heading);
	}

	.ct-prop-nb__details {
		align-items: stretch;
	}

	.ct-prop-nb .ct-prop-nb__btn {
		justify-content: center;
	}
}

/* ---------------------------------------------------------- responsive ---
 * 1024 and 767 are the Elementor kit's own tablet and mobile viewports, held
 * in tokens.css as --ct-bp-tablet / --ct-bp-mobile. Only what genuinely cannot
 * survive a narrow column changes: multi-column grids collapse and the section
 * rhythm tightens. Type roles, colours and the button system are untouched, so
 * a narrow page is the same design, not a second one.
 */

@media (max-width: 1024px) {
	.ct-property__section,
	.ct-property__band {
		padding-block: var(--ct-section-padding-compact);
	}
}


/* ------------------------------------------------------------ masthead ---
 * The gallery is the property's hero: drawn up under the transparent
 * masthead (header-footer.css, "masthead"), so the photographs start at the
 * top of the window, as the home page's film does. A scrim under the
 * header keeps its white labels readable over bright skies, at the same
 * depth as the editorial hero's (page-hero.css): a lighter one left labels
 * near 4.5:1 over white skies on some listings. It sits below the arrows
 * and the thumbnail strip, and takes no pointer events. */
.ct-masthead-over .ct-property__hero.e-con {
	margin-top: calc(var(--ct-prop-frame) - var(--ct-prop-inset-top) - var(--ct-header-h) - 1px);
}

.ct-masthead-over .ct-pgallery__stage::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 4;
	height: 280px;
	background-image: linear-gradient(180deg, rgba(10, 10, 11, 0.78) 0, rgba(10, 10, 11, 0.62) var(--ct-header-h), rgba(10, 10, 11, 0) 100%);
	pointer-events: none;
}