/*
 * SRG Design System v0.6 — Smart Repair Guy
 *
 * Opt-in: rules only match inside Elementor sections carrying the class
 * "srg-ds" (plus header/footer rules scoped to body.srg-ds-page, which the
 * plugin adds only on those pages). Anything set in the Elementor panel on
 * a widget overrides these defaults, so layouts stay editable.
 *
 * Colours read Elementor Site Settings → Global Colors ("SRG …") first,
 * falling back to the values below. Fonts reuse Catamaran, already loaded
 * by Astra (weights 500 and 800), so no extra font requests.
 * Full reference: docs/DESIGN-SYSTEM.md
 */

/* ---------- 1. Tokens ---------- */
:root {
	--srg-ink: var(--e-global-color-srgink, #111111);
	--srg-ink-2: var(--e-global-color-srgink2, #1c1c1c);
	--srg-gold: var(--e-global-color-srggold, #c9a23a);
	--srg-gold-hover: #d4b04a;
	--srg-gold-light: var(--e-global-color-srggoldl, #e0c25a);
	--srg-gold-dark: var(--e-global-color-srggoldd, #7a5c0e);
	--srg-silver: var(--e-global-color-srgsilv, #d0d2d1);
	--srg-surface: var(--e-global-color-srgsurf, #f6f4ef);
	--srg-white: #ffffff;
	--srg-line: var(--e-global-color-srgline, #e2ded4);
	--srg-text: var(--e-global-color-srgtext, #1a1a1a);
	--srg-muted: var(--e-global-color-srgmuted, #4d4d4d);
	--srg-field-border: #8c8c8c;
	--srg-whatsapp: var(--e-global-color-srgwa, #1a7f45);
	--srg-error: #b3261e;

	--srg-font: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif;
	--srg-weight-body: 500;
	--srg-weight-bold: 800;

	--srg-radius-sm: 10px;
	--srg-radius: 14px; /* matches the Kerbside form card */
	--srg-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 12px 32px rgba(17, 17, 17, .08);
	--srg-focus: 0 0 0 3px rgba(201, 162, 58, .45);

	--srg-space-1: 4px;
	--srg-space-2: 8px;
	--srg-space-3: 12px;
	--srg-space-4: 16px;
	--srg-space-5: 24px;
	--srg-space-6: 32px;
	--srg-space-7: 48px;
	--srg-space-8: 72px;

	--srg-tap: 52px; /* minimum height for buttons and fields */
}

/* ---------- 2. Base ---------- */
.srg-ds {
	font-family: var(--srg-font);
	font-weight: var(--srg-weight-body);
	color: var(--srg-text);
	-webkit-font-smoothing: antialiased;
}
.srg-ds .elementor-heading-title,
.srg-ds .elementor-button,
.srg-ds .elementor-icon-list-text,
.srg-ds .elementor-icon-box-title,
.srg-ds .elementor-icon-box-description {
	font-family: var(--srg-font);
}
.srg-ds a:focus-visible,
.srg-ds .elementor-button:focus-visible {
	outline: 3px solid var(--srg-gold-dark);
	outline-offset: 3px;
}
.srg-ds.srg-section--dark a:focus-visible,
.srg-ds.srg-hero a:focus-visible,
.srg-ds.srg-sticky-cta a:focus-visible { outline-color: var(--srg-gold-light); }
.srg-ds .elementor-widget-text-editor a {
	color: var(--srg-gold-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- 3. Section layouts ---------- */
.srg-ds.srg-section {
	padding: var(--srg-space-8) 0;
	background-color: var(--srg-white);
}
.srg-ds.srg-section--surface { background-color: var(--srg-surface); }
.srg-ds.srg-section--dark { background-color: var(--srg-ink); color: var(--srg-silver); }
.srg-ds.srg-section--dark .elementor-heading-title { color: var(--srg-white); }
.srg-ds.srg-section--snug { padding-top: var(--srg-space-7); }
.srg-ds.srg-section--compact { padding: var(--srg-space-6) 0; }
.srg-ds.srg-section--flush-top { padding-top: 0; }
.srg-ds.srg-section--divider { border-top: 1px solid var(--srg-line); }

@media (max-width: 1024px) {
	.srg-ds.srg-section { padding: var(--srg-space-7) 0; }
	.srg-ds.srg-section--snug { padding-top: var(--srg-space-5); }
	.srg-ds.srg-section--compact { padding: var(--srg-space-5) 0; }
	.srg-ds.srg-section--flush-top { padding-top: 0; }
	.srg-ds.srg-section > .elementor-container { padding-left: var(--srg-space-4); padding-right: var(--srg-space-4); }
}
@media (max-width: 767px) {
	.srg-ds.srg-section { padding: var(--srg-space-6) 0; }
	.srg-ds.srg-section--snug { padding-top: var(--srg-space-4); }
	.srg-ds.srg-section--compact { padding: var(--srg-space-5) 0; }
	.srg-ds.srg-section--flush-top { padding-top: 0; }
	.srg-ds.srg-section > .elementor-container { padding-left: var(--srg-space-2); padding-right: var(--srg-space-2); }
}

/* Photographic hero with dark overlay (section background image + overlay set in Elementor). */
.srg-ds.srg-hero { padding: 88px 0 80px; background-color: var(--srg-ink); color: var(--srg-silver); }
.srg-ds.srg-hero .elementor-heading-title { color: var(--srg-white); }
.srg-ds.srg-hero > .elementor-container > .elementor-column > .elementor-widget-wrap { max-width: 640px; }
.srg-ds.srg-hero .srg-lead,
.srg-ds.srg-hero .srg-lead p { color: rgba(255, 255, 255, .92); }
@media (max-width: 1024px) {
	.srg-ds.srg-hero { padding: 56px 0 48px; }
}
@media (max-width: 767px) {
	/* Short on phones so the form is reached quickly; flatter, darker overlay for legibility. */
	.srg-ds.srg-hero { padding: 28px 0 24px; }
	.srg-ds.srg-hero > .elementor-background-overlay {
		background-image: none !important;
		background-color: rgba(17, 17, 17, .8) !important;
		opacity: 1 !important;
	}
}

/* ---------- 4. Typography ---------- */
.srg-ds .srg-eyebrow .elementor-heading-title {
	font-size: .8125rem;
	font-weight: var(--srg-weight-bold);
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--srg-gold-dark);
}
.srg-ds.srg-section--dark .srg-eyebrow .elementor-heading-title,
.srg-ds.srg-hero .srg-eyebrow .elementor-heading-title { color: var(--srg-white); }
/* Gold dash before the eyebrow, as in the reference design. */
.srg-ds .srg-eyebrow--dash .elementor-heading-title { display: inline-flex; align-items: center; gap: 14px; }
.srg-ds .srg-eyebrow--dash .elementor-heading-title::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--srg-gold);
	flex: 0 0 auto;
}
.srg-ds .elementor-widget.srg-eyebrow { margin-bottom: var(--srg-space-4); }

/* Sentence case for readability (Astra's saved heading styles uppercase some levels). */
.srg-ds .srg-display .elementor-heading-title,
.srg-ds .srg-h1 .elementor-heading-title,
.srg-ds .srg-h2 .elementor-heading-title,
.srg-ds .srg-h3 .elementor-heading-title { text-transform: none; }
.srg-ds .srg-display .elementor-heading-title {
	font-size: clamp(2.25rem, 1.2rem + 4vw, 4rem);
	font-weight: var(--srg-weight-bold);
	line-height: 1.02;
	letter-spacing: -.02em;
}
.srg-ds .srg-h1 .elementor-heading-title {
	font-size: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
	font-weight: var(--srg-weight-bold);
	line-height: 1.08;
	letter-spacing: -.01em;
}
.srg-ds .srg-h2 .elementor-heading-title {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: var(--srg-weight-bold);
	line-height: 1.12;
	letter-spacing: -.01em;
}
.srg-ds .srg-h3 .elementor-heading-title {
	font-size: 1.25rem;
	font-weight: var(--srg-weight-bold);
	line-height: 1.25;
}
/* Restrained gold emphasis inside a heading: <span class="srg-accent">…</span> */
.srg-ds .srg-accent { color: var(--srg-gold-dark); }
.srg-ds.srg-section--dark .srg-accent,
.srg-ds.srg-hero .srg-accent { color: var(--srg-gold); }
.srg-ds .elementor-widget.srg-display,
.srg-ds .elementor-widget.srg-h1,
.srg-ds .elementor-widget.srg-h2 { margin-bottom: var(--srg-space-4); }
.srg-ds .elementor-widget.srg-h3 { margin-bottom: var(--srg-space-3); }

.srg-ds .srg-lead,
.srg-ds .srg-lead p {
	font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
	line-height: 1.5;
	color: var(--srg-muted);
}
.srg-ds.srg-section--dark .srg-lead,
.srg-ds.srg-section--dark .srg-lead p { color: var(--srg-silver); }
.srg-ds .srg-body,
.srg-ds .srg-body p { font-size: 1.0625rem; line-height: 1.65; color: var(--srg-muted); }
.srg-ds .srg-lead p:last-child,
.srg-ds .srg-body p:last-child,
.srg-ds .srg-small p:last-child { margin-bottom: 0; }
.srg-ds .srg-small,
.srg-ds .srg-small p { font-size: .9375rem; line-height: 1.5; color: var(--srg-muted); }

/* ---------- 5. Buttons ---------- */
.srg-ds .srg-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--srg-space-2);
	min-height: var(--srg-tap);
	padding: 14px 24px;
	border-radius: var(--srg-radius-sm);
	border: 2px solid transparent;
	font-size: 1.0625rem;
	font-weight: var(--srg-weight-bold);
	line-height: 1.2;
	letter-spacing: .01em;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.srg-ds .srg-btn .elementor-button-content-wrapper { gap: var(--srg-space-2); align-items: center; }
.srg-ds .srg-btn .elementor-button-icon { font-size: 1.1em; }
.srg-ds .srg-btn .elementor-button-icon svg { width: 1.1em; height: 1.1em; }
.srg-ds .srg-btn--primary .elementor-button { background-color: var(--srg-gold); color: var(--srg-ink); }
.srg-ds .srg-btn--primary .elementor-button:hover,
.srg-ds .srg-btn--primary .elementor-button:focus { background-color: var(--srg-gold-hover); color: var(--srg-ink); }
.srg-ds .srg-btn--primary .elementor-button svg { fill: var(--srg-ink); }
.srg-ds .srg-btn--secondary .elementor-button { background-color: transparent; border-color: var(--srg-ink); color: var(--srg-ink); }
.srg-ds .srg-btn--secondary .elementor-button:hover,
.srg-ds .srg-btn--secondary .elementor-button:focus { background-color: var(--srg-ink); color: var(--srg-white); }
.srg-ds.srg-section--dark .srg-btn--secondary .elementor-button { border-color: var(--srg-silver); color: var(--srg-white); }

/* ---------- 6. Cards ---------- */
.srg-ds .elementor-column.srg-card > .elementor-widget-wrap {
	background-color: var(--srg-white);
	border: 1px solid var(--srg-line);
	border-radius: var(--srg-radius);
	box-shadow: var(--srg-shadow);
	padding: var(--srg-space-6);
}
@media (max-width: 767px) {
	.srg-ds .elementor-column.srg-card > .elementor-widget-wrap { padding: var(--srg-space-5) var(--srg-space-4); }
}

/* Embedded form card (Kerbside): the form draws its own white card, heading and fields
 * (in embed mode it has no border/shadow); this frame adds them, so it reads as one card.
 * Put "srg-embed" on the HTML widget that holds the embed code. */
.srg-ds .srg-embed {
	width: 100%;
	max-width: 620px; /* Kerbside's card max-width: no side gutters inside the frame */
	background: var(--srg-white);
	border: 1px solid var(--srg-line);
	border-radius: var(--srg-radius);
	box-shadow: var(--srg-shadow);
	overflow: hidden;
}
.srg-ds .srg-embed--end { margin-left: auto; }
.srg-ds .srg-embed iframe {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important; /* the form reports its height; lets it shrink after sending */
	height: 720px;            /* initial/fallback height until the form reports its own */
	border: 0;
	background: transparent;
}
.srg-ds .srg-embed .elementor-widget-container { margin: 0; padding: 0; }
@media (max-width: 1024px) {
	.srg-ds .srg-embed,
	.srg-ds .srg-embed--end { max-width: 620px; margin-left: auto; margin-right: auto; }
}

/* ---------- 7. Steps (Icon Box widgets, numbers from a CSS counter) ----------
 * Column class "srg-steps-group"; each Icon Box widget class "srg-step" with no icon. */
.srg-ds .srg-steps-group > .elementor-widget-wrap { counter-reset: srg-step; }
.srg-ds .srg-step { counter-increment: srg-step; }
.srg-ds .srg-step .elementor-icon-box-wrapper {
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: var(--srg-space-5);
	align-items: start;
	text-align: left;
}
.srg-ds .srg-step .elementor-icon-box-wrapper::before {
	content: counter(srg-step);
	width: 44px;
	height: 44px;
	border: 2px solid var(--srg-gold);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--srg-font);
	font-weight: var(--srg-weight-bold);
	font-size: 1.125rem;
	color: var(--srg-gold-dark);
	line-height: 1;
}
.srg-ds .srg-step .elementor-icon-box-icon { display: none; }
.srg-ds .srg-step .elementor-icon-box-content { grid-column: 2; }
.srg-ds .srg-step .elementor-icon-box-title { margin: 6px 0 4px; font-size: 1.25rem; font-weight: var(--srg-weight-bold); line-height: 1.25; color: var(--srg-text); }
.srg-ds .srg-step .elementor-icon-box-title a { color: inherit; }
.srg-ds .srg-step .elementor-icon-box-description { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--srg-muted); }
.srg-ds .elementor-widget.srg-step { margin-bottom: var(--srg-space-5); }

/* ---------- 8. Lists ---------- */
.srg-ds .srg-checklist .elementor-icon-list-item { align-items: flex-start; padding-bottom: var(--srg-space-3); }
.srg-ds .srg-checklist .elementor-icon-list-icon { padding-top: .2em; }
.srg-ds .srg-checklist .elementor-icon-list-icon i { color: var(--srg-gold-dark); width: 1.4em; font-size: 1em; }
.srg-ds .srg-checklist .elementor-icon-list-icon svg { fill: var(--srg-gold-dark); width: 1em; }
.srg-ds .srg-checklist .elementor-icon-list-text { font-size: 1.0625rem; line-height: 1.5; color: var(--srg-text); }

/* Hero location line. */
.srg-ds .srg-meta .elementor-icon-list-icon i { color: var(--srg-gold); }
.srg-ds .srg-meta .elementor-icon-list-text { font-size: 1.0625rem; color: rgba(255, 255, 255, .92); }

/* Discreet secondary contact links (Icon List, layout "Inline"). */
.srg-ds .srg-contact-inline .elementor-icon-list-items { gap: var(--srg-space-2) var(--srg-space-6); }
.srg-ds .srg-contact-inline .elementor-icon-list-item { margin: 0 !important; }
.srg-ds .srg-contact-inline .elementor-icon-list-item::after { display: none !important; }
.srg-ds .srg-contact-inline .elementor-icon-list-icon i { color: var(--srg-gold-dark); width: 1.3em; }
.srg-ds .srg-contact-inline .elementor-icon-list-text { font-size: 1.0625rem; color: var(--srg-text); }
.srg-ds .srg-contact-inline a .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(122, 92, 14, .45); }
.srg-ds .srg-contact-inline a:hover .elementor-icon-list-text { color: var(--srg-gold-dark); }
@media (max-width: 767px) {
	.srg-ds .srg-contact-inline .elementor-icon-list-items { flex-direction: column; align-items: flex-start; }
	.srg-ds .srg-contact-inline .elementor-icon-list-item a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- 9. Photos ---------- */
.srg-ds .srg-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--srg-radius);
	display: block;
}
.srg-ds .srg-photo .widget-image-caption { font-size: .875rem; color: var(--srg-muted); margin-top: var(--srg-space-2); text-align: left; }
/* Row of small photos: inner section with "srg-tiles"; image widgets "srg-tile". */
.srg-ds .srg-tiles > .elementor-container { gap: var(--srg-space-3); }
.srg-ds .srg-tiles .elementor-column > .elementor-widget-wrap { padding: 0 !important; }
.srg-ds .srg-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--srg-radius-sm); display: block; }
@media (max-width: 767px) {
	.srg-ds .srg-tiles > .elementor-container { gap: var(--srg-space-2); flex-wrap: nowrap; }
}

/* ---------- 10. Quote form (WPForms classic markup; "srg-form" on the shortcode widget) ---------- */
.srg-ds .srg-form .wpforms-container { margin: 0; }
.srg-ds .srg-form .wpforms-field { padding: 0 0 20px; }
.srg-ds .srg-form .wpforms-field-label { font-size: 1rem; font-weight: var(--srg-weight-bold); color: var(--srg-text); margin-bottom: 6px; line-height: 1.35; }
.srg-ds .srg-form .wpforms-required-label { color: var(--srg-gold-dark); }
.srg-ds .srg-form .wpforms-field input[type="text"],
.srg-ds .srg-form .wpforms-field input[type="email"],
.srg-ds .srg-form .wpforms-field input[type="tel"],
.srg-ds .srg-form .wpforms-field select,
.srg-ds .srg-form .wpforms-field textarea {
	width: 100%;
	max-width: 100%;
	min-height: var(--srg-tap);
	padding: 12px 14px;
	font-family: var(--srg-font);
	font-size: 16px;
	color: var(--srg-text);
	background-color: var(--srg-white);
	border: 1.5px solid var(--srg-field-border);
	border-radius: var(--srg-radius-sm);
}
.srg-ds .srg-form .wpforms-field input:focus,
.srg-ds .srg-form .wpforms-field textarea:focus { outline: none; border-color: var(--srg-gold-dark); box-shadow: var(--srg-focus); }
.srg-ds .srg-form .wpforms-field-medium,
.srg-ds .srg-form .wpforms-field-small,
.srg-ds .srg-form .wpforms-field-large { max-width: 100% !important; }
.srg-ds .srg-form button.wpforms-submit {
	width: 100%;
	min-height: 56px;
	font-family: var(--srg-font);
	font-size: 1.125rem;
	font-weight: var(--srg-weight-bold);
	color: var(--srg-ink);
	background-color: var(--srg-gold);
	border: 0;
	border-radius: var(--srg-radius-sm);
}

/* ---------- 11. Phone "Request a quote" bar ----------
 * Section "srg-ds srg-sticky-cta" with one primary button; Hide on desktop/tablet in Elementor.
 * Revealed by srg-design-system.js once the form is scrolled past. */
@media (max-width: 767px) {
	.srg-ds.srg-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: rgba(17, 17, 17, .96);
		border-top: 1px solid rgba(224, 194, 90, .35);
		transform: translateY(110%);
		transition: transform .2s ease;
	}
	.srg-ds.srg-sticky-cta.is-visible { transform: none; }
	.srg-ds.srg-sticky-cta > .elementor-container { padding: 0; }
	.srg-ds.srg-sticky-cta .elementor-widget-wrap { padding: 0 !important; }
	.srg-ds.srg-sticky-cta .elementor-widget { margin: 0 !important; }
	.srg-ds.srg-sticky-cta .srg-btn .elementor-button { width: 100%; min-height: 50px; }
	body.srg-ds-page:has(.srg-sticky-cta) .site-footer { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
	.srg-ds.srg-sticky-cta { transition: none; }
}

/* ---------- 12. Header and footer (Astra builder; options set by the plugin on these pages) ----------
 * Rollout equivalents for Astra Customizer are listed in docs/DESIGN-SYSTEM.md. */
body.srg-ds-page .ast-primary-header-bar,
body.srg-ds-page .ast-mobile-header-wrap .ast-primary-header-bar,
body.srg-ds-page #masthead .ast-builder-grid-row-container {
	background: var(--srg-ink);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Brand: mask mark + wordmark. */
body.srg-ds-page .site-header .ast-site-identity { padding: 0; }
body.srg-ds-page .site-header .site-logo-img { padding-right: 12px; }
body.srg-ds-page .site-header .custom-logo-link img { height: auto; max-height: 40px; width: auto; }
body.srg-ds-page .site-header .site-title,
body.srg-ds-page .site-header .site-title a {
	font-family: var(--srg-font);
	font-weight: var(--srg-weight-bold);
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: 1;
	color: var(--srg-white);
	margin: 0;
}
body.srg-ds-page .site-header .site-title a { position: relative; display: inline-block; padding-bottom: 8px; }
body.srg-ds-page .site-header .site-title a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: var(--srg-gold);
}
body.srg-ds-page .srg-title-accent { color: var(--srg-gold-light); }

body.srg-ds-page .main-header-menu > .menu-item > .menu-link {
	color: var(--srg-white);
	font-family: var(--srg-font);
	font-weight: var(--srg-weight-bold);
	font-size: 1rem;
}
body.srg-ds-page .main-header-menu > .menu-item:hover > .menu-link,
body.srg-ds-page .main-header-menu > .menu-item > .menu-link:focus,
body.srg-ds-page .main-header-menu > .current-menu-item > .menu-link,
body.srg-ds-page .main-header-menu > .current-menu-ancestor > .menu-link { color: var(--srg-gold-light); }
body.srg-ds-page .main-header-menu .sub-menu { background: var(--srg-ink-2); border-top: 2px solid var(--srg-gold); }
body.srg-ds-page .main-header-menu .sub-menu .menu-link { color: var(--srg-silver); }
body.srg-ds-page .main-header-menu .sub-menu .menu-item:hover > .menu-link { color: var(--srg-gold-light); background: transparent; }
body.srg-ds-page .main-header-menu .menu-item .ast-menu-toggle,
body.srg-ds-page .main-header-menu .dropdown-menu-toggle { color: inherit; }

/* Mobile: menu toggle and dropdown. */
body.srg-ds-page [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--srg-white);
	background: transparent;
	border: 0;
}
body.srg-ds-page [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg,
body.srg-ds-page [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle svg { fill: var(--srg-white); }
body.srg-ds-page .ast-mobile-header-content,
body.srg-ds-page .ast-mobile-header-wrap .ast-mobile-header-content { background: var(--srg-ink-2); }
body.srg-ds-page .ast-mobile-header-content .menu-link,
body.srg-ds-page .ast-mobile-header-content .menu-item > .ast-menu-toggle { color: var(--srg-white); border-color: rgba(255, 255, 255, .08); }
@media (max-width: 921px) {
	body.srg-ds-page .site-header .custom-logo-link img { max-height: 32px; }
	body.srg-ds-page .site-header .site-title a { padding-bottom: 6px; }
}

/* Compact footer. */
body.srg-ds-page .site-footer,
body.srg-ds-page .site-footer .site-above-footer-wrap,
body.srg-ds-page .site-footer .site-primary-footer-wrap,
body.srg-ds-page .site-footer .site-below-footer-wrap {
	background: var(--srg-ink);
	background-image: none;
	color: var(--srg-silver);
}
body.srg-ds-page .site-footer .site-primary-footer-wrap { padding-top: 36px; padding-bottom: 28px; }
body.srg-ds-page .site-footer .site-below-footer-wrap { padding-top: 14px; padding-bottom: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
body.srg-ds-page .site-footer .site-footer-section { align-items: center; }
body.srg-ds-page .site-footer .ast-footer-html-1 p,
body.srg-ds-page .site-footer .ast-footer-html-2 p { margin: 0; }
body.srg-ds-page .srg-footer-brand {
	font-family: var(--srg-font);
	font-weight: var(--srg-weight-bold);
	font-size: 1.125rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--srg-white);
}
body.srg-ds-page .srg-footer-brand span { color: var(--srg-gold-light); }
body.srg-ds-page .srg-footer-area { margin-top: 4px !important; font-size: .9375rem; color: var(--srg-silver); }
body.srg-ds-page .srg-footer-contact { font-size: .9375rem; line-height: 1.8; color: var(--srg-silver); }
body.srg-ds-page .site-footer .srg-footer-contact a { color: var(--srg-silver); text-decoration: none; }
body.srg-ds-page .site-footer .srg-footer-contact a:hover { color: var(--srg-gold-light); text-decoration: underline; }
body.srg-ds-page .site-footer .footer-nav-wrap .menu-link { color: var(--srg-white); font-weight: var(--srg-weight-bold); font-size: .9375rem; }
body.srg-ds-page .site-footer .footer-nav-wrap .menu-link:hover { color: var(--srg-gold-light); }
body.srg-ds-page .site-footer .ast-footer-copyright,
body.srg-ds-page .site-footer .ast-footer-copyright p { font-size: .875rem; color: rgba(208, 210, 209, .75); margin: 0; }
@media (max-width: 921px) {
	body.srg-ds-page .site-footer .site-footer-section { text-align: center; justify-content: center; margin-bottom: 16px; }
	body.srg-ds-page .site-footer .site-primary-footer-wrap { padding-top: 28px; padding-bottom: 12px; }
}

/* ---------- 13. Refinements (v0.2 review) ---------- */
/* Hero: compact on desktop/tablet too. */
.srg-ds.srg-hero { padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 1024px) { .srg-ds.srg-hero { padding-top: 44px; padding-bottom: 40px; } }
@media (max-width: 767px) { .srg-ds.srg-hero { padding-top: 28px; padding-bottom: 24px; } }
/* Step titles in sentence case; space between intro and steps. */
.srg-ds .srg-step .elementor-icon-box-title { text-transform: none; letter-spacing: 0; }
.srg-ds .srg-steps-group .elementor-widget.srg-lead { margin-bottom: var(--srg-space-6); }
/* Icon sizes in lists (Elementor's default can collapse to a dot). */
.srg-ds .srg-contact-inline .elementor-icon-list-icon i,
.srg-ds .srg-checklist .elementor-icon-list-icon i,
.srg-ds .srg-meta .elementor-icon-list-icon i { font-size: 1.05rem; line-height: 1; }
.srg-ds .srg-contact-inline .elementor-icon-list-icon,
.srg-ds .srg-meta .elementor-icon-list-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; }
/* Footer copyright row: no leftover minimum height. */
body.srg-ds-page .site-footer .site-below-footer-wrap,
body.srg-ds-page .site-footer .site-below-footer-wrap .ast-builder-grid-row { min-height: 0; }
.srg-ds .srg-contact-inline .elementor-icon-list-icon i,
.srg-ds .srg-meta .elementor-icon-list-icon i { text-align: center; width: 100%; }
/* Photo row: always one row of equal tiles (gap included in the width). */
.srg-ds .srg-tiles > .elementor-container { flex-wrap: nowrap; }
.srg-ds .srg-tiles > .elementor-container > .elementor-column { flex: 1 1 0; width: auto; min-width: 0; }
@media (min-width: 768px) and (max-width: 1024px) {
	.srg-ds .srg-tiles > .elementor-container { max-width: 620px; }
}

/* ---------- 14. Homepage components (v0.3) ----------
 * Additive: new class names only, so existing pages are unchanged. */

/* Section intro (eyebrow + heading + lead), optionally centred: column class "srg-intro--center". */
.srg-ds .srg-intro--center > .elementor-widget-wrap { text-align: center; justify-content: center; }
.srg-ds .srg-intro--center .elementor-widget { width: 100%; }
.srg-ds .srg-intro--center .elementor-widget.elementor-widget__width-auto { width: auto; }
.srg-ds .srg-intro--center .srg-lead > .elementor-widget-container { max-width: 640px; margin-left: auto; margin-right: auto; }
.srg-ds .srg-intro--center .srg-eyebrow--dash .elementor-heading-title::after {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--srg-gold);
	flex: 0 0 auto;
}

/* Buttons side by side: set the Button widgets' Width to "Inline (auto)". */
.srg-ds .srg-btn.elementor-widget__width-auto { margin-right: var(--srg-space-3); margin-bottom: var(--srg-space-3); }
.srg-ds .srg-btn.elementor-widget__width-auto:last-child { margin-right: 0; }
.srg-ds.srg-hero .srg-btn--secondary .elementor-button,
.srg-ds.srg-section--dark .srg-btn--secondary .elementor-button { background-color: transparent; border-color: rgba(255, 255, 255, .7); color: var(--srg-white); }
.srg-ds.srg-hero .srg-btn--secondary .elementor-button:hover,
.srg-ds.srg-hero .srg-btn--secondary .elementor-button:focus,
.srg-ds.srg-section--dark .srg-btn--secondary .elementor-button:hover,
.srg-ds.srg-section--dark .srg-btn--secondary .elementor-button:focus { background-color: var(--srg-white); border-color: var(--srg-white); color: var(--srg-ink); }
.srg-ds.srg-hero .elementor-widget.srg-lead:has(+ .srg-btn) { margin-bottom: var(--srg-space-6); }
@media (max-width: 767px) {
	.srg-ds.srg-hero .elementor-widget.srg-lead:has(+ .srg-btn) { margin-bottom: var(--srg-space-5); }
	/* Full-width, stacked buttons on phones. */
	.srg-ds .srg-btn.elementor-widget__width-auto { width: 100%; max-width: 100%; margin-right: 0; margin-bottom: var(--srg-space-2); }
	.srg-ds .srg-btn.elementor-widget__width-auto .elementor-button { width: 100%; }
}

/* Service cards: Image Box widget with class "srg-service" (image top, title, description; whole card linked). */
.srg-ds .srg-service { height: 100%; }
.srg-ds .srg-service > .elementor-widget-container { height: 100%; }
.srg-ds .srg-service .elementor-image-box-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	text-align: left;
	background: var(--srg-white);
	border: 1px solid var(--srg-line);
	border-radius: var(--srg-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
	transition: box-shadow .15s ease, transform .15s ease;
}
.srg-ds .srg-service .elementor-image-box-wrapper:hover { box-shadow: var(--srg-shadow); }
.srg-ds .srg-service .elementor-image-box-img { width: 100% !important; margin: 0 !important; }
.srg-ds .srg-service .elementor-image-box-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}
.srg-ds .srg-service--wide .elementor-image-box-img img { aspect-ratio: 16 / 9; }
.srg-ds .srg-service .elementor-image-box-content { padding: var(--srg-space-5); }
.srg-ds .srg-service .elementor-image-box-title {
	margin: 0 0 var(--srg-space-2);
	font-family: var(--srg-font);
	font-size: 1.25rem;
	font-weight: var(--srg-weight-bold);
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
	color: var(--srg-text);
}
.srg-ds .srg-service .elementor-image-box-title a { color: inherit; text-decoration: none; }
/* Arrow after the title shows the card is a link. */
.srg-ds .srg-service .elementor-image-box-title a::after {
	content: "\2192";
	display: inline-block;
	margin-left: 8px;
	color: var(--srg-gold-dark);
	transition: transform .15s ease;
}
.srg-ds .srg-service .elementor-image-box-wrapper:hover .elementor-image-box-title a::after { transform: translateX(3px); }
/* Whole card clickable (the title link stretches over it). */
.srg-ds .srg-service .elementor-image-box-wrapper { position: relative; }
.srg-ds .srg-service .elementor-image-box-title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.srg-ds .srg-service .elementor-image-box-title a:focus-visible { outline: none; }
.srg-ds .srg-service .elementor-image-box-wrapper:focus-within { outline: 3px solid var(--srg-gold-dark); outline-offset: 3px; }
.srg-ds .srg-service .elementor-image-box-description { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--srg-muted); }
/* Card rows: equal heights; consistent gaps. */
.srg-ds .srg-cards > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; }
.srg-ds .srg-cards > .elementor-container { gap: var(--srg-space-5); }
.srg-ds .srg-cards + .srg-cards { margin-top: var(--srg-space-5); }
@media (max-width: 1024px) {
	.srg-ds .srg-cards > .elementor-container { gap: var(--srg-space-4); }
	.srg-ds .srg-cards + .srg-cards { margin-top: var(--srg-space-4); }
}
@media (max-width: 767px) {
	/* Compact rows on phones: photo left, text right. */
	.srg-ds .srg-cards > .elementor-container { gap: var(--srg-space-3); }
	.srg-ds .srg-cards + .srg-cards { margin-top: var(--srg-space-3); }
	.srg-ds .srg-service .elementor-image-box-wrapper { flex-direction: row; align-items: stretch; }
	.srg-ds .srg-service .elementor-image-box-img { width: 112px !important; flex: 0 0 112px; }
	.srg-ds .srg-service .elementor-image-box-img a,
	.srg-ds .srg-service .elementor-image-box-img img { height: 100%; }
	.srg-ds .srg-service .elementor-image-box-img img,
	.srg-ds .srg-service--wide .elementor-image-box-img img { aspect-ratio: auto; min-height: 112px; }
	.srg-ds .srg-service .elementor-image-box-content { padding: var(--srg-space-4); }
	.srg-ds .srg-service .elementor-image-box-title { font-size: 1.125rem; margin-bottom: var(--srg-space-1); }
	.srg-ds .srg-service .elementor-image-box-description { font-size: .9375rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
	.srg-ds .srg-service .elementor-image-box-wrapper,
	.srg-ds .srg-service .elementor-image-box-title a::after { transition: none; }
}

/* Steps in a row: inner section "srg-steps-row", one "srg-step" per column. */
.srg-ds .srg-steps-row > .elementor-container { counter-reset: srg-step; gap: var(--srg-space-6); }
.srg-ds .srg-steps-row > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; }
.srg-ds .srg-steps-row .elementor-widget.srg-step { margin-bottom: 0; }
@media (max-width: 767px) {
	.srg-ds .srg-steps-row > .elementor-container { gap: var(--srg-space-5); }
}
.srg-ds .srg-actions { margin-top: var(--srg-space-6); }

/* Closing call to action on a dark section: discreet secondary contact line. */
.srg-ds.srg-section--dark .srg-small,
.srg-ds.srg-section--dark .srg-small p { color: var(--srg-silver); }
.srg-ds.srg-section--dark .elementor-widget-text-editor a { color: var(--srg-gold-light); }
.srg-ds.srg-section--dark .srg-checklist .elementor-icon-list-text { color: var(--srg-white); }
/* Card and step rows: equal columns with the gap included in the width (desktop and tablet); stacked on phones. */
@media (min-width: 768px) {
	.srg-ds .srg-cards > .elementor-container,
	.srg-ds .srg-steps-row > .elementor-container { flex-wrap: nowrap; }
	.srg-ds .srg-cards > .elementor-container > .elementor-column,
	.srg-ds .srg-steps-row > .elementor-container > .elementor-column { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ---------- 15. Inner pages (v0.4): accordions, price tables, related links ----------
 * Additive: new class names only. */

/* Cards that are not links (e.g. the three repair types on SMART repairs): no hover lift. */
.srg-ds .srg-service--static .elementor-image-box-wrapper:hover { box-shadow: 0 1px 2px rgba(17, 17, 17, .04); }

/* Accordion: Toggle widget with class "srg-accordion" (FAQ answers, detailing levels). */
.srg-ds .srg-accordion .elementor-toggle-item {
	background: var(--srg-white);
	border: 1px solid var(--srg-line);
	border-radius: var(--srg-radius);
	margin: 0 0 var(--srg-space-3) !important;
	overflow: hidden;
}
.srg-ds .srg-accordion .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: var(--srg-space-4);
	margin: 0;
	padding: 18px var(--srg-space-5);
	border: 0 !important;
	cursor: pointer;
	font-family: var(--srg-font);
	font-size: 1.125rem;
	font-weight: var(--srg-weight-bold);
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--srg-text);
}
.srg-ds .srg-accordion .elementor-tab-title .elementor-toggle-title { order: 1; flex: 1 1 auto; color: inherit; text-decoration: none; }
.srg-ds .srg-accordion .elementor-tab-title .elementor-toggle-icon {
	order: 2;
	flex: 0 0 auto;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	color: var(--srg-gold-dark);
	font-size: .9em;
}
.srg-ds .srg-accordion .elementor-tab-title .elementor-toggle-icon i { color: var(--srg-gold-dark); }
.srg-ds .srg-accordion .elementor-tab-title .elementor-toggle-icon svg { fill: var(--srg-gold-dark); width: 1em; }
.srg-ds .srg-accordion .elementor-tab-title:hover,
.srg-ds .srg-accordion .elementor-tab-title.elementor-active { color: var(--srg-gold-dark); }
.srg-ds .srg-accordion .elementor-tab-title:focus-visible,
.srg-ds .srg-accordion .elementor-toggle-title:focus-visible { outline: 3px solid var(--srg-gold-dark); outline-offset: -3px; }
.srg-ds .srg-accordion .elementor-tab-content {
	padding: 0 var(--srg-space-5) var(--srg-space-5);
	border: 0 !important;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--srg-muted);
}
.srg-ds .srg-accordion .elementor-tab-content p { margin: 0 0 var(--srg-space-3); }
.srg-ds .srg-accordion .elementor-tab-content ul { margin: 0 0 var(--srg-space-4) 1.25em; padding: 0; }
.srg-ds .srg-accordion .elementor-tab-content li { margin-bottom: var(--srg-space-2); }
.srg-ds .srg-accordion .elementor-tab-content h4 {
	margin: var(--srg-space-4) 0 var(--srg-space-2);
	font-family: var(--srg-font);
	font-size: .8125rem;
	font-weight: var(--srg-weight-bold);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--srg-gold-dark);
}
.srg-ds .srg-accordion .elementor-tab-content > :last-child { margin-bottom: 0; }
.srg-ds .srg-accordion .elementor-tab-content strong { color: var(--srg-text); }
@media (max-width: 767px) {
	.srg-ds .srg-accordion .elementor-tab-title { padding: 16px; font-size: 1.0625rem; }
	.srg-ds .srg-accordion .elementor-tab-content { padding: 0 16px 16px; font-size: 1rem; }
}

/* Price table: Text Editor widget with class "srg-table" containing a <table>. */
.srg-ds .srg-table { overflow-x: auto; }
.srg-ds .srg-table table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--srg-white);
	border: 1px solid var(--srg-line);
	border-radius: var(--srg-radius);
	overflow: hidden;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}
.srg-ds .srg-table caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 var(--srg-space-2);
	font-weight: var(--srg-weight-bold);
	color: var(--srg-text);
}
.srg-ds .srg-table th,
.srg-ds .srg-table td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--srg-line);
	text-align: center;
	color: var(--srg-text);
}
.srg-ds .srg-table thead th { background: var(--srg-ink); color: var(--srg-white); font-weight: var(--srg-weight-bold); }
.srg-ds .srg-table tbody th { text-align: left; font-weight: var(--srg-weight-bold); background: var(--srg-surface); }
.srg-ds .srg-table tbody tr:last-child th,
.srg-ds .srg-table tbody tr:last-child td { border-bottom: 0; }
.srg-ds .srg-table p { margin: var(--srg-space-2) 0 0; font-size: .9375rem; color: var(--srg-muted); }
@media (max-width: 767px) {
	.srg-ds .srg-table table { font-size: .875rem; }
	.srg-ds .srg-table th,
	.srg-ds .srg-table td { padding: 10px 6px; }
}

/* Related pages as pill links: Icon List (layout Inline) with class "srg-links". */
.srg-ds .srg-links .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: var(--srg-space-2); margin: 0 !important; }
.srg-ds .srg-links .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.srg-ds .srg-links .elementor-icon-list-item::after { display: none !important; }
.srg-ds .srg-links .elementor-icon-list-icon { display: none; }
.srg-ds .srg-links .elementor-icon-list-item a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 18px;
	background: var(--srg-white);
	border: 1px solid var(--srg-line);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color .15s ease;
}
.srg-ds .srg-links .elementor-icon-list-text { font-size: .9375rem; font-weight: var(--srg-weight-bold); color: var(--srg-text); }
.srg-ds .srg-links .elementor-icon-list-item a:hover { border-color: var(--srg-gold-dark); }
.srg-ds .srg-links .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--srg-gold-dark); }

/* Long-form text (service descriptions): readable line length and list spacing. */
.srg-ds .srg-body ul { margin: 0 0 var(--srg-space-4) 1.25em; padding: 0; }
.srg-ds .srg-body li { margin-bottom: var(--srg-space-2); }
.srg-ds .srg-body h3 {
	margin: var(--srg-space-5) 0 var(--srg-space-2);
	font-family: var(--srg-font);
	font-size: 1.25rem;
	font-weight: var(--srg-weight-bold);
	text-transform: none;
	color: var(--srg-text);
}
.srg-ds .srg-measure > .elementor-widget-wrap { max-width: 760px; }
.srg-ds .srg-intro--center.srg-measure > .elementor-widget-wrap { margin-left: auto; margin-right: auto; }

/* ---------- 16. Contact page v3 (v0.5) ----------
 * Additive: new class names only, so existing pages are unchanged.
 *
 * Main section "srg-contact": the form column ("srg-embed-col") comes FIRST in the page,
 * so on phones and tablets it sits directly below the hero and is first in reading and
 * keyboard order. On desktop the columns are shown side by side, form on the right.
 * Columns stay top-aligned at their natural heights (nothing is clipped or stretched). */
.srg-ds.srg-contact > .elementor-container { align-items: flex-start; }
@media (min-width: 1025px) {
	.srg-ds.srg-contact > .elementor-container { flex-direction: row-reverse; justify-content: space-between; }
	.srg-ds.srg-contact > .elementor-container > .elementor-column.srg-embed-col { width: 47%; }
	.srg-ds.srg-contact > .elementor-container > .elementor-column.srg-contact-info { width: 49%; }
	.srg-ds.srg-contact .srg-embed { max-width: 100%; }
	.srg-ds.srg-contact .srg-contact-info > .elementor-widget-wrap { padding-top: var(--srg-space-2); }
}
@media (max-width: 1024px) {
	.srg-ds.srg-contact > .elementor-container { flex-direction: column; align-items: stretch; }
	.srg-ds.srg-contact > .elementor-container > .elementor-column { width: 100%; }
	.srg-ds.srg-contact .srg-contact-info > .elementor-widget-wrap { max-width: 620px; margin: var(--srg-space-7) auto 0; }
}
@media (max-width: 767px) {
	.srg-ds.srg-contact { padding-top: var(--srg-space-4); }
	.srg-ds.srg-contact .srg-contact-info > .elementor-widget-wrap { margin-top: var(--srg-space-6); }
	.srg-ds.srg-contact .srg-embed { border-radius: var(--srg-radius-sm); }
}
/* Phones: the hero stays short so the form starts within the first screen. */
@media (max-width: 767px) {
	.srg-ds.srg-hero--compact { padding-top: 20px; padding-bottom: 20px; }
	.srg-ds.srg-hero--compact .srg-eyebrow { display: none; }
	.srg-ds.srg-hero--compact .elementor-widget.srg-lead { margin-bottom: var(--srg-space-2); }
	.srg-ds.srg-hero--compact .elementor-widget:last-child { margin-bottom: 0; }
}

/* Example photos ("What to photograph"): inner section "srg-examples", two Image widgets
 * "srg-example" with captions "<strong>1. Close-up</strong> Show the damage clearly." */
.srg-ds .srg-examples > .elementor-container { gap: var(--srg-space-4); flex-wrap: nowrap; }
.srg-ds .srg-examples > .elementor-container > .elementor-column { flex: 1 1 0; width: auto; min-width: 0; }
.srg-ds .srg-examples .elementor-column > .elementor-widget-wrap { padding: 0 !important; }
.srg-ds .srg-example figure { margin: 0; }
.srg-ds .srg-example img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--srg-radius-sm);
	background: var(--srg-line);
}
.srg-ds .srg-example .widget-image-caption {
	margin-top: var(--srg-space-2);
	text-align: left;
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--srg-muted);
}
.srg-ds .srg-example .widget-image-caption strong { display: block; color: var(--srg-text); font-weight: var(--srg-weight-bold); font-size: 1rem; }
.srg-ds .elementor-widget.srg-examples-title { margin: var(--srg-space-5) 0 var(--srg-space-3); }
@media (max-width: 359px) {
	.srg-ds .srg-examples > .elementor-container { flex-direction: column; }
}

/* Reviews carousel ([srg_reviews] in a Shortcode widget). */
.srg-ds .srg-reviews { margin-top: var(--srg-space-7); }
.srg-ds .srg-reviews__title {
	margin: 0 0 var(--srg-space-4);
	font-family: var(--srg-font);
	font-size: 1.25rem;
	font-weight: var(--srg-weight-bold);
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
	color: var(--srg-text);
}
.srg-ds .srg-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.srg-ds .srg-carousel__track::-webkit-scrollbar { display: none; }
.srg-ds .srg-carousel__slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.srg-ds .srg-review__card {
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: var(--srg-space-5);
	background: var(--srg-white);
	border: 1px solid var(--srg-line);
	border-radius: var(--srg-radius);
}
.srg-ds .srg-review__stars { margin: 0 0 var(--srg-space-2); color: var(--srg-gold-dark); font-size: 1.125rem; letter-spacing: 2px; line-height: 1; }
.srg-ds .srg-review__stars-off { color: var(--srg-line); }
.srg-ds .srg-review__text { margin: 0; padding: 0; border: 0; font-style: normal; font-size: 1.0625rem; line-height: 1.55; color: var(--srg-text); }
.srg-ds .srg-review__text p { margin: 0 0 var(--srg-space-2); }
.srg-ds .srg-review__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--srg-space-3); margin-top: var(--srg-space-3); font-size: .9375rem; color: var(--srg-muted); }
.srg-ds .srg-review__name { font-style: normal; font-weight: var(--srg-weight-bold); color: var(--srg-text); }
.srg-ds .srg-review__link,
.srg-ds .srg-reviews__all a { color: var(--srg-gold-dark); text-decoration: underline; text-underline-offset: 2px; }
.srg-ds .srg-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--srg-space-3); margin-top: var(--srg-space-3); }
.srg-ds .srg-carousel__controls[hidden] { display: none; }
.srg-ds .srg-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--srg-ink);
	border-radius: 50%;
	background: var(--srg-white);
	color: var(--srg-ink);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}
.srg-ds .srg-carousel__btn:hover:not([aria-disabled="true"]) { background: var(--srg-ink); color: var(--srg-white); }
.srg-ds .srg-carousel__btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.srg-ds .srg-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; }
.srg-ds .srg-carousel__dot {
	position: relative;
	width: 32px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.srg-ds .srg-carousel__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	border: 1.5px solid var(--srg-muted);
	background: transparent;
}
.srg-ds .srg-carousel__dot[aria-current="true"]::before { background: var(--srg-gold-dark); border-color: var(--srg-gold-dark); }
.srg-ds .srg-carousel__btn:focus-visible,
.srg-ds .srg-carousel__dot:focus-visible { outline: 3px solid var(--srg-gold-dark); outline-offset: 2px; }
.srg-ds .srg-reviews__all { margin: var(--srg-space-3) 0 0; font-size: 1rem; }
/* Preview-only sample slides: visibly not real. */
.srg-ds .srg-reviews--sample .srg-review__card { border-style: dashed; border-color: var(--srg-gold-dark); background: repeating-linear-gradient(135deg, #fff, #fff 12px, #fbf8ef 12px, #fbf8ef 24px); }
.srg-ds .srg-reviews__todo { color: var(--srg-error); font-size: .9375rem; }
@media (prefers-reduced-motion: reduce) {
	.srg-ds .srg-carousel__track { scroll-behavior: auto; }
}

/* ---------- 17. Final Contact mockup refinements (v0.5) ---------- */

/* Header/footer variant: only on pages with "srg-chrome-v2" (body class added by the plugin). */
body.srg-chrome-v2 .site-header .site-title a { padding-bottom: 0; }
body.srg-chrome-v2 .site-header .site-title a::after { display: none; }
body.srg-chrome-v2 .site-header .ast-site-title-wrap::after {
	content: "Mobile SMART repairs";
	display: block;
	margin-top: 5px;
	font-family: var(--srg-font);
	font-weight: var(--srg-weight-bold);
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--srg-silver);
	line-height: 1;
}
body.srg-chrome-v2 .site-header .custom-logo-link img { max-height: 48px; }
body.srg-chrome-v2 .main-header-menu > .menu-item { position: relative; }
body.srg-chrome-v2 .main-header-menu > .current-menu-item > .menu-link { color: var(--srg-white); }
body.srg-chrome-v2 .main-header-menu > .current-menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 1em;
	right: 1em;
	bottom: 0;
	height: 2px;
	background: var(--srg-gold);
}
@media (max-width: 921px) {
	body.srg-chrome-v2 .site-header .custom-logo-link img { max-height: 36px; }
	body.srg-chrome-v2 .site-header .ast-site-title-wrap::after { font-size: .625rem; margin-top: 4px; }
}
body.srg-chrome-v2 .srg-footer-id { display: flex; align-items: center; gap: 14px; }
body.srg-chrome-v2 .srg-footer-mark { width: 40px; height: auto; flex: 0 0 auto; }
@media (max-width: 921px) {
	body.srg-chrome-v2 .srg-footer-id { justify-content: center; text-align: left; }
}

/* Hero: a little shorter on desktop/tablet too. */
@media (min-width: 768px) {
	.srg-ds.srg-hero--compact { padding-top: 48px; padding-bottom: 52px; }
}

/* "What photos should I send?" */
.srg-ds .elementor-widget.srg-examples-title { margin: var(--srg-space-6) 0 var(--srg-space-4); }
.srg-ds .srg-examples-title .elementor-heading-title { font-size: 1.625rem; line-height: 1.2; }
.srg-ds .srg-example figure { position: relative; }
.srg-ds .srg-example img { aspect-ratio: 24 / 25; border-radius: var(--srg-radius); }
.srg-ds .srg-example .widget-image-caption { margin-top: var(--srg-space-3); font-size: 1rem; color: var(--srg-text); }
/* The caption's label sits on the photo as a badge (still part of the caption for screen readers). */
.srg-ds .srg-example .widget-image-caption strong {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-block;
	padding: 7px 12px;
	border-radius: 8px;
	background: rgba(17, 17, 17, .92);
	color: var(--srg-white);
	font-size: 1rem;
	line-height: 1.2;
}
@media (max-width: 767px) {
	.srg-ds .srg-example .widget-image-caption strong { top: 8px; left: 8px; padding: 5px 9px; font-size: .875rem; }
	.srg-ds .srg-example .widget-image-caption { font-size: .9375rem; }
	.srg-ds .srg-examples-title .elementor-heading-title { font-size: 1.375rem; }
}

/* Reviews: one white card holding title, carousel and Google link. */
.srg-ds .srg-reviews {
	margin-top: var(--srg-space-6);
	padding: var(--srg-space-5) var(--srg-space-5) var(--srg-space-4);
	background: var(--srg-white);
	border-radius: var(--srg-radius);
	box-shadow: var(--srg-shadow);
}
.srg-ds .srg-reviews__title { font-size: 1.5rem; margin-bottom: var(--srg-space-4); }
.srg-ds .srg-review__card,
.srg-ds .srg-reviews--sample .srg-review__card {
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: var(--srg-space-4);
	align-content: start;
	padding: var(--srg-space-4) var(--srg-space-5) var(--srg-space-4) var(--srg-space-4);
	background: #f3f2ef;
	border: 0;
	border-radius: var(--srg-radius-sm);
}
.srg-ds .srg-review__card > :not(.srg-review__icon) { grid-column: 2; }
.srg-ds .srg-review__icon {
	grid-row: 1 / span 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e4e1d9;
	color: var(--srg-text);
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 52px;
	text-align: center;
}
.srg-ds .srg-review__sample { align-self: center; font-size: .9375rem; line-height: 1.5; color: var(--srg-muted); }
.srg-ds .srg-review__sample strong { display: block; color: var(--srg-text); font-weight: var(--srg-weight-bold); }
.srg-ds .srg-review__text { font-size: 1rem; }
.srg-ds .srg-carousel__controls { margin-top: var(--srg-space-3); }
.srg-ds .srg-carousel__btn {
	width: 44px;
	height: 44px;
	border: 0;
	background: var(--srg-white);
	box-shadow: 0 1px 2px rgba(17, 17, 17, .12), 0 4px 12px rgba(17, 17, 17, .12);
}
.srg-ds .srg-carousel__btn:hover:not([aria-disabled="true"]) { background: var(--srg-ink); color: var(--srg-white); }
.srg-ds .srg-carousel__btn[aria-disabled="true"] { opacity: .45; }
.srg-ds .srg-carousel__dot { width: 24px; }
.srg-ds .srg-carousel__dot::before { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 0; background: #d6d3cc; }
.srg-ds .srg-carousel__dot[aria-current="true"]::before { background: var(--srg-gold); }
.srg-ds .srg-reviews__all { margin: var(--srg-space-2) 0 0; text-align: right; font-size: .9375rem; }
.srg-ds .srg-reviews__all a,
.srg-ds .srg-reviews__link-todo { color: var(--srg-gold-dark); font-weight: var(--srg-weight-bold); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
	.srg-ds .srg-reviews { padding: var(--srg-space-4); }
	.srg-ds .srg-reviews__title { font-size: 1.3125rem; }
	.srg-ds .srg-review__card { grid-template-columns: 36px 1fr; column-gap: var(--srg-space-3); padding: var(--srg-space-3); }
	.srg-ds .srg-review__icon { width: 36px; height: 36px; line-height: 46px; font-size: 1.75rem; }
}

/* Form card: soft shadow without the hairline border, as in the mockup. */
.srg-ds.srg-contact .srg-embed { border-color: transparent; box-shadow: 0 1px 3px rgba(17, 17, 17, .06), 0 10px 30px rgba(17, 17, 17, .08); }

/* "Need another way to get in touch?": items separated by thin rules on wider screens. */
.srg-ds.srg-contact-strip .srg-contact-inline .elementor-icon-list-icon i { font-size: 1.3rem; color: var(--srg-gold); }
@media (min-width: 768px) {
	.srg-ds.srg-contact-strip .srg-contact-inline .elementor-icon-list-items { gap: var(--srg-space-3) 0; }
	.srg-ds.srg-contact-strip .srg-contact-inline .elementor-icon-list-item { padding: 2px var(--srg-space-7) 2px 0; }
	.srg-ds.srg-contact-strip .srg-contact-inline .elementor-icon-list-item + .elementor-icon-list-item { padding-left: var(--srg-space-7); border-left: 1px solid var(--srg-line); }
	.srg-ds.srg-contact-strip .srg-contact-inline .elementor-icon-list-icon { margin-right: 10px; }
}

/* ---------- 18. Mobile audit fixes (v0.6, all design-system pages) ---------- */
/* Touch targets at least 44px tall: header brand, footer menu, secondary contact links. */
body.srg-ds-page .site-header .custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
body.srg-ds-page .site-header .site-title a { padding-top: 13px; padding-bottom: 13px; margin-top: -13px; margin-bottom: -13px; }
body.srg-chrome-v2 .site-header .site-title a { padding-bottom: 13px; margin-bottom: -13px; }
@media (max-width: 921px) {
	body.srg-ds-page .site-footer .footer-nav-wrap .menu-link { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
}
.srg-ds .srg-contact-inline .elementor-icon-list-item a { min-height: 44px; display: inline-flex; align-items: center; }
/* Small uppercase labels (eyebrows): never below 14px. */
.srg-ds .srg-eyebrow .elementor-heading-title { font-size: max(.875rem, 14px); }
/* Tablet: single stacked photos stay at a sharp, readable width instead of spanning the column. */
@media (min-width: 768px) and (max-width: 1024px) {
	.srg-ds .elementor-widget.srg-photo { max-width: 620px; margin-left: auto; margin-right: auto; }
}
/* Phone menu: Astra's own mobile-menu colours/fonts (white panel, serif submenu) override the
 * earlier rules; match the dark header instead, in the site font, with 48px rows. */
body.srg-ds-page #ast-hf-mobile-menu,
body.srg-ds-page #ast-hf-mobile-menu .menu-item,
body.srg-ds-page #ast-hf-mobile-menu .sub-menu,
body.srg-ds-page #ast-hf-mobile-menu .menu-link { background: var(--srg-ink-2); }
body.srg-ds-page #ast-hf-mobile-menu .menu-link {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-family: var(--srg-font);
	color: var(--srg-white);
	border-color: rgba(255, 255, 255, .08);
}
body.srg-ds-page #ast-hf-mobile-menu > .menu-item > .menu-link { font-weight: var(--srg-weight-bold); font-size: 1.0625rem; }
body.srg-ds-page #ast-hf-mobile-menu .sub-menu .menu-link { font-weight: var(--srg-weight-body); font-size: 1rem; color: var(--srg-silver); }
body.srg-ds-page #ast-hf-mobile-menu .sub-menu .menu-link .ast-icon,
body.srg-ds-page #ast-hf-mobile-menu .sub-menu .menu-link svg { fill: var(--srg-gold); color: var(--srg-gold); }
body.srg-ds-page #ast-hf-mobile-menu .current-menu-item > .menu-link,
body.srg-ds-page #ast-hf-mobile-menu .current-menu-ancestor > .menu-link { color: var(--srg-gold-light); }
body.srg-ds-page #ast-hf-mobile-menu .menu-item > .ast-menu-toggle,
body.srg-ds-page #ast-hf-mobile-menu .menu-item > .ast-menu-toggle:hover,
body.srg-ds-page #ast-hf-mobile-menu .menu-item > .ast-menu-toggle:focus { background: transparent; color: var(--srg-white); border: 0; min-width: 48px; min-height: 48px; }
body.srg-ds-page #ast-hf-mobile-menu .menu-item > .ast-menu-toggle svg { fill: currentColor; }
body.srg-ds-page #ast-hf-mobile-menu .menu-link:focus-visible,
body.srg-ds-page #ast-hf-mobile-menu .ast-menu-toggle:focus-visible { outline: 3px solid var(--srg-gold-light); outline-offset: -3px; }
/* Phones: long eyebrows ("Mobile SMART repairs · London & Surrey") were cut off in iPhone Safari,
 * which doesn't wrap the text inside the inline-flex row. Plain wrapping text with an inline dash instead. */
@media (max-width: 767px) {
	.srg-ds .srg-eyebrow--dash .elementor-heading-title { display: block; position: relative; max-width: 100%; padding-left: 40px; overflow-wrap: anywhere; letter-spacing: .12em; }
	.srg-ds .srg-eyebrow--dash .elementor-heading-title::before { position: absolute; left: 0; top: .7em; }
	.srg-ds .srg-intro--center .srg-eyebrow--dash .elementor-heading-title { padding-left: 0; }
	.srg-ds .srg-intro--center .srg-eyebrow--dash .elementor-heading-title::before { position: static; display: inline-block; vertical-align: middle; margin: -2px 12px 0 0; }
	.srg-ds .srg-intro--center .srg-eyebrow--dash .elementor-heading-title::after { display: inline-block; vertical-align: middle; margin: -2px 0 0 12px; }
}
/* Phones, service cards (photo left, text right): Safari/WebKit doesn't resolve the photo's
 * height:100% against the stretched card and used the photo's own height instead (cards ~2000px
 * tall). The photo now fills its strip absolutely, so the text alone sets the card height. */
@media (max-width: 767px) {
	.srg-ds .srg-service .elementor-image-box-img { position: relative; align-self: stretch; min-height: 112px; overflow: hidden; }
	.srg-ds .srg-service .elementor-image-box-img a { position: static; height: auto; }
	.srg-ds .srg-service .elementor-image-box-img img,
	.srg-ds .srg-service--wide .elementor-image-box-img img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		max-width: none;
		aspect-ratio: auto;
		object-fit: cover;
	}
}