/* Hero backgrounds for the diary/calendar-style redesign, applied to the
   remaining service pages. Each body class below matches one page. */
.bcard-page .hero-placeholder { background-image: linear-gradient(90deg, rgba(8,24,44,.82), rgba(8,24,44,.18)), url('../image/services/landing/business-card-printing-services.jpg'); }
.brochure-page .hero-placeholder { background-image: linear-gradient(90deg, rgba(8,24,44,.82), rgba(8,24,44,.18)), url('../image/services/landing/brochure-printing-services.jpg'); }
.cartonbox-page .hero-placeholder { background-image: linear-gradient(90deg, rgba(8,24,44,.82), rgba(8,24,44,.18)), url('../image/services/landing/carton-box-printing-services.jpg'); }
.envelope-page .hero-placeholder { background-image: linear-gradient(90deg, rgba(8,24,44,.82), rgba(8,24,44,.18)), url('../image/services/landing/envelop-cover.jpg'); }
.flex-page .hero-placeholder { background-image: linear-gradient(90deg, rgba(8,24,44,.82), rgba(8,24,44,.18)), url('../image/services/landing/flex-printing.jpg'); }
.flyer-page .hero-placeholder { background-image: linear-gradient(90deg, rgba(8,24,44,.82), rgba(8,24,44,.18)), url('../image/services/landing/flyer-printing-services.jpg'); }
.indoorsign-page .hero-placeholder { background-image: linear-gradient(90deg, rgba(8,24,44,.82), rgba(8,24,44,.18)), url('../image/services/landing/indoor-signages.jpg'); }
.letterhead-page .hero-placeholder { background-image: linear-gradient(90deg, rgba(8,24,44,.82), rgba(8,24,44,.18)), url('../image/services/landing/letter-head.jpg'); }
.outdoorsign-page .hero-placeholder { background-image: linear-gradient(90deg, rgba(8,24,44,.82), rgba(8,24,44,.18)), url('../image/services/landing/outdoor-signages.jpg'); }

/* The shared .why-grid defaults to 6 columns (sized for the "Why Choose
   High5 Prints" block). The "quality checks" sections reuse the same
   card markup with only 4 items, so give those an explicit 4-column
   track instead of relying on the 6-column default stretching them thin. */
.why-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .why-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .why-grid--4 { grid-template-columns: 1fr; } }

/* Small "explore more" link row reused on the redesigned service pages. */
.related-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.related-links a { display: inline-flex; align-items: center; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); font-size: .88rem; font-weight: 600; text-decoration: none; transition: .2s ease; }
.related-links a:hover { border-color: var(--copper); color: var(--copper); transform: translateY(-2px); }