/*
 * Sara Movers — modern design layer.
 * Loaded after the imported Elementor styles; restyles them without touching page HTML.
 * Remove the 'sara-modern' enqueue in functions.php to return to the original look.
 */

@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url("imported/assets/fonts/nunito-xrxv3i6li01bkofineab.woff2") format("woff2");
}

:root {
	--sm-green: #3a9a16;
	--sm-green-600: #2c7a10;
	--sm-green-50: #eef7e6;
	--sm-navy: #0a2c55;
	--sm-navy-800: #082447;
	--sm-blue: #0b4a8f;
	--sm-ink: #0b2545;
	--sm-text: #475569;
	--sm-muted: #64748b;
	--sm-line: #e2e8f0;
	--sm-surface: #ffffff;
	--sm-soft: #f6f8fb;
	--sm-card: #fff;
	--sm-glass: 255 255 255;
	--sm-body: #334155;
	--sm-radius: 18px;
	--sm-radius-sm: 12px;
	--sm-shadow-sm: 0 1px 2px rgb(15 23 42 / .06), 0 2px 8px rgb(15 23 42 / .05);
	--sm-shadow: 0 10px 30px -12px rgb(15 23 42 / .18), 0 4px 10px -6px rgb(15 23 42 / .08);
	--sm-shadow-lg: 0 24px 48px -18px rgb(15 23 42 / .28);
	--sm-gradient: linear-gradient(135deg, #46a81c 0%, #2c7a10 100%);
	--sm-font: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Elementor global colours, matched to the logo: royal navy blue and leaf green. */
.elementor-kit-8 {
	--e-global-color-primary: var(--sm-green);
	--e-global-color-c1320b1: var(--sm-navy);
	--e-global-color-bbd98cd: var(--sm-navy);
	--e-global-color-650b861: var(--sm-ink);
	--e-global-color-6c937e8: #46a81c;
}

/* ---------- Typography ---------- */

body.sara-movers {
	background: var(--sm-surface);
	color: var(--sm-text);
	font-family: var(--sm-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.sara-movers :is(h1, h2, h3, h4, h5, h6, p, a, span, li, div, input, select, textarea, button, label, strong, b, em, td, th, cite, figcaption, blockquote)
	:not([class^="fa"]):not([class*=" fa-"]):not([class*="eicon"]):not(.icon) {
	font-family: var(--sm-font) !important;
}

/* Weight and size stay with each element's own Elementor rule: some "headings" are styled as body copy. */
body.sara-movers :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
	color: var(--sm-ink);
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.2;
	text-wrap: balance;
}

body.sara-movers :is(.elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-image-box-description, .elementor-icon-box-description) {
	color: var(--sm-text);
	font-size: max(1em, 15px) !important;
	line-height: 1.75 !important;
}

body.sara-movers a {
	transition: color .2s ease;
}

::selection {
	background: #c8efd2;
	color: var(--sm-ink);
}

/* ---------- Header ---------- */

/* Top bar with contact details (markup in header.php). */
body.sara-movers .sara-topbar {
	background: var(--sm-navy);
	color: #cbd5e1;
	font-size: 13px;
	font-weight: 600;
}

body.sara-movers .sara-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 8px 24px;
}

body.sara-movers .sara-topbar__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: #e2e8f0;
}

body.sara-movers .sara-topbar__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #8fd16a;
	animation: sara-pulse 2s ease-out infinite;
}

@keyframes sara-pulse {
	0% { box-shadow: 0 0 0 0 rgb(143 209 106 / .6); }
	70% { box-shadow: 0 0 0 8px rgb(143 209 106 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(143 209 106 / 0); }
}

body.sara-movers .sara-topbar__links {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sara-movers .sara-topbar__links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #e2e8f0 !important;
	text-decoration: none !important;
	transition: color .2s ease;
}

body.sara-movers .sara-topbar__links a:hover {
	color: #8fd16a !important;
}

body.sara-movers .sara-topbar__links svg {
	width: 15px;
	height: 15px;
	color: #8fd16a;
}

/* Main bar: sticky frosted glass that slims down once the page scrolls (runtime.js). */
body.sara-movers .elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 1000;
}

body.sara-movers .elementor-location-header [data-id="4876609"] {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
	/* Same content width as the top bar (1240px), so logo and button line up with it. */
	padding-right: max(24px, (100% - 1192px) / 2) !important;
	padding-left: max(24px, (100% - 1192px) / 2) !important;
	border-bottom: 1px solid rgb(226 232 240 / .8);
	background: rgb(var(--sm-glass) / .85) !important;
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	transition: padding .25s ease, box-shadow .25s ease;
}

body.sara-movers.sara-scrolled .elementor-location-header [data-id="4876609"] {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	background: rgb(var(--sm-glass) / .96) !important;
	box-shadow: 0 12px 32px -18px rgb(15 23 42 / .35) !important;
}

body.sara-movers .elementor-location-header .elementor-element-0953593 img {
	width: auto !important;
	max-width: none !important;
	height: 76px !important;
	/* The logo file has a white background; multiply drops it into the glass bar. */
	mix-blend-mode: multiply;
	transition: height .25s ease;
}

body.sara-movers.sara-scrolled .elementor-location-header .elementor-element-0953593 img {
	height: 60px !important;
}

/* Logo and quote button sit on the outer edges instead of centred in their columns. */
body.sara-movers .elementor-location-header .elementor-element-7636654 {
	flex: 0 0 auto !important;
	width: auto !important;
	justify-content: flex-start !important;
}

body.sara-movers .elementor-location-header .elementor-element-0953593 .elementor-widget-container {
	text-align: left !important;
}

body.sara-movers .elementor-location-header .elementor-element-2096f97 {
	justify-content: flex-end !important;
}

body.sara-movers .elementor-location-header .elementor-element-07f7e4c,
body.sara-movers .elementor-location-header .elementor-element-07f7e4c .elementor-button-wrapper {
	text-align: right !important;
}

/* Menu links: a green bar grows under the link on hover and stays under the current page. */
body.sara-movers .elementor-location-header .elementor-nav-menu--main .elementor-item {
	padding: 12px 14px !important;
	border-radius: 0;
	background: linear-gradient(var(--sm-green), var(--sm-green)) center bottom 4px / 0 3px no-repeat !important;
	color: var(--sm-ink) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	transition: background-size .25s ease, color .2s ease;
}

/* Elementor's own pointer effects and the dividers between items. */
body.sara-movers .elementor-location-header .elementor-nav-menu--main :is(.elementor-item, li)::before,
body.sara-movers .elementor-location-header .elementor-nav-menu--main :is(.elementor-item, li)::after {
	display: none !important;
}

body.sara-movers .elementor-location-header .elementor-nav-menu--main li:is(:hover, :focus-within) > .elementor-item,
body.sara-movers .elementor-location-header .elementor-nav-menu--main .elementor-item[aria-current="page"] {
	background-size: 24px 3px !important;
	color: var(--sm-green-600) !important;
}

/* Dropdown arrow on items with a submenu. */
body.sara-movers .elementor-location-header .elementor-nav-menu--main .menu-item-has-children > .elementor-item {
	padding-right: 30px !important;
	background:
		linear-gradient(var(--sm-green), var(--sm-green)) center bottom 4px / 0 3px no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 10px no-repeat !important;
}

body.sara-movers .elementor-location-header .elementor-nav-menu--main .menu-item-has-children:is(:hover, :focus-within) > .elementor-item {
	background-size: 24px 3px, 10px !important;
	background-image:
		linear-gradient(var(--sm-green), var(--sm-green)),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5 6 1.5l5 5' fill='none' stroke='%232c7a10' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Dropdown panels. */
body.sara-movers .elementor-location-header .elementor-nav-menu--main ul.sub-menu {
	min-width: 250px;
	/* Extra room on the right for the hovered item, which grows by about 20px. */
	padding: 10px 28px 10px 10px !important;
	border: 1px solid var(--sm-line);
	border-radius: 16px;
	background: var(--sm-card) !important;
	box-shadow: 0 24px 48px -16px rgb(15 23 42 / .28) !important;
	animation: sara-drop .18s ease-out;
}

@keyframes sara-drop {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* Longer menus open as 2- or 3-column panels instead of one very tall list. */
body.sara-movers .elementor-location-header .elementor-nav-menu--main li:is(:hover, :focus-within) > ul.sub-menu:has(> li:nth-child(6)) {
	display: grid !important;
	grid-template-columns: repeat(2, max-content);
	gap: 2px 8px;
	width: max-content !important;
	max-width: none !important;
	max-height: none;
	overflow: visible;
}

body.sara-movers .elementor-location-header .elementor-nav-menu--main li:is(:hover, :focus-within) > ul.sub-menu:has(> li:nth-child(12)) {
	grid-template-columns: repeat(4, minmax(150px, max-content));
	left: 50%;
	translate: -50% 0;
}

/* The 4-column "Areas We Serve" panel centres on the whole header bar rather than on its menu
   item, so on narrower laptop screens it never runs off the left edge. */
@media (min-width: 1025px) {
	body.sara-movers .elementor-location-header [data-id="4876609"] {
		position: relative !important;
	}

	body.sara-movers .elementor-location-header [data-id="4876609"] :is(.elementor-element, nav, ul.elementor-nav-menu),
	body.sara-movers .elementor-location-header .elementor-nav-menu--main li:has(> ul.sub-menu > li:nth-child(12)) {
		position: static !important;
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--main li:is(:hover, :focus-within) > ul.sub-menu:has(> li:nth-child(12)) {
		top: 100% !important;
		left: 50% !important;
		max-width: calc(100vw - 32px) !important;
	}

	/* Invisible bridge over the gap between the menu link and the panel, so it stays open. */
	body.sara-movers .elementor-location-header .elementor-nav-menu--main ul.sub-menu:has(> li:nth-child(12))::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 40px;
	}
}

/* Small laptop screens: keep the menu on one line next to the larger logo. */
@media (min-width: 1025px) and (max-width: 1199px) {
	body.sara-movers .elementor-location-header .elementor-element-0953593 img {
		height: 64px !important;
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--main .elementor-item {
		padding-right: 9px !important;
		padding-left: 9px !important;
		font-size: 14px !important;
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--main .menu-item-has-children > .elementor-item {
		padding-right: 24px !important;
		background-position: center bottom 4px, right 8px center !important;
	}

	body.sara-movers .elementor-location-header .elementor-element-07f7e4c .elementor-button {
		padding: 12px 18px !important;
		font-size: 13px !important;
	}
}

/* With seven menu items (Pricing added) the narrowest laptop widths need tighter spacing too, as do
   the first widths above 1199px, where the larger logo and button come back. */
@media (min-width: 1025px) and (max-width: 1099px), (min-width: 1200px) and (max-width: 1239px) {
	body.sara-movers .elementor-location-header .elementor-nav-menu--main .elementor-item {
		padding-right: 5px !important;
		padding-left: 5px !important;
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--main .menu-item-has-children > .elementor-item {
		padding-right: 20px !important;
		background-position: center bottom 4px, right 5px center !important;
	}
}

@media (min-width: 1025px) and (max-width: 1059px) {
	body.sara-movers .elementor-location-header .elementor-nav-menu--main .elementor-item {
		padding-right: 4px !important;
		padding-left: 4px !important;
		font-size: 13px !important;
	}
}

body.sara-movers .elementor-location-header .elementor-nav-menu--main .elementor-sub-item {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 9px 12px !important;
	border-radius: 10px;
	background: transparent !important;
	color: var(--sm-ink) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
	transform-origin: left center;
	transition: background-color .15s ease, color .15s ease, transform .2s ease;
}

body.sara-movers .elementor-location-header .elementor-nav-menu--main .elementor-sub-item::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #cbd5e1;
	transition: background-color .15s ease, transform .2s ease;
}

/* Hovered dropdown item grows slightly and nudges right; its dot grows with it. */
body.sara-movers .elementor-location-header .elementor-nav-menu--main .elementor-sub-item:is(:hover, :focus-visible) {
	background: var(--sm-green-50) !important;
	color: var(--sm-green-600) !important;
	transform: translateX(4px) scale(1.06);
}

body.sara-movers .elementor-location-header .elementor-nav-menu--main .elementor-sub-item:is(:hover, :focus-visible)::before {
	background: var(--sm-green);
	transform: scale(1.4);
}

/* Quote button: pill with an arrow. */
body.sara-movers .elementor-location-header .elementor-element-07f7e4c .elementor-button {
	padding: 14px 24px !important;
	border-radius: 999px !important;
	background: var(--sm-gradient) !important;
	font-size: 14px !important;
	letter-spacing: .04em;
	white-space: nowrap;
}

body.sara-movers .elementor-location-header .elementor-element-07f7e4c .elementor-button-text::after {
	content: "→";
	display: inline-block;
	margin-left: 8px;
	transition: transform .2s ease;
}

body.sara-movers .elementor-location-header .elementor-element-07f7e4c .elementor-button:hover .elementor-button-text::after {
	transform: translateX(4px);
}

/* Mobile and tablet: menu button plus a full-width slide-down panel. */
@media (max-width: 1024px) {
	body.sara-movers .elementor-location-header [data-id="4876609"] {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	body.sara-movers .elementor-location-header .elementor-element-0953593 img,
	body.sara-movers.sara-scrolled .elementor-location-header .elementor-element-0953593 img {
		height: 56px !important;
	}

	/* Let the open panel position itself against the whole header bar. */
	body.sara-movers .elementor-location-header .elementor-element {
		position: static !important;
	}

	body.sara-movers .elementor-location-header .elementor-menu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		margin: 0 0 0 auto !important;
		border: 1px solid #dcefcf;
		border-radius: 14px;
		background: var(--sm-green-50) !important;
		color: var(--sm-green-600) !important;
	}

	body.sara-movers .elementor-location-header .elementor-menu-toggle svg {
		width: 22px;
		height: 22px;
		fill: var(--sm-green-600) !important;
	}

	/* The menu column holds the button; push it to the right edge (the quote button is hidden here). */
	body.sara-movers .elementor-location-header .elementor-element-7679311 {
		flex: 1 1 auto !important;
		justify-content: flex-end !important;
	}

	body.sara-movers .elementor-location-header .elementor-element-ed143ab {
		flex: 1 1 auto;
		width: auto !important;
	}

	body.sara-movers .elementor-location-header .elementor-element-ed143ab > .elementor-widget-container {
		display: flex;
		justify-content: flex-end;
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--dropdown.sara-open {
		position: absolute !important;
		top: 100% !important;
		right: 0 !important;
		left: 0 !important;
		z-index: 999;
		width: auto !important;
		max-height: calc(100dvh - 90px);
		margin: 0 !important;
		padding: 8px 16px 18px;
		overflow-y: auto;
		border: 0 !important;
		border-top: 1px solid var(--sm-line) !important;
		border-radius: 0 0 22px 22px;
		background: var(--sm-card) !important;
		box-shadow: 0 28px 40px -20px rgb(15 23 42 / .35);
		animation: sara-drop .2s ease-out;
	}

	/* Elementor draws its own pink dividers on the list items; the links carry the dividers instead. */
	body.sara-movers .elementor-location-header .elementor-nav-menu--dropdown li {
		position: relative !important;
		border: 0 !important;
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--dropdown a {
		padding: 15px 56px 15px 6px !important;
		border-bottom: 1px solid var(--sm-line) !important;
		background: none !important;
		color: var(--sm-ink) !important;
		font-size: 17px !important;
		font-weight: 700 !important;
		text-align: left;
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--dropdown a[aria-current="page"] {
		color: var(--sm-green-600) !important;
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--dropdown .sara-submenu-toggle {
		top: 8px !important;
		right: 0 !important;
		width: 40px !important;
		height: 40px !important;
		border-radius: 12px !important;
		background: var(--sm-green-50) !important;
		color: var(--sm-green-600) !important;
		font-size: 22px !important;
		font-weight: 700;
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu {
		margin: 4px 0 10px;
		padding: 4px 12px !important;
		border-radius: 14px;
		background: var(--sm-soft);
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu a {
		padding: 11px 6px !important;
		font-size: 15px !important;
		font-weight: 600 !important;
	}

	body.sara-movers .elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu li:last-child > a {
		border-bottom: 0 !important;
	}
}

@media (max-width: 767px) {
	body.sara-movers .sara-topbar {
		display: none;
	}
}

/* The menu column bottom-aligns its hamburger, leaving it below the logo and the dark-mode switch. */
@media (max-width: 1024px) {
	body.sara-movers .elementor-location-header [data-id="7679311"] {
		align-self: center !important;
		justify-content: center !important;
	}
}

/* "Get free quote": the column was narrower than its button, which spilled onto the dark-mode switch. */
body.sara-movers .elementor-location-header [data-id="2096f97"] {
	flex: none !important;
	width: auto !important;
	align-self: center !important;
	justify-content: center !important;
}

body.sara-movers .elementor-location-header [data-id="07f7e4c"] {
	width: auto !important;
}

/* Bootstrap's -15px row margins pushed the blog grid wider than the screen on phones and tablets. */
@media (max-width: 1024px) {
	body.sara-movers .post-items {
		margin-right: 0;
		margin-left: 0;
	}
}

/* Footer contact lines (the email has no spaces) were wider than their column on tablets. */
body.sara-movers .elementor-location-footer .elementor-icon-list-item,
body.sara-movers .elementor-location-footer .elementor-icon-list-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Reviews carousel: slides waiting off-screen widened the page at tablet width. */
body.sara-movers .elementor-widget-testimonial-carousel .elementor-main-swiper {
	overflow: hidden;
}

/* One wide, low review at a time, centred, instead of three tall cards side by side. */
body.sara-movers .elementor-widget-testimonial-carousel .elementor-main-swiper {
	max-width: 1040px;
	margin-inline: auto;
}

body.sara-movers .elementor-widget-testimonial-carousel .elementor-testimonial {
	height: auto;
	padding: 16px 32px !important;
	text-align: center;
}

body.sara-movers .elementor-widget-testimonial-carousel .elementor-testimonial__text {
	min-height: 0 !important;
	line-height: 1.55 !important;
}

body.sara-movers .elementor-widget-testimonial-carousel .elementor-testimonial__text::before {
	margin-bottom: 4px;
}

body.sara-movers .elementor-widget-testimonial-carousel .elementor-testimonial__footer {
	justify-content: center;
	margin-top: 8px;
}

body.sara-movers .elementor-widget-testimonial-carousel .elementor-testimonial__image img {
	width: 36px !important;
	height: 36px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
	body.sara-movers .sara-topbar__links li:nth-child(2) {
		display: none;
	}
}

/* ---------- Buttons ---------- */

body.sara-movers :is(.elementor-button, .elementskit-btn, input[type="submit"], button[type="submit"], .sara-quote-form .submit) {
	background: var(--sm-gradient) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important; /* also clears the imported widgets' own button shadows */
	color: #fff !important;
	cursor: pointer;
	font-weight: 800 !important;
	letter-spacing: .04em;
	padding: 14px 28px !important;
	transition: transform .2s ease, filter .2s ease;
}

body.sara-movers :is(.elementor-button, .elementskit-btn, input[type="submit"], button[type="submit"]):hover {
	filter: brightness(1.05);
	transform: translateY(-2px);
}

/* ---------- Forms ---------- */

body.sara-movers .sara-quote-form {
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-radius: 22px;
	box-shadow: var(--sm-shadow-lg);
	padding: clamp(18px, 3vw, 32px);
}

/* Spacing lives on the columns: not every field is wrapped in a <p> (Phone isn't). */
body.sara-movers .sara-quote-form p {
	margin: 0 !important;
}

body.sara-movers .sara-quote-form .row > [class*="col-"] {
	margin-bottom: 16px;
}

body.sara-movers .sara-quote-form .row > [class*="col-"]:last-child {
	margin-bottom: 0;
}

/* Fields sat inline in their paragraphs, so the select lined up on the text baseline and
   dropped below the date input beside it. Block layout puts every field on the same top edge. */
body.sara-movers .sara-quote-form .control-wrap {
	display: block;
}

body.sara-movers .sara-quote-form :is(input, select, textarea) {
	display: block;
	float: none !important;
	margin: 0 !important;
}

body.sara-movers .sara-quote-form select {
	padding-right: 36px !important;
	text-overflow: ellipsis;
}

body.sara-movers :is(.sara-quote-form, .wpcf7-form, .elementor-form) :is(input:not([type="submit"]):not([type="hidden"]), select, textarea) {
	width: 100%;
	background: var(--sm-soft) !important;
	border: 1.5px solid var(--sm-line) !important;
	border-radius: var(--sm-radius-sm) !important;
	color: var(--sm-ink) !important;
	font-size: 15px !important;
	min-height: 50px;
	padding: 12px 16px !important;
	box-shadow: none !important;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body.sara-movers :is(.sara-quote-form, .wpcf7-form) textarea {
	min-height: 130px;
	resize: vertical;
}

/* Homepage form beside the welcome text: a shorter message box keeps the two columns level. */
body.sara-movers.home .sara-quote-form textarea {
	min-height: 0;
	height: 100px;
}

/* Key points and call buttons under the homepage welcome text (welcome.php). */
body.sara-movers .sara-welcome {
	margin-top: 8px;
}

body.sara-movers .sara-welcome__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

body.sara-movers .sara-welcome__points li {
	padding: 12px 14px 12px 42px;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%233a9a16'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") 14px center / 18px no-repeat;
	color: var(--sm-text);
	font-size: 14px;
	line-height: 1.4;
}

body.sara-movers .sara-welcome__points strong {
	color: var(--sm-ink);
}

body.sara-movers .sara-welcome__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

body.sara-movers .sara-welcome__btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--sm-blue);
	border-radius: 999px;
	color: var(--sm-blue) !important;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none !important;
	transition: transform .2s ease;
}

body.sara-movers .sara-welcome__btn:hover {
	transform: translateY(-2px);
}

body.sara-movers .sara-welcome__btn--primary {
	border-color: transparent;
	background: var(--sm-gradient);
	color: #fff !important;
}

body.sara-movers :is(.sara-quote-form, .wpcf7-form) :is(input, select, textarea)::placeholder {
	color: #94a3b8;
}

body.sara-movers :is(.sara-quote-form, .wpcf7-form, .elementor-form) :is(input, select, textarea):focus {
	background: var(--sm-card) !important;
	border-color: var(--sm-green) !important;
	box-shadow: 0 0 0 4px rgb(58 154 22 / .15) !important;
	outline: none;
}

body.sara-movers .sara-quote-form .submit {
	width: 100%;
	min-height: 54px;
	font-size: 15px !important;
}

/* ---------- Cards: services, features, counters, testimonials ---------- */

body.sara-movers .elementor-widget-image-box .elementor-image-box-wrapper {
	height: 100%;
	padding: 14px 12px 18px;
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	box-shadow: var(--sm-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.sara-movers .elementor-widget-image-box .elementor-image-box-wrapper:hover {
	transform: translateY(-4px);
	border-color: #dcefcf;
	box-shadow: var(--sm-shadow);
}

body.sara-movers .elementor-image-box-img {
	overflow: hidden;
	border-radius: var(--sm-radius-sm);
}

body.sara-movers .elementor-image-box-img img {
	border-radius: var(--sm-radius-sm) !important;
	transition: transform .5s ease;
}

body.sara-movers .elementor-image-box-wrapper:hover .elementor-image-box-img img {
	transform: scale(1.04);
}

/* Equal-height cards: the row, each card's column and the card itself all stretch to the
   tallest card. Elementor top-aligns these rows, and older sections pack wrapped lines to the top. */
body.sara-movers :is(.e-con, .e-con-inner, .elementor-container, .elementor-column, .elementor-widget-wrap):is(
	:has(> .elementor-widget-image-box),
	:has(> * > .elementor-widget-image-box),
	:has(> * > * > .elementor-widget-image-box)
) {
	align-items: stretch !important;
	align-content: stretch !important;
}

body.sara-movers .e-con:has(> .elementor-widget-image-box) > .elementor-widget-image-box {
	flex-grow: 1;
}

body.sara-movers .elementor-widget-image-box {
	align-self: stretch;
}

body.sara-movers .elementor-widget-image-box > .elementor-widget-container,
body.sara-movers .elementor-widget-image-box .elementor-image-box-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

body.sara-movers .elementor-image-box-wrapper .elementor-image-box-content {
	flex: 1;
}

@media (min-width: 768px) {
	/* "Focused on Quality" icon cards: equal widths instead of sizing to their titles. */
	body.sara-movers .elementor-element-2b5b4d5 .elementor-inner-column,
	body.sara-movers .elementor-element-2b5b4d5 .elementor-widget-image-box {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	/* Homepage service rows (3 cards, then 2): the same edges and gap on both rows. Elementor
	   gave the first row fixed-width columns and side margins, the second padded half-width columns. */
	body.sara-movers :is(.elementor-element-88ba7f1, .elementor-element-45d7ed4) > .e-con-inner > .e-con {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	body.sara-movers :is(.elementor-element-88ba7f1, .elementor-element-45d7ed4) > .e-con-inner {
		gap: 24px;
	}

	body.sara-movers :is(.elementor-element-88ba7f1, .elementor-element-45d7ed4) > .e-con-inner > .e-con {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding-right: 0;
		padding-left: 0;
	}
}

/* Homepage service cards: one image height for every photo, cropped to fill. */
body.sara-movers :is(.elementor-element-88ba7f1, .elementor-element-45d7ed4) .elementor-image-box-img {
	width: 100% !important;
}

body.sara-movers :is(.elementor-element-88ba7f1, .elementor-element-45d7ed4) .elementor-image-box-img img {
	width: 100%;
	height: 230px;
	object-fit: cover;
}

body.sara-movers .elementor-image-box-title {
	color: var(--sm-ink) !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	letter-spacing: .01em;
	margin-top: 10px !important;
}

body.sara-movers .elementor-widget-icon-box .elementor-icon-box-wrapper {
	padding: 22px;
	border-radius: var(--sm-radius);
	background: var(--sm-soft);
	transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

body.sara-movers .elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
	background: var(--sm-card);
	box-shadow: var(--sm-shadow);
	transform: translateY(-3px);
}

body.sara-movers .elementor-widget-counter {
	height: 100%;
}

body.sara-movers .elementor-counter {
	display: flex;
	flex-direction: column-reverse;
	/* Pack from the top (column-reverse flips the axis) so labels start level when one wraps. */
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
	height: 100%;
	padding: 18px 12px !important;
}

/* The counter's parent container already draws the box; restyle that box instead. */
body.sara-movers .e-con:has(> .elementor-widget-counter) {
	background: linear-gradient(180deg, var(--sm-card) 0%, var(--sm-green-50) 100%) !important;
	border: 1px solid #d5efdc !important;
	border-radius: var(--sm-radius) !important;
	box-shadow: var(--sm-shadow-sm);
}

body.sara-movers .elementor-counter-number-wrapper {
	color: var(--sm-green-600) !important;
	font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem) !important;
	font-weight: 900 !important;
	line-height: 1 !important;
}

body.sara-movers .elementor-counter-number-wrapper span {
	font-weight: 900 !important;
}

body.sara-movers .elementor-counter-title {
	color: var(--sm-muted) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: .12em;
	line-height: 1.4 !important;
	text-align: center;
}

body.sara-movers .elementor-testimonial {
	height: 100%;
	padding: 28px 24px !important;
	background: var(--sm-card) !important;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius) !important;
	box-shadow: var(--sm-shadow-sm);
}

body.sara-movers .elementor-testimonial__content {
	background: transparent !important;
	padding: 0 !important;
}

body.sara-movers .elementor-testimonial__content::after {
	display: none !important;
}

body.sara-movers .elementor-testimonial__text {
	color: var(--sm-text) !important;
	font-size: 15px !important;
	font-style: normal !important;
	line-height: 1.7 !important;
}

body.sara-movers .elementor-testimonial__text::before {
	content: "★★★★★";
	display: block;
	margin-bottom: 10px;
	color: #f5b301;
	font-size: 16px;
	letter-spacing: 3px;
}

body.sara-movers .elementor-testimonial__name {
	color: var(--sm-ink) !important;
	font-weight: 800 !important;
}

body.sara-movers .elementor-testimonial__image img {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px #dcefcf;
}

body.sara-movers .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	background: #cbd5e1;
	opacity: 1;
	transition: width .25s ease, background-color .25s ease;
}

body.sara-movers .swiper-pagination-bullet-active {
	width: 26px;
	border-radius: 999px;
	background: var(--sm-green);
}

body.sara-movers :is(.elementor-swiper-button, .elementor-swiper-button svg) {
	color: var(--sm-ink);
	fill: currentColor;
}

body.sara-movers .elementor-swiper-button {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--sm-card);
	font-size: 16px !important;
}

/* ---------- Media ---------- */

body.sara-movers main .elementor-widget-image img:not([src*="logo"]) {
	border-radius: var(--sm-radius);
}

/* Photos placed straight in a container (not in an image block) get the same corners. Kept at low
   specificity with :where so round avatars, icons and card images keep their own shape. */
body.sara-movers main :where(.e-con) img:where(:not([src*="logo"])),
body.sara-movers main :where(img.wp-post-image, img[class*="wp-image-"], .e-link-in-bio__identity-image-element) {
	border-radius: var(--sm-radius);
}

/* Imported photo grids (About Us and others) had no gaps, square corners and a mix of shapes:
   an even grid instead, every photo cropped to the same 3:2 shape. */
body.sara-movers .elementor-image-gallery .gallery {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	margin: 0 !important;
}

body.sara-movers .elementor-image-gallery .gallery-item {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.sara-movers .elementor-image-gallery .gallery-item img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 0 !important;
	border-radius: var(--sm-radius-sm);
	transition: transform .3s ease, box-shadow .3s ease;
}

/* A photo narrower than its column sits in the middle of it, not against the left edge. */
body.sara-movers main .elementor-widget-image img {
	display: block;
	margin-inline: auto;
}

body.sara-movers .elementor-image-gallery .gallery-item img:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow);
}

/* Gallery managed from Media → Gallery ([sara_gallery]): whole photos, none cropped. */
body.sara-movers .sara-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	align-items: start;
}

body.sara-movers .sara-gallery .gallery-item {
	position: relative;
	margin: 0;
}

body.sara-movers .sara-gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
}

/* Only rendered for logged-in editors. */
body.sara-movers .sara-gallery__manage {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 16px;
}

body.sara-movers .sara-gallery__remove {
	position: absolute;
	top: 8px;
	right: 8px;
	margin: 0;
}

body.sara-movers .sara-gallery__remove button {
	min-height: 0;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: #d63638;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

body.sara-movers .elementor-widget-google_maps iframe {
	border-radius: var(--sm-radius);
}

/* ---------- FAQ accordion (ElementsKit + Elementor) ---------- */

body.sara-movers .elementskit-accordion .elementskit-card {
	margin-bottom: 12px !important;
	background: var(--sm-card);
	border: 1px solid var(--sm-line) !important;
	border-radius: var(--sm-radius-sm) !important;
	box-shadow: var(--sm-shadow-sm);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

body.sara-movers .elementskit-accordion .elementskit-card.active {
	border-color: #cfe8bd !important;
	box-shadow: var(--sm-shadow);
}

body.sara-movers .elementskit-accordion .elementskit-btn-link {
	background: var(--sm-card) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--sm-ink) !important;
	padding: 18px 22px !important;
}

body.sara-movers .elementskit-accordion .elementskit-card.active .elementskit-btn-link {
	color: var(--sm-green-600) !important;
}

body.sara-movers .elementskit-accordion .ekit-accordion-title {
	color: inherit !important;
	font-size: 16px !important;
	font-weight: 800 !important;
}

body.sara-movers .elementskit-accordion :is(.ekit_accordion_icon_left_group, .ekit_accordion_icon_group) :is(i, svg) {
	color: var(--sm-green) !important;
	fill: var(--sm-green) !important;
}

body.sara-movers .elementskit-accordion .elementskit-card-body {
	padding: 0 22px 20px !important;
	color: var(--sm-text) !important;
	font-size: 15px !important;
	line-height: 1.75;
}

body.sara-movers .elementor-accordion .elementor-accordion-item {
	margin-bottom: 12px;
	border: 1px solid var(--sm-line) !important;
	border-radius: var(--sm-radius-sm);
	overflow: hidden;
}

body.sara-movers .elementor-accordion .elementor-tab-title {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 16px;
	background: var(--sm-card) !important;
	padding: 18px 22px !important;
	font-weight: 800 !important;
	cursor: pointer;
}

/* The imported FAQ widget styled its questions white with a text shadow, unreadable on the white cards. */
body.sara-movers .elementor-accordion .elementor-accordion-title {
	flex: 1;
	color: var(--sm-ink) !important;
	text-shadow: none !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: normal !important;
	line-height: 1.45 !important;
}

body.sara-movers .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
	color: var(--sm-green-600) !important;
}

body.sara-movers .elementor-accordion .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
	border-color: #cfe8bd !important;
	box-shadow: var(--sm-shadow);
}

body.sara-movers .elementor-accordion .elementor-accordion-icon {
	flex: none;
	float: none !important;
	margin: 0 !important;
	width: auto !important;
}

body.sara-movers .elementor-accordion .elementor-accordion-icon :is(i, svg) {
	width: 14px;
	height: 14px;
	color: var(--sm-green) !important;
	fill: var(--sm-green) !important;
}

body.sara-movers .elementor-accordion .elementor-tab-content {
	padding: 0 22px 20px !important;
	border: 0 !important;
	background: var(--sm-card) !important;
	color: var(--sm-text) !important;
	font-size: 15px !important;
	line-height: 1.75;
	text-shadow: none !important;
}

body.sara-movers .elementor-accordion .elementor-tab-content :is(p, li, span) {
	color: inherit !important;
	text-shadow: none !important;
}

/* ---------- Blog cards & articles ---------- */

body.sara-movers .elementskit-post-image-card,
body.sara-movers .sara-blog-card .elementskit-post-image-card {
	height: 100%;
	padding: 0 !important;
	overflow: hidden;
	background: var(--sm-card) !important;
	border: 1px solid var(--sm-line) !important;
	border-radius: var(--sm-radius) !important;
	box-shadow: var(--sm-shadow-sm) !important;
	transition: transform .25s ease, box-shadow .25s ease;
}

body.sara-movers .elementskit-post-image-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sm-shadow) !important;
}

body.sara-movers .elementskit-post-image-card .elementskit-entry-thumb {
	display: block;
	padding: 0 !important;
	overflow: hidden;
}

body.sara-movers .elementskit-post-image-card .elementskit-entry-thumb img {
	border-radius: 0 !important;
	transition: transform .5s ease;
}

body.sara-movers .elementskit-post-image-card:hover .elementskit-entry-thumb img {
	transform: scale(1.04);
}

body.sara-movers .elementskit-post-image-card .elementskit-post-body {
	padding: 22px !important;
	border: 0 !important;
}

body.sara-movers .elementskit-post-image-card .entry-title {
	margin-bottom: 10px !important;
	font-size: 19px !important;
	line-height: 1.3 !important;
}

body.sara-movers .elementskit-post-image-card .entry-title a {
	color: var(--sm-ink) !important;
}

body.sara-movers .elementskit-post-image-card .entry-title a:hover {
	color: var(--sm-green-600) !important;
}

body.sara-movers .elementskit-post-image-card .post-meta-list {
	color: var(--sm-muted);
	font-size: 13px;
}

body.sara-movers .elementskit-post-image-card .elementskit-btn {
	padding: 10px 20px !important;
	font-size: 13px !important;
}

/* "Recent Posts" sidebar on single posts: compact one-per-row list instead of the 3-column grid. */
body.sara-movers .elementor-element-e57d6ae .sara-blog-card {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	margin-bottom: 14px;
}

body.sara-movers .elementor-element-e57d6ae .elementskit-post-image-card {
	display: grid !important;
	grid-template-columns: 96px 1fr;
	align-items: center;
	height: auto;
}

body.sara-movers .elementor-element-e57d6ae .elementskit-entry-thumb img {
	height: 84px !important;
}

body.sara-movers .elementor-element-e57d6ae .elementskit-post-body {
	padding: 10px 14px !important;
}

body.sara-movers .elementor-element-e57d6ae .entry-title {
	margin-bottom: 4px !important;
	font-size: 14px !important;
}

body.sara-movers .elementor-element-e57d6ae .post-meta-list {
	font-size: 12px;
}

body.sara-movers .elementor-element-e57d6ae :is(.elementskit-post-body > p, .meta-author, .btn-wraper) {
	display: none !important;
}

body.sara-movers :is(.elementor-widget-theme-post-content, .sara-native-entry) :is(p, li) {
	color: var(--sm-body);
	font-size: 17px !important;
	line-height: 1.8 !important;
}

body.sara-movers :is(.elementor-widget-theme-post-content, .sara-native-entry) :is(h2, h3) {
	margin: 1.6em 0 .6em !important;
}

body.sara-movers :is(.elementor-widget-theme-post-content, .sara-native-entry) a {
	color: var(--sm-green-600);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.sara-movers .elementor-toc__header,
body.sara-movers .elementor-widget-table-of-contents .elementor-toc__body {
	background: var(--sm-soft);
}

body.sara-movers .elementor-widget-table-of-contents .elementor-widget-container {
	border: 1px solid var(--sm-line) !important;
	border-radius: var(--sm-radius-sm) !important;
	overflow: hidden;
}

/* ---------- Footer ---------- */

body.sara-movers .elementor-location-footer > .elementor-section:first-child,
body.sara-movers .elementor-location-footer > .e-con:first-child {
	background: radial-gradient(1200px 400px at 10% 0%, rgb(58 154 22 / .18), transparent 60%), linear-gradient(180deg, #102030 0%, #0b1824 100%) !important;
}

/* Office map column after "Get in Touch" (functions.php), styled like the other footer columns. */
body.sara-movers .sara-footer-map {
	display: flex;
	flex: 0 0 280px;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	/* Top padding lines the heading up with the imported column headings. */
	padding: 17px 10px 10px;
}

body.sara-movers .sara-footer-map__title {
	margin: 0;
	color: #fff !important;
	font-size: 17px !important;
	font-weight: 800 !important;
}

body.sara-movers .sara-footer-map__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 12px;
	background: rgb(134 204 92 / .5);
}

body.sara-movers .sara-footer-map iframe {
	width: 100%;
	height: 190px;
	border: 0;
	border-radius: var(--sm-radius-sm);
}

body.sara-movers .elementor-location-footer .sara-footer-map__link {
	color: #86cc5c !important;
	font-size: 14px;
	font-weight: 700;
}

/* Cards we accept, along the bottom of the footer (payments.php). */
body.sara-movers .sara-footer-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px 24px 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* The card row is the footer's last line, so the section's own bottom padding goes. */
body.sara-movers .elementor-location-footer .elementor-top-section:has(> .sara-footer-pay) {
	padding-bottom: 0 !important;
}

body.sara-movers .elementor-location-footer .sara-footer-pay__label {
	margin: 0;
	color: #e2e8f0 !important;
	font-size: 14px;
	font-weight: 700;
}

body.sara-movers .sara-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sara-movers .sara-card {
	display: grid;
	place-items: center;
	height: 28px;
	min-width: 44px;
	padding: 0 7px;
	border-radius: 6px;
	background: #fff;
}

body.sara-movers .sara-card svg {
	width: 32px;
	height: 20px;
}

/* Footer text is grey (rule above for p, li, span, a); these names keep their brand colours. */
body.sara-movers .elementor-location-footer .sara-card--name {
	color: var(--sara-card-colour) !important;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

/* Licence, languages and payment methods under "Get in Touch" (business.php). */
body.sara-movers .sara-footer-trust {
	width: 100%;
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	list-style: none;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.85;
}

/* The imported columns are fixed at 25% each; on desktop they share the row with the map. */
@media (min-width: 1025px) {
	body.sara-movers .elementor-container:has(> .sara-footer-map) > .elementor-col-25 {
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
	}

	/* Quick Links holds short words; Get in Touch needs room for the email address on one line. */
	body.sara-movers .elementor-container:has(> .sara-footer-map) > .elementor-col-25:nth-child(2) {
		flex-grow: .7;
	}

	body.sara-movers .elementor-container:has(> .sara-footer-map) > .elementor-col-25:nth-child(4) {
		flex-grow: 1.4;
	}
}

@media (max-width: 1024px) {
	body.sara-movers .sara-footer-map {
		flex-basis: 100%;
		width: 100%;
	}
}

body.sara-movers .elementor-location-footer :is(p, li, span, a) {
	color: #cbd5e1 !important;
}

body.sara-movers .elementor-location-footer :is(h2, h3, h4, h5, .elementor-heading-title) {
	color: #fff !important;
	font-size: 17px !important;
	letter-spacing: .01em;
}

body.sara-movers .elementor-location-footer a:hover,
body.sara-movers .elementor-location-footer a:hover span {
	color: #86cc5c !important;
}

body.sara-movers .elementor-location-footer .elementor-widget-image img {
	border-radius: var(--sm-radius-sm);
}

body.sara-movers .elementor-location-footer .elementor-icon-list-icon :is(i, svg) {
	color: #86cc5c !important;
	fill: #86cc5c !important;
}

body.sara-movers .elementor-location-footer .elementor-social-icon {
	background: rgb(255 255 255 / .08) !important;
	border-radius: 50% !important;
	transition: background-color .2s ease, transform .2s ease;
}

body.sara-movers .elementor-location-footer .elementor-social-icon:hover {
	background: var(--sm-green) !important;
	transform: translateY(-2px);
}

body.sara-movers .elementor-location-footer .elementor-social-icon svg {
	fill: #fff !important;
}

body.sara-movers .elementor-location-footer .elementor-divider-separator {
	border-color: rgb(134 204 92 / .5) !important;
	width: 48px !important;
}

/* runtime.css hides every main nav below 1024px for the header's hamburger; the footer menu has no hamburger. */
body.sara-movers .elementor-location-footer .elementor-nav-menu--main {
	display: block !important;
}

body.sara-movers .elementor-location-footer .elementor-nav-menu--main .elementor-item {
	padding: 6px 0 !important;
	color: #cbd5e1 !important;
	font-weight: 600 !important;
	background: transparent !important;
}

body.sara-movers .elementor-location-footer .elementor-nav-menu--main .elementor-item:hover {
	color: #86cc5c !important;
}

body.sara-movers .elementor-location-footer .elementor-nav-menu--main .elementor-item::after {
	display: none !important;
}

/* Quick Links (nav menu) and Services (icon list) share one link style: same size, spacing and chevron. */
body.sara-movers .elementor-location-footer [data-id="3c6d6ec"] > .elementor-widget-container {
	margin: 0 !important;
}

body.sara-movers .elementor-location-footer [data-id="80f8118"] {
	width: 100% !important;
}

body.sara-movers .elementor-location-footer [data-id="80f8118"] .elementor-icon-list-item {
	padding: 0 !important;
	margin: 0 !important;
}

body.sara-movers .elementor-location-footer :is([data-id="3c6d6ec"] .elementor-item, [data-id="80f8118"] a) {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 5px 0 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	transition: color .2s ease, transform .2s ease;
}

body.sara-movers .elementor-location-footer :is([data-id="3c6d6ec"] .elementor-item, [data-id="80f8118"] a)::before {
	content: "" !important;
	position: static !important;
	flex: none;
	width: 6px !important;
	height: 6px !important;
	opacity: 1 !important;
	background: none !important;
	border: 0 !important;
	border-top: 2px solid #86cc5c !important;
	border-right: 2px solid #86cc5c !important;
	transform: rotate(45deg) !important;
}

/* Contact lines match the link columns instead of the larger 18px default. */
body.sara-movers .elementor-location-footer [data-id="fc34208"] .elementor-icon-list-text {
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
}

/* Four columns are too narrow on tablets; show them as a 2 x 2 grid. */
@media (min-width: 768px) and (max-width: 1024px) {
	body.sara-movers .elementor-location-footer .elementor-top-column.elementor-col-25 {
		width: 50% !important;
		margin-bottom: 24px;
	}
}

@media (max-width: 767px) {
	body.sara-movers .elementor-location-footer .elementor-top-column.elementor-col-25 {
		margin-bottom: 20px;
	}
}

body.sara-movers .elementor-location-footer :is([data-id="3c6d6ec"] .elementor-item, [data-id="80f8118"] a):hover {
	transform: translateX(4px);
}

body.sara-movers .elementor-location-footer [data-id="80f8118"] .elementor-icon-list-text {
	font-size: inherit !important;
	font-weight: inherit !important;
	padding: 0 !important;
}

/* ---------- Floating actions ---------- */

/* Flat, like every other button (runtime.css and the /teamsaramovers/ page add their own shadows). */
body.sara-movers :is(.sara-contact, .floating-btn) {
	box-shadow: none !important;
}

body.sara-movers .sara-contact {
	transition: transform .2s ease;
}

body.sara-movers .sara-contact:hover {
	transform: translateY(-3px) scale(1.04);
}

body.sara-movers .sara-whatsapp {
	background: #25d366;
}

body.sara-movers .sara-phone {
	background: var(--sm-gradient);
}

body.sara-movers .sara-scroll-top {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: var(--sm-navy);
	font-size: 18px;
	bottom: 150px;
	right: 26px;
}

/* ---------- Text hero (replaces the text-in-image banners, see sara_replace_banner) ---------- */

body.sara-movers .sara-hero {
	display: flex;
	align-items: center;
	position: relative;
	min-height: 520px;
	padding: 72px 24px;
	overflow: hidden;
	isolation: isolate;
	background: var(--sm-navy);
	color: #fff;
}

/* Darkening layer between the photo and the text. */
body.sara-movers .sara-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(10 44 85 / .92) 0%, rgb(10 44 85 / .75) 45%, rgb(10 44 85 / .2) 100%);
}

body.sara-movers .sara-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

body.sara-movers .sara-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	opacity: 0;
}

body.sara-movers .sara-hero__media img:first-child {
	opacity: 1;
}

/* Homepage: 5 photos, 6s each, crossfading over 1.2s (delays are set inline per slide). */
body.sara-movers .sara-hero__media img:not(:only-child) {
	animation: sara-hero-fade 30s linear infinite;
}

@keyframes sara-hero-fade {
	0% { opacity: 0; }
	4% { opacity: 1; }
	20% { opacity: 1; }
	24% { opacity: 0; }
	100% { opacity: 0; }
}

body.sara-movers .sara-hero__inner {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}

body.sara-movers .sara-hero p {
	max-width: 640px;
	margin: 0;
}

body.sara-movers .sara-hero__eyebrow {
	color: #86efac;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

body.sara-movers .sara-hero__title {
	max-width: 760px;
	margin: 12px 0 0 !important;
	color: #fff;
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.08;
	text-wrap: balance;
}

body.sara-movers .sara-hero__lead {
	margin-top: 18px !important;
	color: #e2e8f0;
	font-size: 18px;
	line-height: 1.6;
}

body.sara-movers .sara-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

body.sara-movers .sara-hero__btn {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 26px;
	border: 2px solid rgb(255 255 255 / .7);
	border-radius: 999px;
	color: #fff !important;
	font-size: 16px;
	font-weight: 800;
	text-decoration: none !important;
	transition: transform .2s ease, background .2s ease;
}

body.sara-movers .sara-hero__btn:hover {
	transform: translateY(-2px);
	background: rgb(255 255 255 / .12);
}

body.sara-movers .sara-hero__btn--primary {
	border-color: transparent;
	background: var(--sm-gradient);
}

body.sara-movers .sara-hero__btn--primary:hover {
	background: var(--sm-gradient);
}

body.sara-movers .sara-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	color: #cbd5e1;
	font-size: 14px;
	font-weight: 700;
}

body.sara-movers .sara-hero__trust li::before {
	content: "✓";
	margin-right: 6px;
	color: #8fd16a;
}

body.sara-movers #quote {
	scroll-margin-top: 90px;
}

/* Mobile-only "Get a Free Quote" bar directly under the hero duplicates the hero's button. */
body.sara-movers .sara-hero + .e-parent.elementor-hidden-desktop:has(a[href="/request-a-quote/"]),
body.sara-movers .sara-hero + .e-parent .elementor-hidden-desktop:has(a[href="/request-a-quote/"]) {
	display: none !important;
}

/* ---------- Consistent headings ---------- */

/* The imported widgets set every heading's size and weight separately (24–56px, weights 200–800).
   One scale instead: h2 for sections, h3 for sub-sections. */
body.sara-movers .elementor:not(.elementor-location-header):not(.elementor-location-footer) :is(h2.elementor-heading-title, h2.ekit-heading--title, .elementor-widget-text-editor h2) {
	font-size: clamp(28px, 1.6vw + 16px, 40px) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -.01em !important;
}

body.sara-movers .elementor:not(.elementor-location-header):not(.elementor-location-footer) :is(h3.elementor-heading-title, h3.ekit-heading--title, .elementor-widget-text-editor h3:not(.sara-feature__title)) {
	font-size: clamp(22px, .8vw + 14px, 28px) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
}

body.sara-movers .elementskit-section-title span {
	font-size: inherit !important;
	font-weight: inherit !important;
}

/* Reviews heading: the star divider overlapped the first line of the text under it. */
body.sara-movers .ekit_heading_elementskit-border-star {
	position: relative;
	height: 14px;
	margin: 14px auto 20px !important;
}

/* ---------- Body text ---------- */

/* Full-width text ran to ~180 characters a line; keep it near 75 for comfortable reading. */
body.sara-movers .elementor-widget-text-editor :is(p, ul, ol) {
	max-width: 75ch;
}

body.sara-movers .elementor-widget-text-editor p[style*="text-align: center"] {
	margin-inline: auto;
}

/* Links in page text took the theme's default pink; use the brand green. Same specificity as that
   reset rule (`a`), so any link a widget colours itself (buttons, menus, footer) keeps its colour. */
:where(body.sara-movers) a {
	color: var(--sm-green-600);
}

:where(body.sara-movers) a:hover {
	color: var(--sm-green);
}

/* ---------- Feature cards (bold-label paragraphs, see content-cards.php) ---------- */

body.sara-movers .sara-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	max-width: none;
	margin: 20px 0 24px;
}

body.sara-movers .sara-feature {
	padding: 20px 22px;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-card);
	box-shadow: var(--sm-shadow-sm);
}

body.sara-movers .elementor-widget-text-editor .sara-feature__title {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
	color: var(--sm-ink) !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
}

/* Green tick badge before each card title. */
body.sara-movers .sara-feature__title::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--sm-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

body.sara-movers .elementor-widget-text-editor .sara-feature :is(p, ul, ol) {
	max-width: none;
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.65;
}

body.sara-movers .sara-feature > :last-child {
	margin-bottom: 0;
}

/* Cards read left to right, whatever alignment the imported block had. */
body.sara-movers .sara-feature,
body.sara-movers .elementor-widget-text-editor .sara-feature__title {
	text-align: left !important;
}

/* In a half-width column (next to a photo) two card columns get too narrow and leave odd
   cards alone on a row: there, each card takes the full width instead. */
body.sara-movers .sara-feature-grid {
	container-type: inline-size;
}

@container (max-width: 700px) {
	body.sara-movers .sara-feature {
		grid-column: 1 / -1;
		padding: 16px 20px;
	}
}

/* A list of cards beside a photo-only column made a long single-column scroll with an empty gap
   under the photo. The photo goes and the cards take the full width, three across. */
body.sara-movers :is(.e-con, .e-con-inner):has(> .e-con .sara-feature-grid) > .e-con:not(:has(.elementor-widget:not(.elementor-widget-image))) {
	display: none !important;
}

body.sara-movers :is(.e-con, .e-con-inner):has(> .e-con .sara-feature-grid) > .e-con:has(.sara-feature-grid) {
	--width: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

@media (min-width: 1025px) {
	body.sara-movers .sara-feature-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

/* On phones a card group is a swipeable row instead of a long column; the next card peeks in. */
@media (max-width: 767px) {
	body.sara-movers .sara-feature-grid,
	body.sara-movers :is(.e-con, .e-con-inner):has(> .sara-pair),
	body.sara-movers [data-id="88ba7f1"] > .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 12px !important;
		margin-right: -16px;
		padding: 4px 16px 12px 2px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	body.sara-movers .sara-feature-grid > .sara-feature,
	body.sara-movers :is(.e-con, .e-con-inner) > .sara-pair,
	body.sara-movers [data-id="88ba7f1"] > .e-con-inner > .e-con {
		flex: 0 0 85% !important;
		width: 85% !important;
		max-width: 85% !important;
		scroll-snap-align: start;
	}

	/* All cards are reachable by swiping, so none are held back behind "Show all". */
	body.sara-movers .sara-clip.sara-many > :nth-child(n+7) {
		display: block;
	}
}

/* Card groups show six cards with three lines of text each until "Show full details" is pressed
   (runtime.js adds .sara-clip). */
body.sara-movers .sara-clip.sara-many > :nth-child(n+7) {
	display: none;
}

body.sara-movers .sara-clip .sara-feature > :is(p, ul, ol) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

body.sara-movers .sara-clip .sara-feature > :is(p, ul, ol) ~ * {
	display: none;
}

/* Long text blocks show a few lines until "Read more" is pressed (runtime.js adds .sara-clamp). */
body.sara-movers .sara-clamp {
	max-height: 170px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 55%, transparent);
	mask-image: linear-gradient(#000 55%, transparent);
}

body.sara-movers .sara-toggle {
	display: inline-flex;
	margin: 4px 0 8px;
	padding: 8px 16px;
	border: 1px solid var(--sm-line);
	border-radius: 999px;
	background: var(--sm-card);
	color: var(--sm-ink);
	font: 700 14px var(--sm-font);
	cursor: pointer;
}

body.sara-movers .sara-toggle:hover {
	border-color: var(--sm-green);
	color: var(--sm-green);
}

/* Stacked cards (runtime.js adds .sara-stack): each card sticks a little lower than the one
   before, so the next card slides over it and earlier ones hide behind. */
@media (min-width: 1025px) {
	body.sara-movers .sara-stack .sara-feature {
		position: sticky;
		top: calc(120px + var(--sara-stack-index, 0) * 14px);
		box-shadow: 0 -8px 24px -12px rgb(11 37 69 / .18), var(--sm-shadow-sm);
	}
}

/* ---------- Heading + text pairs as cards, "Our moving process" numbered (content-cards.php) ---------- */

body.sara-movers :is(.e-con, .e-con-inner):has(> .sara-pair),
body.sara-movers :is(.e-con, .e-con-inner):has(> .e-con > .sara-pair) {
	gap: 20px !important;
}

body.sara-movers .sara-pair {
	justify-content: flex-start !important;
	gap: 8px !important;
	padding: 22px 24px !important;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-card);
	box-shadow: var(--sm-shadow-sm);
}

body.sara-movers .elementor:not(.elementor-location-header):not(.elementor-location-footer) .sara-pair :is(h2, h3).elementor-heading-title {
	font-size: 19px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
}

body.sara-movers .sara-pair .elementor-widget-text-editor :is(p, ul, ol) {
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.65;
}

/* Steps sit in one row of four, numbered 01–04; the rows Elementor wrapped them in step aside. */
body.sara-movers .sara-steps {
	counter-reset: sara-step;
}

body.sara-movers .sara-steps > .e-con-inner,
body.sara-movers .sara-steps:not(:has(> .e-con-inner)) {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px !important;
}

body.sara-movers .sara-steps > .e-con-inner > .e-con:has(> .sara-pair),
body.sara-movers .sara-steps > .e-con:has(> .sara-pair) {
	display: contents !important;
}

body.sara-movers .sara-steps > .e-con-inner > :not(.sara-pair):not(:has(> .sara-pair)) {
	grid-column: 1 / -1;
}

body.sara-movers .sara-steps .sara-pair {
	counter-increment: sara-step;
	width: auto !important;
}

body.sara-movers .sara-steps .sara-pair .elementor-heading-title::before {
	content: counter(sara-step, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: var(--sm-green-50);
	color: var(--sm-green-600);
	font-size: 16px;
	font-weight: 900;
}

/* Steps written as one text block (bold label + paragraph) are numbered the same way; only its first
   grid, as a later sub-heading in the block starts unrelated cards. */
body.sara-movers .sara-steps-text .sara-feature-grid:first-of-type {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	counter-reset: sara-step;
}

body.sara-movers .sara-steps-text .sara-feature-grid:first-of-type .sara-feature {
	counter-increment: sara-step;
}

body.sara-movers .sara-steps-text .sara-feature-grid:first-of-type .sara-feature__title {
	flex-direction: column;
	gap: 14px;
}

body.sara-movers .sara-steps-text .sara-feature-grid:first-of-type .sara-feature__title::before {
	content: counter(sara-step, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 12px;
	background: var(--sm-green-50);
	color: var(--sm-green-600);
	font-size: 16px;
	font-weight: 900;
}

@media (max-width: 1024px) {
	body.sara-movers .sara-steps > .e-con-inner,
	body.sara-movers .sara-steps:not(:has(> .e-con-inner)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	body.sara-movers .sara-steps > .e-con-inner,
	body.sara-movers .sara-steps:not(:has(> .e-con-inner)) {
		grid-template-columns: 1fr;
	}
}

/* Step cards flip on hover or keyboard focus (runtime.js adds .sara-flip): number and title on the
   front, the description on the back in logo blue. Touch screens and reduced motion keep both
   sides showing as a plain card. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	body.sara-movers .sara-flip {
		display: grid !important;
		gap: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		perspective: 1000px;
		outline: none;
	}

	body.sara-movers .sara-flip > :is(.sara-flip__front, .sara-flip__back) {
		grid-area: 1 / 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: auto !important;
		margin: 0 !important;
		padding: 22px 24px !important;
		border: 1px solid var(--sm-line);
		border-radius: var(--sm-radius-sm);
		background: var(--sm-card);
		box-shadow: var(--sm-shadow-sm);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transition: transform .6s ease;
	}

	body.sara-movers .sara-flip > .sara-flip__back {
		border-color: var(--sm-blue);
		background: var(--sm-blue) !important;
		transform: rotateY(180deg);
	}

	body.sara-movers .sara-flip > .sara-flip__back :is(p, li, span, strong, b, a) {
		color: #fff !important;
	}

	body.sara-movers .sara-flip > .sara-flip__back :is(p, ul, ol):last-child {
		margin-bottom: 0 !important;
	}

	body.sara-movers .sara-flip:is(:hover, :focus-visible) > .sara-flip__front {
		transform: rotateY(-180deg);
	}

	body.sara-movers .sara-flip:is(:hover, :focus-visible) > .sara-flip__back {
		transform: rotateY(0);
	}

	body.sara-movers .sara-flip:focus-visible > .sara-flip__back {
		outline: 3px solid var(--sm-green);
		outline-offset: 2px;
	}
}

/* ---------- Homepage services: one grid of six equal cards ---------- */

body.sara-movers [data-id="88ba7f1"] > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px !important;
}

body.sara-movers [data-id="88ba7f1"] > .e-con-inner > .e-con {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Desktop: the first row of service cards holds below the header while the second row slides
   up over it, instead of the whole grid scrolling away together. */
@media (min-width: 1025px) {
	body.sara-movers [data-id="88ba7f1"] > .e-con-inner > .e-con:nth-child(-n+3) {
		position: sticky;
		top: 110px;
		z-index: 1;
	}

	body.sara-movers [data-id="88ba7f1"] > .e-con-inner > .e-con:nth-child(n+4) {
		position: relative;
		z-index: 2;
	}

	body.sara-movers [data-id="88ba7f1"] > .e-con-inner > .e-con:nth-child(n+4) .elementor-image-box-wrapper {
		box-shadow: 0 -14px 32px -14px rgb(11 37 69 / .28), var(--sm-shadow-sm);
	}
}

body.sara-movers [data-id="88ba7f1"] .elementor-image-box-img {
	width: 100% !important;
}

body.sara-movers [data-id="88ba7f1"] .elementor-image-box-img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (max-width: 1024px) {
	body.sara-movers [data-id="88ba7f1"] > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	body.sara-movers [data-id="88ba7f1"] > .e-con-inner {
		grid-template-columns: 1fr;
	}
}

/* ---------- Closing call to action on inner pages (footer.php) ---------- */

body.sara-movers .sara-cta {
	padding: 56px 24px;
	background: linear-gradient(135deg, var(--sm-blue) 0%, var(--sm-navy) 100%);
	color: #fff;
}

body.sara-movers .sara-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	max-width: 1140px;
	margin: 0 auto;
}

body.sara-movers .sara-cta__title {
	margin: 0 0 8px;
	color: #fff !important;
	font-size: clamp(26px, 1.4vw + 14px, 34px);
	font-weight: 800;
	line-height: 1.2;
}

body.sara-movers .sara-cta__text {
	max-width: 56ch;
	margin: 0;
	color: rgb(255 255 255 / .9);
	font-size: 17px;
}

body.sara-movers .sara-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

body.sara-movers .sara-cta__btn {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 26px;
	border: 2px solid rgb(255 255 255 / .8);
	border-radius: 999px;
	color: #fff !important;
	font-size: 16px;
	font-weight: 800;
	text-decoration: none !important;
	transition: transform .2s ease, background-color .2s ease;
}

body.sara-movers .sara-cta__btn:hover {
	transform: translateY(-2px);
	background: rgb(255 255 255 / .12);
}

body.sara-movers .sara-cta__btn--primary {
	border-color: transparent;
	background: var(--sm-gradient);
}

body.sara-movers .sara-cta__btn--primary:hover {
	background: var(--sm-gradient);
	filter: brightness(1.08);
}

@media (max-width: 600px) {
	body.sara-movers .sara-cta__btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ---------- Blog: page intro and equal-height cards ---------- */

body.sara-movers .sara-page-intro {
	max-width: 1140px;
	margin: 0 auto;
	padding: 56px 24px 8px;
}

body.sara-movers .sara-page-intro p {
	max-width: 640px;
	margin-top: 12px;
	font-size: 18px;
}

body.sara-movers .sara-blog-card .elementskit-post-image-card {
	display: flex !important;
	flex-direction: column;
}

body.sara-movers .sara-blog-card .elementskit-post-body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

body.sara-movers .sara-blog-card .btn-wraper {
	margin-top: auto;
	padding-top: 14px;
}

/* "Add an article" panel on the blog page, only shown to logged-in editors (articles.php). */
body.sara-movers .sara-article {
	margin-bottom: 28px;
}

body.sara-movers .sara-article__notice {
	margin: 0 0 12px;
	padding: 12px 16px;
	border-radius: var(--sm-radius-sm);
	background: var(--sm-green-50);
	color: var(--sm-ink);
	font-weight: 700;
}

body.sara-movers .sara-article__panel {
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-card);
	box-shadow: var(--sm-shadow-sm);
}

body.sara-movers .sara-article__panel > summary {
	padding: 16px 22px;
	color: var(--sm-ink);
	font-weight: 800;
	cursor: pointer;
}

body.sara-movers .sara-article__panel form {
	display: grid;
	gap: 16px;
	padding: 4px 22px 22px;
}

body.sara-movers .sara-article__panel label {
	display: grid;
	gap: 6px;
	color: var(--sm-ink);
	font-weight: 700;
}

body.sara-movers .sara-article__panel small {
	color: var(--sm-muted);
	font-weight: 400;
}

body.sara-movers .sara-article__panel :is(input:not([type="file"]), textarea) {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--sm-line);
	border-radius: 10px;
	background: var(--sm-surface);
	color: var(--sm-ink);
	font: 400 15px/1.5 var(--sm-font);
}

body.sara-movers .sara-article__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Edit / Archive / Restore / Delete, on blog cards, above an article and in the drafts list. */
body.sara-movers .sara-article__drafts {
	margin-top: 12px;
}

body.sara-movers .sara-article__drafts ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0 22px 18px;
	list-style: none;
}

body.sara-movers .sara-article__drafts li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 10px 0;
	border-top: 1px solid var(--sm-line);
	color: var(--sm-ink);
	font-weight: 700;
}

body.sara-movers .sara-article__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
}

body.sara-movers .sara-article__tools form {
	margin: 0;
}

/* !important: the imported theme styles every button as a large green pill. */
body.sara-movers .sara-article__tools .sara-article__tool {
	display: inline-flex;
	align-items: center;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 5px 12px !important;
	border: 1px solid var(--sm-line) !important;
	border-radius: 999px !important;
	background: var(--sm-card) !important;
	box-shadow: none !important;
	color: var(--sm-ink) !important;
	font: 700 13px/1.4 var(--sm-font) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
}

body.sara-movers .sara-article__tools .sara-article__tool:hover {
	border-color: var(--sm-green);
}

body.sara-movers .sara-article__tools .sara-article__tool--danger {
	color: #b42318 !important;
}

/* Above an article the bar sits in the content column, under the header. */
body.sara-movers main > .sara-article__tools {
	max-width: 1140px;
	margin: 16px auto 0;
	padding: 0 24px;
}

/* ---------- About Us page (sections written for it, in the page content) ---------- */

body.sara-movers .sara-about {
	padding: 64px 24px;
}

body.sara-movers .sara-about:nth-of-type(even) {
	background: var(--sm-soft);
}

body.sara-movers .sara-about__inner {
	max-width: 1140px;
	margin: 0 auto;
}

body.sara-movers .sara-about__eyebrow {
	margin: 0 0 8px;
	color: var(--sm-green-600);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

body.sara-movers .sara-about h2 {
	max-width: 760px;
	margin: 0 0 18px;
	color: var(--sm-ink);
	font-size: clamp(28px, 1.6vw + 16px, 40px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}

body.sara-movers .sara-about p {
	color: var(--sm-text);
	font-size: 16px;
	line-height: 1.7;
}

/* Who we are: text beside a photo, the key points under the text. */
body.sara-movers .sara-about__split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	gap: 48px;
}

body.sara-movers .sara-about__split .sara-welcome__points {
	margin: 24px 0 0;
}

body.sara-movers .sara-about figure {
	margin: 0;
}

body.sara-movers .sara-about figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--sm-radius);
	box-shadow: var(--sm-shadow);
}

body.sara-movers .sara-about__photo img {
	aspect-ratio: 4 / 3;
}

/* Mission and values: two panels side by side. */
body.sara-movers .sara-about__panels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

body.sara-movers .sara-about__panel {
	padding: 32px;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	background: var(--sm-card);
	box-shadow: var(--sm-shadow-sm);
}

body.sara-movers .sara-about__panel h2 {
	font-size: clamp(24px, 1vw + 16px, 30px);
}

body.sara-movers .sara-about__panel p:last-child {
	margin-bottom: 0;
}

body.sara-movers .sara-about__ticks {
	display: grid;
	gap: 12px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

body.sara-movers .sara-about__ticks li {
	padding-left: 32px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%233a9a16'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") left center / 20px no-repeat;
	color: var(--sm-ink);
	font-size: 16px;
	font-weight: 700;
}

/* Area pages (Movers in Downtown Dubai and the rest) use the About Us sections above, plus a row of
   link chips for services and nearby areas, and a full-width FAQ list. */
body.sara-movers .sara-area__label {
	margin: 24px 0 10px;
	color: var(--sm-muted);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

body.sara-movers .sara-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sara-movers .sara-links a {
	display: block;
	padding: 8px 16px;
	border: 1px solid var(--sm-line);
	border-radius: 999px;
	background: var(--sm-card);
	color: var(--sm-ink) !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	transition: border-color .2s ease, color .2s ease;
}

body.sara-movers .sara-links a:hover {
	border-color: var(--sm-green);
	color: var(--sm-green) !important;
}

body.sara-movers .sara-area .sara-about__ticks {
	margin-top: 4px;
}

body.sara-movers .sara-area__faq {
	display: grid;
	gap: 12px;
}

/* Pricing page: starting prices table ([sara_prices], prices.php). */
body.sara-movers .sara-prices {
	width: 100%;
	max-width: 720px;
	margin: 20px 0 0;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--sm-card);
	font-size: 16px;
}

body.sara-movers .sara-prices :is(th, td) {
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--sm-line);
	background: none;
	color: var(--sm-ink);
	text-align: left;
}

body.sara-movers .sara-prices tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

body.sara-movers .sara-prices thead th {
	background: var(--sm-soft);
	color: var(--sm-muted);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

body.sara-movers .sara-prices thead th:last-child {
	text-align: right;
}

body.sara-movers .sara-prices tbody td {
	color: var(--sm-green);
	font-weight: 800;
	text-align: right;
}

body.sara-movers .sara-prices tbody td.sara-prices__survey {
	color: var(--sm-muted);
	font-weight: 600;
}

body.sara-movers .sara-prices__note {
	margin-top: 16px;
	color: var(--sm-muted);
	font-size: 14px;
}

body.sara-movers .sara-area__faq h2 {
	margin-bottom: 8px;
}

/* Contact page: contact cards beside the quote form; "What happens next" reuses the service steps. */
body.sara-movers .sara-reach__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 40px;
}

body.sara-movers .sara-reach__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

body.sara-movers .sara-reach__cards :is(a, div) {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-card);
	box-shadow: var(--sm-shadow-sm);
	text-decoration: none !important;
	transition: border-color .2s ease;
}

body.sara-movers .sara-reach__cards a:hover {
	border-color: var(--sm-green);
}

body.sara-movers .sara-reach__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--sm-green-50);
	color: var(--sm-green-600);
}

body.sara-movers .sara-reach__icon svg {
	width: 20px;
	height: 20px;
}

body.sara-movers .sara-reach__label {
	display: block;
	color: var(--sm-muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

body.sara-movers .sara-reach__value {
	display: block;
	margin-top: 2px;
	color: var(--sm-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

body.sara-movers .sara-reach__form {
	padding: 28px;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	background: var(--sm-card);
	box-shadow: var(--sm-shadow);
}

body.sara-movers .sara-reach__form h2 {
	font-size: clamp(24px, 1vw + 16px, 30px);
}

/* A shorter message box keeps the form close to the height of the column beside it. */
body.sara-movers .sara-reach__form textarea {
	min-height: 0;
	height: 100px;
}

/* The quote form draws its own card elsewhere; inside this card it would be a box within a box. */
body.sara-movers .sara-reach__form .sara-quote-form {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* "What happens next", numbered, under the contact cards. */
body.sara-movers .sara-reach__steps {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sara-reach-step;
}

body.sara-movers .sara-reach__steps li {
	position: relative;
	padding-left: 44px;
	color: var(--sm-text);
	font-size: 15px;
	line-height: 1.55;
	counter-increment: sara-reach-step;
}

body.sara-movers .sara-reach__steps li::before {
	content: counter(sara-reach-step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sm-green-50);
	color: var(--sm-green-600);
	font-size: 14px;
	font-weight: 900;
}

body.sara-movers .sara-reach__steps strong {
	color: var(--sm-ink);
}

@media (max-width: 1024px) {
	body.sara-movers .sara-reach__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	body.sara-movers .sara-reach__cards {
		grid-template-columns: 1fr;
	}

	body.sara-movers .sara-reach__form {
		padding: 20px;
	}
}

/* Legal pages (legal.php): readable text column, "Last updated" line and the editors' edit bar. */
body.sara-movers .sara-legal__updated {
	margin: -8px 0 24px;
	color: var(--sm-muted) !important;
	font-size: 14px !important;
}

body.sara-movers .sara-legal__body {
	max-width: 860px;
	border-radius: var(--sm-radius-sm);
	outline: none;
}

body.sara-movers .sara-legal__body[contenteditable="true"] {
	padding: 16px 20px;
	box-shadow: 0 0 0 2px var(--sm-green);
}

body.sara-movers .sara-legal__body h2 {
	margin: 32px 0 10px;
	font-size: clamp(22px, .8vw + 16px, 28px);
}

body.sara-movers .sara-legal__body h3 {
	margin: 24px 0 8px;
	color: var(--sm-ink);
	font-size: 19px;
	font-weight: 800;
}

body.sara-movers .sara-legal__body :is(ul, ol) {
	margin: 0 0 16px;
	padding-left: 22px;
	color: var(--sm-text);
	line-height: 1.7;
}

body.sara-movers .sara-legal__body li {
	margin-bottom: 6px;
}

body.sara-movers .sara-legal-editor {
	position: sticky;
	top: var(--sara-head, 80px);
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 860px;
	margin: 0 0 20px;
	padding: 10px;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-card);
	box-shadow: var(--sm-shadow-sm);
}

body.sara-movers .sara-legal-editor__tools {
	display: none;
	flex-wrap: wrap;
	gap: 6px;
}

body.sara-movers .sara-legal-editor.is-editing .sara-legal-editor__tools {
	display: flex;
}

body.sara-movers .sara-legal-editor.is-editing .sara-legal-editor__start {
	display: none;
}

/* !important: the imported theme styles every button as a large green pill. */
body.sara-movers .sara-legal-editor button {
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 6px 12px !important;
	border: 1px solid var(--sm-line) !important;
	border-radius: 999px !important;
	background: var(--sm-card) !important;
	box-shadow: none !important;
	color: var(--sm-ink) !important;
	font: 700 13px/1.4 var(--sm-font) !important;
	text-transform: none !important;
	cursor: pointer;
}

body.sara-movers .sara-legal-editor :is(.sara-legal-editor__start, .sara-legal-editor__save) {
	border-color: transparent !important;
	background: var(--sm-gradient) !important;
	color: #fff !important;
}

body.sara-movers .sara-legal-editor__saved {
	color: var(--sm-green-600);
	font-weight: 800;
}

/* Service pages (service_content.py): the same sections, plus numbered "How it works" steps. */
body.sara-movers .sara-service__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: sara-service-step;
}

body.sara-movers .sara-service__steps li {
	padding: 22px;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-card);
	box-shadow: var(--sm-shadow-sm);
	counter-increment: sara-service-step;
}

body.sara-movers .sara-service__steps li::before {
	content: counter(sara-service-step, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: var(--sm-green-50);
	color: var(--sm-green-600);
	font-size: 15px;
	font-weight: 900;
}

body.sara-movers .sara-service__steps h3 {
	margin: 0 0 6px;
	color: var(--sm-ink);
	font-size: 18px;
	font-weight: 800;
}

body.sara-movers .sara-service__steps p {
	margin: 0;
	font-size: 15px;
}

/* Team and fleet: the photos are wide panoramas, so each is shown whole at its own shape: the team
   photo across the full width, the three fleet photos in a row under it. */
body.sara-movers .sara-about__gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 28px;
}

body.sara-movers .sara-about__gallery-main {
	grid-column: 1 / -1;
}

body.sara-movers .sara-about__gallery img {
	height: auto;
}

@media (max-width: 1024px) {
	body.sara-movers .sara-about__split,
	body.sara-movers .sara-about__panels {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 600px) {
	body.sara-movers .sara-about {
		padding: 44px 16px;
	}

	body.sara-movers .sara-about__panel {
		padding: 24px;
	}

	body.sara-movers .sara-about__split .sara-welcome__points {
		grid-template-columns: 1fr;
	}
}

/* ---------- Homepage "Areas we serve" (areas.php) ---------- */

body.sara-movers .sara-areas {
	max-width: 1140px;
	margin: 56px auto;
	padding: 0 24px;
	text-align: center;
}

body.sara-movers .sara-areas h2 {
	margin: 0 0 8px;
	color: var(--sm-ink);
}

body.sara-movers .sara-areas p {
	margin: 0 auto 24px;
	color: var(--sm-text);
}

body.sara-movers .sara-areas__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sara-movers .sara-areas__list a {
	display: block;
	padding: 9px 18px;
	border: 1px solid var(--sm-line);
	border-radius: 999px;
	background: var(--sm-card);
	color: var(--sm-ink);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

body.sara-movers .sara-areas__list a:hover {
	border-color: var(--sm-green);
	color: var(--sm-green);
}

/* Each area button drifts round a small circle, out of step with its neighbours, so the group
   seems to float. It holds still under the pointer, and not at all for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	body.sara-movers .sara-areas__list li {
		animation: sara-float 6s ease-in-out infinite;
		animation-delay: calc(var(--i, 0) * -0.45s);
	}

	body.sara-movers .sara-areas__list li:hover {
		animation-play-state: paused;
	}
}

/* Homepage hero: area links orbiting the logo on the right of the text (areas.php). Two rings turn
   in opposite directions and every link turns back against its ring, so the names stay upright.
   It keeps turning under the pointer (the owner's choice) and holds still only for reduced
   motion. On screens too narrow for it, the floating-buttons block lists the areas instead. */
body.sara-movers .sara-orbit {
	display: none;
}

@media (min-width: 1025px) {
	body.sara-movers.home .sara-hero__inner {
		position: relative;
	}

	body.sara-movers.home .sara-hero :is(.sara-hero__title, .sara-hero__lead) {
		max-width: 540px;
	}

	body.sara-movers.home .sara-areas {
		display: none;
	}

	/* A darker right side behind the orbit, so its rings and names stand out from the photo. */
	body.sara-movers.home .sara-hero::before {
		background: linear-gradient(90deg, rgb(10 44 85 / .92) 0%, rgb(10 44 85 / .75) 45%, rgb(10 44 85 / .6) 100%);
	}

	/* Flush with the right edge of the content; the outer names reach about 40px past it. */
	body.sara-movers .sara-orbit {
		--inner: 112px;
		--outer: 192px;
		display: block;
		position: absolute;
		top: 50%;
		right: 0;
		width: 420px;
		height: 420px;
		transform: translateY(-50%);
	}

	/* The guide circles are drawn over the inner ring; clicks pass through them to its links. */
	body.sara-movers .sara-orbit__guide {
		pointer-events: none;
		position: absolute;
		top: 50%;
		left: 50%;
		border: 1.5px dashed rgb(255 255 255 / .35);
		border-radius: 50%;
		transform: translate(-50%, -50%);
	}

	body.sara-movers .sara-orbit__guide--inner {
		width: calc(var(--inner) * 2);
		height: calc(var(--inner) * 2);
	}

	body.sara-movers .sara-orbit__guide--outer {
		width: calc(var(--outer) * 2);
		height: calc(var(--outer) * 2);
		border-style: solid;
		border-color: rgb(255 255 255 / .18);
	}

	/* Each ring covers the whole orbit; letting clicks pass through it keeps the inner ring's
	   links (under the outer ring) clickable. Only the links themselves take the pointer. */
	body.sara-movers .sara-orbit__ring {
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	body.sara-movers .sara-orbit__ring--inner {
		--r: var(--inner);
		--dur: 40s;
	}

	body.sara-movers .sara-orbit__ring--outer {
		--r: var(--outer);
		--dur: 60s;
	}

	body.sara-movers .sara-orbit__node {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
	}

	body.sara-movers .sara-orbit__spin {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
	}

	body.sara-movers .sara-orbit__node a {
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-50%, -50%);
		padding: 7px 14px;
		border: 1px solid rgb(255 255 255 / .6);
		border-radius: 999px;
		background: rgb(255 255 255 / .94);
		box-shadow: 0 10px 24px rgb(4 20 40 / .28);
		/* Fixed navy, not the theme ink, which turns light in dark mode on these white pills. */
		color: #0b2545 !important;
		font-size: 13px;
		font-weight: 800;
		white-space: nowrap;
		text-decoration: none !important;
		pointer-events: auto;
		transition: background .2s ease, color .2s ease;
	}

	body.sara-movers .sara-orbit__node a:hover,
	body.sara-movers .sara-orbit__node a:focus-visible {
		background: var(--sm-green);
		color: #fff !important;
	}

	body.sara-movers .sara-orbit__core {
		position: absolute;
		top: 50%;
		left: 50%;
		display: grid;
		place-content: center;
		justify-items: center;
		gap: 2px;
		width: 104px;
		height: 104px;
		border: 3px solid var(--sm-green);
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 0 0 8px rgb(255 255 255 / .14), 0 18px 40px rgb(4 20 40 / .35);
		transform: translate(-50%, -50%);
	}

	body.sara-movers .sara-orbit__core img {
		width: 72px;
		height: auto;
	}

	/* On the white centre in both themes, so a fixed dark green rather than the theme token. */
	body.sara-movers .sara-orbit__core span {
		color: #2c7a10;
		font-size: 10px;
		font-weight: 900;
		letter-spacing: .06em;
		text-transform: uppercase;
	}
}

/* Small laptops: the same orbit, a little smaller, so it clears the text. */
@media (min-width: 1025px) and (max-width: 1279px) {
	body.sara-movers .sara-orbit {
		right: 20px;
		transform: translateY(-50%) scale(.82);
		transform-origin: right center;
	}

	body.sara-movers.home .sara-hero :is(.sara-hero__title, .sara-hero__lead) {
		max-width: 470px;
	}
}

@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	body.sara-movers .sara-orbit__ring,
	body.sara-movers .sara-orbit__spin {
		animation: sara-orbit var(--dur) linear infinite;
	}

	body.sara-movers .sara-orbit__ring--outer,
	body.sara-movers .sara-orbit__ring--inner .sara-orbit__spin {
		animation-direction: reverse;
	}
}

@keyframes sara-orbit {
	to { transform: rotate(360deg); }
}

@keyframes sara-float {
	0%, 100% { transform: translate(0, -4px); }
	25% { transform: translate(4px, 0); }
	50% { transform: translate(0, 4px); }
	75% { transform: translate(-4px, 0); }
}


/* ---------- Phones and tablets ---------- */

@media (max-width: 1024px) {
	/* "We accept all major cards" strip above the header: pushes the content down for little value. */
	body.sara-movers .elementor-element-bc5d833 {
		display: none !important;
	}

	/* The homepage quote form was hidden below desktop; show it before the welcome text. */
	body.sara-movers .elementor-element-9aed85a .elementor-element-6978ea9 {
		display: flex !important;
		order: -1;
	}
}

/* It was also hidden on small laptops (1025–1200px, Elementor's "tablet extra"): show it there
   too, beside the welcome text as on larger screens. */
@media (min-width: 1025px) and (max-width: 1200px) {
	body.sara-movers .elementor-element-9aed85a .elementor-element-6978ea9 {
		display: flex !important;
	}
}

@media (max-width: 767px) {
	body.sara-movers .sara-hero {
		min-height: 0;
		padding: 48px 18px 40px;
	}

	body.sara-movers .sara-hero::before {
		background: linear-gradient(180deg, rgb(10 44 85 / .78) 0%, rgb(10 44 85 / .92) 100%);
	}

	body.sara-movers .sara-hero__lead {
		font-size: 16px;
	}

	/* Wide content tables scroll inside their own box instead of widening the page. */
	body.sara-movers main table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	/* Villa Movers: an imported 8px left margin on a full-width section. */
	body.sara-movers .elementor-element-b35ea15 {
		margin-left: 0 !important;
	}

	/* Homepage "Our Moving Process" steps: step titles were larger than section titles. */
	body.sara-movers .elementor-element-2857a8d :is(h2, h3, h4) {
		margin-top: 18px !important;
		font-size: 20px !important;
	}

	body.sara-movers .sara-hero__btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	/* Floating round buttons covered the text; dock them as a bottom bar instead. */
	body.sara-movers {
		padding-bottom: 56px;
	}

	body.sara-movers .sara-contact {
		bottom: 0;
		width: 50%;
		height: 56px;
		gap: 8px;
		border-radius: 0;
		font-size: 16px;
		font-weight: 800;
	}

	body.sara-movers .sara-contact:hover {
		transform: none;
	}

	body.sara-movers .sara-contact svg {
		width: 24px;
		height: 24px;
	}

	body.sara-movers .sara-whatsapp {
		left: 0;
	}

	body.sara-movers .sara-phone {
		right: 0;
	}

	body.sara-movers .sara-whatsapp::after {
		content: "WhatsApp";
	}

	body.sara-movers .sara-phone::after {
		content: "Call now";
	}

	body.sara-movers .sara-scroll-top {
		bottom: 70px;
		right: 14px;
	}
}

/* Elementor gives page sections only 10px of side padding on phones and tablets; text sat against the screen edge. */
@media (max-width: 1024px) {
	body.sara-movers .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .e-con.e-parent {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.sara-movers *,
	body.sara-movers *::before,
	body.sara-movers *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Service page layout (.sara-svc): intro, what's included, how it works, why us, FAQs ---------- */

body.sara-movers .sara-svc {
	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 24px 72px;
}

body.sara-movers .sara-svc__section {
	margin-top: 64px;
}

body.sara-movers .sara-svc h2 {
	margin: 0 0 24px;
	color: var(--sm-ink);
	font-size: clamp(28px, 1.6vw + 16px, 40px);
	font-weight: 800;
	line-height: 1.2;
}

body.sara-movers .sara-svc h3 {
	margin: 0 0 6px;
	color: var(--sm-ink);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
}

body.sara-movers .sara-svc p {
	max-width: 65ch;
	margin: 0 0 14px;
	color: var(--sm-body);
	font-size: 17px;
	line-height: 1.7;
}

body.sara-movers .sara-svc :is(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sara-movers .sara-svc__intro {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 48px;
	align-items: center;
}

body.sara-movers .sara-svc__photo {
	width: 100%;
	height: auto;
	border-radius: var(--sm-radius);
}

/* What's included: one line per item with a green tick. */
body.sara-movers .sara-svc__checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

body.sara-movers .sara-svc__checklist li {
	position: relative;
	padding: 16px 18px 16px 52px;
	border-radius: var(--sm-radius-sm);
	background: var(--sm-soft);
	color: var(--sm-body);
	font-size: 16px;
	line-height: 1.5;
}

body.sara-movers .sara-svc__checklist li::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 18px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sm-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

body.sara-movers .sara-svc__checklist strong {
	color: var(--sm-ink);
}

/* How it works: numbered steps; why us: short reasons. Both are card rows. */
body.sara-movers :is(.sara-svc__steps, .sara-svc__reasons) {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	counter-reset: sara-svc-step;
}

body.sara-movers :is(.sara-svc__steps, .sara-svc__reasons) li {
	padding: 22px;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-card);
}

body.sara-movers :is(.sara-svc__steps, .sara-svc__reasons) p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

body.sara-movers .sara-svc__steps li::before {
	content: counter(sara-svc-step, decimal-leading-zero);
	counter-increment: sara-svc-step;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--sm-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
}

body.sara-movers .sara-svc__reasons li {
	border-top: 4px solid var(--sm-green);
}

/* FAQs: native disclosure, no script needed. */
body.sara-movers .sara-svc__faqs {
	display: grid;
	gap: 12px;
	max-width: 860px;
}

body.sara-movers .sara-faq {
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-sm);
	background: var(--sm-card);
}

body.sara-movers .sara-faq summary {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	color: var(--sm-ink);
	font-size: 17px;
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}

body.sara-movers .sara-faq summary::-webkit-details-marker {
	display: none;
}

body.sara-movers .sara-faq summary::after {
	content: "+";
	color: var(--sm-green);
	font-size: 24px;
	line-height: 1;
}

body.sara-movers .sara-faq[open] summary::after {
	content: "−";
}

body.sara-movers .sara-faq p {
	margin: 0;
	padding: 0 22px 20px;
}

@media (max-width: 1024px) {
	body.sara-movers :is(.sara-svc__steps, .sara-svc__reasons) {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	body.sara-movers .sara-svc {
		padding: 8px 16px 56px;
	}

	body.sara-movers .sara-svc__section {
		margin-top: 48px;
	}

	body.sara-movers :is(.sara-svc__intro, .sara-svc__checklist, .sara-svc__steps, .sara-svc__reasons) {
		grid-template-columns: 1fr;
	}

	body.sara-movers .sara-svc__intro {
		gap: 24px;
	}
}

/* ---------- Image proportions ---------- */

/* Imported image blocks often have a fixed height that squashes the photo; show every content
   image at its own shape instead, whole and undistorted. */
body.sara-movers main :is(.elementor-widget-image, .elementor-image-box-img) img {
	height: auto !important;
	max-height: none !important;
}

body.sara-movers [data-id="88ba7f1"] .elementor-image-box-img img {
	aspect-ratio: 3 / 2 !important;
}

/* Blog cards: one shape for every card, closer to the photos' own, so less is cut off. */
body.sara-movers .elementskit-entry-thumb img {
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}