.page-contact{
  --contact-glow-a: rgba(199,36,245,.34);
  --contact-glow-b: rgba(0,229,255,.20);
  --contact-line: rgba(242,237,230,.14);
  --contact-ink-deep: rgba(11,11,13,.72);
  position: relative;
  overflow-x: hidden;
  background: var(--bg-black);
  color: var(--cream);
  font-family: var(--font-body);
}

.page-contact .contact-hero{
  position: relative;
  min-height: clamp(540px, 84vh, 780px);
  display: flex;
  align-items: flex-end;
  padding: clamp(68px, 9vw, 104px) 18px 52px;
  isolation: isolate;
  overflow: hidden;
}

.page-contact .contact-hero__bg{
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-contact .contact-hero__bg img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: .38;
}

.page-contact .contact-hero__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,13,.58) 0%, rgba(11,11,13,.10) 40%, rgba(11,11,13,.94) 100%),
    radial-gradient(ellipse 62% 44% at 78% 16%, var(--contact-glow-a), transparent 68%),
    radial-gradient(ellipse 44% 36% at 10% 82%, var(--contact-glow-b), transparent 70%);
}

.page-contact .contact-hero__beam{
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  z-index: -1;
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events: none;
}

.page-contact .contact-hero__beam--a{
  width: 360px;
  height: 360px;
  background: rgba(199,36,245,.42);
  top: 8%;
  right: -12%;
  animation: contact-pulse-a 8s ease-in-out infinite alternate;
}

.page-contact .contact-hero__beam--b{
  width: 280px;
  height: 280px;
  background: rgba(0,229,255,.30);
  bottom: 5%;
  left: -9%;
  animation: contact-pulse-b 11s ease-in-out infinite alternate;
}

@keyframes contact-pulse-a{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(-44px, 30px, 0) scale(1.12); }
}

@keyframes contact-pulse-b{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(36px, -22px, 0) scale(1.08); }
}

.page-contact .contact-hero__inner{
  width: 100%;
}

.page-contact .contact-hero__crumbs{
  margin-bottom: 28px;
}

.page-contact .contact-hero__crumbs .breadcrumb{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--gray);
}

.page-contact .contact-hero__crumbs .breadcrumb__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-contact .contact-hero__crumbs .breadcrumb__item + .breadcrumb__item::before{
  content: "/";
  color: rgba(138,138,138,.55);
  margin-right: 8px;
}

.page-contact .contact-hero__crumbs .breadcrumb__link{
  color: var(--gray);
  text-decoration: none;
  transition: color 240ms var(--ease);
}

.page-contact .contact-hero__crumbs .breadcrumb__link:hover{
  color: var(--purple);
}

.page-contact .contact-hero__content{
  max-width: 920px;
}

.page-contact .contact-hero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: .22em;
  color: var(--blue);
  text-transform: uppercase;
}

.page-contact .contact-hero__kicker::before{
  content: "";
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), transparent);
}

.page-contact .contact-hero__title{
  margin: 0 0 20px;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(36px, 8vw, 62px);
  line-height: 1.06;
  letter-spacing: .01em;
  color: var(--cream);
  text-shadow: 0 0 36px rgba(199,36,245,.30), 0 2px 0 rgba(0,0,0,.45);
}

.page-contact .contact-hero__lead{
  max-width: 640px;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(242,237,230,.78);
}

.page-contact .chapter{
  padding: clamp(56px, 7vw, 88px) 0;
  position: relative;
}

.page-contact .chapter + .chapter{
  border-top: 1px solid rgba(255,255,255,.05);
}

.page-contact .page-container{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
  box-sizing: border-box;
}

.page-contact .chapter__top{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 34px;
}

.page-contact .chapter__number{
  display: block;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 96px);
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(176,105,60,.82);
  opacity: .65;
}

.page-contact .chapter__title{
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 42px);
  line-height: 1.12;
  color: var(--cream);
}

.page-contact .chapter__title::before{
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  background: var(--terracotta);
  transform: translateY(-2px) rotate(45deg);
}

.page-contact .chapter__lead{
  margin: 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray);
}

.page-contact .contact-channel__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.page-contact .contact-channel__card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px 26px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}

.page-contact .contact-channel__card--email{
  border-top: 3px solid var(--purple);
}

.page-contact .contact-channel__card--phone{
  border-top: 3px solid var(--blue);
}

.page-contact .contact-channel__card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,.42), 0 0 34px rgba(199,36,245,.10);
}

.page-contact .contact-channel__card--phone:hover{
  box-shadow: 0 18px 50px rgba(0,0,0,.42), 0 0 34px rgba(0,229,255,.14);
}

.page-contact .contact-channel__icon{
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: var(--purple);
  flex-shrink: 0;
  border: 1px solid rgba(199,36,245,.24);
}

.page-contact .contact-channel__card--phone .contact-channel__icon{
  color: var(--blue);
  border-color: rgba(0,229,255,.24);
}

.page-contact .contact-channel__icon svg{
  width: 26px;
  height: 26px;
}

.page-contact .contact-channel__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.page-contact .contact-channel__title{
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 22px;
  color: var(--cream);
}

.page-contact .contact-channel__desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray);
}

.page-contact .contact-channel__value{
  margin-top: 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,229,255,.32);
  transition: color 240ms var(--ease), border-color 240ms var(--ease), text-shadow 240ms var(--ease);
  word-break: break-all;
}

.page-contact .contact-channel__card--email .contact-channel__value{
  color: var(--purple);
  border-bottom-color: rgba(199,36,245,.32);
}

.page-contact .contact-channel__value:hover{
  color: var(--blue);
  border-bottom-color: var(--blue);
  text-shadow: 0 0 18px rgba(0,229,255,.35);
}

.page-contact .contact-channel__card--email .contact-channel__value:hover{
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.page-contact .contact-channel__phone-hint{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 12px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--pink);
  border: 1px solid rgba(255,44,136,.38);
  border-radius: 999px;
  background: rgba(255,44,136,.06);
  transition: box-shadow 240ms var(--ease), background 240ms var(--ease);
}

.page-contact .contact-channel__card--phone:hover .contact-channel__phone-hint{
  box-shadow: 0 0 22px rgba(255,44,136,.28);
  background: rgba(255,44,136,.12);
}

.page-contact .contact-promise__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.page-contact .contact-promise__main{
  padding: 28px 24px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 4px solid var(--moss);
}

.page-contact .contact-promise__lead-text{
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--cream);
}

.page-contact .contact-promise__main p{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(242,237,230,.82);
}

.page-contact .contact-promise__main p:last-child{
  margin-bottom: 0;
}

.page-contact .contact-promise__aside{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-contact .contact-promise__card{
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--bg-rock);
  border: 1px solid rgba(255,255,255,.06);
}

.page-contact .contact-promise__tag{
  display: inline-flex;
  padding: 3px 12px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--terracotta);
  border: 1px solid rgba(176,105,60,.36);
  border-radius: 999px;
  margin-bottom: 12px;
}

.page-contact .contact-promise__address{
  margin: 0;
  font-style: normal;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream);
}

.page-contact .contact-promise__tip{
  margin: 0;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray);
  border-left: 2px solid rgba(138,138,138,.30);
}

.page-contact .contact-reason__layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.page-contact .contact-reason__accordion{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-contact .contact-reason__accordion .accordion__item{
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  background: rgba(26,26,30,.7);
  overflow: hidden;
  transition: border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}

.page-contact .contact-reason__accordion .accordion__item:hover{
  border-color: rgba(199,36,245,.32);
  box-shadow: 0 0 28px rgba(199,36,245,.08);
}

.page-contact .contact-reason__accordion .accordion__trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: transparent;
  border: 0;
  color: var(--cream);
  font-family: var(--font-head);
  font-size: 19px;
  text-align: left;
  cursor: pointer;
  transition: color 240ms var(--ease);
}

.page-contact .contact-reason__accordion .accordion__trigger:hover,
.page-contact .contact-reason__accordion .accordion__trigger[aria-expanded="true"]{
  color: var(--blue);
}

.page-contact .contact-reason__accordion .accordion__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--purple);
  border: 1px solid rgba(199,36,245,.32);
  flex-shrink: 0;
  transition: transform 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease);
}

.page-contact .contact-reason__accordion .accordion__trigger[aria-expanded="true"] .accordion__icon{
  transform: rotate(45deg);
  color: var(--blue);
  border-color: rgba(0,229,255,.42);
}

.page-contact .contact-reason__accordion .accordion__panel-inner{
  padding: 0 20px 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray);
}

.page-contact .contact-reason__aside{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-contact .contact-reason__figure{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 44px rgba(0,0,0,.36);
}

.page-contact .contact-reason__figure::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(11,11,13,.72) 100%);
}

.page-contact .contact-reason__figure img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.page-contact .contact-reason__note{
  margin: 0;
  padding: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray);
}

.page-contact .contact-message__panel{
  position: relative;
  padding: clamp(24px, 4vw, 40px);
  background: rgba(26,26,30,.72);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
}

.page-contact .contact-message__panel::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--purple), var(--blue), transparent 72%);
}

.page-contact .contact-message__intro{
  margin-bottom: 24px;
}

.page-contact .contact-message__intro p{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray);
}

.page-contact .contact-message__fields{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.page-contact .contact-message__field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-contact .contact-message__field span{
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(242,237,230,.72);
}

.page-contact .contact-message__field input,
.page-contact .contact-message__field select,
.page-contact .contact-message__field textarea{
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 2px 8px;
  outline: none;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}

.page-contact .contact-message__field textarea{
  resize: vertical;
  min-height: 96px;
}

.page-contact .contact-message__field select{
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.page-contact .contact-message__field input:focus,
.page-contact .contact-message__field select:focus,
.page-contact .contact-message__field textarea:focus{
  border-color: var(--blue);
  box-shadow: 0 10px 20px -14px rgba(0,229,255,.5);
}

.page-contact .contact-message__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.page-contact .contact-message__hint{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray);
}

@media (min-width: 768px){
  .page-contact .contact-hero{
    padding-left: 28px;
    padding-right: 28px;
  }

  .page-contact .page-container{
    padding-left: 28px;
    padding-right: 28px;
  }

  .page-contact .chapter__top{
    flex-direction: row;
    align-items: flex-end;
    gap: 28px;
    margin-bottom: 42px;
  }

  .page-contact .chapter__number{
    flex-shrink: 0;
    font-size: clamp(72px, 10vw, 104px);
  }

  .page-contact .chapter__title-block{
    padding-bottom: 4px;
  }

  .page-contact .contact-channel__grid{
    grid-template-columns: 1.55fr 1fr;
    gap: 24px;
  }

  .page-contact .contact-channel__card{
    padding: 34px 30px 32px;
  }

  .page-contact .contact-promise__inner{
    grid-template-columns: 1.6fr 1fr;
    gap: 28px;
  }

  .page-contact .contact-reason__layout{
    grid-template-columns: 1.35fr 1fr;
    gap: 32px;
    align-items: start;
  }

  .page-contact .contact-message__fields{
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }

  .page-contact .contact-message__field--full{
    grid-column: 1 / -1;
  }
}

@media (min-width: 1120px){
  .page-contact .contact-hero{
    padding-left: 0;
    padding-right: 0;
    min-height: 80vh;
  }

  .page-contact .contact-hero__inner{
    padding-left: 44px;
    padding-right: 44px;
    max-width: 1280px;
    margin: 0 auto;
  }

  .page-contact .contact-hero__title{
    font-size: 68px;
  }

  .page-contact .contact-channel__grid{
    gap: 30px;
  }

  .page-contact .contact-reason__layout{
    grid-template-columns: 1.4fr .9fr;
  }

  .page-contact .contact-message__panel{
    padding: 44px 52px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-contact *,
  .page-contact *::before,
  .page-contact *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}