/*
 * CaryTamura Property Valuation page (/home-valuation/, Page 5449).
 *
 * SCOPE. Loaded on the home-valuation page only (functions.php, is_page()),
 * after page-hero.css. It tunes that page's CT Page Hero band to the live
 * valuation hero, seats the page's simplified form inside that band, and lays
 * out the five content sections. Every page rule is scoped under a .ct-hv-*
 * class, apart from the hero band, which only this page loads these rules for.
 *
 * VALUES. Measured from carytamura.com/home-valuation at 1440, 1199/1025,
 * 1024, 991, 769, 768 and 375 wide (FACT) unless marked. Live breakpoints:
 * section padding 96 -> 64 at 1024; the image/text block stacks at 991; the
 * cards, timelines and hero form stack at 768; type steps down at 767,
 * where sections also leave the 12px frame.
 *
 * MOTION. The live page has no entrance animation outside its multi-step
 * form's step counter, which this simplified form does not have. What is
 * reproduced: the button inversions (theme .ct-btn), the timeline links'
 * red underline sweep, and the Continue button's faded state until the form
 * is complete.
 */

/* -------------------------------------------------------------- shared --
 * The hero band and the form live in different Elementor documents (the CT
 * Page Hero template and this page), so the two numbers that tie them
 * together are declared once, on body.
 *
 * --ct-hv-form-h:  the form's height (label 25.6 + field 34.6 per row, 30px
 *                  between rows; 28.5px fields and a stacked button from 768).
 * --ct-hv-hero-pb: the band below the form. Solved so the title sits where
 *                  the live one does for any viewport height: live centres
 *                  its block, putting the title at 50vh - 13px (50vh - 77px
 *                  at 768 with a two-line title). */
body {
	--ct-hv-form-h: 150.4px;
	--ct-hv-hero-pb: max(115px, calc(50vh - 268.3px));
	--ct-hv-gutter: max(50px, calc((100% - 1300px) / 2 - var(--ct-body-padding)));
	--ct-hv-tag-light: #f8f7f5;      /* FACT: dark timeline tag and line */
}

/* ------------------------------------------------------------------ hero --
 * A full-viewport band in the 12px frame. Live stacks two 25% scrims (the
 * section's gradient and its ::before), 43.75% in all; no top gradient. The
 * content is anchored to the band's foot so the page's form, pulled up into
 * the band below, lines up under the title. */
.ct-page-hero.e-con {
	--width: calc(100% - 2 * var(--ct-body-padding));
	margin: var(--ct-body-padding) var(--ct-body-padding) 0;
	min-height: 100vh;
	justify-content: flex-end;
	padding: 115px var(--ct-hv-gutter) calc(var(--ct-hv-hero-pb) + var(--ct-hv-form-h));
}

.ct-page-hero::before {
	background-color: rgba(0, 0, 0, 0.4375);
}

.ct-page-hero::after {
	content: none;
}

.ct-page-hero .ct-page-hero__title .elementor-heading-title {
	margin: 0 0 75px;
	font-size: var(--ct-size-h2);
	line-height: 1.3;
	letter-spacing: 1px;
}

/* ------------------------------------------------------------------ form --
 * Seated in the hero band: pulled up by the band's reserved height and
 * holding that height itself, so what follows starts at the band's foot.
 * Address across the top as live; email, phone and Continue beneath, the
 * button beside the last fields as live sets it beside the address. */
.ct-page-body:has(.ct-hv-form) {
	padding-block: 0;
}

.ct-hv-form.e-con {
	--width: min(690px, calc(100% - 2 * (var(--ct-body-padding) + 50px)));
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 0px;
	--kit-widget-spacing: 0px;
	position: relative;
	z-index: 2;
	height: var(--ct-hv-form-h);
	margin: calc(-1 * (var(--ct-hv-hero-pb) + var(--ct-hv-form-h))) auto var(--ct-hv-hero-pb);
	color: var(--ct-on-dark);
}

.ct-hv-form .elementor-form-fields-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 30px 20px;
	margin: 0;
}

.ct-hv-form .elementor-form-fields-wrapper > .elementor-field-group {
	display: block;
	width: auto;
	max-width: none;
	flex: none;
	margin: 0;
	padding: 0;
}

.ct-hv-form .elementor-form-fields-wrapper > .elementor-field-group:first-child {
	grid-column: 1 / -1;
}

.ct-hv-form .elementor-form-fields-wrapper > .e-form__buttons {
	align-self: start;
}

.ct-hv-form .elementor-field-group > .elementor-field-label {
	display: block;
	margin: 0;
	padding: 0;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 25.6px;
	letter-spacing: 1px;
	color: var(--ct-on-dark);
}

.ct-hv-form .elementor-field-group .elementor-field-textual.elementor-field {
	display: block;
	width: 100%;
	height: 34.6px;
	min-height: 0;
	padding: 4px 24px 4px 0;
	border: 0;
	border-bottom: 1px solid #c0c0c0;     /* FACT: 44.5% toward mid-grey from white */
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	letter-spacing: normal;
	color: var(--ct-on-dark);
}

.ct-hv-form .elementor-field-group .elementor-field-textual.elementor-field:focus {
	outline: none;
	border-bottom-color: var(--ct-on-dark);
}

.ct-hv-form .elementor-field-textual:-webkit-autofill {
	-webkit-text-fill-color: var(--ct-on-dark);
	box-shadow: 0 0 0 1000px transparent inset;
	transition: background-color 5000s ease-in-out;
}

/* Continue: the theme's inverse button (.ct-btn--inverse on the widget).
 * Live holds it at 40% until the address is valid; here, until every
 * required field is. */
.ct-hv-form .e-form__buttons .elementor-button {
	width: auto;
	min-height: 0;
	padding: 20px 46px;
	cursor: pointer;
	transition: background-color var(--ct-transition), color var(--ct-transition), border-color var(--ct-transition), opacity var(--ct-transition);
}

.ct-hv-form form:has(:invalid) .e-form__buttons .elementor-button {
	opacity: 0.4;
}

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

/* ------------------------------------------------------------ sections --
 * Every content section: the 12px frame, a 1300px content box (50px
 * gutters below it), 96px above and below (64px from 1024). Padding
 * percentages resolve against the page, not the framed section. */
.ct-hv-section.e-con {
	--width: calc(100% - 2 * var(--ct-body-padding));
	--padding-top: var(--ct-section-padding);
	--padding-bottom: var(--ct-section-padding);
	--padding-left: var(--ct-hv-gutter);
	--padding-right: var(--ct-hv-gutter);
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--kit-widget-spacing: 0px;
	margin-inline: var(--ct-body-padding);
	color: var(--ct-ink);
}

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

.ct-hv-title .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: inherit;
}

.ct-hv-copy,
.ct-hv-copy p {
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 1px;
	color: inherit;
}

.ct-hv-copy p {
	margin: 0;
}

.ct-hv-copy p:not(:last-child) {
	margin-bottom: 25px;
}

/* ------------------------------------------ what's your property worth? --
 * Copy left (120px clear of the photo), photo right at 650:513.5; the row
 * takes the taller of the two, the copy centred against it. */
.ct-hv-worth.e-con {
	flex-direction: row;
	align-items: stretch;
}

.ct-hv-worth .ct-hv-worth__text.e-con {
	flex: 0 0 50%;
	width: 50%;
	--padding-right: 120px;
	justify-content: center;
}

.ct-hv-worth__title .elementor-heading-title {
	margin-bottom: 16px;
}

.ct-hv-worth .ct-hv-worth__media.e-con {
	position: relative;
	flex: 0 0 50%;
	width: 50%;
	aspect-ratio: 650 / 513.5;
}

.ct-hv-worth__img {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ct-hv-worth__img img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------- cards --
 * Three equal-height outlined panels, 30.5% each, 16px apart, centred. Live
 * draws the 2px outline over the panel's 32px / 27px padding, so the padding
 * here is net of the border. */
.ct-hv-cards.e-con {
	--padding-top: 0px;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
}

.ct-hv-cards .ct-hv-card.e-con {
	--padding-top: 30px;
	--padding-bottom: 30px;
	--padding-left: 25px;
	--padding-right: 25px;
	flex: 0 0 30.5%;
	width: 30.5%;
	margin: 0 8px;
	border: 2px solid var(--ct-ink);
	justify-content: flex-start;
}

.ct-hv-card__title .elementor-heading-title {
	margin: 0 0 25px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h4);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-ink);
}

/* Live keeps the paragraph's 25px bottom margin inside the panel. */
.ct-hv-card .ct-hv-copy p:last-child {
	margin-bottom: 25px;
}

/* The Start Your Property Search band is the global CT Property Search CTA
 * template, styled in sections.css. */

/* ----------------------------------------------------------- timelines --
 * Centred title group, then items either side of a 1px centre line with an
 * 11px dot per item: tag on one side, copy on the other, alternating. The
 * dark variant swaps to a black ground with warm-white line and tags. */
.ct-hv-timeline.e-con {
	--ct-hv-line: var(--ct-ink);
	--ct-hv-tag-bg: var(--ct-ink);
	--ct-hv-tag-ink: var(--ct-on-dark);
	align-items: center;
}

.ct-hv-timeline--dark.e-con {
	--ct-hv-line: var(--ct-hv-tag-light);
	--ct-hv-tag-bg: var(--ct-hv-tag-light);
	--ct-hv-tag-ink: var(--ct-ink);
	background-color: var(--ct-ink);
	color: var(--ct-on-dark);
}

.ct-hv-timeline__title,
.ct-hv-timeline__subtitle {
	width: 100%;
	max-width: 860px;
	text-align: center;
}

.ct-hv-timeline__title .elementor-heading-title {
	margin-bottom: 24px;
	text-align: center;
}

.ct-hv-timeline__subtitle .elementor-heading-title {
	margin: 0 0 32px;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 1px;
	color: inherit;
}

.ct-hv-timeline .ct-hv-timeline__list.e-con {
	--padding-top: 32px;
	--padding-bottom: 32px;
	position: relative;
	width: 100%;
}

.ct-hv-timeline .ct-hv-timeline__list.e-con::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: auto;
	background-color: var(--ct-hv-line);
	opacity: 1;
	mix-blend-mode: normal;
}

.ct-hv-timeline .ct-hv-item.e-con {
	position: relative;
	flex-direction: row;
	width: 100%;
}

.ct-hv-timeline .ct-hv-item.e-con + .ct-hv-item.e-con {
	margin-top: 61px;
}

.ct-hv-timeline .ct-hv-item.e-con:nth-child(even) {
	flex-direction: row-reverse;
}

.ct-hv-timeline .ct-hv-item.e-con::before {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	left: calc(50% - 5px);
	width: 11px;
	height: 11px;
	border-radius: 10px;
	background-color: var(--ct-hv-line);
	opacity: 1;
	mix-blend-mode: normal;
}

.ct-hv-timeline .ct-hv-item .ct-hv-item__tag-cell.e-con,
.ct-hv-timeline .ct-hv-item .ct-hv-item__body.e-con {
	--padding-left: 32px;
	--padding-right: 32px;
	flex: 0 0 50%;
	width: 50%;
}

.ct-hv-item__tag-cell { text-align: right; }
.ct-hv-item__body { text-align: left; }
.ct-hv-item:nth-child(even) .ct-hv-item__tag-cell { text-align: left; }
.ct-hv-item:nth-child(even) .ct-hv-item__body { text-align: right; }

.ct-hv-item__tag .elementor-heading-title {
	display: inline-block;
	margin: 0;
	padding: 9px 34px;
	background-color: var(--ct-hv-tag-bg);
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-hv-tag-ink);
}

.ct-hv-item__title .elementor-heading-title {
	margin: 0 0 10px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h4);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 1px;
	color: inherit;
}

.ct-hv-item__text,
.ct-hv-item__text p {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 1px;
	color: inherit;
}

/* An item with no heading keeps the heading's 10px above its copy, as the
 * live page's empty heading does. */
.ct-hv-item__body > .ct-hv-item__text:first-child {
	margin-top: 10px;
}

/* Links: a grey hairline with a red rule sweeping across it on hover. */
.ct-hv-item__text a {
	position: relative;
	line-height: 16px;
	color: inherit;
	text-decoration: none;
}

.ct-hv-item__text a::before,
.ct-hv-item__text a::after {
	content: "";
	position: absolute;
	top: 18.5px;
	left: 0;
	height: 1px;
	transition: all 0.4s ease;
}

.ct-hv-item__text a::before {
	right: 0;
	background-color: #999;               /* FACT */
}

.ct-hv-item__text a::after {
	right: 100%;
	background-color: var(--ct-accent);
}

.ct-hv-item__text a:hover::after {
	right: 0;
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1024px) {
	.ct-hv-section.e-con {
		--padding-top: var(--ct-section-padding-compact);
		--padding-bottom: var(--ct-section-padding-compact);
	}

	/* The cards keep the full 96px below them, and the dark timeline its
	 * 96px either side, until 768. */
	.ct-hv-cards.e-con {
		--padding-top: 0px;
		--padding-bottom: var(--ct-section-padding);
	}

	.ct-hv-timeline--dark.e-con {
		--padding-top: var(--ct-section-padding);
		--padding-bottom: var(--ct-section-padding);
	}
}

@media (max-width: 991px) {
	.ct-hv-worth.e-con {
		flex-direction: column;
	}

	.ct-hv-worth .ct-hv-worth__text.e-con,
	.ct-hv-worth .ct-hv-worth__media.e-con {
		flex: 0 0 auto;
		width: 100%;
	}

	.ct-hv-worth .ct-hv-worth__text.e-con {
		--padding-right: 0px;
	}

	.ct-hv-worth .ct-hv-worth__media.e-con {
		order: -1;
		margin-bottom: 29px;
	}

	.ct-hv-worth__title .elementor-heading-title {
		margin-bottom: 8px;
	}
}

@media (max-width: 768px) {
	body {
		--ct-hv-form-h: 310.3px;
		--ct-hv-hero-pb: max(30px, calc(50vh - 380.2px));
	}

	.ct-page-hero .ct-page-hero__title .elementor-heading-title {
		margin-bottom: 35px;
	}

	.ct-hv-form .elementor-form-fields-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-hv-form .elementor-form-fields-wrapper > .e-form__buttons {
		justify-self: start;
	}

	.ct-hv-form .elementor-field-group .elementor-field-textual.elementor-field {
		height: 28.5px;
		padding-block: 1px;
	}

	.ct-hv-cards.e-con {
		--padding-bottom: var(--ct-section-padding-compact);
		flex-direction: column;
	}

	.ct-hv-timeline--dark.e-con {
		--padding-top: var(--ct-section-padding-compact);
		--padding-bottom: var(--ct-section-padding-compact);
	}

	.ct-hv-cards .ct-hv-card.e-con {
		flex: 0 0 auto;
		width: 100%;
		min-height: 299px;              /* live 300 incl. its 1px outline overhang */
		margin: 8px 0;
	}

	.ct-hv-timeline .ct-hv-timeline__list.e-con {
		--padding-top: 20px;
		--padding-bottom: 20px;
	}

	.ct-hv-timeline .ct-hv-timeline__list.e-con::before {
		left: 5px;
	}

	.ct-hv-timeline .ct-hv-item.e-con,
	.ct-hv-timeline .ct-hv-item.e-con:nth-child(even) {
		flex-direction: column;
		width: calc(100% - 31px);
		margin-left: 31px;
	}

	.ct-hv-timeline .ct-hv-item.e-con + .ct-hv-item.e-con {
		margin-top: 48px;
	}

	.ct-hv-timeline .ct-hv-item.e-con::before {
		left: -31px;
	}

	.ct-hv-timeline .ct-hv-item .ct-hv-item__tag-cell.e-con,
	.ct-hv-timeline .ct-hv-item .ct-hv-item__body.e-con {
		--padding-left: 0px;
		--padding-right: 0px;
		flex: 0 0 auto;
		width: 100%;
	}

	.ct-hv-timeline .ct-hv-item .ct-hv-item__body.e-con {
		--padding-top: 23.6px;
	}

	.ct-hv-item__tag-cell,
	.ct-hv-item__body,
	.ct-hv-item:nth-child(even) .ct-hv-item__tag-cell,
	.ct-hv-item:nth-child(even) .ct-hv-item__body {
		text-align: left;
	}

	.ct-hv-item__title .elementor-heading-title {
		margin-bottom: 8px;
	}

	.ct-hv-item__body > .ct-hv-item__text:first-child {
		margin-top: 8px;
	}
}

@media (max-width: 767px) {
	/* The title sits at 50vh + 8.65px, as live; the band grows to hold the
	 * extra fields beneath it. */
	body {
		--ct-hv-hero-pb: 30px;
	}

	.ct-page-hero.e-con {
		--width: 100%;
		margin: 0;
		padding: calc(50vh + 8.65px) 25px calc(var(--ct-hv-hero-pb) + var(--ct-hv-form-h));
	}

	.ct-page-hero .ct-page-hero__title .elementor-heading-title {
		font-size: 32px;
		line-height: 1.4;
		letter-spacing: 0.75px;
	}

	.ct-hv-form.e-con {
		--width: min(350px, calc(100% - 50px));
	}

	.ct-hv-form .elementor-form-fields-wrapper > .e-form__buttons {
		justify-self: stretch;
	}

	.ct-hv-form .e-form__buttons .elementor-button {
		width: 100%;
	}

	.ct-hv-section.e-con {
		--width: 100%;
		--padding-left: 25px;
		--padding-right: 25px;
		margin-inline: 0;
	}

	.ct-hv-title .elementor-heading-title {
		font-size: 32px;
		line-height: 1.4;
		letter-spacing: 0.75px;
	}

	.ct-hv-card__title .elementor-heading-title,
	.ct-hv-item__title .elementor-heading-title {
		font-size: 18px;
		line-height: 1.6;
		letter-spacing: 0.75px;
	}

	.ct-hv-timeline__title .elementor-heading-title {
		margin-bottom: 16px;
	}

	.ct-hv-timeline__subtitle .elementor-heading-title {
		margin-bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-hv-item__text a::before,
	.ct-hv-item__text a::after,
	.ct-hv-form .e-form__buttons .elementor-button {
		transition: none;
	}
}