/* v1.6.20 – page-identity letterforms; preserve meaningful step numbers in text. */
body.gq-letter-coating .service-page-hero::before,
body.gq-letter-ppf .service-page-hero::before,
body.gq-letter-window-film .service-page-hero::before,
body.gq-letter-exterior .service-page-hero::before {
  position: absolute;
  content: "";
  top: 50%;
  right: max(5%, calc((100vw - 1180px)/2));
  z-index: 0;
  color: rgba(114,227,212,.075);
  font: 400 clamp(10rem, 24vw, 22rem)/1 Georgia, "Times New Roman", serif;
  letter-spacing: -.075em;
  transform: translateY(-36%);
  pointer-events: none;
  user-select: none;
}
body.gq-letter-coating .service-page-hero::before { content: "C"; }
body.gq-letter-ppf .service-page-hero::before { content: "P"; }
body.gq-letter-window-film .service-page-hero::before { content: "W"; }
body.gq-letter-exterior .service-page-hero::before { content: "D"; }
/* The letter is behind the text and the existing diamond ornament stays intact. */
body[class*="gq-letter-"] .service-page-hero > .wrap { position: relative; z-index: 1; }
/* Force the old oversized numbers to render as D even before the one-time DB migration runs. */
body.gq-letter-exterior .gq-exterior-section-index { font-size: 0; }
body.gq-letter-exterior .gq-exterior-section-index::before {
  content: "D";
  display: block;
  font: 400 clamp(6rem, 14vw, 12rem)/1 Georgia, serif;
}
/* A new main-menu item needs a little room on mid-size desktop screens. */
@media (min-width: 901px) and (max-width: 1200px) {
  .main-nav .menu { gap: clamp(10px, 1.4vw, 20px); }
  .main-nav .menu a { font-size: .72rem; }
  .custom-logo { max-width: 180px; }
  .brand { flex-shrink: 0; }
}
@media (max-width: 600px) {
  body[class*="gq-letter-"] .service-page-hero::before {
    font-size: clamp(9rem, 41vw, 13rem);
    right: -3%;
    top: 58%;
    color: rgba(114,227,212,.047);
  }
}

/* v1.6.21 – replace the pale numbers in coating product cards with the page letter C.
   Scope only to the live coating page; retain the underlying editorial product data. */
body.gq-letter-coating .gq-quartz-card .gq-quartz-code {
  font-size: 0 !important;
}
body.gq-letter-coating .gq-quartz-card .gq-quartz-code::before {
  content: "C";
  display: block;
  font: 400 clamp(4.3rem, 6vw, 5.4rem)/1 Georgia, "Times New Roman", serif;
  letter-spacing: -.06em;
  color: rgba(216, 221, 221, .055);
}
@media (max-width: 600px) {
  body.gq-letter-coating .gq-quartz-card .gq-quartz-code::before {
    font-size: 4.6rem;
  }
}