/*
 * SGP Component Framework -- scoped stylesheet
 * Handle: sgp-component-framework
 * Loaded only on pages where a widget from this plugin declares it as a
 * style dependency (see get_style_depends() in each widget class file).
 * Not enqueued sitewide.
 *
 * All selectors are scoped under .sgp-cta-group, .sgp-cf-contact-card, or
 * .sgp-cf-service-grid so this file cannot affect any existing page styling.
 * Class names were checked against the live homepage and service pages
 * before being finalized to avoid collisions with existing site CSS
 * (see the sgp-cf- prefix convention adopted after the Contact-Card CTA
 * component found a real collision on its first-choice class name).
 *
 * NOTE: color declarations use !important. This site's Elementor global
 * kit sets a sitewide anchor/link color (#3AB7E0) that otherwise overrides
 * any plain-specificity color rule on <a> tags -- confirmed live during
 * POC testing (both buttons and the contact links rendered in the global
 * link color instead of this widget's intended colors; the primary button
 * was unreadable, cyan text on a cyan background). This is a known,
 * previously-documented site-wide behavior (Elementor kit-7 global colors
 * bleeding into widgets), not a bug specific to this plugin.
 */

.sgp-cta-group,
.sgp-cf-contact-card,
.sgp-cf-service-grid,
.sgp-cf-crew,
.sgp-cf-work,
.sgp-cf-faq,
.sgp-cf-trust,
.sgp-cf-content-block,
.sgp-cf-adu,
.sgp-cf-csec,
.sgp-cf-closing {
	--sgp-cyan: #22BCE8;
	--sgp-cyan-bright: #4FD4EE;
	--sgp-cyan-deep: #0A7C94;
	--sgp-navy: #0A0F15;
	--sgp-card: #121B25;
	--sgp-silver: #C9D3DA;
	font-family: inherit;
}

.sgp-cta-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sgp-cta-group--center {
	align-items: center;
	text-align: center;
}

.sgp-cta-group--left {
	align-items: flex-start;
	text-align: left;
}

.sgp-cta-group__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sgp-cta-group--center .sgp-cta-group__buttons {
	justify-content: center;
}

.sgp-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
	white-space: nowrap;
	cursor: pointer;
}

.sgp-cta-btn--primary {
	background-color: var(--sgp-cyan) !important;
	color: var(--sgp-navy) !important;
	border: 1px solid var(--sgp-cyan);
}

.sgp-cta-btn--primary:hover,
.sgp-cta-btn--primary:focus-visible {
	background-color: var(--sgp-cyan-bright) !important;
	border-color: var(--sgp-cyan-bright);
	box-shadow: 0 4px 14px rgba(34, 188, 232, 0.35);
	transform: translateY(-1px);
	color: var(--sgp-navy) !important;
}

.sgp-cta-btn--secondary {
	background-color: transparent !important;
	color: var(--sgp-silver) !important;
	border: 1px solid rgba(201, 211, 218, 0.35);
}

.sgp-cta-btn--secondary:hover,
.sgp-cta-btn--secondary:focus-visible {
	background-color: rgba(201, 211, 218, 0.08) !important;
	border-color: rgba(201, 211, 218, 0.6);
	color: #ffffff !important;
	transform: translateY(-1px);
}

.sgp-cta-group__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 14px;
}

.sgp-cta-group--center .sgp-cta-group__contact {
	justify-content: center;
}

.sgp-cta-contact {
	color: var(--sgp-cyan) !important;
	text-decoration: none !important;
	font-weight: 500;
}

.sgp-cta-contact:hover,
.sgp-cta-contact:focus-visible {
	color: var(--sgp-cyan-bright) !important;
	text-decoration: underline !important;
}

/* Mobile: stack buttons full-width for easy tapping on small screens */
@media (max-width: 560px) {
	.sgp-cta-group__buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.sgp-cta-btn {
		width: 100%;
	}

	.sgp-cta-group__contact {
		flex-direction: column;
		gap: 8px;
	}
}

/* ==========================================================================
   SGP Contact-Card CTA
   Scoped under .sgp-cf-contact-card. Reuses .sgp-cta-btn / .sgp-cta-group__buttons
   / .sgp-cta-contact / .sgp-cta-group__contact from the CTA Button Group
   widget above -- same tokens, same mobile stacking rule, no duplication.
   ========================================================================== */

.sgp-cf-contact-card {
	display: block;
	background-color: var(--sgp-card) !important;
	border: 1px solid rgba(201, 211, 218, 0.12);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 12px 32px rgba(10, 15, 21, 0.35);
	max-width: 560px;
}

.sgp-cf-contact-card--center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.sgp-cf-contact-card--left {
	text-align: left;
}

.sgp-cf-contact-card--center .sgp-cta-group__buttons,
.sgp-cf-contact-card--center .sgp-cta-group__contact {
	justify-content: center;
}

.sgp-cf-contact-card__heading {
	color: #ffffff !important;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 12px 0;
}

.sgp-cf-contact-card__intro {
	color: var(--sgp-silver) !important;
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 16px 0;
}

.sgp-cf-contact-card__trust {
	color: var(--sgp-cyan) !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 20px 0;
}

.sgp-cf-contact-card .sgp-cta-group__buttons {
	margin-bottom: 16px;
}

.sgp-cf-contact-card .sgp-cta-group__contact {
	margin-bottom: 4px;
}

/*
 * The optional embedded form (e.g. WPForms shortcode) keeps its own
 * existing sitewide styling -- this widget does not restyle form fields,
 * it only adds spacing around whatever the shortcode renders so it sits
 * cleanly inside the dark card.
 */
.sgp-cf-contact-card__form {
	margin-top: 20px;
}

@media (max-width: 560px) {
	.sgp-cf-contact-card {
		padding: 24px;
		max-width: 100%;
	}
}

/* ==========================================================================
   SGP Service Card Grid
   Scoped under .sgp-cf-service-grid. Reusable anywhere in the site -- not
   tied to the homepage. Grid columns configurable (3 or 4) via a modifier
   class; defaults to a responsive auto-stack on smaller screens.
   ========================================================================== */

.sgp-cf-service-grid {
	display: block;
}

.sgp-cf-service-grid__header {
	margin: 0 0 28px 0;
	max-width: 720px;
}

.sgp-cf-service-grid__heading {
	color: var(--w-heading, #ffffff) !important;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 10px 0;
}

.sgp-cf-service-grid__intro {
	color: var(--sgp-silver) !important;
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.sgp-cf-service-grid__cards {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, 1fr);
}

.sgp-cf-service-grid__cards--3col {
	grid-template-columns: repeat(3, 1fr);
}

.sgp-cf-service-grid__cards--4col {
	grid-template-columns: repeat(4, 1fr);
}

.sgp-cf-service-grid__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--sgp-card) !important;
	border: 1px solid rgba(201, 211, 218, 0.12);
	border-radius: 14px;
	padding: 24px;
	text-decoration: none !important;
	box-shadow: 0 8px 20px rgba(10, 15, 21, 0.25);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.sgp-cf-service-grid__card:hover,
.sgp-cf-service-grid__card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--sgp-cyan);
	box-shadow: 0 12px 28px rgba(34, 188, 232, 0.18);
}

.sgp-cf-service-grid__card-image {
	display: block;
	width: 100%;
	height: 140px;
	border-radius: 10px;
	margin-bottom: 16px;
	background-color: rgba(201, 211, 218, 0.06);
	background-size: cover;
	background-position: center;
}

.sgp-cf-service-grid__card-icon {
	display: inline-block;
	color: var(--sgp-cyan) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sgp-cf-service-grid__card-title {
	color: var(--w-card-title, #ffffff) !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px 0;
}

.sgp-cf-service-grid__card-desc {
	color: var(--sgp-silver) !important;
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 16px 0;
	flex-grow: 1;
}

.sgp-cf-service-grid__card-cta {
	color: var(--sgp-cyan) !important;
	font-size: 14px;
	font-weight: 600;
}

.sgp-cf-service-grid__card:hover .sgp-cf-service-grid__card-cta,
.sgp-cf-service-grid__card:focus-visible .sgp-cf-service-grid__card-cta {
	color: var(--sgp-cyan-bright) !important;
}

/* Tablet: 4-col drops to 2-col; 3-col stays 3 until mobile */
@media (max-width: 900px) {
	.sgp-cf-service-grid__cards--4col {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: all layouts stack to a single column */
@media (max-width: 640px) {
	.sgp-cf-service-grid__cards--3col,
	.sgp-cf-service-grid__cards--4col {
		grid-template-columns: 1fr;
	}

	.sgp-cf-service-grid__header {
		margin-bottom: 20px;
	}
}

/* ==========================================================================
   SGP Crew / Specialty Cards
   Scoped under .sgp-cf-crew. Numbered card grid, 4 columns desktop,
   2 tablet, 1 mobile -- same breakpoints as the service grid above.
   ========================================================================== */

/*
 * Premium visual polish pass (round 3): previously only the header had a
 * (translucent, gray-reading) panel and the card grid below sat directly
 * on the gypsum wall -- the section as a whole felt exposed and
 * unfinished, not "part of the same design system" as Service Grid /
 * Recent Work. The entire section (header + card grid) is now wrapped in
 * one solid navy shell matching the ADU/Closing panel language, so the
 * whole section reads as a single premium contained zone, and the
 * individual crew cards become a nested "card within a shell" layer --
 * the same two-tier pattern already working well on ADU (dark panel
 * shell containing a distinct checklist card).
 */
.sgp-cf-crew {
	display: block;
	max-width: 1200px;
	margin: clamp(32px, 5vw, 56px) auto;
	background: linear-gradient(165deg, #101a24, #0a0f15);
	border: 1px solid rgba(201, 211, 218, 0.1);
	border-radius: 22px;
	padding: clamp(28px, 4vw, 44px);
	box-shadow: 0 18px 40px rgba(10, 15, 21, 0.35);
}

.sgp-cf-crew__header {
	margin: 0 0 28px 0;
	max-width: 720px;
}

.sgp-cf-crew__heading {
	color: var(--w-heading, #ffffff) !important;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 10px 0;
}

.sgp-cf-crew__intro {
	color: var(--sgp-silver) !important;
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.sgp-cf-crew__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, 1fr);
}

.sgp-cf-crew__card {
	position: relative;
	background-color: var(--sgp-card) !important;
	border: 1px solid rgba(201, 211, 218, 0.12);
	border-radius: 14px;
	padding: 24px 24px 20px;
	box-shadow: 0 8px 20px rgba(10, 15, 21, 0.25);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.sgp-cf-crew__card:hover,
.sgp-cf-crew__card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--sgp-cyan);
	box-shadow: 0 12px 28px rgba(34, 188, 232, 0.18);
	outline: none;
}

.sgp-cf-crew__num {
	color: var(--w-num, var(--sgp-cyan-deep)) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 10px;
}

.sgp-cf-crew__card-title {
	color: var(--w-card-title, #ffffff) !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px 0;
}

.sgp-cf-crew__card-desc {
	color: var(--sgp-silver) !important;
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 16px 0;
}

.sgp-cf-crew__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sgp-cf-crew__tag {
	display: inline-block;
	background-color: rgba(34, 188, 232, 0.1) !important;
	color: var(--sgp-cyan) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
}

@media (max-width: 900px) {
	.sgp-cf-crew__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.sgp-cf-crew {
		padding: 22px 18px;
		border-radius: 16px;
	}

	.sgp-cf-crew__grid {
		grid-template-columns: 1fr;
	}

	.sgp-cf-crew__header {
		margin-bottom: 20px;
	}
}

/* ==========================================================================
   SGP Recent Work Grid
   Scoped under .sgp-cf-work. Photo-led project cards, configurable
   2 or 3 columns desktop, 2 tablet, 1 mobile.
   ========================================================================== */

.sgp-cf-work {
	display: block;
}

.sgp-cf-work__header {
	margin: 0 0 28px 0;
	max-width: 720px;
}

.sgp-cf-work__heading {
	color: var(--w-heading, #ffffff) !important;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 10px 0;
}

.sgp-cf-work__intro {
	color: var(--sgp-silver) !important;
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.sgp-cf-work__cards {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

.sgp-cf-work__cards--2col {
	grid-template-columns: repeat(2, 1fr);
}

.sgp-cf-work__cards--3col {
	grid-template-columns: repeat(3, 1fr);
}

.sgp-cf-work__card {
	display: flex;
	flex-direction: column;
	background-color: var(--sgp-card) !important;
	border: 1px solid rgba(201, 211, 218, 0.12);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(10, 15, 21, 0.25);
}

/*
 * Phase 4 fix: the previous rule used min-height (not height) as the
 * container's only sizing property, with a child img at height:100%.
 * A percentage height on a child does not reliably resolve against a
 * min-height-only parent, so cards with different natural image ratios
 * ended up visually different heights. aspect-ratio fixes the container
 * to a constant, predictable box regardless of image dimensions, and
 * the img is absolutely positioned to fill + crop via object-fit.
 */
.sgp-cf-work__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: rgba(201, 211, 218, 0.06);
}

.sgp-cf-work__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.sgp-cf-work__meta {
	padding: 20px;
}

.sgp-cf-work__type {
	color: var(--w-card-title, #ffffff) !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 6px;
}

.sgp-cf-work__area {
	color: var(--sgp-cyan-deep) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sgp-cf-work__scope {
	color: var(--sgp-silver) !important;
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 12px;
}

.sgp-cf-work__finish {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-top: 1px solid rgba(201, 211, 218, 0.12);
	padding-top: 10px;
	margin-bottom: 10px;
	font-size: 12px;
}

.sgp-cf-work__finish-k {
	color: var(--sgp-silver) !important;
	opacity: 0.7;
}

.sgp-cf-work__finish-v {
	color: #ffffff !important;
	font-weight: 600;
}

.sgp-cf-work__link {
	color: var(--sgp-cyan) !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 600;
}

.sgp-cf-work__link:hover,
.sgp-cf-work__link:focus-visible {
	color: var(--sgp-cyan-bright) !important;
	text-decoration: underline !important;
}

@media (max-width: 900px) {
	.sgp-cf-work__cards--2col,
	.sgp-cf-work__cards--3col {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.sgp-cf-work__cards--2col,
	.sgp-cf-work__cards--3col {
		grid-template-columns: 1fr;
	}

	.sgp-cf-work__header {
		margin-bottom: 20px;
	}
}

/* ==========================================================================
   SGP FAQ Accordion
   Scoped under .sgp-cf-faq. Native <details>/<summary> accordion --
   no JavaScript. Grouped by optional category label.
   ========================================================================== */

/*
 * Premium visual polish pass (round 3): same solid-shell treatment as
 * Trust/Crew -- the whole FAQ section (header + accordion) now sits in
 * one navy panel instead of just the header having its own translucent
 * gray box. Individual accordion items keep their own opaque card
 * background (already correct from an earlier round), so this becomes a
 * two-tier shell + card system consistent with the rest of the page.
 */
.sgp-cf-faq {
	display: block;
	max-width: 1200px;
	margin: clamp(32px, 5vw, 56px) auto;
	background: linear-gradient(165deg, #101a24, #0a0f15);
	border: 1px solid rgba(201, 211, 218, 0.1);
	border-radius: 22px;
	padding: clamp(28px, 4vw, 44px);
	box-shadow: 0 18px 40px rgba(10, 15, 21, 0.35);
}

.sgp-cf-faq__header {
	margin: 0 0 24px 0;
	max-width: 720px;
}

.sgp-cf-faq__eyebrow {
	display: block;
	color: var(--sgp-cyan) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.sgp-cf-faq__heading {
	color: #ffffff !important;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.sgp-cf-faq__body {
	display: block;
	max-width: 820px;
}

.sgp-cf-faq__group {
	margin-bottom: 24px;
}

.sgp-cf-faq__group-label {
	color: var(--sgp-cyan-deep) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sgp-cf-faq__item {
	background-color: var(--sgp-card) !important;
	border: 1px solid rgba(201, 211, 218, 0.12);
	border-radius: 12px;
	padding: 4px 20px;
	margin-bottom: 10px;
}

.sgp-cf-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	padding: 16px 0;
	cursor: pointer;
	list-style: none;
}

.sgp-cf-faq__q::-webkit-details-marker {
	display: none;
}

.sgp-cf-faq__q-icon {
	flex-shrink: 0;
	color: var(--sgp-cyan) !important;
	font-size: 18px;
	font-weight: 700;
	transition: transform 0.18s ease;
}

.sgp-cf-faq__item[open] .sgp-cf-faq__q-icon {
	transform: rotate(45deg);
}

.sgp-cf-faq__a {
	color: var(--sgp-silver) !important;
	font-size: 14px;
	line-height: 1.6;
	padding: 0 0 18px 0;
}

@media (max-width: 640px) {
	.sgp-cf-faq {
		padding: 22px 18px;
		border-radius: 16px;
	}
}

/* ==========================================================================
   SGP Trust / Review Strip
   Scoped under .sgp-cf-trust. Editable credential chips + optional
   shortcode slot for a real reviews plugin (e.g. Trustindex). This
   widget never touches Trustindex's own settings or output.
   ========================================================================== */

/*
 * Premium visual polish pass (2026-07-01, round 3): the previous
 * translucent rgba(10,15,21,0.55) + backdrop-filter blur panel let the
 * gypsum-board screws/texture bleed through too strongly and read as a
 * "washed-out gray overlay" rather than a real card -- exactly the
 * complaint raised against every section using this pattern. Replaced
 * with the SAME solid opaque navy gradient already used (and already
 * judged premium) on the ADU and Closing CTA panels, so every major
 * section on the page now shares one consistent, fully-opaque shell
 * language instead of some sections being solid cards and others being
 * smoky gray overlays. backdrop-filter removed entirely -- it has no
 * effect on an opaque background and was dead weight.
 */
.sgp-cf-trust {
	display: block;
	max-width: 1200px;
	margin: clamp(32px, 5vw, 56px) auto;
	background: linear-gradient(165deg, #101a24, #0a0f15);
	border-radius: 20px;
	padding: 26px 32px;
	border: 1px solid rgba(201, 211, 218, 0.12);
	box-shadow: 0 18px 40px rgba(10, 15, 21, 0.35);
}

/*
 * Section-by-section repair (2026-07-01, round 2): this section rendered
 * edge-to-edge at full viewport width (1920px on a 1920px-wide screen --
 * measured directly, not assumed) because it sits inside a shared
 * full-bleed Elementor wrapper with no content-width restriction, unlike
 * the dedicated boxed containers built for Service Grid/Recent Work/
 * Contact. Every section below sharing that same wrapper gets the same
 * max-width containment so the whole page reads as one consistent,
 * premium content width instead of some sections boxed and others
 * stretching the full browser width.
 */

.sgp-cf-trust__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.sgp-cf-trust__chip {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sgp-cf-trust__chip-main {
	color: var(--w-chip-main, #ffffff) !important;
	font-size: 16px;
	font-weight: 700;
}

.sgp-cf-trust__chip-label {
	color: var(--w-chip-label, rgba(255, 255, 255, 0.6)) !important;
	font-size: 12px;
	opacity: 0.85;
}

.sgp-cf-trust__sep {
	width: 1px;
	align-self: stretch;
	background-color: rgba(201, 211, 218, 0.18);
}

.sgp-cf-trust__reviews {
	margin-top: 20px;
}

/*
 * Trustindex badge text color (2026-07-01 PM request). Trustindex renders
 * its own "EXCELLENT" / "Based on N reviews" markup (.ti-rating-text and
 * children) with black text by default, which reads poorly on our dark
 * navy trust panel. This overrides text color ONLY for elements inside
 * our own .sgp-cf-trust__reviews wrapper -- it does not touch the
 * Trustindex plugin, its settings, or its markup structure. The star
 * icons (.ti-stars img) and the Google logo image are untouched since
 * `color` has no effect on <img> elements.
 */
.sgp-cf-trust__reviews .ti-rating-text,
.sgp-cf-trust__reviews .ti-rating-text * {
	color: #ffffff !important;
}

@media (max-width: 640px) {
	.sgp-cf-trust__chips {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.sgp-cf-trust__sep {
		display: none;
	}
}

/*
 * Trust/Review section shell (targeted fix, 2026-07-01 PM). Applied via a
 * new "sgp-trust-shell" class added to this section's column in
 * _elementor_data (draft 5643 only -- no plugin structure change). The
 * "SGP Drywall" eyebrow and headline are native Elementor heading widgets
 * that used to rely on sitewide CSS scoped to "body.elementor-page-5408"
 * (the live homepage's page ID) for background/spacing -- that CSS never
 * matches on this draft (body.elementor-page-5643), so the title rendered
 * unstyled, floating directly on the gypsum wall texture behind it, while
 * the Trust/Review Strip widget below rendered its own dark panel via
 * .sgp-cf-trust. This wraps both in one shell so they read as a single
 * unified section, and neutralizes the widget's own standalone panel
 * ONLY when nested inside this shell -- it still renders its own full
 * premium panel by default anywhere else it's used.
 */
.sgp-trust-shell {
	display: block;
	max-width: 1200px;
	margin: clamp(32px, 5vw, 56px) auto;
	padding: clamp(32px, 4.5vw, 48px) clamp(24px, 4vw, 40px);
	background: linear-gradient(165deg, #101a24, #0a0f15);
	border: 1px solid rgba(201, 211, 218, 0.12);
	border-radius: 22px;
	box-shadow: 0 18px 40px rgba(10, 15, 21, 0.35);
	text-align: center;
}

/*
 * This column's flex wrap lays widgets out with margin-based spacing
 * disabled in this Elementor version (margin-bottom on the eyebrow/
 * headline widgets had no visual effect -- measured 0px gap). Forcing
 * an explicit column flex layout with "gap" on the wrap itself is the
 * reliable, version-proof way to control spacing between the eyebrow,
 * headline, and the Trust/Review Strip widget below them.
 */
.sgp-trust-shell > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.sgp-trust-shell .sgp-eb-ts .elementor-heading-title,
.sgp-trust-shell .sgp-h2-ts .elementor-heading-title {
	margin: 0;
}

.sgp-trust-shell .sgp-cf-trust {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.sgp-trust-shell .sgp-cf-trust__chips {
	justify-content: center;
}

@media (max-width: 640px) {
	.sgp-trust-shell {
		padding: 28px 20px;
	}

	.sgp-trust-shell .sgp-cf-trust__chips {
		align-items: center;
	}
}

/* ==========================================================================
   SGP Content Block
   Scoped under .sgp-cf-content-block. General-purpose editable
   "narrative feature section": eyebrow/heading/intro + a repeater of
   items in one of 3 display styles (steps / cards / chips) + optional
   closing note + up to 2 CTA links.
   ========================================================================== */

/*
 * Premium visual polish pass (round 3): this is the widget behind
 * Installation Process, How We Leave a Job, and Service Areas -- the
 * exact 3 sections Edgar called out as "gray translucent blocks" /
 * "washed-out" / "not washed out but still needs polish". Previously only
 * the header got a translucent panel and the item grid (steps/cards/
 * chips) sat directly on the gypsum wall, one tier down from Crew/FAQ's
 * old pattern and with the same weakness. The whole section now gets the
 * same solid navy shell as every other major section, and the header's
 * own separate panel is removed (redundant now that it sits inside an
 * opaque card) in favor of just spacing.
 */
.sgp-cf-content-block {
	display: block;
	max-width: 1200px;
	margin: clamp(32px, 5vw, 56px) auto;
	background: linear-gradient(165deg, #101a24, #0a0f15);
	border: 1px solid rgba(201, 211, 218, 0.1);
	border-radius: 22px;
	padding: clamp(28px, 4vw, 44px);
	box-shadow: 0 18px 40px rgba(10, 15, 21, 0.35);
}

.sgp-cf-content-block__header {
	margin-bottom: 32px;
	max-width: 720px;
}

.sgp-cf-content-block__eyebrow {
	display: block;
	color: var(--w-eyebrow, var(--sgp-cyan)) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sgp-cf-content-block__heading {
	color: var(--w-heading, #ffffff) !important;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 12px 0;
}

.sgp-cf-content-block__intro {
	color: var(--sgp-silver) !important;
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}

.sgp-cf-content-block__items {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
}

.sgp-cf-content-block__items--2col { grid-template-columns: repeat(2, 1fr); }
.sgp-cf-content-block__items--3col { grid-template-columns: repeat(3, 1fr); }
.sgp-cf-content-block__items--4col { grid-template-columns: repeat(4, 1fr); }
.sgp-cf-content-block__items--5col { grid-template-columns: repeat(5, 1fr); }

.sgp-cf-content-block__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sgp-cf-content-block__item-label {
	color: var(--sgp-cyan) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sgp-cf-content-block__item-title {
	color: var(--w-item-title, #ffffff) !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.sgp-cf-content-block__item-desc {
	color: var(--sgp-silver) !important;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.9;
}

/*
 * Cards style -- boxed items with card background, matches crew/work cards.
 * Visual QA repair (2026-07-01): the previous gradient faded to 60%
 * opacity at the bottom-right corner, letting the gypsum-board texture
 * show through and making the whole grid look washed-out/inconsistent
 * with the fully-opaque cards used elsewhere (Crew, Recent Work). Cards
 * are now fully opaque, matching that established pattern exactly.
 */
.sgp-cf-content-block--cards .sgp-cf-content-block__item {
	background: linear-gradient(160deg, var(--sgp-card), #0d151d);
	border: 1px solid rgba(201, 211, 218, 0.14);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: 0 8px 20px rgba(10, 15, 21, 0.25);
}

/*
 * Steps style -- numbered sequence, lighter/flatter than cards.
 * Premium polish pass (round 3): now that the whole section sits inside
 * an opaque navy shell (not the gypsum wall), the previous translucent
 * rgba(10,15,21,0.55) fill read as a nearly-invisible dark-on-dark smudge
 * instead of a distinct card. Given a real, lighter, fully opaque fill
 * (--sgp-card) so each phase reads as its own defined nested card, the
 * same two-tier shell+card pattern used everywhere else on the page.
 */
.sgp-cf-content-block--steps .sgp-cf-content-block__items {
	grid-template-columns: repeat(5, 1fr);
}

.sgp-cf-content-block--steps .sgp-cf-content-block__item {
	padding: 14px 16px;
	border-left: 2px solid var(--sgp-cyan);
	background: var(--sgp-card);
	border-top: 1px solid rgba(201, 211, 218, 0.1);
	border-right: 1px solid rgba(201, 211, 218, 0.1);
	border-bottom: 1px solid rgba(201, 211, 218, 0.1);
	border-radius: 0 8px 8px 0;
	box-shadow: 0 6px 16px rgba(10, 15, 21, 0.3);
}

/*
 * Chips style -- flat inline tag list, no titles/desc box.
 * Premium polish pass (round 3): same reasoning as steps above -- solid
 * fill now that the outer wall is opaque navy, not translucent-on-gypsum.
 */
.sgp-cf-content-block--chips .sgp-cf-content-block__items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sgp-cf-content-block--chips .sgp-cf-content-block__item {
	flex-direction: row;
	background: var(--sgp-card);
	border: 1px solid rgba(34, 188, 232, 0.4);
	border-radius: 999px;
	padding: 8px 16px;
}

.sgp-cf-content-block--chips .sgp-cf-content-block__item-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--sgp-silver) !important;
}

.sgp-cf-content-block__note {
	color: var(--sgp-silver) !important;
	font-size: 14px;
	font-style: italic;
	opacity: 0.85;
	margin-top: 24px;
}

.sgp-cf-content-block__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.sgp-cf-content-block__cta {
	display: inline-flex;
	align-items: center;
	padding: 13px 26px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none !important;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.sgp-cf-content-block__cta--primary {
	background-color: var(--sgp-cyan) !important;
	color: var(--sgp-navy) !important;
}

.sgp-cf-content-block__cta--primary:hover {
	background-color: var(--sgp-cyan-bright) !important;
	transform: translateY(-1px);
}

/*
 * Premium polish pass (round 3): now that this CTA sits on the opaque
 * navy shell (not gypsum, not a dark-on-dark fill), switched to the same
 * light-on-dark ghost-button treatment already proven to work well on the
 * Closing CTA banner's secondary buttons -- a pale fill + bright border
 * reads clearly against a dark card, whereas the previous dark-on-dark
 * fill from round 2 would have nearly disappeared against this new shell.
 */
.sgp-cf-content-block__cta--secondary {
	background-color: rgba(201, 211, 218, 0.08) !important;
	color: #ffffff !important;
	border: 1px solid rgba(201, 211, 218, 0.45);
}

.sgp-cf-content-block__cta--secondary:hover {
	background-color: rgba(34, 188, 232, 0.12) !important;
	border-color: var(--sgp-cyan);
	color: #ffffff !important;
}

@media (max-width: 900px) {
	.sgp-cf-content-block__items--4col,
	.sgp-cf-content-block__items--5col {
		grid-template-columns: repeat(2, 1fr);
	}

	.sgp-cf-content-block--steps .sgp-cf-content-block__items {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.sgp-cf-content-block__items--2col,
	.sgp-cf-content-block__items--3col,
	.sgp-cf-content-block__items--4col,
	.sgp-cf-content-block__items--5col {
		grid-template-columns: 1fr;
	}

	.sgp-cf-content-block--steps .sgp-cf-content-block__items {
		grid-template-columns: 1fr;
	}

	.sgp-cf-content-block {
		padding: 22px 18px;
		border-radius: 16px;
	}
}

/* ==========================================================================
   SGP ADU Owner-Builder Section
   Scoped under .sgp-cf-adu. Two-column layout: left = eyebrow/heading/
   intro/stat-chips/CTA, right = dark navy support card with a checklist.
   Deliberately not flattened to a single column -- the split is the
   section's real content structure.
   ========================================================================== */

/*
 * Visual QA repair (2026-07-01): the section previously had no shared
 * shell at all -- the left column floated directly on the gypsum wall
 * (washed-out, low-contrast text) while the right checklist card sat in
 * its own separate dark box, so the two columns read as visually
 * detached from each other. Wrapping the whole section in one dark
 * navy panel fixes both problems at once: readable left-column text,
 * and left/right now visually belong to the same section.
 */
.sgp-cf-adu {
	display: block;
	max-width: 1200px;
	margin: clamp(32px, 5vw, 56px) auto;
	background: linear-gradient(165deg, #101a24, #0a0f15);
	border: 1px solid rgba(201, 211, 218, 0.1);
	border-radius: 22px;
	padding: clamp(28px, 4vw, 44px);
	box-shadow: 0 18px 40px rgba(10, 15, 21, 0.35);
}

.sgp-cf-adu__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(28px, 5vw, 56px);
	align-items: start;
}

.sgp-cf-adu__left {
	display: flex;
	flex-direction: column;
}

.sgp-cf-adu__eyebrow {
	display: block;
	color: var(--w-eyebrow, var(--sgp-cyan)) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sgp-cf-adu__heading {
	color: var(--w-heading, #ffffff) !important;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 14px 0;
}

.sgp-cf-adu__intro {
	color: var(--sgp-silver) !important;
	font-size: 15px;
	line-height: 1.65;
	margin: 0 0 24px 0;
}

.sgp-cf-adu__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

.sgp-cf-adu__chip {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: rgba(34, 188, 232, 0.1);
	border: 1px solid rgba(34, 188, 232, 0.35);
	border-radius: 12px;
	padding: 12px 16px;
	min-width: 140px;
}

.sgp-cf-adu__chip-value {
	color: var(--sgp-cyan) !important;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.sgp-cf-adu__chip-label {
	color: var(--sgp-silver) !important;
	font-size: 12px;
	line-height: 1.4;
	opacity: 0.9;
}

.sgp-cf-adu__cta-wrap {
	margin-top: 4px;
}

.sgp-cf-adu__cta {
	display: inline-flex;
	align-items: center;
	padding: 15px 30px;
	border-radius: 12px;
	background-color: var(--sgp-cyan) !important;
	color: var(--sgp-navy) !important;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
	transition: background-color 0.18s ease, transform 0.12s ease;
}

.sgp-cf-adu__cta:hover,
.sgp-cf-adu__cta:focus-visible {
	background-color: var(--sgp-cyan-bright) !important;
	transform: translateY(-1px);
}

.sgp-cf-adu__card {
	background: linear-gradient(160deg, var(--sgp-card), rgba(10, 15, 21, 0.9)) !important;
	border: 1px solid rgba(201, 211, 218, 0.14);
	border-radius: 18px;
	padding: 32px;
	box-shadow: 0 16px 36px rgba(10, 15, 21, 0.4);
}

.sgp-cf-adu__card-title {
	color: var(--w-card-title, #ffffff) !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 18px 0;
}

.sgp-cf-adu__checklist {
	list-style: none;
	margin: 0 0 18px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sgp-cf-adu__check-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--sgp-silver) !important;
	font-size: 14px;
	line-height: 1.5;
}

.sgp-cf-adu__check-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(34, 188, 232, 0.14);
	color: var(--sgp-cyan) !important;
	font-size: 11px;
	font-weight: 700;
	margin-top: 1px;
}

.sgp-cf-adu__note {
	color: var(--sgp-cyan) !important;
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
	margin: 0;
	opacity: 0.95;
}

.sgp-cf-adu__secondary {
	color: var(--sgp-silver) !important;
	font-size: 13px;
	line-height: 1.5;
	margin: 10px 0 0 0;
	opacity: 0.85;
}

@media (max-width: 900px) {
	.sgp-cf-adu__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.sgp-cf-adu {
		padding: 22px 18px;
		border-radius: 16px;
	}

	.sgp-cf-adu__card {
		padding: 24px;
	}

	.sgp-cf-adu__cta {
		width: 100%;
		justify-content: center;
	}

	.sgp-cf-adu__chips {
		flex-direction: column;
	}
}

/* ==========================================================================
   SGP Contact Form Section
   Scoped under .sgp-cf-csec (distinct from .sgp-cf-contact-card to avoid
   confusion with the existing Contact-Card CTA widget). Two-column
   layout: left = header + contact-method cards, right = a dark card
   wrapping the real WPForms shortcode output. Fresh CSS -- does not
   depend on any Elementor element ID.
   ========================================================================== */

.sgp-cf-csec {
	display: block;
}

.sgp-cf-csec__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(28px, 5vw, 48px);
	align-items: start;
}

.sgp-cf-csec__eyebrow {
	display: block;
	color: var(--w-eyebrow, var(--sgp-cyan)) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sgp-cf-csec__heading {
	color: var(--w-heading, #ffffff) !important;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 14px 0;
}

.sgp-cf-csec__intro {
	color: var(--sgp-silver) !important;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 26px 0;
}

.sgp-cf-csec__methods {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.sgp-cf-csec__method {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 16px;
	border: 1px solid rgba(201, 211, 218, 0.14);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	text-decoration: none !important;
	transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.sgp-cf-csec__method:hover,
.sgp-cf-csec__method:focus-visible {
	border-color: rgba(34, 188, 232, 0.4);
	background: rgba(34, 188, 232, 0.05);
	transform: translateY(-1px);
}

.sgp-cf-csec__method-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(34, 188, 232, 0.14);
}

.sgp-cf-csec__method-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sgp-cf-csec__method-label {
	color: var(--sgp-silver) !important;
	font-size: 12px;
	opacity: 0.85;
}

.sgp-cf-csec__method-value {
	color: #ffffff !important;
	font-size: 16px;
	font-weight: 700;
}

.sgp-cf-csec__method-note {
	color: var(--sgp-cyan) !important;
	font-size: 12px;
	opacity: 0.9;
}

.sgp-cf-csec__trust {
	color: var(--sgp-cyan) !important;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 8px 0;
}

.sgp-cf-csec__note {
	color: var(--sgp-silver) !important;
	font-size: 13px;
	opacity: 0.8;
	margin: 0;
}

.sgp-cf-csec__card {
	background: linear-gradient(160deg, var(--sgp-card), rgba(10, 15, 21, 0.9)) !important;
	border: 1px solid rgba(201, 211, 218, 0.14);
	border-radius: 18px;
	padding: 28px;
	box-shadow: 0 16px 36px rgba(10, 15, 21, 0.4);
}

/*
 * The WPForms shortcode keeps its own existing sitewide field styling --
 * this widget only adds spacing around it and does not restyle labels,
 * inputs, or the submit button, with one exception documented below.
 */
.sgp-cf-csec__form {
	display: block;
}

/*
 * Visual QA repair (2026-07-01) -- real bug, not cosmetic: the form's
 * own card renders with a light/near-white background
 * (rgb(251,251,250), WPForms' own "modern" theme default), but the
 * sitewide WPForms field styling (built for dark-background placements
 * elsewhere on the site, applied via ".sgp-section--pad .wpforms-*"
 * selectors on any section using the site's dark-card wall system)
 * sets label and input TEXT to white. Result: white text on a
 * near-white field -- both the field labels and anything a visitor
 * types into the form were effectively invisible.
 *
 * IMPORTANT specificity note: this section sits inside a
 * ".sgp-section--pad" ancestor (the site's shared dark-card wall
 * system), so the sitewide rule ".sgp-section--pad .wpforms-field-label"
 * has the SAME specificity as a plain ".sgp-cf-csec__form .wpforms-field-label"
 * override and can win on source order alone. Every selector below is
 * deliberately chained with both ".sgp-cf-csec" and ".sgp-cf-csec__form"
 * to guarantee higher specificity than the sitewide rule regardless of
 * stylesheet load order. Scoped strictly to this widget's own markup --
 * cannot affect WPForms anywhere else on the site, and does not touch
 * WPForms settings or fields, only text/border color on this one card.
 */
.sgp-cf-csec .sgp-cf-csec__form .wpforms-field-label,
.sgp-cf-csec .sgp-cf-csec__form .wpforms-field-sublabel,
.sgp-cf-csec .sgp-cf-csec__form .wpforms-field-description,
.sgp-cf-csec .sgp-cf-csec__form .wpforms-title,
.sgp-cf-csec .sgp-cf-csec__form .wpforms-description {
	color: #1a2530 !important;
}

.sgp-cf-csec .sgp-cf-csec__form .wpforms-field-sublabel {
	color: #5c6b78 !important;
}

.sgp-cf-csec .sgp-cf-csec__form input[type="text"],
.sgp-cf-csec .sgp-cf-csec__form input[type="email"],
.sgp-cf-csec .sgp-cf-csec__form input[type="tel"],
.sgp-cf-csec .sgp-cf-csec__form input[type="number"],
.sgp-cf-csec .sgp-cf-csec__form textarea,
.sgp-cf-csec .sgp-cf-csec__form select {
	color: #1a2530 !important;
	background-color: #ffffff !important;
	border-color: rgba(10, 15, 21, 0.18) !important;
}

.sgp-cf-csec .sgp-cf-csec__form input::placeholder,
.sgp-cf-csec .sgp-cf-csec__form textarea::placeholder {
	color: rgba(26, 37, 48, 0.4) !important;
}

/*
 * Phase 5 readability check: this card's fields had no visible focus
 * indicator at all (a sitewide outline:none reset with nothing to
 * replace it). Restoring a scoped, on-brand focus ring here only --
 * does not touch WPForms elsewhere on the site.
 */
.sgp-cf-csec .sgp-cf-csec__form input[type="text"]:focus,
.sgp-cf-csec .sgp-cf-csec__form input[type="email"]:focus,
.sgp-cf-csec .sgp-cf-csec__form input[type="tel"]:focus,
.sgp-cf-csec .sgp-cf-csec__form input[type="number"]:focus,
.sgp-cf-csec .sgp-cf-csec__form textarea:focus,
.sgp-cf-csec .sgp-cf-csec__form select:focus {
	outline: 2px solid var(--sgp-cyan) !important;
	outline-offset: 2px;
	border-color: var(--sgp-cyan) !important;
}

@media (max-width: 900px) {
	.sgp-cf-csec__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.sgp-cf-csec__card {
		padding: 20px;
	}
}

/* ==========================================================================
   SGP Closing CTA Banner
   Scoped under .sgp-cf-closing. Centered closing conversion section:
   eyebrow/heading/intro, trust-line row, up to 3 CTA buttons, service
   tag chips, and an optional small footer/license line.
   ========================================================================== */

/*
 * Visual QA repair (2026-07-01): this closing conversion banner had no
 * shell at all -- heading, intro, trust lines, and CTAs all sat directly
 * on the gypsum wall, and the intro/trust text and secondary buttons
 * were washed out to the point of being hard to read. This is the
 * page's final conversion moment, so it now gets the strongest dark
 * panel treatment on the page (wider max-width, generous padding),
 * matching the closing "Recent Work" / "Service Card Grid" full-panel
 * sections rather than looking like loose text at the bottom of the page.
 */
/*
 * Section-by-section repair (round 2): Edgar flagged this closing banner
 * as still looking weak even after the first shell repair. Root cause this
 * time is relative, not absolute -- every other major section on the page
 * was just standardized to a 1200px contained width in this same round, so
 * the closing banner's original 900px cap now reads as noticeably smaller
 * than its neighbors, breaking the page's visual rhythm at the exact
 * moment (the final CTA) where it should feel like the strongest section,
 * not a shrunken one. Widened to 1080px -- still narrower than the full
 * 1200px content width (appropriate for a focused, centered closing
 * statement) but no longer jarring against it. Border and shadow also
 * strengthened slightly for more visual weight.
 */
.sgp-cf-closing {
	display: block;
	text-align: center;
	max-width: 1080px;
	margin: clamp(32px, 5vw, 56px) auto;
	background: linear-gradient(165deg, #101a24, #0a0f15);
	border: 1px solid rgba(201, 211, 218, 0.16);
	border-radius: 24px;
	padding: clamp(36px, 5vw, 60px) clamp(24px, 5vw, 52px);
	box-shadow: 0 24px 56px rgba(10, 15, 21, 0.5);
}

.sgp-cf-closing__eyebrow {
	display: block;
	color: var(--w-eyebrow, var(--sgp-cyan)) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.sgp-cf-closing__heading {
	color: var(--w-heading, #ffffff) !important;
	font-size: clamp(24px, 3.6vw, 34px);
	font-weight: 800;
	line-height: 1.18;
	margin: 0 0 16px 0;
}

.sgp-cf-closing__intro {
	color: var(--sgp-silver) !important;
	font-size: 15px;
	line-height: 1.65;
	margin: 0 auto 22px auto;
	max-width: 640px;
}

.sgp-cf-closing__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	margin-bottom: 26px;
}

.sgp-cf-closing__trust-item {
	color: var(--sgp-cyan) !important;
	font-size: 13px;
	font-weight: 600;
}

.sgp-cf-closing__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 26px;
}

.sgp-cf-closing__cta {
	display: inline-flex;
	align-items: center;
	padding: 14px 26px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none !important;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.sgp-cf-closing__cta--primary {
	background-color: var(--sgp-cyan) !important;
	color: var(--sgp-navy) !important;
}

.sgp-cf-closing__cta--primary:hover,
.sgp-cf-closing__cta--primary:focus-visible {
	background-color: var(--sgp-cyan-bright) !important;
	transform: translateY(-1px);
}

/*
 * Visual QA repair: secondary buttons at rgba(201,211,218,0.3) border /
 * silver text on transparent were reported "too faint to read" -- given
 * a real background fill and a brighter border so they read as clearly
 * clickable buttons, not ghost outlines.
 */
.sgp-cf-closing__cta--secondary {
	background-color: rgba(201, 211, 218, 0.08) !important;
	color: #ffffff !important;
	border: 1px solid rgba(201, 211, 218, 0.45);
}

.sgp-cf-closing__cta--secondary:hover,
.sgp-cf-closing__cta--secondary:focus-visible {
	background-color: rgba(34, 188, 232, 0.12) !important;
	border-color: var(--sgp-cyan);
	color: #ffffff !important;
	transform: translateY(-1px);
}

.sgp-cf-closing__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
}

.sgp-cf-closing__tag {
	display: inline-block;
	background-color: rgba(34, 188, 232, 0.08) !important;
	color: var(--sgp-cyan) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
}

.sgp-cf-closing__footer {
	color: var(--sgp-silver) !important;
	font-size: 11px;
	letter-spacing: 0.06em;
	opacity: 0.6;
	margin: 8px 0 0 0;
}

@media (max-width: 560px) {
	.sgp-cf-closing {
		padding: 28px 20px;
		border-radius: 18px;
	}

	.sgp-cf-closing__ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.sgp-cf-closing__cta {
		justify-content: center;
		width: 100%;
	}
}

/* ==========================================================================
   SGP Hero Section
   Scoped under .sgp-cf-hero. Deliberately reuses the site's existing
   GLOBAL hero classes (.sgp-kicker, .sgp-hero__thesis, .sgp-mark,
   .sgp-body, .sgp-hero__support, .sgp-ctas, .sgp-btn*, .sgp-hero__chips,
   .sgp-chip, .sgp-hero__grid, .sgp-card.sgp-stack and children,
   .sgp-stack__badges/.sgp-badge) so the widget matches the current hero
   by construction -- this block only adds what the global stylesheet
   does NOT already cover: a mobile breakpoint for the 2-column grid
   (previously handled by Elementor's own per-element responsive
   settings on the raw-HTML elements this widget replaces) and sizing
   for the new icon-repeater inside the skills list.
   ========================================================================== */

.sgp-cf-hero .sgp-hero__grid > .sgp-cf-hero__left,
.sgp-cf-hero .sgp-hero__grid > .sgp-cf-hero__right {
	min-width: 0;
}

/*
 * The H1 here is a plain semantic <h1>, not an Elementor Heading widget
 * (the original relied on that widget's own Style-tab color control,
 * which no longer exists once it's removed). Without an explicit color
 * it inherits the site's default dark heading color (near-black),
 * which is invisible against this card's dark navy background. Set
 * explicitly to match the rest of the light-on-dark hero content.
 */
.sgp-cf-hero h1 {
	color: var(--w-h1, #ffffff);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 14px 0;
}

/*
 * Phase 6 color controls: .sgp-kicker, .sgp-hero__thesis and .sgp-h3
 * are GLOBAL sitewide classes (not owned by this plugin). These rules
 * are scoped under .sgp-cf-hero so they only affect this widget's own
 * subtree -- the global classes elsewhere on the site are untouched.
 * Descendant-selector specificity (0,2,0) beats the global single-class
 * rules (0,1,0), and neither global rule uses !important, so no
 * !important is needed here either.
 */
.sgp-cf-hero .sgp-kicker {
	color: var(--w-kicker, #4FD4EE);
}

.sgp-cf-hero .sgp-hero__thesis {
	color: var(--w-subheading, rgba(255, 255, 255, 0.88));
}

.sgp-cf-hero .sgp-h3 {
	color: var(--w-card-title, #ffffff);
}

.sgp-cf-hero .sgp-stack__li i {
	font-size: 16px;
	line-height: 1;
}

/*
 * Secondary hero CTA ("View Our Services") recolor (2026-07-01 PM
 * request): blue background, black text. Scoped to .sgp-cf-hero so it
 * only affects the ghost button inside this widget, not any other use
 * of the sitewide .sgp-btn--ghost class elsewhere on the site.
 *
 * Specificity note: the sitewide global stylesheet has a rule
 * `.sgp-home a.sgp-btn--ghost { color: var(--ink) !important; }`
 * (2 classes + 1 element, loaded after this stylesheet), which beat a
 * plain `.sgp-cf-hero .sgp-btn--ghost` override even with !important.
 * Adding the `.sgp-ctas` ancestor class (already present in this
 * widget's own markup) brings this selector to 3 classes, which wins
 * outright on specificity regardless of stylesheet load order.
 */
.sgp-cf-hero .sgp-ctas .sgp-btn--ghost {
	background-color: transparent !important;
	border-color: #22bce8 !important;
	color: #ffffff !important;
}

.sgp-cf-hero .sgp-ctas .sgp-btn--ghost:hover,
.sgp-cf-hero .sgp-ctas .sgp-btn--ghost:focus {
	background-color: rgba(34, 188, 232, 0.14) !important;
	border-color: #4fd4ee !important;
	color: #ffffff !important;
}

@media (max-width: 900px) {
	.sgp-cf-hero .sgp-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ==========================================================================
   SGP Premium Q&A (sgp_premium_qa)
   Dark navy premium panel, left category-tab column + right filtered
   accordion column, matching the split-layout Q&A mockup. Color values
   come from CSS custom properties written inline by the widget's render()
   method (Elementor color controls) with fallbacks here matching the
   established SGP premium-card token system (--sgp-navy / --sgp-card /
   --sgp-cyan family used elsewhere in this stylesheet).
   ========================================================================== */

.sgp-cf-premium-qa {
	display: block;
	max-width: 1200px;
	margin: clamp(32px, 5vw, 56px) auto;
}

.sgp-cf-premium-qa__inner {
	position: relative;
	overflow: hidden;
	background: var(--qa-panel-bg, #0A0F15);
	border: 1px solid var(--qa-panel-border, rgba(79, 212, 238, 0.18));
	border-radius: 22px;
	padding: clamp(32px, 4.5vw, 56px);
	box-shadow: 0 18px 40px rgba(10, 15, 21, 0.35);
	display: grid;
	grid-template-columns: minmax(280px, 0.95fr) 1.55fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

/* Subtle internal grid/pattern texture + tonal wash -- decorative only,
   sits behind the content (z-index:0), does not affect the editable
   panel background color which is the solid layer beneath it. */
.sgp-cf-premium-qa__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(165deg, rgba(18, 27, 37, 0.85), rgba(10, 15, 21, 0.15)),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 40px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 40px);
	pointer-events: none;
	z-index: 0;
}

.sgp-cf-premium-qa__left,
.sgp-cf-premium-qa__right {
	position: relative;
	z-index: 1;
	min-width: 0;
}

/* ---------- Left column ---------- */

.sgp-cf-premium-qa__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--qa-eyebrow, #4FD4EE);
	margin-bottom: 14px;
}

.sgp-cf-premium-qa__heading {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.16;
	color: var(--qa-heading, #FFFFFF);
	margin: 0 0 14px;
}

.sgp-cf-premium-qa__accent {
	color: var(--qa-accent, #22BCE8);
}

.sgp-cf-premium-qa__intro {
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 20px;
}

.sgp-cf-premium-qa__tabs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.sgp-cf-premium-qa__tab {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: var(--qa-cat-inactive-bg, rgba(255, 255, 255, 0.04));
	color: var(--qa-cat-text, rgba(255, 255, 255, 0.72));
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sgp-cf-premium-qa__tab:hover {
	border-color: rgba(79, 212, 238, 0.35);
	color: #FFFFFF;
}

.sgp-cf-premium-qa__tab:focus-visible {
	outline: 2px solid var(--qa-accent, #22BCE8);
	outline-offset: 2px;
}

.sgp-cf-premium-qa__tab.is-active {
	background: var(--qa-cat-active-bg, rgba(34, 188, 232, 0.16));
	border-color: rgba(79, 212, 238, 0.45);
	color: var(--qa-cat-active-text, #FFFFFF);
	box-shadow: inset 0 0 0 1px rgba(79, 212, 238, 0.15);
}

.sgp-cf-premium-qa__tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.05);
	color: var(--qa-icon, #22BCE8);
}

.sgp-cf-premium-qa__tab.is-active .sgp-cf-premium-qa__tab-icon {
	background: rgba(34, 188, 232, 0.18);
}

.sgp-cf-premium-qa__tab-icon svg,
.sgp-cf-premium-qa__tab-icon i {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

.sgp-cf-premium-qa__tab-label {
	flex: 1 1 auto;
}

.sgp-cf-premium-qa__helper {
	margin-top: 22px;
	padding: 16px 18px;
	border: 1px dashed rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13.5px;
	line-height: 1.6;
}

.sgp-cf-premium-qa__helper p {
	margin: 0;
}

.sgp-cf-premium-qa__helper-link {
	color: var(--qa-accent, #22BCE8);
	font-weight: 700;
	text-decoration: none;
}

.sgp-cf-premium-qa__helper-link:hover {
	text-decoration: underline;
}

/* ---------- Right column ---------- */

.sgp-cf-premium-qa__group {
	display: none;
	flex-direction: column;
	gap: 12px;
}

.sgp-cf-premium-qa__group.is-active {
	display: flex;
}

.sgp-cf-premium-qa__item {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: var(--qa-row-bg, #121B25);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.sgp-cf-premium-qa__item.is-open {
	border-color: var(--qa-row-active-border, #22BCE8);
}

.sgp-cf-premium-qa__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--qa-q-text, #FFFFFF);
}

.sgp-cf-premium-qa__question:focus-visible {
	outline: 2px solid var(--qa-accent, #22BCE8);
	outline-offset: -2px;
}

.sgp-cf-premium-qa__q-icon {
	position: relative;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.sgp-cf-premium-qa__q-icon-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--qa-icon, #22BCE8);
	transform: translate(-50%, -50%);
}

.sgp-cf-premium-qa__q-icon-bar:nth-child(1) {
	width: 12px;
	height: 2px;
}

.sgp-cf-premium-qa__q-icon-bar:nth-child(2) {
	width: 2px;
	height: 12px;
}

.sgp-cf-premium-qa__item.is-open .sgp-cf-premium-qa__q-icon {
	transform: rotate(45deg);
	background: var(--qa-row-active-border, #22BCE8);
	border-color: var(--qa-row-active-border, #22BCE8);
}

.sgp-cf-premium-qa__item.is-open .sgp-cf-premium-qa__q-icon-bar {
	background: #04141A;
}

.sgp-cf-premium-qa__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.sgp-cf-premium-qa__answer-inner {
	padding: 0 20px 20px;
}

.sgp-cf-premium-qa__answer-inner p {
	margin: 0;
	color: var(--qa-a-text, rgba(255, 255, 255, 0.74));
	font-size: 14.5px;
	line-height: 1.65;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.sgp-cf-premium-qa__inner {
		grid-template-columns: 1fr;
		padding: clamp(24px, 6vw, 36px);
		gap: 28px;
	}

	.sgp-cf-premium-qa__tabs {
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 8px;
		padding-bottom: 4px;
	}

	.sgp-cf-premium-qa__tab {
		flex: 0 0 auto;
		white-space: nowrap;
		width: auto;
	}

	.sgp-cf-premium-qa__helper {
		margin-top: 16px;
	}
}

@media (max-width: 480px) {
	.sgp-cf-premium-qa__heading {
		font-size: 26px;
	}

	.sgp-cf-premium-qa__question {
		padding: 16px;
		font-size: 14.5px;
	}

	.sgp-cf-premium-qa__q-text {
		font-size: 14.5px;
	}
}

/* ==========================================================================
   Screw Icon Placeholder System (targeted icon cleanup, 2026-07-01 PM)
   Shared rounded-square badge for the inline SVG "screw head" placeholder
   icon (see sgp_cf_screw_icon_svg() in the main plugin file). Used in 3
   sections: hero skills list (.sgp-cf-hero .sgp-stack__li), crew/
   specialty cards (.sgp-cf-crew__marker), and Q&A category tabs (which
   already had this exact badge treatment via .sgp-cf-premium-qa__tab-icon
   -- only the icon markup changed there, no CSS needed for that section).
   currentColor-based so each context's existing color variables still
   control the tint.
   ========================================================================== */

.sgp-cf-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	flex-shrink: 0;
	background: linear-gradient(160deg, rgba(79, 212, 238, 0.14), rgba(10, 15, 21, 0.4));
	border: 1px solid rgba(79, 212, 238, 0.28);
	color: #4FD4EE;
}

.sgp-cf-icon-badge .sgp-cf-screw-icon {
	width: 16px;
	height: 16px;
	display: block;
}

.sgp-cf-icon-badge--sm {
	width: 26px;
	height: 26px;
	border-radius: 7px;
}

.sgp-cf-icon-badge--sm .sgp-cf-screw-icon {
	width: 13px;
	height: 13px;
}

/*
 * Section 1 (Hero skills list): .sgp-stack__li is a global sitewide class
 * (like .sgp-kicker/.sgp-hero__thesis) that previously rendered a bare
 * Font Awesome glyph with no badge box -- scoped under .sgp-cf-hero so
 * only this widget's own subtree is affected.
 */
.sgp-cf-hero .sgp-stack__li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	flex-shrink: 0;
	background: linear-gradient(160deg, rgba(79, 212, 238, 0.14), rgba(10, 15, 21, 0.4));
	border: 1px solid rgba(79, 212, 238, 0.28);
	color: #4FD4EE;
}

.sgp-cf-hero .sgp-stack__li .sgp-cf-screw-icon {
	width: 16px;
	height: 16px;
	display: block;
}

/* Section 2 (Crew cards): screw badge sits next to the existing 01/02/03
   number, replacing the plain number-only marker. */
.sgp-cf-crew__marker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.sgp-cf-crew__marker .sgp-cf-crew__num {
	margin-bottom: 0;
}

/* ============================================================================
   SGP Service Area Navigator (.sa / .sgp-cf-service-area-nav)
   REBUILT 2026-07-01 PM: ported near-verbatim from the approved reference
   "SGP DRYWALL — SERVICE AREA WIDGET · v3 'Pick a region.'" (source:
   connected service-area-widget/widget.css, root-level = Production
   Candidate). Root selector kept as the reference's own `.sa` so every
   rule below matches the reference 1:1 -- `.sgp-cf-service-area-nav` rides
   alongside it on the same element purely as a plugin identity class and
   carries no styling of its own. Do not add sgp-cf-service-area-nav-scoped
   overrides here; edit the reference file instead if the design changes.
   Archivo + IBM Plex Mono are already loaded sitewide via the theme, so no
   @font-face additions were needed.
   ============================================================================ */

.sa {
	--cyan:#22BCE8; --cyan-deep:#4FD4EE; --cyan-ink:#052830; --cyan-glow:rgba(34,188,232,0.28);
	--gypsum:#0A0F15; --chrome-hi:#16212B; --silver-1:rgba(255,255,255,0.07); --silver-2:rgba(201,211,218,0.4);
	--ink:#FFFFFF; --ink-soft:#C9D3DA; --mute:rgba(201,211,218,0.6);
	--line:rgba(201,211,218,0.16); --line-soft:rgba(201,211,218,0.10);
	--radius-md:12px; --radius-lg:18px; --radius-pill:999px;
	--shadow-card:0 16px 36px rgba(10,15,21,0.45);
	--ease:cubic-bezier(0.32,0.72,0,1); --dur:220ms;
	--font-display:'Archivo',system-ui,sans-serif; --font-body:'Archivo',system-ui,sans-serif;
	--font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

	container-type: inline-size; container-name: sa;
	font-family: var(--font-body); color: var(--ink);
	-webkit-font-smoothing: antialiased; max-width: 1120px; margin-inline: auto;
}
.sa *, .sa *::before, .sa *::after { box-sizing: border-box; }

/* ── Unified dark premium panel ── heading + search + tabs + cities + footer
   all live inside this one opaque container (2026-07-01 correction pass:
   was previously a light glassy card with the heading floating above it as
   a separate element; now the whole component is one dark navy shell,
   matching the rest of the homepage's premium sections). */
.sa__panel {
  position:relative; background:linear-gradient(160deg, var(--chrome-hi) 0%, #0A0F15 100%);
  border:1px solid rgba(201,211,218,0.14); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:38px 38px 34px;
}

/* ── Heading (now the panel's own first block, not a separate floating element) ── */
.sa__head {
  display:block; padding:0; margin-bottom:30px;
}
.sa__eyebrow { font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--cyan-deep); font-weight:600; }
.sa__title { font:800 clamp(28px,4.6cqi,40px)/1.08 var(--font-display);
  letter-spacing:-0.03em; margin:12px 0 0; text-wrap:balance; color:var(--ink); }
.sa__title em { font-style:normal; color:var(--cyan-deep); }
.sa__lede { margin:14px 0 0; max-width:52ch; font-size:16px; line-height:1.6; color:var(--ink-soft); }

/* ── Search ── */
.sa__search { position:relative; margin-bottom:16px; }
.sa__search-ico { position:absolute; left:17px; top:50%; transform:translateY(-50%);
  color:var(--mute); pointer-events:none; }
.sa__input { width:100%; height:54px; padding:0 48px; font-family:var(--font-body);
  font-size:16px; font-weight:500; color:var(--ink); background:var(--chrome-hi);
  border:1px solid var(--line); border-radius:var(--radius-md); outline:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sa__input::placeholder { color:var(--mute); font-weight:500; }
.sa__input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-glow); }
.sa__input::-webkit-search-cancel-button { display:none; }
.sa__clear { position:absolute; right:11px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  color:var(--mute); display:grid; place-items:center;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sa__clear:hover { background:var(--silver-1); color:var(--ink); }
.sa__clear[hidden] { display:none; }

/* ── Region selector (segmented) ── */
.sa__regions { display:flex; gap:4px; padding:5px; background:var(--silver-1);
  border:1px solid var(--line); border-radius:var(--radius-pill); width:fit-content; max-width:100%; }
.sa-region { appearance:none; border:0; cursor:pointer; white-space:nowrap;
  padding:10px 18px; border-radius:var(--radius-pill); font-family:var(--font-body);
  font-size:14px; font-weight:700; color:var(--ink-soft); background:transparent;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sa-region:hover { color:var(--ink); }
.sa-region.is-active { background:var(--cyan); color:var(--cyan-ink);
  box-shadow:0 1px 2px rgba(22,25,29,0.06), 0 6px 14px -8px rgba(34,188,232,0.7); }

/* ── Stage (where cities appear) ── */
.sa__stage { margin-top:22px; min-height:132px; }

/* prompt: calm zero-state (unreachable in this build -- one region is
   always active by default, see widget.js) */
.sa__prompt { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; min-height:132px; text-align:center; color:var(--mute); }
.sa__prompt svg { color:var(--silver-2); }
.sa__prompt p { margin:0; font-size:15px; color:var(--ink-soft); }
.sa__prompt[hidden], .sa__empty[hidden] { display:none; }

/* region group of chips */
.sa-group[hidden] { display:none; }
.sa-group + .sa-group { margin-top:22px; }
.sa-group__head { width:100%; display:flex; align-items:center; gap:12px; padding:0; margin:0;
  background:transparent; border:0; text-align:left; font-family:inherit; color:inherit;
  cursor:default; pointer-events:none; }
.sa-group__name { font:800 14px/1 var(--font-display); letter-spacing:-0.01em; color:var(--ink);
  margin:0 0 13px; display:none; }             /* shown only in search results + mobile accordion */
.sa.show-heads .sa-group__name { display:block; }
.sa-group__chev { margin-left:auto; color:var(--mute); flex:none; display:none;
  transition:transform var(--dur) var(--ease); }
.sa-group__body { display:grid; grid-template-rows:1fr; }
.sa-group__inner { overflow:hidden; }
.sa-group__chips { display:flex; flex-wrap:wrap; gap:9px; }

/* chips */
.sa-city { display:inline-flex; align-items:center; padding:10px 17px; border-radius:var(--radius-pill);
  background:var(--chrome-hi); border:1px solid var(--line); color:var(--ink); font-size:14px;
  font-weight:600; text-decoration:none; white-space:nowrap;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sa-city[hidden] { display:none; }
a.sa-city:hover, a.sa-city:focus-visible { border-color:var(--cyan); color:var(--cyan-deep);
  background:var(--chrome-hi); transform:translateY(-1px); outline:none; }
span.sa-city { cursor:default; }

/* group reveal — the city block fades/slides in as one calm unit.
   Resting opacity is 1, so content is never left hidden if a frame doesn't paint. */
@keyframes sa-fade-in { from { opacity:0.5; transform:translateY(10px); } to { opacity:1; transform:none; } }
.sa-group.reveal { animation:sa-fade-in 420ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .sa-group.reveal { animation:none; } }

/* empty search state */
.sa__empty { padding:26px; text-align:center; font-size:15px; color:var(--ink-soft); }
.sa__empty a { font-weight:700; color:var(--cyan-deep); }

/* ── Footer ── */
.sa__foot { margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:flex-end; gap:16px; flex-wrap:wrap; }
.sa__all { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px;
  color:var(--cyan-deep); text-decoration:none; }
.sa__all svg { transition:transform var(--dur) var(--ease); }
.sa__all:hover svg { transform:translateX(4px); }
.sa__phone { font-size:14px; color:var(--mute); text-decoration:none; }
.sa__phone b { color:var(--ink); font-weight:700; }

/* ══ CONTAINER-QUERY RESPONSIVE ══ */
@container sa (max-width: 720px) {
  .sa__panel { padding:24px 22px; }
  .sa__regions { flex-wrap:nowrap; overflow-x:auto; width:100%; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .sa__regions::-webkit-scrollbar { display:none; }
  .sa-region { flex:none; }
}
@container sa (max-width: 480px) {
  .sa__panel { padding:22px 18px; border-radius:var(--radius-md); }
  .sa__input { height:50px; font-size:15.5px; }

  /* pills + prompt give way to a stacked region accordion */
  .sa__regions, .sa__prompt { display:none; }
  .sa__stage { margin-top:8px; min-height:0; }
  .sa-group { margin:0; border-top:1px solid var(--line); }
  .sa-group + .sa-group { margin-top:0; }
  .sa-group:last-of-type { border-bottom:1px solid var(--line); }
  .sa-group__head { cursor:pointer; pointer-events:auto; padding:17px 2px; min-height:58px; }
  .sa-group__name { display:block !important; margin:0; font-size:15px; }
  .sa-group__chev { display:block; }
  .sa-group.is-open .sa-group__chev { transform:rotate(180deg); }
  .sa-group__body { grid-template-rows:0fr; transition:grid-template-rows var(--dur) var(--ease); }
  .sa-group.is-open .sa-group__body { grid-template-rows:1fr; }
  .sa-group__inner { padding-bottom:2px; }
  .sa-group.is-open .sa-group__inner { padding-bottom:18px; }
  /* on mobile the block animation is handled by the accordion itself */
  .sa-group.reveal { animation:none; }
}


/* ============================================================
   SGP Hero Section — INSTALLATION VARIANT (.sgp-hi)  v0.8.3-poc
   Scoped adaptation of the approved Drywall-Installation-Hero-
   Handoff hero.css. All rules namespaced under .sgp-hi. Palette
   lives on the root node (not :root) per handoff note 5.
   Translucent spec-table fill + blur is REFERENCE-SPECIFIED
   (sits on the hero's own opaque graphite, not a photo bg).
   ============================================================ */
.sgp-hi{
  --hi-accent:#22BCE8; --hi-cyan-deep:#1490B7; --hi-cyan-light:#7FDDF6; --hi-glow:rgba(34,188,232,.30);
  --hi-graphite:#0A0F15; --hi-slate:#1A2530; --hi-slate2:#26323D;
  --hi-silver-lt:#EAEEF1; --hi-silver-md:#97A3AD; --hi-silver-dk:#5C6772;
  --hi-font-body:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --hi-font-mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  position:relative; min-height:100vh; overflow:hidden;
  padding:clamp(28px,4vw,52px);
  background:var(--hi-graphite) !important;
  color:var(--hi-silver-lt);
  font-family:var(--hi-font-body);
}
.sgp-hi *{box-sizing:border-box;}
.sgp-hi img{display:block;max-width:100%;height:auto;}
.sgp-hi__halo,.sgp-hi__seams,.sgp-hi__fast,.sgp-hi__vig,.sgp-hi__stencil,.sgp-hi__frame{position:absolute;inset:0;pointer-events:none;}
.sgp-hi__vig{background:radial-gradient(120% 100% at 50% 36%, transparent 52%, rgba(0,0,0,.55) 100%);}
.sgp-hi__fast{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='58'%3E%3Cg fill='none' stroke='%237FA8C0' stroke-opacity='0.13'%3E%3Ccircle cx='43' cy='29' r='3.3' stroke-width='1'/%3E%3Cpath d='M43 25v8M39 29h8' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:86px 58px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.sgp-hi__seams{background-image:
  repeating-linear-gradient(90deg, transparent 0, transparent 343px, rgba(150,180,200,.055) 343px, rgba(150,180,200,.055) 345px),
  repeating-linear-gradient(0deg, transparent 0, transparent 467px, rgba(150,180,200,.05) 467px, rgba(150,180,200,.05) 469px);}
.sgp-hi__halo{background:
  radial-gradient(620px 380px at 33% 4%, rgba(34,188,232,.13), transparent 60%),
  radial-gradient(820px 560px at 84% 70%, rgba(34,188,232,.045), transparent 64%);}
.sgp-hi__stencil{display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(20px,3vw,40px);}
.sgp-hi__stencil span{font-family:var(--hi-font-mono);font-size:clamp(11px,1.4vw,15px);letter-spacing:.42em;text-transform:uppercase;color:rgba(150,180,200,.07);white-space:nowrap;}
.sgp-hi__frame{inset:clamp(14px,2vw,26px);border:1px solid rgba(150,180,200,.12);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.sgp-hi__frame::before,.sgp-hi__frame::after{content:"";position:absolute;width:14px;height:14px;border:1px solid rgba(30,183,226,.4);}
.sgp-hi__frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:4px 0 0 0;}
.sgp-hi__frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 4px 0;}
.sgp-hi__inner{position:relative;z-index:3;max-width:1300px;margin:0 auto;min-height:calc(100vh - clamp(56px,8vw,104px));
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(20px,3vw,40px) clamp(8px,2vw,30px);}
.sgp-hi__eyebrow{font-family:var(--hi-font-mono);font-size:clamp(12px,1.4vw,15px);letter-spacing:.26em;text-transform:uppercase;color:var(--hi-cyan-light) !important;}
.sgp-hi__h1{font-family:var(--hi-font-body);font-size:clamp(2.5rem,5.4vw,4.6rem);font-weight:800;letter-spacing:-.04em;line-height:.98;color:#fff !important;margin:24px 0 0;}
.sgp-hi__cy{color:var(--hi-accent) !important;}
.sgp-hi__subline{font-size:clamp(1.35rem,2.6vw,2.15rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:14px 0 0;color:#fff !important;}
.sgp-hi__process{display:flex;align-items:flex-start;gap:0;margin:clamp(30px,4vw,40px) 0 0;flex-wrap:wrap;}
.sgp-hi__step{display:flex;flex-direction:column;align-items:center;gap:11px;min-width:64px;}
.sgp-hi__node{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1B2530,#10161D);border:1px solid var(--hi-slate2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.4);}
.sgp-hi__node svg{width:24px;height:24px;max-width:24px;max-height:24px;color:var(--hi-cyan-light) !important;}
.sgp-hi__lb{font-family:var(--hi-font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff !important;}
.sgp-hi__arrow{flex:1;min-width:34px;max-width:90px;height:54px;display:flex;align-items:center;padding:0 4px;}
.sgp-hi__ln{height:2px;width:100%;background:linear-gradient(90deg,var(--hi-cyan-deep),var(--hi-accent));position:relative;border-radius:2px;}
.sgp-hi__ln::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid var(--hi-accent);border-right:2px solid var(--hi-accent);transform:rotate(45deg);}
.sgp-hi__lede{color:var(--hi-silver-md);font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.6;margin:clamp(26px,3.5vw,36px) 0 0;max-width:46ch;}
.sgp-hi__ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
.sgp-hi__btn{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.02rem;padding:17px 26px;border-radius:12px;text-decoration:none;transition:transform .18s, box-shadow .18s, background .18s;}
.sgp-hi__btn svg{width:20px;height:20px;max-width:20px;max-height:20px;}
.sgp-hi__btn--cy{background:var(--hi-accent) !important;color:#06222C !important;box-shadow:0 10px 28px var(--hi-glow);}
.sgp-hi__btn--cy:hover{transform:translateY(-1px);box-shadow:0 14px 34px var(--hi-glow);color:#06222C !important;}
.sgp-hi__btn--ghost{border:1px solid var(--hi-slate2);color:#fff !important;background:rgba(255,255,255,.03);}
.sgp-hi__btn--ghost:hover{background:rgba(255,255,255,.07);color:#fff !important;}
.sgp-hi__right{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,4vw,48px);min-height:100%;}
.sgp-hi__brand{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,40px) 0;}
.sgp-hi__glow{position:absolute;width:min(540px,90%);height:280px;left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(34,188,232,.16), transparent 66%);filter:blur(10px);}
.sgp-hi__patch{position:absolute;width:min(520px,86%);aspect-ratio:1.7/1;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px dashed rgba(127,168,192,.18);border-radius:10px;}
.sgp-hi__patch::before,.sgp-hi__patch::after{content:"";position:absolute;width:18px;height:18px;border:1.5px solid rgba(30,183,226,.3);}
.sgp-hi__patch::before{top:-9px;left:-9px;border-right:0;border-bottom:0;}
.sgp-hi__patch::after{bottom:-9px;right:-9px;border-left:0;border-top:0;}
.sgp-hi__brand img{position:relative;z-index:2;width:min(460px,84%);filter:drop-shadow(0 16px 38px rgba(0,0,0,.55));}
.sgp-hi__spec{align-self:flex-end;width:min(560px,100%);display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--hi-slate2);border-radius:12px;overflow:hidden;background:rgba(13,19,26,.55);backdrop-filter:blur(4px);}
.sgp-hi__cell{padding:16px 18px;border-right:1px solid var(--hi-slate2);border-bottom:1px solid var(--hi-slate2);}
.sgp-hi__cell:nth-child(3n){border-right:0;}
.sgp-hi__cell:nth-last-child(-n+3){border-bottom:0;}
.sgp-hi__k{font-family:var(--hi-font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--hi-silver-dk);}
.sgp-hi__v{font-size:1.02rem;font-weight:700;color:#fff !important;margin-top:5px;line-height:1.2;}
@media (max-width:920px){
  .sgp-hi__inner{grid-template-columns:1fr;gap:clamp(30px,6vw,46px);}
  .sgp-hi__right{min-height:auto;}
  .sgp-hi__spec{align-self:stretch;}
  .sgp-hi__stencil{padding-bottom:14px;}
}
@media (max-width:520px){
  .sgp-hi__spec{grid-template-columns:repeat(3,1fr);}
  .sgp-hi__v{font-size:.92rem;}
  .sgp-hi__step{min-width:54px;}
  .sgp-hi__node{width:48px;height:48px;}
}
@media (prefers-reduced-motion: reduce){
  .sgp-hi__btn{transition:none;}
  .sgp-hi__btn--cy:hover{transform:none;}
}

/*
 * SGP FIX 2026-07-01 -- Pre-Migration Perfection Pass, Finding 1.
 * The "Project Details" textarea above was losing the exact same
 * specificity tie described in the comment above (the .sgp-section--pad
 * dark-form rule vs this widget's .sgp-cf-csec / .sgp-cf-csec__form
 * override): input[type="..."] fields win outright because the extra
 * [type] attribute selector gives them one more specificity point than
 * the competing rule, but a bare "textarea" element selector does not,
 * so it was tying 2-classes-vs-2-classes and losing on stylesheet load
 * order alone -- exactly like the labels/inputs above until this same
 * chaining technique was applied to them. This repeats the outer
 * ".sgp-cf-csec" class (a deliberate, valid CSS specificity-boost
 * pattern, not a typo) so the textarea rules win outright regardless of
 * load order, without touching the sitewide WPCode rule (which other
 * dark-background form placements, including live 5408, still depend
 * on) and without touching anything else in this file -- including the
 * .sgp-hi Installation Variant hero block above, which is untouched.
 * Rollback: delete this comment and the three rule blocks below it.
 */
.sgp-cf-csec.sgp-cf-csec .sgp-cf-csec__form textarea {
  color: #1a2530 !important;
  background-color: #ffffff !important;
  border-color: rgba(10, 15, 21, 0.18) !important;
}

.sgp-cf-csec.sgp-cf-csec .sgp-cf-csec__form textarea::placeholder {
  color: rgba(26, 37, 48, 0.4) !important;
}

.sgp-cf-csec.sgp-cf-csec .sgp-cf-csec__form textarea:focus {
  outline: 2px solid var(--sgp-cyan) !important;
  outline-offset: 2px;
  border-color: var(--sgp-cyan) !important;
}

/*
 * SGP FIX 2026-07-01 (round 2) -- Service Needed dropdown, same bug class
 * as the textarea fix above. The .sgp-cf-csec .sgp-cf-csec__form select
 * rule (grouped with the input/textarea selectors above) ties in
 * specificity with the sitewide .sgp-section--pad dark-form rule's
 * select selector -- both [0,2,1] -- and loses on stylesheet load order,
 * identical mechanism to the textarea bug fixed above. Same fix:
 * repeat .sgp-cf-csec for one extra specificity point so this wins
 * outright regardless of load order. Rollback: delete this comment and
 * the rule block below it.
 */
.sgp-cf-csec.sgp-cf-csec .sgp-cf-csec__form select {
  color: #1a2530 !important;
  background-color: #ffffff !important;
  border-color: rgba(10, 15, 21, 0.18) !important;
}

.sgp-cf-csec.sgp-cf-csec .sgp-cf-csec__form select:focus {
  outline: 2px solid var(--sgp-cyan) !important;
  outline-offset: 2px;
  border-color: var(--sgp-cyan) !important;
}

/* --- Audit #1 fix (D.3): service <select> placeholder clipping on narrow phones ---
   Stack the half-width WPForms fields full-width and trim the dropdown-arrow
   padding at phone widths so the full "Select a service" text stays visible.
   Added 2026-07-02. */
@media (max-width: 600px) {
	.sgp-cf-csec .sgp-cf-csec__form .wpforms-field.wpforms-one-half {
		width: 100% !important;
		margin-left: 0 !important;
	}
	.sgp-cf-csec .sgp-cf-csec__form select {
		padding-right: 28px !important;
		text-overflow: ellipsis;
	}
}