/* ==========================================================================
   Section: Contact / Body (form + aside). Ported verbatim from contact-styles.css.
   ========================================================================== */

/* ---------- Layout ---------- */
.contact-section { position: relative; overflow: hidden; }
/* Soft green glow on the left, level with the form. Lives on this section
   (not the hero) so the hero's overflow:hidden can't clip it into a hard edge. */
.contact-section::before {
	content:''; position:absolute; top:60px; left:-220px; width:520px; height:520px;
	background: radial-gradient(circle, rgba(98,207,95,0.10), transparent 68%); pointer-events:none; z-index:0;
}
.contact-section > .container { position: relative; z-index: 1; }
.contact-layout { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 36px; align-items: start; padding: 0 0 110px; margin-top: -24px; }

/* ---------- Form card ---------- */
.contact-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 38px 40px; position: relative; }
.contact-card .card-head { margin-bottom: 26px; }
.contact-card .card-head h2 { font-size: 23px; }
.contact-card .card-head p { font-size: 14.5px; color: var(--muted); margin-top: 6px; }

/* fields (shared pattern with payment) */
.field-row { display:grid; gap:18px; margin-bottom:18px; }
.field-row.two { grid-template-columns: 1fr 1fr; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:13px; font-weight:600; color:var(--navy); letter-spacing:0.01em; }
.field label .opt { color:var(--muted); font-weight:400; }
.input-wrap { position:relative; display:flex; align-items:center; }
.input {
	width:100%; font-family:var(--body-font); font-size:15px; color:var(--navy);
	background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:13px 15px;
	transition: border-color .2s ease, box-shadow .2s ease; outline:none;
}
.input::placeholder { color:#9AA3AD; }
.input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(24,173,231,0.12); }
.input:hover:not(:focus) { border-color:#C9D2DC; }
textarea.input { resize: vertical; min-height: 130px; line-height: 1.6; }
select.input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236C6F74' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 15px center; padding-right:40px; cursor:pointer; }
.field.invalid .input { border-color: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77,0.12); }
.err-msg { font-size:12px; color:#E5484D; display:none; }
.field.invalid .err-msg { display:block; }

/* topic chips */
.topic-chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip {
	font-size:13.5px; font-weight:500; color:var(--navy); background:#fff; border:1.5px solid var(--line);
	border-radius:100px; padding:9px 16px; cursor:pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
	user-select:none;
}
.chip:hover { border-color:#C9D2DC; }
.chip.active { border-color: var(--cyan); background: rgba(24,173,231,0.04); box-shadow: 0 0 0 3px rgba(24,173,231,0.12); color: var(--cyan); }

/* consent */
.consent { display:flex; align-items:flex-start; gap:11px; margin-top:4px; }
.consent input { appearance:none; -webkit-appearance:none; width:20px; height:20px; flex-shrink:0; margin-top:1px; border:1.5px solid var(--line); border-radius:6px; cursor:pointer; position:relative; transition: border-color .2s ease, background .2s ease; }
.consent input:checked { background: var(--grad); border-color: transparent; }
.consent input:checked::after { content:''; position:absolute; left:6px; top:2.5px; width:5px; height:9px; border:solid #fff; border-width:0 2.4px 2.4px 0; transform:rotate(45deg); }
.consent label { font-size:13px; color:var(--body); line-height:1.5; cursor:pointer; }
.consent a { color: var(--cyan); text-decoration:none; border-bottom:1px solid rgba(24,173,231,0.3); }

.btn-send { width:100%; justify-content:center; font-size:16px; padding:16px; margin-top:22px; }
.btn-send svg { width:17px; height:17px; }
.form-foot-note { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-top:14px; justify-content:center; }
.form-foot-note svg { width:14px; height:14px; color:var(--green); flex-shrink:0; }

/* success state */
.contact-success { display:none; flex-direction:column; align-items:center; text-align:center; padding:54px 40px; }
.contact-success.show { display:flex; }
.contact-card.sent .contact-form { display:none; }
.success-badge { width:74px; height:74px; border-radius:50%; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; margin-bottom:24px; position:relative; }
.success-badge::before { content:''; position:absolute; inset:-8px; border-radius:50%; border:1.5px solid rgba(98,207,95,0.25); }
.success-badge svg { width:34px; height:34px; color:var(--green); }
.contact-success h2 { font-size:26px; margin-bottom:12px; }
.contact-success p { font-size:16px; color:var(--body); max-width:42ch; line-height:1.6; }
.contact-success .again { margin-top:24px; }

/* ---------- Aside ---------- */
.contact-aside { display:flex; flex-direction:column; gap:18px; position:sticky; top:96px; }
.info-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.info-card .ic-head { padding:22px 26px 4px; }
.info-card .ic-head h3 { font-size:16px; }
.info-list { padding:14px 26px 22px; display:flex; flex-direction:column; }
.info-item { display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-top:1px solid var(--line-soft); }
.info-item:first-child { border-top:none; }
.info-ic { width:38px; height:38px; border-radius:10px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform .25s ease; }
.info-ic svg { width:18px; height:18px; color:var(--cyan); }
.info-item:hover .info-ic { transform: scale(1.08) rotate(-3deg); }
.info-tx { display:flex; flex-direction:column; gap:2px; }
.info-tx .k { font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.info-tx .v { font-size:15px; color:var(--navy); font-weight:500; line-height:1.45; }
.info-tx a.v { text-decoration:none; transition: color .2s ease; }
.info-tx a.v:hover { color:var(--cyan); }
.info-tx .sub { font-size:12.5px; color:var(--muted); }

/* response promise */
.promise-card { background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:24px 26px; position:relative; overflow:hidden; }
.promise-card::before { content:''; position:absolute; right:-90px; top:-70px; width:280px; height:280px; background: radial-gradient(circle, rgba(98,207,95,0.18), transparent 65%); pointer-events:none; }
.promise-card .pc-row { display:flex; align-items:center; gap:11px; position:relative; }
.promise-card .pulse { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(98,207,95,0.5); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(98,207,95,0.45);} 70%{box-shadow:0 0 0 11px rgba(98,207,95,0);} 100%{box-shadow:0 0 0 0 rgba(98,207,95,0);} }
.promise-card h4 { color:#fff; font-size:16px; }
.promise-card p { font-size:13.5px; color:rgba(255,255,255,0.72); margin-top:8px; line-height:1.6; position:relative; }

/* how engagements start */
.start-card {
	background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
	padding:26px 28px; position:relative; overflow:hidden;
}
.start-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad); }
.start-card h3 { font-size:17px; margin-bottom:12px; color:var(--navy); }
.start-card p { font-size:14.5px; color:var(--body); line-height:1.6; }
.start-card p + p { margin-top:12px; }
.start-card .start-note { color:var(--navy); font-weight:500; }

/* socials */
.social-row { display:flex; gap:10px; }
.social-btn { width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--body); transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.social-btn:hover { transform:translateY(-3px); border-color:transparent; color:var(--cyan); box-shadow: var(--shadow); }
.social-btn svg { width:19px; height:19px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	/* Single column: drop the desktop -24px tuck so overflow:hidden can't clip the card top. */
	.contact-layout { grid-template-columns: 1fr; gap:24px; margin-top: 0; }
	.contact-aside { position:static; }
}
@media (max-width: 620px) {
	.contact-card { padding:28px 22px; }
	.field-row.two { grid-template-columns: 1fr; }
}