/* ==========================================================================
   Beacon Living - Beacon Capital
   Division landing (/living/) + Shop prototype (/living/shop/)
   Built on the active design system: "Beacon Capital Dark Stone"
   Scoped to body.bc-living-page / body.bc-living-shop only.
   ========================================================================== */

body.bc-living-page,
body.bc-living-shop {
  --bcl-bg:        #070909;
  --bcl-surface:   #1B2020;
  --bcl-alt:       #111414;
  --bcl-ink:       #F3EFE7;
  --bcl-body:      #D8D3CA;
  --bcl-muted:     #9E9A91;
  --bcl-accent:    #D1AA6D;
  --bcl-accent-hv: #B88B48;
  --bcl-accent-lt: #E5C98F;
  --bcl-teal:      #024548;
  --bcl-teal-2:    #025B5A;
  --bcl-hair:      rgba(209,170,109,0.18);
  --bcl-hair-hv:   rgba(209,170,109,0.42);
  --bcl-xs: 8px;  --bcl-sm: 16px; --bcl-md: 28px;
  --bcl-lg: 56px; --bcl-xl: 96px;
  --bcl-r-sm: 2px; --bcl-r-md: 4px;
  --bcl-measure: 1240px;
}

body.bc-living-page .bcl,
body.bc-living-shop .bcl {
  background: var(--bcl-bg);
  color: var(--bcl-body);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}

.bcl *, .bcl *::before, .bcl *::after { box-sizing: border-box; }

.bcl h1, .bcl h2, .bcl h3, .bcl h4 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  color: var(--bcl-ink);
  line-height: 1.1;
  margin: 0 0 var(--bcl-sm);
  letter-spacing: 0;
}
.bcl p { margin: 0 0 var(--bcl-sm); max-width: 68ch; }

.bcl__wrap { width: 100%; max-width: var(--bcl-measure); margin: 0 auto; padding: 0 var(--bcl-md); }
.bcl__section { padding: var(--bcl-xl) 0; }
.bcl__section--alt { background: var(--bcl-alt); }
.bcl__rule { height: 1px; background: var(--bcl-hair); border: 0; margin: 0; }

.bcl__eyebrow {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--bcl-accent);
  margin: 0 0 var(--bcl-sm);
  display: block;
}
.bcl__eyebrow--muted { color: var(--bcl-muted); }

.bcl__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--bcl-md);
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 1.4px; text-decoration: none;
  text-align: center;
  border-radius: var(--bcl-r-md); border: 1px solid transparent;
  cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bcl__btn--solid { background: var(--bcl-accent); color: var(--bcl-bg); }
.bcl__btn--solid:hover, .bcl__btn--solid:focus-visible { background: var(--bcl-accent-hv); color: var(--bcl-bg); }
.bcl__btn--ghost { background: transparent; color: var(--bcl-ink); border-color: var(--bcl-accent); }
.bcl__btn--ghost:hover, .bcl__btn--ghost:focus-visible { background: rgba(209,170,109,0.10); color: var(--bcl-ink); }
.bcl__btn--sm { min-height: 44px; padding: 0 var(--bcl-sm); font-size: 11px; }

.bcl a:focus-visible, .bcl button:focus-visible,
.bcl input:focus-visible, .bcl select:focus-visible, .bcl summary:focus-visible {
  outline: 2px solid var(--bcl-accent-lt);
  outline-offset: 2px;
}

.bcl__hero {
  position: relative;
  padding: calc(var(--bcl-xl) + 24px) 0 var(--bcl-xl);
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(2,91,90,0.28) 0%, rgba(2,69,72,0.10) 42%, rgba(7,9,9,0) 72%),
    linear-gradient(180deg, #0B0E0E 0%, var(--bcl-bg) 100%);
  border-bottom: 1px solid var(--bcl-hair);
}
.bcl__hero-inner { max-width: 760px; }
.bcl__hero h1 { font-size: clamp(34px, 6vw, 68px); margin-bottom: var(--bcl-md); }
.bcl__hero-lede { font-size: clamp(15px, 1.6vw, 18px); color: var(--bcl-body); max-width: 56ch; }
.bcl__hero-actions { display: flex; flex-wrap: wrap; gap: var(--bcl-sm); margin-top: var(--bcl-lg); }
.bcl__hero-parent {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--bcl-muted);
  margin-top: var(--bcl-lg); padding-top: var(--bcl-sm);
  border-top: 1px solid var(--bcl-hair); display: inline-block;
}

/* ---------- Collection Preview notice ---------- */
.bcl__notice {
  border-left: 2px solid var(--bcl-accent);
  padding: 2px 0 2px var(--bcl-md);
  margin: 0 0 var(--bcl-xl);
  max-width: 620px;
  background: none;
  border-top: 0; border-right: 0; border-bottom: 0;
  border-radius: 0;
}
.bcl__notice-label {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--bcl-accent);
  display: block; margin-bottom: 6px;
}
.bcl__notice p {
  margin: 0; font-size: 13.5px; line-height: 1.65;
  color: var(--bcl-muted); max-width: 58ch;
}
.bcl__microcopy {
  font-size: 11.5px; color: var(--bcl-muted); margin: var(--bcl-md) 0 0;
  max-width: 60ch; letter-spacing: .2px;
}

.bcl__head { margin-bottom: var(--bcl-lg); }
.bcl__head h2 { font-size: clamp(26px, 3.4vw, 40px); }
.bcl__head p { color: var(--bcl-muted); font-size: 15px; }

.bcl__cats { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--bcl-sm); }
.bcl__cat {
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 168px; padding: var(--bcl-sm);
  background: var(--bcl-surface); border: 1px solid var(--bcl-hair);
  border-radius: var(--bcl-r-md); text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.bcl__cat:hover, .bcl__cat:focus-visible { border-color: var(--bcl-hair-hv); background: #202626; }
.bcl__cat-mark {
  display: block; color: var(--bcl-accent);
  margin: 4px 0 auto; opacity: .8;
  transition: opacity .2s ease, color .2s ease;
}
.bcl__cat-mark svg { width: 42px; height: 42px; display: block; }
.bcl__cat:hover .bcl__cat-mark { opacity: 1; color: var(--bcl-accent-lt); }
.bcl__cat-name {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--bcl-ink);
  line-height: 1.45;
}
.bcl__cat-count { font-size: 11px; color: var(--bcl-muted); margin-top: 4px; letter-spacing: .4px; }

.bcl__shop { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: var(--bcl-lg); align-items: start; }

.bcl__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bcl-sm); flex-wrap: wrap;
  padding-bottom: var(--bcl-sm); margin-bottom: var(--bcl-md);
  border-bottom: 1px solid var(--bcl-hair);
}
.bcl__count { font-size: 12px; color: var(--bcl-muted); letter-spacing: .6px; margin: 0; }
.bcl__count strong { color: var(--bcl-ink); font-weight: 600; }
.bcl__filter-toggle { display: none; }

.bcl__filters { position: sticky; top: 108px; }
.bcl__fgroup { border-bottom: 1px solid var(--bcl-hair); padding: 0 0 var(--bcl-sm); margin-bottom: var(--bcl-sm); }
.bcl__fgroup > summary {
  list-style: none; cursor: pointer; padding: var(--bcl-xs) 0; min-height: 40px;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--bcl-ink);
  display: flex; align-items: center; justify-content: space-between;
}
.bcl__fgroup > summary::-webkit-details-marker { display: none; }
.bcl__fgroup > summary::after { content: "+"; color: var(--bcl-accent); font-size: 15px; line-height: 1; }
.bcl__fgroup[open] > summary::after { content: "\2013"; }
.bcl__fopts { padding-top: var(--bcl-xs); display: flex; flex-direction: column; gap: 2px; }
.bcl__fopt {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 0; cursor: pointer;
  font-size: 13px; color: var(--bcl-body); line-height: 1.35;
}
.bcl__fopt:hover { color: var(--bcl-ink); }
.bcl__fopt input { accent-color: var(--bcl-accent); width: 16px; height: 16px; flex: none; cursor: pointer; }
.bcl__fnote { font-size: 11px; color: var(--bcl-muted); line-height: 1.5; margin: var(--bcl-xs) 0 0; max-width: none; }

.bcl__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--bcl-md); }
.bcl__card {
  display: flex; flex-direction: column;
  background: var(--bcl-surface); border: 1px solid var(--bcl-hair);
  border-radius: var(--bcl-r-md); overflow: hidden;
  transition: border-color .2s ease;
}
.bcl__card:hover { border-color: var(--bcl-hair-hv); }
.bcl__card[hidden] { display: none; }

.bcl__media {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: var(--bcl-alt); border-bottom: 1px solid var(--bcl-hair);
  overflow: hidden;
}
.bcl__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Concept plate ----------
   Deliberate art direction, not a missing-image state. Each category carries a
   different ground angle and mark scale so 24 plates never read as one repeat. */
.bcl__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: var(--bcl-sm); text-align: center;
  color: var(--bcl-accent);
  background:
    radial-gradient(72% 62% at 50% 40%, rgba(209,170,109,0.13) 0%, rgba(209,170,109,0) 70%),
    linear-gradient(158deg, #1C2222 0%, #141818 48%, #0C0F0F 100%);
}
.bcl__ph::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(209,170,109,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(209,170,109,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5; pointer-events: none;
}
.bcl__ph::after {
  content: ""; position: absolute; inset: 11px;
  border: 1px solid rgba(209,170,109,0.22); border-radius: var(--bcl-r-sm);
  pointer-events: none;
}
.bcl__ph-mark {
  position: relative; display: block; margin-bottom: 6.5cqw;
  color: var(--bcl-accent-lt);
}
.bcl__ph-mark svg {
  width: clamp(40px, var(--bcl-mark, 33cqw), 108px);
  height: clamp(40px, var(--bcl-mark, 33cqw), 108px);
  display: block; opacity: .92;
}
.bcl__ph-stone {
  position: relative;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--bcl-accent);
  line-height: 1.4;
}
.bcl__ph-tag {
  position: relative; margin-top: 7px; padding-top: 7px;
  font-family: "Poppins", sans-serif; font-weight: 500; font-size: 8px;
  text-transform: uppercase; letter-spacing: 1.3px; color: var(--bcl-muted);
  opacity: .62;
}
.bcl__ph-tag::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 16px; height: 1px; background: rgba(209,170,109,0.34);
}

/* Controlled per-category variation - mark scale relative to the plate */
.bcl__ph--bathroom  { --bcl-mark: 32cqw; }
.bcl__ph--trays     { --bcl-mark: 38cqw; }
.bcl__ph--decor     { --bcl-mark: 30cqw; }
.bcl__ph--kitchen   { --bcl-mark: 37cqw; }
.bcl__ph--furniture { --bcl-mark: 40cqw; }
.bcl__ph--gifts     { --bcl-mark: 29cqw; }
.bcl__ph--custom    { --bcl-mark: 36cqw; }
.bcl__ph--furniture .bcl__ph-mark svg { opacity: .85; }
.bcl__ph--furniture {
  background:
    radial-gradient(86% 70% at 50% 46%, rgba(2,91,90,0.16) 0%, rgba(209,170,109,0.08) 42%, rgba(209,170,109,0) 74%),
    linear-gradient(152deg, #1A2020 0%, #131717 50%, #0C0F0F 100%);
}
.bcl__ph--custom {
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(209,170,109,0.17) 0%, rgba(209,170,109,0) 70%),
    linear-gradient(166deg, #1E2323 0%, #141818 52%, #0C0F0F 100%);
}
.bcl__card:hover .bcl__ph-mark svg { opacity: 1; }

.bcl__ref {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 8.5px;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--bcl-ink); background: rgba(7,9,9,0.82);
  border: 1px solid var(--bcl-hair); border-radius: var(--bcl-r-sm);
  padding: 3px 7px;
}

.bcl__body { padding: var(--bcl-sm); display: flex; flex-direction: column; flex: 1 1 auto; gap: 6px; }
.bcl__cat-tag {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--bcl-muted);
}
.bcl__name {
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  font-size: 21px; line-height: 1.2; color: var(--bcl-ink); margin: 0;
}
.bcl__stone { font-size: 12.5px; color: var(--bcl-body); margin: 0; max-width: none; }
.bcl__price {
  font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--bcl-muted);
  margin: 2px 0 0; max-width: none;
}
.bcl__state {
  display: inline-flex; align-self: flex-start; align-items: center;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 9px;
  text-transform: uppercase; letter-spacing: 1.1px; white-space: nowrap;
  border-radius: var(--bcl-r-sm); padding: 5px 9px; margin-top: 4px;
  border: 1px solid var(--bcl-hair); color: var(--bcl-body);
}
.bcl__state--buy    { color: var(--bcl-accent-lt); border-color: var(--bcl-hair-hv); }
.bcl__state--mto    { color: var(--bcl-body); }
.bcl__state--quote  { color: var(--bcl-muted); }
.bcl__action { margin-top: auto; padding-top: var(--bcl-sm); }
.bcl__action .bcl__btn { width: 100%; }

.bcl__more { display: flex; justify-content: center; margin-top: var(--bcl-lg); }

.bcl__why { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bcl-md); }
.bcl__why-item { padding-top: var(--bcl-sm); border-top: 1px solid var(--bcl-hair); }
.bcl__why-item h3 {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--bcl-accent);
  margin-bottom: var(--bcl-xs); line-height: 1.5;
}
.bcl__why-item p { font-size: 14px; color: var(--bcl-body); margin: 0; max-width: none; }

.bcl__cta {
  background:
    radial-gradient(100% 140% at 12% 0%, rgba(2,91,90,0.32) 0%, rgba(7,9,9,0) 62%),
    var(--bcl-alt);
  border-top: 1px solid var(--bcl-hair);
  border-bottom: 1px solid var(--bcl-hair);
  padding: var(--bcl-xl) 0;
}
.bcl__cta h2 { font-size: clamp(26px, 3.6vw, 42px); max-width: 18ch; }
.bcl__cta p { font-size: 16px; max-width: 52ch; }
.bcl__cta .bcl__btn { margin-top: var(--bcl-md); }

.bcl__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bcl-lg); }
.bcl__col h3 { font-size: 24px; margin-bottom: var(--bcl-xs); }
.bcl__col p { font-size: 14.5px; margin: 0; }

.bcl__split { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bcl-lg); align-items: start; }
.bcl__panel {
  background: var(--bcl-surface); border: 1px solid var(--bcl-hair);
  border-radius: var(--bcl-r-md); padding: var(--bcl-md);
}
.bcl__panel h3 { font-size: 26px; margin-bottom: var(--bcl-xs); }
.bcl__panel p { font-size: 14.5px; }
.bcl__list { list-style: none; margin: 0 0 var(--bcl-md); padding: 0; }
.bcl__list li {
  font-size: 13.5px; color: var(--bcl-body);
  padding: 9px 0 9px 18px; position: relative;
  border-bottom: 1px solid var(--bcl-hair);
}
.bcl__list li:last-child { border-bottom: 0; }
.bcl__list li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 6px; height: 1px; background: var(--bcl-accent);
}

.bcl__stones { display: flex; flex-wrap: wrap; gap: 10px; }
.bcl__stone-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bcl-lg); }
.bcl__stone-group > .bcl__eyebrow { margin-bottom: var(--bcl-sm); }
.bcl__chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Poppins", sans-serif; font-weight: 500; font-size: 11px;
  letter-spacing: .9px; color: var(--bcl-body); text-transform: none;
  border: 1px solid var(--bcl-hair); border-radius: var(--bcl-r-sm);
  padding: 9px 14px 9px 11px; background: var(--bcl-surface);
  transition: border-color .2s ease;
}
.bcl__chip:hover { border-color: var(--bcl-hair-hv); }
.bcl__swatch {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1px solid rgba(243,239,231,0.16);
}
.bcl__swatch--cream { background: #E8DFCE; }
.bcl__swatch--beige { background: #D6C4A8; }
.bcl__swatch--white { background: #EFEDE8; }
.bcl__swatch--grey  { background: #8A8F8F; }
.bcl__swatch--brown { background: #6B4E3A; }
.bcl__swatch--green { background: #4A5F4A; }
.bcl__swatch--black { background: #232828; }

.bcl__empty { padding: var(--bcl-lg) 0; color: var(--bcl-muted); font-size: 14px; }
.bcl__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   RESPONSIVE - every grid declares its collapse
   ========================================================================== */

@media (max-width: 1366px) {
  .bcl__cats { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1200px) {
  .bcl__shop { grid-template-columns: 216px minmax(0,1fr); gap: var(--bcl-md); }
  .bcl__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 1024px) {
  .bcl__section { padding: var(--bcl-lg) 0; }
  .bcl__hero { padding: calc(var(--bcl-lg) + 16px) 0 var(--bcl-lg); }
  .bcl__shop { grid-template-columns: 1fr; }
  .bcl__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bcl__why { grid-template-columns: repeat(2, 1fr); }
  .bcl__cols { grid-template-columns: 1fr; gap: var(--bcl-md); }
  .bcl__split { grid-template-columns: 1fr; gap: var(--bcl-md); }
  .bcl__filters { position: static; }

  .bcl__filter-toggle { display: inline-flex; }
  .bcl__filters-panel { display: none; }
  .bcl__filters-panel.is-open { display: block; }
  .bcl__filters {
    background: var(--bcl-surface); border: 1px solid var(--bcl-hair);
    border-radius: var(--bcl-r-md); padding: var(--bcl-sm);
    margin-bottom: var(--bcl-md);
  }
}

@media (max-width: 900px) {
  .bcl__cats { grid-template-columns: repeat(3, 1fr); }
  .bcl__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767px) {
  .bcl__wrap { padding: 0 20px; }
  /* Keep the Filter control on the right edge even when the toolbar wraps, so it
     never lands in the Floating Dock's bottom-left column (fixed, left:10px). */
  .bcl__toolbar { align-items: flex-end; }
  .bcl__filter-toggle { margin-left: auto; align-self: flex-end; }
  .bcl__count { flex: 1 1 100%; }
  .bcl__hero-actions { gap: 12px; }
  .bcl__hero-actions .bcl__btn { width: 100%; }
  .bcl__why { grid-template-columns: 1fr; }
  .bcl__cats { grid-template-columns: repeat(2, 1fr); }
  .bcl__cat { min-height: 104px; }
  .bcl__cta .bcl__btn { width: 100%; }
}

@media (max-width: 600px) {
  .bcl__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .bcl__body { padding: 12px; }
  .bcl__name { font-size: 17px; }
  .bcl__stone { font-size: 11.5px; }
  .bcl__ph svg { width: 42px; height: 42px; }
  .bcl__action .bcl__btn { font-size: 9.5px; letter-spacing: .9px; padding: 0 8px; }
}

/* Two columns hold down to ~360px (iPhone SE and up). Single column only on
   the narrowest devices, where a 2-up card would be too cramped to read. */
@media (max-width: 352px) {
  .bcl__wrap { padding: 0 16px; }
  .bcl__grid { grid-template-columns: 1fr; }
  .bcl__cats { grid-template-columns: 1fr; }
  .bcl__name { font-size: 20px; }
  .bcl__stone { font-size: 13px; }
  .bcl__ph svg { width: 56px; height: 56px; }
  .bcl__action .bcl__btn { font-size: 11px; letter-spacing: 1.2px; }
}

@media (prefers-reduced-motion: reduce) {
  .bcl *, .bcl *::before, .bcl *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   EDITORIAL RHYTHM
   Breaks the "nine stacked boxes" pattern without touching the design system:
   alternating grounds, varied section weight, and hairline seams.
   ========================================================================== */

/* Hero-to-header seam: no hard black band between the global header and hero */
.bcl__hero { margin-top: -1px; }

/* Section weight varies rather than repeating one rhythm */
.bcl__section--tight { padding-top: var(--bcl-lg); }
.bcl__section--lead  { padding-bottom: var(--bcl-xl); }

/* Alternating grounds get a soft top seam instead of a hard edge */
.bcl__section--alt {
  border-top: 1px solid var(--bcl-hair);
  border-bottom: 1px solid var(--bcl-hair);
  background:
    radial-gradient(90% 120% at 82% 0%, rgba(2,91,90,0.10) 0%, rgba(7,9,9,0) 58%),
    var(--bcl-alt);
}

/* Controlled asymmetry: section heads sit left, capped measure */
.bcl__head { max-width: 46ch; }
.bcl__head--wide { max-width: 62ch; }

/* Trade section gets extra presence - corporate gifting must not read as filler */
.bcl__section--trade .bcl__cols { gap: var(--bcl-md); }
.bcl__section--trade .bcl__col {
  background: var(--bcl-surface); border: 1px solid var(--bcl-hair);
  border-radius: var(--bcl-r-md); padding: var(--bcl-md);
}
.bcl__section--trade .bcl__col h3 { font-size: 22px; }

/* Closing CTA carries the most weight on the page */
.bcl__cta--strong { padding: calc(var(--bcl-xl) + 24px) 0; }
.bcl__cta--strong h2 { font-size: clamp(30px, 4.2vw, 50px); }

.bcl__stone-groups { row-gap: var(--bcl-md); }

@media (max-width: 1024px) {
  .bcl__stone-groups { grid-template-columns: 1fr; gap: var(--bcl-md); }
  .bcl__cta--strong { padding: var(--bcl-lg) 0; }
  .bcl__notice { margin-bottom: var(--bcl-lg); }
}

@media (max-width: 600px) {
  .bcl__ph-mark { margin-bottom: 12px; }
  .bcl__ph::after { inset: 8px; }
  .bcl__ph-stone { font-size: 8.5px; letter-spacing: 1.1px; }
  .bcl__ph-tag { font-size: 7px; }
  .bcl__section--trade .bcl__col { padding: var(--bcl-sm); }
}

@media (max-width: 352px) {
  .bcl__ph-stone { font-size: 10px; }
  .bcl__ph-tag { font-size: 8px; }
}

@media (max-width: 767px) {
  .bcl__cat { min-height: 132px; }
  .bcl__cat-mark svg { width: 34px; height: 34px; }
}