/* CONTACT — Works visual language without project switcher or media stream. */
body.contact-page-body{
  --contact-left-column:50vw;
  --contact-right-column:50vw;
  margin:0;
  width:100%;
  min-height:100vh;
  background:var(--hm-bg-page,#000);
  color:var(--hm-text-primary,#fff);
}
body.contact-page-body *{box-sizing:border-box}

/* CONTACT background media.
   The fixed movie fills the viewport; a 70% black veil preserves text contrast. */
body.contact-page-body .contact-background{
  position:fixed;
  z-index:0;
  inset:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  pointer-events:none;
  background:#000;
}
body.contact-page-body .contact-background__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
body.contact-page-body .contact-background::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:rgba(0,0,0,.70);
  pointer-events:none;
}
body.contact-page-body .works-page{
  position:relative;
  z-index:1;
  width:100%;
  min-height:100vh;
  background:transparent;
}

body.contact-page-body .works-hero{
  position:absolute;
  inset:0;
  height:100vh;
  min-height:0;
  pointer-events:none;
}
body.contact-page-body .works-page-title{
  position:absolute!important;
  z-index:2147483647!important;
  top:50vh!important;
  left:var(--hm-inset-desktop)!important;
  margin:0!important;
  padding:0!important;
  width:max-content!important;
  color:var(--hm-text-primary,#fff)!important;
  font-family:var(--hm-font-en)!important;
  font-size:clamp(72px,9vw,160px)!important;
  font-weight:300!important;
  line-height:.8!important;
  letter-spacing:-.035em!important;
  white-space:nowrap!important;
  transform:translateY(-50%)!important;
  transform-origin:left center!important;
  pointer-events:none!important;
}
body.contact-page-body :is(.works-title-menu-toggle,.works-project-menu,.works-progress,.hm-global-progress){
  display:none!important;
}

body.contact-page-body .contact-content{
  position:relative;
  display:grid;
  grid-template-columns:var(--contact-left-column) var(--contact-right-column);
  width:100%;
  min-height:100vh;
  pointer-events:none;
}
body.contact-page-body .contact-spacer{
  min-width:0;
}
body.contact-page-body .contact-details{
  align-self:center;
  padding:0 var(--hm-inset-desktop) 0 0;
  pointer-events:auto;
}

body.contact-page-body .contact-row{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  column-gap:24px;
  align-items:center;
  height:37.8px;
  margin-left:0;
  padding:7px 0;
  border-top:0;
  text-align:left;
  opacity:0;
  transform:translate3d(0,42px,0);
  transition:
    opacity 720ms cubic-bezier(.2,.75,.2,1),
    transform 900ms cubic-bezier(.2,.75,.2,1);
  will-change:opacity,transform;
}
body.contact-page-body .contact-row.is-contact-row-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
body.contact-page-body .contact-row + .contact-row{
  border-top:0;
}
body.contact-page-body .contact-label{
  display:block;
  width:90px;
  padding-top:0;
  color:rgba(255,255,255,.80);
  font-family:var(--hm-font-en);
  font-size:12px;
  font-weight:300;
  line-height:1.4;
  letter-spacing:.07em;
  text-align:left;
}
body.contact-page-body .contact-value,
body.contact-page-body .contact-value a{
  color:var(--hm-text-primary,#fff);
  text-align:left;
  font-family:var(--hm-font-ko);
  font-size:16px;
  font-weight:300;
  line-height:1.26;
  letter-spacing:-.025em;
  text-decoration:none;
  word-break:keep-all;
}
body.contact-page-body .contact-value{
  align-self:center;
}
body.contact-page-body .contact-value a{
  display:inline;
  border-bottom:0;
  transition:color 180ms ease;
}
body.contact-page-body .contact-value a:hover,
body.contact-page-body .contact-value a:focus-visible{
  color:var(--hm-blue,#00A6ED);
  outline:0;
}
body.contact-page-body .contact-value--en,
body.contact-page-body .contact-value--en a{
  font-family:var(--hm-font-en);
  font-weight:400;
  letter-spacing:-.02em;
}

body.contact-page-body .contact-footer{
  display:flex;
  position:fixed;
  z-index:100;
  left:0;
  right:0;
  bottom:0;
  justify-content:space-between;
  gap:24px;
  padding:48px var(--hm-inset-desktop) 60px;
  border-top:1px solid var(--hm-line-faint,rgba(255,255,255,.14));
  color:var(--hm-text-muted,rgba(255,255,255,.42));
  font-family:var(--hm-font-en);
  font-size:12px;
  font-weight:300;
  line-height:1.5;
  letter-spacing:.04em;
}
body.contact-page-body .contact-footer a{
  color:inherit;
  text-decoration:none;
}
body.contact-page-body .contact-footer a:hover,
body.contact-page-body .contact-footer a:focus-visible{
  color:var(--hm-text-primary,#fff);
}

@media(max-width:780px){
  body.contact-page-body{
    --contact-left-column:1fr;
    --contact-right-column:1fr;
    min-height:100svh;
  }

  /* Mobile Contact owns a vertical flow.
     The desktop composition centers both the title and details at 50vh, which
     makes CONTACT collide with the LinkedIn row on narrow screens. Keep the
     title in the upper field and let details/footer participate in normal flow. */
  body.contact-page-body .works-hero{
    position:absolute;
    inset:0;
    height:auto;
    min-height:0;
  }
  body.contact-page-body .works-page-title{
    top:clamp(112px,18svh,156px)!important;
    left:var(--hm-inset-mobile)!important;
    font-size:clamp(48px,13vw,64px)!important;
    line-height:.9!important;
    transform:none!important;
    transform-origin:left top!important;
  }
  body.contact-page-body .contact-content{
    display:block;
    min-height:0;
    padding:clamp(244px,34svh,304px) 0 72px;
  }
  body.contact-page-body .contact-spacer{
    display:none;
  }
  body.contact-page-body .contact-details{
    position:relative;
    inset:auto;
    top:auto;
    padding:0 var(--hm-inset-mobile);
    transform:none;
  }
  body.contact-page-body .contact-row{
    grid-template-columns:1fr;
    gap:8px;
    height:auto;
    min-height:0;
    margin:0 0 30px;
    padding:0;
  }
  body.contact-page-body .contact-row:last-child{
    margin-bottom:0;
  }
  body.contact-page-body .contact-label{
    width:auto;
  }
  body.contact-page-body .contact-value,
  body.contact-page-body .contact-value a{
    font-size:16px;
    line-height:1.3;
    overflow-wrap:anywhere;
  }

  /* A fixed footer can cover the lower contact rows on short mobile viewports.
     Mobile therefore uses document flow while preserving the shared footer style. */
  body.contact-page-body .contact-footer{
    position:relative;
    z-index:2;
    left:auto;
    right:auto;
    bottom:auto;
    flex-direction:column;
    padding:40px var(--hm-inset-mobile) 48px;
  }
}

@media(prefers-reduced-motion:reduce){
  body.contact-page-body .contact-row{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}