/*
 Theme Name: Beaver Movers
 Theme URI: https://example.com/
 Description: Beaver Movers child theme for Astra with a custom header based on Figma designs.
 Author: Your Name
 Author URI: https://example.com/
 Template: astra
 Version: 1.0.32
 Text Domain: beaver-movers
*/

:root {
	/* Color tokens from Figma */
	--bm-color-bg-page: #ffffff;
	--bm-color-bg-sky: #b9f6ff;
	--bm-color-bg-sky-soft: #beedf4;
	--bm-color-bg-cta: #a7f100;
	--bm-color-bg-cta-hover: #2c2008;
	--bm-color-bg-cta-soft: #d5fa86;
	--bm-color-bg-card-warm: #ffb8a2;
	--bm-color-bg-card-warm-hover: #FFE3DA;
	--bm-color-text-heading: #2c2008;
	--bm-color-text-main: #151515;
	--bm-color-text-body: #4f4f4f;
	--bm-color-text-muted: #828282;
	--bm-color-text-secondary: #585858;
	--bm-color-text-subtle: #767676;
	--bm-color-text-dark-soft: #2f2f2f;
	--bm-color-text-success: #166534;
	--bm-color-border-subtle: #959595;
	--bm-color-border-light: #d9d9d9;
	--bm-color-border-accent: #6a9900;

	/* Radius tokens */
	--bm-radius-card: 20px;
	--bm-radius-pill: 90px;
	--bm-radius-tag: 47px;
	--bm-radius-field: 8px;

	/* Spacing tokens */
	--bm-space-section-y: 4.5rem;
	--bm-space-section-y-tight: 3.25rem;

	/* Shadow tokens */
	--bm-shadow-card-soft: 0 22px 45px rgba(15, 23, 42, 0.12);

	/* Typography tokens (mapped to system stacks) */
	--bm-font-heading: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bm-font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Header typography (Figma: Crackajack / Cooper Hewitt) */
	--bm-font-brand: "Crackajack", Georgia, "Times New Roman", serif;
	--bm-font-nav: "Cooper Hewitt", "Outfit", var(--bm-font-body);
	--bm-header-height: 88px;
	/* Pre–JS / no-JS fallback for mobile drawer `top`; `header.js` sets `--bm-header-overlay-top` from the bar’s getBoundingClientRect().bottom. */
	--bm-header-mobile-overlay-top: var(--bm-header-height);
	--bm-header-logo-size: 32px;
	--bm-header-logo-height: 0.87;
	--bm-header-logo-spacing: 0.32px;
	--bm-header-nav-size: 16px;
	--bm-header-nav-weight: 500;
	--bm-header-cta-size: 14px;
	--bm-header-cta-spacing: 0.14px;
	--bm-header-cta-padding-y: 16px;
	--bm-header-cta-padding-x: 24px;
	--bm-color-cta-text: #000000;
	--bm-color-cta-text-hover: #ffffff;

	/* Moving Services nav — active / dropdown (Figma) */
	--bm-header-ms-accent: #ff6b00;
	--bm-header-ms-trigger-bg: #f3f4f6;
	--bm-header-dropdown-hover: #fce6df;

	/* 4 steps tab links — hover & selected (Figma 2001:1424 / 2001:1425) */
	--bm-color-moving-steps-tab-accent: #ff4600;
}

html {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--bm-color-bg-page);
}

body {
	overflow-x: hidden;
	max-width: 2200px;
	margin: 0 auto;
}

/* WebKit (iOS Safari, Chrome on Android): remove default blue/grey tap flash on links and controls */
*,
*::before,
*::after {
	-webkit-tap-highlight-color: transparent;
}

/*
 * In-page scroll targets (tabindex=-1): script focuses after hash/jump links so
 * screen readers land on the section. Suppress visible focus rings — not keyboard tab stops.
 */
#beaver-calculator:focus,
#beaver-calculator:focus-visible,
#beaver-faq-section:focus,
#beaver-faq-section:focus-visible {
	outline: none;
	box-shadow: none;
}

/* No drop shadow on button controls — cards/dialogs panels keep shadows elsewhere */
:is(button, input[type="button"], input[type="submit"], input[type="reset"], .wp-block-button__link) {
	box-shadow: none;
}

:is(button, input[type="button"], input[type="submit"], input[type="reset"], .wp-block-button__link):is(:hover, :focus, :focus-visible, :active) {
	box-shadow: none;
}

/* Basic header layout */
.beaver-header {
	position: sticky;
	top: 0;
	z-index: 999;
	height: var(--bm-header-height);
	background-color: var(--bm-color-bg-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: visible;
}

.beaver-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px;
	height: var(--bm-header-height);
	box-sizing: border-box;
	overflow: visible;
}

/* Left nav: Moving Services, Pricing */
.beaver-header__nav--left {
	margin-right: auto;
}

/* Right group: Blog, About Us, CTA */
.beaver-header__right {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-left: auto;
}

.beaver-header__nav--right .beaver-header__nav-list {
	gap: 32px;
}

/* Brand (center) */
.beaver-header__brand {
	position: absolute;
	left: 50%;
	top: 60%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	text-decoration: none;
	color: var(--bm-color-text-heading);
	transition: color 0.2s ease;
}

.beaver-header__brand:hover {
	color: #ff4600;
}

.beaver-header__brand:focus-visible {
	color: #ff4600;
	outline: 2px solid var(--bm-header-ms-accent);
	outline-offset: 4px;
}

.beaver-header__brand-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	font-family: var(--bm-font-brand);
	font-size: var(--bm-header-logo-size);
	font-weight: 400;
	line-height: var(--bm-header-logo-height);
	letter-spacing: var(--bm-header-logo-spacing);
	text-align: center;
}

.beaver-header__brand-name,
.beaver-header__brand-tagline {
	display: block;
	line-height: inherit;
}

/* Navigation */
.beaver-header__nav-list {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.beaver-header__nav-item {
	position: relative;
	display: flex;
	align-items: center;
	height: 40px;
	padding-top: 4px;
}

.beaver-header__nav-item a,
.beaver-header__nav-item--dropdown>button.beaver-header__nav-link--dropdown {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0;
	text-decoration: none;
	color: var(--bm-color-text-main);
	font-family: var(--bm-font-nav);
	font-size: var(--bm-header-nav-size);
	font-weight: var(--bm-header-nav-weight);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.beaver-header__nav-item--dropdown>button.beaver-header__nav-link--dropdown {
	padding-left: 10px;
}

.beaver-header__nav-item--dropdown>button.beaver-header__nav-link--dropdown {
	border: none;
	background: transparent;
	box-shadow: none;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	text-align: left;
}

/* Pricing, Blog, About Us — same hover as Moving Services (orange + underline + grey field) */
.beaver-header__nav-item:not(.beaver-header__nav-item--dropdown) {
	border-radius: 4px 4px 0 0;
	transition: background-color 0.15s ease;
}

/* Current page: same as link hover (orange + underline). Moving Services: only that — no grey field / chevron until you hover. */
.beaver-header__nav-item--current:not(.beaver-header__nav-item--dropdown)>a,
.beaver-header__nav-item--current:not(.beaver-header__nav-item--dropdown)>a:hover,
.beaver-header__nav-item--current:not(.beaver-header__nav-item--dropdown)>a:focus {
	color: var(--bm-header-ms-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--bm-header-ms-accent);
}

.beaver-header__nav-item--current.beaver-header__nav-item--dropdown>button .beaver-header__nav-label {
	color: var(--bm-header-ms-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--bm-header-ms-accent);
}

.beaver-header__nav-item:not(.beaver-header__nav-item--dropdown)>a:hover,
.beaver-header__nav-item:not(.beaver-header__nav-item--dropdown)>a:focus {
	color: var(--bm-header-ms-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--bm-header-ms-accent);
}

/* Moving Services — desktop dropdown (hover styles on li; label + chevron inside button) */
.beaver-header__nav-item--dropdown {
	position: relative;
	z-index: 2;
	align-items: center;
	border-radius: 4px 4px 0 0;
}

.beaver-header__nav-item--dropdown>.beaver-header__nav-link--dropdown {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 16px;
	text-decoration: none;
	border-radius: 4px 4px 0 0;
}

.beaver-header__nav-label {
	display: inline-block;
	color: inherit;
	transition: color 0.15s ease;
}

.beaver-header__nav-item--dropdown:hover:not(.beaver-header__nav-item--dropdown--dismissed) .beaver-header__nav-label,
.beaver-header__nav-item--dropdown:focus-within:not(.beaver-header__nav-item--dropdown--dismissed) .beaver-header__nav-label {
	color: var(--bm-header-ms-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--bm-header-ms-accent);
}

.beaver-header__chevron {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	justify-content: center;
	margin-top: 15px;

}

.beaver-header__chevron::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--bm-color-text-main);
	border-bottom: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.beaver-header__nav-item--dropdown:hover:not(.beaver-header__nav-item--dropdown--dismissed) .beaver-header__chevron::after,
.beaver-header__nav-item--dropdown:focus-within:not(.beaver-header__nav-item--dropdown--dismissed) .beaver-header__chevron::after {
	border-top: none;
	border-bottom: 5px solid var(--bm-header-ms-accent);
}

.beaver-header__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 100%;
	width: max-content;
	max-width: min(320px, 90vw);
	margin: 0;
	padding: 12px 0 16px;
	list-style: none;
	background-color: var(--bm-color-bg-page);
	border-radius: 0 0 12px 12px;
	box-shadow: var(--bm-shadow-card-soft);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity 0.18s ease,
		visibility 0.18s ease,
		transform 0.18s ease;
}

.beaver-header__nav-item--dropdown:hover:not(.beaver-header__nav-item--dropdown--dismissed) .beaver-header__dropdown,
.beaver-header__nav-item--dropdown:focus-within:not(.beaver-header__nav-item--dropdown--dismissed) .beaver-header__dropdown {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.beaver-header__dropdown-item {
	margin: 0;
	padding: 0;
}

.beaver-header__nav-item--dropdown a.beaver-header__dropdown-link {
	display: block;
	height: auto;
	min-height: 0;
	padding: 12px 20px;
	font-family: var(--bm-font-nav);
	font-size: var(--bm-header-nav-size);
	font-weight: var(--bm-header-nav-weight);
	line-height: 1.25;
	color: var(--bm-color-text-main);
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: background-color 0.12s ease;
}

.beaver-header__nav-item--dropdown a.beaver-header__dropdown-link:hover,
.beaver-header__nav-item--dropdown a.beaver-header__dropdown-link:focus {
	background-color: var(--bm-header-dropdown-hover);
	color: var(--bm-color-text-main);
	outline: none;
}

.beaver-header__nav-item--dropdown a.beaver-header__dropdown-link:focus-visible {
	outline: 2px solid var(--bm-header-ms-accent);
	outline-offset: -2px;
}

/* CTA phone pill — header, FAQ, footer */
.beaver-header__cta-phone,
.beaver-questions__phone-btn,
.beaver-footer__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 16px var(--bm-header-cta-padding-x);
	border-radius: var(--bm-radius-pill);
	background-color: var(--bm-color-bg-cta);
	color: var(--bm-color-cta-text);
	font-family: var(--bm-font-nav);
	font-size: var(--bm-header-cta-size);
	font-weight: var(--bm-header-nav-weight);
	letter-spacing: var(--bm-header-cta-spacing);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.beaver-header__cta-phone:hover,
.beaver-header__cta-phone:focus,
.beaver-questions__phone-btn:hover,
.beaver-questions__phone-btn:focus,
.beaver-footer__phone:hover,
.beaver-footer__phone:focus {
	background-color: var(--bm-color-bg-cta-hover);
	color: var(--bm-color-cta-text-hover);
}

.beaver-header__cta-number {
	line-height: 1;
}

.beaver-header__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 17px;
	color: inherit;
}

.beaver-header__cta-icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* Paths use markup fill="#000"; tie to inherited color so hover matches link text */
.beaver-header__cta-icon svg path {
	fill: currentColor;
	stroke: currentColor;
}

/* Invisible spacer for mobile centering (same width as toggle) */
.beaver-header__spacer {
	display: none;
	width: 2.25rem;
	flex-shrink: 0;
}

/* Mobile toggle */
.beaver-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--bm-color-text-main);
	transition: color 0.2s ease;
	position: absolute;
	right: 16px;
	top: 16px;
	box-shadow: none;
}

.beaver-header__toggle:hover,
.beaver-header__toggle:focus {
	color: var(--bm-color-text-heading);
	background-color: transparent;
}

.beaver-header__toggle:focus-visible {
	outline: 2px solid var(--bm-color-border-accent);
	outline-offset: 2px;
}

.beaver-header__toggle svg {
	display: block;
	width: 34px;
	height: 34px;
	transition: transform 0.2s ease;
}

/* Hide mobile nav on desktop */
.beaver-header__mobile-nav {
	display: none;
}

/* Responsive */
@media (max-width: 992px) {
	.beaver-header__inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 1024px) {
	.beaver-header {
		height: auto;
		min-height: 64px;
		--bm-header-overlay-top: var(--bm-header-mobile-overlay-top);
	}

	.beaver-header__inner {
		padding: 12px 16px;
		min-height: 64px;
		height: auto;
		flex-wrap: wrap;
		position: relative;
		z-index: 1001;
	}

	.beaver-header__spacer {
		display: none;
	}

	.beaver-header__toggle {
		display: inline-flex;
		order: 3;
	}

	/* Hide desktop nav on mobile – use dedicated mobile nav instead */
	.beaver-header__nav--left,
	.beaver-header__right {
		display: none !important;
	}

	.beaver-header__brand {
		order: 2;
		position: static;
		transform: none;
		flex: 1;
		justify-content: center;
	}

	/* Mobile nav drawer: slides in from the right → left (closes back to the right). Fixed below header bar so logo + toggle stay tappable */
	.beaver-header__mobile-nav {
		order: 4;
		position: fixed;
		top: var(--bm-header-overlay-top);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-height: none;
		background-color: var(--bm-color-bg-page);
		padding: 16px 12px calc(112px + env(safe-area-inset-bottom, 0px));
		gap: 8px;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		opacity: 1;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(100%);
		transition:
			transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0.35s;
	}

	.beaver-header--open .beaver-header__mobile-nav {
		visibility: visible;
		pointer-events: auto;
		transform: translateX(0);
		transition:
			transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0s;
	}

	@media (prefers-reduced-motion: reduce) {

		.beaver-header__mobile-nav {
			transition-duration: 0.01ms;
			transition-delay: 0ms;
		}

		.beaver-header--open .beaver-header__mobile-nav {
			transition-duration: 0.01ms;
			transition-delay: 0ms;
		}
	}

	.beaver-header__mobile-nav-list a {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		color: #151515;
		font-family: var(--bm-font-nav);
		font-size: 16px;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
	}

	.beaver-header__mobile-nav-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.beaver-header__mobile-nav-link {
		position: relative;
		gap: 8px;
	}

	.beaver-header__mobile-nav-list a.beaver-header__mobile-nav-link--current {
		border-left: 3px solid var(--bm-header-ms-accent);
		padding-left: 12px;
		color: var(--bm-header-ms-accent);
	}

	/* Moving Services trigger: current = accent + underline only (no left border) */
	.beaver-header__mobile-nav button.beaver-header__mobile-nav-link--current {
		border-left: 0;
		padding-left: 16px;
		color: var(--bm-header-ms-accent);
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-thickness: 2px;
		text-decoration-color: var(--bm-header-ms-accent);
	}

	.beaver-header__mobile-nav-chevron {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid currentColor;
		margin-left: auto;
		flex-shrink: 0;
		transform-origin: 50% 40%;
		transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"] .beaver-header__mobile-nav-chevron {
		transform: rotate(180deg);
	}

	.beaver-header__mobile-nav-trigger {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 12px 16px;
		color: #151515;
		font-family: var(--bm-font-nav);
		font-size: 16px;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		background: none;
		border: none;
		cursor: pointer;
		gap: 8px;
		text-align: left;
		border-radius: 8px;
		box-shadow: none;
		transition: color 0.2s ease;
	}

	.beaver-header__mobile-nav-trigger:focus,
	.beaver-header__mobile-nav-trigger:hover {
		color: var(--bm-color-text-main);
		outline: none;
		background-color: transparent;
	}

	.beaver-header__mobile-nav-trigger:focus-visible {
		outline: 2px solid var(--bm-header-ms-accent);
		outline-offset: 2px;
	}

	.beaver-header__mobile-submenu {
		--bm-mobile-submenu-max-h: 420px;
		list-style: none;
		margin: 0;
		padding-left: 24px;
		padding-right: 24px;
		padding-top: 0;
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		pointer-events: none;
		transition:
			max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.24s ease,
			padding-top 0.32s ease,
			padding-bottom 0.32s ease,
			visibility 0s linear 0.32s;
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu {
		max-height: var(--bm-mobile-submenu-max-h);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		padding-top: 6px;
		padding-bottom: 10px;
		transition:
			max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.26s ease 0.05s,
			padding-top 0.32s ease,
			padding-bottom 0.32s ease,
			visibility 0s linear 0s;
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu li {
		animation: bm-mobile-submenu-link-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards;
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu li:nth-child(1) {
		animation-delay: 0.02s;
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu li:nth-child(2) {
		animation-delay: 0.05s;
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu li:nth-child(3) {
		animation-delay: 0.08s;
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu li:nth-child(4) {
		animation-delay: 0.11s;
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu li:nth-child(5) {
		animation-delay: 0.14s;
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu li:nth-child(6) {
		animation-delay: 0.17s;
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu li:nth-child(7) {
		animation-delay: 0.2s;
	}

	.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu li:nth-child(8) {
		animation-delay: 0.23s;
	}

	@keyframes bm-mobile-submenu-link-in {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (prefers-reduced-motion: reduce) {

		.beaver-header__mobile-nav-trigger,
		.beaver-header__mobile-nav-chevron,
		.beaver-header__mobile-submenu {
			transition-duration: 0.01ms;
			transition-delay: 0ms;
		}

		.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu {
			transition-duration: 0.01ms;
			transition-delay: 0ms;
		}

		.beaver-header__mobile-nav-trigger[aria-expanded="true"]+.beaver-header__mobile-submenu li {
			animation-duration: 0.01ms;
			animation-delay: 0ms;
		}
	}

	.beaver-header__mobile-submenu a {
		display: flex;
		align-items: center;
		padding: 0 8px;
		min-height: 40px;
		color: #1a1f29;
		font-family: var(--bm-font-nav);
		font-size: 14px;
		font-weight: 500;
		text-transform: uppercase;
		text-decoration: none;
	}

	.beaver-header__mobile-submenu a:hover,
	.beaver-header__mobile-submenu a:focus {
		background-color: rgba(0, 0, 0, 0.04);
	}

	.beaver-header__mobile-cta-wrap {
		padding: 24px 12px;
		background: #fff;
		box-shadow:
			0 24px 38px 0 rgba(0, 0, 0, 0.14),
			0 9px 46px 0 rgba(0, 0, 0, 0.12),
			0 11px 15px 0 rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/* Same styles as desktop .beaver-header__cta-phone; full-width in the drawer shell */
	.beaver-header__cta-phone.beaver-header__mobile-cta {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.beaver-header__brand-text {
		font-family: var(--bm-font-brand);
		font-size: 24px;
		font-weight: 400;
		line-height: 0.87;
		letter-spacing: 0.24px;
	}

	body:has(.beaver-header--open) {
		overflow: hidden;
	}
}

/* Home / front page layout */
.beaver-home {
	background-color: var(--bm-color-bg-page);
	font-family: var(--bm-font-body);
}

/*
 * Inner pages that reuse the homepage sections (e.g. page-local-moving-3) sit inside
 * Astra’s .ast-container, which caps width. Break out to full viewport like the front page.
 */
body:not(.home) .site-content>.ast-container:has(#primary .beaver-home),
.site-content>.ast-container:has(#primary .beaver-blog-page),
.site-content>.ast-container:has(#primary .beaver-article-page) {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.beaver-section__title {
	font-size: 32px;
	font-weight: 700;
	color: var(--bm-color-text-main);
	margin-bottom: 0.75rem;
	font-family: var(--bm-font-heading);
	text-align: center;
	text-transform: uppercase;
}

.beaver-section--reasons {
	background-color: var(--bm-color-bg-page);
}

/* Shared section structure */
.beaver-section {
	padding: var(--bm-space-section-y-tight) 0 var(--bm-space-section-y);
}

/* Carousel arrow (Figma 1712:939) – shared across reasons, premier-movers, packages, blogs */
.beaver-carousel-arrow {
	display: block;
	flex-shrink: 0;
	color: var(--bm-color-text-main);
	transition: color 0.2s ease;
}

.beaver-carousel-arrow--prev {
	transform: rotate(180deg);
}

.beaver-reasons__nav,
.beaver-premier-movers__nav,
.beaver-packages__nav,
.beaver-blogs__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	background: var(--bm-color-bg-page);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--bm-color-text-main);
	transition: opacity 0.2s ease;
	padding: 0;
	opacity: 0.8;
}

.beaver-reasons__nav:hover,
.beaver-premier-movers__nav:hover,
.beaver-packages__nav:hover,
.beaver-blogs__nav:hover {
	opacity: 0.9;
	background-color: white;
	color: var(--bm-color-text-main);
	opacity: 1;
	outline: none;
	border: none;
}

.beaver-reasons__nav--prev,
.beaver-premier-movers__nav--prev,
.beaver-packages__nav--prev,
.beaver-blogs__nav--prev {
	left: 12px;
}

.beaver-reasons__nav--next,
.beaver-premier-movers__nav--next,
.beaver-packages__nav--next,
.beaver-blogs__nav--next {
	right: 12px;
}


/* Main pic beaver (hero) */
.beaver-main-pic {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding-top: 8px;
	/* Inherit full width of section so children can be sized predictably (see `__art`). */
	width: 100%;
}

/*
 * Reserve space on wide viewports: the parent uses `align-items: center`, so this flex
 * item was shrink-to-fit and jumped when the image finished decoding. We stretch to
 * the row width, cap to the design artboard, and paint the image in an absolute layer
 * so decode never changes layout height/width.
 */
.beaver-main-pic__art {
	align-self: stretch;
	width: calc(100% - 64px);
	max-width: 1376px;
	margin: 0 auto;
	position: relative;
	aspect-ratio: 1376 / 447;
	overflow: hidden;
}

@media (min-width: 769px) {

	/* Fill the fixed aspect box; `picture` must stretch so the inner `img` can cover. */
	.beaver-main-pic__art>picture {
		position: absolute;
		inset: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		display: block;
	}

	.beaver-main-pic__art picture>img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	}

	.beaver-main-pic__art>img {
		position: absolute;
		inset: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	}
}

.beaver-main-pic__headline {
	font-family: var(--bm-font-brand);
	font-size: 60px;
	font-weight: 400;
	line-height: 0.9;
	color: var(--bm-color-text-heading);
	margin: 0;
	max-width: 450px;
}

/* Line break only ≤600px; single line on wider viewports */
.beaver-main-pic__headline-br {
	display: none;
}

/* Three-line hero: always stack (e.g. About Us) */
.beaver-main-pic__headline-br--permanent {
	display: block;
}

@media (min-width: 601px) {
	.beaver-main-pic__headline-line--second::before {
		content: ' ';
		white-space: pre;
	}
}

@media (max-width: 1240px) {
	.beaver-main-pic__headline {
		font-size: 48px;
	}
}

@media (max-width: 1140px) {
	.beaver-main-pic__headline {
		font-size: 40px;
	}
}

@media (max-width: 1078px) {
	.beaver-main-pic__headline {
		font-size: 32px;
	}
}


/* Mobile styles – Figma 2129:910 (402px) */
@media (max-width: 1024px) {

	/* Header: 64px height (Figma header_mobile), auto when menu open */
	.beaver-header {
		height: auto;
		min-height: 64px;
	}

	.beaver-header__inner {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Global: 12px horizontal padding */
	.beaver-section__inner {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Hero headline: Crackajack 32px */
	.beaver-main-pic__headline {
		font-size: 32px;
		line-height: 0.9;
		max-width: 780px;
		text-align: center;
		margin: 0 auto;
	}

}

@media (max-width: 768px) {
	.beaver-main-pic {
		gap: 16px;
	}

	.beaver-section__inner {
		padding-left: 12px;
		padding-right: 12px;
	}

	.beaver-main-pic__headline {
		max-width: none;
		text-align: center;
	}

	/* Match mobile hero artboard (~378×244) so slot height is stable before decode (about-us-hero-mobile.svg). */
	.beaver-main-pic__art {
		position: relative;
		padding: 0 12px;
		width: 100%;
		aspect-ratio: 378 / 244;
	}

	/* Undo wide-viewport absolute layer; fill reserved aspect-ratio box */
	.beaver-main-pic__art>picture {
		position: static;
		inset: auto;
		display: block;
		width: 100%;
		height: 100%;
	}

	.beaver-main-pic__art>img {
		position: static;
		inset: auto;
		width: 100%;
		height: 100%;
	}

	.beaver-main-pic__art picture>img,
	.beaver-main-pic__art>img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 65% center;
	}
}

@media (max-width: 736px) {

	/* Section titles: 20px */
	.beaver-section__title {
		font-size: 20px;
		margin-top: 8px;
		margin-bottom: 24px;
	}
}

@media (max-width: 600px) {
	.beaver-main-pic__headline-br {
		display: block;
	}

	.beaver-main-pic__headline-line--second::before {
		content: none;
	}
}

.beaver-quote-dialog__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: bottom right;
}

.beaver-quote-dialog__title {
	font-family: var(--bm-font-nav);
	font-size: 20px;
	font-weight: 600;
	line-height: normal;
	color: var(--bm-color-text-heading);
	text-transform: uppercase;
	margin: 0 0 20px;
}

.beaver-quote-dialog__text {
	font-family: var(--bm-font-nav);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.125;
	color: var(--bm-color-text-main);
	margin: 0;
}

/* iOS Safari: focus zoom on fields with computed font-size < 16px. !important beats later component CSS (e.g. calculator). */
@media (max-width: 768px) {

	input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
	textarea,
	select {
		font-size: 16px !important;
	}
}