:root{
  --bg: #222222;

  /* Typography */
  --headerFont: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bodyFont: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --buttonFont: Helvetica, Arial, sans-serif;

  --headerColor: #FFFFFF;
  --bodyColor: #C0C6CC;

  --btnBg: #FFFFFF;
  --btnText: #111111;

  --line: rgba(255,255,255,.14);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--bodyColor);
  font-family: var(--bodyFont);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.85;
}

a{ color: inherit; }

.page{ min-height: 100vh; }
.center{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 52px 16px;
}
.stack{
  width: min(900px, 100%);
  text-align: center;
}
.stack-wide{ width: min(980px, 100%); }

.h1{
  font-family: var(--headerFont);
  font-weight: 700;
  font-size: 60px;
  color: var(--headerColor);
  margin: 0 0 18px;
  letter-spacing: .02em;
  line-height: 1.08;
}
.h1-small{ margin-bottom: 10px; }

.bodytext{
  font-family: var(--bodyFont);
  font-weight: 400;
  font-size: 19px;
  color: var(--bodyColor);
}
.subtitle{ margin: 0 0 44px; }

.roles p{ margin: 0; }
.roles .spacer{ height: 16px; }

.actions{
  display: flex;
  justify-content: center;
  margin: 26px 0 20px;
}

/* Buttons */
.btn{
  font-family: var(--buttonFont);
  font-weight: 700;
  font-size: 14px;
  height: 40px;
  padding: 0 30px;
  border-radius: 100px;
  background: var(--btnBg);
  color: var(--btnText);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  opacity: 1;
  transition: opacity .14s ease;
}
.btn:hover{ opacity: .8; }

.btn-ghost{
  background: transparent;
  color: var(--headerColor);
  border: 1px solid var(--line);
}
.btn-ghost:hover{ opacity: .8; }

.linkedin{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  font-family: var(--headerFont);
  font-weight: 700;
  font-size: 20px;
  color: var(--headerColor);
  text-decoration: none;
  opacity: .95;
}
.linkedin:hover{ opacity: .8; }

/* Contact header bar */
.headerbar{
  position: relative;
  padding: 14px 18px;
  max-width: 1200px;
  margin: 0 auto;
}
.homebtn{
  position: absolute;
  left: 18px;
  top: 14px;
  font-family: var(--bodyFont);
  font-weight: 400;
  font-size: 19px;
  color: var(--bodyColor);
  text-decoration: none;
}
.homebtn:hover{ opacity: .8; }

.headerbrand{
  text-align: center;
  font-family: var(--headerFont);
  font-weight: 700;
  font-size: 34px;
  color: var(--headerColor);
  line-height: 1.2;
}

.contact-center{
  align-items: start;
  padding-top: 110px;
}

/* Form */
.form-adobe{
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 30px;
  text-align: left;
}

.field-adobe label{
  display: block;
  font-family: var(--bodyFont);
  font-weight: 400;
  font-size: 19px;
  color: var(--headerColor);
  margin: 0 0 10px;
}

.field-adobe input,
.field-adobe textarea{
  width: 100%;
  font-family: var(--bodyFont);
  font-weight: 400;
  font-size: 19px;
  padding: 14px 14px;
  border-radius: 4px;
  border: 0;
  background: #FFFFFF;
  color: #2b2b2b;
  outline: none;
}

.field-adobe input::placeholder,
.field-adobe textarea::placeholder{
  color: rgba(0,0,0,.45);
}

.field-adobe textarea{
  resize: vertical;
  min-height: 190px;
}

.form-actions{
  display: flex;
  justify-content: flex-start;
}

.thanks-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 34px;
}

/* Scroll-to-top */
.scrolltop{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  font-family: var(--buttonFont);
  font-weight: 700;
}
.scrolltop.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scrolltop:hover{ opacity: .8; }

.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@media (max-width: 560px){
  .h1{ font-size: 44px; }
  .headerbrand{ font-size: 24px; }
  .contact-center{ padding-top: 70px; }
}