@charset "UTF-8";


*,
*:before,
*:after {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  background: #fff;
  color: #000;
}


body {
  font-family:
    "Jost",
    Futura,
    "Avenir Next",
    "Century Gothic",
    Arial,
    sans-serif;

  font-size: 10px;
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: 0.10em;
}


a {
  color: inherit;
  text-decoration: none;
}



/* =====================================
   HEADER
===================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  width: 100%;

  padding: 16px;

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  background:
    transparent;
}


.site-logo {
  display: inline-block;
  font-size: 10px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.site-nav {
  display:
    flex;

  gap:
    24px;

  font-size:
    10px;

  line-height:
    1.12;

  font-weight:
    400;

  letter-spacing:
    0.10em;
}


.site-nav a {
  white-space:
    nowrap;
}



/* =====================================
   PAGE
===================================== */

.contact-page {
  padding: 120px 0 120px;
  overflow-x: hidden;
  padding-top: clamp(48px, 4vh, 72px);
}



/* =====================================
   CONTACT LAYOUT
===================================== */

.contact-section {
  display:
    grid;

  grid-template-columns:
    120px
    1fr;

  gap:
    32px;

  padding:
    0
    16px;
}


.section-label {
  color:
    #000;
}


.section-label span {
  position: sticky;
  top: 72px;
  font-family: "Jost", Futura, "Avenir Next", "Century Gothic", Arial, sans-serif;
  font-size: 10px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}


.contact-content {
  width:
    min(100%, 720px);

  margin:
    0
    auto;

  padding-top:
    74px;
}



/* =====================================
   FORM
===================================== */

.form-group {
  margin-bottom:
    30px;
}


.form-label {
  display:
    block;

  margin-bottom:
    10px;

  font-size:
    10px;

  line-height:
    1.12;

  font-weight:
    550;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    geometricPrecision;
}


.form-control {
  display:
    block;

  width:
    100%;

  padding:
    12px
    0;

  border:
    0;

  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.55);

  border-radius:
    0;

  outline:
    none;

  background:
    transparent;

  font:
    inherit;

  font-size:
    12px;

  line-height:
    1.4;

  letter-spacing:
    0.08em;

  color:
    #000;

  appearance:
    none;
}


.form-control:focus {
  border-bottom-color:
    #000;
}


.form-control::placeholder {
  color:
    #999;

  opacity:
    1;
}


.form-message {
  min-height:
    180px;

  padding-top:
    12px;

  resize:
    vertical;
}



/* =====================================
   SUBMIT
===================================== */

.form-submit-wrap {
  margin-top:
    48px;
}


.form-submit {
  padding:
    11px
    18px
    10px;

  border:
    1px solid #000;

  border-radius:
    0;

  background:
    transparent;

  color:
    #000;

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    550;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

  cursor:
    pointer;

  transition:
    background
    0.2s
    ease,
    color
    0.2s
    ease;
}


.form-submit:hover {
  background:
    #000;

  color:
    #fff;
}



/* =====================================
   DIRECT CONTACT
===================================== */

.contact-direct {
  margin-top:
    88px;

  font-size:
    10px;

  line-height:
    1.5;
}


.contact-direct p {
  margin:
    0
    0
    4px;
}



/* =====================================
   TABLET
===================================== */

@media (max-width: 990px) {

  .contact-page {
    padding:
      80px
      0
      96px;
  }


  .contact-section {
    grid-template-columns:
      1fr;

    gap:
      16px;

    padding:
      0
      24px;
  }


  .section-label span {
    position:
      static;
  }


  .contact-content {
    margin:
      0;

    padding-top:
      56px;
  }

}



/* =====================================
   SMARTPHONE
===================================== */

@media (max-width: 767px) {

  .site-header {
    position:
      static;

    display:
      block;

    padding:
      16px
      14px;
  }


  .site-logo {
    display:
      block;

    margin:
      0
      0
      8px;
  }


  .site-nav {
    display:
      flex;

    flex-wrap:
      wrap;

    gap:
      0
      14px;
  }


  .contact-page {
    padding:
      44px
      0
      80px;
  }


  .contact-section {
    display:
      block;

    padding:
      0
      24px;
  }


  .section-label {
    margin-bottom:
      44px;
  }


  .section-label span {
    position:
      static;
  }


  .contact-content {
    width:
      100%;

    margin:
      0;

    padding-top:
      0;
  }


  .form-group {
    margin-bottom:
      28px;
  }


  .form-message {
    min-height:
      160px;
  }


  .form-submit-wrap {
    margin-top:
      40px;
  }


  .contact-direct {
    margin-top:
      72px;
  }

}

/* =====================================
   FORM STATUS / SPAM GUARD
===================================== */

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


.form-feedback {
  margin: 0;

  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.10em;
}


.form-feedback.is-error {
  color: #000;
}


.form-submit:disabled {
  opacity: 0.45;
  cursor: default;
}


.contact-direct a:hover {
  opacity: 0.45;
}