/*		contact.css		version 1		6/6/26		*/



	:root {
		--vw1600: min(100vw, 1600px);
		}


/*	=========================================================  PAGE WRAPPERS  =========================================================	*/

	html {
		height:			100%;
		}

	body {
		border:			0px solid purple;
		border-radius:	15px;
		overflow-y:		auto;
		position:		relative;
		min-width:		320px;
		max-width:		1600px;
		width:			96%;
		height:			auto;
		background-color: black;
		color:			white;
		font-family:	Arial, sans-serif;
		top:			0;
		margin:			0 auto;
		}

	.grid-1 {
		display:		block;
		border:			0px solid green;
		border-radius:	15px;
		min-width:		320px;
		max-width:		1600px;
		color:			white;
		box-sizing:		border-box;
		margin:			0 auto;
		padding:		calc(48 * var(--vw1600) / 1600);
		padding-bottom:	calc(64 * var(--vw1600) / 1600);
		}


/*	=============================================================  LOGO  ==============================================================	*/

	.logo {
		width:			calc(var(--vw1600) * 0.48);
		margin:			0 auto;
		}

	.logo img {
		display:		block;
		height:			auto;
		width:			100%;
		}


/*	===========================================================  BACK LINK  ===========================================================	*/

	.back-link-wrapper {
		text-align:		center;
		padding:		calc(16 * var(--vw1600) / 1600) 0;		/*	Padding:										16px / Max			*/
		}

	.back-link {
		color:			#ffff00;								/*									UC Link Yellow						*/
		font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:										28px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		text-decoration: none;
		cursor:			pointer;
		}

	.back-link:hover {
		color:			#FF5733;								/*	Hover:							Burnt Orange						*/
		letter-spacing: 0.1em;									/*	Letter-Spacing									0.1em				*/
		text-shadow:	1px 1px 2px rgba(0, 0, 0, 0.3);
		}

/*	=========================================================  DIRECT CONTACT  ========================================================	*/

	.direct-contact-row {								/*	email & Ph# Direct Links  */
		display:		flex;
		justify-content: center;
		padding:		calc(12 * var(--vw1600) / 1600) 0;		/*	Padding:										12px / Max			*/
		}

	.direct-contact-link {								/*	uniqueconcepts@comcast.net & 586-337-1861  */
		color:			#ffff00;								/*									UC Link Yellow						*/
		font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:										36px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		text-decoration: none;
		cursor:			pointer;
		}

	.direct-contact-link:hover {
		color:			#FF5733;								/*	Hover:							Burnt Orange						*/
		letter-spacing: 0.1em;									/*	Letter-Spacing									0.1em				*/
		text-shadow:	1px 1px 2px rgba(0, 0, 0, 0.3);
		}

	.phone-static {
		color:			#ffff00;								/*	UC Link Yellow — Non-Interactive On Desktop							*/
		cursor:			default;								/*	No Pointer															*/
		}

	.phone-static:hover {
		color:			#ffff00;								/*	No Color Change On Hover											*/
		letter-spacing:	normal;									/*	No Letter Spacing On Hover											*/
		text-shadow:	none;									/*	No Shadow On Hover													*/
		}		

/*	=====================================================  DIRECT CONTACT SECTION  ====================================================	*/

	.direct-contact-wrapper {
		display:		grid;
		grid-template-columns: 40.0% 20.0% 40.0%;
		align-items:	center;
		padding:		calc(32 * var(--vw1600) / 1600) 0;		/*	Padding:										32px / Max			*/
		border-bottom:	calc(6 * var(--vw1600) / 1600) solid #880000;	/*	Divider									*/
		margin-bottom:	calc(48 * var(--vw1600) / 1600);		/*	Margin Bottom:									48px / Max			*/
		}

	.direct-contact-label {								/*	Reach Us Direct  */
		color:			#2DC8FF;								/*									UC Aqua Blue						*/
		font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:										36px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		text-align:		center;
		}

	.direct-contact-center {
		}

	.direct-contact-info {
		text-align:		center;
		}

	.direct-contact-location {
		color:			#99FF99;								/*									UC Green							*/
		font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:										40px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		}

/*	======================================================  QUOTING PROCESS LINK  ====================================================	*/

	.quoting-link-wrapper {
		text-align:		center;
		padding:		calc(24 * var(--vw1600) / 1600) 0;		/*	Padding:										24px / Max			*/
		}

	.quoting-link {
		color:			#ffff00;								/*									UC Link Yellow						*/
		font-size:		calc(36 * var(--vw1600) / 1600);		/*	Font Size:										36px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		text-decoration: none;
		cursor:			pointer;
		}

	.quoting-link:hover {
		color:			#FF5733;								/*	Hover:							Burnt Orange						*/
		letter-spacing:	0.1em;									/*	Letter-Spacing									0.1em				*/
		text-shadow:	1px 1px 2px rgba(0, 0, 0, 0.3);
		}

/*	==============================================================  FORM  =============================================================	*/

	.form-wrapper {
		max-width:		calc(1200 * var(--vw1600) / 1600);		/*	Max Width:										800px / Max			*/
		margin:			0 auto;
		}

	.form-header {										/*	Or Send Us A Message  */
		text-align:		center;
		color:			#2DC8FF;								/*									UC Aqua Blue						*/
		font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:										36px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		padding-bottom:	calc(32 * var(--vw1600) / 1600);		/*	Padding Bottom:									32px / Max			*/
		}

	.contact-form {
		display:		flex;
		flex-direction:	column;
		}

	.field-gap {
		padding:		calc(50 * var(--vw1600) / 1600) 0		/*	Padding Above:									20px / Max			*/
						calc(8 * var(--vw1600) / 1600) 0;		/*	Padding Below:									8px / Max			*/
		width:			100%;
		}

	.field-gap-note {
		padding:		calc(20 * var(--vw1600) / 1600) 0		/*	Padding Above:									20px / Max			*/
						calc(0 * var(--vw1600) / 1600) 0;		/*	Padding Below:									8px / Max			*/
		width:			100%;
		}

	.field-gap-address {
		padding:		calc(10 * var(--vw1600) / 1600) 0		/*	Padding Above:									20px / Max			*/
						calc(0 * var(--vw1600) / 1600) 0;		/*	Padding Below:									8px / Max			*/
		width:			100%;
		}

	.form-field {
		display:		flex;
		flex-direction:	column;
		position:		relative;								/*	Required For Done Button Positioning								*/
		}

	.form-label {										/*	Name, Email, Phone, Address, Message  */
		color:			#2DC8FF;								/*									UC Aqua Blue						*/
		font-size:		calc(42 * var(--vw1600) / 1600);		/*	Font Size:										28px / Max			*/
		font-weight:	bold;
		}

/*	==========================================================  TIMEFRAME  ===========================================================	*/

	.timeframe-field {
		display:		flex;
		flex-direction:	column;
		gap:			calc(16 * var(--vw1600) / 1600);		/*	Gap Between Options:							16px / Max			*/
		padding:		calc(12 * var(--vw1600) / 1600) 0;		/*	Padding:										12px / Max			*/
		}

	.timeframe-option {
		display:		flex;
		align-items:	center;
		gap:			calc(16 * var(--vw1600) / 1600);		/*	Gap Between Checkbox And Label					16px / Max			*/
		cursor:			pointer;
		}

	.timeframe-option input[type="checkbox"] {
		width:			calc(28 * var(--vw1600) / 1600);		/*	Checkbox Size:									28px / Max			*/
		height:			calc(28 * var(--vw1600) / 1600);		/*	Checkbox Size:									28px / Max			*/
		accent-color:	#99FF99;								/*	UC Green											*/
		flex-shrink:	0;
		cursor:			pointer;
		}

	.timeframe-option span {
		color:			white;
		font-size:		calc(44 * var(--vw1600) / 1600);		/*	Font Size:										32px / Max			*/
		font-style:		italic;
		}

/*	============================================================  BUDGET  ============================================================	*/

					/*    See contactBudget.css    */

/*	===========================================================  CONTINUED  ==========================================================	*/

	.required {
		color:			#FF5733;								/*									Burnt Orange						*/
		}

	.form-note {										/*	At least one of Email or Phone is required  */
		color:			#958E87;								/*									UC Warm Grey						*/
		font-size:		calc(32 * var(--vw1600) / 1600);		/*	Font Size:										22px / Max			*/
		font-style:		italic;
		}

	.form-input, .form-textarea {
		background-color: #1a1a1a;
		border:	calc(2 * var(--vw1600) / 1600) solid #880000;	/*	Border:							Burgundy							*/
		border-radius:	calc(24 * var(--vw1600) / 1600);			/*	Radius:											8px / Max			*/
		color:			white;									/*	Font Color:						White			2px					*/
		font-size:		calc(48 * var(--vw1600) / 1600);		/*	Font Size:										26px / Max			*/
		font-family:	Arial, sans-serif;
		letter-spacing:	0.125em;								/*	Letter Spacing									0.05em				*/
		padding:		calc(12 * var(--vw1600) / 1600)
						calc(16 * var(--vw1600) / 1600);		/*	Padding:										12px 16px / Max		*/
//		width:			100%;
		box-shadow:
			0 0 0		calc(1.5 * var(--vw1600) / 1600) slateblue,
			0 0			calc(10 * var(--vw1600) / 1600) rgba(106, 90, 205, 0.4);	/*	Neon Glow										*/
		}

	.form-textarea {									/*	Text Form Entry Box  */
		font-family:	Georgia, 'Times New Roman', serif;		/*	Warm Serif Font														*/
		color:			#F8CB9E;								/*	Font Color:						UC Peach		2px					*/
		font-size:		calc(48 * var(--vw1600) / 1600);		/*	Font Size:										26px / Max			*/
		letter-spacing:	0.05em;									/*	Letter Spacing									0.05em				*/
		font-style:		italic;
		min-height:		calc(160 * var(--vw1600) / 1600);		/*	Height:											160px / Max			*/
		max-height:		calc(680 * var(--vw1600) / 1600);		/*	Max Height:										640px / Max			*/
		overflow-y:		auto;									/*	Scroll Within When Content Exceeds Max Height						*/
		resize:			vertical;
		}

	.form-input::placeholder,
	.form-textarea::placeholder {
		color:			#555555;
		}

	.form-input:focus,
	.form-textarea:focus {
		outline:		none;
		border-color:	#2DC8FF;								/*	Focus:							UC Aqua Blue						*/
		}

/*	=======================================================  PHOTO SUBMISSION  =======================================================	*/

	.form-photo-note-wrapper {
		padding-top:	calc(60 * var(--vw1600) / 1600);		/*	Padding Top:									24px / Max			*/
		padding-bottom:	calc(24 * var(--vw1600) / 1600);		/*	Padding Bottom:									24px / Max			*/
		}

	.form-photo-label {
		display:		block;
		color:			#2DC8FF;								/*	UC Aqua Blue										*/
		font-size:		calc(42 * var(--vw1600) / 1600);		/*	Font Size:										42px / Max			*/
		font-weight:	bold;
		}

	.form-photo-text {
		display:		block;
		color:			#FCE8D4;								/*	UC Off White — Warm Personal Tone									*/
		font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:										40px / Max			*/
		font-style:		italic;
		text-indent:	calc(48 * var(--vw1600) / 1600);		/*	Text Indent:									48px / Max			*/
		}

/*	========================================================== SUBMIT BUTTON ==========================================================	*/

	.form-submit-wrapper {								/*	Submit Button Wrapper  */
		display:		flex;
		justify-content: center;
		padding-top:	calc(48 * var(--vw1600) / 1600);		/*	Padding Top:									16px / Max			*/
		}

	.form-submit {
		display:		block;									/*	Makes Area Clickable												*/
		position:		relative;								/*	Position: Relative													*/
		border:			2px solid #880000;						/*	Border:							Lt Burg			2px					*/
		border-radius:	calc(var(--vw1600) * 0.022);			/*	Rounded Corners									35px / Max			*/
		background-color: #660000;								/*									UC Dk Burgundy						*/
		padding:		calc(var(--vw1600) * 0.0055)
						calc(var(--vw1600) * 0.03);				/*	Padding: Top/Bottom  Left/Right										*/
		color:			#ffff00;								/*									UC Link Yellow						*/
		font-size:		calc(32 * var(--vw1600) / 1600);		/*	Font Size:										32px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		cursor:			pointer;
		box-shadow:
			0 0 0		calc(1.5 * var(--vw1600) / 1600) slateblue,
			0 0			calc(12 * var(--vw1600) / 1600) rgba(106, 90, 205, 1.0),
			0 0			calc(18 * var(--vw1600) / 1600) rgba(106, 90, 205, 0.4);
		}

	.form-submit::after {
		content:		'';										/*	Req'd To Display Pseudo-Element										*/
		position:		absolute;								/*	Position: Absolute													*/
		border:			1.5px solid black;						/*	Border:							Black			1.5px				*/
		border-radius:	calc(var(--vw1600) * 0.019) !important;	/*	Rounded Corners									33px / Max			*/
		top:			0px; left: 0px;							/*	Pos. To Top-Left Corner												*/
		right:			0px; bottom: 0px;						/*	Border Wraps Element												*/
		box-sizing:		border-box;								/*	Include Padding And Border											*/
		pointer-events:	none;									/*	Pseudo-Element Not To Interfere										*/
		padding:		calc(var(--vw1600) * 0.003125);			/*	Padding Btwn Borders												*/
		}


	.form-submit:disabled {
		opacity:		0.4;
		cursor:			not-allowed;
		}

	.form-submit:not(:disabled):hover {
		color:			#FF5733;								/*	Hover:							Burnt Orange						*/
		}

/*	===========================================================  Security =============================================================	*/

	.form-submit:not(:disabled):hover {
		color:			#FF5733;								/*	Hover:							Burnt Orange						*/
		}

	.form-security-note {
		color:			#FCE8D4;								/*	UC Off White — Warm Personal Tone									*/
		font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:										22px / Max			*/
		font-style:		italic;
		text-align:		 left;
		text-indent:	calc(48 * var(--vw1600) / 1600);		/*	Text Indent:									48px / Max			*/
		padding-top:	calc(48 * var(--vw1600) / 1600);		/*	Padding Top:									24px / Max			*/
		}

/*	===================================================  Thank You For Submitting  ====================================================	*/

.form-thankyou {
	display:		none;
	text-align:		center;
	color:			#2DC8FF;								/*	UC Aqua Blue						*/
	font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:		32px / Max			*/
	font-weight:	bold;
	font-style:		italic;
	padding-top:	calc(32 * var(--vw1600) / 1600);		/*	Padding Top:	32px / Max			*/
	}

.form-thankyou.visible {
	display:		block;
	}

/*	=========================================================  Save Options  ==========================================================	*/

	.form-action-row {
		display:		grid;
		grid-template-columns: 25% 50% 25%;
		align-items:	center;
		padding-top:	calc(24 * var(--vw1600) / 1600);		/*	Padding Top:									24px / Max			*/
		}

	.form-action-left {
		text-align:		center;
		}

	.form-action-center {
		}

	.form-action-right {
		text-align:		center;
		}

	.form-action-label {
		color:			#CCCC00;								/*	Font Color (2ndary Action):		Dimmed Yellow						*/
		font-size:		calc(40 * var(--vw1600) / 1600);		/*	Font Size:										26px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		cursor:			pointer;
		user-select:	none;
		letter-spacing:	normal;									/*	Reset Letter Spacing												*/
		text-shadow:	none;									/*	Reset Text Shadow													*/
		transition:		none;									/*	No Transition — Prevents Styles Sticking							*/
		}

	.form-action-label:hover {
		color:			#FF5733;								/*	Hover:							Burnt Orange						*/
		letter-spacing:	0.1em;
		text-shadow:	1px 1px 2px rgba(0, 0, 0, 0.3);
		}

	@media (hover: none) {
		.form-action-label:hover {
			color:			#CCCC00;							/*	Disable Sticky Hover On Touch Devices						*/
			letter-spacing:	normal;
			text-shadow:	none;
			}
		}