/* =====================================================================
   "Our clinics and classes" (24/09/2026, client priority 3a): one shared
   related-links block near the foot of each clinic and class page, plus the
   classes row under the homepage specialists band. Labels follow the menu
   (decision D4). Self-contained: soft palette, no dependency on page CSS.
   ===================================================================== */
html body section.bmb-cc{
  --cc-plum:#553f63; --cc-plum-2:#7a6390; --cc-ink:#3f3346; --cc-body:#62576a;
  --cc-lav:#f3edf7; --cc-lav-2:#e7ddef; --cc-mist:#faf7fc;
  display:block; margin:0 !important; padding:clamp(3rem,6vw,4.75rem) clamp(1.25rem,6vw,5rem) !important;
  background:var(--cc-mist) !important; border-top:1px solid var(--cc-lav-2); color:var(--cc-body) !important;
  text-align:left; font-family:inherit;
}
html body section.bmb-cc .bmb-cc-inner{ max-width:1080px; margin:0 auto; }
html body section.bmb-cc h2.bmb-cc-title{
  margin:0 0 .5rem !important; padding:0 !important; max-width:none !important;
  color:var(--cc-plum) !important; font-family:"Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size:clamp(1.6rem,2.6vw,2.2rem) !important; font-weight:500 !important; font-style:normal !important;
  line-height:1.2 !important; letter-spacing:-.01em !important; text-align:left !important; text-transform:none !important;
}
html body section.bmb-cc p.bmb-cc-lead{ margin:0 0 2rem !important; max-width:none !important; color:var(--cc-body) !important; font-size:1rem !important; line-height:1.6 !important; }
html body section.bmb-cc .bmb-cc-groups{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem clamp(1.5rem,4vw,3.5rem); }
html body section.bmb-cc p.bmb-cc-label{
  margin:0 0 .35rem !important; color:var(--cc-plum-2) !important; font-size:.74rem !important; font-weight:700 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important; line-height:1.4 !important;
}
html body section.bmb-cc ul.bmb-cc-list{ list-style:none !important; margin:0 !important; padding:0 !important; border-top:1px solid var(--cc-lav-2); }
html body section.bmb-cc ul.bmb-cc-list > li{ margin:0 !important; padding:0 !important; border-bottom:1px solid var(--cc-lav-2); list-style:none !important; }
html body section.bmb-cc ul.bmb-cc-list > li::before{ content:none !important; display:none !important; }
html body section.bmb-cc ul.bmb-cc-list a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:48px; padding:.7rem .15rem;
  color:var(--cc-ink) !important; background:transparent !important; font-size:1.02rem !important; font-weight:500 !important;
  line-height:1.4 !important; text-decoration:none !important; border:0 !important; box-shadow:none !important;
  transition:color .18s ease, padding .18s ease;
}
html body section.bmb-cc ul.bmb-cc-list a::after{ content:"\2192"; flex:none; color:var(--cc-plum-2); font-size:1rem; transition:transform .18s ease; }
html body section.bmb-cc ul.bmb-cc-list a:hover, html body section.bmb-cc ul.bmb-cc-list a:focus-visible{ color:var(--cc-plum) !important; padding-left:.4rem; }
html body section.bmb-cc ul.bmb-cc-list a:hover::after, html body section.bmb-cc ul.bmb-cc-list a:focus-visible::after{ transform:translateX(3px); }
html body section.bmb-cc ul.bmb-cc-list a:focus-visible{ outline:2px solid var(--cc-plum-2); outline-offset:2px; }
/* hub pages (main.preg) sit in a narrower column: show the block as a rounded card lined up with the
   consultation card above it, rather than a square-cornered strip */
html body main.preg > section.bmb-cc{
  margin:0 clamp(1.4rem,4vw,2.2rem) clamp(2.8rem,5vw,4rem) !important; border:1px solid var(--cc-lav-2); border-radius:20px;
  padding:clamp(1.8rem,4vw,3rem) clamp(1.4rem,4vw,2.6rem) !important;
}
@media (max-width:720px){
  html body section.bmb-cc .bmb-cc-groups{ grid-template-columns:1fr; gap:1.75rem; }
}
/* clinic and class pages in the client's design (main.proto-page / main.proto-sleep): line the block up
   with the page's own left edge (7vw, max 8rem) instead of a narrower centred column that sat 80px in */
@media (min-width:761px){
  html body main:is(.proto-page, .proto-sleep) > section.bmb-cc{ padding-left:clamp(1.35rem,7vw,8rem) !important; padding-right:clamp(1.35rem,7vw,8rem) !important; }
  html body main:is(.proto-page, .proto-sleep) > section.bmb-cc .bmb-cc-inner{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  html body section.bmb-cc ul.bmb-cc-list a, html body section.bmb-cc ul.bmb-cc-list a::after{ transition:none; }
}

/* ---------- homepage: classes row under the specialists band ---------- */
html body .bmb-classes-row{ max-width:1220px; margin:clamp(2.2rem,4vw,3rem) auto 0; text-align:center; }
html body .bmb-classes-row h3.bmb-classes-title{
  margin:0 0 1rem !important; color:#553f63 !important; font-family:"Playfair Display", Georgia, serif !important;
  font-size:clamp(1.25rem,1.9vw,1.55rem) !important; font-weight:500 !important; line-height:1.25 !important; letter-spacing:0 !important;
}
html body .bmb-classes-row ul.bmb-classes-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; }
html body .bmb-classes-row ul.bmb-classes-list > li{ margin:0; padding:0; }
html body .bmb-classes-row ul.bmb-classes-list a{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.55rem 1.15rem; border-radius:999px;
  background:#fff; border:1px solid #e7ddef; color:#553f63 !important; font-size:.95rem; font-weight:600; line-height:1.3; text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease;
}
html body .bmb-classes-row ul.bmb-classes-list a::after{ content:"\2192"; color:#7a6390; }
html body .bmb-classes-row ul.bmb-classes-list a:hover, html body .bmb-classes-row ul.bmb-classes-list a:focus-visible{ background:#f3edf7; border-color:#d4c5e3; }
html body .bmb-classes-row ul.bmb-classes-list a:focus-visible{ outline:2px solid #7a6390; outline-offset:2px; }
@media (max-width:520px){
  html body .bmb-classes-row ul.bmb-classes-list{ flex-direction:column; align-items:stretch; }
  html body .bmb-classes-row ul.bmb-classes-list a{ justify-content:space-between; width:100%; }
}