/* ============================================================
   MANTA custom bikes — page layout (uses manta.css tokens)
   ============================================================ */

/* ---------- Hero ---------- */
.cb-hero {
  position: relative;
  min-height: 72vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.cb-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.cb-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 11, .88) 0%, rgba(10, 10, 11, .35) 45%, rgba(10, 10, 11, .25) 100%);
}
.cb-hero-content {
  position: relative; z-index: 1;
  padding-top: var(--s8);
  padding-bottom: var(--s7);
}
.cb-hero h1 { font-size: var(--text-h1); max-width: 14ch; }
.cb-hero-sub { color: var(--muted); margin-top: var(--s3); max-width: 44ch; }
.cb-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.cb-hero-ctas .btn { flex: 1 1 auto; }
@media (min-width: 700px) {
  .cb-hero { min-height: 64vh; }
  .cb-hero-ctas .btn { flex: 0 0 auto; min-width: 200px; }
}

/* ---------- Intro ---------- */
.cb-intro { text-align: center; }
.cb-intro h2 { margin-top: var(--s1); }
.cb-intro-copy { color: var(--muted); max-width: 52ch; margin: var(--s3) auto 0; }

/* ---------- Features ---------- */
.cb-features { display: grid; gap: var(--s3); }
@media (min-width: 700px) { .cb-features { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.cb-feature {
  padding: var(--s5);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--paper);
}
.cb-feature svg { width: 24px; height: 24px; color: var(--ink); margin-bottom: var(--s3); }
.cb-feature h3 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.cb-feature p { color: var(--muted); font-size: .9375rem; }

/* ---------- Frame colours ---------- */
.cb-colours {
  display: flex; gap: var(--s3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px 2px var(--s2);
}
.cb-colours::-webkit-scrollbar { display: none; }
.cb-colour {
  flex: 0 0 42%; scroll-snap-align: start;
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  overflow: hidden; background: var(--paper);
}
@media (min-width: 700px) { .cb-colour { flex-basis: 19%; } }
.cb-colour img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface); }
.cb-colour figcaption { padding: var(--s2) var(--s3) var(--s3); font-size: .8125rem; font-weight: 500; }

/* ---------- Closing CTA ---------- */
.cb-cta { padding: var(--s8) 0; margin-top: var(--s6); }
.cb-cta-inner { text-align: center; }
.cb-cta p { color: var(--muted); margin-top: var(--s3); }
.cb-cta .cb-hero-ctas { justify-content: center; }