/* Elevate Fit-Out — Contact page (from "Elevate - Contact.dc.html") */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #DFD8C8;
  color: #1E1B16;
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
}

a { color: #EE5D2F; text-decoration: none; }
a:hover { color: #1E1B16; }

input, textarea, select { font-family: 'Manrope', sans-serif; }
input::placeholder, textarea::placeholder { color: #8A8271; }

.accent { color: #EE5D2F; }

/* ---------- Nav (solid dark on this page) ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px;
  background: rgba(19,19,18,.92);
  transition: background .35s ease, box-shadow .35s ease;
}
.nav.scrolled {
  background: rgba(10,10,9,.97);
  box-shadow: 0 1px 0 rgba(245,243,239,.09);
}

.nav-wordmark { justify-self: start; }
.nav-wordmark img { height: 34px; display: block; }
.nav-mark { justify-self: center; }
.nav-mark img { height: 46px; display: block; }
.nav-actions { display: flex; gap: 12px; align-items: center; justify-self: end; }

.btn {
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  letter-spacing: .14em;
  border-radius: 10px;
}
.btn-solid { background: #EE5D2F; color: #131312; padding: 14px 28px; }
.btn-solid:hover { color: #131312; }
.btn-enquire { border: 1px solid #EE5D2F; color: #EE5D2F; padding: 13px 24px; }

.nav-burger {
  width: 47px; height: 47px;
  border: 0;
  border-radius: 10px;
  background: #F5F3EF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.nav-burger span { width: 18px; height: 2px; background: #131312; display: block; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(19,19,18,.98);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 8vw;
}
.menu[hidden] { display: none; }
.menu-close {
  position: absolute;
  top: 26px; right: 32px;
  border: 0;
  background: none;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  color: #F5F3EF;
  cursor: pointer;
  padding: 12px;
}
.menu-link {
  font-family: 'Anton', sans-serif;
  font-size: clamp(44px, 6vw, 84px);
  color: #F5F3EF;
  line-height: 1.15;
}
.menu-link:hover { color: #EE5D2F; }
.menu-link-accent { color: #EE5D2F; }

/* ---------- Hero ---------- */

.hero { padding: 190px 44px 70px; }
.hero-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  color: #EE5D2F;
}
.hero-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(48px, 6.4vw, 104px);
  font-weight: 400;
  line-height: 1.02;
  color: #1E1B16;
  margin: 20px 0 0;
}
.hero-sub {
  font-size: 16px;
  line-height: 1.75;
  color: #5F594E;
  margin: 24px 0 0;
  max-width: 620px;
}

/* ---------- Panel ---------- */

.panel {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2px;
  background: rgba(30,27,22,.15);
  border-top: 1px solid rgba(30,27,22,.15);
}

.panel-form {
  background: #DFD8C8;
  padding: 64px 44px 80px;
}
.panel-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  color: #EE5D2F;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 34px;
}
.field { display: flex; flex-direction: column; gap: 9px; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #1E1B16;
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(30,27,22,.35);
  padding: 10px 2px;
  font-size: 15px;
  color: #1E1B16;
  outline: none;
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: #EE5D2F; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
}
.send-btn {
  border: 0;
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  letter-spacing: .14em;
  background: #EE5D2F;
  color: #131312;
  padding: 16px 38px;
  border-radius: 10px;
  cursor: pointer;
}

/* ---------- Side ---------- */

.panel-side {
  background: #131312;
  padding: 64px 44px 80px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.side-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  color: #EE5D2F;
}
.side-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 500;
  color: #F5F3EF;
}
.side-list .muted { color: #B9B5AC; }
.reach-link { color: #B9B5AC; }
.reach-link:hover { color: #EE5D2F; }

.steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 22px;
}
.step { display: flex; gap: 16px; }
.step-no {
  font-family: 'Anton', sans-serif;
  font-size: 15px;
  color: #EE5D2F;
}
.step-d {
  font-size: 14px;
  line-height: 1.65;
  color: #D3CFC4;
}
.side-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  color: #EE5D2F;
  margin-top: auto;
}
.side-link:hover { color: #F5F3EF; }

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  .panel { grid-template-columns: 1fr; }
}

@media (max-width: 679px) {
  .nav-btn { display: none; }
  .hero { padding: 160px 20px 56px; }
  .panel-form, .panel-side { padding: 48px 20px 60px; }
  .form-grid { grid-template-columns: 1fr; }
}