/* J&J overrides on top of the Praya-derived styles.css */

/* No hero-logo animation on J&J: the header logo is always visible */
.header .logo { opacity: 1; transform: none; }
.logo img { height: 44px; }
.footer-logo { max-width: 220px; height: auto; }

/* Hero headline is words, not a logo, so it gets its own scale */
.jj-hero-title {
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.92;
  max-width: none;
}

.jj-more { margin-top: var(--space-md); }

@media (max-width: 480px) {
  .logo img { height: 36px; }
}

/* Six materials read as two rows of three, not 4 + 2 */
@media (min-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Grid children may shrink below their content (stops a 4px phone overflow on Contact) */
.contact-grid > * { min-width: 0; }
.contact-link { overflow-wrap: anywhere; }

/* Phone: the scroll hint collides with the stacked buttons */
@media (max-width: 767px) {
  .hero-scroll { display: none; }
}

/* Home: the four services from the sign (Regrind, Compound, Transport, Storage) */
@media (min-width: 640px) { .services-grid.jj-four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services-grid.jj-four { grid-template-columns: repeat(4, 1fr); } }

/* Typeface: Barlow Condensed (display) + Barlow (body), replacing Praya's Bebas Neue / Space Grotesk */
h1, h2, h3, h4, h5, h6,
.page-hero-title, .section-title, .service-title, .stat-number, .value-number,
.cta-title, .mission-quote, .service-number, .service-detail-title, .nav.is-open .nav-list a {
  font-weight: 700;
  letter-spacing: 0.005em;
}
h1, .page-hero-title, .jj-hero-title { line-height: 0.95; }

/* Brand lockup: the recycling mark from the original logo + the name set in type */
.jj-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.jj-brand img { height: 40px; width: 40px; }
.jj-brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1;
}
.jj-brand--footer { margin-bottom: var(--space-sm); }
.jj-brand--footer img { height: 48px; width: 48px; }
.jj-brand--footer span { font-size: 1.9rem; }
@media (max-width: 480px) {
  .jj-brand img { height: 34px; width: 34px; }
  .jj-brand span { font-size: 1.35rem; }
}

/* Phone: the wide-tracked hero tag wraps; tighten it */
@media (max-width: 480px) {
  .hero-tag { letter-spacing: 0.12em; font-size: 0.7rem; }
}

/* <picture> wrappers must fill the hero boxes like the bare <img> did */
.hero-bg picture, .page-hero-bg picture { position: absolute; inset: 0; display: block; }

/* 404: the CTA block fills the screen under the fixed header */
.jj-404 { min-height: 80vh; display: flex; align-items: center; padding-top: calc(var(--header-height) + var(--space-lg)); }
.jj-404 .cta-actions .btn { min-width: 240px; justify-content: center; text-align: center; }