* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: "Archivo", sans-serif; color: var(--ink); background: var(--white); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .container { padding: 0 16px; } }

main section { padding-block: 112px; }
@media (max-width: 760px) { main section { padding-block: 64px; } }

.display {
  font-family: "Archivo Black", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

/* Hero */
.blog-hero {
  background: var(--ink) url("../../assets/blueprint-background.webp") center/cover;
  background-attachment: fixed;
  color: var(--white);
}
.blog-hero h1 { font-size: clamp(40px, 5vw, 72px); margin: 0 0 20px; }
.blog-hero p { max-width: 620px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.82); }

/* Grid */
.blog-grid-section { background: var(--white); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--white);
  box-shadow: 0 0 2px 0 rgba(10,15,28,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(10,15,28,.18); }

.post-card-img {
  height: 200px;
  background-position: center;
  background-size: cover;
}

.post-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }

.post-card-cat {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
  margin-bottom: 10px;
}

.post-card-title {
  font-family: "Archivo Black", sans-serif;
  font-size: 19px;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.2;
}

.post-card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: #5B6471;
  margin: 0 0 16px;
  flex: 1;
}

.post-card-meta {
  font-size: 12px;
  font-weight: 700;
  color: #5B6471;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* CTA — lives inside the light grid section (the FAQ band after it is dark) */
.blog-cta { text-align: center; margin-top: clamp(72px, 9vw, 120px); }
.blog-cta h2 { font-size: clamp(48px, 7vw, 96px); margin: 0 0 20px; color: var(--ink); }
.blog-cta p { font-size: 17px; color: #3a4254; margin: 0 0 32px; }
.blog-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 34px;
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tj-x-df2726{background-image:url('../../assets/speed-gauge.webp')}
.tj-x-9afe70{background-image:url('../../assets/google-search-plummers.webp')}
.tj-x-2eee2e{background-image:url('../../assets/messy-tech.webp')}
.tj-x-a2d90a{background-image:url('../../assets/electrician-hero.webp')}
.tj-x-b036f6{background-image:url('../../assets/websites-laptop-review.webp')}