/* ============================================================
   CONTENT — CPT archive / single (services, …). Fluid / rem.
   Reuses .svc-grid from home.css (also enqueued on these views).
   ============================================================ */
.site-main{ min-height:50vh; }

.content-hero{ padding-top:3.25rem; padding-bottom:1.5rem; }
.content-back{
  display:inline-block; margin-bottom:1rem;
  font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.06em;
  color:var(--brand-accent);
}
.content-back:hover{ color:var(--brand); }
.content-title{
  font-family:var(--font-display); font-weight:800; font-size:2.75rem; letter-spacing:-.012em;
  line-height:1.08; color:var(--text-primary); margin:0 0 .5rem;
}
.content-sub{ color:var(--text-secondary); font-size:1rem; line-height:1.55; max-width:44rem; margin:0; }

.content-list{ padding-top:1.5rem; padding-bottom:4.5rem; }

.content-hero-img{
  display:block; height:24rem; margin:1.25rem 0 0;
  background-size:cover; background-position:center; border-radius:0.625rem;
}
.content-body{
  max-width:48rem; padding-top:2rem; padding-bottom:1rem;
  font-size:1rem; line-height:1.75; color:var(--text-secondary);
}
.content-body h2, .content-body h3{ color:var(--text-primary); font-family:var(--font-display); }
.content-cta{ padding-top:1.5rem; padding-bottom:5rem; }

/* Colour range grid (archive-colour) */
.colour-card-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem 1.125rem; }
.colour-card{ display:flex; flex-direction:column; gap:0.35rem; }
.colour-chip{ display:block; height:6rem; border-radius:0.4rem; border:1px solid var(--line); }
.colour-card:hover .colour-chip{ outline:2px solid var(--brand-accent); outline-offset:2px; }
.colour-name{ font-family:var(--font-display); font-weight:700; font-size:0.8125rem; color:var(--text-primary); }
.colour-code{ color:var(--text-secondary); font-size:0.72rem; letter-spacing:.04em; }

@media (max-width:900px){
  .content-title{ font-size:2rem; }
  .content-hero-img{ height:16rem; }
  .colour-card-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:480px){
  .colour-card-grid{ grid-template-columns:repeat(2,1fr); }
}