:root {
/* Base Values */
	/* Color Values */
	--brand-sandblue: #70819A;
	--brand-blue: #006CB7;
	--brand-blue-dark: #005a99;
	--brand-yellow: #FFD502;
	--brand-green: #01AF4E;
	--brand-white: #FFFFFF;
	--brand-black: #000000;

	/* Padding Values */
	--padding-xs: 0.5rem;
	--padding-sm: 1rem;
	--padding-md: 2rem;
	--padding-lg: 3rem;

	/* Margin Values */
	--margin-xs: 0.5rem;
	--margin-sm: 1rem;
	--margin-md: 2rem;
	--margin-lg: 3rem;

	/* Font Sizes */
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.5rem;
	--font-size-xl: 2rem;
	--font-size-xxl: 3rem;

	/* Font Families */
	--font-family-sans: 'Lato', Arial, sans-serif;


/* Theme Styles */
	/* Primary Colors */
	--theme-primary-color: var(--brand-blue);
	--theme-primary-color-dark: var(--brand-blue-dark);

	/* Brand Blue */
	--theme-blue: var(--brand-blue);
	--theme-blue-dark: var(--brand-blue-dark);

	/* Brand Red */

	/* Brand Yellow */
	--theme-yellow: var(--brand-yellow);

	/* Brand Black */
	--theme-black: var(--brand-black);

	/* Brand White */
	--theme-white: var(--brand-white);

	/* Brand Green */
	--theme-green: var(--brand-green);

	/* Padding Values */
	--common-padding-none: 0;
	--common-padding-xs: var(--padding-xs);
	--common-padding-sm: var(--padding-sm);
	--common-padding-md: var(--padding-md);
	--common-padding-lg: var(--padding-lg);

	/* Margin Values */
	--common-margin-none: 0;
	--common-margin-xs: var(--margin-xs);
	--common-margin-sm: var(--margin-sm);
	--common-margin-md: var(--margin-md);
	--common-margin-lg: var(--margin-lg);

	/* Heading Sizes */
	--heading-size-h1: var(--font-size-xxl);
	--heading-size-h2: var(--font-size-xl);
	--heading-size-h3: var(--font-size-lg);

	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;

}

/* ==========================================================================

/* Default Styles */
	h1,h2,h3,h4,h5,h6{ font-family: var(--font-family-sans); font-weight: bold; margin: var(--common-margin-none); padding: var(--common-padding-none);}
	h1{ font-size: var(--heading-size-h1);}
	h2{ font-size: var(--heading-size-h2);}
	h3{ font-size: var(--heading-size-h3);}

	p{ font-family: var(--font-family-sans); font-size: var(--font-size-md); margin-bottom: var(--common-margin-none); padding: var(--common-padding-none);}

/* Background Styles */
	/* Theme Background Colors */
	.theme-bg-blue{ background-color: var(--theme-blue);}
	.theme-bg-blue-dark{ background-color: var(--theme-blue-dark);}
	.theme-bg-yellow{ background-color: var(--theme-yellow);}
	.theme-bg-white{ background-color: var(--theme-white);}
	.theme-bg-green{ background-color: var(--theme-green);}

	/* Theme Background Images */
	.theme-bg-image-studs{ background-image: url(/images/bg-stud-pattern.svg); background-position: center center; background-repeat: repeat;}

	/* Theme Text Colors */
	.theme-text-white{ color: var(--theme-white);}

	/* Common Padding and Margin Classes */
	.common-v-padding-xs{ padding-top: var(--common-padding-xs); padding-bottom: var(--common-padding-xs);}
	.common-v-padding-sm{ padding-top: var(--common-padding-sm); padding-bottom: var(--common-padding-sm);}
	.common-v-padding-md{ padding-top: var(--common-padding-md); padding-bottom: var(--common-padding-md);}
	.common-v-padding-lg{ padding-top: var(--common-padding-lg); padding-bottom: var(--common-padding-lg);}

	
	
	/* Theme Button Colors */
	.theme-btn-blue{ background-color: var(--theme-blue); color: var(--theme-white);}
	.theme-btn-blue-dark{ background-color: var(--theme-blue-dark); color: var(--theme-white);}
	.theme-btn-yellow{ background-color: var(--theme-yellow); color: var(--theme-black);}

	.common-button{ width: auto; font-weight: bold; display: inline-block; padding: var(--common-padding-sm) var(--common-padding-md); text-decoration: none; border-radius: var(--padding-xs); font-size: var(--font-size-md); transition: filter 0.3s ease; }
	.common-button:hover{ filter: brightness(1.1);}

/* Header Styles */
.header-logo { display: flex; align-items: center; justify-content: center; padding: var(--common-padding-sm); margin: var(--common-margin-none) auto; }
.header-logo img{ height: 75px; width: 75px; border: solid 1px #FFF;}

/* Footer Styles */
footer {background-color: var(--theme-blue-dark); padding: var(--common-padding-xs) var(--common-padding-none);}
.powered-by{display: flex; align-items: center;	gap: var(--padding-xs); font-size: var(--font-size-xs); color: var(--theme-white);}



article{ text-align: center; margin-bottom: var(--padding-md);}
.common-image-glow{ filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.85));}




/* ==========================================================================
Buttons
========================================================================== */
.button,
button,
input[type="submit"] {
display: inline-block;
margin-top: var(--padding-sm);
padding: 0.85rem 1.75rem;
border: none;
border-radius: var(--radius-sm);
background: var(--brand-blue);
color: #ffffff;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.button:hover,
button:hover,
input[type="submit"]:hover {
background: var(--brand-blue-dark);
}

.button:active,
button:active,
input[type="submit"]:active {
transform: translateY(1px);
}

.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 213, 2, 0.7);
}

/* ==========================================================================
Form card
========================================================================== */
.form-card {

max-width: 24rem;
margin: var(--padding-md) auto 0;
padding: var(--padding-md);
display: flex;
flex-direction: column;
gap: var(--padding-sm);
text-align: left;
color: var(--color-text);
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
}

.form-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}

.form-card label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-muted);
}

.form-card input[type="email"] {
padding: 0.8rem 0.9rem;
font-family: inherit;
font-size: 1rem;
color: var(--color-text);
background: #ffffff;
border: 1px solid #999;
border-radius: var(--radius-sm);
transition: border-color var(--transition), box-shadow var(--transition);
}

.form-card input[type="email"]::placeholder {
color: var(--color-placeholder);
}

.form-card input[type="email"]:focus {
outline: none;
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(0, 108, 183, 0.15);
}

.form-card input[type="email"]:invalid:not(:placeholder-shown) {
border-color: #dc2626;
}

.form-card input[type="email"]:invalid:not(:placeholder-shown):focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.form-card button[type="submit"] {
width: 100%;
margin-top: 0.25rem;
}

/* ==========================================================================
Inline messages
========================================================================== */
.message {
margin: 0;
padding: 0.75rem 0.9rem;
border-radius: var(--radius-sm);
font-size: 0.9rem;
line-height: 1.45;
text-align: left;
}

.message.error {
background: #fee2e2;
color: #991b1b;
}

.message.success {
background: #dcfce7;
color: #166534;
}

/* Sticky footer: keep .footer at the bottom of the viewport on short pages */
html {
min-height: 100%;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: 'Lato', Arial, sans-serif;
}

.main {
flex: 1 0 auto;
}





/* ==========================================================================
Breakpoints (mobile-first)
Mobile        base            (< 600px)
Landscape     >= 600px        large phones / portrait tablets
Desktop       >= 992px
Large screen  >= 1400px
========================================================================== */

/* Mobile — base */