.co-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.co-hero .shot{aspect-ratio:4/5;box-shadow:0 30px 60px -38px rgba(20,59,31,.5)}
@media(max-width:900px){ .co-hero{grid-template-columns:1fr} .co-hero .shot{max-width:24rem;margin-inline:auto} }

/* what it is built from */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1.25rem;margin-top:3rem}
.incl .card{padding:1.5rem 1.45rem}
.incl .when{
  font-size:var(--label);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sun-ink);display:block;margin-bottom:.7rem;
}
.on-dark .incl .when{color:var(--sun-glow)}
.incl h3{font-size:1.1rem;margin-bottom:.45rem}
.incl p{font-size:.93rem;color:var(--ink-2);margin:0}
.on-dark .incl p{color:var(--sage-glow)}

/* the arc of a programme */
.arc{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;margin-top:2.75rem;background:color-mix(in srgb,var(--sage-glow) 26%,transparent);border-radius:var(--r-card);overflow:hidden}
/* two columns on a phone leave a 22-character measure; one column reads */
@media(max-width:560px){ .arc{grid-template-columns:1fr} }
.arc-cell{background:var(--forest);padding:1.25rem 1.1rem}
.arc-cell .d{font-size:var(--label);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sage-glow);display:block;margin-bottom:.55rem}
.arc-cell .t{font-family:var(--display);font-size:1rem;color:var(--on-forest);line-height:1.35;display:block}
.arc-cell--on{background:color-mix(in srgb,var(--sun) 16%,var(--forest))}
.arc-cell--on .d{color:var(--sun-glow)}

.compare{margin-top:3rem;max-width:44rem}
.compare .keyrow{grid-template-columns:12rem minmax(0,1fr)}
@media(max-width:640px){ .compare .keyrow{grid-template-columns:1fr;gap:.3rem} }