/* ─── Derby Housing Widgets — All Styles ─────────────────────────────────── */

/* Design tokens (scoped to all derby widgets) */
.elementor-widget[class*="elementor-widget-derby"] {
	--dh-sage:        #3B6B5A;
	--dh-sage-mid:    #5C8C78;
	--dh-sage-light:  #EBF2EE;
	--dh-sage-dark:   #2A4D40;
	--dh-terra:       #C0623D;
	--dh-terra-dark:  #96421A;
	--dh-terra-mid:   #D4845F;
	--dh-terra-light: #F7EDE7;
	--dh-terra-pale:  #FDF5F1;
	--dh-sand:        #F5EFE6;
	--dh-sand-dark:   #E8DDD0;
	--dh-cream:       #FDFAF6;
	--dh-ink:         #1A2820;
	--dh-ink-mid:     #3D5248;
	--dh-ink-light:   #7A9186;
	--dh-r:           14px;
	--dh-r-lg:        22px;
	--dh-r-xl:        30px;
}

/* ── Shared helpers ── */
.derby-section-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--dh-terra);
	margin-bottom: 12px;
}
.derby-section-label::before {
	content: '';
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	flex-shrink: 0;
}
.derby-section-label.on-dark {
	color: rgba(253,250,246,0.5);
}
.derby-section-label.on-dark::before {
	background: rgba(253,250,246,0.25);
}
.derby-section-label.centered { justify-content: center; }

.derby-h2 {
	font-family: 'Lora', Georgia, serif;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.3px;
	color: var(--dh-ink);
	margin: 0 0 8px;
}
.derby-h2.on-dark { color: var(--dh-cream); }
.derby-h2.centered { text-align: center; }

.derby-lead {
	font-size: 15px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--dh-ink-mid);
}
.derby-lead.on-dark { color: rgba(253,250,246,0.52); text-align: center; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* PHOTO QUOTE CARD                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */

.derby-pqc {
	border-radius: 30px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	position: relative;
	display: block;
}
.derby-pqc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.55) saturate(0.82);
	display: block;
}
.derby-pqc-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26,40,32,0.92) 0%, transparent 55%);
}
.derby-pqc-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 28px;
}
.derby-pqc-quote {
	font-family: 'Lora', Georgia, serif;
	font-style: italic;
	font-size: 18px;
	color: #FDFAF6;
	line-height: 1.5;
	margin-bottom: 12px;
}
.derby-pqc-quote::before {
	content: '\201C';
	font-size: 38px;
	color: #D4845F;
	line-height: 0.4;
	vertical-align: -0.32em;
	margin-right: 3px;
}
.derby-pqc-author {
	font-size: 11px;
	color: rgba(253,250,246,0.45);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* NATIVE ICON BOX — card style (add CSS class "derby-icon-card" in Elementor) */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Elementor applies _css_classes to the .elementor-element wrapper */
.elementor-element.derby-icon-card {
	background: #FFFFFF;
	border: 1.5px solid #E8DDD0;
	border-radius: 22px;
	padding: 22px 18px;
	box-sizing: border-box;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
	cursor: default;
}
.elementor-element.derby-icon-card:hover {
	border-color: #D4845F;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(192,98,61,0.08);
}
/* Remove default widget margin when used as a card */
.elementor-element.derby-icon-card .elementor-widget-container { margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* HOW IT WORKS                                                                */
/* ─────────────────────────────────────────────────────────────────────────── */

.derby-hiw-header { text-align: center; margin-bottom: 56px; }
.derby-hiw-header .derby-lead { max-width: 480px; margin: 10px auto 0; }

.derby-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 820px;
	margin: 0 auto;
}
.derby-step { text-align: center; padding: 0 24px; }

.derby-step-circle {
	width: 116px;
	height: 116px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	border: 1.5px solid rgba(255,255,255,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 22px;
	position: relative;
	transition: background 0.3s, border-color 0.3s;
	cursor: default;
}
.derby-step-circle:hover {
	background: rgba(192,98,61,0.18);
	border-color: rgba(192,98,61,0.4);
}
.derby-step-circle .elementor-icon,
.derby-step-circle i {
	font-size: 42px;
	color: rgba(253,250,246,0.7);
	transition: transform 0.3s;
}
.derby-step-circle:hover .elementor-icon,
.derby-step-circle:hover i { transform: scale(1.08); }

.derby-step-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--dh-terra);
	font-family: 'Lora', Georgia, serif;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba(59,107,90,0.8);
}

.derby-step-tag {
	display: inline-block;
	background: rgba(192,98,61,0.18);
	border: 1px solid rgba(192,98,61,0.3);
	color: #F5C0A0;
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	padding: 3px 10px;
	border-radius: 100px;
	margin-bottom: 10px;
}

.derby-step h3 {
	font-family: 'Lora', Georgia, serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--dh-cream);
	margin-bottom: 8px;
}
.derby-step p {
	font-size: 13px;
	color: rgba(253,250,246,0.52);
	line-height: 1.7;
	margin: 0;
}

.derby-hiw-footer { text-align: center; margin-top: 48px; }
.derby-btn-cream {
	display: inline-block;
	background: var(--dh-cream);
	color: var(--dh-sage);
	border: none;
	border-radius: 100px;
	padding: 13px 32px;
	font-family: 'Lora', Georgia, serif;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}
.derby-btn-cream:hover { background: #fff; transform: translateY(-1px); color: var(--dh-sage); }

.derby-hiw-phone-note {
	color: rgba(253,250,246,0.38);
	font-size: 13px;
	margin-top: 13px;
	margin-bottom: 0;
}
.derby-hiw-phone-note a {
	color: #F5C0A0;
	font-weight: 500;
	text-decoration: none;
}
.derby-hiw-phone-note a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* WHAT WE OFFER                                                               */
/* ─────────────────────────────────────────────────────────────────────────── */

.derby-offer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
	margin-top: 44px;
}

.derby-offer-photo {
	border-radius: var(--dh-r-xl);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	position: relative;
}
.derby-offer-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.55) saturate(0.82);
	display: block;
}
.derby-offer-photo-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26,40,32,0.92) 0%, transparent 55%);
}
.derby-offer-photo-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 28px;
}
.derby-offer-quote {
	font-family: 'Lora', Georgia, serif;
	font-style: italic;
	font-size: 18px;
	color: var(--dh-cream);
	line-height: 1.5;
	margin-bottom: 12px;
}
.derby-offer-quote::before {
	content: '\201C';
	font-size: 38px;
	color: var(--dh-terra-mid);
	line-height: 0.4;
	vertical-align: -0.32em;
	margin-right: 3px;
}
.derby-offer-quote-author {
	font-size: 11px;
	color: rgba(253,250,246,0.45);
}

.derby-offer-lead {
	color: var(--dh-ink-mid);
	font-size: 15px;
	line-height: 1.8;
	font-weight: 300;
	margin-bottom: 22px;
}

.derby-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.derby-cl-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.derby-cl-check {
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--dh-sage-light);
	border: 1.5px solid rgba(59,107,90,0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.derby-cl-check i { font-size: 9px; color: var(--dh-sage); }
.derby-cl-text { font-size: 14px; color: var(--dh-ink-mid); line-height: 1.6; }
.derby-cl-text strong { color: var(--dh-ink); font-weight: 600; }

.derby-offer-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.derby-btn-sage {
	display: inline-block;
	background: var(--dh-sage);
	color: #fff;
	border: none;
	border-radius: 100px;
	padding: 12px 26px;
	font-family: 'Lora', Georgia, serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s;
}
.derby-btn-sage:hover { background: var(--dh-sage-dark); color: #fff; }
.derby-offer-or { font-size: 13px; color: var(--dh-ink-light); }
.derby-offer-phone {
	font-family: 'Lora', Georgia, serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--dh-terra);
	text-decoration: none;
}
.derby-offer-phone:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* WHY US                                                                      */
/* ─────────────────────────────────────────────────────────────────────────── */

.derby-why-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	margin-top: 44px;
	align-items: start;
}

.derby-why-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.derby-why-card {
	background: #fff;
	border: 1.5px solid var(--dh-sand-dark);
	border-radius: var(--dh-r-lg);
	padding: 22px 18px;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
	cursor: default;
}
.derby-why-card:hover {
	border-color: var(--dh-terra-mid);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(192,98,61,0.08);
}
.derby-why-icon {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--dh-terra-light);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	color: var(--dh-terra);
	font-size: 18px;
}
.derby-why-card h4 {
	font-family: 'Lora', Georgia, serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--dh-ink);
	margin-bottom: 4px;
}
.derby-why-card p { font-size: 13px; color: var(--dh-ink-mid); line-height: 1.6; margin: 0; }

/* Testimonial panel */
.derby-testi-panel {
	background: var(--dh-sage);
	border-radius: var(--dh-r-xl);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 88px;
}
.derby-tp-stars { display: flex; gap: 3px; }
.derby-tp-star { color: #F5C589; font-size: 15px; }
.derby-tp-rating { font-size: 11px; color: rgba(253,250,246,0.4); margin-top: 2px; }
.derby-tp-quote {
	font-family: 'Lora', Georgia, serif;
	font-style: italic;
	font-size: 17px;
	color: var(--dh-cream);
	line-height: 1.65;
	margin: 0;
}
.derby-tp-quote::before {
	content: '\201C';
	font-size: 40px;
	color: var(--dh-terra-mid);
	line-height: 0.4;
	vertical-align: -0.32em;
	margin-right: 2px;
}
.derby-tp-attr { display: flex; align-items: center; gap: 12px; }
.derby-tp-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(192,98,61,0.22);
	border: 1px solid rgba(192,98,61,0.38);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Lora', Georgia, serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--dh-terra-mid);
	flex-shrink: 0;
}
.derby-tp-name { font-size: 13px; font-weight: 500; color: var(--dh-cream); }
.derby-tp-detail { font-size: 11px; color: rgba(253,250,246,0.4); }
.derby-tp-divider { height: 1px; background: rgba(255,255,255,0.1); }
.derby-tp-stats { display: flex; }
.derby-tp-stat {
	flex: 1;
	text-align: center;
	border-right: 1px solid rgba(255,255,255,0.1);
	padding: 8px 0;
}
.derby-tp-stat:last-child { border-right: none; }
.derby-tp-stat .derby-tp-stat-num {
	font-family: 'Lora', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--dh-cream);
	display: block;
	line-height: 1;
}
.derby-tp-stat .derby-tp-stat-label {
	font-size: 10px;
	color: rgba(253,250,246,0.4);
	margin-top: 3px;
	display: block;
}
.derby-tp-cta {
	display: block;
	background: var(--dh-terra);
	color: #fff;
	text-align: center;
	padding: 12px;
	border-radius: var(--dh-r);
	font-family: 'Lora', Georgia, serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s;
}
.derby-tp-cta:hover { background: var(--dh-terra-dark); color: #fff; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* COMPARISON TABLE                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */

.derby-comp-wrap {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.07);
	margin-top: 40px;
}
.derby-comp-table {
	width: 100%;
	border-collapse: collapse;
}
.derby-comp-table th {
	padding: 14px 18px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	background: rgba(255,255,255,0.03);
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.derby-comp-table th:first-child {
	text-align: left;
	color: rgba(255,255,255,0.25);
}
.derby-comp-table th.derby-col-us {
	background: #7ED448;
	color: #0F1A10;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: none;
}
.derby-comp-table th.derby-col-them {
	background: rgba(255,255,255,0.03);
	color: rgba(255,255,255,0.25);
}
.derby-comp-table td {
	padding: 13px 18px;
	font-size: 14px;
	border-top: 1px solid rgba(255,255,255,0.06);
	font-weight: 300;
	color: rgba(255,255,255,0.5);
}
.derby-comp-table td:first-child { color: rgba(255,255,255,0.5); font-weight: 300; }
.derby-comp-table td:not(:first-child) { text-align: center; font-weight: 500; }
.derby-comp-table td.derby-col-us { background: rgba(126,212,72,0.08); color: #ffffff; }
.derby-comp-table td.derby-col-them { background: rgba(255,255,255,0.02); }
.derby-comp-table tr:hover td.derby-col-us { background: rgba(126,212,72,0.14); }
.derby-val-good  { color: #7ED448; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800; }
.derby-val-bad   { color: rgba(255,255,255,0.22); font-family: 'Nunito', sans-serif; font-size: 13px; }
.derby-val-tick  { color: #7ED448; font-size: 16px; }
.derby-val-cross { color: rgba(255,255,255,0.14); font-size: 16px; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* SITUATION CARDS                                                             */
/* ─────────────────────────────────────────────────────────────────────────── */

.derby-sit-intro {
	color: var(--dh-ink-mid);
	font-size: 15px;
	max-width: 540px;
	font-weight: 300;
	line-height: 1.8;
	margin: 10px 0 40px;
}
.derby-sit-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.derby-sit-card {
	background: #fff;
	border: 1.5px solid var(--dh-sand-dark);
	border-radius: var(--dh-r-lg);
	padding: 24px 20px;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
	cursor: default;
}
.derby-sit-card:hover {
	border-color: var(--dh-terra-mid);
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(192,98,61,0.08);
}
.derby-sit-emoji { font-size: 26px; margin-bottom: 12px; display: block; }
.derby-sit-card h4 {
	font-family: 'Lora', Georgia, serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--dh-ink);
	margin-bottom: 6px;
}
.derby-sit-card p { font-size: 13px; color: var(--dh-ink-mid); line-height: 1.65; margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* PROPERTY CARDS                                                              */
/* ─────────────────────────────────────────────────────────────────────────── */

.derby-recent-sub { font-size: 15px; color: var(--dh-ink-mid); margin: 8px 0 36px; font-weight: 300; }

.derby-prop-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.derby-prop-card {
	border-radius: var(--dh-r-lg);
	overflow: hidden;
	position: relative;
	aspect-ratio: 3 / 4;
}
.derby-prop-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.62) saturate(0.78);
	display: block;
	transition: filter 0.4s, transform 0.5s;
}
.derby-prop-card:hover img {
	filter: brightness(0.82) saturate(1);
	transform: scale(1.04);
}
.derby-prop-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26,40,32,0.82) 0%, transparent 55%);
}
.derby-prop-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px; }
.derby-prop-area {
	font-family: 'Nunito Sans', Georgia, serif;
	font-size: 9px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: rgba(253,250,246,0.48);
	margin-bottom: 3px;
}
.derby-prop-name {
	font-family: 'Nunito Sans', Georgia, serif;
	font-size: 13px;
	color: var(--dh-cream);
	font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* FAQ SECTION                                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

.derby-faq-layout {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 60px;
	margin-top: 44px;
}
.derby-faq-lead {
	color: var(--dh-ink-mid);
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 26px;
	font-weight: 300;
}
.derby-contact-box {
	background: var(--dh-terra-pale);
	border: 1.5px solid rgba(192,98,61,0.2);
	border-radius: var(--dh-r-lg);
	padding: 24px;
}
.derby-contact-box h4 {
	font-family: 'Lora', Georgia, serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--dh-ink);
	margin-bottom: 14px;
}
.derby-contact-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 14px;
}
.derby-contact-row + .derby-contact-cta { margin-top: 18px; }
.derby-contact-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--dh-terra-light);
	border: 1px solid rgba(192,98,61,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--dh-terra);
	font-size: 15px;
}
.derby-contact-row a { color: var(--dh-terra-dark); font-weight: 500; text-decoration: none; }
.derby-contact-row a:hover { text-decoration: underline; }
.derby-contact-cta {
	display: block;
	background: var(--dh-terra);
	color: #fff;
	text-align: center;
	padding: 12px;
	border-radius: var(--dh-r);
	font-family: 'Lora', Georgia, serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s;
	margin-top: 18px;
}
.derby-contact-cta:hover { background: var(--dh-terra-dark); color: #fff; }

/* Accordion */
.derby-faq-items { display: flex; flex-direction: column; }
.derby-faq-item { border-bottom: 1px solid var(--dh-sand-dark); }
.derby-faq-item:first-child { border-top: 1px solid var(--dh-sand-dark); }
.derby-faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 17px 0;
	cursor: pointer;
	font-weight: 500;
	font-size: 15px;
	color: var(--dh-ink);
	gap: 14px;
	user-select: none;
}
.derby-faq-question:hover { color: var(--dh-terra); }
.derby-faq-chevron {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--dh-terra-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.3s, background 0.2s;
}
.derby-faq-chevron i { font-size: 10px; color: var(--dh-terra); }
.derby-faq-item.is-open .derby-faq-chevron { background: var(--dh-terra); transform: rotate(180deg); }
.derby-faq-item.is-open .derby-faq-chevron i { color: #fff; }
.derby-faq-answer {
	display: none;
	padding: 0 0 17px;
	font-size: 14px;
	color: var(--dh-ink-mid);
	line-height: 1.8;
	font-weight: 300;
}
.derby-faq-item.is-open .derby-faq-answer { display: block; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* URGENCY BANNER                                                              */
/* ─────────────────────────────────────────────────────────────────────────── */

.derby-urgency { text-align: center; }
.derby-urgency p {
	font-family: 'Lora', Georgia, serif;
	font-size: 19px;
	font-weight: 600;
	color: #fff;
	margin: 0;
}
.derby-urgency p em { font-weight: 400; opacity: 0.88; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* CTA FORM                                                                    */
/* ─────────────────────────────────────────────────────────────────────────── */

.derby-cta-inner { max-width: 580px; margin: 0 auto; text-align: center; }
.derby-cta-body {
	color: rgba(253,250,246,0.55);
	max-width: 460px;
	margin: 10px auto 36px;
	font-size: 15px;
	line-height: 1.8;
	font-weight: 300;
}
.derby-cta-box {
	background: rgba(253,250,246,0.07);
	border: 1px solid rgba(253,250,246,0.14);
	border-radius: var(--dh-r-xl);
	padding: 28px;
	max-width: 440px;
	margin: 0 auto;
}
.derby-cta-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.derby-cta-input {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	border-radius: var(--dh-r);
	border: 1.5px solid rgba(253,250,246,0.18);
	background: rgba(255,255,255,0.07);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 15px;
	color: var(--dh-cream);
	outline: none;
	transition: border-color 0.2s, background 0.2s;
	-webkit-appearance: none;
}
.derby-cta-input::placeholder { color: rgba(253,250,246,0.32); }
.derby-cta-input:focus {
	border-color: rgba(192,98,61,0.6);
	background: rgba(255,255,255,0.11);
}
.derby-cta-btn {
	width: 100%;
	background: var(--dh-terra);
	color: #fff;
	border: none;
	border-radius: var(--dh-r);
	padding: 15px;
	font-family: 'Lora', Georgia, serif;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}
.derby-cta-btn:hover:not(:disabled) { background: var(--dh-terra-dark); }
.derby-cta-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.derby-cta-note { font-size: 11px; color: rgba(253,250,246,0.3); text-align: center; margin-top: 10px; }
.derby-cta-alt { color: rgba(253,250,246,0.36); font-size: 13px; margin-top: 18px; }
.derby-cta-alt a { color: #F5C0A0; font-weight: 500; text-decoration: none; }
.derby-cta-alt a:hover { text-decoration: underline; }
.derby-cta-success {
	display: none;
	background: rgba(143,212,168,0.15);
	border: 1px solid rgba(143,212,168,0.3);
	border-radius: var(--dh-r);
	padding: 16px;
	color: #8FD4A8;
	font-size: 15px;
	font-weight: 500;
	margin-top: 12px;
	text-align: center;
}
.derby-cta-error {
	display: none;
	background: rgba(192,98,61,0.15);
	border: 1px solid rgba(192,98,61,0.3);
	border-radius: var(--dh-r);
	padding: 12px;
	color: #F5C0A0;
	font-size: 14px;
	margin-top: 10px;
	text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE                                                                  */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
	.derby-steps      { grid-template-columns: 1fr; max-width: 380px; gap: 36px; }
	.derby-offer-grid { grid-template-columns: 1fr; }
	.derby-why-layout { grid-template-columns: 1fr; }
	.derby-why-cards  { grid-template-columns: 1fr 1fr; }
	.derby-faq-layout { grid-template-columns: 1fr; }
	.derby-prop-grid  { grid-template-columns: 1fr 1fr; }
	.derby-sit-grid   { grid-template-columns: 1fr 1fr; }

	/* Comparison table – tablet: hide 4th competitor column, scroll if needed */
	.derby-comp-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.derby-comp-table { min-width: 600px; }
	.derby-comp-table th.derby-col-them:nth-child(4),
	.derby-comp-table td.derby-col-them:nth-child(4) { display: none; }
}

@media (max-width: 600px) {
	.derby-why-cards,
	.derby-sit-grid,
	.derby-prop-grid { grid-template-columns: 1fr; }

	/* ── Comparison table – mobile stacked layout ──────────────────────────── */
	/*    All columns (Derby Housing + all 3 competitors) shown as label:value  */
	/*    rows inside a card per topic. Labels pulled from data-label attr       */
	/*    set in PHP so they update if the client renames a column in Elementor. */

	.derby-comp-wrap  { overflow-x: visible; border-radius: 16px; }
	.derby-comp-table { display: block; min-width: 0; }
	.derby-comp-table thead { display: none; }
	.derby-comp-table tbody { display: flex; flex-direction: column; gap: 10px; }

	/* Each row = a card */
	.derby-comp-table tr {
		display: block;
		border: 1px solid rgba(255,255,255,0.09);
		border-radius: 14px;
		overflow: hidden;
	}

	/* Every cell becomes a flex row: [label] ......... [value] */
	.derby-comp-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 14px;
		border-top: 1px solid rgba(255,255,255,0.07);
		text-align: left;
		font-weight: 500;
	}

	/* Topic label – full-width header inside the card */
	.derby-comp-table td:first-child {
		display: block;
		border-top: none;
		background: rgba(255,255,255,0.06);
		color: rgba(253,250,246,0.55);
		font-size: 10px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1px;
		padding: 9px 14px;
	}

	/* Column name labels – pulled from data-label attribute set in PHP */
	.derby-comp-table td[data-label]::before {
		content: attr(data-label);
		font-size: 11px;
		color: rgba(253,250,246,0.38);
		font-weight: 400;
		flex-shrink: 0;
		margin-right: 12px;
	}

	/* Our column label gets green accent so it stands out */
	.derby-comp-table td.derby-col-us::before {
		color: rgba(126,212,72,0.9);
		font-weight: 600;
	}

	/* Values */
	.derby-comp-table td.derby-col-us   { color: #ffffff; }
	.derby-comp-table td.derby-col-them { color: rgba(255,255,255,0.32); background: transparent; }

	/* Hover in stacked context */
	.derby-comp-table tr:hover td.derby-col-us { background: rgba(126,212,72,0.18); }
}