.contact-section { --contact-gold: #d7b886; --contact-text: #f4f0e8; position: relative; isolation: isolate; padding-block: 96px 104px; border-top: 1px solid #ffffff16; color: var(--contact-text); background: #11110f; }
.contact-section * { box-sizing: border-box; }
.contact-backdrop,.contact-overlay { position: absolute; inset: 0; pointer-events: none; }
.contact-backdrop { z-index: -2; overflow: hidden; }
.contact-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; opacity: .8; }
.contact-overlay { z-index: -1; background: linear-gradient(90deg,#11110fba 0%,#11110f70 38%,#11110fb8 65%,#11110feb 100%),linear-gradient(180deg,#11110f96 0%,transparent 40%,#11110f38 70%,#11110fbf 100%); }
.contact-layout { width: min(1376px,calc(100% - 112px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: center; gap: clamp(40px,6vw,96px); }
.contact-copy { min-width: 0; align-self: start; padding-top: 18px; }
.contact-copy>.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--contact-gold); font: 600 12px/1.7 'Manrope',sans-serif; letter-spacing: .13em; margin: 0 0 25px; }
.contact-copy .eyebrow-line { display: block; width: 28px; height: 1px; background: var(--contact-gold); }
.contact-copy h2 { margin: 0 0 26px; font: 500 clamp(36px,3.5vw,54px)/1.16 'Playfair Display',Georgia,serif; letter-spacing: -.04em; }
.contact-copy h2 em { color: var(--contact-gold); font-weight: 500; }
.contact-intro { max-width: 440px; margin: 0 0 32px; font: 400 16px/1.85 'DM Sans',sans-serif; color: #b9b3a8; }
.contact-email { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; color: var(--contact-text); }
.contact-email>span:last-child { min-width: 0; display: grid; gap: 7px; }
.contact-email small { font: 500 10px/1.6 'Manrope',sans-serif; letter-spacing: .13em; color: var(--contact-gold); }
.contact-email>span>span { font: 400 15px/1.6 'DM Sans',sans-serif; overflow-wrap: anywhere; }
.contact-mail-icon { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border: 1px solid #d7b88640; border-radius: 50%; color: var(--contact-gold); transition: background 300ms,color 300ms; }
.contact-mail-icon svg { width: 21px; height: 21px; }
.contact-email:hover .contact-mail-icon { background: var(--contact-gold); color: #11110f; }
.contact-form { position: relative; min-width: 0; margin: 0; padding: 34px; border: 1px solid #d7b88636; border-radius: 26px; background: linear-gradient(145deg,#ffffff05,transparent 65%),#191815d9; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 80px #0003,inset 0 1px 0 #ffffff08; }
.contact-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.contact-form-heading h3 { margin: 0; font: 500 29px/1.3 'Playfair Display',Georgia,serif; letter-spacing: -.03em; }
.contact-form-heading>span { font: 500 10px/1.5 'Manrope',sans-serif; letter-spacing: .1em; color: #8e8576; white-space: nowrap; }
.contact-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px 20px; }
.contact-field { display: grid; gap: 11px; min-width: 0; font: 400 14px/1.5 'DM Sans',sans-serif; color: #d7cfc1; }
.contact-field-wide { grid-column: 1 / -1; }
.contact-field input,.contact-field textarea { appearance: none; width: 100%; min-width: 0; margin: 0; padding: 14px 15px; border: 1px solid #ffffff1c; border-radius: 12px; background: #11110f85; color: var(--contact-text); font: 400 16px/1.6 'DM Sans',sans-serif; box-shadow: none; transition: border-color 250ms,box-shadow 250ms,background 250ms; }
.contact-field textarea { min-height: 154px; resize: vertical; }
.contact-field input::placeholder,.contact-field textarea::placeholder { color: #847e74; opacity: 1; }
.contact-field input:hover,.contact-field textarea:hover { border-color: #d7b88650; }
.contact-field input:focus,.contact-field textarea:focus { outline: none; border-color: #d7b886b3; background: #11110f; box-shadow: 0 0 0 4px #d7b8860d; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 26px; }
.contact-note { flex: 1 1 150px; margin: 0; max-width: 230px; color: #aaa295; font: 400 12px/1.7 'DM Sans',sans-serif; }
.contact-submit { display: inline-flex; align-items: center; justify-content: space-between; gap: 23px; min-height: 62px; max-width: 100%; padding: 7px 7px 7px 23px; border: 1px solid #f4deb369; border-radius: 100px; background: #e2c394; color: #1c1914; font: 600 14px/1.5 'DM Sans',sans-serif; box-shadow: inset 0 1px 0 #fff7,0 7px 22px #0002; cursor: pointer; transition: background 300ms,box-shadow 300ms,transform 350ms; }
.contact-submit-orbit { position: relative; display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: #1c1a16; color: #f2d8ab; overflow: hidden; }
.contact-submit-orbit svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: transform 380ms,opacity 250ms; }
.contact-check-icon { opacity: 0; transform: translateY(18px); }
.contact-submit:enabled:hover { background: #efd3a7; box-shadow: inset 0 1px 0 #fff8,0 10px 30px #d7b8861a; transform: translateY(-2px); }
.contact-submit:enabled:hover .contact-send-icon { transform: rotate(45deg); }
.contact-submit:focus-visible,.contact-email:focus-visible { outline: 2px solid var(--contact-gold); outline-offset: 5px; }
.contact-submit:disabled { cursor: wait; opacity: .7; }
.contact-form[data-state=sending] .contact-submit-orbit::after { content: ''; position: absolute; inset: 12px; border: 1.5px solid #f2d8ab40; border-top-color: #f2d8ab; border-radius: 50%; animation: contact-spin 800ms linear infinite; }
.contact-form[data-state=sending] .contact-send-icon,.contact-form[data-state=success] .contact-send-icon { opacity: 0; transform: translateY(-18px); }
.contact-form[data-state=success] .contact-check-icon { opacity: 1; transform: translateY(0); }
.contact-status { margin: 18px 0 0; color: #bfb5a5; font: 400 13px/1.7 'DM Sans',sans-serif; }
.contact-status:empty { display: none; }
.contact-form[data-state=error] .contact-status { color: #f0b4a3; }
.contact-form[data-state=success] .contact-status { color: #c8d4b0; }
@keyframes contact-spin { to { transform: rotate(360deg); } }
@media (max-width:1100px) { .contact-layout { width: calc(100% - 64px); gap: 36px; } .contact-form { padding: 27px; } .contact-fields { grid-template-columns: minmax(0,1fr); gap: 20px; } }
@media (max-width:800px) { .contact-section { padding-block: 64px; } .contact-layout { width: calc(100% - 40px); grid-template-columns: minmax(0,1fr); gap: 36px; } .contact-copy { max-width: 580px; padding-top: 0; } .contact-backdrop img { object-position: 48% center; } .contact-overlay { background: linear-gradient(180deg,#11110fc7 0%,#11110f85 40%,#11110fd9 100%); } .contact-fields { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:560px) { .contact-copy h2 { font-size: clamp(34px,9vw,44px); } .contact-form { padding: 25px 20px; border-radius: 20px; } .contact-fields { grid-template-columns: minmax(0,1fr); } .contact-form-heading>span { display: none; } .contact-actions { flex-direction: column; align-items: stretch; } .contact-note { flex: auto; max-width: none; } .contact-submit { width: 100%; } .contact-email { gap: 11px; } .contact-email>span>span { font-size: 14px; } }
@media (prefers-reduced-motion:reduce) { .contact-section * { animation: none!important; transition: none!important; } .contact-submit:enabled:hover,.contact-submit:enabled:hover .contact-send-icon { transform: none; } }