/* =====================================================================
   Top Grade Movers — components/sections.css
   Reusable section primitives shared across templates (homepage +
   inner pages). Loaded globally after global.css so any template can
   drop these class names in. Page-specific overrides live in the
   matching pages/*.css file.
   ===================================================================== */

/* ---------------------------------------------------------------
   Section shells (light / dark backgrounds)
   --------------------------------------------------------------- */
.section-dark {
	background: var(--dark-bg);
	color: var(--dark-text);
	padding-block: var(--section-spacing);
}

.section-light {
	background: var(--light-bg);
	padding-block: var(--section-spacing);
}

/* ---------------------------------------------------------------
   Mission / Vision (dark, 2 col with centre divider + dot)
   --------------------------------------------------------------- */

@media (min-width: 992px) {
	.mv .mv-col {
		flex: 1 1 0%;
		max-width: 100%;
	}
}

.mv-col {
	position: relative;
}

.mv-col__index {
	font-weight: 800;
	font-size: var(--body-size-xs);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin-bottom: 15px;
	display: block;
	color: var(--primary-color);
}

.mv-col__title {
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -0.02em;
	font-size: clamp(1.875rem, 1.1rem + 3vw, 3.40rem);
	line-height: 1.1;
	margin-bottom: 30px;
	color: var(--text-color-light);
}

.mv-col__title .is-accent {
	color: var(--primary-color);
}

.mv-col__text {
	color: rgba(var(--white-rgb), .78);
	line-height: 1.85;
	margin: 0;
}

/* The divider is a `.col-lg-auto` cell. No `!important` needed: this file is
   enqueued after Bootstrap, so at equal specificity these declarations already
   win over `.col-lg-auto { width: auto }`. */
.mv-divider {
	width: 1px;
	background: linear-gradient(to bottom, rgba(var(--accent-2-rgb), 0) 0%, rgba(var(--accent-2-rgb), 1) 50%, rgba(var(--accent-2-rgb), 0) 100%);
	position: relative;
	overflow: visible;
	padding: 0px;
	margin: 0px 60px;
	display: flex;
	justify-content: center;
	min-width: 1px;
	flex: 0 0 1px;
	height: auto;
	align-self: stretch;
}

.mv-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	background-color: var(--accent-color-2);
	border-radius: var(--radius-full);
	box-shadow: 0 0 0 8px rgba(var(--accent-2-rgb), 0.2), 0 0 20px rgba(var(--accent-2-rgb), 0.6);
	z-index: 1;
}

.mv__row {
	align-items: flex-start;
	justify-content: center;
}



/* ---------------------------------------------------------------
   Stats bar (image bg, 4 stats)
   --------------------------------------------------------------- */
.stats-bar {
	position: relative;
	background: var(--dark-bg);
	overflow: hidden;
	padding-block: clamp(2.75rem, 4vw, 5rem);
}

.stats-bar__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--dark-bg);
}

.stats-bar__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stats-bar__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(var(--black-rgb), .6);
}

.stats-bar .tg-container {
	position: relative;
	z-index: 2;
}

.stat-item {
	text-align: start
}

.stat-item__num {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-extrabold);
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	line-height: 1;
	color: var(--text-color-light);
}

.stat-item__num .suffix {
	color: rgba(var(--white-rgb), .85);
	font-size: 37px;
}

.stat-item__label {
	display: block;
	margin-top: .6rem;
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(var(--white-rgb), .6);
	font-weight: 600;
}

/* ---------------------------------------------------------------
   Process ("Make It Happen In 4 Steps")
   --------------------------------------------------------------- */
.process {
	background: var(--background-color);
	padding-block: var(--section-spacing);
}

.process__eyebrow {
	color: var(--primary-color);
}

.process__heading {
	font-weight: 900;
	font-size: clamp(2rem, 5vw, 3.26rem);
	color: var(--heading-color);
	margin-bottom: 5rem;
}

.process-steps {
	display: flex;
	align-items: flex-start;
	justify-content: space-evenly;
	gap: 0;
	flex-wrap: wrap;
}

.process-step {
	flex: 1 1 200px;
	text-align: center;
	max-width: 260px;
}

.process-step__ring {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto var(--gap-lg);
	border: 2px solid var(--primary-color);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
}

.process-step__ring svg {
	width: 40px;
	height: 40px;
	color: var(--primary-color);
}

.process-step__ring img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.process-step__num {
	position: absolute;
	top: -6px;
	right: 6px;
	width: 34px;
	height: 34px;
	background: var(--black);
	color: var(--text-color-light);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	font-size: .9rem;
}

.process-step__title {
	font-weight: var(--font-weight-bold);
	font-size: var(--h5-size);
	color: var(--heading-color);
	margin-bottom: .65rem;
}

.process-step__text {
	color: var(--text-color);
	font-size: .98rem;
	margin: 0;
}

.process-connector {
	flex: 0 0 60px;
	height: 2px;
	background: var(--primary-color);
	margin-top: 60px;
	align-self: flex-start;
}

/* Dark variant — Assisted & Supported Moves ("Support In 4 Simple Steps").
   Same structure on a near-black band, with orange step badges and a thin
   accent bar down the left edge. */
.process--dark {
	position: relative;
	background: var(--dark-bg);
}

.process--dark::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 6px;
	background: var(--primary-color);
}

.process--dark .process__heading {
	color: var(--text-color-light);
}

.process--dark .process-step__ring {
	background: var(--dark-bg);
}

.process--dark .process-step__num {
	background: var(--primary-color);
}

.process--dark .process-step__title {
	color: var(--text-color-light);
}

.process--dark .process-step__text {
	color: rgba(var(--white-rgb), .65);
}

/* ---------------------------------------------------------------
   Split intro — eyebrow + heading | two paragraphs
   (template-parts/sections/split-intro.php)
   --------------------------------------------------------------- */
.split-intro {
	padding: 6.875rem 0;
}

.split-intro__text {
	color: var(--text-color);
	font-size: var(--body-size);
	line-height: 1.9;
	margin-bottom: 1.25rem;
}

.split-intro__text:last-child {
	margin-bottom: 0;
}

.split-intro__text .is-accent {
	font-weight: var(--font-weight-bold);
}

/* ---------------------------------------------------------------
   Photo + feature list (template-parts/sections/photo-features.php)
   --------------------------------------------------------------- */
.photo-features {
	background: var(--light-bg);
	padding-block: var(--section-spacing);
}

/* The decorative square overhangs, so it lives on the outer wrapper —
   the inner wrapper is what clips the photo. */
.photo-features__media {
	position: relative;
}

.photo-features__media::before {
	content: "";
	position: absolute;
	width: 170px;
	height: 170px;
	border: 3px solid var(--primary-color);
	border-radius: var(--radius-sm);
}



.photo-features__media--bottom-left::before {
	left: -22px;
	bottom: -22px;
}

.photo-features__media--top-right::before {
	right: -22px;
	top: -22px;
}

.photo-features__media-inner {
	position: relative;
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: 0 30px 60px -25px rgba(var(--black-rgb), .4);
	aspect-ratio: 7 / 6;
}

.photo-features__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-features__list {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin-top: 1.25rem;
}

.photo-features__item {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
}

.photo-features__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background: var(--primary-color);
	color: var(--text-color-light);
	box-shadow: 0 8px 18px -8px rgba(var(--primary-rgb), .55);
}

.photo-features__check svg {
	width: 21px;
	height: 21px;
}

.photo-features__item-title {
	font-size: 1.0625rem;
	font-weight: var(--font-weight-extrabold);
	color: var(--heading-color);
	margin-bottom: .3rem;
}

.photo-features__item-text {
	color: var(--muted-color);
	font-size: .90625rem;
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 991.98px) {
	.photo-features__media {
		margin-bottom: 2rem;
	}
}
@media (max-width: 768px) {
	.photo-features__media::before {
		height: 80%;
		width: 80%;
	}
}

/* ---------------------------------------------------------------
   Service-card grid ("dist-*") — dark numbered card grid used by more
   than one service CPT post (Distance Based Moves, Specialised Moving).
   Two section-background variants and two card-border variants combine
   to match each page's exact Figma treatment; the optional badge and
   the dashed "filler" card are shared too.
   --------------------------------------------------------------- */
.dist-section {
	background: var(--dark-bg-3);
	padding: 4.375rem 0;
}

.dist-section--alt {
	background: var(--dark-bg);
	padding: 4.375rem 0 5.625rem;
}

.dist-grid-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap-lg);
	flex-wrap: wrap;
	margin-bottom: 2.875rem;
}

.dist-grid-head__eyebrow {
	color: var(--primary-color);
}

.dist-grid-head__heading {
	font-size: clamp(1.75rem, 3vw, 2.875rem);
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.025em;
	color: var(--text-color-light);
	margin: 0;
}

.dist-grid-head__heading i {
	font-style: italic;
}

.dist-grid-head__count {
	font-size: var(--body-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(var(--white-rgb), .55);
	padding-bottom: .375rem;
}

.dist-grid-head__count--solid {
	color: var(--text-color-light);
}

.dist-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
}

.dist-card {
	position: relative;
	background: var(--black);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 2.4375rem 2.0625rem 2.5625rem;
	overflow: hidden;
}

.dist-card--alt {
	background: rgba(var(--white-rgb), .03);
	border-color: rgba(var(--white-rgb), .12);
}

.dist-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: var(--radius-14);
	background: rgba(var(--primary-rgb), .1);
	color: var(--primary-color);
	margin-bottom: .8rem;
}

.dist-card__icon svg {
	width: 32px;
	height: 32px;
}

.dist-card__title {
	font-size: 1.3125rem;
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.01em;
	color: var(--text-color-light);
	margin-bottom: .6rem;
}

.dist-card__text {
	color: rgba(var(--white-rgb), .7);
	font-size: .90625rem;
	line-height: 1.75;
	margin-bottom: 1.1rem;
}

.dist-card__text p {
	margin: 0;
}

/* "Solid text" variant — some pages show the full-opacity white body copy. */
.dist-card--strong .dist-card__text {
	color: var(--text-color-light);
}

.dist-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--primary-color);
	font-size: .75rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.dist-card__cta:hover {
	color: var(--primary-hover);
}

.dist-card__badge {
	position: absolute;
	top: 1.875rem;
	right: 1.875rem;
	background: rgba(var(--primary-rgb), .1);
	color: var(--primary-color);
	font-size: .625rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: var(--radius-30);
	padding: .375rem .75rem;
}

.dist-card--alt .dist-card__badge {
	background: rgba(var(--primary-rgb), .18);
}

.dist-card__num {
	position: absolute;
	right: 1.25rem;
	bottom: .3rem;
	font-size: 4.875rem;
	line-height: 1;
	font-weight: var(--font-weight-extrabold);
	color: rgba(var(--white-rgb), .22);
	pointer-events: none;
}

.dist-card--alt .dist-card__num {
	color: rgba(var(--white-rgb), .05);
}

.dist-card--strong .dist-card__num {
	color: rgba(var(--white-rgb), .28);
}

/* Dashed "Need something custom?" filler card — same grid slot as .dist-card. */
.dist-card--filler {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px dashed rgba(var(--white-rgb), .25);
	border-radius: var(--radius-sm);
	padding: 4.9375rem 2.0625rem;
}

.dist-card--filler__title {
	font-size: 1.625rem;
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.01em;
	color: var(--text-color-light);
	margin-bottom: .5rem;
}

.dist-card--filler__text {
	color: rgba(var(--white-rgb), .7);
	font-size: .90625rem;
	line-height: 1.75;
	margin-bottom: 1.5rem;
}

/* Filler-card button hover: background flips to white (the shared
   `.tg-btn--primary` hover in global.css goes to black). Written as
   Bootstrap's own `--bs-btn-hover-*` theming variables on our project class
   rather than restyling `.btn-primary`, and the white background is paired
   with dark text + border exactly as `.tg-btn--dark` and
   `.tg-btn--outline-light` do — otherwise the label would go white-on-white. */
.dist-card--filler .tg-btn--primary:hover {
	--bs-btn-hover-bg: var(--text-color-light);
	--bs-btn-hover-color: var(--black);
	--bs-btn-hover-border-color: var(--text-color-light);
}

@media (max-width: 991.98px) {
	.dist-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.dist-grid {
		grid-template-columns: 1fr;
	}

	.dist-grid-head {
		align-items: flex-start;
	}

	.dist-grid-head__heading {
		font-size: 1.875rem;
	}

	.dist-card__num {
		font-size: 3.5rem;
	}

	.dist-card--filler {
		padding: 2.5rem 2.0625rem;
	}
}

/* ---------------------------------------------------------------
   CTA band (orange gradient, headline + button)
   --------------------------------------------------------------- */
.cta-band {
	background: linear-gradient(100deg, var(--primary-soft) 0%, var(--primary-hover) 100%);
	color: var(--text-color-light);
	padding-block: clamp(3rem, 5vw, 4.5rem);
}

.cta-band__title {
	font-weight: var(--font-weight-light);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--text-color-light);
	line-height: 1.25;
	margin: 0;
}

.cta-band__title b,
.cta-band__title strong {
	font-weight: var(--font-weight-extrabold);
}

.cta-band__title p {
	margin: 0;
}

.cta-band__note {
	color: rgba(var(--white-rgb), .85);
	font-size: .95rem;
	margin: .75rem 0 0;
}

.cta-band .tg-btn {
	white-space: nowrap;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: var(--body-size-xs);
}

.cta-band__btn {
	--bs-btn-bg: var(--dark-bg-3);
	--bs-btn-border-color: var(--dark-bg-3);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-color: var(--dark-bg-3);
	--bs-btn-hover-border-color: #fff;
}

/* ---------------------------------------------------------------
   Inner-page banner, brown variant (photo bg, gradient right→left)
   — shared by the About and Contact templates.

   Deliberately separate from `.page-hero` below rather than merged with
   it: the two banners differ in ground colour (--secondary-color vs
   --dark-bg), gradient stop count, and title text-transform, so folding
   them together would change how one of them renders.

   Per-page copy widths live with the `--about` / `--contact` modifiers
   in pages/about-us.css and pages/contact.css.
   --------------------------------------------------------------- */
.hero-banner {
	position: relative;
	background: var(--secondary-color);
	color: var(--text-color-light);
	overflow: hidden;
	padding-block: clamp(4rem, 8vw, 8rem);
}

.hero-banner__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--secondary-color);
}

.hero-banner__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.hero-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(var(--secondary-rgb), .97) 0%, rgba(var(--secondary-rgb), .86) 40%, rgba(var(--secondary-rgb), .35) 100%);
}

.hero-banner .tg-container {
	position: relative;
	z-index: 2;
}

.hero-banner__eyebrow {
	color: var(--primary-color);
}

.hero-banner__title {
	font-weight: var(--font-weight-light);
	font-size: var(--h1-size);
	line-height: 1.05;
	color: var(--text-color-light);
	margin-bottom: var(--gap-lg);
}

.hero-banner__title b,
.hero-banner__title strong {
	font-weight: var(--font-weight-extrabold);
}

.hero-banner__title .is-accent {
	color: var(--primary-color);
	font-weight: var(--font-weight-extrabold);
}

.hero-banner__text {
	color: rgba(var(--white-rgb), .8);
	font-size: 1.0625rem;
	margin-bottom: 1.75rem;
}

/* Breadcrumb trail */
.hero-banner__breadcrumb .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--body-size-2xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hero-banner__breadcrumb .breadcrumb__item {
	display: inline-flex;
	align-items: center;
}

.hero-banner__breadcrumb .breadcrumb__link {
	color: rgba(var(--white-rgb), .6);
}

.hero-banner__breadcrumb .breadcrumb__link:hover {
	color: var(--text-color-light);
}

.hero-banner__breadcrumb .breadcrumb__separator {
	color: rgba(var(--white-rgb), .35);
}

.hero-banner__breadcrumb .breadcrumb__current {
	color: var(--text-color-light);
}

/* ---------------------------------------------------------------
   Inner-page hero (dark, photo bg) — shared by Terms, FAQ, etc.
   via template-parts/global/page-banner.php
   --------------------------------------------------------------- */
.page-hero {
	position: relative;
	background: var(--dark-bg);
	color: var(--text-color-light);
	overflow: hidden;
	padding-block: clamp(4rem, 8vw, 8rem);
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--dark-bg);
}

.page-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(var(--dark-rgb), .96) 0%, rgba(var(--dark-rgb), .82) 35%, rgba(var(--dark-rgb), .5) 65%, rgba(var(--dark-rgb), .25) 100%);
}

.page-hero .tg-container {
	position: relative;
	z-index: 2;
}

.page-hero__inner {
	max-width: 760px;
}

.page-hero__eyebrow {
	color: var(--primary-color);
}

.page-hero__title {
	font-weight: var(--font-weight-light);
	font-size: var(--h1-size);
	line-height: 1.05;
	text-transform: capitalize;
	color: var(--text-color-light);
	margin-bottom: var(--gap-lg);
}

.page-hero__title b,
.page-hero__title strong {
	font-weight: var(--font-weight-extrabold);
}

.page-hero__title .is-accent {
	color: var(--primary-color);
	font-weight: var(--font-weight-extrabold);
}

.page-hero__text {
	color: rgba(var(--white-rgb), .78);
	font-size: 1.0625rem;
	max-width: 640px;
	margin-bottom: 1.75rem;
}

/* Breadcrumb trail (shared markup with ThemeHelper::get_breadcrumbs()) */
.page-hero__breadcrumb .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--body-size-2xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.page-hero__breadcrumb .breadcrumb__item {
	display: inline-flex;
	align-items: center;
}

.page-hero__breadcrumb .breadcrumb__link {
	color: rgba(var(--white-rgb), .55);
}

.page-hero__breadcrumb .breadcrumb__link:hover {
	color: var(--text-color-light);
}

.page-hero__breadcrumb .breadcrumb__separator {
	color: var(--primary-color);
}

.page-hero__breadcrumb .breadcrumb__current {
	color: var(--primary-color);
}

/* Floating "download" tab (optional, e.g. Resources page checklist PDF) */
.page-hero__download {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	background: var(--primary-color);
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	box-shadow: 0 14px 30px -12px rgba(var(--primary-rgb), .6);
	color: var(--text-color-light);
	text-decoration: none;
	max-width: 320px;
}

.page-hero__download-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .875rem 1.25rem;
}

.page-hero__download-row:first-child {
	border-bottom: 1px solid rgba(var(--white-rgb), .25);
}

.page-hero__download-label {
	font-size: var(--body-size-2xs);
	font-weight: var(--font-weight-extrabold);
	letter-spacing: .13em;
	text-transform: uppercase;
}

.page-hero__download-row--link {
	justify-content: space-between;
	gap: 1rem;
}

.page-hero__download-text {
	font-size: var(--body-size-2xs);
}

/* Below ~992px the hero paragraph can run close to full container width,
   so the floating tab is dropped into normal flow (stacked under the hero
   copy) instead of overlapping it. */
@media (max-width: 991.98px) {
	.page-hero__download {
		/* Stays in-flow like `static`, but `position: relative` (unlike
		   `static`) still honors this rule's z-index, so the tab paints
		   above .page-hero__overlay (absolute, z-index: 1) instead of
		   being silently painted over by it. */
		position: relative;
		margin: 1.5rem var(--container-spacing) 0;
		max-width: none;
		border-radius: var(--radius-sm);
	}
}