@font-face {
  font-family: "Overdrive";
  src: local("Overdrive"), url("Overdrive-Sunset.woff2") format("woff2");
}

@font-face {
  font-family: "GoodTiming";
  src: local("GoodTiming"), url("good-timing-rg.woff2") format("woff2");
}

.uil--phone {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.44 13c-.22 0-.45-.07-.67-.12a9.4 9.4 0 0 1-1.31-.39a2 2 0 0 0-2.48 1l-.22.45a12.2 12.2 0 0 1-2.66-2a12.2 12.2 0 0 1-2-2.66l.42-.28a2 2 0 0 0 1-2.48a10 10 0 0 1-.39-1.31c-.05-.22-.09-.45-.12-.68a3 3 0 0 0-3-2.49h-3a3 3 0 0 0-3 3.41a19 19 0 0 0 16.52 16.46h.38a3 3 0 0 0 2-.76a3 3 0 0 0 1-2.25v-3a3 3 0 0 0-2.47-2.9m.5 6a1 1 0 0 1-.34.75a1.05 1.05 0 0 1-.82.25A17 17 0 0 1 4.07 5.22a1.1 1.1 0 0 1 .25-.82a1 1 0 0 1 .75-.34h3a1 1 0 0 1 1 .79q.06.41.15.81a11 11 0 0 0 .46 1.55l-1.4.65a1 1 0 0 0-.49 1.33a14.5 14.5 0 0 0 7 7a1 1 0 0 0 .76 0a1 1 0 0 0 .57-.52l.62-1.4a14 14 0 0 0 1.58.46q.4.09.81.15a1 1 0 0 1 .79 1Z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.uil--instagram {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.34 5.46a1.2 1.2 0 1 0 1.2 1.2a1.2 1.2 0 0 0-1.2-1.2m4.6 2.42a7.6 7.6 0 0 0-.46-2.43a4.9 4.9 0 0 0-1.16-1.77a4.7 4.7 0 0 0-1.77-1.15a7.3 7.3 0 0 0-2.43-.47C15.06 2 14.72 2 12 2s-3.06 0-4.12.06a7.3 7.3 0 0 0-2.43.47a4.8 4.8 0 0 0-1.77 1.15a4.7 4.7 0 0 0-1.15 1.77a7.3 7.3 0 0 0-.47 2.43C2 8.94 2 9.28 2 12s0 3.06.06 4.12a7.3 7.3 0 0 0 .47 2.43a4.7 4.7 0 0 0 1.15 1.77a4.8 4.8 0 0 0 1.77 1.15a7.3 7.3 0 0 0 2.43.47C8.94 22 9.28 22 12 22s3.06 0 4.12-.06a7.3 7.3 0 0 0 2.43-.47a4.7 4.7 0 0 0 1.77-1.15a4.85 4.85 0 0 0 1.16-1.77a7.6 7.6 0 0 0 .46-2.43c0-1.06.06-1.4.06-4.12s0-3.06-.06-4.12M20.14 16a5.6 5.6 0 0 1-.34 1.86a3.06 3.06 0 0 1-.75 1.15a3.2 3.2 0 0 1-1.15.75a5.6 5.6 0 0 1-1.86.34c-1 .05-1.37.06-4 .06s-3 0-4-.06a5.7 5.7 0 0 1-1.94-.3a3.3 3.3 0 0 1-1.1-.75a3 3 0 0 1-.74-1.15a5.5 5.5 0 0 1-.4-1.9c0-1-.06-1.37-.06-4s0-3 .06-4a5.5 5.5 0 0 1 .35-1.9A3 3 0 0 1 5 5a3.1 3.1 0 0 1 1.1-.8A5.7 5.7 0 0 1 8 3.86c1 0 1.37-.06 4-.06s3 0 4 .06a5.6 5.6 0 0 1 1.86.34a3.06 3.06 0 0 1 1.19.8a3.1 3.1 0 0 1 .75 1.1a5.6 5.6 0 0 1 .34 1.9c.05 1 .06 1.37.06 4s-.01 3-.06 4M12 6.87A5.13 5.13 0 1 0 17.14 12A5.12 5.12 0 0 0 12 6.87m0 8.46A3.33 3.33 0 1 1 15.33 12A3.33 3.33 0 0 1 12 15.33'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.uil--envelope-alt {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3M5 6h14a1 1 0 0 1 1 1l-8 4.88L4 7a1 1 0 0 1 1-1m15 11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9.28l7.48 4.57a1 1 0 0 0 1 0L20 9.28Z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

:root {
  --system-font: system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--system-font);
  background-color: hsl(0, 0%, 88%);
  margin: 0;
}

.max-width {
  width: 100%;
  max-width: 1500px;
  margin: auto;
  padding: 0 16px;
}

header {
  position: absolute;
  z-index: 1;
  padding: 16px 0;
}

header address a {
  align-items: center;
  font-size: calc(24 / 16 * 1rem);
}

header address a :nth-child(2) {
  display: none;
}

footer {
  background-color: black;
  padding: 32px 0;
}

footer .max-width {
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

header,
footer {
  width: 100%;
  color: white;
}

header .max-width,
footer .max-width {
  display: flex;
  justify-content: space-between;
}

header address,
footer address {
  display: flex;
  gap: 16px;
}

footer address {
  flex-direction: column;
  align-items: center;
}

address {
  font-style: normal;
}

address a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: hsl(0, 0%, 90%);
}

address a:hover {
  color: hsl(0, 0%, 100%);
  text-decoration: underline;
}

.logo {
  font-family: "GoodTiming", sans-serif;
}

.logo :nth-child(1) {
  font-family: "Overdrive", sans-serif;
  font-size: calc(32 / 16 * 1em);
}

.logo :nth-child(2) {
  font-size: calc(40 / 16 * 1em);
}

.logo :nth-child(3) {
  font-size: calc(9 / 16 * 1em);
  margin-top: calc(-16 / 16 * 1em);
  text-align: right;
}

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  color: white;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: 24px;
  left: calc(50% - 20px);
  font-size: 3rem;
  transform: scale(1.8, 1);
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.29 11.46a1 1 0 0 0 1.42 0l3-3A1 1 0 1 0 14.29 7L12 9.34L9.71 7a1 1 0 1 0-1.42 1.46Zm3 1.08L12 14.84l-2.29-2.3A1 1 0 0 0 8.29 14l3 3a1 1 0 0 0 1.42 0l3-3a1 1 0 0 0-1.42-1.42Z'/%3E%3C/svg%3E");
  color: hsla(0, 0%, 100%, 0.6);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero hgroup {
  position: absolute;
  inset: 0;
  background: linear-gradient(hsla(0, 0%, 0%, 0.9), hsla(0, 0%, 0%, 0.3));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: clamp(2rem, 2rem + 2vw, 5rem);
}

hgroup em {
  font-size: clamp(1.8rem, 1rem + 2vw, 2.5rem);
  margin-top: clamp(-4rem, -1rem - 2vw, -2rem);
}

h2.max-width {
  font-size: calc(40 / 16 * 1rem);
  margin: 40px auto;
  text-align: center;
}

article > :nth-child(1) {
  position: relative;
  width: 100%;
  height: 50svh;
}

article > :nth-child(1) img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

article > :nth-child(2) {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

article > :nth-child(2) label {
  cursor: pointer;
  color: #a3a3a3;
  font-size: calc(20 / 16 * 1rem);
  padding: 0 12px;
}

article > :nth-child(2) label:hover {
  color: #717171;
}

article input:checked + h3 {
  color: black;
}

article > :nth-child(2) label input {
  position: absolute;
  left: -100vw;
}

article > :nth-child(2) h2 {
  display: none;
}

#polish {
  object-position: 95% 75%;
}

#paint {
  object-fit: 50% 50%;
}

#detailing {
  object-position: 20% 20%;
}

#headlamp {
  object-position: 100% 100%;
}

@media (min-width: 750px) {
  .hero {
    height: 70svh;
  }

  .hero::after {
    display: none;
  }

  article {
    margin: 80px 0;
    display: flex;
    align-items: center;
  }

  article > :nth-child(1) {
    width: 50%;
    height: max(550px, 60svh);
    clip-path: polygon(
      calc(100% - 50px) 0,
      100% calc(0% + 50px),
      100% calc(100% - 50px),
      calc(100% - 50px) 100%,
      0 100%,
      0% 60%,
      0 0
    );
  }

  article > :nth-child(2) {
    width: 50%;
    max-width: 1000px;
  }

  article > :nth-child(2) h3 {
    margin-bottom: 20px;
  }

  header address a :nth-child(2) {
    display: block;
    font-size: 1rem;
  }

  footer .max-width {
    flex-direction: row;
  }

  footer address {
    flex-direction: row;
    margin-left: auto;
  }

  h2.max-width {
    display: none;
  }

  article > :nth-child(2) h2 {
    display: block;
    font-size: 3rem;
    margin-bottom: 40px;
  }
}