f/* Transitions */
body {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	transition: background-color 0.8s ease-in-out;
}

body.state-1 { background-color: #000; }
body.state-1 .logo-text, body.state-1 .logo-sub { color: #fff; }
body.state-1 .loading-container { border: 2px solid #fff; }
body.state-1 .loading-bar { background-color: #fff; }

body.state-2 { background-color: #fff; }
body.state-2 .logo-text, body.state-2 .logo-sub { color: #000; }
body.state-2 .loading-container { border: 2px solid #000; }
body.state-2 .loading-bar { background-color: #000; }

#intro {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: inherit;
	transition: opacity 0.8s ease-in-out;
}
.intro-vanish { opacity: 0; }

.logo-text {
	font-size: 20vw;
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.05em;
	text-transform: lowercase;
	transition: color 0.8s ease-in-out;
}
.logo-sub {
	font-size: 3vw;
	font-weight: 300;
	display: block;
	text-transform: uppercase;
	letter-spacing: 1.2em;
	margin-top: 1vw;
	margin-right: -1.2em;
	transition: color 0.8s ease-in-out;
}

/* Loading Bar */
.loading-container {
	width: 25vw;
	height: 12px;
	margin: 2vw auto 0;
	overflow: hidden;
	position: relative;
	transition: border 0.8s ease-in-out;
}
.loading-bar {
	height: 100%;
	width: 0%;
	animation: fill-bar 4.3s linear forwards;
	transition: background-color 0.8s ease-in-out;
}
@keyframes fill-bar { 0% { width: 0%; } 100% { width: 100%; } }

/* Reveal */
.site-reveal { animation: fadeIn 0.8s ease-in-out forwards; }
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(15px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Page Heading Specifics */
.fw-800 { font-weight: 800; }
.ls-wide { letter-spacing: 0.1em; }
.py-page-content { padding-top: 100px; padding-bottom: 100px; }

/* Site Elements */
.bg-black { background-color: #000 !important; }
.brand-title { text-transform: uppercase; letter-spacing: 0.05em; }

/* BRAND CARDS */
.brand-card {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
	background-color: #fff;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

.brand-card:hover {
	background-color: #000;
	color: #fff !important;
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.brand-card:hover .text-muted { color: #888 !important; }
.brand-card:hover .btn-dark { background-color: #fff; color: #000; border-color: #fff; }

/* Updated Nav Contact Button Styling */
.btn-contact-nav {
	background-color: #fff;
	color: #000;
	border: 1px solid #fff;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-contact-nav:hover, .btn-contact-nav:active {
	background-color: #1a1a1a !important; /* Almost black grey */
	color: #fff !important;
	border-color: #1a1a1a !important;
}

/* MODAL & FORM */
.contact-form-card {
	background-color: #000 !important;
	color: #fff !important;
}

.custom-input {
	background-color: #111 !important;
	border: 1px solid #333 !important;
	color: #fff !important;
	padding: 16px 20px !important;
	font-size: 1.1rem !important;
	transition: border-color 0.3s ease;
}

.custom-input:focus {
	border-color: #fff !important;
	box-shadow: none !important;
}

.custom-input::placeholder {
	color: #666;
}

.modal-dialog {
	margin-top: 5vh;
}

.captcha-legal, .captcha-legal p, .captcha-legal a
{
	font-size: .8rem !important;
	color: #666666 !important;
	text-decoration: none;
}

.captcha-legal a:hover
{
	color: #cccccc6 !important;
}

/* Target the tag directly */
footer, footer p {
	color: #666666 !important; /* Visible medium-grey text */
}

/* Make the link lighter than the text */
footer a {
	color: #666666 !important; /* Pure white for the link */
}

/* Add a hover state so people know it's a link */
footer a:hover {
	color: #cccccc !important;
}