/* Design Call page ("Book a free design call") */

.ac-design-call {
	--ac-cream      : #F7F3EE;
	--ac-dark       : #2B2A29;
	--ac-sand       : #EDE3D7;
	--ac-green      : #E3E8D6;
	--ac-blush      : #E8CFCF;
	--ac-font-h     : 'Cormorant Garamond', Georgia, serif;
	--ac-font-b     : 'Satoshi Variable', system-ui, sans-serif;

	--ac-h1-size    : 48px;
	--ac-h1-lh      : 58px;
	--ac-h2-size    : 32px;
	--ac-h2-lh      : 42px;
	--ac-h3-size    : 24px;
	--ac-h3-lh      : 29px;

	--ac-max-w      : 1440px;
	--ac-content-w  : 77.78%; /* 1120 / 1440, matches Figma content column */

	background   : var(--ac-cream);
	overflow-x   : hidden;
	max-width    : 100%;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.ac-dc-hero {
	width      : 100%;
	padding    : 40px 4.17% 60px;
}

.ac-dc-hero-inner {
	width          : 100%;
	max-width      : calc(var(--ac-max-w) - 8.34% * var(--ac-max-w) / 100);
	margin         : 0 auto;
	display        : flex;
	flex-direction : column;
	align-items    : flex-start;
	gap            : 32px;
}

.ac-reviews-badge {
	display       : flex;
	align-items   : center;
	gap           : 5px;
	background    : var(--ac-cream);
	border-radius : 10px;
	padding       : 10px;
	border        : 1px solid var(--ac-dark);
}

.ac-reviews-logo  { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.ac-reviews-stars { color: #F59700; font-size: 16px; font-weight: 500; font-family: var(--ac-font-b); }
.ac-reviews-rated { font-family: var(--ac-font-b); font-size: 16px; font-weight: 500; color: var(--ac-dark); white-space: nowrap; }

.ac-dc-title {
	width       : 100%;
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : var(--ac-h1-size);
	line-height : var(--ac-h1-lh);
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-dc-calendly {
	/* Calendly's own scheduling page centers itself at a fixed content width
	   inside the iframe regardless of how wide we make the embed — capping
	   our container near that width avoids empty cream space on both sides
	   (the iframe itself is cross-origin, so we can't restyle its content). */
	width      : 100%;
	max-width  : 1000px;
	margin     : 0 auto;
	height     : 700px;
	background : var(--ac-cream);
}

/* !important is required here: Calendly's widget.js sets an inline
   style="width:...;height:..." on this div once it loads, which would
   otherwise silently override a plain (non-!important) stylesheet rule. */
.ac-dc-calendly .calendly-inline-widget {
	width      : 100% !important;
	min-width  : 320px !important;
	height     : 100% !important;
}

.ac-dc-calendly .calendly-inline-widget iframe {
	width  : 100% !important;
	height : 100% !important;
	border : none !important;
}

/* ── Testimonial strip ───────────────────────────────────────── */
.ac-dc-strip {
	display         : flex;
	flex-wrap       : wrap;
	justify-content : center;
	gap             : 4.86%;
	padding         : 30px 3.33%;
	background      : var(--ac-green);
}

.ac-dc-strip-item {
	flex           : 1 1 280px;
	max-width      : 31.25%;
	display        : flex;
	flex-direction : column;
	gap            : 12px;
}

.ac-dc-strip-quote {
	font-family : var(--ac-font-b);
	font-weight : 500;
	font-size   : 16px;
	line-height : 21px;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-review-stars {
	font-family : 'Helvetica Neue', var(--ac-font-b), sans-serif;
	font-size   : 24px;
	font-weight : 700;
	color       : #F59700;
}

.ac-dc-strip-name {
	font-family : var(--ac-font-b);
	font-weight : 700;
	font-size   : 16px;
	line-height : 26px;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-dc-strip-dots { display: none; }

/* ── 3 steps ──────────────────────────────────────────────────── */
.ac-dc-steps {
	display         : flex;
	justify-content : center;
	padding         : 60px 4% 50px;
	background      : var(--ac-cream);
}

/* Grid (not the outer section) so title/img/list/button can be freely
   reordered per breakpoint via grid-template-areas without touching markup. */
.ac-dc-steps-content {
	width                 : 100%;
	max-width             : var(--ac-max-w);
	display               : grid;
	grid-template-columns : 1fr 1fr;
	grid-template-areas   :
		"title title"
		"img   list"
		"btn   btn";
	row-gap               : 32px;
	column-gap            : 10px;
}

.ac-dc-steps-title {
	grid-area   : title;
	justify-self: center;
	width       : 100%;
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : var(--ac-h2-size);
	line-height : var(--ac-h2-lh);
	text-align  : center;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-dc-steps-img {
	grid-area  : img;
	overflow   : hidden;
	min-height : 400px;
}

.ac-dc-steps-img img {
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	display    : block;
}

.ac-dc-steps-list {
	grid-area      : list;
	display        : flex;
	flex-direction : column;
	justify-content: flex-start; /* top-align with .ac-dc-steps-img, which stretches to the same row height */
	gap            : 30px;
	margin         : 0;
	padding        : 0;
	list-style     : none;
	counter-reset  : ac-dc-step;
}

.ac-dc-steps-content > .ac-btn {
	grid-area   : btn;
	justify-self: center;
}

.ac-dc-step {
	counter-increment : ac-dc-step;
	position           : relative;
	padding-left       : 26px;
}

.ac-dc-step::before {
	content     : counter(ac-dc-step) ".";
	position    : absolute;
	left        : 0;
	top         : 0;
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : var(--ac-h3-size);
	line-height : var(--ac-h3-lh);
	color       : var(--ac-dark);
}

.ac-dc-step h3 {
	font-family : var(--ac-font-h);
	font-weight : 600;
	font-size   : var(--ac-h3-size);
	line-height : var(--ac-h3-lh);
	color       : var(--ac-dark);
	margin      : 0 0 10px;
}

.ac-dc-step p {
	font-family : var(--ac-font-b);
	font-weight : 400;
	font-size   : 16px;
	line-height : 26px;
	color       : var(--ac-dark);
	margin      : 0;
}

/* ── Real homeowners ──────────────────────────────────────────── */
.ac-dc-homeowners {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 32px;
	padding        : 80px 4%;
	background     : var(--ac-sand);
}

.ac-dc-homeowners-title {
	width       : 100%;
	max-width   : var(--ac-max-w);
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : var(--ac-h2-size);
	line-height : var(--ac-h2-lh);
	text-align  : center;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-dc-homeowners-grid {
	width                 : 100%;
	max-width             : var(--ac-max-w);
	display               : grid;
	grid-template-columns : repeat(3, 1fr);
	align-items           : start; /* each card sizes to its own content instead of stretching to match the tallest */
	gap                   : 20px;
}

.ac-dc-homeowner-card {
	min-width      : 0; /* let grid cells shrink instead of forcing a wrap */
	display        : flex;
	flex-direction : column;
	gap            : 24px;
	padding        : 30px 20px 20px;
	background     : var(--ac-green);
	border         : 0.5px solid var(--ac-dark);
}

.ac-dc-homeowner-headline {
	font-family : var(--ac-font-h);
	font-weight : 600;
	font-size   : var(--ac-h3-size);
	line-height : var(--ac-h3-lh);
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-dc-homeowner-quote {
	font-family : var(--ac-font-b);
	font-weight : 400;
	font-size   : 16px;
	line-height : 26px;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-dc-homeowner-foot {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	gap             : 10px;
	padding-top     : 10px;
}

.ac-dc-homeowner-name {
	font-family : var(--ac-font-b);
	font-weight : 700;
	font-size   : 16px;
	line-height : 21px;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-dc-homeowner-loc {
	font-family : var(--ac-font-b);
	font-weight : 400;
	font-size   : 14px;
	line-height : 19px;
	color       : rgba(43, 42, 41, 0.68);
	margin      : 0;
}

.ac-dc-homeowners .ac-dc-homeowner-foot .ac-reviews-logo { width: 40px; height: 40px; }

/* ── CTA button centered under the homeowners section ─────────── */
.ac-dc-homeowners > .ac-btn {
	align-self : center;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
	.ac-dc-steps-content {
		grid-template-columns : 1fr;
		grid-template-areas   :
			"title"
			"img"
			"list"
			"btn";
	}

	/* Keep the 3 cards on one row — scroll horizontally instead of stacking
	   (same pattern as .ac-reviews-list in product-lister.css). */
	.ac-dc-homeowners-grid {
		display         : flex;
		flex-wrap       : nowrap;
		overflow-x      : auto;
		justify-content : flex-start;
		padding-bottom  : 8px;
		scroll-behavior : smooth;
		scrollbar-width : thin;
		scrollbar-color : var(--ac-dark) transparent;
	}
	.ac-dc-homeowners-grid::-webkit-scrollbar       { height: 3px; }
	.ac-dc-homeowners-grid::-webkit-scrollbar-track { background: transparent; }
	.ac-dc-homeowners-grid::-webkit-scrollbar-thumb { background: var(--ac-dark); border-radius: 2px; }
	.ac-dc-homeowner-card { flex: 0 0 320px; min-width: 0; }
}

/* Phone breakpoint — matches the dedicated Mobile Figma export (360px canvas). */
@media (max-width: 600px) {
	.ac-dc-hero { padding: 20px 16px; }
	.ac-dc-hero-inner { gap: 24px; }
	.ac-dc-title { font-size: 32px; line-height: 40px; }

	/* Calendly's own mobile layout stacks the profile panel above the date/time
	   picker, so it needs more vertical room than the desktop side-by-side view. */
	.ac-dc-calendly { height: 1000px; }

	/* Swipeable carousel instead of a stacked list (same scroll-snap pattern
	   as .ac-signposts in product-lister.css). */
	.ac-dc-strip {
		flex-wrap                 : nowrap;
		justify-content           : flex-start;
		align-items               : stretch;
		padding                   : 12px 16px;
		overflow-x                : auto;
		scroll-snap-type          : x mandatory;
		scroll-padding-inline     : 16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width           : none;
	}
	.ac-dc-strip::-webkit-scrollbar { display: none; }
	.ac-dc-strip-item {
		flex             : 0 0 82%;
		max-width        : 82%;
		scroll-snap-align: start;
		scroll-snap-stop : always;
	}

	.ac-dc-strip-dots {
		display         : flex;
		justify-content : center;
		gap             : 8px;
		padding         : 4px 0 16px;
		background      : var(--ac-green);
	}
	.ac-dc-strip-dot {
		width           : 6px;
		height          : 6px;
		border-radius   : 50%;
		background      : var(--ac-dark);
		opacity         : 0.25;
		transition      : opacity 0.2s, transform 0.2s;
	}
	.ac-dc-strip-dot.is-active {
		opacity         : 1;
		transform       : scale(1.3);
	}

	.ac-dc-steps, .ac-dc-homeowners { padding-left: 16px; padding-right: 16px; }

	/* Mobile design puts the photo above the heading, not below it. */
	.ac-dc-steps-content {
		grid-template-areas:
			"img"
			"title"
			"list"
			"btn";
	}
	.ac-dc-steps-title { font-size: 24px; line-height: 32px; }
	.ac-dc-steps-img { min-height: 250px; }
	.ac-dc-step h3 { font-size: 20px; line-height: 30px; }
	.ac-dc-step::before { font-size: 20px; line-height: 30px; }

	.ac-dc-homeowners-title { font-size: 32px; line-height: 42px; }

	/* The Mobile design stacks the 3 homeowner cards full-width (not the
	   horizontal-scroll row used at tablet widths above) — override the
	   ≤900px nowrap/scroll rule back to a simple column stack here. */
	.ac-dc-homeowners-grid {
		display        : flex;
		flex-direction : column;
		flex-wrap      : nowrap;
		overflow-x     : visible;
		padding-bottom : 0;
	}
	.ac-dc-homeowner-card { flex: 1 1 auto; width: 100%; }
}