:root {
  --ecru: #ece3dc;
  --electric-violet: #7041ff;
  --deep-teal: #014550;
  --lilac: #bdaaf1;
  --lime: #b4f002;
  --mint: #c9f9ca;
  --soft-white: #f6f6f6;
  --vibrant-teal: #2ac8a5;
  font-size: 1rem
}

::placeholder {
  color: var(--electric-violet)
}

::selection {
  color: var(--vibrant-teal);
  background: #222
}

* {
  box-sizing: border-box;
  outline-color: var(--electric-violet);
  letter-spacing: .025rem;
  margin: 0;
  transition-property: all;
  transition-duration: .15s;
  transition-timing-function: ease-in-out
}

html,
body {
  scroll-behavior: smooth;
  width: 100%;
  height: 100%
}

body,
textarea,
input,
button {
  text-wrap: balance;
  font-family: Buvera, sans-serif
}

header {
  text-align: center;
  background: var(--mint);
  z-index: 10;
  position: sticky;
  top: 0;
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a
}

header svg {
  padding: 1rem
}

nav {
  text-transform: uppercase;
  background: var(--deep-teal);
  width: 100%;
  padding: .25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 2rem
}

nav ul {
  justify-self: center;
  gap: 1rem;
  padding: 0;
  list-style-type: none;
  display: flex
}

nav a {
  color: var(--soft-white);
  text-decoration: none
}

main {
  width: 100%;
  overflow-x: hidden
}

h1 {
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden
}

h2,
h3 {
  font-family: Ibrand, sans-serif;
  font-weight: 600
}

section {
  border: 2rem solid #0000001a;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  place-items: center safe center;
  gap: 2rem;
  width: 100%;
  min-height: 100vh;
  padding: 3rem;
  display: grid
}

section h2 {
  margin-top: 1rem;
  font-size: 3.5rem;
  line-height: 4rem
}

section .supertext {
  text-transform: uppercase;
  padding-left: 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  position: relative
}

section .supertext:before {
  content: "";
  width: 2rem;
  height: .2rem;
  position: absolute;
  top: .5rem;
  left: 0
}

section .supertext.primary:before {
  background: var(--electric-violet)
}

section .supertext.secondary:before {
  background: var(--lime)
}

section p {
  text-wrap: pretty;
  margin-top: 1.25rem;
  font-size: 1.25rem;
  line-height: 2rem
}

footer {
  text-align: center;
  color: var(--deep-teal);
  background: var(--ecru);
  padding: 1rem 3rem;
  font-size: 1rem
}

footer a {
  color: var(--electric-violet);
  text-decoration: none
}

footer a svg {
  vertical-align: middle
}

footer #footer-contact {
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  display: flex
}

nav a:hover,
nav a:focus {
  color: var(--ecru)
}

footer a:hover,
footer a:focus {
  color: var(--vibrant-teal)
}

input,
textarea {
  appearance: none;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  color: var(--electric-violet);
  background: var(--soft-white);
  resize: vertical;
  border: none;
  border-radius: 2rem;
  padding: 1rem 2rem
}

button {
  appearance: none;
  box-shadow: none;
  border: none
}

form {
  flex-direction: column;
  gap: 1rem;
  display: flex
}

input::placeholder,
textarea::placeholder {
  opacity: .4;
  font-style: italic
}

form .required {
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 700
}

#gvn-logo {
  max-width: 160px
}

#gvn-main {
  width: 100%
}

.btn {
  cursor: pointer;
  border-radius: 2rem;
  padding: .5rem 2rem;
  font-size: 1.25rem;
  text-decoration: none;
  display: inline-block;
  position: relative
}

.btn.primary {
  color: var(--ecru);
  background: var(--electric-violet)
}

.btn.primary:hover,
.btn.primary:focus {
  color: var(--electric-violet);
  background: var(--ecru)
}

.btn.secondary {
  color: var(--ecru);
  background: var(--vibrant-teal)
}

.btn.secondary:hover,
.btn.secondary:focus {
  color: var(--vibrant-teal);
  background: var(--ecru)
}

.btn.tertiary {
  color: var(--ecru);
  background: var(--lilac)
}

.btn.tertiary:hover,
.btn.tertiary:focus {
  color: var(--lilac);
  background: var(--ecru)
}

.btn svg {
  vertical-align: middle
}

.btn svg:first-child {
  margin-right: .1rem
}

.btn svg:last-child {
  margin-left: .1rem
}

.hidden {
  display: none
}

#gvn-intro {
  color: var(--mint);
  background: var(--deep-teal);
  border: 0;
  padding: 0;
  position: relative
}

#gvn-intro video {
  object-fit: cover;
  filter: grayscale();
  opacity: .25;
  min-width: 100%;
  max-width: 100%;
  height: 100vh;
  display: block;
  top: 0;
  left: 0
}

#gvn-intro #gvn-intro-content {
  z-index: 2;
  padding: 1rem 5rem;
  position: absolute
}

#gvn-intro h2 {
  text-transform: uppercase;
  letter-spacing: .5rem;
  font-size: 2.5rem;
  line-height: 3rem
}

#gvn-intro-buttons {
  text-align: center;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
  display: flex
}

#gvn-about {
  color: var(--deep-teal);
  background: var(--ecru)
}

#gvn-about img {
  border: 1rem solid var(--soft-white);
  border-radius: .375rem;
  max-width: 100%;
  display: block;
  rotate: 5deg;
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a
}

#gvn-services {
  color: var(--mint);
  background: var(--deep-teal)
}

#service-details {
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  display: flex
}

#service-list {
  color: var(--deep-teal);
  flex-direction: column;
  place-self: start;
  gap: 1rem;
  display: flex
}

#service-list .service {
  background: var(--ecru);
  cursor: pointer;
  border-radius: 2rem;
  padding: 2rem
}

#service-list .service.active,
#service-list .service:focus,
#service-list .service:hover {
  background: var(--mint)
}

#service-list .service .service-title {
  flex-direction: row;
  align-items: center;
  gap: .25rem;
  display: flex
}

#service-separator {
  display: none
}

#service-info {
  color: var(--soft-white)
}

#service-info .highlight {
  color: var(--lilac);
  font-size: 2rem;
  font-style: italic;
  line-height: 2rem
}

#service-info .btn {
  margin-top: 2rem
}

#gvn-contact {
  color: var(--soft-white);
  background: var(--electric-violet)
}

#gvn-contact p {
  text-align: center;
  margin: 2rem 0
}

#gvn-contact-toggle {
  text-align: center;
  max-width: 64rem;
  color: var(--electric-violet);
  background: var(--ecru);
  border-radius: 2rem;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  font-size: 1rem;
  display: flex
}

#gvn-contact-toggle svg {
  vertical-align: middle
}

#gvn-contact-toggle .toggle-btn {
  cursor: pointer;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: 1rem 2rem;
  display: flex
}

#gvn-contact-toggle .toggle-btn:first-child {
  border-radius: 2rem 2rem 0 0
}

#gvn-contact-toggle .toggle-btn:last-child {
  border-radius: 0 0 2rem 2rem
}

#gvn-contact-toggle .toggle-btn.active {
  background: var(--soft-white);
  font-weight: 700
}

#submission-feedback {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 !important
}

#submission-feedback.success {
  color: var(--lime)
}

#submission-feedback.error {
  color: var(--lilac)
}

#existing-client-support {
  text-align: center
}

#new-client-form,
#existing-client-support {
  max-width: 48rem
}

@media (width>=475px) {
  #gvn-logo {
    max-width: 200px
  }
}

@media (width>=768px) {
  :root {
    font-size: calc(1rem + .25vw)
  }

  body,
  textarea,
  input,
  button {
    font-size: 1.5rem;
    line-height: 2.25rem
  }

  section p {
    font-size: 2rem;
    line-height: 3rem
  }

  #gvn-logo {
    max-width: 240px
  }

  #gvn-intro h2 {
    max-width: 70%;
    font-size: 3rem;
    line-height: 4rem
  }

  #gvn-intro-buttons {
    flex-direction: row
  }

  #service-info .highlight {
    font-size: 4rem;
    line-height: 4rem
  }

  footer #footer-contact {
    flex-direction: row;
    gap: 1rem;
    margin-top: 0
  }
}

@media (width>=1024px) {
  #gvn-about {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  #service-details {
    flex-direction: row;
    gap: 2rem
  }

  #service-info {
    min-width: 50%;
    max-width: 50%
  }

  #service-separator {
    border: .2rem solid var(--lime);
    display: block
  }

  #gvn-contact-toggle {
    flex-direction: row;
    min-width: 48rem;
    font-size: 1.5rem
  }

  #gvn-contact-toggle .toggle-btn:first-child {
    border-radius: 2rem 0 0 2rem
  }

  #gvn-contact-toggle .toggle-btn:last-child {
    border-radius: 0 2rem 2rem 0
  }
}