:root {
  --night: #030910;
  --gold: #c8924e;
  --gold-light: #dda962;
  --muted: #8c857c;
  --line: rgba(176, 156, 122, .16);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--night); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: #c9bba5;
  background: radial-gradient(circle at 49% 42%, rgba(11, 38, 59, .34), transparent 38%), linear-gradient(112deg, #03080d, #06101a 56%, #03080d);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

body::before {
  content: '';
  position: fixed;
  z-index: 20;
  inset: 0;
  opacity: .08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }

.contact-atmosphere { position: fixed; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(circle at 65% 15%, rgba(31,61,84,.14), transparent 48%); animation: atmosphere 160s ease-in-out infinite alternate; }

.contact-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  height: 122px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 31px clamp(38px, 4.2vw, 66px) 0;
}

.contact-brand { display: flex; align-items: center; gap: 18px; color: var(--gold-light); text-decoration: none; font-size: 17px; letter-spacing: .23em; }
.contact-brand svg { width: 42px; height: 48px; fill: none; stroke: var(--gold); stroke-width: 1.4; }
.contact-header nav { display: flex; gap: clamp(24px, 3vw, 46px); padding-top: 15px; }
.contact-header nav a { position: relative; padding-bottom: 11px; color: #d2a35f; text-decoration: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.contact-header nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
.contact-header nav a:hover::after, .contact-header nav a:focus-visible::after, .contact-header nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

.contact-page { position: relative; min-height: 100vh; overflow: hidden; }
.contact-visual { position: absolute; z-index: 1; inset: 0 0 0 52%; overflow: hidden; animation: visual-in 1.1s cubic-bezier(.22,.8,.28,1) both; }
.contact-visual img { position: absolute; right: 0; bottom: 0; width: auto; height: 100%; max-width: none; transform: scale(1.22); transform-origin: 100% 100%; filter: saturate(.86) brightness(.78) contrast(1.08); }
.contact-visual::before { content: ''; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, #040a11 0%, rgba(4,10,17,.91) 16%, rgba(4,10,17,.38) 38%, transparent 60%), linear-gradient(180deg, rgba(3,9,15,.62), transparent 17%, transparent 83%, rgba(3,8,13,.78) 91%, #03080d 100%); pointer-events: none; }
.contact-visual::after { content: ''; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 112px; background: linear-gradient(180deg, rgba(3,9,15,.98), rgba(3,9,15,.7) 70%, transparent); pointer-events: none; }

.contact-info {
  position: relative;
  z-index: 5;
  width: 400px;
  margin-left: clamp(48px, 4vw, 62px);
  padding-top: 130px;
  animation: copy-in .9s .06s cubic-bezier(.22,.8,.28,1) both;
}

.contact-eyebrow { margin: 0 0 16px; color: var(--gold-light); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.contact-info h1 { margin: 0; color: #d0a069; font: 400 clamp(46px, 3.8vw, 57px)/1.05 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; }
.contact-lead { width: 325px; margin: 20px 0 0; padding-bottom: 20px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.65; }
.contact-details { width: 325px; display: grid; gap: 16px; margin-top: 20px; }
.contact-detail { display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-items: center; }
.detail-icon { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(211,158,84,.75); border-radius: 50%; }
.detail-icon svg { width: 17px; height: 17px; fill: none; stroke: var(--gold-light); stroke-width: 1.4; }
.contact-detail div { display: grid; gap: 4px; }
.contact-detail a, .contact-detail strong { color: #d8a45d; font-size: 13px; font-weight: 400; text-decoration: none; }
.contact-detail small { color: #88817a; font-size: 10px; line-height: 1.4; }

.viewing-card { width: 325px; display: grid; grid-template-columns: 42px 1fr; gap: 16px; margin-top: 22px; padding: 18px 21px; border: 1px solid rgba(205,145,72,.72); background: rgba(4,10,16,.38); }
.viewing-card > svg { width: 28px; fill: none; stroke: var(--gold-light); stroke-width: 1.15; }
.viewing-card h2 { margin: 0 0 10px; color: var(--gold-light); font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.viewing-card p { margin: 0 0 13px; color: #807970; font-size: 9px; line-height: 1.6; }
.viewing-card a { display: flex; justify-content: space-between; color: var(--gold-light); text-decoration: none; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }

.contact-form {
  position: absolute;
  z-index: 6;
  top: 282px;
  left: clamp(415px, 28.4vw, 440px);
  width: min(420px, 29vw);
  padding-left: 24px;
  border-left: 1px solid var(--line);
  animation: copy-in .9s .14s cubic-bezier(.22,.8,.28,1) both;
}

.contact-form label { display: block; margin-bottom: 18px; }
.contact-form label > span { display: block; margin-bottom: 8px; color: #ac8656; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 27px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; color: #c8bba7; background: rgba(2,9,15,.18); border: 0; border-bottom: 1px solid rgba(146,143,132,.17); border-radius: 0; outline: 0; font-size: 11px; transition: border-color .25s ease, background .25s ease; }
.contact-form input, .contact-form select { height: 34px; padding: 0 5px; }
.contact-form textarea { min-height: 73px; padding: 10px 8px; resize: vertical; border: 1px solid rgba(146,143,132,.14); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #5d5f60; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: rgba(213,161,91,.72); background: rgba(10,22,31,.38); }
.contact-form select { appearance: none; color: #656666; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 11px) 14px, calc(100% - 7px) 14px; background-size: 4px 4px; background-repeat: no-repeat; }
.contact-form select:valid { color: #c8bba7; }
.contact-form button { width: 78%; height: 47px; margin-top: 2px; color: var(--gold-light); background: rgba(3,9,14,.22); border: 1px solid rgba(207,147,75,.78); cursor: pointer; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; transition: background .25s ease, color .25s ease; }
.contact-form button:hover { color: #171009; background: var(--gold-light); }
.form-note { margin: 18px 0 0; color: #686865; font-size: 8px; }
.form-note a { color: #bb8d50; }
.form-status { min-height: 18px; margin: 12px 0 0; color: #c6a067; font-size: 9px; line-height: 1.5; }

.contact-footer { position: absolute; z-index: 8; left: 0; right: 0; bottom: 24px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 0 clamp(48px, 4vw, 62px); color: #b4874e; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.contact-footer div { display: flex; gap: 40px; }
.contact-footer div:nth-child(2) { justify-content: center; }
.contact-footer div:last-child { justify-content: flex-end; }
.contact-footer a { text-decoration: none; }

@keyframes visual-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes atmosphere { from { opacity: .58; filter: hue-rotate(-2deg) brightness(.96); } to { opacity: 1; filter: hue-rotate(2deg) brightness(1.03); } }

@media (max-width: 1100px) {
  .contact-visual { left: 46%; }
  .contact-info { width: 350px; }
  .contact-form { left: 380px; width: 37vw; }
}

@media (max-height: 820px) and (min-width: 761px) {
  .contact-info { padding-top: 108px; }
  .contact-info h1 { font-size: 51px; }
  .contact-lead { margin-top: 16px; padding-bottom: 16px; }
  .contact-details { gap: 13px; margin-top: 16px; }
  .viewing-card { margin-top: 16px; padding-block: 14px; }
  .contact-form { top: 236px; }
  .contact-form label { margin-bottom: 14px; }
  .contact-form textarea { min-height: 62px; }
  .contact-footer { bottom: 15px; }
}

@media (max-width: 760px) {
  .contact-header { position: relative; height: 92px; padding: 18px 20px 0; }
  .contact-brand { gap: 8px; font-size: 11px; }
  .contact-brand svg { width: 29px; height: 34px; }
  .contact-header nav { gap: 11px; padding-top: 9px; }
  .contact-header nav a { padding-bottom: 7px; font-size: 7px; }
  .contact-page { min-height: 1540px; overflow: hidden; }
  .contact-visual { inset: 0; height: 720px; opacity: .34; }
  .contact-visual img { right: 0; height: 100%; transform: scale(1.35); }
  .contact-visual::before { background: linear-gradient(180deg, rgba(4,10,17,.2), #040a11 91%); }
  .contact-info { width: auto; margin: 0 24px; padding-top: 74px; }
  .contact-info h1 { font-size: clamp(46px, 14vw, 62px); }
  .contact-lead, .contact-details, .viewing-card { width: 100%; }
  .viewing-card { max-width: 355px; }
  .contact-form { position: relative; top: auto; left: auto; width: auto; margin: 58px 24px 0; padding: 0; border: 0; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form button { width: 100%; }
  .contact-footer { position: relative; bottom: auto; grid-template-columns: 1fr; gap: 14px; padding: 28px 24px; }
  .contact-footer div, .contact-footer div:nth-child(2), .contact-footer div:last-child { justify-content: flex-start; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}