/* Closing call-to-action band.
   Lived in pages/home.css until it turned out ten other pages use it too
   (about, testimonials, every blog post) and never load that stylesheet —
   so it rendered completely unstyled there. Shared component now. */
.cta-band{
  background:var(--primary-darker);
  color:var(--cream);
  padding:var(--sp-12) 0;
}
@media (min-width:768px){.cta-band{padding:var(--sp-16) 0}}

.cta-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6);
  align-items:center;
}
@media (min-width:768px){
  .cta-inner{grid-template-columns:1.4fr auto;gap:var(--sp-8)}
}

.cta-inner h2{
  color:var(--cream);
  margin:0 0 var(--sp-3);
  font-size:clamp(1.5rem,3vw,2.25rem);
  letter-spacing:-.028em;
}
.cta-inner p{
  color:rgba(250,246,238,.8);
  margin:0;
  max-width:52ch;
  line-height:1.6;
}

.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
}
@media (max-width:520px){
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{width:100%}
}