* { box-sizing:border-box; }
:root { color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"Inter",sans-serif; color:#241b2d; background:#f8f7fa; font-synthesis:none; }
body { margin:0; letter-spacing:-.025em; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
:focus-visible { outline:2px solid #9c65e5; outline-offset:5px; }
.contact-nav { max-width:1200px; margin:auto; padding:25px 38px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:12px; }
.contact-brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.04em; }
.contact-brand img { border-radius:50%; object-fit:cover; }
.contact-nav > a:last-child { color:#71677b; }
.contact-nav > a:last-child span { display:inline-block; margin-left:12px; }
main { max-width:1200px; margin:28px auto 0; padding:0 38px; }
.contact-layout { display:grid; grid-template-columns:.87fr 1.13fr; background:#fff; border:1px solid #e9e4ee; border-radius:24px; padding:9px; gap:0; box-shadow:0 25px 70px -50px #3e205d45; }
.contact-preview { position:relative; isolation:isolate; overflow:hidden; background:#29133f; border-radius:17px; padding:34px; color:#f4eafa; display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.contact-preview::before { content:''; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 0% 60%,#7438b766,transparent 65%),linear-gradient(155deg,#ffffff06,transparent 65%); }
.eyebrow { margin:0 0 30px; display:flex; justify-content:space-between; align-items:center; text-transform:uppercase; letter-spacing:.16em; font-size:10px; color:#c4abd9; }
.eyebrow span { font-size:23px; line-height:1; }
h1 { font-size:clamp(43px,5vw,67px); line-height:1; margin:0; letter-spacing:-.065em; font-weight:500; }
h1 > span { color:#bd83fc; }
.motion-mark { position:relative; height:180px; margin:20px 0; display:grid; place-items:center; }
.motion-mark i { position:absolute; width:101px; height:101px; border:1px solid #c69ef36b; border-radius:20px; transform:translateX(-40px) rotate(-25deg); background:linear-gradient(135deg,#bf8bef08,#cc9eff12); }
.motion-mark i:nth-child(2) { transform:rotate(-10deg); border-color:#d6b0ff99; background:linear-gradient(135deg,#b883ff20,#c48aff0a); }
.motion-mark i:nth-child(3) { transform:translateX(40px) rotate(8deg); border-color:#debaffcc; background:linear-gradient(140deg,#d4adff5c,#a359f017); box-shadow:inset 0 1px 0 #ffffff40,0 15px 35px #16042030; }
.project-summary { border-top:1px solid #dcc4fa30; padding-top:22px; }
.summary-label { margin:0 0 10px; color:#baa2cf; font-size:11px; }
.card-budget { margin:0 0 25px; font-size:clamp(23px,2.6vw,34px); line-height:1.2; font-weight:400; letter-spacing:-.045em; overflow-wrap:anywhere; color:#f1dfff; }
.card-bottom { display:flex; justify-content:space-between; align-items:end; gap:14px; color:#bda7d0; font-family:ui-monospace,SFMono-Regular,monospace; font-size:9px; letter-spacing:.02em; line-height:1.7; }
.card-bottom div { display:flex; flex-direction:column; min-width:0; }
.card-bottom div span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:190px; }
.card-bottom > span { flex-shrink:0; border:1px solid #c49cdf38; padding:4px 8px; border-radius:5px; font-size:8px; }
.contact-form { padding:30px clamp(25px,4vw,54px) 23px; display:flex; flex-direction:column; gap:23px; min-width:0; }
.form-intro { font-size:22px; letter-spacing:-.045em; margin:0 0 6px; font-weight:500; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field label { font-size:11px; color:#5e526a; }
.field label span { font-size:10px; color:#94899e; }
.field input,.field select { width:100%; min-width:0; height:40px; padding:0 0 7px; color:#30203e; background:transparent; border:0; border-bottom:1px solid #e0d8e8; border-radius:0; font-size:13px; transition:border-color .2s; }
.field input::placeholder { color:#a49bab; }
.field input:hover,.field select:hover { border-color:#a16aca; }
.field input:focus,.field select:focus { border-color:#8851bb; outline:none; box-shadow:0 1px 0 #8851bb; }
.field select { cursor:pointer; }
.rush { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:11px; color:#766780; cursor:pointer; margin:2px 0 0; }
.rush input { margin:0 5px 0 0; width:15px; height:15px; accent-color:#8850ca; }
.rush span { color:#91849a; }
.submit { display:flex; align-items:center; justify-content:space-between; gap:15px; border:0; border-radius:10px; min-height:49px; margin-top:2px; padding:12px 17px; background:#8350b9; color:#fff; font-size:12px; cursor:pointer; transition:background .2s; }
.submit:hover { background:#6e3ca1; }
.submit span { font-size:22px; font-weight:300; }
.form-note { margin:-12px 0 0; color:#9a8ea3; font-size:10px; line-height:1.5; }
.form-status { font-size:12px; color:#7543aa; margin:0; }
.form-status a { text-decoration:underline; }
footer { display:flex; justify-content:space-between; gap:20px; padding:23px 3px 28px; font-size:11px; color:#92869b; }
@media(min-width:1500px) { main { margin-top:65px; } .contact-preview { padding:40px; } .contact-form { padding-top:37px; padding-bottom:30px; gap:26px; } }
@media(max-width:760px) { main { padding:0 20px; margin-top:20px; } .contact-nav { padding:22px 23px; } .contact-layout { grid-template-columns:1fr; padding:7px; } .contact-preview { padding:25px; min-height:255px; } .preview-heading { position:relative; z-index:1; } .eyebrow { margin-bottom:15px; } h1 { font-size:48px; } .motion-mark { position:absolute; right:26px; top:38px; width:140px; height:100px; margin:0; opacity:.6; transform:scale(.7); transform-origin:right center; } .project-summary { margin-top:30px; padding-top:15px; } .card-budget { margin:0 0 16px; font-size:27px; } .contact-form { padding:28px 22px 20px; } .form-intro { font-size:21px; } }
@media(max-width:420px) { main { padding:0 12px; } .contact-nav { padding:18px; font-size:11px; } .contact-brand img { width:33px; height:33px; } .contact-preview { padding:23px; } .motion-mark { right:12px; opacity:.35; } h1 { font-size:44px; } .form-row { grid-template-columns:1fr; gap:23px; } .contact-form { padding:26px 17px 20px; } footer { font-size:10px; gap:15px; flex-wrap:wrap; padding-left:6px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }