diff --git a/burf-customizations/layout/_breadcrumbs.scss b/burf-customizations/layout/_breadcrumbs.scss
index 93463cef..9e8d2e8c 100644
--- a/burf-customizations/layout/_breadcrumbs.scss
+++ b/burf-customizations/layout/_breadcrumbs.scss
@@ -1,290 +1 @@
-
-// =================================================================
-// Breadcrumb Navigation Styles
-// =================================================================
-
-:where( .nav-crumbs ) {
-	background: var( --nav-crumbs-background, #fff );
-	border-block: var( --nav-crumbs-border, var( --bu-base-border, 1px solid #ddd ) );
-	display: flex;
-	font-family: var( --nav-crumb-font-family, var( --bu-base-font-family, sans-serif ) );
-	font-size: var( --nav-crumb-font-size, 1rem );
-	margin-block: var(--bu--content--margin-block, 1em);
-	margin-inline: auto;
-	padding: var( --nav-crumbs-padding-block, 0.75em ) var( --nav-crumbs-padding-inline, 0 );
-
-	grid-area: breadcrumbs;
-
-	width: var( --bu-container-size--content );
-
-	* {
-		line-height: 1em;
-		vertical-align: middle;
-	}
-	
-	button {
-		background: var( --nav-crumbs-color-buttons-background, var( --bu-base-button-bg-color, #eee ) );
-		border: 0;
-		border-radius: var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) );
-		cursor: pointer;
-		font-family: var( --nav-crumb-font-family );
-		font-size: var( --nav-crumb-font-size, 1rem );
-		line-height: var( --nav-crumb-height, 1em );
-		margin: 0;
-		padding: var( --nav-crumb-button-padding, 0.75em 0.75em );
-
-		&:hover {
-			background: var( --nav-crumbs-color-buttons-background-hover, var( --nav-crumbs-color-buttons-background, var( --bu-base-button-bg-color, #eee ) ) );
-		}
-	}
-
-
-	&[ data-expandable="false" ] {
-		.nav-crumb-expander-wrapper {
-			display: none;
-		}	
-	}
-
-	// Styles for when breadcrumbs are expanded
-	&[ data-crumbs-expanded="true" ] {
-		display: block;
-		
-		.nav-crumb-expander-wrapper {
-			display: none;
-		}
-
-		.nav-crumb-list {
-			display: inline;
-			height: auto;
-
-			// &::before {
-			// 	display: none;
-			// }
-
-			&::before {
-				display: none;
-			}
-		}
-
-		.nav-crumb {
-			a {
-				max-width: none;
-			}
-		}
-	}
-
-
-	// Styles for when breadcrumb dropdown menu is open
-	&[ data-menu-open="true" ] {
-
-		.nav-crumb-menu-wrapper {
-			min-width: clamp( 0px, var( --nav-crumb-char-count-current, 27ch ), 90vw );
-		}
-
-		.nav-crumb-current {
-			border-radius: var( --nav-crumbs-color-buttons-radius-d, var( --bu-base-button-border-radius, 4px ) var( --bu-base-button-border-radius, 4px ) 0 0 );
-			max-width: var( --nav-crumb-char-count-current, 27ch );
-
-			&::after {
-				content: "\f106";
-			}
-		}
-		
-		.nav-crumb-menu {
-			border-radius: var( --bu-base-button-border-radius-menu-open, 0 0 var( --bu-base-button-border-radius, 4px ) var( --bu-base-button-border-radius, 4px ));
-		}		
-	}
-}
-
-.nav-crumb-list {
-	display: inline-flex;
-	flex-wrap: wrap;
-	height: calc( var( --nav-crumb-height, 1em ) + (var( --nav-crumb-padding, 0.75em ) * 2 ) );
-	list-style: none;
-	margin: 0;
-	max-width: var( --nav-crumblist-max-width );
-	overflow: hidden;
-	padding: 0;
-	vertical-align: middle;
-
-	// &:has(*:nth-child(3)) {
-	// 	--nav-crumb-max-width: 33%;
-	// }
-
-	&::before {
-		content: '';
-		display: inline;
-		height: 100%;
-	}
-}
-	
-.nav-crumb,
-.nav-crumb-expander-wrapper {
-
-	&::after {
-		content:'/';
-		display: inline-block;
-		padding: var( --nav-crumb-spacer-padding, 0.75em 0.75em );
-	}
-}
-	
-.nav-crumb {
-	display: inline-flex;
-	// max-width: var( --nav-crumb-max-width );
-
-	a {
-		color:  var( --nav-crumb-color-text, var( --bu-base-link-color, #0f69d7 ) );
-		display: inline-block;
-		margin: var( --nav-crumb-margin, 0.5  );
-		max-width: var( --nav-crumb-max-width );
-		overflow: hidden;
-		padding: var( --nav-crumb-padding, 0.75em ) 0;
-		text-decoration: none;
-		text-overflow: ellipsis;
-		vertical-align: middle;
-		white-space: nowrap;
-		
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-}
-
-.nav-crumb-home {
-	a{
-		font-size: 0;
-		max-width: none;
-
-		&::before {
-			content: "\f015";
-			display: block;
-			font-family: "Font Awesome 5 Free";
-			font-size: var( --nav-crumb-font-size, 1rem );
-			-moz-osx-font-smoothing: grayscale;
-			-webkit-font-smoothing: antialiased;
-			float: right;
-			font-style: normal;
-			font-variant: normal;
-			font-weight: 900;
-			line-height: 1;
-			padding: var( --nav-crumb-padding, 0.75em ) 0;
-			text-decoration: none;
-			text-rendering: optimizeLegibility;
-			text-transform: none;
-			translate: 0 -0.1em;
-			white-space: nowrap;
-		}	
-	}
-	
-}
-
-.nav-crumb-expander-wrapper,
-.nav-crumb-menu-wrapper {
-	flex-shrink: 0;
-}
-
-.nav-crumb-menu {
-	padding: var( --nav-crumb-menu-padding, 0.75em );
-}
-
-
-.nav-crumb-current {
-	display: inline-block;
-	max-width: var( --nav-crumb-char-count-current, 27ch );
-	overflow: hidden;
-	text-align: left;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: 100%;
-
-	&:is( span ) {
-		padding: var( --nav-crumb-padding, 0.75em ) 0;
-	}
-
-	&:is( button ) {
-		padding-right: calc( var( --nav-crumb-padding, 0.75em ) * 2 + 1em);
-
-		&::after {
-			content: "\f107";
-			display: block;
-			font-family: "Font Awesome 5 Free";
-			-moz-osx-font-smoothing: grayscale;
-			-webkit-font-smoothing: antialiased;
-			float: right;
-			font-style: normal;
-			font-variant: normal;
-			font-weight: 900;
-			line-height: 1;
-			position: absolute;
-			right: var(--nav-crumb-padding, 0.75em );
-			top: 50%;
-			text-decoration: none;
-			text-rendering: optimizeLegibility;
-			text-transform: none;
-			translate: 0 -50%;
-			white-space: nowrap;
-		}
-	}
-	
-}
-
-.nav-crumb-menu-wrapper {
-	display: inline-block;
-	min-width: 0;
-	position: relative;
-	transition: min-width 250ms;
-	
-	&:has( .nav-crumb-menu[open] ) {
-		min-width: clamp( 0px, var( --nav-crumb-char-count-current, 27ch ), 90vw );
-		
-		.nav-crumb-current {
-			border-radius: var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) ) var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) ) 0 0;
-
-			&::after {
-				content: "\f106";
-			}
-		}
-		
-		.nav-crumb-menu {
-			border-radius: 0 0 var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) ) var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) );
-		}
-	}
-}
-
-.nav-crumb-menu {
-	background:  var( --nav-crumbs-color-menu-background, var( --bu-base-button-bg-color, #eee ) );
-	border: 0;
-	box-sizing: border-box;
-	padding: var( --nav-crumb-padding, 0.75em );
-	position: absolute;
-	width: 100%;
-	
-	ul,
-	menu {
-		border-inline-start: 2px solid var( --nav-crumbs-color-buttons-text, var( --bu-base-button-text-color, #333 ) );
-		border-inline-start: var( --nav-crumbs-border, var( --bu-base-border, 1px solid #ddd ) );
-		list-style: none;
-		margin: 0;
-		padding: var(--nav-crumb-padding, 0.75em );
-	}
-
-	li {
-		margin-block: 1em;
-
-		&:first-child {
-			margin-block-start: 0;
-		}
-
-		&:last-child {
-			margin-block-end: 0;
-		}
-	}
-	
-	a {
-		color:  var( --nav-crumbs-color-menu-text, var( --bu-base-button-text-color, #333 ) );
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-}
+@use 'navcrumbs';
\ No newline at end of file
diff --git a/burf-customizations/layout/_navcrumbs.scss b/burf-customizations/layout/_navcrumbs.scss
new file mode 100644
index 00000000..3591d40e
--- /dev/null
+++ b/burf-customizations/layout/_navcrumbs.scss
@@ -0,0 +1,33 @@
+@use 'navcrumbs/base';
+@use 'navcrumbs/trail';
+@use 'navcrumbs/menu';
+
+// --navcrumbs-background: background color for the breadcrumb container
+// --navcrumbs-border: border for the breadcrumb container
+// --navcrumbs-font-family: font family for the breadcrumb text
+// --navcrumbs-font-size: font size for the breadcrumb text
+// --navcrumbs-height: height of the breadcrumb container
+// --navcrumbs-margin-block: vertical margin for the breadcrumb container
+// --navcrumbs-padding-block: vertical padding for the breadcrumb container
+// --navcrumbs-width: width of the breadcrumb container
+
+// --navcrumbs-current-char-count: number of characters to display for the current breadcrumb
+// --navcrumbs-crumb-color-text: text color for the breadcrumb
+// --navcrumbs-crumb-max-width-factor: factor for calculating the maximum width of a breadcrumb
+// --navcrumbs-crumb-max-width-offset: offset for calculating the maximum width of a breadcrumb
+// --navcrumbs-crumb-max-width: maximum width of a breadcrumb
+// --navcrumbs-crumb-padding: padding for the breadcrumb
+
+// --navcrumbs-crumb-separator: separator character for the breadcrumbs
+
+// --navcrumbs-button-bg-color: background color for the breadcrumb button
+// --navcrumbs-button-bg-color-hover: background color for the breadcrumb button on hover
+// --navcrumbs-button-radius: border radius for the breadcrumb button
+// --navcrumbs-menu-bg-color: background color for the breadcrumb menu
+// --navcrumbs-menu-text-color: text color for the breadcrumb menu
+// --navcrumbs-menu-list-border: border for the breadcrumb menu list
+
+// --navcrumbs-home-icon: icon for the home breadcrumb
+// --navcrumbs-menu-icon-expander: icon for the breadcrumb trail expander
+// --navcrumbs-menu-icon-hidden: icon for the breadcrumb child nav menu toggle when the menu is hidden
+// --navcrumbs-menu-icon-shown: icon for the breadcrumb child nav menu toggle when the menu is shown
diff --git a/burf-customizations/layout/navcrumbs/_base.scss b/burf-customizations/layout/navcrumbs/_base.scss
new file mode 100644
index 00000000..fab5be6a
--- /dev/null
+++ b/burf-customizations/layout/navcrumbs/_base.scss
@@ -0,0 +1,72 @@
+// =================================================================
+// Navigation Breadcrumb Base Styles
+// =================================================================
+
+:where( .navcrumbs ) {
+	--navcrumbs-background: #fff ;
+	--navcrumbs-border: var( --bu-base-border, 1px solid #ddd );
+	--navcrumbs-font-family: var( --bu-base-font-family, sans-serif );
+	--navcrumbs-font-size: 1rem;
+	--navcrumbs-height: 1em;
+	--navcrumbs-margin-block: var(--bu--content--margin-block, 1em);
+	--navcrumbs-padding-block: 0.75em;
+	--navcrumbs-width: var( --bu-container-size--content );
+
+	--navcrumbs-crumb-color-text: var( --bu-base-link-color, #0f69d7 );
+	--navcrumbs-crumb-max-width-factor: 0.04;
+	--navcrumbs-crumb-max-width-offset: 2ch;
+	--navcrumbs-crumb-max-width: calc( ( var( --navcrumbs-crumb-max-width-factor ) * var( --navcrumbs-available-width ) ) + var( --navcrumbs-crumb-max-width-offset ) );
+	--navcrumbs-crumb-padding: 0.75em;
+
+	--navcrumbs-crumb-separator: '/';
+
+	--navcrumbs-button-bg-color: var( --bu-base-button-bg-color, #eee );
+	--navcrumbs-button-bg-color-hover: var( --navcrumbs-button-bg-color );
+	--navcrumbs-button-radius: var( --bu-base-button-border-radius, 4px );
+
+	--navcrumbs-current-char-count: 27ch ;
+	--navcrumbs-menu-max-width: 320px;
+	--navcrumbs-menu-bg-color: var( --bu-base-button-bg-color, #eee );
+	--navcrumbs-menu-text-color: var( --bu-base-button-text-color, #333 );
+	--navcrumbs-menu-list-border: var( --navcrumbs-border );
+
+	--navcrumbs-home-icon: "\f015";
+	--navcrumbs-menu-icon-expander: "\f141";
+	--navcrumbs-menu-icon-hidden: "\f107";
+	--navcrumbs-menu-icon-shown: "\f106";
+}
+
+.navcrumbs {
+	background: var( --navcrumbs-background );
+	border-block: var( --navcrumbs-border );
+	display: flex;
+	font-family: var( --navcrumbs-font-family );
+	font-size: var( --navcrumbs-font-size );
+	margin-block: var( --navcrumbs-margin-block );
+	margin-inline: auto;
+	padding-block: var( --navcrumbs-padding-block );
+	padding-inline: 0;
+
+	width: var( --navcrumbs-width );
+
+	* {
+		box-sizing: border-box;
+		line-height: 1em;
+		vertical-align: middle;
+	}
+}
+	
+.navcrumbs-button {
+	background: var( --navcrumbs-button-bg-color );
+	border: 0;
+	border-radius: var( --navcrumbs-button-radius );
+	font-family: var( --navcrumbs-font-family );
+	font-size: var( --navcrumbs-font-size );
+	line-height: var( --navcrumbs-height );
+	margin: 0;
+	padding: var( --navcrumbs-crumb-padding );
+
+	&:hover {
+		background: var( --navcrumbs-button-bg-color-hover );
+	}
+}
diff --git a/burf-customizations/layout/navcrumbs/_menu.scss b/burf-customizations/layout/navcrumbs/_menu.scss
new file mode 100644
index 00000000..c8ffb5fa
--- /dev/null
+++ b/burf-customizations/layout/navcrumbs/_menu.scss
@@ -0,0 +1,128 @@
+// =================================================================
+// Navigation Breadcrumb Child Nav Menu Styles
+// =================================================================
+
+.navcrumbs-menu-wrapper {
+	display: inline-block;
+	flex-shrink: 0;
+	min-width: 0;
+	position: relative;
+	max-width: clamp( 0px, var( --navcrumbs-current-char-count ), 90vw );
+}
+
+.navcrumbs-current {
+	display: inline-block;
+	overflow: hidden;
+	text-align: left;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+
+	&:not( :has( button ) ) {
+		padding: var( --navcrumbs-crumb-padding ) 0;
+		width: auto;
+	}
+
+	&:has( button ) {
+		padding-right: calc( var( --navcrumbs-crumb-padding ) * 2 + 1em);
+
+		&::after {
+			content: var( --navcrumbs-menu-icon-hidden );
+			display: block;
+			font-family: "Font Awesome 5 Free";
+			-moz-osx-font-smoothing: grayscale;
+			-webkit-font-smoothing: antialiased;
+			font-style: normal;
+			font-variant: normal;
+			font-weight: 900;
+			line-height: 1;
+			position: absolute;
+			right: var(--navcrumbs-crumb-padding );
+			top: 50%;
+			text-decoration: none;
+			text-rendering: optimizeLegibility;
+			text-transform: none;
+			translate: 0 -50%;
+			white-space: nowrap;
+			z-index: 0;
+		}
+	}
+	
+}
+
+.navcrumbs-menu-toggle {
+	display: block;
+	border: 0;
+	bottom: 0;
+	font-size: 0;
+	left: 0;
+	margin: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+	opacity: 0;
+	padding: 0;
+	z-index: 1;
+}
+
+.navcrumbs-menu {
+	background:  var( --navcrumbs-menu-bg-color );
+	border: 0;
+
+	box-sizing: border-box;
+	margin: 0;
+	padding: var( --navcrumbs-crumb-padding );
+	position: absolute;
+
+	width: auto;
+
+	left: anchor( left );
+	right: anchor( right );
+	top: calc( anchor( bottom ) - 1px );
+
+	menu {
+		border-inline-start: var( --navcrumbs-menu-list-border );
+		list-style: none;
+		margin: 0;
+		padding: var(--navcrumbs-crumb-padding );
+	}
+
+	li {
+		margin-block: 1em;
+
+		&:first-child {
+			margin-block-start: 0;
+		}
+
+		&:last-child {
+			margin-block-end: 0;
+		}
+	}
+	
+	a {
+		color:  var( --navcrumbs-menu-text-color );
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+
+// Conditional styles for when the menu is or is not open
+
+.navcrumbs-menu-wrapper:has( .navcrumbs-menu:popover-open ) {
+	min-width: clamp( 0px, var( --navcrumbs-current-char-count ), 90vw );
+	max-width: var( --navcrumbs-current-char-count )320px;
+	
+	.navcrumbs-current {
+		border-radius: var( --navcrumbs-button-radius ) var( --navcrumbs-button-radius ) 0 0;
+
+		&::after {
+			content: var( --navcrumbs-menu-icon-shown );
+		}
+	}
+	
+	.navcrumbs-menu {
+		border-radius: 0 0 var( --navcrumbs-button-radius ) var( --navcrumbs-button-radius );
+	}
+}
\ No newline at end of file
diff --git a/burf-customizations/layout/navcrumbs/_trail.scss b/burf-customizations/layout/navcrumbs/_trail.scss
new file mode 100644
index 00000000..437e74eb
--- /dev/null
+++ b/burf-customizations/layout/navcrumbs/_trail.scss
@@ -0,0 +1,136 @@
+// =================================================================
+// Navigation Breadcrumb Crumb Trail Styles
+// =================================================================
+
+.navcrumbs-trail {
+	display: inline-flex;
+	flex-wrap: wrap;
+	height: calc( var( --navcrumbs-height ) + ( var( --navcrumbs-crumb-padding ) * 2 ) );
+	list-style: none;
+	margin: 0;
+	max-width: var( --navcrumbs-trail-max-width );
+	overflow: hidden;
+	padding: 0;
+	vertical-align: middle;
+
+	&::before {
+		content: '';
+		display: inline;
+		height: 100%;
+	}
+}
+	
+.navcrumbs-crumb,
+.navcrumbs-expander-wrapper {
+	&::after {
+		content: var( --navcrumbs-crumb-separator );
+		padding: var( --navcrumbs-crumb-padding );
+	}
+}
+	
+.navcrumbs-crumb {
+	display: inline-flex;
+
+	a {
+		color:  var( --navcrumbs-crumb-color-text );
+		display: inline-block;
+		max-width: var( --navcrumbs-crumb-max-width );
+		overflow: hidden;
+		padding: var( --navcrumbs-crumb-padding ) 0;
+		text-decoration: none;
+		text-overflow: ellipsis;
+		vertical-align: middle;
+		white-space: nowrap;
+		
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+
+.navcrumbs-home {
+	a{
+		max-width: none;
+
+		&::before {
+			content: var( --navcrumbs-home-icon);
+			display: block;
+			font-family: "Font Awesome 5 Free";
+			-moz-osx-font-smoothing: grayscale;
+			-webkit-font-smoothing: antialiased;
+			font-style: normal;
+			font-variant: normal;
+			font-weight: 900;
+			line-height: 1;
+			text-decoration: none;
+			text-rendering: optimizeLegibility;
+			text-transform: none;
+			white-space: nowrap;
+		}	
+
+		span {
+			display: none;
+		}
+	}
+	
+}
+
+.navcrumbs-expander-wrapper {
+	display: flex;
+	flex-shrink: 0;
+}
+
+.navcrumbs-expander {
+	&::after {
+		content: var( --navcrumbs-menu-icon-expander );
+		display: block;
+		font-family: "Font Awesome 5 Free";
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		font-style: normal;
+		font-variant: normal;
+		font-weight: 900;
+		line-height: 1;
+		text-decoration: none;
+		text-rendering: optimizeLegibility;
+		text-transform: none;
+		white-space: nowrap;
+	}
+
+	span {
+		font-size: 0;
+		position: absolute;
+	}
+}
+
+// Conditional styles for when breadcrumb trail is or is not expanded
+.navcrumbs {
+	&[ data-expandable="false" ] {
+		.navcrumbs-expander-wrapper {
+			display: none;
+		}	
+	}
+
+	&[ data-crumbs-expanded="true" ] {
+		display: block;
+		
+		.navcrumbs-expander-wrapper {
+			display: none;
+		}
+
+		.navcrumbs-trail {
+			display: inline;
+			height: auto;
+
+			&::before {
+				display: none;
+			}
+		}
+
+		.navcrumbs-crumb {
+			a {
+				max-width: none;
+			}
+		}
+	}
+}
diff --git a/burf-theme/layout/_footer.scss b/burf-theme/layout/_footer.scss
index 6e7bc0ca..54d4ec22 100644
--- a/burf-theme/layout/_footer.scss
+++ b/burf-theme/layout/_footer.scss
@@ -76,7 +76,7 @@ $color-footbar-widget-link-hover:          $color-link !default;
 //
 // Since: 1.0.0
 
-$padding-site-footer:                       $padding $padding $padding-small !default;
+$padding-site-footer:                       calc( var( --size-fluid-spacing ) * 2 ) var( --size-fluid-spacing ) !default;
 
 // Controls the background color of the site footer.
 //
@@ -108,7 +108,7 @@ $color-site-footer:								 $color-grayscale-f !default;
 //
 // Accessibility: AA
 
-$color-site-footer-link:							 $color-grayscale-8 !default;
+$color-site-footer-link:							 $color-grayscale-f !default;
 
 // Controls the color of links when you hover in the site footer.
 //
@@ -143,11 +143,11 @@ $number-widgets-footbar: 						 3 !default;
 //
 // Since: 1.0.0
 
-.footbar {
+:where( .footbar ) {
 	@extend %clearfix;
 	background: var(--footbar-background, #{$color-footbar-bg});
 	border-top: var(--footbar-border, var(--bu-border, #{$border-footbar}));
-	padding-bottom: var(--footbar-padding-bottom, #{$footbar-padding-bottom});
+	padding-block: var( --bu-spacing );
 	width: 100%;
 
 	a {
@@ -175,14 +175,13 @@ $_footbar-widget-width: math.div( $grid-number-columns, $number-widgets-footbar
 //
 // Since: 1.0.0
 
-.footbar-container {
-	@extend %container-styles;
-	background: var(--footbar-container-background, #{$color-footbar-container-bg});
-
-	.widget {
-		@extend %col-md-margin-#{$_footbar-widget-width};
-		padding: 0;
-	}
+:where( .footbar-container ) {
+	background: var( --footbar-container-background, #{ $color-footbar-container-bg } );
+	display: grid;
+	gap: var( --bu-spacing );
+	grid-template-columns: repeat( auto-fit, minmax( min( var( --footer-widget-width, 320px ), 100% ), 1fr) );
+	margin-inline: auto;
+	max-width: var( --bu-container-max-inline-size--guttered );
 }
 
 // Footer
@@ -197,11 +196,11 @@ $_footbar-widget-width: math.div( $grid-number-columns, $number-widgets-footbar
 //
 // Since: 1.0.0
 
-$color-body-bg:                            $color-grayscale-0 !default;
+// $color-body-bg:                            $color-grayscale-0 !default;
 
-body {
-	background-color: var(--body-background, #{$color-body-bg});
-}
+// body {
+	// background-color: var(--body-background, #{$color-body-bg});
+// }
 
 // Controls styling for the site footer - branding, address, and social links.
 //
@@ -209,49 +208,45 @@ body {
 //
 // Since: 1.0.0
 
-.site-footer {
-	@extend %font-size-secondary;
-	@extend %clearfix;
-	background: var(--footer-background, #{$color-site-footer-bg});
-	clear: both;
-	color: var(--footer-text-color, #{$color-grayscale-8});
-	display: block;
-	font-family: var(--footer-text-font, var(--bu-text-font, #{$font-family-sans-serif}));
-	padding: var(--footer-padding, #{$padding-site-footer});
+:where( .site-footer ) {
+	background: var( --footer-background, #{ $color-site-footer-bg } );
+	color: var( --footer-text-color, #{ $color-grayscale-a } );
+	display: flex;
+	flex-direction: column-reverse;
+	font-family: var( --footer-text-font, var( --bu-text-font, #{ $font-family-sans-serif } ) );
+	gap: calc( var( --size-fluid-spacing ) * 2 );
+	padding: var( --footer-padding, #{ $padding-site-footer } );
 	position: relative;
-	width: 100%;
-
-	@if ( $enable-css-grid ) {
-		@include css-grid-base;
-	}
+	text-align: center;
 
 	a {
 		color: var(--footer-link-color, #{$color-site-footer-link});
+		text-decoration: none;
 
-		&:hover {
+		&:hover,
+		&:focus {
 			color: var(--footer-link-color--hover, #{$color-site-footer-link-hover});
+			text-decoration: underline;
 		}
 	}
+}
 
-	li {
-		line-height: 1.4;
-		margin: 0 0 0.3em;
+:where( .site-footer-menus ) {
+	display: flex;
+	flex-direction: column;
+	gap: var( --size-fluid-spacing );
 
-		&:last-child {
-			margin: 0;
-		}
+	ul {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: center;
 	}
 
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		@extend %font-size-secondary;
-		color: var(--footer-text-color, #{$color-site-footer});
-		font-family: var(--footer-text-font, #{$font-family-sans-serif});
-		margin: 0 0 0.3em;
+	li {
+		list-style: none;
+		margin: 0;
+		padding: 0;
 	}
 }
 
@@ -278,30 +273,8 @@ body {
 //
 // Since: 1.0.0
 
-.site-footer-social {
-	@extend %col-sm-half;
-	text-align: center;
-
-	@include breakpoint( $sm ) {
-		float: right;
-		text-align: right;
-	}
-
-	.has-branding &,
-	.has-footer-info & {
-		@include breakpoint( $sm ) {
-			text-align: left;
-		}
-	}
-
-	li {
-		@extend %_u-list-inlineLinks;
-	}
-
-	a {
-		@include transition( color 200ms ease-in-out 0s );
-		font-size: var(--social-icon-size, #{$font-size-icon});
-	}
+:where( .site-footer-social-menu ) {
+	gap: 1em;
 }
 
 // Styles social links in menus.
@@ -311,6 +284,12 @@ body {
 // Since: 2.0.0
 
 .menu-item {
+	[href] {
+		&::before {
+			margin: 0;
+		}
+	}
+
 	[href*="bsky.app"] {
 		@extend %icon-bluesky;
 	}
@@ -403,33 +382,10 @@ body {
 //
 // Since: 2.0.0
 
-.site-footer-brand-assets {
-	@extend %col-sm-half;
-	text-align: center;
-
-	@include breakpoint( $sm ) {
-		text-align: left;
-	}
-
-	.has-branding & {
-		@extend %col-md-two-third;
-	}
-
-	a {
-		display: block;
-		margin: 0 auto var(--margin, #{$margin});
-
-		@include breakpoint( $xs ) {
-			display: inline-block;
-			height: 50px;
-			margin-right: var(--margin, #{$margin});
-			vertical-align: middle;
-		}
-
-		@include breakpoint( $sm ) {
-			float: left;
-			text-align: left;
-		}
+:where( .site-footer-brand-assets ) {
+	.brand-masterplate {
+		margin-block-end: 1em;
+		margin-inline: auto;
 	}
 }
 
@@ -440,7 +396,7 @@ body {
 // Since: 1.0.0
 
 .disclaimer {
-	line-height: 50px;
+	// line-height: 50px;
 }
 
 // Styles the container which holds menus (footer links and social) in the site footer
@@ -450,27 +406,8 @@ body {
 //
 // Since: 2.0.0
 
-.site-footer-menus {
-	clear: both;
-
-	.has-footer-info & {
-		@extend %col-sm-half;
-		clear: none;
-
-		@include breakpoint( $sm ) {
-			float: right;
-		}
-	}
-
-	.has-branding & {
-		@extend %col-sm-half;
-		@extend %col-md-third;
-		clear: none;
-
-		@include breakpoint( $sm ) {
-			float: right;
-		}
-	}
+:where( .site-footer-menus ) {
+	@extend %font-size-4;
 }
 
 // Styles the container which holds footer links
@@ -481,21 +418,11 @@ body {
 // Since: 1.0.0
 
 .site-footer-links {
-	@extend %col-sm-half;
-	margin-bottom: var(--margin, #{$margin});
-	text-align: center;
-
-	@include breakpoint( $sm ) {
-		text-align: left;
-	}
-
-	li {
-		@extend %_u-list-inlineLinks;
+	// @extend %col-sm-half;
+}
 
-		.has-branding & {
-			display: block;
-		}
-	}
+:where( .site-footer-links-menu ) {
+	gap: 1rem;
 }
 
 // Styles the container which holds footer information
@@ -507,50 +434,8 @@ body {
 //
 // Since: 1.0.0
 
-.site-footer-info {
-	clear: both;
-	display: block;
-	margin-bottom: var(--margin, #{$margin});
-
-	@include breakpoint( $sm ) {
-		padding-right: var(--padding, #{$padding});
-	}
-
-	.brand-masterplate + & {
-		@include breakpoint( $sm ) {
-			clear: none;
-			float: left;
-			max-width: 60%;
-		}
-
-		@include breakpoint( $md ) {
-			max-width: 75%;
-		}
-	}
-
-	.brand-bumclogo + & {
-		@include breakpoint( $md ) {
-			clear: none;
-			float: left;
-			max-width: 50%;
-		}
-
-		@include breakpoint( $lg ) {
-			max-width: 65%;
-		}
-	}
-
-	.site-footer-disclaimer + & {
-		@include breakpoint( $md ) {
-			clear: none;
-			float: left;
-			max-width: 33%;
-		}
-
-		@include breakpoint( $lg ) {
-			max-width: 50%;
-		}
-	}
+:where( .site-footer-info ) {
+	// clear: both;
 }
 
 // Copyright styles - only for print
diff --git a/burf-theme/layout/_sidebar.scss b/burf-theme/layout/_sidebar.scss
index cf2c75ee..ccf6d196 100644
--- a/burf-theme/layout/_sidebar.scss
+++ b/burf-theme/layout/_sidebar.scss
@@ -4,6 +4,9 @@
 
 .sidebar {
 	background-color: var( --sidebar-background-color, #fafafa );
+	display: flex;
+	flex-direction: column;
+	gap: var( --bu-spacing );
 	grid-area: sidebar;
 	padding-block: var( --bu-container-padding-vertical );
 	padding-inline: var( --bu-container-padding-horizontal );
diff --git a/burf-theme/widgets/_widget-navigation.scss b/burf-theme/widgets/_widget-navigation.scss
index f8e8a8d4..8c6cdf13 100644
--- a/burf-theme/widgets/_widget-navigation.scss
+++ b/burf-theme/widgets/_widget-navigation.scss
@@ -115,26 +115,29 @@ $color-widget-contentnav-active:           $color-link-active !default;
 //
 // Since: 1.0.0
 
-.widget_bu_pages,
-.widget_nav_menu {
+:where(
+	.widget_bu_pages,
+	.widget_nav_menu
+) {
 	h3 {
 		margin-bottom: 0;
 	}
 
 	ul {
-		border-bottom: var(--widget-border, var(--bu-border, #{$border-widget-contentnav}));
+		border-bottom: var( --widget-border, var( --bu-border, #{ $border-widget-contentnav } ) );
+		margin: 0;
 		padding: 0;
 
 		ul {
 			border: 0;
+			border-left: var( --widget-border, var( --bu-border, #{ $border-widget-contentnav } ) );
 			margin: 0;
 		}
 
 	}
 
 	li {
-		border-top: var(--widget-border, var(--bu-border, #{$border-widget-contentnav}));
-		font-family: var(--widget-font, #{$font-family-widget-contentnav});
+		border-top: var( --widget-border, var( --bu-border, #{ $border-widget-contentnav } ) );
 
 		&:first-child {
 			border: 0;
@@ -145,26 +148,31 @@ $color-widget-contentnav-active:           $color-link-active !default;
 			padding: 0 0 0 $padding-small;
 
 			a {
-				font-size: var(--widget-link-nested-size, #{$font-size-widget-contentnav-nested-link});
+				font-size: var( --widget-link-nested-size, #{ $font-size-widget-contentnav-nested-link } );
 			}
 		}
-	}
 
-	a {
-		color: var(--widget-link-color, #{$color-widget-contentnav});
-		display: block;
-		font-size: var(--widget-link-size, #{$font-size-widget-contentnav-link});
-		padding: $padding-small 0;
+		a {
+			display: block;
+			font-size: var( --widget-link-size, #{ $font-size-widget-contentnav-link } );
+			margin: $padding-small 0;
 
-		&:hover,
-		&:focus {
-			color: var(--widget-link-color--hover, #{$color-widget-contentnav-hover});
-			text-decoration: none;
+			&:hover,
+			&:focus {
+				color: var( --widget-link-color--hover, #{ $color-widget-contentnav-hover } );
+				text-decoration: none;
+			}
 		}
 	}
 
-	.active,
-	.current_page_item a {
-		color: var(--widget-link-color--active, #{$color-widget-contentnav-active});
+	.active {
+		color: var( --widget-link-color--active, #{ $color-widget-contentnav-active } );
+	}
+}
+
+.widget_bu_pages,
+.widget_nav_menu {
+	.active {
+		color: var( --widget-link-color--active, #{ $color-widget-contentnav-active } );
 	}
 }
diff --git a/burf-theme/widgets/_widgets.scss b/burf-theme/widgets/_widgets.scss
index 1e27510b..f673ac54 100644
--- a/burf-theme/widgets/_widgets.scss
+++ b/burf-theme/widgets/_widgets.scss
@@ -208,7 +208,6 @@ $border-widget-list:                       $border !default;
 .widget {
 	@extend %col-full;
 	@extend %font-size-secondary;
-	margin-bottom: var(--widget-margin-bottom, #{$widget-margin-bottom});
 
 	&:last-child {
 		margin-bottom: 0;
@@ -258,25 +257,30 @@ $border-widget-list:                       $border !default;
 //
 // Since: 1.0.0
 
-.widget-title {
-	border: var(--widget-title-border, var(--bu-border, #{$border-widget-title}));
-	border-width: var(--widget-title-border-width, #{$border-width-widget-title});
-	color: var(--widget-title-color, var(--bu-heading-color, #{$color-widget-title}));
-	font-family: var(--widget-title-font, var(--bu-heading-font, #{$font-family-widget-title}));
-	padding: 0 0 4px;
+ .widget-title  {
+	border: var( --widget-title-border, var( --bu-border, #{ $border-widget-title } )) ;
+	border-width: var( --widget-title-border-width, #{ $border-width-widget-title});
+	color: var( --widget-title-color, var( --bu-heading-color, #{ $color-widget-title } ) );
+	font-family: var( --widget-title-font, var( --bu-heading-font, #{ $font-family-widget-title } ) );
+	padding-block-end: 0.5em;
+	margin-block: 1em;
 
 	a {
-		@include icon($widget-title-link-icon, $widget-title-link-icon-placement);
 		color: inherit;
 		text-decoration: none;
 
-		&::after {
-			color: var(--widget-title-icon-color, #{$color-widget-title-link-icon});
-		}
+		&:last-child {
+			@include icon($widget-title-link-icon, $widget-title-link-icon-placement);
+
+			&::after {
+				color: var(--widget-title-icon-color, #{$color-widget-title-link-icon});
+			}
 
-		&:hover::after {
-			color: var(--widget-title-icon-color--hover, #{$color-widget-title-link-icon-hover});
+			&:hover::after {
+				color: var(--widget-title-icon-color--hover, #{$color-widget-title-link-icon-hover});
+			}
 		}
+
 	}
 }