/* Final visual refinement: a quieter, more consistent editorial system. */
:root {
  --gold: #c6a66b;
  --muted: #b4b2aa;
}

body {
  font-size: 15px;
  letter-spacing: .005em;
}

.site-header {
  height: 80px;
  padding-inline: 5vw;
  background: rgba(13, 14, 12, .9);
  backdrop-filter: blur(18px);
}

.brand-logo {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(198, 166, 107, .3);
}

.brand {
  gap: 12px;
  font-size: .9rem;
}

nav {
  gap: 30px;
}

nav a,
.nav-call {
  font-size: .7rem;
}

.hero {
  height: max(720px, 96vh);
}

.hero-content {
  width: min(720px, 88%);
  margin-top: 60px;
}

.hero h1 {
  max-width: 720px;
  margin: 24px 0 28px;
}

.hero-copy {
  max-width: 480px;
  font-size: 1rem;
}

.button {
  min-height: 50px;
  padding: 14px 20px;
}

.trust-bar {
  padding-inline: 6vw;
}

.trust-heading,
.trust-badge {
  min-height: 112px;
}

.trust-heading strong {
  font-size: 1.45rem;
}

.trust-badge {
  gap: 16px;
  padding-left: 30px;
}

.trust-badge svg {
  width: 36px;
  height: 36px;
}

.trust-badge strong {
  font-size: 1.12rem;
}

.statement {
  padding: 112px 9vw;
}

.statement > div > p {
  max-width: 620px;
}

.services {
  padding: 104px 5vw 112px;
}

.section-heading {
  margin-bottom: 52px;
}

.service-grid {
  border-color: rgba(243, 240, 233, .14);
}

.service-card,
.service-card.featured {
  min-height: 350px;
  padding: 30px 25px 34px;
  background: transparent;
  transform: none;
}

.service-card:hover {
  background: rgba(255, 255, 255, .035);
  transform: none;
}

.service-rule {
  width: 36px;
  height: 1px;
  margin: 42px 0 22px;
  background: var(--gold);
  transition: width .3s ease;
}

.service-card:hover .service-rule {
  width: 58px;
}

.service-card h3 {
  font-size: 1.45rem;
}

.service-card p {
  max-width: 280px;
  font-size: .85rem;
}

.washing {
  padding: 105px 5vw 112px;
}

.washing-heading {
  margin-bottom: 55px;
}

.compare-image {
  height: clamp(450px, 48vw, 620px);
}

.compare-image > span,
.washing-details figcaption {
  border: 1px solid rgba(255, 255, 255, .16);
}

.washing-details {
  margin-top: 42px;
}

.washing-details figure {
  height: 340px;
}

.materials-gallery {
  min-height: 960px;
}

.materials-content {
  padding: 90px 7vw;
}

.materials-intro {
  margin-bottom: 42px;
}

.material-list article {
  padding: 20px 0;
}

.contact {
  padding: 112px 5vw 108px;
}

.contact h2 {
  margin: 24px 0 42px;
}

.contact .phone {
  margin: 22px 0 0;
}

.contact-trust {
  gap: 12px;
  margin-top: 15px;
}

.contact-trust span {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-size: inherit;
}

.contact-trust i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

footer {
  padding-block: 38px;
  line-height: 1.7;
}

.marketing-credit img {
  width: 60px;
  height: 36px;
}

@media (max-width: 950px) {
  .site-header {
    height: 76px;
  }

  nav {
    top: 76px;
  }

  .service-card,
  .service-card.featured {
    min-height: 330px;
  }

  .materials-gallery {
    min-height: 870px;
  }
}

@media (max-width: 620px) {
  .site-header {
    height: 70px;
    padding-inline: 6vw;
  }

  nav {
    top: 70px;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
  }

  .hero {
    height: 760px;
    min-height: 720px;
  }

  .hero-content {
    margin-bottom: 60px;
  }

  .hero h1 {
    font-size: clamp(3.5rem, 17vw, 4.8rem);
  }

  .statement {
    padding: 80px 6vw;
  }

  .services {
    padding: 78px 6vw 84px;
  }

  .service-card,
  .service-card.featured {
    min-height: 310px;
    padding: 30px 20px;
  }

  .washing {
    padding: 78px 6vw 84px;
  }

  .compare-image {
    height: 440px;
  }

  .washing-details figure {
    height: 280px;
  }

  .materials-gallery {
    min-height: 750px;
  }

  .materials-content {
    padding: 70px 7vw 76px;
  }

  .contact {
    padding: 88px 6vw 84px;
  }

  .contact h2 {
    font-size: clamp(3rem, 15vw, 3.8rem);
  }
}