/*
 * CaryTamura home page: the hero, and the header's overlay state above it.
 *
 * Loaded on the front page only. Values measured from the live homepage
 * (carytamura.com) at 1440, 1024 and 375 wide unless marked otherwise.
 */

/* ---------------------------------------------------------------- header --
 * The header's overlay state now lives in assets/css/header-overlay.css and is
 * shared with every other hero page, keyed on the `ct-hero-page` body class
 * that this page also carries. It is not duplicated here.
 */

/* ------------------------------------------------------------------ hero -- */
/* The live hero sits inside a 12px frame on desktop and runs edge to edge on
 * mobile; the header overlays the frame, not the viewport. */
.ct-hero.e-con {
	--padding-top: 100px;
	--padding-bottom: 60px;
	--padding-left: 25px;
	--padding-right: 25px;
	--gap: 0;
	--width: calc(100% - 2 * var(--ct-body-padding));
	margin: var(--ct-body-padding) var(--ct-body-padding) 0;
	min-height: 100vh;
	color: var(--ct-on-dark);
	text-align: center;
	overflow: hidden;
}

.ct-hero .elementor-background-video-hosted {
	object-fit: cover;
}

.ct-hero__title .elementor-heading-title {
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h1);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-on-dark);
	margin: 8px 0 15px;
}

.ct-hero__subtitle .elementor-heading-title {
	font-family: var(--ct-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ct-on-dark);
}

.ct-hero__link {
	margin-top: 33px;
}

/* A text link with a 1px rule beneath, not a filled button (FACT). */
.ct-hero__link .elementor-button,
.ct-hero__link .elementor-button:hover,
.ct-hero__link .elementor-button:focus {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 3px;
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-on-dark);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size var(--ct-transition);
}

.ct-hero__link .elementor-button:hover {
	background-size: 0 1px;
	background-position: 100% 100%;
}

.ct-hero__link .elementor-button:focus-visible {
	outline: 2px solid var(--ct-on-dark);
	outline-offset: 4px;
}

@media (max-width: 767px) {
	.ct-hero.e-con {
		--width: 100%;
		margin: 0;
	}

	.ct-hero__title .elementor-heading-title {
		font-size: 40px;
		line-height: 1.6;
		letter-spacing: 0.75px;
		margin-block: 0 15px;
	}

	.ct-hero__link {
		margin-top: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-hero__link .elementor-button {
		transition: none;
	}
}

/* ============================================================ sections ==
 * Home sections below the hero, in the live site's order. Every value is
 * measured from carytamura.com at 1920, 1440, 1024, 768 and 375 unless marked.
 *
 * Capped content boxes use calc((100% - cap) / 2 - frame): padding
 * percentages resolve against the page, not the 12px-framed section.
 *
 * Breakpoints: desktop above 1024; 1024 keeps the desktop arrangement with
 * narrower gutters; 900 and below is the live site's stacked (portrait tablet)
 * layout; 767 and below is phone.
 *
 * Elementor containers space children with --row-gap/--column-gap (default
 * 20px); every section sets its own spacing explicitly below.
 */
/* The section frame, section title, body copy and card-photo rules shared
 * with other pages now live in sections.css (loaded before this file). */

/* ------------------------------------------------------- fair housing -- */
.ct-home-section.ct-fair-housing.e-con {
	--padding-top: 21px;
	--padding-bottom: 21px;
	--padding-left: 60px;
	--padding-right: 60px;
	background-color: rgba(0, 0, 0, 0.7);
}

.ct-fair-housing__text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 17px;
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 1px;
	color: var(--ct-on-dark);
}

.ct-fair-housing__icon {
	flex: 0 0 24px;
}

.ct-fair-housing__text a {
	color: var(--ct-on-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 767px) {
	.ct-home-section.ct-fair-housing.e-con {
		--padding-left: 40px;
		--padding-right: 40px;
	}

	.ct-fair-housing__text {
		font-size: 14px;
		line-height: 23px;
	}
}

/* ---------------------------------------------------------- logo band --
 * The black monogram, 100x134, centred on white directly under the fair
 * housing bar (FACT: 96px above / 50px below; 64 / 30 from 900 down). */
.ct-home-section.ct-logo-band.e-con {
	--padding-top: 96px;
	--padding-bottom: 50px;
	background-color: var(--ct-canvas);
}

.ct-logo-band__img img {
	display: block;
	width: 100px;
	height: 134px;
	margin-inline: auto;
	object-fit: contain;
}

@media (max-width: 900px) {
	.ct-home-section.ct-logo-band.e-con {
		--padding-top: 64px;
		--padding-bottom: 30px;
	}
}

/* ---------------------------------------------------------- meet cary --
 * Same outer content box as Experience. Knowledge. Passion.: its side
 * padding mirrors that section's padding plus the 3px card inset (133/137px
 * from 900 down, 18px on phones), so the photo's left edge and the copy's right
 * edge line up with the outer card edges. Photo half at 658:519, 120px
 * gutter (60 at 1024 so the copy stays readable), copy centred vertically;
 * the photo stretches when the copy is taller. */
.ct-home-section.ct-meet-cary.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: calc(max(135px, calc((100% - 1280px) / 2 - var(--ct-body-padding))) + 3px);
	--padding-right: calc(max(135px, calc((100% - 1280px) / 2 - var(--ct-body-padding))) + 3px);
	--column-gap: 120px;
	flex-direction: row;
	align-items: stretch;
}

.ct-meet-cary__img {
	flex: 0 0 50%;
	width: 40%;
	aspect-ratio: 658 / 519;
}

.ct-meet-cary__img img {
	display: block;
	width: 96%;
	height: 100%;
	object-fit: cover;
}

.ct-meet-cary__text.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 16px;
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
}

.ct-meet-cary__text .ct-btn {
	margin-top: 8px;
}

@media (max-width: 1024px) {
	.ct-home-section.ct-meet-cary.e-con {
		--column-gap: 60px;
	}
}

@media (max-width: 900px) {
	/* Experience's card row is shifted 2px left here (-2px margin on a
	 * full-width row), so its outer edges are 133px / 137px in. */
	.ct-home-section.ct-meet-cary.e-con {
		--padding-left: 133px;
		--padding-right: 137px;
		flex-direction: column;
	}

	.ct-meet-cary__img {
		flex: 0 0 auto;
		width: 100%;
	}

	.ct-meet-cary__text.e-con {
		--padding-top: 30px;
		--row-gap: 9px;
	}

	.ct-meet-cary__text .ct-btn {
		margin-top: 15px;
	}
}

@media (max-width: 767px) {
	.ct-home-section.ct-meet-cary.e-con {
		--padding-left: 18px;
		--padding-right: 18px;
	}

	.ct-meet-cary__img {
		aspect-ratio: auto;
	}

	.ct-meet-cary__img img {
		height: 384px;
	}
}

/* -------------------------------------------------------------- stats --
 * Three centred figures under Meet Cary (FACT: 1300px row, 64px above the
 * figures, 32px below; stacked from 900 down). */
.ct-home-section.ct-stats.e-con {
	--padding-top: 64px;
	--padding-bottom: 32px;
	--padding-left: max(50px, calc((100% - 1300px) / 2 - var(--ct-body-padding)));
	--padding-right: max(50px, calc((100% - 1300px) / 2 - var(--ct-body-padding)));
}

.ct-stats__row.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	flex-direction: row;
}

.ct-stat.e-con {
	--padding-top: 0px;
	--padding-bottom: 64px;
	--padding-left: 15px;
	--padding-right: 15px;
	--row-gap: 0px;
	flex: 1 1 0;
	min-width: 0;
}

.ct-stat__value .elementor-heading-title {
	margin: 0 0 16px;
	font-family: var(--ct-font-display);
	font-size: 29px;
	font-weight: 400;
	line-height: 30px;
	text-transform: uppercase;
	text-align: center;
	color: var(--ct-ink);
}

.ct-stat__label .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 26px;
	text-align: center;
	color: var(--ct-ink);
}

@media (max-width: 900px) {
	.ct-home-section.ct-stats.e-con {
		--padding-bottom: 0px;
	}

	.ct-stats__row.e-con {
		flex-direction: column;
	}

	.ct-stat.e-con {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.ct-home-section.ct-stats.e-con {
		--padding-top: 48px;
		--padding-bottom: 0px;
		--padding-left: 25px;
		--padding-right: 25px;
	}
}

/* Testimonials and Portfolio: shared with the About page, in sections.css. */

/* ------------------------------------------------------ neighborhoods --
 * A 3x3 wall of 380px photos with the dark intro tile in the centre cell;
 * one column on phones with the intro fifth (FACT).
 */
.ct-home-section.ct-neighborhoods.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	position: relative;
	background-color: var(--ct-dark);
}

.ct-hood-tile.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	position: relative;
	height: 380px;
	overflow: hidden;
}

.ct-hood-tile__img img {
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
	transition: transform 600ms ease;
}

.ct-hood-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.2);
	transition: background-color var(--ct-transition);
	pointer-events: none;
}

.ct-hood-tile:hover::after {
	background-color: rgba(0, 0, 0, 0.45);
}

.ct-hood-tile:hover .ct-hood-tile__img img {
	transform: scale(1.04);
}

.ct-hood-tile__name,
.ct-hood-tile__more {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 2;
	pointer-events: none;
}

.ct-hood-tile__name { top: 50%; transform: translateY(-50%); }
.ct-hood-tile__more { top: calc(50% + 28px); opacity: 0; transition: opacity var(--ct-transition); }
.ct-hood-tile:hover .ct-hood-tile__more { opacity: 1; }

.ct-hood-tile__name .elementor-heading-title,
.ct-hood-tile__name .elementor-heading-title a {
	font-family: var(--ct-font-display);
	font-size: 29px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: var(--ct-on-dark);
	pointer-events: auto;
}

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

.ct-hood-tile__more .elementor-heading-title {
	font-family: var(--ct-font-label);
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	color: var(--ct-on-dark);
}

.ct-neighborhoods__intro.e-con {
	--row-gap: 35px;
	background-color: var(--ct-dark);
}

.ct-neighborhoods__title .elementor-heading-title {
	font-family: var(--ct-font-display);
	font-size: 36px;
	font-weight: 400;
	line-height: 48px;
	text-transform: uppercase;
	text-align: center;
	color: var(--ct-on-dark);
}

@media (min-width: 768px) {
	/* nth-of-type: the loop emits a <style> element before its first item. */
	.ct-hoods-grid .elementor-loop-container > .e-loop-item:nth-of-type(5) {
		grid-column: 3;
	}

	.ct-neighborhoods__intro.e-con {
		position: absolute;
		top: 380px;
		left: 33.3333%;
		width: 33.3334%;
		height: 380px;
	}
}

@media (max-width: 1024px) {
	.ct-hood-tile__more { opacity: 1; }
}

@media (max-width: 900px) {
	.ct-neighborhoods__title .elementor-heading-title {
		font-size: 28px;
		line-height: 37px;
	}
}

@media (max-width: 767px) {
	.ct-hoods-grid .elementor-loop-container > .e-loop-item:nth-of-type(5) {
		margin-top: 380px;
	}

	.ct-neighborhoods__intro.e-con {
		position: absolute;
		top: 1520px;
		left: 0;
		width: 100%;
		height: 380px;
	}
}

/* --------------------------------------------------------------- blog --
 * Latest three posts (FACT, carytamura.com): centred BLOG title; a row of
 * three cards capped at 1104px, each 32% wide with a 300px cover image and a
 * Playfair 21px uppercase title underlined 5px below; red View All centred
 * 49px under the cards. One column from 900 down (cards inset 70px at 768,
 * 45px on phones, 74px apart; full-width button on phones).
 */
.ct-home-section.ct-blog.e-con {
	--padding-bottom: 103px;
	--padding-left: max(54px, calc((100% - 1104px) / 2 - var(--ct-body-padding)));
	--padding-right: max(54px, calc((100% - 1104px) / 2 - var(--ct-body-padding)));
	background-color: var(--ct-canvas);
}

.ct-blog .ct-blog__title .elementor-heading-title {
	margin-bottom: 50px;
}

.ct-blog .ct-blog-grid {
	width: 100%;
}

.ct-blog-grid .elementor-loop-container.elementor-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0;
}

.ct-blog-grid .elementor-loop-container > .e-loop-item {
	width: 32%;
}

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

.ct-blog-card__img,
.ct-blog-card__img a {
	display: block;
	width: 100%;
}

.ct-blog-card__img img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
}

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

.ct-blog-card__title .elementor-heading-title a {
	color: var(--ct-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.ct-blog-card__title .elementor-heading-title a:hover {
	text-decoration-color: var(--ct-accent);
}

.ct-blog .ct-blog__all {
	margin-top: 39px;
	text-align: center;
}

@media (max-width: 900px) {
	.ct-home-section.ct-blog.e-con {
		--padding-top: 64px;
		--padding-bottom: 70px;
		--padding-left: 70px;
		--padding-right: 70px;
	}

	.ct-blog .ct-blog__title .elementor-heading-title {
		margin-bottom: 40px;
	}

	.ct-blog-grid .elementor-loop-container > .e-loop-item {
		width: 100%;
	}

	.ct-blog-grid .elementor-loop-container > .e-loop-item + .e-loop-item {
		margin-top: 64px;
	}

	.ct-blog .ct-blog__all {
		margin-top: 50px;
	}
}

@media (max-width: 767px) {
	.ct-home-section.ct-blog.e-con {
		--padding-bottom: 71px;
		--padding-left: 45px;
		--padding-right: 45px;
	}

	.ct-blog-card__title .elementor-heading-title {
		font-size: 18px;
		line-height: 28.8px;
	}

	/* The button spans the section's 25px phone gutter, not the 45px card inset. */
	.ct-blog .ct-blog__all,
	.ct-blog .ct-blog__all .elementor-button {
		display: block;
		width: 100%;
		text-align: center;
	}

	.ct-home-section.ct-blog.e-con > .ct-blog__all {
		width: calc(100% + 40px);
		max-width: none;
		margin-inline: -20px;
	}
}

/* --------------------------------------------------------- commercial --
 * Copy then photo, 120px gutter, content capped at 1300 and 50px in; photo
 * half width at a 650:583 ratio, stretching with taller copy (1024). Stacked
 * photo-first from 900 (FACT). */
.ct-home-section.ct-commercial.e-con {
	--padding-left: max(50px, calc((100% - 1300px) / 2 - var(--ct-body-padding)));
	--padding-right: max(50px, calc((100% - 1300px) / 2 - var(--ct-body-padding)));
	--column-gap: 120px;
	flex-direction: row;
	align-items: stretch;
}

.ct-commercial__text.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 25px;
	flex: 1 1 0;
	min-width: 0;
	justify-content: flex-start;
}

.ct-commercial__subtitle .elementor-heading-title {
	padding-left: 24px;
	font-family: var(--ct-font-display);
	font-size: 29px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-ink);
}

.ct-commercial__img {
	flex: 0 0 50%;
	width: 50%;
	aspect-ratio: 650 / 583;
}

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

@media (max-width: 1024px) {
	.ct-home-section.ct-commercial.e-con {
		--padding-top: 64px;
		--padding-bottom: 64px;
	}
}

@media (max-width: 900px) {
	.ct-home-section.ct-commercial.e-con {
		flex-direction: column;
		--row-gap: 30px;
	}

	.ct-commercial__img {
		order: -1;
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: auto;
	}

	.ct-commercial__img img {
		height: 583px;
	}
}

@media (max-width: 767px) {
	.ct-home-section.ct-commercial.e-con {
		--padding-left: 25px;
		--padding-right: 25px;
	}

	.ct-commercial__subtitle .elementor-heading-title {
		font-size: 21px;
	}

	.ct-meet-cary__text .ct-btn,
	.ct-commercial__text .ct-btn,
	.ct-meet-cary__text .elementor-button,
	.ct-commercial__text .elementor-button {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* ----------------------------------------------------- work with cary --
 * The section is the global template (its own padding, heights and colours).
 * Elementor's tablet range starts at 1024, where the live section is still
 * its desktop 689px, so the home placement restores that between 901-1024. */
@media (min-width: 901px) and (max-width: 1024px) {
	.ct-home-work-with .ct-work-with.e-con {
		min-height: 689px;
	}
}