/*
 * CaryTamura shared page sections — 2026 redesign.
 *
 * The section components placed on more than one page, each scoped under its
 * own class and inert where it is not placed. Loaded site-wide (functions.php)
 * because the contact band and the listing card appear on nearly every page.
 *
 *   .ct-home-section     the older section frame some pages still carry —
 *                        now the redesign's gutters and rhythm
 *   .ct-testimonials     testimonial CPT through CT Loop – Testimonial (5361),
 *                        driven by home-testimonials.js (unchanged)
 *   .ct-prop-card        CT Loop – Property Card (5329): listing photo, status,
 *                        price, address, facts — all dynamic, all the plugin's
 *   .ct-search-cta       CT Property Search CTA (5465)
 *   .ct-subscribe        CT Exclusive Listings Signup (5484)
 *   .ct-experience       CT Experience Gallery (5492): "How I can help"
 *   .ct-work-with        CT Work With Cary (5331): the contact band
 *
 * The original measured-from-live versions of these (photo-ground testimonials,
 * the centred peeking listing carousel, the black subscribe band, the square
 * gallery cards, the original Work With Cary photograph) are replaced, not
 * layered over: none of their rules remain.
 */

/* ------------------------------------------------------------------ frame */
.ct-home-section.e-con {
	--padding-top: var(--ct-space-section);
	--padding-bottom: var(--ct-space-section);
	--padding-left: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--padding-right: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--row-gap: 0px;
	--column-gap: 0px;
	--kit-widget-spacing: 0px;
}

/* A Template widget placing a section adds no spacing of its own. */
.ct-home-section.elementor-widget,
.ct-experience-placement.elementor-widget,
.ct-subscribe-placement.elementor-widget,
.ct-work-with-placement.elementor-widget,
.elementor-widget-template.ct-search-cta-slot {
	--kit-widget-spacing: 0px;
	margin-block: 0;
}

.ct-home-section .ct-section-title .elementor-heading-title {
	margin: 0 0 var(--ct-space-block);
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h2);
	font-weight: 400;
	line-height: var(--ct-leading-heading);
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	text-align: left;
	color: var(--ct-ink);
}

.ct-home-section .ct-body-copy,
.ct-home-section .ct-body-copy p {
	max-width: var(--ct-measure);
	font-family: var(--ct-font-body);
	font-size: 17px;
	line-height: 1.75;
	letter-spacing: 0;
	color: var(--ct-ink-body);
}

.ct-home-section .ct-body-copy p:last-child {
	margin-bottom: 0;
}

/* Card photos fill their card; Elementor's image widget otherwise centres
 * the image at its intrinsic size inside the link. */
.ct-gallery-card__img,
.ct-prop-card__img,
.ct-hood-tile__img,
.ct-gallery-card__img a,
.ct-prop-card__img a,
.ct-hood-tile__img a {
	display: block;
	width: 100%;
}

/* ----------------------------------------------------------- testimonials
 * Title, eyebrow and Previous / Next on the left; one large serif quote on
 * the right under an oversized quotation mark. One testimonial at a time,
 * cross-fading. home-testimonials.js holds the carousel at the TALLEST
 * quote, so the section never jumps; the visible quote is centred in that
 * height (so the reserve falls above and below it rather than collecting
 * under a short quote), and the quotation mark belongs to each quote, so it
 * always sits on the visible one. Home restyles this section (home.css). */
.ct-testimonials.e-con {
	background-image: none;
}

.ct-testimonials__inner.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 40px;
	--column-gap: 0px;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 40px clamp(40px, 6vw, 96px);
	align-items: start;
}

.ct-testimonials__left.e-con,
.ct-testimonials__right.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--kit-widget-spacing: 0px;
	width: auto;
	min-width: 0;
	align-items: flex-start;
	text-align: left;
}

.ct-testimonials__title .elementor-heading-title {
	margin-bottom: 32px;
}

.ct-testimonials__nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ct-testimonials__nav button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ct-ink);
	border-radius: 0;
	background: transparent;
	font-size: 0;
	color: var(--ct-ink);
	cursor: pointer;
	transition: background-color var(--ct-transition), color var(--ct-transition);
}

/* The labels stay in the markup for assistive technology; the button draws
 * an arrow instead. */
.ct-testimonials__nav button::before {
	content: "\2190";
	font-family: var(--ct-font-body);
	font-size: 18px;
	line-height: 1;
}

.ct-testimonials__nav .ct-testimonials__next::before {
	content: "\2192";
}

.ct-testimonials__nav button:hover,
.ct-testimonials__nav button:focus-visible {
	background-color: var(--ct-ink);
	color: var(--ct-on-dark);
}

.ct-testimonials__nav button:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 3px;
}

.ct-testimonials__sep {
	display: none;
}

.ct-testimonials .ct-testimonials-carousel {
	position: relative;
	width: 100%;
}

/* The oversized quotation mark: decoration, drawn by CSS on each quote. Its
 * 64px block is the space the carousel's top padding used to keep for it. */
.ct-testimonials .ct-testimonial__quote::before {
	content: "\201C";
	display: block;
	height: 64px;
	margin-left: -4px;
	font-family: var(--ct-font-display);
	font-size: 120px;
	line-height: 0.85;
	color: var(--ct-accent);
}

.ct-testimonials-carousel .swiper-wrapper {
	align-items: center;
	transition-property: transform, height;
}

.ct-testimonials .ct-testimonials-carousel .swiper-slide {
	height: auto;
	opacity: 0;
	transition: opacity 300ms linear;
}

.ct-testimonials .ct-testimonials-carousel .swiper-slide-active {
	opacity: 1;
}

.ct-testimonial.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
}

.ct-testimonial__quote,
.ct-testimonial__quote p {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: clamp(20px, 1.9vw, 27px);
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--ct-ink);
}

.ct-testimonial .ct-testimonial__quote {
	padding-bottom: 28px;
}

.ct-testimonial__cite .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--ct-ink);
}

.ct-testimonials .ct-testimonials__all {
	margin-top: 36px;
}

@media (max-width: 1024px) {
	.ct-testimonials__inner.e-con {
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-testimonials__title .elementor-heading-title {
		margin-bottom: 24px;
	}
}

/* --------------------------------------------------------- property card
 * CT Loop – Property Card (5329), wherever a grid or carousel places it.
 * Photo above, details below on the page ground — not a panel over the
 * photo. Every value is dynamic: the photo is the listing's featured image,
 * status its status term, price/facts from [ct_listing] (the plugin's
 * pricing and facts contract). */
.ct-prop-card.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--kit-widget-spacing: 0px;
	position: relative;
	height: 100%;
}

.ct-prop-card__img {
	overflow: hidden;
	background-color: var(--ct-surface);
}

.ct-prop-card__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 600ms var(--ct-ease);
}

.ct-prop-card:hover .ct-prop-card__img img {
	transform: scale(1.03);
}

/* A listing with no photograph keeps the frame in the card surface. */
.ct-prop-card.e-con:not(:has(.ct-prop-card__img))::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--ct-surface);
}

.ct-prop-card__status {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	width: auto;
}

.ct-prop-card__status .elementor-heading-title {
	padding: 7px 12px;
	font-family: var(--ct-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ct-ink);
	background-color: var(--ct-canvas);
}

.ct-prop-card__info.e-con {
	--padding-top: 22px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 6px;
	position: static;
	width: 100%;
	background: none;
}

.ct-prop-card__price {
	order: -1;
}

.ct-listing-price {
	display: block;
	font-family: var(--ct-font-display);
	font-size: clamp(22px, 1.8vw, 28px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--ct-ink);
}

.ct-prop-card__name .elementor-heading-title,
.ct-prop-card__name .elementor-heading-title a {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ct-ink);
	text-decoration: none;
}

/* The whole card is the link: the address link is stretched over it. */
.ct-prop-card__name .elementor-heading-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.ct-prop-card__name .elementor-heading-title a:focus-visible {
	outline: none;
}

.ct-prop-card__name .elementor-heading-title a:focus-visible::after {
	outline: 2px solid var(--ct-accent);
	outline-offset: 4px;
}

.ct-listing-specs {
	display: block;
	font-family: var(--ct-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ct-label);
}

/* The card's combined address-and-short-facts line repeats the address and
 * facts shown above it, so it stays hidden everywhere. */
.ct-prop-card__summary {
	display: none;
}

/* The card itself is the link; its separate View Property button is the
 * Agent page's (single-agent.css shows it). */
.ct-prop-card__view {
	display: none;
}

/* -------------------------------------------------- property search band
 * CT Property Search CTA (5465): one line of title, one button, on paper,
 * between rules. */
.ct-search-cta.e-con {
	--padding-top: clamp(48px, 6vw, 80px);
	--padding-bottom: clamp(48px, 6vw, 80px);
	--padding-left: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--padding-right: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--gap: 24px 48px;
	--row-gap: 24px;
	--column-gap: 48px;
	--kit-widget-spacing: 0px;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	background-color: var(--ct-paper);
	border-block: 1px solid var(--ct-border);
}

.ct-search-cta.e-con > .ct-search-cta__title.elementor-widget {
	flex: 1 1 420px;
	max-width: 760px;
}

.ct-search-cta .ct-search-cta__btn.elementor-widget {
	flex: 0 0 auto;
	width: auto;
}

.ct-search-cta__title .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h2);
	font-weight: 400;
	line-height: var(--ct-leading-heading);
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	text-align: left;
	color: var(--ct-ink);
}

/* -------------------------------------------------------------- subscribe
 * CT Exclusive Listings Signup (5484): a dark panel — title, lead, then the
 * fields on one line with underlined inputs. */
.ct-home-section.ct-subscribe.e-con {
	--padding-top: clamp(48px, 6vw, 88px);
	--padding-bottom: clamp(48px, 6vw, 88px);
	--padding-left: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--padding-right: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	align-items: flex-start;
	background-color: var(--ct-dark);
	color: var(--ct-on-dark);
}

.ct-subscribe .ct-section-title .elementor-heading-title {
	margin: 0 0 14px;
	font-size: var(--ct-type-h3);
	color: var(--ct-on-dark);
}

.ct-subscribe__lead .elementor-heading-title {
	margin: 0 0 28px;
	max-width: 52ch;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: rgba(255, 255, 255, 0.78);
}

.ct-home-section.ct-subscribe.e-con > .ct-subscribe__form {
	width: 100%;
}

.ct-subscribe__form .elementor-form-fields-wrapper {
	align-items: flex-end;
}

.ct-subscribe__form .elementor-field-group.elementor-field-type-text,
.ct-subscribe__form .elementor-field-group.elementor-field-type-email {
	flex: 1 1 200px;
	max-width: none;
}

.ct-subscribe__form .elementor-field-group.e-form__buttons {
	flex: 0 0 auto;
	max-width: none;
}

.ct-subscribe__form .elementor-field-group .elementor-field-textual.elementor-field {
	height: 52px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 0;
	background: transparent;
	font-family: var(--ct-font-body);
	font-size: 16px;
	letter-spacing: 0;
	color: var(--ct-on-dark);
}

.ct-subscribe__form .elementor-field-textual::placeholder {
	color: rgba(255, 255, 255, 0.72);
	opacity: 1;
}

.ct-subscribe__form .elementor-field-textual:focus {
	border-bottom-color: var(--ct-on-dark);
}

.ct-subscribe__form .elementor-field-textual:focus-visible {
	outline: 2px solid var(--ct-on-dark);
	outline-offset: 2px;
}

.ct-subscribe__form .elementor-field-type-acceptance {
	order: 10;
	margin-top: 8px;
}

.ct-subscribe__form .elementor-field-type-acceptance,
.ct-subscribe__form .elementor-field-type-acceptance label,
.ct-subscribe__form .elementor-field-type-acceptance a {
	font-family: var(--ct-font-body);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.72);
}

.ct-subscribe__form .elementor-field-type-acceptance a {
	color: var(--ct-on-dark);
	text-decoration: underline;
}

/* Outranks the form widget's own button colours
 * (.elementor-5484 .elementor-element-N .elementor-button). */
.ct-home-section.ct-subscribe .ct-subscribe__form .elementor-field-group.e-form__buttons .elementor-button {
	min-height: 52px;
	padding: 16px 28px;
	border: 1px solid var(--ct-on-dark);
	border-radius: 0;
	background-color: var(--ct-on-dark);
	font-family: var(--ct-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ct-ink);
	transition: background-color var(--ct-transition), color var(--ct-transition), border-color var(--ct-transition);
}

.ct-home-section.ct-subscribe .ct-subscribe__form .elementor-field-group.e-form__buttons .elementor-button:hover,
.ct-home-section.ct-subscribe .ct-subscribe__form .elementor-field-group.e-form__buttons .elementor-button:focus {
	background-color: var(--ct-accent-strong);
	border-color: var(--ct-accent-strong);
	color: var(--ct-on-dark);
}

.ct-subscribe__form .elementor-message {
	color: var(--ct-on-dark);
}

@media (max-width: 767px) {
	.ct-subscribe__form .elementor-field-group:not(.elementor-field-type-acceptance) {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	.ct-home-section.ct-subscribe .ct-subscribe__form .elementor-field-group.e-form__buttons .elementor-button {
		width: 100%;
	}
}

/* ---------------------------------------------------------- how I can help
 * CT Experience Gallery (5492): three tall cards — Listings, Team (its own
 * loop), Home Valuation — numbered, staggered, title and arrow under the
 * photograph. */
.ct-experience.e-con {
	counter-reset: ct-help;
}

.ct-gallery.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

.ct-gallery > .ct-gallery-card,
.ct-gallery > .ct-gallery__team {
	width: auto;
	min-width: 0;
	margin: 0;
	counter-increment: ct-help;
}

/* The middle card drops, so the row reads as a sequence, not a strip. */
.ct-gallery > :nth-child(2) {
	margin-top: clamp(0px, 6vw, 88px);
}

.ct-gallery__team .elementor-loop-container {
	display: block;
}

.ct-gallery-card.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	position: relative;
}

.ct-gallery-card__img {
	overflow: hidden;
	background-color: var(--ct-surface);
}

.ct-gallery-card__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 600ms var(--ct-ease);
}

.ct-gallery-card:hover .ct-gallery-card__img img {
	transform: scale(1.03);
}

.ct-gallery-card__title {
	position: static;
}

.ct-gallery-card__title .elementor-heading-title {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 20px 0 0;
	border-top: 0;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h3);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--ct-ink);
}

/* The number: 01, 02, 03 — the card's place in the sequence. */
.ct-gallery-card__title .elementor-heading-title::before {
	content: counter(ct-help, decimal-leading-zero);
	font-family: var(--ct-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	color: var(--ct-accent-strong);
}

.ct-gallery-card__title .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

.ct-gallery-card__title .elementor-heading-title a::before {
	content: "\2192";
	order: 2;
	margin-left: auto;
	font-family: var(--ct-font-body);
	font-size: 20px;
	transition: transform var(--ct-transition);
}

.ct-gallery-card__title .elementor-heading-title a {
	display: flex;
	flex: 1 1 auto;
	gap: 14px;
}

.ct-gallery-card:hover .ct-gallery-card__title a::before {
	transform: translateX(4px);
}

/* The whole card is the link. */
.ct-gallery-card__title .elementor-heading-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (max-width: 767px) {
	.ct-gallery.e-con {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.ct-gallery > :nth-child(2) {
		margin-top: 0;
	}

	.ct-gallery-card__img img {
		aspect-ratio: 4 / 3;
	}
}

/* ------------------------------------------------------------ contact band
 * CT Work With Cary (5331), the last section of most pages: the photograph
 * covers the whole band and the invitation, the copy and the two ways to get
 * in touch are set on it, over a charcoal gradient that is densest behind
 * the text. The photograph stays the media container's Elementor background
 * (11379); the container is laid behind the body here, so the template's
 * structure is unchanged. */
.ct-work-with.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--kit-widget-spacing: 0px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	flex-direction: row;
	align-items: stretch;
	min-height: clamp(520px, 44vw, 660px);
	background-color: var(--ct-dark);
	color: var(--ct-on-dark);
}

/* Elementor uses ::before for its own background overlay, so the gradient
 * is drawn on ::after. Until Elementor's lazy-load lets the photograph in,
 * the band shows charcoal with the text already readable. */
.ct-work-with__media.e-con {
	position: absolute;
	inset: 0;
	z-index: -1;
	flex: none;
	width: auto;
	min-height: 0;
	background-color: var(--ct-dark);
}

/* Outranks Elementor's per-element rule in post-5331.css (0,4,0), which
 * sets centre centre. */
.elementor .ct-work-with.e-con > .ct-work-with__media.e-con.e-child {
	background-position: 50% 58%;
}

.ct-work-with__media.e-con::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(23, 24, 25, 0.9) 0%, rgba(23, 24, 25, 0.82) 34%, rgba(23, 24, 25, 0.45) 62%, rgba(23, 24, 25, 0.1) 100%),
		linear-gradient(0deg, rgba(23, 24, 25, 0.35) 0%, rgba(23, 24, 25, 0) 40%);
	pointer-events: none;
}

.ct-work-with__body.e-con {
	--padding-top: clamp(72px, 7vw, 112px);
	--padding-bottom: clamp(72px, 7vw, 112px);
	--padding-left: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--padding-right: var(--ct-gutter);
	--row-gap: 0px;
	--kit-widget-spacing: 0px;
	position: relative;
	flex: 1 1 auto;
	justify-content: center;
	align-items: flex-start;
}

.ct-work-with__body.e-con > .elementor-element {
	max-width: 34rem;
}

.ct-work-with .ct-eyebrow .elementor-heading-title,
.ct-work-with .ct-title .elementor-heading-title {
	color: var(--ct-paper);
}

.ct-work-with__title .elementor-heading-title {
	margin-bottom: 24px;
}

.ct-work-with .ct-copy,
.ct-work-with .ct-copy p {
	max-width: 46ch;
	color: rgba(246, 243, 238, 0.86);
}

.ct-work-with__actions.e-con {
	--padding-top: 36px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 16px 32px;
	--row-gap: 16px;
	--column-gap: 32px;
	--kit-widget-spacing: 0px;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.ct-work-with__actions > .elementor-widget {
	width: auto;
}

/* The light text link: on the dark band the label and arrow are white. */
.ct-link-arrow--light .elementor-button,
.ct-link-arrow--light .elementor-button:hover,
.ct-link-arrow--light .elementor-button:focus {
	color: var(--ct-on-dark);
}

/* Narrow desktops and landscape tablets: the text column takes about half
 * the width, so the gradient holds its depth further across. */
@media (min-width: 901px) and (max-width: 1199px) {
	.ct-work-with__media.e-con::after {
		background:
			linear-gradient(90deg, rgba(23, 24, 25, 0.9) 0%, rgba(23, 24, 25, 0.86) 48%, rgba(23, 24, 25, 0.55) 72%, rgba(23, 24, 25, 0.15) 100%),
			linear-gradient(0deg, rgba(23, 24, 25, 0.35) 0%, rgba(23, 24, 25, 0) 40%);
	}
}

/* Tablets and phones: the photograph still fills the band. The top is left
 * clear to show it; the text sits at the foot, where the gradient deepens. */
@media (max-width: 900px) {
	.ct-work-with.e-con {
		flex-direction: column;
		min-height: 0;
	}

	.elementor .ct-work-with.e-con > .ct-work-with__media.e-con.e-child {
		background-position: 72% 50%;
	}

	.ct-work-with__media.e-con::after {
		background: linear-gradient(180deg, rgba(23, 24, 25, 0.06) 0%, rgba(23, 24, 25, 0.2) 18%, rgba(23, 24, 25, 0.78) 33%, rgba(23, 24, 25, 0.88) 50%, rgba(23, 24, 25, 0.9) 100%);
	}

	.ct-work-with__body.e-con {
		--padding-left: var(--ct-gutter);
		--padding-right: var(--ct-gutter);
		--padding-top: clamp(240px, 66vw, 340px);
		--padding-bottom: 56px;
		justify-content: flex-end;
	}

	.ct-work-with__body.e-con > .elementor-element {
		max-width: none;
	}
}

/* Phones: Contact runs the full width; the call link sits under it. */
@media (max-width: 520px) {
	.ct-work-with__actions.e-con {
		--padding-top: 32px;
		flex-direction: column;
		align-items: stretch;
	}

	.ct-work-with__actions > .ct-work-with__btn .elementor-button {
		width: 100%;
		justify-content: center;
	}

	.ct-work-with__actions > .ct-work-with__phone {
		align-self: flex-start;
	}
}

/* ------------------------------------------------------- listing carousel
 * A Loop Carousel of CT Loop – Property Card set three up (two on tablet,
 * one on phones), its arrows drawn as square buttons beside the section
 * head (About, Team). The carousel's query is its own. */
.ct-listing-carousel.elementor-widget {
	--ct-arrow-size: 52px;
}

/* Arrows at the right end of the section head: above the carousel by their
 * own height plus the head's bottom margin. Written to outrank Elementor's
 * own arrow position rules. */
.ct-listing-carousel.elementor-widget .elementor-swiper-button.elementor-swiper-button-prev,
.ct-listing-carousel.elementor-widget .elementor-swiper-button.elementor-swiper-button-next {
	top: calc(-1 * (var(--ct-arrow-size) + var(--ct-space-block)));
	bottom: auto;
	transform: none;
	inset-inline-start: auto;
	left: auto;
}

.ct-listing-carousel.elementor-widget .elementor-swiper-button.elementor-swiper-button-prev {
	right: calc(var(--ct-arrow-size) + 8px);
	inset-inline-end: calc(var(--ct-arrow-size) + 8px);
}

.ct-listing-carousel.elementor-widget .elementor-swiper-button.elementor-swiper-button-next {
	right: 0;
	inset-inline-end: 0;
}

.ct-listing-carousel .swiper-wrapper {
	align-items: stretch;
}

.ct-listing-carousel.elementor-widget .elementor-swiper-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ct-arrow-size);
	height: var(--ct-arrow-size);
	border: 1px solid var(--ct-ink);
	background-color: var(--ct-canvas);
	color: var(--ct-ink);
	transition: background-color var(--ct-transition), color var(--ct-transition);
}

.ct-listing-carousel.elementor-widget .elementor-swiper-button svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.ct-listing-carousel.elementor-widget .elementor-swiper-button:hover,
.ct-listing-carousel.elementor-widget .elementor-swiper-button:focus-visible {
	background-color: var(--ct-ink);
	color: var(--ct-on-dark);
}

/* The section head leaves room at its right for the two arrows. */
.ct-listings-band .ct-section-head.e-con {
	padding-right: calc(2 * 52px + 32px);
}

@media (max-width: 1024px) {
	.ct-listings-band .ct-section-head.e-con {
		padding-right: 0;
		margin-bottom: calc(52px + 40px);
	}

	.ct-listing-carousel.elementor-widget .elementor-swiper-button.elementor-swiper-button-prev,
	.ct-listing-carousel.elementor-widget .elementor-swiper-button.elementor-swiper-button-next {
		top: calc(-1 * (var(--ct-arrow-size) + 24px));
	}

	.ct-listing-carousel.elementor-widget .elementor-swiper-button.elementor-swiper-button-prev {
		right: auto;
		inset-inline-end: auto;
		left: 0;
		inset-inline-start: 0;
	}

	.ct-listing-carousel.elementor-widget .elementor-swiper-button.elementor-swiper-button-next {
		right: auto;
		inset-inline-end: auto;
		left: calc(var(--ct-arrow-size) + 8px);
		inset-inline-start: calc(var(--ct-arrow-size) + 8px);
	}
}

/* ------------------------------------------------------- neighborhood card
 * CT Loop – Neighborhood Card (5496): the Neighborhoods page's grid and each
 * neighborhood page's Explore Other Neighborhoods. Photograph (3:2), then
 * the name with an arrow; the whole card is the name's link. Its own
 * Learn More button is redundant beside that and stays hidden. */
.ct-hood-card.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--kit-widget-spacing: 0px;
	position: relative;
}

.ct-hood-card .ct-hood-card__img {
	overflow: hidden;
	background-color: var(--ct-surface);
}

.ct-hood-card__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 600ms var(--ct-ease);
}

.ct-hood-card:hover .ct-hood-card__img img {
	transform: scale(1.03);
}

.ct-hood-card__name .elementor-heading-title {
	margin: 0;
	padding-top: 18px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h3);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--ct-ink);
}

.ct-hood-card__name .elementor-heading-title a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	color: inherit;
	text-decoration: none;
}

.ct-hood-card__name .elementor-heading-title a::before {
	content: "\2192";
	order: 2;
	font-family: var(--ct-font-body);
	font-size: 20px;
	transition: transform var(--ct-transition);
}

.ct-hood-card:hover .ct-hood-card__name a::before {
	transform: translateX(4px);
}

.ct-hood-card__name .elementor-heading-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ct-hood-card__name .elementor-heading-title a:focus-visible {
	outline: none;
}

.ct-hood-card:has(a:focus-visible) {
	outline: 2px solid var(--ct-accent);
	outline-offset: 4px;
}

.ct-hood-card .ct-hood-card__more {
	display: none;
}