/* Typefaces */
@font-face {
	font-family: 'CWA-Icons-Round';
	src: url(../fonts/CWA-Icons-Round.otf);
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CWA-Icons-Plain';
	src: url(../fonts/CWA-Icons-Plain.otf);
	font-weight: normal;
	font-style: normal;
}

/* wdth:  25 -  151  Width */
/* wght:   1 - 1000  Weight */
/* GRAD:   0 -  100  Grad */
/* ROND:   0 -  100  Rondness */
/* slnt: -10 -    0  Italics */
@font-face {
	font-family: 'Google Sans Flex';
	src: url(../fonts/Google-Sans-Flex.ttf);
	font-weight: 1 1000;
	font-style: normal;
}
/* Typefaces */

/* Begin Reset Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* End Reset Styles */

/* Begin Global Elements */
:root {
	--cwa-logo-tall-orange: #ff5600;
    --cwa-logo-tall-green: #93e11a;
    --cwa-logo-tall-blue: #0095ef;
    --cwa-logo-tall-title: #545a60;
    --cwa-logo-tall-subtitle: #0095ef;
    --cwa-logo-tall-tagline: #000;
    --cwa-logo-wide-orange: #ff5600;
    --cwa-logo-wide-green: #93e11a;
    --cwa-logo-wide-blue: #0095ef;
    --cwa-logo-wide-title: #545a60;
    --cwa-logo-wide-subtitle: #0095ef;
    --cwa-logo-wide-tagline: #000;
	--cwa-bg: #fff;
	--cwa-nav-bg: #fff;
	--cwa-footer-bg: #fff;
	--cwa-nav-bg-opacity: 0.05;
	--cwa-footer-bg-opacity: 0.05;
	--cwa-nav-footer-p: #3e4348;
	--cwa-nav-menu-a: #545a60;
	--cwa-nav-menu-a-hover: #0095ef;
	--cwa-nav-menu-a-underline: #ff5600;
	--cwa-mobile-nav: #545a60;
	--cwa-mobile-nav-bg: #545a60;
	--cwa-mobile-nav-menu-overlay: #0095ef;
	--cwa-mobile-nav-menu-a: #fff;
	--cwa-link: #0095ef;
	--cwa-link-hover: #ff5600;
	--cwa-social-media-a: #0095ef;
	--cwa-social-media-a-hover: #ff5600;
	--cwa-paragraph-h: #3e4348;
	--cwa-paragraph-h-rev: #fff;
	--cwa-paragraph-p: #3e4348;
	--cwa-paragraph-p-rev: #fff;
	--cwa-orange: #ff5600;
	--cwa-green: #93e11a;
	--cwa-blue: #0095ef;
	--cwa-grey: #545a60;
	--cwa-button-bg: #ff5600;
	--cwa-button-hover: #0095ef;
	--cwa-button-text: #fff;
	--cwa-button-icon: #fff;
	--cwa-button-border-strength: 70%;
	--cwa-black: #000;
	--cwa-white: #ffffff;
	--cwa-card-bg: #fff;
	--cwa-border: #efefef;
	--cwa-video-container: #ccc;
	--cwa-image-filter: 0%;
	--cwa-box-shadow-strength: 20%;
	--cwa-filter-invert: 0%;
	--cwa-nav-footer-header-icons: #78899b;
	--cwa-theme-switcher: #545a60;
	--cwa-theme-switcher-icon: #0095ef;
	--cwa-highlight: #ffff33;
	--cwa-forms-bg: #fff;
	--cwa-forms-input: #fff;
	--cwa-forms-input-focus: #0095ef;
	--cwa-forms-label: #000;
	--cwa-forms-placeholder: #ccc;
	--cwa-forms-text: #000;
	--cwa-forms-submit: #0095ef;
	--cwa-forms-clear: #ff5600;
	--cwa-forms-error: #ff5600;
	--cwa-search-icon: #545a60;
	--cwa-search-icon-hover: #0095ef;
}
.darkmode {
	--cwa-logo-tall-orange: #fff;
    --cwa-logo-tall-green: #fff;
    --cwa-logo-tall-blue: #fff;
    --cwa-logo-tall-title: #fff;
    --cwa-logo-tall-subtitle: #fff;
    --cwa-logo-tall-tagline: #fff;
    --cwa-logo-wide-orange: #fff;
    --cwa-logo-wide-green: #fff;
    --cwa-logo-wide-blue: #fff;
    --cwa-logo-wide-title: #fff;
    --cwa-logo-wide-subtitle: #fff;
    --cwa-logo-wide-tagline: #fff;
	--cwa-bg: #ccc;
	--cwa-nav-bg: #454545;
	--cwa-footer-bg: #454545;
	--cwa-nav-bg-opacity: 0.7;
	--cwa-footer-bg-opacity: 0.07;
	--cwa-nav-footer-p: #9f9f9f;
	--cwa-nav-menu-a: #9f9f9f;
	--cwa-nav-menu-a-hover: #fff;
	--cwa-nav-menu-a-underline: #fff;
	--cwa-mobile-nav: #fff;
	--cwa-mobile-nav-bg: #fff;
	--cwa-mobile-nav-menu-overlay: #2c2c2c;
	--cwa-mobile-nav-menu-a: #fff;
	--cwa-link: #959595;
	--cwa-link-hover: #ffff;
	--cwa-social-media-a: #a4a9ad;
	--cwa-social-media-a-hover: #fff;
	--cwa-paragraph-h: #000;
	--cwa-paragraph-h-rev: #fff;
	--cwa-paragraph-p: #000;
	--cwa-paragraph-p-rev: #fff;
	--cwa-orange: #000;
	--cwa-green: #ccc;
	--cwa-blue: #000;
	--cwa-grey: #545a60;
	--cwa-button-bg: #000;
	--cwa-button-hover: #545a60;
	--cwa-button-text: #fff;
	--cwa-button-icon: #fff;
	--cwa-button-border-strength: 40%;
	--cwa-black: #000;
	--cwa-white: #fff;
	--cwa-card-bg: #efefef;
	--cwa-border: #000;
	--cwa-video-container: #959595;
	--cwa-image-filter: 100%;
	--cwa-box-shadow-strength: 60%;
	--cwa-filter-invert: 100%;
	--cwa-nav-footer-header-icons: #ccc;
	--cwa-theme-switcher: #fff;
	--cwa-theme-switcher-icon: #fff;
	--cwa-highlight: #fff;
	--cwa-forms-bg: #efefef;
	--cwa-forms-input: #c9c9c9;
	--cwa-forms-input-focus: #000;
	--cwa-forms-label: #000;
	--cwa-forms-placeholder: #6f6f6f;
	--cwa-forms-text: #000;
	--cwa-forms-submit: #000;
	--cwa-forms-clear: #6f6f6f;
	--cwa-forms-error: #000;
	--cwa-search-icon: #000;
	--cwa-search-icon-hover: #545a60;
}

/* Begin All Page Transitions */
@view-transition {
	navigation: auto;
}
::view-transition-group(root) {
  animation-duration: 1s;
}
/* End All Page Transitions */

body {
	background: hsl(from var(--cwa-bg) h s l);
	font-family: 'Google Sans Flex', sans-serif;
	font-size: 1rem;
	font-optical-sizing: auto;
	font-style: normal;
}
/* End Global Elements */

/* Begin CWA Logo Elements: Tall Vers */
.cwa-logo-tall-blue {
    fill: hsl(from var(--cwa-logo-tall-blue) h s l);
}
.cwa-logo-tall-green {
	fill: hsl(from var(--cwa-logo-tall-green) h s l);
}
.cwa-logo-tall-orange {
	fill: hsl(from var(--cwa-logo-tall-orange) h s l);
}
.cwa-logo-tall-tagline {
	fill: hsl(from var(--cwa-logo-tall-tagline) h s l);
}
.cwa-logo-tall-title {
	fill: hsl(from var(--cwa-logo-tall-title) h s l);
}
.cwa-logo-tall-subtitle {
	fill: hsl(from var(--cwa-logo-tall-subtitle) h s l);
}
/* End  CWA Logo Elements: Tall Vers */

/* Begin CWA Logo Elements: Wide Vers */
.cwa-logo-wide-blue {
    fill: hsl(from var(--cwa-logo-wide-blue) h s l);
}
.cwa-logo-wide-green {
	fill: hsl(from var(--cwa-logo-wide-green) h s l);
}
.cwa-logo-wide-orange {
	fill: hsl(from var(--cwa-logo-wide-orange) h s l);
}
.cwa-logo-wide-tagline {
	fill: hsl(from var(--cwa-logo-wide-tagline) h s l);
}
.cwa-logo-wide-title {
	fill: hsl(from var(--cwa-logo-wide-title) h s l);
}
.cwa-logo-wide-subtitle {
	fill: hsl(from var(--cwa-logo-wide-subtitle) h s l);
}
/* End CWA Logo Elements: Tall Vers */

/* Begin Animating Tall CWA Logo Elements on Hover */
#animated-tall-logo-link:hover .cwa-logo-tall-blue {
	transform-origin: center; 
	animation: animated-tall-logo-link 0.3s ease-in-out 1;
    animation-delay: 0.0s;
}
#animated-tall-logo-link:hover .cwa-logo-tall-green {
	transform-origin: center; 
	animation: animated-tall-logo-link 0.35s ease-in-out 1;
    animation-delay: 0.27s;
}
#animated-tall-logo-link:hover .cwa-logo-tall-orange {
	transform-origin: center; 
	animation: animated-tall-logo-link 0.4s ease-in-out 1;
    animation-delay: 0.49s;
}
@keyframes animated-tall-logo-link {
    0% {
        transform: scale(1); /* Starting normal size */
    }
    50% {
        transform: scale(0.95); /* Grows 50% larger at the midpoint */
    }
    100% {
        transform: scale(1); /* Shrinks back to normal size at the end */
    }
}
/* End Animating Tall CWA Logo Elements on Hover */

/* Begin Animating Wide CWA Logo Elements on Hover */
#animated-wide-logo-link:hover .cwa-logo-wide-blue {
	transform-origin: center; 
	animation: animated-wide-logo-link 0.3s ease-in-out 1;
    animation-delay: 0.0s;
}
#animated-wide-logo-link:hover .cwa-logo-wide-green {
	transform-origin: center; 
	animation: animated-wide-logo-link 0.35s ease-in-out 1;
    animation-delay: 0.27s;
}
#animated-wide-logo-link:hover .cwa-logo-wide-orange {
	transform-origin: center; 
	animation: animated-wide-logo-link 0.4s ease-in-out 1;
    animation-delay: 0.49s;
}
@keyframes animated-wide-logo-link {
    0% {
        transform: scale(1); /* Starting normal size */
    }
    50% {
        transform: scale(0.985); /* Grows 50% larger at the midpoint */
    }
    100% {
        transform: scale(1); /* Shrinks back to normal size at the end */
    }
}
/* End Animating Wide CWA Logo Elements on Hover */


/* ----- Begin General Page Structure for All Pages ----- */
.page-layout {
	display: grid;
	/* 5 equal columns of 1fr, 3 rows */
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'nav    nav    nav    nav    nav'
		'main   main   main   main   main'
		'footer footer footer footer footer';
	min-height: 100dvh;
	width: 100%;
}
nav.nav-area {
	grid-area: nav;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	background-color: hsl(from var(--cwa-nav-bg) h s l);
	z-index: 1000;
	border-bottom: 1px solid hsl(from var(--cwa-border) h s l);
	transition: box-shadow 0.3s ease;
}
nav.nav-area.scrolled {
	border-bottom: 1px solid hsl(from var(--cwa-border) h s l);
	box-shadow: 0 4px 6px hsl(from var(--cwa-black) h s l / var(--cwa-box-shadow-strength)); /* Class toggled by JavaScript on scroll */
}
nav.nav-area::before {
	content: ""; /* Required for pseudo-elements to render */
	position: absolute;
	inset: 0; /* Stretches the layer to fill the entire parent */
	z-index: -1;
  	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: var(--cwa-nav-bg-opacity);
}
main.main-area {
	grid-area: main;
	/* Add top padding so the fixed nav doesn't cover the main content */
	padding-top: calc(370px + 3rem); /* Adjust based on your nav's actual height */
	padding: 2rem;
}
footer.footer-area {
	grid-area: footer;
	position: relative;
	isolation: isolate;
	background-color: hsl(from var(--cwa-footer-bg) h s l);
	padding: 2rem 2rem 0rem 2rem;
	text-align: center;
	border-top: 1px dotted hsl(from var(--cwa-border) h s l);
	box-shadow: 0 -4px 6px hsl(from var(--cwa-black) h s l / var(--cwa-box-shadow-strength));
}
footer.footer-area::before {
	content: ""; /* Required for pseudo-elements to render */
	position: absolute;
	inset: 0; /* Stretches the layer to fill the entire parent */
	z-index: -1;
  	background-image: url('../images/cwa_topo.svg');
  	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: var(--cwa-footer-bg-opacity);
}
/* ----- End General Page Structure for All Pages ----- */


/* ---- Begin Navigation Layout for All Pages ---- */
.nav-container {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	grid-template-areas: 
		"logo mode"
		"logo nav-menu";
	gap: 16px;
	padding: 24px 34px 14px 34px;
}
.nav-container .logo {
	grid-area: logo;
	display: grid;
	place-items: center; /* Centers horizontally and vertically */
	padding-right: 24px;
}
.nav-container .logo svg {
	display: inline-flex;
	height: 135px;
	width: 100%;
}
/* Mode Area */
.nav-container .mode {
	grid-area: mode;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start; /* Aligns to top right corner */
}
.nav-container .nav-menu {
	grid-area: nav-menu;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}
/* ---- End Navigation Layout for All Pages ---- */

/* ---- Begin Footer Layout for All Pages ---- */
.footer-container {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		'contact   quick-links disclaimer'
		'copyright copyright   copyright';
	gap: 0 20px;
}
.contact {
	grid-area: contact;
	justify-self: start;
	align-self: start;
}
.quick-links {
	grid-area: quick-links;
	justify-self: start;
	align-self: start;
	padding: 0 2.5rem;
}
.disclaimer {
	grid-area: disclaimer;
	/* Always fits within the available space */
	width: 100%;
}
.copyright {
	grid-area: copyright;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 15px 0 0 0;
	padding: 15px 0 15px 0;
	border-top: 2px dotted hsl(from var(--cwa-border) h s 70);
}
@media (max-width: 768px) {
	.footer-container {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			'contact'
			'quick-links'
			'disclaimer'
			'copyright';
		gap: 0 20px;
	}
	.contact {
		grid-area: contact;
		justify-self: center;
		align-self: start;
	}
	.quick-links {
		grid-area: quick-links;
		justify-self: center;
		align-self: start;
		padding: 0 2.5rem;
	}
	.footer-container .contact h3, .footer-container .quick-links h3, .footer-container .disclaimer h3 {
		text-align: center !important;
		margin-top: 1rem !important;
	}
	.contact p, .contact .social-media {
		text-align: center !important;
	}
}
/* ---- End Footer Layout for All Pages ---- */



/* Begin Navigation Menu Area Contents */
.nav-container #navbar { /* Navigation Bar */
    width: fit-content;
}   
.nav-container .navi-list { /* Unordered List */
    list-style: none;
    display: flex;
    align-items: center;
}
.nav-container .navi-item { /* Nav Items */
    position: relative;
}
.nav-container .navi-link { /* Nav Links */
	position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 10px 10px;
    color: hsl(from var(--cwa-grey) h s l);
    text-decoration: none;
    font-size: clamp(0.625rem, calc(0.489rem + 0.682vw), 1rem);
	font-weight: 500;
	font-variation-settings:
		'slnt' 0,
		'wdth' 70,
		'GRAD' 0,
		'ROND' 0;
	line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
 }
 .nav-container .navi-item a.navi-link {
	color: hsl(from var(--cwa-nav-menu-a) h s l);
}
.nav-container .navi-item:hover .navi-link { /* Hover State for Links */
    color: hsl(from var(--cwa-nav-menu-a-hover) h s l);
}     
.nav-container .triangle-icon { /* SVG Triangle Icon Styling */
	position: relative;
	top: 1px;
    width: 12px;
    fill: hsl(from var(--cwa-nav-menu-a) h s l);
    transform: rotate(-90deg); /* Points right initially */
    transition: transform 0.3s ease;
}
.nav-container .navi-item:hover .triangle-icon { /* Triangle Rotates Down on Hover */
    transform: rotate(0deg); /* Points Down */
}
.nav-container .dropdown-menu { /* Dropdown Menu Styling */
    font-size: clamp(0.625rem, calc(0.489rem + 0.682vw), 1rem);
	font-weight: 500;
	font-variation-settings:
		'slnt' 0,
		'wdth' 70,
		'GRAD' 0,
		'ROND' 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: hsl(from var(--cwa-bg) h s l);
    min-width: 150px;
	box-shadow: 0 4px 6px hsl(from var(--cwa-black) h s l / 20%);
    border-radius: 0 0 6px 6px;
    padding: 0;
    list-style: none;
    z-index: 1000;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-container .navi-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%; 
	height: 2px;
	background-color: hsl(from var(--cwa-blue) h s l);
	transition: width 0.3s ease-in-out;
}
.nav-container .navi-item:hover .navi-link::after {
	width: 100%;
}
.nav-container .navi-item:hover .dropdown-menu { /* Dropdown Becomes Visible on Hover */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-container .dropdown-item a {
    display: block;
    padding: 16px 16px;
    text-decoration: none;
	color: hsl(from var(--cwa-nav-menu-a) h s l);
}
.nav-container .dropdown-item a:hover {
    background-color: hsl(from var(--cwa-nav-menu-a) h s 90);
    color: hsl(from var(--cwa-nav-menu-a) h s 0);
}
.nav-container .dropdown-item:last-child a:hover {
    border-radius: 0 0 6px 6px;
}
.bkc-lightbox-dialog-outer { /* OnceHub Calendar Popup Override */
	background: hsl(from var(--cwa-blue) h s l / 60%) !important;
	backdrop-filter: blur(5px);
}
.bkc-lightbox-static-container { /* OnceHub Calendar Popup Override */
	box-shadow: 0px 0px 10px 5px hsl(from var(--cwa-blue) h s 30) !important;
}

.nav-container #theme-switch { /* Begin Dark Mode Theme */
	height: 38px;
	width: 38px;
	padding: 0;
	margin-top: 5px; /* Accounts for border vs Mobile Nav Button */
	border-radius: 50%;
	background-color: hsl(from var(--cwa-theme-switcher) h s l / 10%);
	border: 3px solid hsl(from var(--cwa-theme-switcher) h s l);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.nav-container #theme-switch:hover {
	transform: scale(1.1);
}
.nav-container > #theme-switch svg {
	fill: hsl(from var(--cwa-theme-switcher-icon) h s l);
	width: 20px;
}
#theme-switch svg:last-child {
	display: none;
}
.darkmode #theme-switch svg:first-child {
	display: none;
}
.darkmode #theme-switch svg:last-child {
	display: block;
	fill: hsl(from var(--cwa-theme-switcher-icon) h s l);
}

.mobile-nav { /* Begin Mobile Nav Hamburger - Does Not Display at Large Screen Sizes */
	grid-area: nav-menu;
	display: flex;
	justify-content: center;
	width: 100%;
	display: none;
}
.mobile-nav .hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: hsl(from var(--cwa-mobile-nav-bg) h s l / 20%);
	border: 3px solid hsl(from var(--cwa-mobile-nav) h s l);
	border-radius: 4px;
	width: 100%;
	cursor: pointer;
}
.mobile-nav svg.hamburger {
	fill: hsl(from var(--cwa-mobile-nav) h s l);
}
.mobile-nav .mobile-nav-button {
	background: transparent;
	border: none;
}
.mobile-nav .mobile-nav-button .line {
	transition: y 200ms ease-in 200ms, rotate 200ms ease-in, opacity 0ms 200ms;
	transform-origin: center;
}
.mobile-nav .mobile-nav-button[aria-expanded="true"] .line {
	transition: y 200ms ease-in, rotate 200ms ease-in 200ms, opacity 0ms 200ms;
}
.mobile-nav .mobile-nav-button[aria-expanded="true"] :is(.top, .bottom) {
	y: 45;
}
.mobile-nav .mobile-nav-button[aria-expanded="true"] .top {
	rotate: 45deg;
}
.mobile-nav .mobile-nav-button[aria-expanded="true"] .middle {
	opacity: 0;
}
.mobile-nav .mobile-nav-button[aria-expanded="true"] .bottom {
	rotate: -45deg;
}

.menu-overlay { /* Begin Mobile Nav Menu Overlay - Does Not Display at Large Screen Sizes */
	position: absolute;
	top: 100%; /* Positions exactly at the bottom edge of the header */
	left: 0;
	width: 100%;
	height: calc(100vh - 100%); /* Fills the rest of the viewport screen */
	background-color: hsl(from var(--cwa-mobile-nav-menu-overlay) h s l / 0.75);
	backdrop-filter: blur(8px);
	z-index: 90; /* Lower than header, higher than main content */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-overlay.is-active { /* Toggled via JavaScript */
	visibility: visible;
	opacity: 1;
}
.menu-overlay ul.menu-links {
	background-color: hsl(from var(--cwa-mobile-nav-menu-overlay) h s l / 0.9);
	border: 4px solid hsl(from var(--cwa-mobile-nav-menu-overlay) h s 40);
	margin: 2rem;
	border-radius: 12px;
}
.menu-overlay .menu-links {
	list-style: none;
	padding: 2rem;
	text-align: center;
}
.menu-overlay .menu-links li a {
	display: block;
	font-size: clamp(0.875rem, calc(0.693rem + 0.909vw), 1.375rem);
	font-weight: 650;
	font-variation-settings:
		'slnt' 0,
		'wdth' 90,
		'GRAD' 0,
		'ROND' 0;
	color: hsl(from var(--cwa-mobile-nav-menu-a) h s l);
	text-decoration: none;
	padding: 1rem 0 0.4rem 0;
}
.menu-overlay .menu-links li a svg {
	display: inline-flex;
	width: 12px;
	height: 12px;
	margin-right: 3px;
	fill: hsl(from var(--cwa-mobile-nav-menu-a) h s l);
	transform: rotate(90deg); /* Points Down */
}
.menu-overlay .menu-links li:first-child a {
	padding: 0 0 0.4rem 0;
}
.menu-overlay .menu-links li.sublink a {
	font-size: clamp(0.750rem, calc(0.659rem + 0.455vw), 1.000rem);
	font-weight: 400;
	padding: 0.4rem 0;
}

@media (max-width: 982px) {
	.nav-container {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
			"mode"
			"logo"
			"nav-menu";
		padding: 24px 24px 14px 24px;
		gap: 8px;
	}
  	.nav-container .mode {
  		grid-area: mode;
		display: flex;
		justify-content: center;
		align-items: center;
		align-self: center;
		padding-bottom: 5px;
	}
	.nav-container .logo {
		border-right: none;
		padding: 0;
		justify-content: center;
	}
	.nav-container .logo svg {
		height: 140px;
		width: 100%;
	}
	.nav-container .nav-menu {
		grid-area: nav-menu;
		display: flex;
		justify-self: center;
	}
	.nav-container ul.navi-list .get-started {
		display: none;
	}
	.nav-container #theme-switch {
		height: 32px;
		width: 32px;
		padding: 0;
		border-radius: 4px;
	}
}
@media (max-width: 500px) {
	.nav-container {
		grid-template-columns: auto 2fr auto;
		grid-template-rows: 1fr;
		grid-template-areas:
			"mode logo nav-menu";
		padding: 24px 24px 14px 24px;
		gap: 5px;
	}
  	.nav-container .mode {
  		grid-area: mode;
		display: flex;
		justify-content: left;
		align-items: center;
		align-self: center;
		padding-right: 5px;
	}
	.nav-container .logo {
		border-right: none;
		padding: 0;
		justify-content: center;
	}
	.nav-container .logo svg {
		height: 110px;
		width: 100%;
	}
	.nav-container ul.navi-list {
		display: none;
		flex-direction: column;
		width: 100%;
		gap: 16px;
		padding-top: 16px;
	}
	/* Mobile Nav - Displays at Small Screen Sizes */
	.mobile-nav {
		grid-area: nav-menu;
		display: flex;
		justify-content: center;
		width: 100%;
		padding-left: 5px;
	}
	.mobile-nav svg.hamburger {
		width: 32px;
	}
	.nav-container #theme-switch {
		height: 32px;
		width: 32px;
		padding: 0;
		border-radius: 4px;
	}
}
/* End Navigation Menu Area Contents */



/* --- Begin Footer Area Contents --- */
.footer-container a {
	text-decoration: none;
	color: hsl(from var(--cwa-link) h s l);
}
.footer-container a:hover {
	color: hsl(from var(--cwa-link-hover) h s l);
	text-decoration: none;
	transition: color 0.3s ease-out;
}
.footer-container .contact h3,
.footer-container .quick-links h3,
.footer-container .disclaimer h3 {
	font-size: clamp(0.813rem, calc(0.741rem + 0.357vw), 1.063rem);
	font-weight: 600;
	font-variation-settings:
		'slnt' 0,
		'wdth' 70,
		'GRAD' 0,
		'ROND' 0;
	line-height: 1;
	text-align: left;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: hsl(from var(--cwa-nav-footer-header-icons) h s 80);       /* Change line color */
	text-decoration-thickness: 2px;       /* Change line thickness */
	text-underline-offset: 13px;           /* Distance between text and line */
	text-decoration-style: dashed;
	color: hsl(from var(--cwa-nav-footer-header-icons) h s l / 100%);
	margin: 1rem 0 1.4rem 0;
}
.contact h3 {
	text-align: left;
}
.contact .logo a {
	display: inline-flex;
	justify-content: left;
}
.contact .logo svg {
	width: 75%;
}
.contact {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
	margin: 1.2rem 0 0 0;
}
.contact li {
	font-size: clamp(0.750rem, calc(0.643rem + 0.536vw), 1.125rem);
	font-size: clamp(0.813rem, calc(0.767rem + 0.227vw), 0.938rem);
	font-weight: 400;
	font-variation-settings:
		'slnt' 0,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	color: hsl(from var(--cwa-nav-footer-p) h s l / 1.0);
	display: flex;
	align-items: flex-start; /* Aligns icon with the 1st line of text */
	align-items: center;
	margin-bottom: 15px;     /* Large gap between rows */
	line-height: 1.0;
}
.contact li:first-child {
	margin-bottom: 15px;
}
.contact li:last-child {
	margin-bottom: 0;
}
.contact .contact-icon { /* Icon Spacing */
	margin-right: 12px;
	align-self: flex-start;
	flex-shrink: 0; /* Prevents icon from shrinking */
}
.contact .contact-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.contact .contact-content span {
	white-space: nowrap; 
}
.contact .email-line {
	font-size: clamp(0.625rem, calc(0.554rem + 0.357vw), 0.875rem);
	font-variation-settings:
		'slnt' -4,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
}
.quick-links h3 {
	justify-self: center;
}
.disclaimer p {
	font-size: clamp(0.625rem, calc(0.518rem + 0.536vw), 1.000rem);
	font-weight: 400;
	font-variation-settings:
		'slnt' 0,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	color: hsl(from var(--cwa-nav-footer-p) h s l);
	margin: 0.4rem 0;
	text-align: justify;
}
.copyright p {
	font-size: clamp(0.625rem, calc(0.518rem + 0.536vw), 1.000rem);
	font-weight: 400;
	font-variation-settings:
		'slnt' 0,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	color: hsl(from var(--cwa-nav-footer-p) h s l / 100%);
	text-align: left;
}
/* Begin Footer Social Media Icons */
.copyright ul.social-media-icons {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 6px;
}
.copyright ul.social-media-icons li svg {
	width: 30px;
	fill: hsl(from var(--cwa-social-media-a) h s 100);;
	transform-origin: center;
}
.copyright ul.social-media-icons a .sm_circle { /* Default State for SM Icons */
	width: 30px;
	height: 30px;
	background-color: hsl(from var(--cwa-social-media-a) h s l);
	border-radius: 9999px;
	transition: background-color 0.3s ease; 
}
.copyright ul.social-media-icons a .sm_circle svg {
	fill: hsl(from var(--cwa-social-media-a) h s 100);
	transition: fill 0.3s ease; 
}
.copyright ul.social-media-icons a:hover .sm_circle { /* Hover State for SM Icons */
	width: 30px;
	height: 30px;
	background-color: hsl(from var(--cwa-social-media-a-hover) h s l);
	border-radius: 9999px;
}
.copyright ul.social-media-icons a:hover .sm_circle svg {
	fill: hsl(from var(--cwa-social-media-a-hover) h s 0);
	animation: grow-shrink 0.5s ease-in-out 1 forwards;
}
@keyframes grow-shrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5); /* Peak grow size (30% bigger) */
  }
  100% {
    transform: scale(1); /* Return to original size */
  }
}
/* End Footer Social Media Icons */

@media (max-width: 768px) {
	.nav-container .action .nav-button {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
	}
	.nav-container .action p {
		font-size: clamp(1.000rem, calc(0.857rem + 0.714vw), 1.500rem);
		margin-top: 1rem;
		text-align: center;
	}
	.contact .logo a {
		display: inline-flex;
		justify-content: center;
		margin-bottom: 0.3rem;
	}
	.contact .logo svg {
		width: 75%;
	}
	.contact ul {
		margin: 1.2rem auto 0 auto;
	}
	.contact li {
		margin-bottom: 8px;     /* Large gap between rows */
		line-height: 1.1;
	}
	.contact li:first-child {
		margin-bottom: 8px;
	}
	.contact li:last-child {
			margin-bottom: 0;
}
	.contact .social-media {
		text-align: center;
		text-decoration: none;
		margin: 0;
	}
}
/* --- Begin Footer Footer Area Contents --- */








/* --- Begin Common Main Content Items --- */
a {
	text-decoration: none;
}
h2 {
	font-size: clamp(2.25rem, calc(1.977rem + 1.364vw), 3rem);
	font-weight: 700;
	font-variation-settings:
		'slnt' -4,
		'wdth' 90,
		'GRAD' 0,
		'ROND' 0;
	line-height: 1.05;
	text-wrap: balance;
	color: hsl(from var(--cwa-paragraph-h) h s l);
}
h3 {
	font-size: clamp(1.625rem, calc(1.352rem + 1.364vw), 2.375rem);
	font-weight: 600;
	font-variation-settings:
		'slnt' -4,
		'wdth' 85,
		'GRAD' 0,
		'ROND' 0;
	line-height: 0.95;
	text-wrap: balance;
	color: hsl(from var(--cwa-paragraph-h) h s l);
}
h4 {
	font-size: clamp(1.25rem, calc(1.023rem + 1.136vw), 1.875rem);
	font-weight: 500;
	font-variation-settings:
		'slnt' -4,
		'wdth' 85,
		'GRAD' 0,
		'ROND' 0;
	line-height: 1.05;
	text-wrap: balance;
	color: hsl(from var(--cwa-paragraph-h) h s l);
}
h5 {
	font-size: clamp(1.000rem, calc(0.636rem + 1.818vw), 2.000rem);
	font-weight: 500;
	font-variation-settings:
		'slnt' -4,
		'wdth' 85,
		'GRAD' 0,
		'ROND' 0;
	line-height: 1.05;
	text-wrap: balance;
	color: hsl(from var(--cwa-paragraph-h) h s l);
}
p {
	font-size: clamp(1rem, calc(0.818rem + 0.909vw), 1.5rem);
	font-weight: 300;
	font-variation-settings:
		'slnt' 0,
		'wdth' 85,
		'GRAD' 0,
		'ROND' 0;
	line-height: 1.05;
	color: hsl(from var(--cwa-paragraph-p) h s l);
}
span.italic {
	font-variation-settings:
		'slnt' -4,
		'wdth' 85,
		'GRAD' 0,
		'ROND' 0;
}
span.bold {
	font-weight: 700;
}
span.extrabold {
	font-weight: 800;
}
/* --- End Common Main Content Items --- */


/* BEGIN ALL PAGE CONTENT BELOW */

/* Begin Home 01 */
.home-01 {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'headline image'
		'text image'
		'button image';
	justify-self: center;
	width: 100%;
	max-width: 1440px;
	min-height: 300px;
	background-color: hsl(from var(--cwa-bg) h s l);
	overflow: hidden;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid hsl(from var(--cwa-border) h s l);
}
.headline-area {
	grid-area: headline;
	padding: 40px 10px 20px 0px;
}
.headline-area h2 {
	text-align: left;
}
.text-area {
	grid-area: text;
	padding: 0px 1cap 40px 0px;
}
.text-area h3 {
	text-align: left;
}
.button-area {
	grid-area: button;
	margin: 0 auto;
	width: 50%;
}
.image-area {
	grid-area: image;
	background-image: url('../images/istockphoto-1187808850.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: grayscale(var(--cwa-image-filter));
	width: 100%;
	height: 100%;
}
/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
	.home-01 {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		grid-template-areas:
			'image'
			'headline'
			'text'
			'button';
	}
	.home-01 .image-area {
		min-height: 200px;
	}
	.headline-area h2 {
		text-align: center;
	}
	.text-area h3 {
		text-align: center;
	}
}
/* End Home 01 */



/* Begin Home 02 */
.home-02 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		'header header'
		'paragraph paragraph'
		'col1 col2'
		'banner banner';
	gap: 1.5rem;
	justify-self: center;
	margin-bottom: 2rem;
	padding: 0 0rem 2rem 0;
	background-color: hsl(from var(--cwa-bg) h s l);
	max-width: 1440px;
	border-bottom: 1px solid hsl(from var(--cwa-border) h s l);
}
.home-02 .header {
	grid-area: header;
}
.home-02 .paragraph {
	grid-area: paragraph;
}
.home-02 .col-one {
	grid-area: col1;
	width: 100%;
}
.home-02 .col-two {
	grid-area: col2;
}
.home-02 .banner {
	grid-area: banner;
}
.home-02 .header h3 {
	text-align: center;
	margin: 0;
}
.home-02 .banner p {
	font-size: clamp(0.875rem, calc(0.696rem + 0.893vw), 1.500rem);
	font-weight: 300;
	font-variation-settings:
		'slnt' -4,
		'wdth' 85,
		'GRAD' 0,
		'ROND' 0;
	text-align: center;
	text-wrap: balance;
	padding: 0.5rem 1rem;
	background: hsl(from var(--cwa-paragraph-p) h s l / 50%);
	color: hsl(from var(--cwa-paragraph-p-rev) h s l);
	border-radius: 9999px;
}
.home-02 .col-one h4,
.home-02 .col-two h4 {
	text-align: center;
}
@media (max-width: 768px) {
	.home-02 {
		grid-template-areas:
			'header'
			'paragraph'
			'col1'
			'col2'
			'banner';
		grid-template-columns: 1fr;
	}
}
/* Begin Home 02 */



/* Begin Home 03 */
.home-03 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "header header header"
      "description description description"
      "card1 card2 card3"
      "button button button";
    gap: 20px;
	justify-self: center;
    padding: 0 0 24px 0;
    max-width: 1440px;
	border-bottom: 1px solid hsl(from var(--cwa-border) h s l);
  }
  .home-03-header {
    grid-area: header;
	margin: 0;
  }
  .home-03-header h3 {
	text-align: center;
	margin: 0;
	padding: 0;
  }
  .home-03-description {
    grid-area: description;
    text-align: center;
    line-height: 1.6;
    margin: 0 auto 0.5rem auto;
  }
  .home-03-description p {
	text-align: left;
  }
  .subcard {
    background-color: hsl(from var(--cwa-card-bg) h s l);
    padding: 24px;
    border-radius: 8px;
	box-shadow: 0 4px 6px -1px hsl(from var(--cwa-black) h s l / 0.4);
    border: 1px solid hsl(from var(--cwa-grey) h s l);
  }
  .subcard h5 {
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: clamp(1.000rem, calc(0.857rem + 0.714vw), 1.500rem);
	font-weight: 600;
	text-align: center;
  }
  .subcard p {
	font-size: clamp(0.750rem, calc(0.477rem + 1.364vw), 1.500rem);
	font-weight: 300;
	font-variation-settings:
		'slnt' -4,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
    line-height: 1.1;
    margin: 0;
  }
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
	width: 100%;
  }
  .home-03-button-container {
    grid-area: button;
    display: flex;
    justify-content: center;
  }
@media (max-width: 768px) {
	.home-03 {
		grid-template-columns: 1fr;
    	grid-template-areas:
			"header"
			"description"
			"card1"
			"card2"
			"card3"
			"button";
	}
	.subcard {
		width: 80%;
		justify-self: center;
    	padding: 12px;
	}
}
/* End Home 03 */


/* Begin Home 04 */
.home-04 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas:
		"testimonial testimonial-image";
	gap: 24px;
	justify-self: center;
	min-height: 400px;
	max-width: 1440px;
	width: 100%;
	margin-top: 2rem;
	border-bottom: 1px solid hsl(from var(--cwa-border) h s l);
}
.home-04 .testimonial-content { /* 1st Column: Testimonial area */
	grid-area: testimonial;
	padding: 0rem 0 2rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.home-04 .testimonial-content h3 {
	margin-bottom: 1rem;
	text-align: center;
}
.home-04 .testimonial-content p {
	margin-bottom: 0.75rem;
	line-height: 1.2;
}
.home-04 .testimonial-image {
	grid-area: testimonial-image;
	background-image: url('../images/istockphoto-2159590670.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	filter: grayscale(var(--cwa-image-filter));
	min-height: 100%;
}
.home-04 .button-container {
	display: flex;
	justify-content: center;
	width: 100%;
}
@media (max-width: 768px) {
	.home-04 {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"testimonial-image"
			"testimonial";
	}
	.home-04 .testimonial-image {
		min-height: 250px;
	}
	.home-04 .button-container {
		justify-self: center;
	}
}
/* End Home 04 */





/* Begin Home 05 */
.home-05 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-template-areas: 
		"steps-headline steps-headline"
		"photograph steps-list";
	gap: 20px;
	justify-self: center;
	max-width: 1440px;
	margin: 01em auto 2rem auto;
	padding-bottom: 2rem;
	border-bottom: 1px solid hsl(from var(--cwa-border) h s l);
}
.steps-headline-area {
    grid-area: steps-headline;
    text-align: center;
    padding: 0 0 0 0;
}
.steps-headline-area h3 {
    margin: 0;
	padding: 0;
	text-align: left;
}
/* Steps List Area (Flex Layout) */
.list-area {
    grid-area: steps-list;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* Individual Row Item inside the List */
.step-item {
    display: flex;
    gap: 16px;
    align-items: center;
}
.step-content {
	align-self: center;
}
.step-content h4 {
	font-weight: 700;
	color: hsl(from var(--cwa-blue) h s l);
}
/* Number Circle Styles */
.circle-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 70px;
    background-color: hsl(from var(--cwa-blue) h s l);
    color: hsl(from var(--cwa-paragraph-p-rev) h s l);
    border-radius: 50%;
    font-size: clamp(1.500rem, calc(1.214rem + 1.429vw), 2.500rem);
	font-weight: 100;
	font-variation-settings:
		'slnt' -6,
		'wdth' 100,
		'GRAD' 0,
		'ROND' 0;
}
/* Content block next to numbers */
.step-content h5 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}
.step-content p {
    font-size: 0.95rem;
}
/* Spanning Row (Row 4) */
.text-block-row {
    text-align: left;
}
.text-block-row p {
	font-size: clamp(0.875rem, calc(0.696rem + 0.893vw), 1.500rem);
	font-weight: 600;
	font-variation-settings:
		'slnt' -4,
		'wdth' 85,
		'GRAD' 0,
		'ROND' 0;
	line-height: 1.05;
}
.button-row {
    display: flex;
    justify-content: center;
}
.photograph-area {
    grid-area: photograph;
    background-image: url('../images/istockphoto-1295286606.jpg');
    background-size: cover;
    background-position: center;
	filter: grayscale(var(--cwa-image-filter));
    min-height: 350px;
}
@media (max-width: 768px) {
    .home-05 {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas: 
			"photograph"
			"steps-headline"
			"steps-list";
		padding: 20px;
	}
	.home-05 .image-area {
		min-height: 250px;
	}
	.home-05 .headline-area h3 {
    	margin: 0;
		padding: 0;
		text-align: center;
	}
	.steps-headline-area h3 {
	text-align: center;
	}
}
/* End Home 05 */




/* Begin Home 06 */
.home-06 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
	justify-self: center;
    padding: 0 20px 24px 20px;
    grid-template-areas: 
        "experience experience experience experience"
        "card1      card2      card3      card4";
    border-bottom: 1px solid hsl(from var(--cwa-border) h s l);
}
/* Assigning Main Elements to Named Areas */
.home-06 .experience-section {
	grid-area: experience;
}
.home-06 .experience-section h3 {
	text-align: center;
}
/* Nested Grid Layout for Each Individual Card: 1 Column, 2 Rows */
.home-06 .credential-card {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	grid-auto-rows: 1fr;
	align-items: center;
	justify-content: center;
	background-color: hsl(from var(--cwa-card-bg) h s l);
	border: 1px solid hsl(from var(--cwa-black) h s l);
	border-radius: 6px;
	overflow: hidden;
	height: 100%;
	box-shadow: 0 0 5px 3px hsl(from var(--cwa-black) h s l / 0.2);
}
/* Inner Card styling */
.home-06 .card-header {
  background-color: hsl(from var(--cwa-blue) h s l);
  padding: 10px;
}
.home-06 .card-header h5 {
	font-size: clamp(1.000rem, calc(0.857rem + 0.714vw), 1.500rem);
    text-align: center;
	color: hsl(from var(--cwa-paragraph-h-rev) h s l);
}
.home-06 .card-body p {
    font-size: clamp(0.875rem, calc(0.818rem + 0.284vw), 1.500rem);
    font-weight: 600 !important;
    font-variation-settings:
        "slnt" -4,
        "wdth" 80,
        "GRAD" 0,
        "ROND" 0 !important;
    text-align: center;
    line-height: 1.0;
	margin: 1rem 0;
}
.home-06 .card-body {
    padding: 8px;
    justify-content: center;
}
.home-06 .usatoday img {
	width: 100%;           /* Fills the allocated width of the card's column */
	max-width: 175px;      /* Prevents the logo from getting too big on large screens */
	height: auto;          /* Maintains the original image aspect ratio */
	object-fit: contain;   /* Ensures the logo fits cleanly without distortion */
	display: block;        /* Removes inline spacing quirks */
	margin: 0 auto;        /* Centers the logo horizontally */
	filter: grayscale(var(--cwa-image-filter));
}
.home-06 .fox img {
	width: 100%;
	max-width: 100px;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	filter: grayscale(var(--cwa-image-filter));
}
@media (max-width: 768px) {
	.home-06 {
    	display: grid;
    	grid-template-columns: 1fr;
    	grid-template-rows: 1fr;
    	gap: 10px;
		justify-self: center;
    	padding: 0 20px 24px 20px;
    	grid-template-areas: 
       	 "experience"
			"card1"
			"card2"
			"card3"
			"card4";
    	border-bottom: 1px solid #000;
	}
	.home-06 .credential-card {
		align-items: center;
		justify-self: center;
		width: 50%;
	}
}
/* End Home 06 */




/* Begin Home 07 */
.home-07 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "vid-title"
      "vid-box";
    justify-items: center;
    align-items: center;
	justify-self: center;
    width: 100%;
	max-width: 1440px;
    padding: 20px;
    box-sizing: border-box;
	border-bottom: 1px solid hsl(from var(--cwa-border) h s l);
}
.home-07 .vid-title {
    grid-area: vid-title;
    text-align: center;
    margin: 0 0 15px 0;
}
.home-07 .vid-box {
    grid-area: vid-box;
    width: 70%;
	min-width: 200px;
	max-width: 100%;
	border-radius: 10px;
	text-align: center;
	background-color: hsl(from var(--cwa-bg) h s l);
	filter: grayscale(var(--cwa-image-filter));
}
@media (max-width: 768px) {
	.home-07 .vid-box {
		width: 90%;
	}
}
/* End Home 07 */



/* Begin Home 08 */
.home-08 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"spacer memories";
	background: url('../images/istockphoto-1089158212.jpg') no-repeat center top;
	background-size: cover;
	filter: grayscale(var(--cwa-image-filter));
	border-radius: 8px;
	border: 1px solid hsl(from var(--cwa-border) h s l);
	max-width: 1440px;
	margin: 2rem auto;
	border-radius: 12px;
	overflow: hidden;
}
.home-08 .left-col-spacer {
	grid-area: spacer;
}
.home-08 .memories {
	grid-area: memories;
	display: grid;
	grid-template-rows: auto auto auto auto;
	gap: 1.5rem;
	padding: 3.5rem;
	justify-content: center;
	background-color: hsl(from var(--cwa-blue) h s l / 0.5); /* subtle extra background tint for content */
	backdrop-filter: blur(4px); /* modern glassmorphism effect */
}
.home-08 .memories .intro-text, .home-08 .memories ul.benefits-list li {
	filter: drop-shadow(2px 2px 4px hsl(from var(--cwa-black) h s 20 / 100%));
}
.home-08 .memories .intro-text {
	color: hsl(from var(--cwa-paragraph-p-rev) h s l);
	font-weight: 600;
	line-height: 1.6;
	text-wrap: balance;
	margin: 0;
}
.home-08 .memories ul.benefits-list {
	display: flex;
	flex-direction: column;
	justify-self: center;
	margin: 0;
	padding-left: 1.25rem;
	width: fit-content;
}
.home-08 .memories ul.benefits-list li {
	font-size: clamp(1rem, calc(0.818rem + 0.909vw), 1.5rem);
	font-variation-settings:
        "slnt" -4,
        "wdth" 80,
        "GRAD" 0,
        "ROND" 0;
	color: hsl(from var(--cwa-paragraph-p-rev) h s l);
	margin-bottom: 0.5rem;
}
.home-08 .memories {
	font-weight: 600;
	font-variation-settings:
        "slnt" 0,
        "wdth" 80,
        "GRAD" 0,
        "ROND" 0;
	color: hsl(from var(--cwa-paragraph-p-rev) h s l);
	margin: 0;
}
@media (max-width: 768px) {
	.home-08 {
		grid-template-columns: 1fr;
		grid-template-areas:
			"possibilities";
	}
	.home-08 .left-col-spacer {
		display: none; /* Hide empty space on narrow screens */
	}
	.home-08 .memories {
		padding: 2rem;
		background-color: rgba(25, 30, 40, 0.7); /* Deepen overlay for single-column mobile view */
		background-color: hsl(from var(--cwa-black) h s l / 0.2);
	}
	.home-08 .memories {
		text-align: center;
	}
}
/* End Home 08 */


/* Begin Services Page: Services */
#services.services-grid {
	display: grid;
	gap: 1.25rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 2rem 0;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas:
		"header header header"
		"desc   desc   desc"
		"card1  card2  card3";
	/* Forces row 3 card containers to stretch equally in height */
	align-items: stretch;
}
.services-header {
	grid-area: header;
	text-align: center;
}
.services-desc {
	grid-area: desc;
	justify-self: center;
	text-align: center;
	margin: 0 auto 0.9rem 0;
	text-wrap: balance;
}
/* Common Card Styles */
.services-card {
	background: hsl(from var(--cwa-card-bg) h s l);
	border: 1px solid hsl(from var(--cwa-border) h s l);
	border-radius: 12px;
	padding: 2.5rem 2rem 2rem 2rem;
	text-align: center;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}
.services-card .popular { /* Most Popular Card Accent */
	border: 2px solid hsl(from var(--cwa-blue) h s l);
	box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2);
}
.services-banner { /* Top Banner styling inside the container */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: hsl(from var(--cwa-blue) h s l);
	color: hsl(from var(--cwa-paragraph-p-rev) h s l);
	font-size: clamp(1.000rem, calc(0.818rem + 0.909vw), 1.500rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.35rem 0;
}
.services-card-title { /* Card Content Elements */
	font-size: clamp(1.500rem, calc(1.364rem + 0.682vw), 1.875rem);
	font-weight: 650;
	margin: 0.5rem 0 1rem 0;
	line-height: 1;
}
.services-card-price {
	font-size: clamp(2.500rem, calc(2.318rem + 0.909vw), 3.000rem);
	font-weight: 800;
	color: hsl(from var(--cwa-blue) h s l);
}
.services-card-subtitle {
	font-size: clamp(1.375rem, calc(1.239rem + 0.682vw), 1.750rem);
	font-weight: 500;
	font-variation-settings:
        "slnt" -4,
        "wdth" 80,
        "GRAD" 0,
        "ROND" 0;
	margin: 1rem 0 1rem 0;
}
.services-card-list { /* Services List Styles */
	list-style: none;
	padding: 0;
	margin: auto 0 0 0; /* Pushes the list content upward evenly */
	text-align: left;
}
.services-card-list li {
	padding: 0.5rem 0;
	border-bottom: 1px dashed hsl(from var(--cwa-border) h s 70);
	font-size: clamp(1.125rem, calc(1.034rem + 0.455vw), 1.375rem);
}
.services-card-list li:last-child {
	border-bottom: none;
}
.services-card-list .list-title {
	font-weight: 700;
	color: hsl(from var(--cwa-blue) h s l);
	border-bottom: 2px solid hsl(from var(--cwa-border) h s 70);
	margin-bottom: 0.5rem;
	padding-bottom: 0.25rem;
}
@media (max-width: 767px) {
	#services.services-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"desc"
			"card1"
			"card2"
			"card3";
	}
}
/* End Services Page: Services */

/* Begin Services Page: Process */
.services-process-header {
	margin: 0 0 1rem 0;
}
.services-process-header h4 {
	text-align: center;
}
.services-process-header p {
	text-align: center;
	text-wrap: balance;
}
.services-process {
	display: flex;
	flex-direction: column;
	justify-self: center;
	max-width: 1200px;
	width: 91%;
	box-sizing: border-box;
	margin: 0 0 4rem 0;
}
.services-process-row { /* Row structure */
	display: flex;
	flex-direction: row;
	width: 100%;
	border-bottom: 1px solid hsl(from var(--cwa-border) h s 70);
}
.services-process-cell { /* Cell sizing and alignment */
	flex: 1;
	padding: 8px;
	font-size: clamp(0.875rem, calc(0.739rem + 0.682vw), 1.250rem);
	text-align: left;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
}
.header-row { /* Header row styling */
	background-color: hsl(from var(--cwa-blue) h s l);
	color: hsl(from var(--cwa-paragraph-p-rev) h s l);
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 6px 6px 0 0
}
.main-column { /* First column formatting */
	font-weight: 700;
}
@media screen and (max-width: 768px) {
	.services-process-row {
		flex-direction: column;
		border-bottom: 2px solid hsl(from var(--cwa-blue) h s l);
	}
	.header-row {
		display: none; /* Hides headers on mobile for vertical stack layout */
	}
	.table-cell {
		width: 100%;
		border-bottom: 1px solid hsl(from var(--cwa-border) h s 70);
	}
	.top-border {
		border-top: 2px solid hsl(from var(--cwa-blue) h s l);
	}
	.services-process-cell:last-child {
		border-bottom: none;
	}
  	.services-process-cell:nth-child(1)::before {
		content: "Phase: ";
		font-weight: 800;
	}
	.services-process-cell:nth-child(2)::before {
		content: "Length: ";
		font-weight: 800;
	}
	.services-process-cell:nth-child(3)::before {
		content: "Focus: ";
		font-weight: 800;
	}
	.services-process-cell:nth-child(4)::before {
		content: "Deliverable: ";
		font-weight: 800;
	}
  	.main-column {
    	font-weight: 400; /* Restores weight since label handles prominence */
	}
}
/* End Services Page: Process */



/* Begin Contact Us Form & Location Map */
.contact-cwa {
	display: grid;
	font-family: inherit;
	font-variation-settings:
		'slnt' -4,
		'wdth' 80,
		'GRAD' 0,
		'ROND' 0;
	background: hsl(from var(--cwa-forms-bg) h s l);
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 4px 15px hsl(from var(--cwa-forms-bg) h s 0 / 30%);
	grid-gap: 20px;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
		'firstname-area lastname-area'
		'email-area phone-area'
		'message-area message-area'
		'buttons-area buttons-area';
	justify-self: center;
	width: 80%;
	margin: 0 0 3rem 0;
}
.contact-form-header { /* Form Header */
    margin: 0 auto 2rem auto;
	width: 80%;
}
.contact-form-header h2 {
    text-align: center;
}
.contact-form-header p {
    text-align: center;
	margin: 0 2rem;
	text-wrap: balance;
}
/* Grid Assignments */
.contact-cwa .grid-firstname { grid-area: firstname-area; }
.contact-cwa .grid-lastname { grid-area: lastname-area; }
.contact-cwa .grid-email { grid-area: email-area; }
.contact-cwa .grid-phone { grid-area: phone-area; }
.contact-cwa .grid-message { grid-area: message-area; }
.contact-cwa .grid-buttons { grid-area: buttons-area; }

.contact-cwa .form-group { /* Form Element Styling */
	display: flex;
	flex-direction: column;
}
.contact-cwa .form-group label {
	font-size: clamp(0.938rem, calc(0.892rem + 0.227vw), 1.063rem);
	font-weight: 700;
	color: hsl(from var(--cwa-forms-label) h s l);
	margin-bottom: 6px;
}
.contact-cwa .form-group input, .contact-cwa .form-group textarea {
	font-size: clamp(1rem, calc(0.955rem + 0.227vw), 1.125rem);
	width: 100%;
	padding: 10px 12px;
	border: 1px solid hsl(from var(--cwa-border) h s 70);
	border-radius: 4px;
	outline: none;
	transition: all 0.2s ease-in-out;
}

.contact-cwa .form-group input::placeholder, .contact-cwa .form-group textarea::placeholder {
	color: hsl(from var(--cwa-forms-placeholder) h s 70);
	opacity: 1; /* Ensures custom color displays correctly in Firefox */
}
.contact-cwa .form-group textarea {
	field-sizing: content;
	min-height: 15lh; /* Sets the initial height to 3 lines */
	max-height: 70lh; /* Caps the height to 10 lines, then scrolls */
	resize: none; /* Disables manual user resizing */
}
.contact-cwa .form-group input:focus, .contact-cwa .form-group textarea:focus { /* Custom Color Highlight on Element Focus */
	border-color: hsl(from var(--cwa-forms-input-focus) h s l);
	background-color: hsl(from var(--cwa-forms-input-focus) h s 95);
	box-shadow: 0 0 8px hsl(from var(--cwa-forms-input-focus) h s 40);
}
.contact-cwa .form-group input.input-error:focus, .contact-cwa .form-group textarea.input-error:focus { /* Custom Color Highlight on Element Focus */
	border-color: hsl(from var(--cwa-forms-error) h s l);
	background-color: hsl(from var(--cwa-forms-error) h s 95);
	box-shadow: 0 0 8px hsl(from var(--cwa-forms-error) h s 40);
}
.contact-cwa .form-group input:focus::placeholder, .contact-cwa .form-group textarea:focus::placeholder { /* Hide Placeholder text on Form Element Focus */
	color: transparent;
}
.contact-cwa .form-group input.input-error, .contact-cwa .form-group textarea.input-error { /* Custom Colors for Error Input Fields */
	border: 2px solid hsl(from var(--cwa-forms-error) h s l);
	background-color: hsl(from var(--cwa-forms-error) h s 95);
	color: hsl(from var(--cwa-forms-error) h s l / 50%);
}
.contact-cwa .form-group input.input-error::placeholder, .contact-cwa .form-group textarea.input-error::placeholder {
	color: hsl(from var(--cwa-forms-placeholder-error) h s 80);
}
.contact-cwa .form-group input.input-error:focus::placeholder, .contact-cwa .form-group textarea.input-error:focus::placeholder { /* Custom Focus Highlight specifically for Input Fields with Errors */
	color: transparent;
}
.contact-cwa .error-text {
	font-size: clamp(0.875rem, calc(0.83rem + 0.227vw), 1rem);
	font-weight: 500;
	color: hsl(from var(--cwa-forms-error) h s l);
	font-variation-settings:
		'slnt' -4,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	margin-top: 4px;
	min-height: 15px;
}
.contact-cwa .form-buttons { /* Row 6 Buttons Container - Left and Right Justified */
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 1rem 0;
}
.contact-cwa .form-buttons button {
	padding: 12px 24px;
	font-size: clamp(0.875rem, calc(0.83rem + 0.227vw), 1rem);
	font-weight: 600;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
}
.contact-cwa #clear_btn {
	background-color: hsl(from var(--cwa-forms-clear) h s 60);
	color: hsl(from var(--cwa-forms-clear) h s 100);
}
.contact-cwa #clear_btn:hover {
	background-color: hsl(from var(--cwa-forms-clear) h s 30);
}
.contact-cwa #submit_btn {
	background-color: hsl(from var(--cwa-forms-submit) h s l);
	color: hsl(from var(--cwa-forms-submit) h s 100);
}
.contact-cwa #submit_btn:hover {
	background-color: hsl(from var(--cwa-forms-submit) h s 30);
}
dialog#successModal { /* Modal <dialog> Styling & Centering layout */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 1rem;
	border: none;
	border-radius: 8px;
	box-shadow: 0 10px 30px hsl(from var(--cwa-forms-bg) h s 40);
	background: hsl(from var(--cwa-forms-bg) h s 100);
	min-width: 450px;
	max-height: 85vh;
	overflow-y: auto;
	animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
dialog#successModal::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
	background-color: hsl(from var(--cwa-blue) h s l / 50%);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
#successModal .message-contents {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: repeat(7, auto);
	grid-template-areas:
		'title      title'
		'subtitle   subtitle'
		'lbl-name   val-name'
		'lbl-email  val-email'
		'lbl-phone  val-phone'
		'lbl-msg    val-msg'
		'btn        btn';
	gap: 5px;
	margin: 0 auto;
}
#successModal .message-contents .title {
	grid-area: title;
	text-align: center;
}
#successModal .message-contents .title h5 {
	font-size: clamp(1.5rem, calc(1.409rem + 0.455vw), 1.75rem);
	font-weight: 700;
	margin: 0.6rem 0 0 0;
	padding: 0;
}
#successModal .message-contents .subtitle {
	grid-area: subtitle;
	text-align: center;
}
#successModal .message-contents .subtitle p {
	font-size: clamp(1rem, calc(0.955rem + 0.227vw), 1.125rem);
	font-weight: 400;
	margin: 0 0 1rem 0;
	padding: 0 0 1.4rem 0;
	border-bottom: 1px dashed hsl(from var(--cwa-bg) h s 30 / 70);
}
#successModal .message-contents .label-name { grid-area: lbl-name; }
#successModal .message-contents .label-email { grid-area: lbl-email; }
#successModal .message-contents .label-phone { grid-area: lbl-phone; }
#successModal .message-contents .label-msg { grid-area: lbl-msg; }
#successModal .message-contents .label-agent { grid-area: lbl-agent; }
#successModal .message-contents .label-ip { grid-area: lbl-ip; }
#successModal .message-contents .label-refer { grid-area: lbl-refer; }

#successModal .message-contents .val-name { grid-area: val-name; }
#successModal .message-contents .val-email { grid-area: val-email; }
#successModal .message-contents .val-phone { grid-area: val-phone; }
#successModal .message-contents .val-msg { grid-area: val-msg; }
#successModal .message-contents .val-agent { grid-area: val-agent; }
#successModal .message-contents .val-ip { grid-area: val-ip; }
#successModal .message-contents .val-refer { grid-area: val-refer; }

#successModal .message-contents .label-name, 
#successModal .message-contents .label-email, 
#successModal .message-contents .label-phone, 
#successModal .message-contents .label-msg {
	font-size: clamp(1rem, calc(0.955rem + 0.227vw), 1.125rem);
	font-variation-settings:
		'slnt' 0,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	font-weight: 700;
	color: hsl(from var(--cwa-forms-submit) h s l);
	text-align: left;
	align-self: start;
	padding: 0.4rem 0;
}
#successModal .message-contents .val-name,
#successModal .message-contents .val-email,
#successModal .message-contents .val-phone,
#successModal .message-contents .val-msg {
	font-size: clamp(1rem, calc(0.955rem + 0.227vw), 1.125rem);
	font-variation-settings:
		'slnt' 0,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	font-weight: 400;
	text-align: left;
	align-self: start;
	padding: 0.4rem 0;
}
#successModal .message-contents .action-btn {
	grid-area: btn;
	margin: 1rem 0 0 0;
	padding: 1.4rem 0 0.6rem 0;
	border-top: 1px dashed hsl(from var(--cwa-bg) h s 30 / 70);
	text-align: center;
}
#successModal .message-contents .action-btn button {
	padding: 10px 20px;
	background-color: hsl(from var(--cwa-forms-submit) h s l);
	font-size: clamp(0.750rem, calc(0.705rem + 0.227vw), 0.875rem);
	font-weight: 500;
	color: hsl(from var(--cwa-forms-submit) h s 100);
	border: 1px solid hsl(from var(--cwa-forms-submit) h s 70);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.4s;
	justify-self: center;
}
#successModal .message-contents .action-btn button:hover {
	background-color: hsl(from var(--cwa-forms-submit) h s 40);
	border: 1px solid hsl(from var(--cwa-forms-submit) h s 90);
}
.google-map { /* Google Map Area Below Contact Form */
	display: flex;
	flex-direction: column;
	justify-self: center;
	margin: 1rem auto 6rem auto;
	width: 80%;
}
.google-map h2 {
	text-align: center;
	margin: 0 0 1rem 0;
}
.google-map iframe {
	width: 100%;
	aspect-ratio: 16 / 9; /* Controls the map shape (e.g., 16:9, 4:3, 21:9) */
	border: 0;
	border: 2px solid hsl(from var(--cwa-border) h s l);
	border-radius: 8px;
	filter: invert(var(--cwa-filter-invert));
}
@media (max-width: 768px) {
	.contact-cwa {
		grid-template-columns: 1fr;
		grid-template-areas:
			'firstname-area'
			'lastname-area'
			'email-area'
			'phone-area'
			'message-area'
			'buttons-area';
		width: 100%;
		margin: 0 0 2rem 0;
	}
	.contact-cwa .form-buttons button {
		padding: 4px 8px;
		font-size: clamp(0.750rem, calc(0.705rem + 0.227vw), 0.875rem);
	}
	.google-map { /* Google Map Area Below Contact Form */
		width: 100%;
	}
}
/* End Contact Us Form & Location Map */



/* Begin CWA Team Members */
.cwa-team {
	max-width: 1200px;
	margin: 0 auto 2rem auto;
	padding: 20px;
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas:
		"header  header"
		"intro   intro"
		"card1   card2"
		"card3   card4";
}
.cwa-team .team-header { grid-area: header;}
.cwa-team .team-intro  { grid-area: intro; }
.cwa-team .card-1      { grid-area: card1; }
.cwa-team .card-2      { grid-area: card2; }
.cwa-team .card-3      { grid-area: card3; }
.cwa-team .card-4      { grid-area: card4; }
.cwa-team .team-header h2 {
	text-align: center;
	margin-bottom: 10px;
}
.cwa-team .team-intro p {
	line-height: 1.4;
	margin-bottom: 0.8rem;
}
.cwa-team .team-card {
	background: hsl(from var(--cwa-card-bg) h s l);
	border: 1px solid hsl(from var(--cwa-border) h s 70);
	border-radius: 8px;
	padding: 25px;
	text-align: center;
	width: 85%;
	justify-self: center;
}
.cwa-team .avatar-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}
.cwa-team .avatar-wrapper img {
	filter: grayscale(var(--cwa-image-filter));
}
.cwa-team .avatar {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid hsl(from var(--cwa-blue) h s 70);
}
.cwa-team .team-card p.name {
	font-size: clamp(1.500rem, calc(1.318rem + 0.909vw), 2.000rem);
	font-weight: 600;
	font-variation-settings:
		'slnt' -4,
		'wdth' 80,
		'GRAD' 0,
		'ROND' 0;
	margin: 10px 0 5px 0;
}
.cwa-team .team-card p.title {
	font-size: clamp(0.875rem, calc(0.784rem + 0.455vw), 1.125rem);
	font-weight: 400;
	font-variation-settings:
		'slnt' 0,
		'wdth' 80,
		'GRAD' 0,
		'ROND' 0;
	color: hsl(from var(--cwa-blue) h s l);
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px dashed hsl(from var(--cwa-border) h s 70);
	font-weight: 500;
}
.cwa-team .team-card p.bio {
	font-size: clamp(0.750rem, calc(0.705rem + 0.227vw), 0.875rem);
	font-weight: 400;
	font-variation-settings:
		'slnt' 0,
		'wdth' 80,
		'GRAD' 0,
		'ROND' 0;
	margin: 10px 0 5px 0;
	padding: 20px 0 0 0;
	border-top: 1px dashed hsl(from var(--cwa-border) h s 70);
	text-align: justify;
}

.cwa-team .contact-list a {
	color: hsl(from var(--cwa-link) h s l);
}
.cwa-team .contact-list a:hover {
	color: hsl(from var(--cwa-link-hover) h s l);
	transition: color 0.3s ease, color 0.3s ease;
}
.cwa-team .contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: left;
	display: inline-block; /* Centers the left-aligned block */
}
.cwa-team .contact-list li {
	font-size: clamp(1.000rem, calc(0.955rem + 0.227vw), 1.125rem);
	color: hsl(from var(--cwa-grey) h s l);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.cwa-team .contact-list span.email {
	font-size: clamp(0.625rem, calc(0.534rem + 0.455vw), 0.875rem);
	font-weight: 400;
	font-variation-settings:
		'slnt' -4,
		'wdth' 70,
		'GRAD' 0,
		'ROND' 0;
}

@media (max-width: 768px) {
	.cwa-team {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"intro"
			"card1"
			"card2"
			"card3"
		"card4";
	}
	.cwa-team .team-card {
		width: 100%;
}
}
/* End CWA Team Members */




/* Begin CWA YouTube Videos */
.cwa-videos {
	display: grid;
	grid-template-areas: 
	"header header header"
		"v1     v2     v3"
		"v4     v5     v6";
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}
/* Assign elements to grid areas */
.grid-header {
	grid-area: header;
	text-align: center;
	margin-bottom: 16px;
}
.card-1  {grid-area: v1;}
.card-2  {grid-area: v2;}
.card-3  {grid-area: v3;}
.card-4  {grid-area: v4;}
.card-5  {grid-area: v5;}
.card-6  {grid-area: v6;}

/* Video card styles */
.video-card {
	display: flex;
	flex-direction: column;
}
.video-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
	background-color: hsl(from var(--cwa-black) h s l / 40%);
	border-radius: 8px;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	filter: grayscale(var(--cwa-image-filter));
}
.video-card h3 {
	font-size: clamp(0.750rem, calc(0.659rem + 0.455vw), 1.000rem);
	font-variation-settings:
		'slnt' -4,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	margin-top: 12px;
	text-align: center;
	line-height: 1.1;
}
@media (max-width: 992px) { /* Tablet Responsive Breakpoint (2 Columns) */
	.cwa-videos {
		grid-template-areas: 
		"header header"
			"v1     v2"
			"v3     v4"
			"v5     v6";
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}
@media (max-width: 576px) { /* Mobile Responsive Breakpoint (1 Column) */
	.cwa-videos {
	grid-template-areas: 
		"header"
		"v1"
		"v2"
		"v3"
		"v4"
		"v5"
		"v6";
	grid-template-columns: 1fr;
	gap: 16px;
	}
}
/* End CWA YouTube Videos */


/* END ALL PAGE CONTENT ABOVE */










/* -- Begin Common Re-usable Button Class -- */
.cwa-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-self: center;
	gap: 8px; /* Space between icon and text */
	white-space: nowrap; /* Prevents Text Wrapping */
	padding: 0.6rem 0.8rem;
	margin: 0;
	background-color: hsl(from var(--cwa-button-bg) h s l);
	color: hsl(from var(--cwa-button-text) h s l);
	border: 2px solid hsl(from var(--cwa-white) h s l / var(--cwa-button-border-strength));
	border-radius: 9999px; /* Perfectly rounded button at any scale */
	width:fit-content;
	font-family: inherit;
	font-family: 'Google Sans Flex', sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: clamp(0.625rem, calc(0.534rem + 0.455vw), 0.875rem);
	font-weight: 500;
	font-variation-settings:
		'slnt' -4,
		'wdth' 80,
		'GRAD' 0,
		'ROND' 0;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
}
.cwa-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
}
.cwa-btn-icon svg {
	color: hsl(from var(--cwa-button-icon) h s l);
	width: 14px;
	height: 14px;
}
.cwa-btn:hover {
	background-color: hsl(from var(--cwa-button-hover) h s l);
	transform: scale(1.05);
}
.cwa-btn:active {
	transform: scale(1.05);
}
.smaller {
	font-size: clamp(0.500rem, calc(0.429rem + 0.357vw), 0.750rem) !important;
	padding: 0.4rem 0.6rem !important;
}
.dark {
	box-shadow: 0 0 4px 2px hsl(from var(--cwa-black) h s l / 0.4)
}
.light {
	box-shadow: 0 0 8px 2px hsl(from var(--cwa-black) h s l / 0.2);
}
.none {
	box-shadow: none;
}
.top {
	margin-top: 0.6rem;
}
@media (max-width: 768px) {
	.cwa-btn {
		font-size: clamp(0.500rem, calc(0.429rem + 0.357vw), 0.750rem);
		padding: 0.5rem 0.8rem;
	}
	.cwa-btn-icon svg {
		width: 12px;
		height: 12px;
	}
}
/* -- Begin Common Re-usable Button Class -- */






/* Begin Common Theme Switcher */
.theme-switcher {
	position: absolute;
	top: 0px;
	inset: 0;
	margin: 0 auto;
	width: fit-content; 
	height: fit-content;
}
select, select::picker(select) {
	appearance: base-select;
}
select {
	background-color: hsl(from var(--cwa-button-bg) h s l);
	color: hsl(from var(--cwa-bg) h s l);
	padding: 3px 8px;
	font-size: clamp(0.500rem, calc(0.429rem + 0.357vw), 0.750rem);
	border: none;
	border-radius: 0 0 6px 6px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
select::picker-icon { /* Customizing or hiding the default arrow icon */
	font-size: 12px;
	color: hsl(from var(--cwa-bg) h s l);
}
select:open { /* Style the active button state when the dropdown is open */
	background-color: hsl(from var(--cwa-button-bg) h s l);
}
.hidden-left {
	opacity: 0;
	transform: translateX(-100px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
.show-left {
	opacity: 1;
	transform: translateX(0);
}
/* End Common Theme Switcher */




/* Begin Common Material Icons in Nav & Footer */
.material-icon-list ul {
	list-style: none; /* Removes default bullets */
	padding: 0;
}
.material-icon-list li {
	display: flex;
	align-items: center;
	gap: 8px; /* Spaces icon from text */
	margin-bottom: 4px;
	font-size: clamp(0.750rem, calc(0.643rem + 0.536vw), 1.125rem);
	font-weight: 400;
	font-variation-settings:
		'slnt' 0,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	padding-bottom: 0;
	color: hsl(from var(--cwa-nav-footer-p) h s l);
}
.material-icon-list li.no-icon {
	padding-left: 32px; /* Aligns text perfectly with icon items */
	margin-top: -4px;
}
.material-icon-list .material-icons {
	width: 24px; /* Matches icon grid sizing */
	text-align: center;
}
.material-symbols-outlined {
	font-size: 18px;
	font-variation-settings:
		'FILL' 3,
		'wght' 500,
		'GRAD' 0,
		'opsz' 18;
	color: hsl(from var(--cwa-nav-footer-header-icons) h s l / 100%);
}
/* Begin Common Material Icons in Nav & Footer */
















/* Begin Site Search Icon in Navi Bar */
.site-search {
    display: inline-block;
    position: relative;
    font-family: sans-serif;
}
.site-search #search-toggle { /* Hide the toggle checkbox completely */
    display: none;
}
.site-search .search-icon-label { /* The visible search icon button trigger */
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.site-search .search-icon-label .material-symbols-search {
    font-size: 24px;
	color: hsl(from var(--cwa-nav-menu-a) h s l);
}
.site-search .search-form { /* Hidden form wrapper - handles the dropdown position */
    position: absolute;
    top: 100%;       
    right: 0;        
    z-index: 999;
    margin-top: 4px; 
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.site-search .input-wrapper { /* Wrapper to hold input field and its integrated button */
    position: relative;
    display: flex;
    align-items: center;
    width: 280px;
}
.site-search .search-input { /* Text input styling */
    width: 100%;
    padding: 10px 45px 10px 12px; 
    border: 1px solid hsl(from var(--cwa-border) h s 70);
    outline: none;
    background: hsl(from var(--cwa-forms-bg) h s l);
    border-radius: 9999px;
    font-size: clamp(0.750rem, calc(0.705rem + 0.227vw), 0.875rem);
    box-sizing: border-box; 
}
.site-search input.search-input::placeholder {
	color: hsl(from var(--cwa-forms-placeholder) h s 70)	;
	opacity: 1; /* Ensures custom color displays correctly in Firefox */
	transition: opacity 0.3s ease;
}
.site-search input.search-input:focus::placeholder {
  opacity: 0;
}
.site-search .submit-btn { /* Integrated Arrow Submit Button with Custom Hover Effect Animation */
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: hsl(from var(--cwa-search-icon) h s l);
    color: hsl(from var(--cwa-search-icon) h s 100);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.site-search .submit-btn .material-symbols-search {
    font-size: 20px;
    transition: transform 0.3s ease;
	color: hsl(from var(--cwa-search-icon) h s 100);
}
.site-search .submit-btn:hover { /* Hover Animation: Button scales slightly and the arrow icon rotates */
    background: hsl(from var(--cwa-search-icon-hover) h s l);
    transform: translateY(-50%) scale(1.08);
}
.site-search .submit-btn:hover .material-symbols-search {
    transform: rotate(360deg);
}
.site-search #search-toggle:checked ~ .search-form { /* When checkbox is checked via icon label click, slide the form down */
    max-height: 55px; 
    opacity: 1;
    visibility: visible;
}
.site-search .material-symbols-search {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	color: hsl(from var(--cwa-search-icon-hover) h s l)
}
/* End Site Search Icon in Navi Bar */


/* Begin Site Search Results */
h2#site-search-title {
	text-align: center;
	margin: 1rem auto;
	width: 80%;
	text-wrap: balance;
}
.search-result-item {
	display: flex;
	flex-direction: column;
	justify-self: center;
	margin: 0 auto 25px auto;
	width: 80%;
}
.search-result-item a {
	font-size: clamp(1.250rem, calc(1.159rem + 0.455vw), 1.500rem);
	font-weight: 700;
	font-variation-settings:
		'slnt' 0,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	color: hsl(from var(--cwa-search-icon) h s l);
	text-decoration: none;
	transition: color 0.3s ease;
}
.search-result-item a:hover {
	color: hsl(from var(--cwa-search-icon-hover) h s l);
	text-decoration: underline;
}
.site-search-user-string {
	color: hsl(from var(--cwa-blue) h s l);
}
.search-result-snippet {
	font-size: clamp(0.875rem, calc(0.830rem + 0.227vw), 1.000rem);
	font-variation-settings:
		'slnt' -4,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	color: hsl(from var(--cwa-paragraph-p) h s l);
	margin-top: 5px;
}
.search-no-results {
	font-size: clamp(2.250rem, calc(1.159rem + 0.455vw), 1.500rem);
	color: hsl(from var(--cwa-forms-error) h s l);
	font-variation-settings:
		'slnt' -4,
		'wdth' 75,
		'GRAD' 0,
		'ROND' 0;
	font-weight: 600;
	text-align: center;
	margin-top: 2rem;
}    
mark.highlight { /* Styled keyword highlight boxes */
	background-color: hsl(from var(--cwa-highlight) h s l);
	color: hsl(from var(--cwa-paragraph-p) h s 0);
	padding: 0 2px;
	border-radius: 4px;
	font-weight: inherit;
}
/* End Site Search Results */