.contact-page { min-height: 100vh; background: #f7faf8; }
.contact-page .site-header { position: absolute; }
.contact-page .site-header.scrolled { background: transparent; box-shadow: none; }
.contact-nav { margin-left: auto; margin-right: 20px; }
.contact-hero { position: relative; min-height: 100vh; overflow: hidden; padding: 150px 0 85px; background: radial-gradient(circle at 15% 20%, #e4fff3, transparent 36%), linear-gradient(135deg, #f9fcfb, #f1f8f5); }
.contact-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(16,35,28,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(16,35,28,.03) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.contact-aurora { position: absolute; border-radius: 50%; filter: blur(28px); opacity: .55; animation: glow-drift 10s ease-in-out infinite alternate; }
.aurora-one { width: 420px; height: 420px; background: #9cede0; left: -230px; bottom: -100px; }
.aurora-two { width: 330px; height: 330px; background: #dffb9c; right: -150px; top: 120px; animation-delay: -5s; }
.contact-layout { position: relative; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 90px; }
.contact-copy h1 { font-size: clamp(48px, 5vw, 68px); margin-top: 18px; }
.contact-copy > p { color: var(--muted); font-size: 17px; line-height: 1.8; max-width: 570px; }
.back-link { display: block; margin-bottom: 50px; color: #60736b; font-size: 13px; font-weight: 800; }
.back-link:hover { color: var(--green-dark); transform: translateX(-3px); }
.contact-details { display: grid; gap: 14px; margin-top: 38px; }
.contact-details > * { display: flex; align-items: center; gap: 14px; padding: 13px; border-radius: 15px; transition: .3s ease; }
.contact-details > *:hover { background: rgba(255,255,255,.72); transform: translateX(5px); }
.contact-details i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--green-soft); color: var(--green-dark); font-style: normal; font-weight: 900; }
.contact-details small, .contact-details strong { display: block; }
.contact-details small { color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.contact-details strong { font-size: 13px; }
.contact-card { position: relative; padding: 38px; border: 1px solid rgba(216,231,225,.92); border-radius: 28px; background: rgba(255,255,255,.88); backdrop-filter: blur(22px); box-shadow: 0 35px 90px rgba(16,35,28,.13); }
.contact-card::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, rgba(46,201,141,.45), transparent 35%, transparent 75%, rgba(184,243,72,.4)); }
.form-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.form-heading span { font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
.form-heading small { color: var(--muted); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid label { display: grid; gap: 7px; color: #41564e; font-size: 11px; font-weight: 800; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; border: 1px solid #dce7e2; border-radius: 12px; background: #fbfdfc; padding: 13px 14px; color: var(--ink); font: inherit; font-size: 13px; outline: none; transition: border-color .25s, box-shadow .25s, transform .25s; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(46,201,141,.12); transform: translateY(-1px); }
.form-grid textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.form-wide { grid-column: 1 / -1; }
.form-grid em { color: #b74553; font-size: 10px; font-style: normal; font-weight: 600; }
.website-field { position: absolute; left: -10000px; }
.form-submit { width: 100%; margin-top: 22px; border: 0; cursor: pointer; }
.form-submit > span { font-size: 17px; }
.form-note { margin: 13px 0 0; color: #819089; text-align: center; font-size: 10px; }
.contact-success { display: flex; gap: 12px; padding: 14px; margin-bottom: 22px; border: 1px solid #a7e5cc; border-radius: 13px; background: #ecfff7; }
.contact-success > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--green); font-weight: 900; }
.contact-success strong { font-size: 13px; }
.contact-success p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
@media (max-width: 980px) { .contact-layout { grid-template-columns: 1fr; gap: 55px; } .contact-copy { text-align: center; } .contact-copy > p { margin-inline: auto; } .contact-details { max-width: 520px; margin-inline: auto; text-align: left; } .back-link { margin-bottom: 30px; } }
@media (max-width: 640px) { .contact-hero { padding: 115px 0 50px; } .contact-copy h1 { font-size: 42px; } .contact-card { padding: 24px 18px; border-radius: 22px; } .form-grid { grid-template-columns: 1fr; } .form-wide { grid-column: auto; } .form-heading { display: grid; gap: 5px; } }