/* Prime Creation // Page 10 contact terminal // balanced document v6
   Contact is a normal scrollable document inside the viewport in either orientation.
   Copy and form share one canonical column while decorative motion remains behind them. */

html[data-prime-child-layout-authority="self"] body.prime-v2 #main[data-app-shell] > #contact.app-window,
html[data-prime-viewport-authority] body.prime-v2 #main[data-app-shell] > #contact.app-window,
body.prime-v2 #main[data-app-shell] > #contact.app-window{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:start!important;
  align-content:start!important;
  justify-content:center!important;
  column-gap:0!important;
  row-gap:clamp(.8rem,2vh,1.35rem)!important;
  width:100%!important;
  height:auto!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding-top:max(clamp(1rem,5vh,3.5rem),env(safe-area-inset-top))!important;
  padding-right:max(clamp(.8rem,3vw,2.6rem),env(safe-area-inset-right))!important;
  padding-bottom:var(--prime-page-bottom-clearance,5rem)!important;
  padding-left:max(clamp(.8rem,3vw,2.6rem),env(safe-area-inset-left))!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  overscroll-behavior-x:none!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-padding-block:clamp(.8rem,2vh,1.25rem) var(--prime-page-bottom-clearance,5rem)!important;
  touch-action:pan-y pinch-zoom!important;
  box-sizing:border-box!important;
}

body.prime-v2 #contact > div:first-child,
body.prime-v2 #contact > form{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  transform:none!important;
  translate:none!important;
  rotate:none!important;
  will-change:auto!important;
}

body.prime-v2 #contact > div:first-child{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:0!important;
  width:min(100%,34rem)!important;
  max-width:34rem!important;
  justify-self:center!important;
  align-self:start!important;
  padding:clamp(.25rem,1vw,.7rem)!important;
}

body.prime-v2 #contact .project-section-id{margin-bottom:.5rem!important}

body.prime-v2 #contact h2{
  max-width:10ch!important;
  margin:.48rem 0 0!important;
  font-size:clamp(2.4rem,5.4vw,5.2rem)!important;
  line-height:.88!important;
  text-wrap:balance!important;
}

body.prime-v2 #contact > div:first-child > .eyebrow{
  margin-top:.25rem!important;
  font-size:clamp(.54rem,1vw,.66rem)!important;
}

body.prime-v2 #contact > div:first-child > p:last-of-type{
  max-width:31rem!important;
  margin:.8rem 0 0!important;
  color:#c4d2da!important;
  font-size:clamp(.84rem,1.05vw,.98rem)!important;
  line-height:1.5!important;
}

body.prime-v2 #contact .text-link{
  display:inline-flex!important;
  align-items:center!important;
  margin:.35rem 0 0!important;
  line-height:1.1!important;
}

body.prime-v2 #contact #projectForm{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:.72rem!important;
  width:min(100%,34rem)!important;
  max-width:34rem!important;
  justify-self:center!important;
  align-self:start!important;
  margin:0!important;
  padding:clamp(.8rem,2vw,1.15rem)!important;
  border:1px solid rgba(151,228,255,.18)!important;
  border-radius:1rem!important;
  background:linear-gradient(160deg,rgba(6,22,33,.94),rgba(2,9,15,.97))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.045)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  box-sizing:border-box!important;
}

body.prime-v2 #contact #projectForm label{
  display:grid!important;
  gap:.38rem!important;
  min-width:0!important;
  margin:0!important;
  color:#cce4eb!important;
  font-size:.64rem!important;
  letter-spacing:.1em!important;
}

body.prime-v2 #contact #projectForm :is(input,textarea){
  width:100%!important;
  min-width:0!important;
  min-height:3rem!important;
  margin:0!important;
  padding:.74rem .84rem!important;
  border:1px solid rgba(178,231,247,.22)!important;
  border-radius:.72rem!important;
  background:rgba(7,25,37,.84)!important;
  color:#f3fdff!important;
  font-size:1rem!important;
  line-height:1.35!important;
  caret-color:#71eaff!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  box-sizing:border-box!important;
}

body.prime-v2 #contact #projectForm textarea{
  min-height:6.8rem!important;
  max-height:10rem!important;
  resize:vertical!important;
}

body.prime-v2 #contact #projectForm :is(input,textarea):focus{
  border-color:#70e7ff!important;
  box-shadow:0 0 0 3px rgba(70,220,255,.12),inset 0 0 22px rgba(58,218,255,.025)!important;
  outline:0!important;
}

body.prime-v2 #contact #projectForm .button[type="submit"]{
  width:100%!important;
  min-height:3.05rem!important;
  margin:.05rem 0 0!important;
  padding:.76rem .95rem!important;
  justify-self:stretch!important;
  border-radius:.78rem!important;
  font-size:.78rem!important;
  touch-action:manipulation!important;
}

body.prime-v2 #contact #projectForm > p{
  margin:0 .08rem!important;
  color:#829da7!important;
  font-size:.63rem!important;
  line-height:1.4!important;
  overflow-wrap:anywhere!important;
}
body.prime-v2 #contact #projectForm code{color:#bff4ff!important;font-size:inherit!important}

/* Copy and form do not move with spatial tilt. Motion remains a background layer. */
html[data-prime-spatial-authority] body.prime-v2 #contact[data-prime-spatial-scene="active"] [data-prime-spatial-layer]{
  rotate:none!important;
  translate:none!important;
  will-change:auto!important;
}

body.prime-v2 #contact .contact-orbit{
  position:fixed!important;
  z-index:0!important;
  right:clamp(-17rem,-18vw,-8rem)!important;
  bottom:clamp(-20rem,-24vh,-10rem)!important;
  width:clamp(27rem,48vw,42rem)!important;
  height:auto!important;
  aspect-ratio:1!important;
  opacity:.15!important;
  animation:none!important;
  transform:none!important;
  pointer-events:none!important;
}

/* Width-only density refinements keep orientation outside page ownership. */
@media(max-width:900px){
  html[data-prime-child-layout-authority="self"] body.prime-v2 #main[data-app-shell] > #contact.app-window,
  html[data-prime-viewport-authority] body.prime-v2 #main[data-app-shell] > #contact.app-window,
  body.prime-v2 #main[data-app-shell] > #contact.app-window{
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center!important;
    gap:clamp(.8rem,2vh,1.15rem)!important;
    padding-top:max(clamp(.7rem,2.2vh,1.25rem),env(safe-area-inset-top))!important;
    padding-right:max(.7rem,env(safe-area-inset-right))!important;
    padding-left:max(.7rem,env(safe-area-inset-left))!important;
  }

  body.prime-v2 #contact > div:first-child,
  body.prime-v2 #contact > form{
    width:min(100%,34rem)!important;
    max-width:34rem!important;
    justify-self:center!important;
  }

  body.prime-v2 #contact > div:first-child{padding:.1rem .2rem 0!important}
  body.prime-v2 #contact h2{font-size:clamp(2.15rem,11.8vw,3.55rem)!important}
  body.prime-v2 #contact > div:first-child > p:last-of-type{font-size:.84rem!important;line-height:1.42!important}
  body.prime-v2 #contact .text-link{margin-top:.3rem!important}
  body.prime-v2 #contact .contact-orbit{right:-18rem!important;bottom:-18rem!important;opacity:.1!important}
}

@media(max-width:390px){
  body.prime-v2 #contact #projectForm{padding:.7rem!important;gap:.62rem!important}
  body.prime-v2 #contact #projectForm :is(input,textarea){padding:.7rem .76rem!important}
  body.prime-v2 #contact #projectForm textarea{min-height:6.2rem!important}
}

/* Compact-height density applies identically to either orientation. */
@media(max-height:560px) and (pointer:coarse){
  html[data-prime-child-layout-authority="self"] body.prime-v2 #main[data-app-shell] > #contact.app-window,
  html[data-prime-viewport-authority] body.prime-v2 #main[data-app-shell] > #contact.app-window,
  body.prime-v2 #main[data-app-shell] > #contact.app-window{
    grid-template-columns:minmax(0,1fr)!important;
    gap:.9rem!important;
    padding-top:max(.6rem,env(safe-area-inset-top))!important;
  }
  body.prime-v2 #contact > div:first-child{padding:.15rem!important}
  body.prime-v2 #contact #projectForm{padding:.7rem!important;gap:.55rem!important}
  body.prime-v2 #contact h2{font-size:clamp(1.9rem,8vh,2.85rem)!important}
  body.prime-v2 #contact > div:first-child > p:last-of-type{font-size:.76rem!important;line-height:1.35!important}
  body.prime-v2 #contact .text-link{margin-top:.25rem!important}
  body.prime-v2 #contact #projectForm :is(input,textarea){min-height:2.7rem!important;padding:.58rem .7rem!important}
  body.prime-v2 #contact #projectForm textarea{min-height:4.8rem!important;max-height:7rem!important}
  body.prime-v2 #contact #projectForm .button[type="submit"]{min-height:2.7rem!important}
}

@media(prefers-reduced-motion:reduce){body.prime-v2 #contact .contact-orbit{animation:none!important}}