.page-contact{
  --page-space: 1.25rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  line-height: 1.6;
}

.page-contact .contact-hero{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 480px;
  padding: 7rem 0 5.5rem;
  background: var(--main);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.page-contact .contact-hero__map{
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  z-index: -2;
}

.page-contact .contact-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,31,68,.95) 0%, rgba(10,31,68,.78) 40%, rgba(10,31,68,.35) 100%);
  z-index: -1;
}

.page-contact .contact-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.9), transparent 92%);
  mask-image: linear-gradient(to right, rgba(0,0,0,.9), transparent 92%);
  z-index: -1;
  pointer-events: none;
}

.page-contact .contact-hero__shard{
  position: absolute;
  right: -9rem;
  top: 20%;
  width: 28rem;
  height: 11rem;
  background: var(--accent);
  border: 3px solid rgba(255,255,255,.35);
  transform: rotate(-13deg);
  opacity: .9;
  z-index: -1;
}

.page-contact .contact-hero__glyph{
  position: absolute;
  right: 1%;
  bottom: -.18em;
  font-family: var(--heading-font);
  font-size: clamp(6rem, 24vw, 17rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.22);
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

.page-contact .contact-hero__inner{
  position: relative;
  z-index: 1;
  width: 100%;
}

.page-contact .contact-breadcrumb{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-family: var(--mono-font);
  font-size: .75rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.65);
  margin-bottom: 2.2rem;
}

.page-contact .contact-breadcrumb a{
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

.page-contact .contact-breadcrumb__sep{
  color: rgba(255,255,255,.4);
}

.page-contact .contact-hero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--mono-font);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.page-contact .contact-hero__eyebrow::before{
  content: "";
  width: 2.4rem;
  height: 3px;
  background: var(--accent);
}

.page-contact .contact-hero__title{
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(2.8rem, 7.5vw, 5.4rem);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: none;
  margin: 0 0 1.2rem;
  color: var(--white);
}

.page-contact .contact-hero__subtitle{
  max-width: 36rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255,255,255,.88);
}

.page-contact .contact-cards{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.5rem;
  margin-top: -3rem;
  margin-bottom: 2rem;
}

.page-contact .contact-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-hard);
  padding: 2rem 1.5rem 1.6rem;
  transition: box-shadow .2s ease;
}

.page-contact .contact-card:hover{
  box-shadow: 8px 8px 0 rgba(10,31,68,.2);
}

.page-contact .contact-card--business{
  border-top: 8px solid var(--accent);
}

.page-contact .contact-card__no{
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  padding: .25rem .5rem;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--gray);
  background: var(--paper);
  border: 1px solid var(--silver);
}

.page-contact .contact-card__icon{
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.1rem;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(10,31,68,.12);
}

.page-contact .contact-card__icon svg{
  display: block;
}

.page-contact .contact-card__title{
  margin: 0 0 .55rem;
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--main);
}

.page-contact .contact-card__desc{
  flex: 1 0 auto;
  margin: 0 0 1rem;
  font-size: .95rem;
  color: var(--gray);
  line-height: 1.7;
}

.page-contact .contact-card__link{
  display: inline-block;
  width: fit-content;
  font-family: var(--mono-font);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--main);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding: 0 0 2px;
  margin-top: .15rem;
  word-break: break-all;
}

.page-contact .contact-card__link:hover{
  background: rgba(255,107,53,.14);
}

.page-contact .contact-card__meta{
  margin: .7rem 0 0;
  font-size: .82rem;
  color: var(--gray);
}

.page-contact .contact-card__block{
  margin-bottom: .9rem;
}

.page-contact .contact-card__caption{
  display: block;
  margin-bottom: .2rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
}

.page-contact .contact-card__link--tel{
  font-size: 1.55rem;
  letter-spacing: .02em;
  border-bottom-width: 3px;
}

.page-contact .contact-card__addr{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--main);
}

.page-contact .contact-card__note{
  margin: auto 0 0;
  padding-top: .8rem;
  border-top: 1px dashed var(--silver);
  font-size: .82rem;
  color: var(--gray);
}

.page-contact .contact-card__hours{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  margin: .85rem 0 0;
  padding: .45rem .7rem;
  font-size: .85rem;
  font-weight: 700;
  color: #0b7a5b;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.45);
}

.page-contact .contact-card__hours-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--trend-green);
  box-shadow: 0 0 0 3px rgba(16,185,129,.22);
  flex: 0 0 auto;
}

.page-contact .contact-card__img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(10,31,68,.14);
  margin: .9rem 0 0;
}

.page-contact .contact-card__more{
  display: inline-block;
  margin-top: .9rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--main);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.page-contact .contact-card__more:hover{
  border-bottom-color: var(--accent);
}

.page-contact .contact-form-panel{
  padding: 4rem 0 3.5rem;
}

.page-contact .contact-form-panel__head{
  max-width: 680px;
  margin-bottom: 2.25rem;
}

.page-contact .contact-form-panel__title{
  margin: .9rem 0 .6rem;
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.05;
  color: var(--main);
}

.page-contact .contact-form-panel__intro{
  margin: 0;
  font-size: .95rem;
  color: var(--gray);
  line-height: 1.7;
}

.page-contact .contact-form-panel__intro a{
  color: var(--main);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

.page-contact .contact-form-panel__intro a:hover{
  background: rgba(255,107,53,.14);
}

.page-contact .contact-form-block{
  display: grid;
  gap: 1.2rem;
  padding: 1.5rem;
  background: var(--white);
  border: 3px dashed var(--ink);
  box-shadow: var(--shadow-hard);
}

.page-contact .contact-form-row{
  display: grid;
  gap: .45rem;
}

.page-contact .contact-form-field__label{
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--main);
}

.page-contact .contact-form-field__input,
.page-contact .contact-form-field__textarea{
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  padding: .85rem 1rem;
  font-family: var(--body-font);
  font-size: 1rem;
  color: var(--ink);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.page-contact .contact-form-field__input:focus,
.page-contact .contact-form-field__textarea:focus{
  outline: none;
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(255,107,53,.25);
}

.page-contact .contact-form-field__textarea{
  resize: vertical;
}

.page-contact .contact-form-row--actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .4rem;
}

.page-contact .contact-form__send{
  display: inline-block;
  border-radius: 12px;
  background: var(--accent);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-accent);
  padding: .8rem 1.4rem;
  font-weight: 800;
  color: var(--white);
  text-decoration: none;
  transition: box-shadow .2s ease;
}

.page-contact .contact-form__send:hover{
  box-shadow: 8px 8px 0 rgba(255,107,53,.32);
}

.page-contact .contact-form__note{
  margin: 0;
  font-size: .85rem;
  color: var(--gray);
}

@media (min-width: 720px){
  .page-contact .contact-cards{
    grid-template-columns: repeat(2, 1fr);
  }

  .page-contact .contact-card--phone{
    grid-column: 1 / -1;
  }

  .page-contact .contact-form-block{
    grid-template-columns: repeat(2, 1fr);
  }

  .page-contact .contact-form-row--wide{
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px){
  .page-contact .contact-hero{
    min-height: 520px;
  }

  .page-contact .contact-cards{
    grid-template-columns: repeat(3, 1fr);
    margin-top: -4rem;
  }

  .page-contact .contact-card--business,
  .page-contact .contact-card--support,
  .page-contact .contact-card--phone{
    grid-column: auto;
  }

  .page-contact .contact-form-panel{
    padding: 5rem 0 4rem;
  }
}