/* ==========================================================================
   BBranded · bbranded.html
   One screen: what BBranded makes and how to ask for the catalogue, beside
   the gold arch from BBranded's own stationery ("Our story" artwork), with
   the bee mark inside it. The arch is the page's only logo. Written by site-internal/build_brand_pages.py.
   ========================================================================== */

:root { --bb-gold: #deb343; }   /* sampled from the arch in "BBranded Our story -09" */

.bb-hero { padding-bottom: clamp(4rem, 9vw, 8rem); }
.bb-hero__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .bb-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}


.bb-list {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 2rem;
  border-top: 1px solid var(--line);
  max-width: 40rem;
}
@media (min-width: 600px) { .bb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bb-list li {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.bb-note {
  margin-top: 1.5rem;
  max-width: 48ch;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-soft);
}
.bb-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 2.75rem); }

/* The arch: flat across the top, a full half-circle at the foot. */
.bb-arch {
  position: relative;
  width: min(100%, 26rem);
  justify-self: center;
  aspect-ratio: 3 / 4;
  background: var(--bb-gold);
  border-radius: 0 0 999px 999px;
  display: grid;
  place-items: center;
}
.bb-arch img { width: 68%; height: auto; margin-top: 18%; }
@media (min-width: 900px) { .bb-arch { justify-self: end; } }
@media (max-width: 899px) { .bb-arch { width: min(56%, 15rem); order: -1; } }