* { box-sizing: border-box; }

body {
  margin: 0;
  background: #171717;
  color: #fff;
  font-family: system-ui, sans-serif;
}

.hero {
  display: grid;
  align-items: center;
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding: 2.5rem clamp(2.25rem, 11vw, 9rem);
  background:
    linear-gradient(90deg, #141414 0%, rgb(20 20 20 / 94%) 29%, rgb(20 20 20 / 76%) 43%, transparent 68%),
    url("parts.webp") right center / cover no-repeat;
}

.contact { max-inline-size: 30rem; }
.jm-logo {
  display: inline-block;
  inline-size: min(100%, clamp(7rem, 12vw, 13rem));
  block-size: auto;
  vertical-align: middle;
}
.logo {
  display: inline-block;
  inline-size: min(100%, clamp(10rem, 18vw, 16rem));
  block-size: auto;
  margin-right: 20px;
  vertical-align: middle;
}

h1 {
  margin: 1.6rem 0 1rem;
  font-size: clamp(4.25rem, 6vw, 5.25rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 1;
}

address {
  display: grid;
  justify-items: start;
  gap: .35rem;
  font-style: normal;
}

a {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-block-size: 44px;
  max-inline-size: 100%;
  color: inherit;
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

a:hover { text-decoration-thickness: 2px; }

svg {
  flex: 0 0 1.25rem;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: #ff6351;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 48rem) {
  .hero {
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 0;
    padding: 2.5rem 1.25rem 0;
    background: linear-gradient(#101010, #171717);
  }

  .logo {
    inline-size: min(100%, clamp(12rem, 52vw, 17rem));
  }

  h1 {
    font-size: clamp(3.75rem, 8vw, 4.25rem);
  }

  a {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
  }

  .hero::after {
    content: "";
    display: block;
    margin: .75rem -1.25rem 0;
    aspect-ratio: 1;
    background:
      linear-gradient(#171717, transparent 24%),
      url("parts-mobile.webp") center / cover no-repeat;
  }
}

form {
  display: grid;
  gap: .75rem;
  justify-items: start;
  max-inline-size: 22rem;
}

.cf-turnstile { inline-size: 100%; }

button {
  min-block-size: 44px;
  padding: .65rem 1rem;
  border: 1px solid #ff6351;
  border-radius: .3rem;
  background: #a51e14;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button:hover { background: #8e190f; }

button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 23rem) {
  .hero { padding-inline: .75rem; }
  .hero::after { margin-inline: -.75rem; }
}