/*
	Decillion Digital - Contact page UI
	Loaded after style.css / responsive.css / home-ui.css (shared eyebrow + button styles live there).
	Uses the --dd-* palette variables from style.css.
*/

/* ---------- page hero ---------- */

.contact-hero{
	position:relative;
	overflow:hidden;
	padding:230px 0 200px;
	background-color:var(--dd-purple-800);
	color:#ffffff;
}

.contact-hero .pattern-layers{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	pointer-events:none;
}

.contact-hero .pattern-layers .layer-one,
.contact-hero .pattern-layers .layer-two{
	position:absolute;
	background-repeat:no-repeat;
}

.contact-hero .pattern-layers .layer-one{
	left:0;
	top:0;
	width:475px;
	height:450px;
}

.contact-hero .pattern-layers .layer-two{
	right:0;
	top:0;
	width:878px;
	height:425px;
	background-position:right top;
}

.contact-hero .glow{
	position:absolute;
	right:-140px;
	top:-120px;
	width:560px;
	height:560px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(139,85,244,0.40) 0%, rgba(139,85,244,0) 70%);
	pointer-events:none;
}

.contact-hero .auto-container{
	position:relative;
}

.contact-hero h1{
	font-size:60px;
	font-weight:600;
	line-height:1.1em;
	letter-spacing:-0.5px;
	color:#ffffff;
	margin-bottom:22px;
}

.contact-hero h1 em{
	font-style:normal;
	color:var(--dd-purple-300);
}

.contact-hero .text{
	max-width:600px;
	font-size:18px;
	line-height:1.8em;
	color:rgba(255,255,255,0.80);
}

.contact-hero .crumbs{
	display:flex;
	align-items:center;
	gap:10px;
	list-style:none;
	margin:34px 0 0;
	padding:0;
	font-size:14px;
	color:rgba(255,255,255,0.65);
}

.contact-hero .crumbs a{
	color:var(--dd-purple-300);
	transition:color 0.3s ease;
}

.contact-hero .crumbs a:hover{
	color:#ffffff;
}

.contact-hero .crumbs .fa{
	font-size:10px;
	opacity:0.7;
}

/* ---------- main (cards overlap the hero) ---------- */

.contact-main{
	position:relative;
	padding:0 0 110px;
	margin-top:-120px;
	z-index:2;
}

.contact-main .row{
	align-items:stretch;
}

/* info column */

.contact-side{
	display:flex;
	flex-direction:column;
	gap:16px;
	height:100%;
}

.contact-card{
	position:relative;
	display:flex;
	align-items:flex-start;
	gap:18px;
	padding:26px 26px;
	border-radius:20px;
	background-color:#ffffff;
	border:1px solid rgba(44,13,110,0.06);
	box-shadow:0 12px 36px rgba(14,0,40,0.10);
	transition:transform 0.35s ease, box-shadow 0.35s ease;
}

.contact-card:hover{
	transform:translateY(-4px);
	box-shadow:0 22px 48px rgba(14,0,40,0.16);
}

.contact-card .icon{
	flex:0 0 56px;
	width:56px;
	height:56px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:16px;
	font-size:24px;
	line-height:1;
	color:var(--dd-purple-600);
	background:linear-gradient(135deg, var(--dd-purple-50) 0%, var(--dd-purple-100) 100%);
	box-shadow:inset 0 0 0 1px rgba(99,41,185,0.10);
}

.contact-card h4{
	font-family:'Dosis', sans-serif;
	font-size:21px;
	font-weight:600;
	color:var(--dd-text);
	margin-bottom:6px;
}

.contact-card p{
	margin:0;
	font-size:15px;
	line-height:1.75em;
	color:#6c6f76;
}

.contact-card a{
	color:var(--dd-purple-600);
	font-weight:600;
	border-bottom:1px solid var(--dd-purple-100);
	transition:border-color 0.3s ease;
}

.contact-card a:hover{
	border-color:var(--dd-purple-600);
}

.contact-card.dark{
	flex:1 1 auto;
	align-items:center;
	color:#ffffff;
	border:none;
	background:linear-gradient(135deg, var(--dd-purple-600) 0%, var(--dd-purple-800) 70%, var(--dd-purple-900) 100%);
	box-shadow:0 20px 44px rgba(44,13,110,0.30);
}

.contact-card.dark .icon{
	color:#ffffff;
	background:rgba(255,255,255,0.12);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);
}

.contact-card.dark h4{
	color:#ffffff;
}

.contact-card.dark p{
	color:rgba(255,255,255,0.78);
}

.contact-card.dark .dd-btn{
	margin-top:16px;
}

/* form column */

.contact-panel{
	position:relative;
	height:100%;
	padding:44px 44px 40px;
	border-radius:24px;
	background-color:#ffffff;
	border:1px solid rgba(44,13,110,0.06);
	box-shadow:0 24px 60px rgba(14,0,40,0.14);
}

.contact-panel .panel-head{
	margin-bottom:28px;
}

.contact-panel .panel-head h2{
	font-size:34px;
	font-weight:600;
	line-height:1.2em;
	color:var(--dd-text);
	margin-bottom:8px;
}

.contact-panel .panel-head p{
	margin:0;
	font-size:15px;
	color:#6c6f76;
}

.contact-panel .form-group{
	margin-bottom:20px;
}

.contact-panel label{
	display:block;
	font-family:'Montserrat', sans-serif;
	font-size:12px;
	font-weight:600;
	letter-spacing:0.6px;
	text-transform:uppercase;
	color:var(--dd-purple-800);
	margin-bottom:8px;
}

/* sending state on the submit button */
.contact-panel .dd-btn.is-sending{
	opacity:0.75;
	cursor:progress;
	pointer-events:none;
}

/* field hints, word counters and invalid state */
.contact-panel .field-hint{
	display:block;
	margin-top:6px;
	font-size:12px;
	line-height:1.5em;
	color:#9b9fa6;
}

.contact-panel .word-count{
	font-weight:600;
	color:var(--dd-purple-600);
}

.contact-panel .word-count.is-near{
	color:#c77700;
}

.contact-panel .word-count.is-over{
	color:#d32f2f;
}

/* submission status + honeypot */
.contact-panel .form-status{
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:14px 16px;
	margin-bottom:22px;
	border-radius:14px;
	font-size:14px;
	line-height:1.6em;
}

.contact-panel .form-status .fa{
	flex:0 0 auto;
	font-size:18px;
	margin-top:2px;
}

.contact-panel .form-status em{
	display:block;
	font-style:normal;
	font-size:12px;
	opacity:0.8;
	margin-top:4px;
}

.contact-panel .form-status code{
	font-size:12px;
}

.contact-panel .form-status.is-success{
	color:#1f5d3a;
	background:#eaf7ef;
	border:1px solid #c6ead3;
}

.contact-panel .form-status.is-success .fa{
	color:#2e9e5b;
}

.contact-panel .form-status.is-error{
	color:#7a1f1f;
	background:#fdeeee;
	border:1px solid #f3cccc;
}

.contact-panel .form-status.is-error .fa{
	color:#d32f2f;
}

.contact-panel .form-status a{
	color:inherit;
	font-weight:600;
	text-decoration:underline;
}

.contact-panel .hp-field{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* required / optional markers */
.contact-panel label .req{
	color:#d32f2f;
	font-weight:700;
	margin-left:1px;
}

.contact-panel label .opt{
	font-weight:500;
	letter-spacing:0;
	text-transform:none;
	color:#9b9fa6;
	margin-left:4px;
}

.contact-panel .panel-head .req-legend{
	display:block;
	margin-top:6px;
	font-size:13px;
	color:#8b8e93;
}

.contact-panel .panel-head .req-legend .req{
	color:#d32f2f;
	font-weight:700;
}

/* override the template's pill inputs with softer rounded fields */
.contact-panel .contact-form .form-group input[type="text"],
.contact-panel .contact-form .form-group input[type="tel"],
.contact-panel .contact-form .form-group input[type="email"],
.contact-panel .contact-form .form-group textarea{
	height:54px;
	padding:12px 18px;
	line-height:28px;
	font-size:15px;
	color:var(--dd-text);
	border-radius:14px;
	border:1px solid #e4def3;
	background-color:#faf8fe;
	box-shadow:none;
	transition:border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.contact-panel .contact-form .form-group textarea{
	height:150px;
	line-height:1.6em;
	padding:14px 18px;
}

.contact-panel .contact-form .form-group input:focus,
.contact-panel .contact-form .form-group textarea:focus{
	background-color:#ffffff;
	border-color:var(--dd-purple-600);
	box-shadow:0 0 0 4px rgba(99,41,185,0.12);
}

.contact-panel .contact-form ::placeholder{
	color:#9b9fa6;
}

/* invalid state - after the base field rules so it wins on source order */
.contact-panel .contact-form .form-group input.is-invalid,
.contact-panel .contact-form .form-group textarea.is-invalid{
	border-color:#e09b9b;
	background-color:#fdf7f7;
}

.contact-panel .contact-form .form-group input.is-invalid:focus,
.contact-panel .contact-form .form-group textarea.is-invalid:focus{
	border-color:#d32f2f;
	background-color:#ffffff;
	box-shadow:0 0 0 4px rgba(211,47,47,0.12);
}

/* hints stay visible alongside errors (same in the JS and server-rendered cases) */
.contact-panel .form-group .field-hint + label.error{
	margin-top:2px;
}

.contact-panel .contact-form label.error{
	font-family:'Open Sans', sans-serif;
	font-size:12px;
	font-weight:400;
	letter-spacing:0;
	text-transform:none;
	color:#d32f2f;
	margin:6px 0 0;
}

.contact-panel .form-foot{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:14px 24px;
	margin-top:6px;
}

.contact-panel .form-foot .note{
	font-size:13px;
	color:#8b8e93;
}

.contact-panel .form-foot .note .fa{
	color:var(--dd-purple-600);
	margin-right:6px;
}

.contact-panel .dd-btn{
	border:none;
	cursor:pointer;
}

/* ---------- responsive ---------- */

@media only screen and (max-width: 1199px){
	.contact-hero h1{ font-size:52px; }
	.contact-panel{ padding:36px 32px 32px; }
}

@media only screen and (max-width: 991px){
	.contact-hero{ padding:190px 0 170px; }
	.contact-hero h1{ font-size:44px; }
	.contact-main{ margin-top:-100px; padding-bottom:80px; }
	.contact-side{ height:auto; margin-bottom:16px; }
	.contact-card.dark{ flex:0 0 auto; }
	.contact-panel{ height:auto; }
}

@media only screen and (max-width: 767px){
	.contact-hero{ padding:160px 0 150px; }
	.contact-hero h1{ font-size:38px; }
	.contact-hero .text{ font-size:16px; }
	.contact-hero .glow{ display:none; }
	.contact-main{ margin-top:-90px; }
	.contact-panel{ padding:30px 22px 26px; border-radius:20px; }
	.contact-panel .panel-head h2{ font-size:28px; }
	.contact-card{ padding:22px 20px; }
}