:root {
  --rose: #8f7d70;
  --rose-dark: #68584f;
}

.intro-brand {
  width: min(360px, 62vw);
  animation: introIn .9s ease both;
}

.intro-brand img {
  width: 100%;
  filter: invert(1);
}

.intro > i {
  margin-top: 230px;
}

.wordmark {
  gap: 13px;
}

.wordmark .monogram-box {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 5px 7px;
  border: 1px solid currentColor;
  font: inherit;
}

.wordmark .monogram-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
  transform: none;
}

.wordmark .wordmark-copy {
  display: flex;
  width: auto;
  height: auto;
  border: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: inherit;
}

.wordmark-copy b {
  font-size: .7rem;
  line-height: 1;
  letter-spacing: .19em;
}

.wordmark-copy small {
  font-size: .43rem;
  line-height: 1;
  letter-spacing: .3em;
  opacity: .82;
}

.hero-photo-main {
  background: #806957 url("assets/home-luxury-products-hero.png") center / cover no-repeat;
  animation: none;
}

.hero-products {
  display: none;
}

.hero-products figure {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: rgba(240, 226, 211, .75);
  box-shadow: 0 20px 55px rgba(28, 20, 16, .17);
}

.hero-products .hero-product-main {
  grid-row: 1 / 4;
}

.hero-products img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(.78) sepia(.08);
}

.hero-photo-detail {
  display: none;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(32, 25, 21, .86) 0%, rgba(32, 25, 21, .36) 47%, rgba(32, 25, 21, .08) 100%),
    linear-gradient(0deg, rgba(25, 19, 16, .62), transparent 54%);
}

.hero-trust {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
}

.hero-trust span:nth-child(2) { text-align: center; }
.hero-trust span:last-child { text-align: right; }

.craft .index,
.craft-grid span,
.contact .index {
  color: #e7d3c4;
}

@media (max-width: 900px) {
  .topbar .nav-actions > a {
    display: inline-flex;
  }

  .topbar .nav-actions {
    margin-left: auto;
    gap: 10px;
  }

  .hero-photo-main {
    background: #745d4d url("assets/home-luxury-products-hero.png") center / cover no-repeat;
  }

  .hero-products figure {
    box-shadow: 0 12px 30px rgba(28, 20, 16, .14);
  }

  .hero-products img {
    object-position: center;
  }

  .hero-shade {
    background:
      linear-gradient(90deg, rgba(32, 25, 21, .3), rgba(32, 25, 21, .08)),
      linear-gradient(0deg, rgba(25, 19, 16, .82) 0%, rgba(25, 19, 16, .62) 34%, transparent 72%);
  }

  .hero-trust {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 8px;
    font-size: .52rem;
  }

  .hero-trust span:nth-child(2) {
    display: block;
    text-align: center;
  }

  .hero-trust span:last-child {
    display: block;
    text-align: right;
  }
}

@media (max-width: 560px) {
  .topbar {
    padding-inline: 14px;
    gap: 8px;
  }

  .topbar .wordmark-copy {
    display: none;
  }

  .topbar .nav-actions > a,
  .topbar .bag-open {
    font-size: .61rem;
    letter-spacing: .075em;
  }

  .topbar .bag-count {
    width: 20px;
    height: 20px;
    margin-left: 2px;
  }

  .topbar .menu {
    width: 34px;
  }
}

@media (orientation: portrait), (max-aspect-ratio: 4 / 5) {
  .hero-photo-main {
    background-image: url("assets/home-luxury-products-hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.contact-form input,
.contact-form textarea {
  color: #2f2722;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(47, 39, 34, .62);
  opacity: 1;
}

.contact-form .form-note {
  color: rgba(47, 39, 34, .72);
}

.about-details {
  margin-top: 110px;
  padding-top: 105px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.about-details-head {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 7vw;
  align-items: end;
}

.about-details-head h2 {
  margin: 0;
  font-size: clamp(3.3rem, 5.8vw, 6.5rem);
  line-height: .94;
}

.about-details-head > p:last-child,
.about-closing p,
.about-services p {
  color: rgba(255, 255, 255, .7);
}

.about-details-head > p:last-child {
  font-size: 1.08rem;
  line-height: 1.75;
}

.about-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 75px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.about-services article {
  min-height: 300px;
  padding: 30px 28px;
  border-right: 1px solid rgba(255, 255, 255, .22);
}

.about-services article:first-child { padding-left: 0; }
.about-services article:last-child { border-right: 0; }
.about-services span { color: #e7d3c4; font-size: .68rem; letter-spacing: .14em; }
.about-services h3 { margin: 85px 0 14px; font-size: 1.85rem; line-height: 1.08; }
.about-services p { margin: 0; font-size: .92rem; }

.about-closing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  max-width: 980px;
  margin: 55px auto 0;
  text-align: center;
  font-size: 1.05rem;
}

@media (max-width: 900px) {
  .about-details-head,
  .about-closing {
    grid-template-columns: 1fr;
  }

  .about-details-head { align-items: start; }
  .about-details-head h2 { margin: 8px 0 22px; }
  .about-services { grid-template-columns: 1fr 1fr; margin-top: 50px; }
  .about-details { margin-top: 75px; padding-top: 70px; }
  .about-services article { min-height: 250px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .about-services article:nth-child(2) { border-right: 0; }
  .about-services article:nth-child(3),
  .about-services article:nth-child(4) { border-bottom: 0; }
  .about-services article:nth-child(3) { padding-left: 0; }
  .about-services h3 { margin-top: 55px; }
  .about-closing { padding-left: 0; gap: 8px; }
}

@media (max-width: 560px) {
  .about-services { grid-template-columns: 1fr; }
  .about-services article,
  .about-services article:first-child,
  .about-services article:nth-child(3) {
    min-height: auto;
    padding: 28px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
  }
  .about-services article:last-child { border-bottom: 0; }
  .about-services h3 { margin: 24px 0 10px; }
}
footer .footer-logo-link {
  display: block;
  width: 330px;
  max-width: 80vw;
}
footer .footer-logo-link .footer-logo-copy {
  display: block;
  width: 100%;
  height: auto;
}
footer .footer-header-logo {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 13px;
  color: #d7ccc3;
}
footer .footer-header-logo .footer-header-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 5px 7px;
  border: 1px solid currentColor;
}
footer .footer-header-logo .footer-header-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
}
footer .footer-header-logo .footer-header-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}
footer .footer-header-logo b {
  font-size: .7rem;
  line-height: 1;
  letter-spacing: .19em;
}
footer .footer-header-logo small {
  font-size: .43rem;
  line-height: 1;
  letter-spacing: .3em;
  opacity: .82;
}
