/* =========================================================
   BC BRICK — HOME HERO
========================================================= */

.bc-hero {
  position: relative;
  width: min(100% - (var(--bc-page-padding) * 2), var(--bc-container));
  height: clamp(560px, 39vw, 600px);
  margin: var(--bc-space-4) auto 0;
  overflow: hidden;
  border-radius: var(--bc-radius-lg);
  background: var(--bc-color-background-soft);
  isolation: isolate;
}

.bc-hero__viewport,
.bc-hero__slides,
.bc-hero__slide,
.bc-hero__media,
.bc-hero__shade {
  position: absolute;
  inset: 0;
}

.bc-hero__viewport {
  overflow: hidden;
}

.bc-hero__slide {
  z-index: 0;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  transition:
    opacity var(--bc-transition),
    visibility var(--bc-transition);
}

.bc-hero__slide.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
}

.bc-hero__media {
  background: var(--bc-color-background-soft);
}

.bc-hero__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.025);
  transition: transform 7s ease-out;
}

.bc-hero__slide.is-active .bc-hero__image {
  transform: scale(1);
}

.bc-hero__image--mobile {
  display: none;
}

/* =========================================================
   SHADE
========================================================= */

.bc-hero__shade {
  z-index: 1;
  pointer-events: none;
}

.bc-hero__slide--text-dark {
  color: var(--bc-color-text);
}

.bc-hero__slide--text-dark .bc-hero__shade {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bc-color-background-soft) 98%, transparent) 0%,
    color-mix(in srgb, var(--bc-color-background-soft) 90%, transparent) 30%,
    color-mix(in srgb, var(--bc-color-background-soft) 34%, transparent) 56%,
    transparent 72%
  );
}

.bc-hero__slide--text-light {
  color: var(--bc-color-white);
}

.bc-hero__slide--text-light .bc-hero__shade {
  background: linear-gradient(
    90deg,
    var(--bc-color-overlay) 0%,
    color-mix(in srgb, var(--bc-color-text) 44%, transparent) 40%,
    transparent 72%
  );
}

/* =========================================================
   CONTENT
========================================================= */

.bc-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    padding-top: var(--bc-space-12);
    padding-bottom: var(--bc-space-12);
    align-items: flex-start;
}

.bc-hero__content {
  display: flex;
  width: min(51%, 900px);
  align-items: flex-start;
  flex-direction: column;
}

.bc-hero__eyebrow {
    display: flex;
    margin: 0 0 var(--bc-space-3);
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-accent);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bc-hero__eyebrow::before {
    width: var(--bc-space-6);
    height: 2px;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
}

.bc-hero__slide--text-light .bc-hero__eyebrow {
  color: var(--bc-color-white);
}

.bc-hero__title {
  max-width: 900px;
  margin: 0;
  color: inherit;
  font-family: var(--bc-font-heading);
  font-size: var(--bc-font-size-h1);
  font-weight: 700;
  line-height: var(--bc-line-height-h1);
  text-wrap: pretty;
}

.bc-hero__description {
  max-width: 820px;
  margin: var(--bc-space-5) 0 0;
  color: var(--bc-color-text-muted);
  font-size: var(--bc-font-size-body-lg);
  line-height: var(--bc-line-height-body);
}

.bc-hero__slide--text-light .bc-hero__description {
  color: var(--bc-color-white);
  opacity: 0.82;
}

/* =========================================================
   BOTTOM ACTION
========================================================= */

.bc-hero__button {
    position: absolute;
    z-index: 4;
    bottom: var(--bc-space-12);
    left: 0;
    margin: 0;
}

.bc-hero__button svg {
  width: var(--bc-space-6);
  height: var(--bc-space-6);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform var(--bc-transition);
}

@media (hover: hover) and (pointer: fine) {
  .bc-hero__button:hover svg {
    transform: translateX(var(--bc-space-1));
  }
}

/* =========================================================
   PAGINATION
========================================================= */

.bc-hero__ui {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: var(--bc-space-12);
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
}

.bc-hero__pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bc-space-3);
  pointer-events: auto;
}

.bc-hero__dot {
  display: flex;
  min-width: var(--bc-space-7);
  padding: 0 0 var(--bc-space-2);
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-bottom: 2px solid
    color-mix(in srgb, var(--bc-color-text) 20%, transparent);
  color: var(--bc-color-text-muted);
  background: transparent;
  font-size: var(--bc-font-size-caption);
  font-weight: 600;
  line-height: var(--bc-line-height-small);
  transition:
    min-width var(--bc-transition),
    color var(--bc-transition),
    border-color var(--bc-transition);
}

.bc-hero__dot.is-active {
  min-width: var(--bc-space-10);
  border-color: var(--bc-color-accent);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .bc-hero__dot:hover {
    min-width: var(--bc-space-10);
    border-color: var(--bc-color-accent);
    color: #fff;
  }
}

.bc-hero.is-text-light .bc-hero__dot {
  border-color: color-mix(in srgb, var(--bc-color-white) 30%, transparent);
  color: var(--bc-color-white);
  opacity: 0.72;
}

.bc-hero.is-text-light .bc-hero__dot.is-active {
  border-color: var(--bc-color-accent);
  color: var(--bc-color-white);
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .bc-hero.is-text-light .bc-hero__dot:hover {
    border-color: var(--bc-color-accent);
    color: var(--bc-color-white);
    opacity: 1;
  }
}

/* =========================================================
   PROGRESS
========================================================= */

.bc-hero__progress {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--bc-space-1);
  overflow: hidden;
  background: color-mix(in srgb, var(--bc-color-primary) 12%, transparent);
}

.bc-hero__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bc-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.bc-hero__progress-bar.is-running {
  animation: bc-hero-progress var(--bc-hero-delay, 6500ms) linear forwards;
}

@keyframes bc-hero-progress {
  to {
    transform: scaleX(1);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {
  .bc-hero {
    height: 520px;
    margin-top: var(--bc-space-4);
  }

  .bc-hero__inner {
    padding-block: var(--bc-space-7) var(--bc-space-12);
  }

  .bc-hero__content {
    width: min(70%, 680px);
  }

  .bc-hero__button,
  .bc-hero__ui {
    bottom: var(--bc-space-6);
  }
}

@media (max-width: 991px) {
  .bc-hero {
    height: 500px;
  }

  .bc-hero__content {
    width: min(72%, 640px);
  }

  .bc-hero__description {
    max-width: 600px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .bc-hero {
    width: calc(100% - (var(--bc-page-padding) * 2));
    height: clamp(500px, 132vw, 560px);
    margin-top: var(--bc-space-4);
    border-radius: var(--bc-radius-sm);
  }

  .bc-hero__slide.has-mobile-image .bc-hero__image--desktop {
    display: none;
  }

  .bc-hero__slide.has-mobile-image .bc-hero__image--mobile {
    display: block;
  }

  .bc-hero__image {
    object-position: 68% center;
  }

  .bc-hero__slide--text-dark .bc-hero__shade {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bc-color-background-soft) 2%, transparent) 0%,
      color-mix(in srgb, var(--bc-color-background-soft) 8%, transparent) 28%,
      color-mix(in srgb, var(--bc-color-background-soft) 46%, transparent) 48%,
      color-mix(in srgb, var(--bc-color-background-soft) 88%, transparent) 66%,
      var(--bc-color-background-soft) 84%,
      var(--bc-color-background-soft) 100%
    );
  }

  .bc-hero__slide--text-light .bc-hero__shade {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bc-color-text) 2%, transparent) 0%,
      color-mix(in srgb, var(--bc-color-text) 10%, transparent) 28%,
      color-mix(in srgb, var(--bc-color-text) 50%, transparent) 48%,
      color-mix(in srgb, var(--bc-color-text) 88%, transparent) 66%,
      var(--bc-color-text) 84%,
      var(--bc-color-text) 100%
    );
  }

  .bc-hero__inner {
    display: flex;
    height: 100%;
    padding-top: var(--bc-space-7);
    padding-bottom: 116px;
    align-items: flex-end;
  }

  .bc-hero__content {
    width: 100%;
    margin: 0;
  }

  .bc-hero__eyebrow {
    margin-bottom: var(--bc-space-3);
    font-size: var(--bc-font-size-caption);
  }

  .bc-hero__eyebrow::before {
    width: var(--bc-space-6);
  }

  .bc-hero__title {
    max-width: 100%;
    font-size: var(--bc-font-size-h2);
    line-height: var(--bc-line-height-h2);
    text-wrap: pretty;
  }

  .bc-hero__description {
    max-width: 100%;
    margin-top: var(--bc-space-4);
    font-size: var(--bc-font-size-body-sm);
    line-height: var(--bc-line-height-body);
  }

  /* Dedicated bottom row: button left, pagination right. */
  .bc-hero__button {
    bottom: var(--bc-space-5);
    left: 0;
    min-height: 48px;
    margin: 0;
    padding-inline: var(--bc-space-5);
  }

  .bc-hero__ui {
    bottom: var(--bc-space-5);
    align-items: flex-end;
    justify-content: flex-end;
  }

  .bc-hero__pagination {
    width: auto;
    max-width: 40%;
    gap: var(--bc-space-2);
  }

  .bc-hero__dot,
  .bc-hero__dot.is-active {
    min-width: var(--bc-space-7);
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 479px) {
  .bc-hero {
    height: clamp(500px, 138vw, 540px);
  }

  .bc-hero__inner {
    padding-top: var(--bc-space-6);
    padding-bottom: 112px;
  }

  .bc-hero__title {
    font-size: var(--bc-font-size-h3);
    line-height: var(--bc-line-height-h3);
  }

  .bc-hero__description {
    margin-top: var(--bc-space-3);
  }

  .bc-hero__button {
    min-height: 44px;
    padding-inline: var(--bc-space-4);
  }

  .bc-hero__pagination {
    max-width: 36%;
  }

  .bc-hero__dot,
  .bc-hero__dot.is-active {
    min-width: var(--bc-space-6);
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .bc-hero__image {
    transform: none;
  }

  .bc-hero__progress-bar.is-running {
    animation: none;
  }
}



/* =========================================================
   BC BRICK — HOME CATALOG
   Clean version: two format cards
========================================================= */

.bc-catalog-preview {
  overflow: hidden;
  padding-block: var(--bc-section-sm);
  scroll-margin-top: calc(var(--bc-header-height) + var(--bc-space-6));
  color: var(--bc-color-text);
  background: var(--bc-color-background);
}

.bc-catalog-preview *,
.bc-catalog-preview *::before,
.bc-catalog-preview *::after {
  box-sizing: border-box;
}

.bc-catalog-preview__inner {
  position: relative;
  min-width: 0;
}

/* =========================================================
   SECTION HEADER
========================================================= */

.bc-catalog-preview__header {
  display: grid;
  margin-bottom: var(--bc-space-6);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--bc-space-8);
}

.bc-catalog-preview__heading {
  max-width: var(--bc-container-narrow);
}

.bc-catalog-preview__eyebrow {
  display: flex;
  margin: 0 0 var(--bc-space-3);
  align-items: center;
  gap: var(--bc-space-3);
  color: var(--bc-color-accent);
  font-size: var(--bc-font-size-body-sm);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bc-catalog-preview__eyebrow::before {
  width: var(--bc-space-6);
  height: 2px;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
}

.bc-catalog-preview__title {
  margin: 0;
  color: var(--bc-color-text);
  font-family: var(--bc-font-heading);
  font-size: var(--bc-font-size-h2);
  font-weight: 700;
  line-height: var(--bc-line-height-h2);
}

.bc-catalog-preview__description {
  max-width: 560px;
  margin: var(--bc-space-3) 0 0;
  color: var(--bc-color-text-muted);
  font-size: var(--bc-font-size-body);
  line-height: var(--bc-line-height-body);
}

.bc-catalog-preview__archive-link {
  gap: var(--bc-space-3);
}

.bc-catalog-preview .bc-catalog-preview__archive-link::before,
.bc-catalog-preview .bc-catalog-preview__archive-link::after {
  display: none;
  content: none;
}

.bc-catalog-preview__archive-link svg,
.bc-category-card__arrow svg {
  width: var(--bc-space-5);
  height: var(--bc-space-5);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.bc-catalog-preview__archive-link svg {
  transition: transform var(--bc-transition);
}

.bc-catalog-preview__archive-link:focus-visible svg {
  transform: translateX(var(--bc-space-1));
}

@media (hover: hover) and (pointer: fine) {
  .bc-catalog-preview__archive-link:hover svg {
    transform: translateX(var(--bc-space-1));
  }
}

.bc-catalog-preview__archive-link--mobile {
  display: none;
}

/* =========================================================
   FORMAT CARDS
========================================================= */

.bc-catalog-preview__showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bc-grid-gap);
}

.bc-category-card {
  min-width: 0;
}

.bc-category-card__link {
  position: relative;
  display: grid;
  min-height: 340px;
  height: 100%;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.04fr) minmax(240px, 0.96fr);
  border: 1px solid var(--bc-color-border);
  border-top: 4px solid var(--bc-color-accent);
  border-radius: var(--bc-radius-sm);
  color: var(--bc-color-text);
  background: var(--bc-color-surface);
  text-decoration: none;
  isolation: isolate;
  transition:
    border-color var(--bc-transition),
    box-shadow var(--bc-transition),
    transform var(--bc-transition);
}

.bc-category-card:nth-child(2) .bc-category-card__link {
  border-top-color: var(--bc-color-primary);
}

.bc-category-card__link:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--bc-color-primary) 55%,
    var(--bc-color-border)
  );
  box-shadow: 0 18px 42px
    color-mix(in srgb, var(--bc-color-text) 10%, transparent);
  transform: translateY(-4px);
}

@media (hover: hover) and (pointer: fine) {
  .bc-category-card__link:hover {
    border-color: color-mix(
      in srgb,
      var(--bc-color-primary) 55%,
      var(--bc-color-border)
    );
    box-shadow: 0 18px 42px
      color-mix(in srgb, var(--bc-color-text) 10%, transparent);
    transform: translateY(-4px);
  }
}

.bc-category-card__link:focus-visible {
  outline: 3px solid var(--bc-color-focus);
  outline-offset: 3px;
}

/* =========================================================
   COPY PANEL
========================================================= */

.bc-category-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  padding: var(--bc-space-6);
  flex-direction: column;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bc-color-background-soft) 74%, transparent),
      var(--bc-color-surface)
    );
}

.bc-category-card__meta {
  display: flex;
  padding-bottom: var(--bc-space-4);
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bc-space-4);
  border-bottom: 1px solid var(--bc-color-border);
}

.bc-category-card__number {
  color: var(--bc-color-accent);
  font-size: var(--bc-font-size-body-sm);
  font-weight: 700;
  line-height: var(--bc-line-height-small);
  letter-spacing: 0.08em;
}

.bc-category-card__type {
  display: inline-flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 3px;
  text-align: right;
}

.bc-category-card__spec-label {
  color: var(--bc-color-text-muted);
  font-size: var(--bc-font-size-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bc-category-card__spec-value {
  color: var(--bc-color-primary);
  font-family: var(--bc-font-heading);
  font-size: var(--bc-font-size-body-lg);
  font-weight: 700;
  line-height: 1;
}

.bc-category-card__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  padding-top: var(--bc-space-5);
  flex-direction: column;
}

.bc-category-card__copy {
  min-width: 0;
}

.bc-category-card__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--bc-color-text);
  font-family: var(--bc-font-heading);
  font-size: clamp(26px, 2.1vw, 34px);
  font-weight: 700;
  line-height: 1.08;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bc-category-card__count {
  margin: var(--bc-space-3) 0 0;
  color: var(--bc-color-text-muted);
  font-size: var(--bc-font-size-body-sm);
  line-height: var(--bc-line-height-small);
}

.bc-category-card__action {
  display: flex;
  width: 100%;
  margin-top: auto;
  padding-top: var(--bc-space-5);
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-3);
  color: var(--bc-color-primary);
  font-size: var(--bc-font-size-body-sm);
  font-weight: 700;
  line-height: var(--bc-line-height-small);
}

.bc-category-card__action-label {
  max-width: 150px;
}

.bc-category-card__arrow {
  display: inline-grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid var(--bc-color-primary);
  border-radius: var(--bc-radius-sm);
  color: var(--bc-color-primary);
  background: transparent;
  transition:
    color var(--bc-transition),
    background-color var(--bc-transition),
    transform var(--bc-transition);
}

.bc-category-card__link:focus-visible .bc-category-card__arrow {
  color: var(--bc-color-white);
  background: var(--bc-color-primary);
  transform: translateX(var(--bc-space-1));
}

@media (hover: hover) and (pointer: fine) {
  .bc-category-card__link:hover .bc-category-card__arrow {
    color: var(--bc-color-white);
    background: var(--bc-color-primary);
    transform: translateX(var(--bc-space-1));
  }
}

/* =========================================================
   IMAGE PANEL
========================================================= */

.bc-category-card__media {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  align-self: stretch;
  border-left: 1px solid var(--bc-color-border);
  background: #f2e9e1;
}

.bc-category-card__image {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transform-origin: center;
  transition: transform var(--bc-transition);
  will-change: transform;
}

.bc-category-card__link:focus-visible .bc-category-card__image {
  transform: scale(1.095);
}

@media (hover: hover) and (pointer: fine) {
  .bc-category-card__link:hover .bc-category-card__image {
    transform: scale(1.095);
  }
}

.bc-category-card.has-no-image .bc-category-card__media {
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle at 50% 42%,
      #ffffff 0%,
      #faf6f5 55%,
      #f3eceb 100%
    );
}

.bc-category-card__brick-mark {
  position: relative;
  z-index: 1;
  width: min(58%, 190px);
  fill: none;
  stroke: var(--bc-color-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  opacity: 0.5;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {
  .bc-category-card__link {
    min-height: 320px;
    grid-template-columns: minmax(0, 1.05fr) minmax(190px, 0.95fr);
  }

  .bc-category-card__content {
    padding: var(--bc-space-5);
  }

  .bc-category-card__title {
    font-size: clamp(24px, 2.7vw, 30px);
  }

  .bc-category-card__action-label {
    display: none;
  }
}

@media (max-width: 991px) {
  .bc-catalog-preview__header {
    gap: var(--bc-space-6);
  }

  .bc-category-card__link {
    min-height: 300px;
    grid-template-columns: minmax(0, 1.08fr) minmax(160px, 0.92fr);
  }

  .bc-category-card__content {
    padding: var(--bc-space-4);
  }

  .bc-category-card__title {
    font-size: clamp(21px, 2.8vw, 27px);
  }

  .bc-category-card__arrow {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .bc-catalog-preview {
    padding-block: var(--bc-section-sm);
  }

  .bc-catalog-preview__header {
    margin-bottom: var(--bc-space-5);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bc-space-4);
  }

  .bc-catalog-preview__eyebrow {
    margin-bottom: var(--bc-space-2);
  }

  .bc-catalog-preview__title {
    font-size: var(--bc-font-size-h3);
    line-height: var(--bc-line-height-h3);
  }

  .bc-catalog-preview__description {
    max-width: 320px;
    margin-top: var(--bc-space-2);
    font-size: var(--bc-font-size-body-sm);
  }

  .bc-catalog-preview__archive-link--desktop {
    display: none;
  }

  .bc-catalog-preview__archive-link--mobile {
    display: inline-flex;
    width: 100%;
    margin-top: var(--bc-space-5);
    justify-content: space-between;
  }

  .bc-catalog-preview__showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bc-space-4);
  }

  .bc-category-card__link {
    min-height: 270px;
    grid-template-columns: minmax(0, 1.18fr) minmax(132px, 0.82fr);
  }

  .bc-category-card__content {
    padding: var(--bc-space-4);
  }

  .bc-category-card__meta {
    padding-bottom: var(--bc-space-3);
  }

  .bc-category-card__number {
    font-size: var(--bc-font-size-caption);
  }

  .bc-category-card__spec-label {
    font-size: 10px;
  }

  .bc-category-card__spec-value {
    font-size: var(--bc-font-size-body);
  }

  .bc-category-card__body {
    padding-top: var(--bc-space-4);
  }

  .bc-category-card__title {
    font-size: clamp(20px, 5.8vw, 26px);
    -webkit-line-clamp: 3;
  }

  .bc-category-card__count {
    margin-top: var(--bc-space-2);
    font-size: var(--bc-font-size-caption);
  }

  .bc-category-card__action {
    padding-top: var(--bc-space-3);
  }

  .bc-category-card__media {
    background: #f2e9e1;
  }

  .bc-category-card__image {
    object-fit: contain;
    transform: scale(1.02);
  }

  .bc-category-card__link:focus-visible .bc-category-card__image {
    transform: scale(1.05);
  }

  @media (hover: hover) and (pointer: fine) {
    .bc-category-card__link:hover .bc-category-card__image {
      transform: scale(1.05);
    }
  }
}

@media (max-width: 479px) {
  .bc-category-card__link {
    min-height: 250px;
    grid-template-columns: minmax(0, 1.25fr) minmax(116px, 0.75fr);
  }

  .bc-category-card__content {
    padding: var(--bc-space-3);
  }

  .bc-category-card__spec-label {
    display: none;
  }

  .bc-category-card__title {
    font-size: var(--bc-font-size-body-lg);
    line-height: 1.08;
  }

  .bc-category-card__arrow {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .bc-category-card__link,
  .bc-category-card__image,
  .bc-category-card__arrow,
  .bc-catalog-preview__archive-link svg {
    transition: none;
  }
}




/* =========================================================
   BC BRICK — COMPANY / FACTORY SHOWCASE V2
========================================================= */

.bc-company-showcase {
    position: relative;
    overflow: hidden;
    padding-block: var(--bc-section-md);
    color: var(--bc-color-text);
    background: var(--bc-color-background-soft);
}

.bc-company-showcase *,
.bc-company-showcase *::before,
.bc-company-showcase *::after {
    box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.bc-company-showcase__header {
    display: grid;
    margin-bottom: var(--bc-space-9);
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--bc-grid-gap-lg);
}

.bc-company-showcase__heading {
    min-width: 0;
}

.bc-company-showcase__eyebrow {
    display: flex;
    margin: 0 0 var(--bc-space-3);
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-accent);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bc-company-showcase__eyebrow::before {
    width: var(--bc-space-6);
    height: 2px;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
}

.bc-company-showcase__title {
    max-width: var(--bc-container-content);
    margin: 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h2);
    font-weight: 700;
    line-height: var(--bc-line-height-h2);
}

.bc-company-showcase__intro {
    max-width: var(--bc-container-narrow);
    justify-self: end;
}

.bc-company-showcase__intro p {
    margin: 0;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-body);
    line-height: var(--bc-line-height-body);
}


/* =========================================================
   MAIN LAYOUT
   Visual column reduced ~10 percentage points vs previous build.
========================================================= */

.bc-company-showcase__body {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--bc-grid-gap-lg);
}

.bc-company-showcase__visual,
.bc-company-showcase__facts {
    min-width: 0;
}


/* =========================================================
   DESKTOP MOSAIC
========================================================= */

.bc-company-showcase__gallery {
    position: relative;
    display: grid;
    aspect-ratio: 1.9 / 1;
    grid-template-columns:
        minmax(0, 2.65fr)
        minmax(0, 1fr);
    grid-template-rows:
        repeat(2, minmax(0, 1fr));
    gap: var(--bc-space-2);

    transition:
        opacity 0.42s ease,
        transform 0.42s ease;
}

.bc-company-showcase__gallery.is-changing {
    opacity: 0.18;
    transform: scale(0.997);
}

.bc-company-showcase__gallery-item {
    position: relative;
    display: none;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-background);
}

.bc-company-showcase__gallery-item.is-primary,
.bc-company-showcase__gallery-item.is-secondary-top,
.bc-company-showcase__gallery-item.is-secondary-bottom {
    display: block;
}

.bc-company-showcase__gallery-item.is-primary {
    grid-column: 1;
    grid-row: 1 / 3;
}

.bc-company-showcase__gallery-item.is-secondary-top {
    grid-column: 2;
    grid-row: 1;
}

.bc-company-showcase__gallery-item.is-secondary-bottom {
    grid-column: 2;
    grid-row: 2;
}

.bc-company-showcase__gallery--single .is-primary {
    grid-column: 1 / -1;
}

.bc-company-showcase__gallery--double .is-primary {
    grid-column: 1;
}

.bc-company-showcase__gallery--double .is-secondary-top {
    grid-column: 2;
    grid-row: 1 / 3;
}

.bc-company-showcase__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}


/* =========================================================
   PRODUCTION VIDEO LINK
========================================================= */

.bc-company-showcase__production-link {
    position: absolute;
    z-index: 2;
    bottom: var(--bc-space-5);
    left: var(--bc-space-5);
    display: none;
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-white);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 700;
    line-height: var(--bc-line-height-small);
    text-decoration: none;
}

.bc-company-showcase__gallery-item.is-primary .bc-company-showcase__production-link {
    display: inline-flex;
}

.bc-company-showcase__production-link::before {
    position: absolute;
    z-index: -1;
    inset: calc(var(--bc-space-3) * -1);
    border-radius: var(--bc-radius-sm);
    background: color-mix(in srgb, var(--bc-color-black) 54%, transparent);
    content: "";
}

.bc-company-showcase__play {
    display: grid;

    width: var(--bc-space-9);
    height: var(--bc-space-9);
    flex: 0 0 var(--bc-space-9);

    place-items: center;

    border: 1px solid var(--bc-color-white);
    border-radius: var(--bc-radius-sm);

    color: var(--bc-color-white);
    background: var(--bc-color-button);

    transition:
        background-color var(--bc-transition),
        border-color var(--bc-transition);
}

.bc-company-showcase__play svg {
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    fill: currentColor;
    stroke: none;
}

.bc-company-showcase__production-link:focus-visible {
    color: var(--bc-color-white);
}

@media (hover: hover) and (pointer: fine) {
    .bc-company-showcase__production-link:hover {
        color: var(--bc-color-white);
    }
}

.bc-company-showcase__production-link:focus-visible .bc-company-showcase__play {
    background: var(--bc-color-button-hover);
}

@media (hover: hover) and (pointer: fine) {
    .bc-company-showcase__production-link:hover .bc-company-showcase__play {
        background: var(--bc-color-button-hover);
    }
}


/* =========================================================
   GALLERY CONTROLS
========================================================= */

.bc-company-showcase__gallery-controls {
    display: flex;
    min-height: var(--bc-space-10);
    margin-top: var(--bc-space-3);
    padding-inline: var(--bc-space-4);
    align-items: center;
    gap: var(--bc-space-5);
}

.bc-company-showcase__counter {
    display: flex;
    align-items: center;
    gap: var(--bc-space-2);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-caption);
    font-weight: 700;
    line-height: var(--bc-line-height-small);
}

.bc-company-showcase__counter strong {
    color: var(--bc-color-accent);
}

.bc-company-showcase__gallery-navigation {
    display: flex;
    align-items: center;
    gap: var(--bc-space-1);
}

.bc-company-showcase__gallery-arrow {
    display: grid;
    width: var(--bc-space-8);
    height: var(--bc-space-8);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: var(--bc-radius-sm);
    color: var(--bc-color-primary);
    background: transparent;
    cursor: pointer;
    transition:
        color var(--bc-transition),
        background-color var(--bc-transition);
}

.bc-company-showcase__gallery-arrow:focus-visible {
    color: var(--bc-color-white);
    background: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-company-showcase__gallery-arrow:hover {
        color: var(--bc-color-white);
        background: var(--bc-color-primary);
    }
}

.bc-company-showcase__gallery-arrow svg {
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}


/* =========================================================
   FACTS / RIGHT COLUMN
========================================================= */

.bc-company-showcase__facts {
    display: flex;
    flex-direction: column;
}

.bc-company-showcase__years {
    display: flex;
    padding-bottom: var(--bc-space-5);
    align-items: flex-end;
    gap: var(--bc-space-4);
    border-bottom: 1px solid var(--bc-color-border);
}

.bc-company-showcase__years strong {
    display: flex;
    align-items: flex-start;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h1);
    font-weight: 800;
    line-height: var(--bc-line-height-h1);
}

.bc-company-showcase__years strong span {
    color: var(--bc-color-text);
}

.bc-company-showcase__years > span {
    max-width: var(--bc-space-14);
    padding-bottom: var(--bc-space-2);
    color: var(--bc-color-primary);
    font-size: var(--bc-font-size-caption);
    font-weight: 700;
    line-height: var(--bc-line-height-small);
}

.bc-company-showcase__history {
    padding-block: var(--bc-space-5);
    border-bottom: 1px solid var(--bc-color-border);
}

.bc-company-showcase__history h3 {
    margin: 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h5);
    font-weight: 600;
    line-height: var(--bc-line-height-h5);
}

.bc-company-showcase__history p {
    margin: var(--bc-space-3) 0 0;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-body-sm);
    line-height: var(--bc-line-height-small);
}


/* =========================================================
   METRICS
========================================================= */

.bc-company-showcase__metrics {
    display: grid;
    padding-block: var(--bc-space-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--bc-color-border);
}

.bc-company-showcase__metric {
    min-width: 0;
}

.bc-company-showcase__metric + .bc-company-showcase__metric {
    padding-left: var(--bc-space-6);
    border-left: 1px solid var(--bc-color-border);
}

.bc-company-showcase__metric-value {
    display: flex;
    align-items: baseline;
    gap: var(--bc-space-2);
}

.bc-company-showcase__metric-value strong {
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h3);
    font-weight: 700;
    line-height: var(--bc-line-height-h3);
}

.bc-company-showcase__metric-value span {
    color: var(--bc-color-text);
    font-size: var(--bc-font-size-body);
    font-weight: 700;
    line-height: var(--bc-line-height-small);
}

.bc-company-showcase__metric p {
    margin: var(--bc-space-2) 0 0;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-body-sm);
    line-height: var(--bc-line-height-small);
}


/* =========================================================
   LINKS
========================================================= */

.bc-company-showcase__links {
    display: grid;
}

.bc-company-showcase__link {
    display: grid;
    min-height: var(--bc-space-11);
    grid-template-columns: minmax(0, 1fr) var(--bc-space-8);
    align-items: center;
    gap: var(--bc-space-3);
    border-bottom: 1px solid var(--bc-color-border);
    color: var(--bc-color-text);
    font-size: 16px;
    font-weight: 700;
    line-height: var(--bc-line-height-small);
    text-decoration: none;
    transition:
        color var(--bc-transition),
        padding-left var(--bc-transition);
}

.bc-company-showcase__link:focus-visible {
    padding-left: var(--bc-space-2);
    color: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-company-showcase__link:hover {
        padding-left: var(--bc-space-2);
        color: var(--bc-color-primary);
    }
}

.bc-company-showcase__link svg {
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    justify-self: end;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.bc-company-showcase__link.is-static {
    color: var(--bc-color-text-muted);
}


/* =========================================================
   FALLBACK
========================================================= */

.bc-company-showcase__fallback {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    place-items: center;
    overflow: hidden;
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-background);
}

.bc-company-showcase__factory-mark {
    width: 68%;
    fill: none;
    stroke: var(--bc-color-primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    opacity: 0.16;
}


/* =========================================================
   <= 1199
========================================================= */

@media (max-width: 1199px) {
    .bc-company-showcase__header,
    .bc-company-showcase__body {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    }

    .bc-company-showcase__gallery {
        aspect-ratio: 1.8 / 1;
    }
}


/* =========================================================
   <= 991
========================================================= */

@media (max-width: 991px) {
    .bc-company-showcase {
        padding-block: var(--bc-section-sm);
    }

    .bc-company-showcase__header {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--bc-space-7);
        gap: var(--bc-space-4);
    }

    .bc-company-showcase__intro {
        max-width: var(--bc-container-narrow);
        justify-self: start;
    }

    .bc-company-showcase__body {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--bc-space-8);
    }

    .bc-company-showcase__facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--bc-grid-gap-lg);
    }

    .bc-company-showcase__years,
    .bc-company-showcase__history {
        align-self: stretch;
    }

    .bc-company-showcase__metrics,
    .bc-company-showcase__links {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   MOBILE
   Header -> facts -> ONE image slider.
========================================================= */

@media (max-width: 767px) {
    .bc-company-showcase__header {
        margin-bottom: var(--bc-space-6);
    }

    .bc-company-showcase__title {
        font-size: var(--bc-font-size-h3);
        line-height: var(--bc-line-height-h3);
    }

    .bc-company-showcase__intro p {
        font-size: var(--bc-font-size-body-sm);
        line-height: var(--bc-line-height-small);
    }

    .bc-company-showcase__body {
        gap: var(--bc-space-7);
    }

    .bc-company-showcase__facts {
        order: 1;
        display: block;
    }

    .bc-company-showcase__visual {
        order: 2;
    }

    .bc-company-showcase__gallery {
        display: block;
        aspect-ratio: 4 / 3;
        touch-action: pan-y;
    }

    .bc-company-showcase__gallery-item.is-primary {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    .bc-company-showcase__gallery-item.is-secondary-top,
    .bc-company-showcase__gallery-item.is-secondary-bottom {
        display: none;
    }

    .bc-company-showcase__gallery--single .is-primary,
    .bc-company-showcase__gallery--double .is-primary {
        position: absolute;
        inset: 0;
    }

    .bc-company-showcase__production-link {
        right: var(--bc-space-4);
        bottom: var(--bc-space-4);
        left: var(--bc-space-4);
    }

    .bc-company-showcase__gallery-controls {
        min-height: var(--bc-space-9);
        margin-top: var(--bc-space-2);
        padding-inline: 0;
    }

    .bc-company-showcase__years {
        padding-block: var(--bc-space-5);
        border-top: 1px solid var(--bc-color-border);
    }

    .bc-company-showcase__years strong {
        font-size: var(--bc-font-size-h2);
        line-height: var(--bc-line-height-h2);
    }

    .bc-company-showcase__history,
    .bc-company-showcase__metrics {
        padding-block: var(--bc-space-5);
    }

    .bc-company-showcase__metric + .bc-company-showcase__metric {
        padding-left: var(--bc-space-5);
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 479px) {
    .bc-company-showcase__metric + .bc-company-showcase__metric {
        padding-left: var(--bc-space-4);
    }

    .bc-company-showcase__metric-value strong {
        font-size: var(--bc-font-size-h4);
        line-height: var(--bc-line-height-h4);
    }

    .bc-company-showcase__metric-value span {
        font-size: var(--bc-font-size-body-sm);
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .bc-company-showcase__gallery-item.is-primary,
    .bc-company-showcase__gallery-item.is-secondary-top,
    .bc-company-showcase__gallery-item.is-secondary-bottom {
        animation: none;
    }

    .bc-company-showcase__play,
    .bc-company-showcase__gallery-arrow,
    .bc-company-showcase__link {
        transition: none;
    }
}




/* ================================================================================================================== */


/* =========================================================
   BC BRICK — HOMEPAGE ADVANTAGES
========================================================= */

.bc-benefits {
    position: relative;
    overflow: hidden;
    padding-block: var(--bc-section-md);
    padding-bottom: 0;
    color: var(--bc-color-text);
    background: var(--bc-color-background);
}

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


/* =========================================================
   HEADER
========================================================= */

.bc-benefits__header {
    display: grid;
    margin-bottom: var(--bc-space-8);
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.75fr);
    align-items: end;
    gap: var(--bc-grid-gap-lg);
}

.bc-benefits__heading {
    min-width: 0;
}

.bc-benefits__eyebrow {
	display: flex;
    margin: 0 0 var(--bc-space-3);
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-accent);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bc-benefits__eyebrow::before {
    width: var(--bc-space-6);
    height: 2px;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
}

.bc-benefits__title {
    max-width: var(--bc-container-content);
    margin: 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h2);
    font-weight: 700;
    line-height: var(--bc-line-height-h2);
}

.bc-benefits__description {
    max-width: var(--bc-container-narrow);
    margin: 0;
    justify-self: end;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-body);
    line-height: var(--bc-line-height-body);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.bc-benefits__layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.84fr) minmax(0, 1.56fr);
    align-items: stretch;
    gap: var(--bc-grid-gap-lg);
}

.bc-benefits__visual,
.bc-benefits__rows {
    min-width: 0;
}


/* =========================================================
   VISUAL
========================================================= */

.bc-benefits__visual {
    display: flex;
}

.bc-benefits__media {
    position: relative;
    width: 100%;
    min-height: calc((var(--bc-space-15) * 4) + var(--bc-space-6));
    overflow: hidden;
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-background);
}

.bc-benefits__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.bc-benefits__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 52%,
        color-mix(in srgb, var(--bc-color-black) 42%, transparent) 100%
    );
    content: "";
    pointer-events: none;
}


/* =========================================================
   IMAGE FALLBACK
========================================================= */

.bc-benefits__image-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: calc((var(--bc-space-15) * 4) + var(--bc-space-6));
    place-items: center;
    background: var(--bc-color-background);
}

.bc-benefits__image-fallback svg {
    width: 68%;
    fill: none;
    stroke: var(--bc-color-primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    opacity: 0.18;
}

.bc-benefits__image-fallback .is-accent {
    stroke: var(--bc-color-accent);
}


/* =========================================================
   STATS OVERLAY
========================================================= */

.bc-benefits__stats {
    position: absolute;
    z-index: 3;
    right: var(--bc-space-5);
    bottom: var(--bc-space-5);
    left: var(--bc-space-5);
    display: grid;
    padding: var(--bc-space-5);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 0;
    border-radius: var(--bc-radius-sm);
    color: var(--bc-color-white);
    background: var(--bc-color-primary);
}

.bc-benefits__stat {
    min-width: 0;
    padding-inline: var(--bc-space-4);
}

.bc-benefits__stat:first-child {
    padding-left: 0;
}

.bc-benefits__stat:last-child {
    padding-right: 0;
}

.bc-benefits__stat + .bc-benefits__stat {
    border-left: 1px solid color-mix(
        in srgb,
        var(--bc-color-white) 28%,
        transparent
    );
}

.bc-benefits__stat strong {
    display: block;
    color: var(--bc-color-white);
    font-family: var(--bc-font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: var(--bc-line-height-h5);
    white-space: nowrap;
}

.bc-benefits__stat span {
    display: block;
    margin-top: var(--bc-space-2);
    color: color-mix(
        in srgb,
        var(--bc-color-white) 86%,
        transparent
    );
    font-size: var(--bc-font-size-caption);
    font-weight: 600;
    line-height: var(--bc-line-height-small);
}


/* =========================================================
   BENEFITS ROWS
   Each visual row is a real wrapper, so separators cannot drift.
========================================================= */

.bc-benefits__rows {
    display: grid;
    min-width: 0;
}

.bc-benefits__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--bc-grid-gap-lg);
    padding-block: var(--bc-space-5);
    border-bottom: 1px solid var(--bc-color-border);
}

.bc-benefits__row:first-child {
    padding-top: 0;
}

.bc-benefits__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}


/* =========================================================
   BENEFIT
========================================================= */

.bc-benefit {
    display: grid;
    min-width: 0;
    grid-template-columns:
        var(--bc-space-9)
        1px
        var(--bc-space-10)
        minmax(0, 1fr);
    align-items: start;
    gap: var(--bc-space-4);
}

.bc-benefit__number {
    display: block;
    color: var(--bc-color-accent);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h4);
    font-weight: 700;
    line-height: var(--bc-line-height-h4);
    transition: color var(--bc-transition);
}

.bc-benefit__divider {
    width: 1px;
    height: var(--bc-space-10);
    background: var(--bc-color-border);
}

.bc-benefit__icon {
    display: grid;
    width: var(--bc-space-10);
    height: var(--bc-space-10);
    place-items: center;
    color: var(--bc-color-primary);
}

.bc-benefit__icon svg {
    width: var(--bc-space-9);
    height: var(--bc-space-9);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
    transition: color var(--bc-transition);
}

.bc-benefit__icon .is-accent {
    stroke: var(--bc-color-accent);
}

.bc-benefit__content {
    min-width: 0;
}

.bc-benefit__title {
    margin: 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h6);
    font-weight: 700;
    line-height: var(--bc-line-height-h6);
    text-wrap: balance;
}

.bc-benefit__text {
    margin: var(--bc-space-3) 0 0;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-body-sm);
    line-height: var(--bc-line-height-body);
}


/* =========================================================
   SUBTLE INTERACTION — NO MOVEMENT
========================================================= */

@media (hover: hover) and (pointer: fine) {
    .bc-benefit:hover .bc-benefit__icon svg {
        color: var(--bc-color-accent);
    }

    .bc-benefit:hover .bc-benefit__number {
        color: var(--bc-color-primary);
    }
}


/* =========================================================
   <= 1199
========================================================= */

@media (max-width: 1199px) {
    .bc-benefits__header {
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
    }

    .bc-benefits__layout {
        grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.42fr);
        gap: var(--bc-grid-gap);
    }

    .bc-benefits__row {
        column-gap: var(--bc-grid-gap);
    }

    .bc-benefit {
        grid-template-columns:
            var(--bc-space-8)
            1px
            var(--bc-space-9)
            minmax(0, 1fr);
        gap: var(--bc-space-3);
    }

    .bc-benefit__number {
        font-size: var(--bc-font-size-h5);
        line-height: var(--bc-line-height-h5);
    }

    .bc-benefit__divider {
        height: var(--bc-space-9);
    }

    .bc-benefit__icon,
    .bc-benefit__icon svg {
        width: var(--bc-space-9);
        height: var(--bc-space-9);
    }

    .bc-benefit__title {
        font-size: var(--bc-font-size-body);
        line-height: var(--bc-line-height-small);
    }

    .bc-benefit__text {
        font-size: var(--bc-font-size-caption);
    }
}


/* =========================================================
   <= 991
========================================================= */

@media (max-width: 991px) {
    .bc-benefits {
        padding-block: var(--bc-section-sm);
    }

    .bc-benefits__header {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--bc-space-7);
        gap: var(--bc-space-4);
    }

    .bc-benefits__description {
        max-width: var(--bc-container-narrow);
        justify-self: start;
    }

    .bc-benefits__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--bc-space-7);
    }

    .bc-benefits__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .bc-benefits__row {
        column-gap: var(--bc-grid-gap);
    }

    .bc-benefit {
        min-height: 0;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .bc-benefits__title {
        font-size: var(--bc-font-size-h3);
        line-height: var(--bc-line-height-h3);
    }

    .bc-benefits__description {
        font-size: var(--bc-font-size-body-sm);
    }

    .bc-benefits__media {
        aspect-ratio: 4 / 3;
    }


    .bc-benefits__stats {
        right: var(--bc-space-4);
        bottom: var(--bc-space-4);
        left: var(--bc-space-4);
        padding: var(--bc-space-4);
    }

    .bc-benefits__stat {
        padding-inline: var(--bc-space-3);
    }

    .bc-benefits__stat strong,
    .bc-benefits__stat:nth-child(2) strong {
        font-size: var(--bc-font-size-h6);
        line-height: var(--bc-line-height-h6);
    }

    .bc-benefits__stat span {
        font-size: var(--bc-font-size-caption);
    }

    .bc-benefits__row {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 0;
        border-bottom: 0;
    }

    .bc-benefit {
        padding-block: var(--bc-space-5);
        grid-template-columns:
            var(--bc-space-8)
            1px
            var(--bc-space-9)
            minmax(0, 1fr);
        border-bottom: 1px solid var(--bc-color-border);
    }

    .bc-benefits__row:first-child .bc-benefit:first-child {
        padding-top: 0;
    }

    .bc-benefits__row:last-child .bc-benefit:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .bc-benefit__title {
        font-size: var(--bc-font-size-body);
    }

    .bc-benefit__text {
        font-size: var(--bc-font-size-body-sm);
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 479px) {
    .bc-benefits__media {
        display: flex;
        min-height: 0;
        aspect-ratio: auto;
        flex-direction: column;
        overflow: hidden;
    }

    .bc-benefits__image {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .bc-benefits__image-fallback {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .bc-benefits__media::after {
        display: none;
    }


    .bc-benefits__stats {
        position: static;
        display: grid;
        width: auto;
        margin: 0;
        padding: var(--bc-space-4);
        grid-template-columns: minmax(0, 1fr);
        border-radius: 0;
        background: var(--bc-color-primary);
    }

    .bc-benefits__stat {
        padding: var(--bc-space-3) 0;
    }

    .bc-benefits__stat + .bc-benefits__stat {
        border-top: 1px solid color-mix(
            in srgb,
            var(--bc-color-white) 28%,
            transparent
        );
        border-left: 0;
    }

    .bc-benefits__stat strong,
    .bc-benefits__stat:nth-child(2) strong {
        font-size: var(--bc-font-size-h5);
        line-height: var(--bc-line-height-h5);
    }

    .bc-benefit {
        grid-template-columns: var(--bc-space-7) 1px var(--bc-space-8) minmax(0, 1fr);
        gap: var(--bc-space-3);
    }

    .bc-benefit__number {
        font-size: var(--bc-font-size-h6);
        line-height: var(--bc-line-height-h6);
    }

    .bc-benefit__divider {
        height: var(--bc-space-8);
    }

    .bc-benefit__icon,
    .bc-benefit__icon svg {
        width: var(--bc-space-8);
        height: var(--bc-space-8);
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .bc-benefit__icon svg,
    .bc-benefit__number {
        transition: none;
    }
}





/* ================================================================================================================== */



/* =========================================================
   BC BRICK — HOMEPAGE PROJECTS
========================================================= */

.bc-home-projects {
    --bc-projects-gap: var(--bc-grid-gap);
    --bc-projects-media-height: clamp(320px, 28vw, 430px);
    --bc-projects-motion: 0.56s cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
    overflow: hidden;
    padding-block: var(--bc-section-md);
    color: var(--bc-color-text);
    background: var(--bc-color-background-soft);
}

.bc-home-projects *,
.bc-home-projects *::before,
.bc-home-projects *::after {
    box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.bc-home-projects__header {
    display: grid;
    margin-bottom: var(--bc-space-9);
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(0, 1fr);
    align-items: end;
    gap: var(--bc-grid-gap-lg);
}

.bc-home-projects__heading {
    min-width: 0;
}

.bc-home-projects__eyebrow {
	display: flex;
    margin: 0 0 var(--bc-space-3);
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-accent);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bc-home-projects__eyebrow::before {
    width: var(--bc-space-6);
    height: 2px;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
}

.bc-home-projects__title {
    max-width: var(--bc-container-content);
    margin: 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h2);
    font-weight: 700;
    line-height: var(--bc-line-height-h2);
    letter-spacing: -0.03em;
}

.bc-home-projects__header-side {
    display: grid;
    min-width: 0;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: var(--bc-space-7);
}

.bc-home-projects__description {
    max-width: var(--bc-container-narrow);
    margin: 0;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-body);
    line-height: var(--bc-line-height-body);
}


/* =========================================================
   GLOBAL OUTLINE BUTTON ADAPTATION
========================================================= */

.bc-home-projects__archive-link {
    justify-self: end;
    flex: 0 0 auto;
    white-space: nowrap;
}

.bc-home-projects__archive-link svg {
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform var(--bc-transition);
}

.bc-home-projects__archive-link:focus-visible svg {
    transform: translateX(var(--bc-space-1));
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-projects__archive-link:hover svg {
        transform: translateX(var(--bc-space-1));
    }
}


/* =========================================================
   VIEWPORT / STAGE
========================================================= */

.bc-home-projects__viewport {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: pan-y;
}

.bc-home-projects__viewport:focus-visible {
    border-radius: var(--bc-radius-sm);
    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--bc-color-focus) 36%,
            transparent
        );
}

.bc-home-projects__stage {
    position: relative;
    height:
        calc(
            var(--bc-space-12)
            + var(--bc-projects-media-height)
        );
}


/* =========================================================
   SLIDER POSITIONING
========================================================= */

.bc-home-project {
    position: absolute;
    top: 0;
    width:
        calc(
            25%
            - var(--bc-projects-gap)
        );
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translateZ(0);
    transition:
        left var(--bc-projects-motion),
        width var(--bc-projects-motion),
        opacity 0.3s ease;
    will-change: left, width, opacity;
}

.bc-home-project.is-main {
    left: 0;
    width: 50%;
    z-index: 4;
    opacity: 1;
    pointer-events: auto;
}

.bc-home-project.is-secondary-1 {
    left:
        calc(
            50%
            + var(--bc-projects-gap)
        );
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
}

.bc-home-project.is-secondary-2 {
    left:
        calc(
            75%
            + var(--bc-projects-gap)
        );
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
}

.bc-home-project.is-before {
    left:
        calc(
            -50%
            - var(--bc-projects-gap)
        );
    width: 50%;
    z-index: 1;
    opacity: 0;
}

.bc-home-project.is-after {
    left:
        calc(
            100%
            + var(--bc-projects-gap)
        );
    z-index: 1;
    opacity: 0;
}


/* =========================================================
   PROJECT CONTENT
========================================================= */

.bc-home-project__link {
    display: grid;
    height: 100%;
    grid-template-rows:
        var(--bc-space-12)
        minmax(0, 1fr);
    color: inherit;
    text-decoration: none;
}

.bc-home-project__head {
    min-width: 0;
    padding-right: var(--bc-space-4);
}

.bc-home-project__meta {
    display: flex;
    margin: 0 0 var(--bc-space-2);
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-caption);
    font-weight: 700;
    line-height: var(--bc-line-height-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bc-home-project__number {
    color: var(--bc-color-accent);
    font-size: var(--bc-font-size-body-sm);
    letter-spacing: 0;
}

.bc-home-project__slash {
    color: var(--bc-color-border);
}

.bc-home-project__location {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   TITLE — SAME H5/H6 RULES AS MAIN.CSS
========================================================= */

.bc-home-project__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h6);
    font-weight: 600;
    line-height: var(--bc-line-height-h6);
    letter-spacing: -0.01em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition:
        font-size var(--bc-transition),
        line-height var(--bc-transition);
}

.bc-home-project.is-main .bc-home-project__title {
    font-size: var(--bc-font-size-h5);
    font-weight: 600;
    line-height: var(--bc-line-height-h5);
    letter-spacing: -0.015em;
}


/* =========================================================
   MEDIA
========================================================= */

.bc-home-project__media {
    position: relative;
    overflow: hidden;
    height: 100%;
    border: 1px solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-background);
    transition:
        border-color var(--bc-transition),
        box-shadow var(--bc-transition);
}

.bc-home-project__link:focus-visible .bc-home-project__media {
    border-color: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-project__link:hover .bc-home-project__media {
        border-color: var(--bc-color-primary);
    }
}

.bc-home-project__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform: scale(1.001);
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.bc-home-project__link:focus-visible .bc-home-project__image {
    transform: scale(1.015);
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-project__link:hover .bc-home-project__image {
        transform: scale(1.015);
    }
}

.bc-home-project__fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background: var(--bc-color-background);
}

.bc-home-project__fallback svg {
    width: 56%;
    fill: none;
    stroke: var(--bc-color-primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    opacity: 0.16;
}


/* =========================================================
   OPEN MARK — SMALLER, SAME UI SCALE AS SITE
========================================================= */

.bc-home-project__open {
    position: absolute;
    right: var(--bc-space-3);
    bottom: var(--bc-space-3);
    display: grid;
    width: var(--bc-space-10);
    height: var(--bc-space-10);
    place-items: center;
    border-radius: var(--bc-radius-sm);
    color: var(--bc-color-white);
    background: var(--bc-color-button);
    opacity: 0;
    transform: translateY(var(--bc-space-2));
    transition:
        opacity var(--bc-transition),
        transform var(--bc-transition),
        background-color var(--bc-transition);
}

.bc-home-project.is-main .bc-home-project__open {
    opacity: 1;
    transform: translateY(0);
}

.bc-home-project__open svg {
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.bc-home-project__link:focus-visible .bc-home-project__open {
    background: var(--bc-color-button-hover);
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-project__link:hover .bc-home-project__open {
        background: var(--bc-color-button-hover);
    }
}


/* =========================================================
   FOOTER
========================================================= */

.bc-home-projects__footer {
    display: grid;
    margin-top: var(--bc-space-5);
    grid-template-columns:
        auto
        minmax(120px, 1fr)
        auto;
    align-items: center;
    gap: var(--bc-space-7);
}

.bc-home-projects__counter {
    display: flex;
    align-items: center;
    gap: var(--bc-space-2);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 600;
    line-height: var(--bc-line-height-small);
}

.bc-home-projects__counter strong {
    color: var(--bc-color-accent);
    font-weight: 700;
}

.bc-home-projects__progress {
    position: relative;
    height: 1px;
    overflow: hidden;
    background: var(--bc-color-border);
}

.bc-home-projects__progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bc-color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition:
        transform var(--bc-projects-motion);
}


/* =========================================================
   NAVIGATION
========================================================= */

.bc-home-projects__navigation {
    display: flex;
    align-items: center;
    gap: var(--bc-space-2);
}

.bc-home-projects__arrow {
    display: grid;
    width: var(--bc-space-9);
    height: var(--bc-space-9);
    padding: 0;
    place-items: center;
    border: 1px solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    color: var(--bc-color-primary);
    background: var(--bc-color-background);
    cursor: pointer;
    transition:
        color var(--bc-transition),
        border-color var(--bc-transition),
        background-color var(--bc-transition);
}

.bc-home-projects__arrow:focus-visible {
    border-color: var(--bc-color-primary);
    color: var(--bc-color-white);
    background: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-projects__arrow:hover {
        border-color: var(--bc-color-primary);
        color: var(--bc-color-white);
        background: var(--bc-color-primary);
    }
}

.bc-home-projects__arrow svg {
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}


/* =========================================================
   <= 1199
========================================================= */

@media (max-width: 1199px) {

    .bc-home-projects {
        --bc-projects-media-height: clamp(300px, 31vw, 390px);
    }

    .bc-home-projects__header {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(0, 1fr);
    }

    .bc-home-projects__header-side {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--bc-space-4);
    }

    .bc-home-projects__archive-link {
        justify-self: start;
    }
}


/* =========================================================
   <= 991
========================================================= */

@media (max-width: 991px) {

    .bc-home-projects {
        --bc-projects-media-height: 420px;

        padding-block: var(--bc-section-sm);
    }

    .bc-home-projects__header {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--bc-space-7);
        gap: var(--bc-space-5);
    }

    .bc-home-projects__header-side {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        align-items: end;
        gap: var(--bc-space-6);
    }

    .bc-home-projects__description {
        max-width: var(--bc-container-narrow);
    }

    .bc-home-project.is-main {
        width: 62%;
    }

    .bc-home-project.is-secondary-1 {
        left:
            calc(
                62%
                + var(--bc-projects-gap)
            );
        width:
            calc(
                38%
                - var(--bc-projects-gap)
            );
    }

    .bc-home-project.is-secondary-2,
    .bc-home-project.is-after {
        left:
            calc(
                100%
                + var(--bc-projects-gap)
            );
        width:
            calc(
                38%
                - var(--bc-projects-gap)
            );
        opacity: 0;
        pointer-events: none;
    }

    .bc-home-project.is-before {
        left:
            calc(
                -62%
                - var(--bc-projects-gap)
            );
        width: 62%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .bc-home-projects {
        --bc-projects-media-height: min(116vw, 440px);
    }

    .bc-home-projects__title {
        font-size: var(--bc-font-size-h3);
        line-height: var(--bc-line-height-h3);
        letter-spacing: -0.025em;
    }

    .bc-home-projects__header-side {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--bc-space-4);
    }

    .bc-home-projects__description {
        font-size: var(--bc-font-size-body-sm);
    }

    .bc-home-projects__archive-link {
        justify-self: stretch;
        width: 100%;
    }

    .bc-home-project {
        width: 100%;
    }

    .bc-home-project.is-main {
        left: 0;
        width: 100%;
    }

    .bc-home-project.is-secondary-1 {
        left:
            calc(
                100%
                + var(--bc-projects-gap)
            );
        width: 100%;
        opacity: 0;
        pointer-events: none;
    }

    .bc-home-project.is-secondary-2,
    .bc-home-project.is-after {
        left:
            calc(
                200%
                + (var(--bc-projects-gap) * 2)
            );
        width: 100%;
        opacity: 0;
        pointer-events: none;
    }

    .bc-home-project.is-before {
        left:
            calc(
                -100%
                - var(--bc-projects-gap)
            );
        width: 100%;
    }

    .bc-home-project__head {
        padding-right: 0;
    }

    .bc-home-project__title,
    .bc-home-project.is-main .bc-home-project__title {
        font-size: var(--bc-font-size-h6);
        font-weight: 600;
        line-height: var(--bc-line-height-h6);
        letter-spacing: -0.01em;
    }

    .bc-home-project__open {
        right: var(--bc-space-2);
        bottom: var(--bc-space-2);
        width: var(--bc-space-9);
        height: var(--bc-space-9);
    }

    .bc-home-projects__footer {
        margin-top: var(--bc-space-4);
        gap: var(--bc-space-4);
    }

    .bc-home-projects__arrow {
        width: var(--bc-space-8);
        height: var(--bc-space-8);
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bc-home-project,
    .bc-home-project__title,
    .bc-home-project__image,
    .bc-home-project__media,
    .bc-home-project__open,
    .bc-home-projects__progress-bar,
    .bc-home-projects__arrow,
    .bc-home-projects__archive-link svg {
        transition: none;
    }
}


/* ================================================================================================================== */


/* =========================================================
   HOMEPAGE — FACTORY STATISTICS
   COMPACT DARK STATS
========================================================= */

.bc-factory-stats {
    position: relative;

    padding:
        clamp(46px, 4.5vw, 64px)
        0;

    overflow: hidden;

    background:
        var(--bc-color-primary);
}


/* =========================================================
   INNER
========================================================= */

.bc-factory-stats__inner {
    position: relative;
}


/* =========================================================
   GRID
========================================================= */

.bc-factory-stats__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(12px, 1.5vw, 18px);
}


/* =========================================================
   ITEM
========================================================= */

.bc-factory-stats__item {
    position: relative;

    display: flex;

    min-width: 0;
    min-height: 220px;

    padding:
        24px
        clamp(20px, 2vw, 30px);

    align-items: center;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--bc-radius-sm);

    background:
        rgba(255, 255, 255, 0.055);

    box-shadow: none;

    text-align: center;

    transition:
        background-color var(--bc-transition),
        border-color var(--bc-transition),
        transform var(--bc-transition);
}


/*
 * Маленький акцент.
 * Не декоративна полоска на пів блока.
 */

.bc-factory-stats__item::before {
    position: absolute;

    top: 0;
    left: 50%;

    width: 38px;
    height: 3px;

    background:
        var(--bc-color-accent);

    content: "";

    transform:
        translateX(-50%);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {
    .bc-factory-stats__item:hover {
        border-color:
            rgba(255, 255, 255, 0.20);

        background:
            rgba(255, 255, 255, 0.085);

        transform:
            translateY(-2px);
    }
}


/* =========================================================
   ICON
========================================================= */

.bc-factory-stats__icon {
    display: grid;

    width: 52px;
    height: 52px;

    margin:
        0
        auto
        14px;

    flex: 0 0 52px;

    place-items: center;

    color:
        var(--bc-color-white);
}


/*
 * Іконки тепер нормального розміру.
 */

.bc-factory-stats__icon svg {
    display: block;

    width: 46px;
    height: 46px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.35;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        color var(--bc-transition),
        transform var(--bc-transition);
}

.bc-factory-stats__icon .is-accent {
    stroke:
        var(--bc-color-accent);
}

@media (hover: hover) and (pointer: fine) {
    .bc-factory-stats__item:hover
    .bc-factory-stats__icon svg {
        color:
            #ffffff;

        transform:
            translateY(-2px);
    }
}


/* =========================================================
   CONTENT
========================================================= */

.bc-factory-stats__content {
    display: flex;

    width: 100%;
    min-width: 0;

    margin: 0;

    align-items: center;
    flex-direction: column;
}


/* =========================================================
   METRIC
========================================================= */

.bc-factory-stats__metric {
    display: flex;

    width: 100%;
    min-width: 0;
    min-height: 58px;

    margin: 0;

    align-items: baseline;
    justify-content: center;

    gap: 7px;

    color:
        var(--bc-color-white);

    font-family:
        var(--bc-font-heading);

    font-size:
        clamp(52px, 4.2vw, 66px);

    font-weight: 700;

    line-height: 0.95;

    letter-spacing: -0.055em;

    white-space: nowrap;
}


/* =========================================================
   NUMBER
========================================================= */

.bc-factory-stats__value {
    font-variant-numeric:
        tabular-nums lining-nums;
}


/*
 * Довге число фізично не влазить
 * у тому самому кеглі, тому тільки його
 * трохи зменшуємо.
 */

.bc-factory-stats__item--2
.bc-factory-stats__metric {
    font-size:
        clamp(36px, 3.15vw, 48px);

    letter-spacing: -0.045em;
}


/* =========================================================
   UNIT
========================================================= */

.bc-factory-stats__unit {
    color:
        var(--bc-color-accent);

    font-family:
        var(--bc-font-main);

    font-size: 0.23em;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.02em;

    text-transform: uppercase;
}


/*
 * "+" — частина показника,
 * тому робимо його помітнішим.
 */

.bc-factory-stats__item--3
.bc-factory-stats__unit {
    margin-left: -3px;

    font-family:
        var(--bc-font-heading);

    font-size: 0.46em;
    font-weight: 700;

    letter-spacing: -0.03em;

    text-transform: none;
}


/* =========================================================
   LABEL
========================================================= */

.bc-factory-stats__label {
    width: 100%;
    max-width: 260px;

    margin:
        11px
        auto
        0;

    color:
        rgba(255, 255, 255, 0.72);

    font-family:
        var(--bc-font-main);

    font-size: 14px;
    font-weight: 500;

    line-height: 1.35;

    text-align: center;
}


/* =========================================================
   REVEAL
========================================================= */

.bc-factory-stats.is-ready
.bc-factory-stats__item {
    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        background-color var(--bc-transition),
        border-color var(--bc-transition);
}

.bc-factory-stats.is-ready.is-visible
.bc-factory-stats__item {
    opacity: 1;

    transform:
        translateY(0);
}

.bc-factory-stats.is-ready
.bc-factory-stats__item--2 {
    transition-delay: 0.06s;
}

.bc-factory-stats.is-ready
.bc-factory-stats__item--3 {
    transition-delay: 0.12s;
}


/* =========================================================
   <= 1199
========================================================= */

@media (max-width: 1199px) {

    .bc-factory-stats__item {
        min-height: 210px;

        padding:
            22px
            18px;
    }

    .bc-factory-stats__icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }

    .bc-factory-stats__icon svg {
        width: 42px;
        height: 42px;
    }

    .bc-factory-stats__metric {
        font-size:
            clamp(48px, 5vw, 60px);
    }

    .bc-factory-stats__item--2
    .bc-factory-stats__metric {
        font-size:
            clamp(32px, 3.4vw, 42px);
    }

    .bc-factory-stats__label {
        font-size: 13px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .bc-factory-stats {
        padding:
            44px
            0;
    }

    .bc-factory-stats__grid {
        gap: 10px;
    }

    .bc-factory-stats__item {
        min-height: 190px;

        padding:
            20px
            14px;
    }

    .bc-factory-stats__icon {
        width: 44px;
        height: 44px;

        margin-bottom: 12px;

        flex-basis: 44px;
    }

    .bc-factory-stats__icon svg {
        width: 38px;
        height: 38px;
    }

    .bc-factory-stats__metric {
        min-height: 52px;

        font-size:
            clamp(42px, 5.3vw, 52px);
    }

    .bc-factory-stats__item--2
    .bc-factory-stats__metric {
        font-size:
            clamp(27px, 3.6vw, 34px);
    }

    .bc-factory-stats__label {
        margin-top: 9px;

        font-size: 12px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .bc-factory-stats {
        padding:
            38px
            0;
    }

    .bc-factory-stats__grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 10px;
    }

    .bc-factory-stats__item {
        min-height: 180px;

        padding:
            22px
            18px;
    }

    .bc-factory-stats__icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }

    .bc-factory-stats__icon svg {
        width: 42px;
        height: 42px;
    }

    .bc-factory-stats__metric {
        font-size:
            clamp(48px, 13vw, 58px);
    }

    .bc-factory-stats__item--2
    .bc-factory-stats__metric {
        font-size:
            clamp(32px, 8vw, 40px);
    }

    .bc-factory-stats__label {
        font-size: 13px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bc-factory-stats__item,
    .bc-factory-stats__icon svg {
        transition: none !important;
    }
}


/* ================================================================================================================== */


/* =========================================================
   BC BRICK — HOMEPAGE FAQ
========================================================= */

.bc-home-faq {
    position: relative;
    padding-block: var(--bc-section-md);
    color: var(--bc-color-text);
    background: var(--bc-color-background);
}

.bc-home-faq *,
.bc-home-faq *::before,
.bc-home-faq *::after {
    box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.bc-home-faq__header {
    display: grid;
    margin-bottom: var(--bc-space-9);
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(0, 1fr);
    align-items: end;
    gap: var(--bc-grid-gap-lg);
}

.bc-home-faq__heading {
    min-width: 0;
}


/* =========================================================
   EYEBROW
========================================================= */

.bc-home-faq__eyebrow {
	display: flex;
    margin: 0 0 var(--bc-space-3);
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-accent);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bc-home-faq__eyebrow::before {
    width: var(--bc-space-6);
    height: 2px;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
}


/* =========================================================
   TITLE
========================================================= */

.bc-home-faq__title {
    max-width: var(--bc-container-content);
    margin: 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h2);
    font-weight: 700;
    line-height: var(--bc-line-height-h2);
    letter-spacing: -0.03em;
    text-wrap: balance;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.bc-home-faq__description {
    max-width: var(--bc-container-narrow);
    margin: 0;
    justify-self: end;
    color: var(--bc-color-text-muted);
    font-family: var(--bc-font-main);
    font-size: var(--bc-font-size-body);
    font-weight: 400;
    line-height: var(--bc-line-height-body);
}


/* =========================================================
   COLUMNS
========================================================= */

.bc-home-faq__columns {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--bc-space-11);
}

.bc-home-faq__column {
    min-width: 0;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.bc-home-faq-item {
    position: relative;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--bc-color-border);
}

.bc-home-faq-item:first-child {
    border-top: 1px solid var(--bc-color-border);
}


/* =========================================================
   SUMMARY
========================================================= */

.bc-home-faq-item__summary {
    display: grid;
    min-height: var(--bc-space-12);
    padding-block: var(--bc-space-4);
    grid-template-columns:
        var(--bc-space-9)
        minmax(0, 1fr);
    align-items: center;
    gap: var(--bc-space-4);
    color: var(--bc-color-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.bc-home-faq-item__summary::-webkit-details-marker {
    display: none;
}

.bc-home-faq-item__summary::marker {
    content: "";
}

.bc-home-faq-item__summary:focus-visible {
    outline: 2px solid var(--bc-color-focus);
    outline-offset: var(--bc-space-1);
    border-radius: var(--bc-radius-sm);
}


/* =========================================================
   TOGGLE
========================================================= */

.bc-home-faq-item__toggle {
    display: grid;
    width: var(--bc-space-9);
    height: var(--bc-space-9);
    place-items: center;
    border: 1px solid var(--bc-color-primary);
    border-radius: var(--bc-radius-sm);
    color: var(--bc-color-white);
    background: var(--bc-color-primary);
    transition:
        color var(--bc-transition),
        background-color var(--bc-transition),
        border-color var(--bc-transition);
}

.bc-home-faq-item__toggle svg {
    display: block;
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(90deg);
    transition: transform var(--bc-transition);
}


/* =========================================================
   QUESTION
========================================================= */

.bc-home-faq-item__question {
    min-width: 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h6);
    font-weight: 600;
    line-height: var(--bc-line-height-h6);
    letter-spacing: -0.01em;
    text-wrap: balance;
    transition: color var(--bc-transition);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {
    .bc-home-faq-item__summary:hover
    .bc-home-faq-item__question {
        color: var(--bc-color-primary);
    }

    .bc-home-faq-item__summary:hover
    .bc-home-faq-item__toggle {
        border-color: var(--bc-color-accent);
        background: var(--bc-color-accent);
    }
}


/* =========================================================
   OPEN
========================================================= */

.bc-home-faq-item[open]
.bc-home-faq-item__question {
    color: var(--bc-color-primary);
}

.bc-home-faq-item[open]
.bc-home-faq-item__toggle {
    color: var(--bc-color-primary);
    border-color: var(--bc-color-primary);
    background: var(--bc-color-background);
}

.bc-home-faq-item[open]
.bc-home-faq-item__toggle svg {
    transform: rotate(0deg);
}


/* =========================================================
   ANSWER
========================================================= */

.bc-home-faq-item__answer {
    max-width: var(--bc-container-narrow);
    padding:
        0
        0
        var(--bc-space-5)
        var(--bc-space-11);
    color: var(--bc-color-text-muted);
    font-family: var(--bc-font-main);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 400;
    line-height: var(--bc-line-height-body);
    animation:
        bc-home-faq-answer-in
        var(--bc-transition);
}

.bc-home-faq-item__answer p {
    margin: 0 0 var(--bc-space-3);
}

.bc-home-faq-item__answer p:last-child {
    margin-bottom: 0;
}

.bc-home-faq-item__answer ul,
.bc-home-faq-item__answer ol {
    margin: var(--bc-space-3) 0;
    padding-left: var(--bc-space-6);
}

.bc-home-faq-item__answer li + li {
    margin-top: var(--bc-space-2);
}

.bc-home-faq-item__answer a {
    color: var(--bc-color-primary);
}


/* =========================================================
   OPEN ANIMATION
========================================================= */

@keyframes bc-home-faq-answer-in {

    from {
        opacity: 0;
        transform:
            translateY(
                calc(var(--bc-space-1) * -1)
            );
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   <= 1199
========================================================= */

@media (max-width: 1199px) {

    .bc-home-faq__header {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(0, 1fr);
    }

    .bc-home-faq__columns {
        column-gap: var(--bc-grid-gap-lg);
    }

}


/* =========================================================
   <= 991
========================================================= */

@media (max-width: 991px) {

    .bc-home-faq {
        padding-block: var(--bc-section-sm);
    }

    .bc-home-faq__header {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--bc-space-7);
        gap: var(--bc-space-4);
    }

    .bc-home-faq__description {
        max-width: var(--bc-container-narrow);
        justify-self: start;
    }

    .bc-home-faq__columns {
        column-gap: var(--bc-grid-gap-lg);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .bc-home-faq__header {
        margin-bottom: var(--bc-space-6);
    }

    .bc-home-faq__columns {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .bc-home-faq__column + .bc-home-faq__column
    .bc-home-faq-item:first-child {
        border-top: 0;
    }

    .bc-home-faq-item__summary {
        min-height: var(--bc-space-11);
        padding-block: var(--bc-space-6);
        grid-template-columns:
            var(--bc-space-8)
            minmax(0, 1fr);
        gap: var(--bc-space-3);
    }

    .bc-home-faq-item__toggle {
        width: var(--bc-space-8);
        height: var(--bc-space-8);
    }

    .bc-home-faq-item__toggle svg {
        width: var(--bc-space-5);
        height: var(--bc-space-5);
    }

    .bc-home-faq-item__question {
        font-size: var(--bc-font-size-h6);
        line-height: var(--bc-line-height-h6);
    }

    .bc-home-faq-item__answer {
        max-width: none;
        padding:
            0
            0
            var(--bc-space-5)
            calc(
                var(--bc-space-8)
                + var(--bc-space-3)
            );
        font-size: var(--bc-font-size-body-sm);
        line-height: var(--bc-line-height-body);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bc-home-faq-item__toggle,
    .bc-home-faq-item__toggle svg,
    .bc-home-faq-item__question,
    .bc-home-faq-item__answer {
        transition: none;
        animation: none;
    }

}



/* ================================================================================================================== */



/* =========================================================
   BC BRICK — HOMEPAGE REVIEWS
========================================================= */

.bc-reviews {
    position: relative;
    overflow: hidden;
    padding-block: var(--bc-section-md);
    color: var(--bc-color-text);
    background: var(--bc-color-background-soft);
}

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


/* =========================================================
   HEADER
========================================================= */

.bc-reviews__header {
    display: grid;
    margin-bottom: var(--bc-space-9);
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(0, 1fr);
    align-items: end;
    gap: var(--bc-grid-gap-lg);
}

.bc-reviews__heading {
    min-width: 0;
}


/* =========================================================
   EYEBROW
========================================================= */

.bc-reviews__eyebrow {
	display: flex;
    margin: 0 0 var(--bc-space-3);
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-accent);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bc-reviews__eyebrow::before {
    width: var(--bc-space-6);
    height: 2px;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
}


/* =========================================================
   TITLE
========================================================= */

.bc-reviews__title {
    max-width: var(--bc-container-content);
    margin: 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h2);
    font-weight: 700;
    line-height: var(--bc-line-height-h2);
    letter-spacing: -0.03em;
    text-wrap: balance;
}


/* =========================================================
   HEADER SIDE
========================================================= */

.bc-reviews__header-side {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--bc-space-6);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.bc-reviews__description {
    max-width: var(--bc-container-narrow);
    margin: 0;
    color: var(--bc-color-text-muted);
    font-family: var(--bc-font-main);
    font-size: var(--bc-font-size-body);
    font-weight: 400;
    line-height: var(--bc-line-height-body);
}


/* =========================================================
   CONTROLS
========================================================= */

.bc-reviews__controls {
    display: flex;
    flex: 0 0 auto;
    gap: var(--bc-space-2);
}

.bc-reviews__control {
    display: grid;
    width: var(--bc-space-9);
    height: var(--bc-space-9);
    padding: 0;
    place-items: center;
    border: 1px solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    color: var(--bc-color-primary);
    background: var(--bc-color-background);
    cursor: pointer;
    transition:
        color var(--bc-transition),
        border-color var(--bc-transition),
        background-color var(--bc-transition);
}

.bc-reviews__control:focus-visible {
    color: var(--bc-color-white);
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-reviews__control:hover {
        color: var(--bc-color-white);
        border-color: var(--bc-color-primary);
        background: var(--bc-color-primary);
    }
}

.bc-reviews__control:focus-visible {
    outline: 2px solid var(--bc-color-focus);
    outline-offset: var(--bc-space-1);
}

.bc-reviews__control svg {
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   VIEWPORT / TRACK
========================================================= */

.bc-reviews__viewport {
    position: relative;
    overflow: hidden;
}

.bc-reviews__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns:
        calc(
            (
                100%
                - (var(--bc-grid-gap) * 2)
            )
            / 3
        );
    gap: var(--bc-grid-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.bc-reviews__track::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   REVIEW CARD
========================================================= */

.bc-review {
    position: relative;
    display: flex;
    min-width: 0;
    padding: var(--bc-space-7);
    flex-direction: column;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border: 1px solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-surface);
    transition:
        border-color var(--bc-transition),
        box-shadow var(--bc-transition);
}

.bc-review::before {
    position: absolute;
    top: 0;
    left: var(--bc-space-7);
    width: var(--bc-space-8);
    height: 2px;
    background: var(--bc-color-accent);
    content: "";
}

.bc-review::after {
    display: none;
    content: none;
}

@media (hover: hover) and (pointer: fine) {
    .bc-review:hover {
        border-color: var(--bc-color-primary);
        box-shadow: var(--bc-shadow-sm);
    }
}


/* =========================================================
   RATING
========================================================= */

.bc-review__rating {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--bc-space-1);
}

.bc-review__rating svg {
    width: var(--bc-space-4);
    height: var(--bc-space-4);
    fill: transparent;
    stroke: var(--bc-color-border);
    stroke-width: 1.3;
}

.bc-review__rating svg.is-active {
    fill: var(--bc-color-accent);
    stroke: var(--bc-color-accent);
}


/* =========================================================
   REVIEW TEXT
========================================================= */

.bc-review__text {
    position: relative;
    z-index: 1;
    margin-top: var(--bc-space-6);
    color: var(--bc-color-text);
    font-family: var(--bc-font-main);
    font-size: var(--bc-font-size-body);
    font-weight: 400;
    line-height: var(--bc-line-height-body);
}

.bc-review__text p {
    margin: 0 0 var(--bc-space-3);
}

.bc-review__text p:last-child {
    margin-bottom: 0;
}

.bc-review__text ul,
.bc-review__text ol {
    margin: var(--bc-space-3) 0;
    padding-left: var(--bc-space-6);
}

.bc-review__text li + li {
    margin-top: var(--bc-space-2);
}


/* =========================================================
   FOOTER
========================================================= */

.bc-review__footer {
    position: relative;
    z-index: 1;
    display: flex;
    margin-top: auto;
    padding-top: var(--bc-space-7);
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--bc-space-5);
}


/* =========================================================
   PERSON
========================================================= */

.bc-review__person {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.bc-review__name {
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-body);
    font-weight: 600;
    line-height: var(--bc-line-height-small);
    letter-spacing: -0.01em;
}

.bc-review__location {
    display: flex;
    margin-top: var(--bc-space-2);
    align-items: center;
    color: var(--bc-color-text-muted);
    font-family: var(--bc-font-main);
    font-size: var(--bc-font-size-caption);
    font-weight: 500;
    line-height: var(--bc-line-height-small);
}

.bc-review__location::before {
    width: var(--bc-space-4);
    height: 1px;
    margin-right: var(--bc-space-2);
    flex: 0 0 auto;
    background: var(--bc-color-accent);
    content: "";
}


/* =========================================================
   REVIEW PHOTO
========================================================= */

.bc-review__photo {
    position: relative;
    display: block;
    width: var(--bc-space-12);
    height: var(--bc-space-12);
    padding: 0;
    flex: 0 0 var(--bc-space-12);
    overflow: hidden;
    border: 1px solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-background-soft);
    cursor: zoom-in;
    transition: border-color var(--bc-transition);
}

.bc-review__photo:focus-visible {
    border-color: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-review__photo:hover {
        border-color: var(--bc-color-primary);
    }
}

.bc-review__photo:focus-visible {
    outline: 2px solid var(--bc-color-focus);
    outline-offset: var(--bc-space-1);
}

.bc-review__photo-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}


/* =========================================================
   EXPAND ICON
========================================================= */

.bc-review__photo-expand {
    position: absolute;
    right: var(--bc-space-1);
    bottom: var(--bc-space-1);
    display: grid;
    width: var(--bc-space-7);
    height: var(--bc-space-7);
    place-items: center;
    border-radius: var(--bc-radius-sm);
    color: var(--bc-color-white);
    background: var(--bc-color-primary);
}

.bc-review__photo-expand svg {
    width: var(--bc-space-4);
    height: var(--bc-space-4);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.bc-review-lightbox {
    width:
        min(
            92vw,
            var(--bc-container)
        );
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
}

.bc-review-lightbox::backdrop {
    background: var(--bc-color-overlay);
}

.bc-review-lightbox__media {
    display: grid;
    width: 100%;
    max-height: 88vh;
    place-items: center;
}

.bc-review-lightbox__media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--bc-radius-sm);
}


/* =========================================================
   LIGHTBOX CLOSE
========================================================= */

.bc-review-lightbox__close {
    position: absolute;
    z-index: 5;
    top: var(--bc-space-4);
    right: var(--bc-space-4);
    display: grid;
    width: var(--bc-space-9);
    height: var(--bc-space-9);
    padding: 0;
    place-items: center;
    border: 1px solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    color: var(--bc-color-primary);
    background: var(--bc-color-surface);
    cursor: pointer;
    transition:
        color var(--bc-transition),
        border-color var(--bc-transition),
        background-color var(--bc-transition);
}

.bc-review-lightbox__close:focus-visible {
    color: var(--bc-color-white);
    border-color: var(--bc-color-primary);
    background: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-review-lightbox__close:hover {
        color: var(--bc-color-white);
        border-color: var(--bc-color-primary);
        background: var(--bc-color-primary);
    }
}

.bc-review-lightbox__close:focus-visible {
    outline: 2px solid var(--bc-color-focus);
    outline-offset: var(--bc-space-1);
}

.bc-review-lightbox__close svg {
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   <= 1199
========================================================= */

@media (max-width: 1199px) {

    .bc-reviews__header {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(0, 1fr);
    }

}


/* =========================================================
   <= 991
========================================================= */

@media (max-width: 991px) {

    .bc-reviews {
        padding-block: var(--bc-section-sm);
    }

    .bc-reviews__header {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--bc-space-7);
        gap: var(--bc-space-4);
    }

    .bc-reviews__header-side {
        align-items: center;
    }

    .bc-reviews__description {
        max-width: var(--bc-container-narrow);
    }

    .bc-reviews__track {
        grid-auto-columns:
            calc(
                (
                    100%
                    - var(--bc-grid-gap)
                )
                / 2
            );
    }

    .bc-review {
        padding: var(--bc-space-6);
    }

    .bc-review::before {
        left: var(--bc-space-6);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .bc-reviews__header {
        margin-bottom: var(--bc-space-6);
    }

    .bc-reviews__header-side {
        align-items: flex-end;
    }

    /*
     * One complete review per swipe.
     * Keeps the mobile behavior consistent with the other
     * media sliders on the homepage.
     */
    .bc-reviews__track {
        grid-auto-columns: 100%;
        gap: var(--bc-space-4);
    }

    .bc-review {
        padding: var(--bc-space-6);
    }

    .bc-review::before {
        left: var(--bc-space-6);
    }

    .bc-review__text {
        font-size: var(--bc-font-size-body-sm);
        line-height: var(--bc-line-height-body);
    }

    .bc-review__footer {
        padding-top: var(--bc-space-6);
    }

    .bc-review__photo {
        width: var(--bc-space-11);
        height: var(--bc-space-11);
        flex-basis: var(--bc-space-11);
    }

    .bc-review__photo-expand {
        width: var(--bc-space-6);
        height: var(--bc-space-6);
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 479px) {

    .bc-reviews__header-side {
        display: grid;
        gap: var(--bc-space-4);
    }

    .bc-reviews__controls {
        justify-self: end;
    }

    .bc-review {
        padding: var(--bc-space-5);
    }

    .bc-review::before {
        left: var(--bc-space-5);
    }

    .bc-review__footer {
        gap: var(--bc-space-3);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bc-reviews__track {
        scroll-behavior: auto;
    }

    .bc-review,
    .bc-reviews__control,
    .bc-review__photo,
    .bc-review-lightbox__close {
        transition: none;
    }

}




/* =========================================================
   BC BRICK — HOMEPAGE NEWS V5
========================================================= */

.bc-home-news {
    position: relative;
    overflow: hidden;
    padding-block: var(--bc-section-md);
    color: var(--bc-color-text);
    background: var(--bc-color-background);
}

.bc-home-news *,
.bc-home-news *::before,
.bc-home-news *::after {
    box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.bc-home-news__header {
    display: grid;
    margin-bottom: var(--bc-space-10);
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(0, 1fr);
    align-items: end;
    gap: var(--bc-grid-gap-lg);
}

.bc-home-news__heading {
    min-width: 0;
}

.bc-home-news__eyebrow {
	display: flex;
    margin: 0 0 var(--bc-space-3);
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-accent);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bc-home-news__eyebrow::before {
    width: var(--bc-space-6);
    height: 2px;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
}

.bc-home-news__title {
    max-width: var(--bc-container-content);
    margin: 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h2);
    font-weight: 700;
    line-height: var(--bc-line-height-h2);
    letter-spacing: -0.03em;
}

.bc-home-news__header-side {
    display: grid;
    min-width: 0;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: var(--bc-space-7);
}

.bc-home-news__description {
    max-width: var(--bc-container-narrow);
    margin: 0;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-body);
    line-height: var(--bc-line-height-body);
}

.bc-home-news__archive-link {
    justify-self: end;
    flex: 0 0 auto;
    white-space: nowrap;
}

.bc-home-news__archive-link svg {
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform var(--bc-transition);
}

.bc-home-news__archive-link:focus-visible svg {
    transform: translateX(var(--bc-space-1));
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-news__archive-link:hover svg {
        transform: translateX(var(--bc-space-1));
    }
}

.bc-home-news__archive-link--mobile {
    display: none;
}


/* =========================================================
   MAIN DESKTOP COMPOSITION
========================================================= */

.bc-home-news__layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    align-items: stretch;
    gap: var(--bc-space-11);
}

.bc-home-news__layout--1 {
    grid-template-columns: minmax(0, 1fr);
}

.bc-home-news__featured,
.bc-home-news__list,
.bc-home-news__item {
    min-width: 0;
}


/* =========================================================
   COMMON META
========================================================= */

.bc-home-news__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bc-space-3);
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-caption);
    font-weight: 700;
    line-height: var(--bc-line-height-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bc-home-news__meta-divider {
    color: var(--bc-color-accent);
    font-size: var(--bc-font-size-body-sm);
}

.bc-home-news__category {
    color: var(--bc-color-text);
}


/* =========================================================
   FEATURED NEWS
========================================================= */

.bc-home-news__featured-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.bc-home-news__featured-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 12 / 5;
    border: 1px solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-background-soft);
    transition: border-color var(--bc-transition);
}

.bc-home-news__featured-link:focus-visible .bc-home-news__featured-media {
    border-color: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-news__featured-link:hover .bc-home-news__featured-media {
        border-color: var(--bc-color-primary);
    }
}

.bc-home-news__featured-image,
.bc-home-news__item-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.bc-home-news__featured-content {
    display: grid;
    min-height: 190px;
    padding:
        var(--bc-space-5)
        0
        0;
    grid-template-columns:
        minmax(0, 1fr)
        var(--bc-space-10);
    grid-template-rows:
        auto
        minmax(0, 1fr);
    column-gap: var(--bc-space-5);
    align-items: end;
}

.bc-home-news__featured-content > .bc-home-news__meta {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-left: var(--bc-space-8);
}

.bc-home-news__featured-body {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    margin-top: var(--bc-space-3);
    padding-left: var(--bc-space-8);
}

.bc-home-news__featured-body::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    border-radius: var(--bc-radius-pill);
    background: var(--bc-color-primary);
    content: "";
}

.bc-home-news__featured-title {
    margin: 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: var(--bc-line-height-h4);
    letter-spacing: -0.02em;
    transition: color var(--bc-transition);
}

.bc-home-news__featured-link:focus-visible .bc-home-news__featured-title {
    color: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-news__featured-link:hover .bc-home-news__featured-title {
        color: var(--bc-color-primary);
    }
}

.bc-home-news__excerpt {
    display: -webkit-box;
    max-width: var(--bc-container-narrow);
    margin: var(--bc-space-3) 0 0;
    overflow: hidden;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-body);
    line-height: var(--bc-line-height-body);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.bc-home-news__featured-arrow {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    width: var(--bc-space-10);
    height: var(--bc-space-10);
    margin-bottom: var(--bc-space-1);
    place-items: center;
    align-self: end;
    border-radius: var(--bc-radius-sm);
    color: var(--bc-color-white);
    background: var(--bc-color-button);
    transition: background-color var(--bc-transition);
}

.bc-home-news__featured-link:focus-visible .bc-home-news__featured-arrow {
    background: var(--bc-color-button-hover);
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-news__featured-link:hover .bc-home-news__featured-arrow {
        background: var(--bc-color-button-hover);
    }
}

.bc-home-news__featured-arrow svg,
.bc-home-news__item-arrow svg {
    width: var(--bc-space-5);
    height: var(--bc-space-5);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}


/* =========================================================
   RIGHT COLUMN

   With 3 posts this is intentionally two equal visual rows.
   The images themselves never stretch: they keep 4:3.
========================================================= */

.bc-home-news__list {
    display: grid;
    align-content: start;
}

.bc-home-news__layout--3 .bc-home-news__list {
    height: 100%;
    grid-template-rows:
        repeat(2, minmax(0, 1fr));
    align-content: stretch;
}

.bc-home-news__item {
    position: relative;
    min-height: 0;
}

.bc-home-news__layout--3 .bc-home-news__item:first-child {
    padding-bottom: var(--bc-space-5);
    border-bottom: 1px solid var(--bc-color-border);
}

.bc-home-news__layout--3 .bc-home-news__item:last-child {
    padding-top: var(--bc-space-5);
}

.bc-home-news__item-link {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(240px, 0.88fr);
    align-items: start;
    gap: var(--bc-space-7);
    color: inherit;
    text-decoration: none;
}

.bc-home-news__layout--3 .bc-home-news__item-link {
    height: 100%;
}

.bc-home-news__item-content {
    min-width: 0;
}

.bc-home-news__item-title {
    margin: var(--bc-space-4) 0 0;
    color: var(--bc-color-text);
    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h5);
    font-weight: 600;
    line-height: var(--bc-line-height-h5);
    letter-spacing: -0.015em;
    transition: color var(--bc-transition);
}

.bc-home-news__item-excerpt {
    display: -webkit-box;
    margin: var(--bc-space-3) 0 0;
    overflow: hidden;
    color: var(--bc-color-text-muted);
    font-size: var(--bc-font-size-body-sm);
    line-height: var(--bc-line-height-small);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.bc-home-news__item-link:focus-visible .bc-home-news__item-title {
    color: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-news__item-link:hover .bc-home-news__item-title {
        color: var(--bc-color-primary);
    }
}

.bc-home-news__item-arrow {
    display: grid;
    width: var(--bc-space-9);
    height: var(--bc-space-9);
    margin-top: var(--bc-space-4);
    place-items: center;
    color: var(--bc-color-accent);
    transition: color var(--bc-transition);
}

.bc-home-news__item-link:focus-visible .bc-home-news__item-arrow {
    color: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-news__item-link:hover .bc-home-news__item-arrow {
        color: var(--bc-color-primary);
    }
}

.bc-home-news__item-media {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    border: 1px solid var(--bc-color-border);
    border-radius: var(--bc-radius-sm);
    background: var(--bc-color-background-soft);
    transition: border-color var(--bc-transition);
}

.bc-home-news__item-link:focus-visible .bc-home-news__item-media {
    border-color: var(--bc-color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .bc-home-news__item-link:hover .bc-home-news__item-media {
        border-color: var(--bc-color-primary);
    }
}

/*
 * The first compact image is anchored to the top of row 1.
 * The second is anchored to the bottom of row 2.
 * Since the two rows fill the featured story height, their outer
 * edges now match the featured block without stretching the media.
 */
.bc-home-news__layout--3
.bc-home-news__item:first-child
.bc-home-news__item-media {
    align-self: start;
}

.bc-home-news__layout--3
.bc-home-news__item:last-child
.bc-home-news__item-media {
    align-self: end;
}


/* =========================================================
   FALLBACK IMAGE
========================================================= */

.bc-home-news__image-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background: var(--bc-color-background-soft);
}

.bc-home-news__image-fallback svg {
    width: 52%;
    fill: none;
    stroke: var(--bc-color-primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    opacity: 0.14;
}


/* =========================================================
   1200–1399
========================================================= */

@media (max-width: 1399px) {

    .bc-home-news__layout {
        gap: var(--bc-space-9);
    }

    .bc-home-news__item-link {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(210px, 0.85fr);
        gap: var(--bc-space-6);
    }

    .bc-home-news__item-title {
        font-size: var(--bc-font-size-h6);
        line-height: var(--bc-line-height-h6);
        letter-spacing: -0.01em;
    }

}


/* =========================================================
   <= 1199
========================================================= */

@media (max-width: 1199px) {

    .bc-home-news__header {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(0, 1fr);
    }

    .bc-home-news__header-side {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--bc-space-4);
    }

    .bc-home-news__archive-link {
        justify-self: start;
    }

    .bc-home-news__layout {
        gap: var(--bc-grid-gap-lg);
    }

    .bc-home-news__featured-content {
        min-height: 176px;
    }

    .bc-home-news__featured-title {
        font-size: var(--bc-font-size-h5);
        font-weight: 600;
        line-height: var(--bc-line-height-h5);
        letter-spacing: -0.015em;
    }

    .bc-home-news__item-link {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(180px, 0.82fr);
        gap: var(--bc-space-5);
    }

    .bc-home-news__item-title {
        margin-top: var(--bc-space-5);
    }

}


/* =========================================================
   <= 991 — NORMAL STACK
========================================================= */

@media (max-width: 991px) {

    .bc-home-news {
        padding-block: var(--bc-section-sm);
    }

    .bc-home-news__header {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: var(--bc-space-7);
        gap: var(--bc-space-5);
    }

    .bc-home-news__header-side {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        align-items: end;
        gap: var(--bc-space-6);
    }

    .bc-home-news__layout {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--bc-space-7);
    }

    .bc-home-news__featured-media {
        aspect-ratio: 16 / 8;
    }

    .bc-home-news__featured-content {
        min-height: 0;
    }

    .bc-home-news__layout--3 .bc-home-news__list {
        height: auto;
        grid-template-rows: none;
    }

    .bc-home-news__layout--3 .bc-home-news__item:first-child {
        padding-bottom: var(--bc-space-5);
    }

    .bc-home-news__layout--3 .bc-home-news__item:last-child {
        padding-top: var(--bc-space-5);
    }

    .bc-home-news__layout--3 .bc-home-news__item-link {
        height: auto;
    }

    .bc-home-news__item-link {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 0.62fr);
        align-items: center;
    }

    .bc-home-news__layout--3
    .bc-home-news__item:first-child
    .bc-home-news__item-media,
    .bc-home-news__layout--3
    .bc-home-news__item:last-child
    .bc-home-news__item-media {
        align-self: center;
    }

    .bc-home-news__layout--3
    .bc-home-news__item:first-child
    .bc-home-news__item-content {
        padding-top: 0;
    }

    .bc-home-news__item-title {
        margin-top: var(--bc-space-4);
    }

    .bc-home-news__item-arrow {
        margin-top: var(--bc-space-4);
    }

}


/* =========================================================
   MOBILE — ONE NEWS ITEM PER HORIZONTAL SWIPE
========================================================= */

@media (max-width: 767px) {

    .bc-home-news__header {
        margin-bottom: var(--bc-space-6);
    }

    .bc-home-news__title {
        font-size: var(--bc-font-size-h3);
        line-height: var(--bc-line-height-h3);
        letter-spacing: -0.025em;
    }

    .bc-home-news__header-side {
        display: block;
    }

    .bc-home-news__description {
        font-size: var(--bc-font-size-body-sm);
    }

    /*
     * The desktop action stays where the reference puts it,
     * but on mobile it disappears. A separate action is rendered
     * after the horizontal news track.
     */
    .bc-home-news__archive-link--desktop {
        display: none;
    }

    .bc-home-news__archive-link--mobile {
        display: inline-flex;
        width: 100%;
        margin-top: var(--bc-space-6);
    }


    /* ---------------------------------------------------------
       Horizontal scroll track
    --------------------------------------------------------- */

    .bc-home-news__layout {
        display: flex;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        align-items: stretch;
        gap: var(--bc-space-4);
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bc-home-news__layout::-webkit-scrollbar {
        display: none;
    }

    /*
     * The right-side wrapper must not become a separate slide.
     * Its articles become direct flex items of the visual track.
     */
    .bc-home-news__list,
    .bc-home-news__layout--3 .bc-home-news__list {
        display: contents;
        height: auto;
    }

    .bc-home-news__featured,
    .bc-home-news__item {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding: 0;
        border: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .bc-home-news__layout--3 .bc-home-news__item:first-child,
    .bc-home-news__layout--3 .bc-home-news__item:last-child {
        padding: 0;
        border: 0;
    }


    /* ---------------------------------------------------------
       Featured mobile slide
    --------------------------------------------------------- */

    .bc-home-news__featured-link {
        display: flex;
        height: 100%;
        flex-direction: column;
    }

    .bc-home-news__featured-media {
        aspect-ratio: 16 / 10;
    }

    .bc-home-news__featured-content {
        display: grid;
        min-height: 0;
        padding: var(--bc-space-4) 0 0;
        grid-template-columns:
            minmax(0, 1fr)
            var(--bc-space-9);
        grid-template-rows:
            auto
            auto;
        column-gap: var(--bc-space-3);
        align-items: end;
    }

    .bc-home-news__featured-content > .bc-home-news__meta {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-left: 0;
    }

    .bc-home-news__featured-body {
        grid-column: 1;
        grid-row: 2;
        margin-top: var(--bc-space-3);
        padding-left: var(--bc-space-4);
    }

    .bc-home-news__featured-title {
        font-size: var(--bc-font-size-h5);
        font-weight: 600;
        line-height: var(--bc-line-height-h5);
        letter-spacing: -0.015em;
    }

    .bc-home-news__excerpt {
        font-size: var(--bc-font-size-body-sm);
        line-height: var(--bc-line-height-small);
        -webkit-line-clamp: 3;
    }

    .bc-home-news__featured-arrow {
        grid-column: 2;
        grid-row: 2;
        width: var(--bc-space-9);
        height: var(--bc-space-9);
        margin-bottom: 0;
        align-self: end;
    }


    /* ---------------------------------------------------------
       Compact articles become the same mobile card pattern:
       image -> meta -> title -> optional excerpt -> arrow.
    --------------------------------------------------------- */

    .bc-home-news__item-link,
    .bc-home-news__layout--3 .bc-home-news__item-link {
        display: flex;
        height: 100%;
        flex-direction: column;
        gap: 0;
    }

    .bc-home-news__item-media {
        order: -1;
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .bc-home-news__layout--3
    .bc-home-news__item:first-child
    .bc-home-news__item-media,
    .bc-home-news__layout--3
    .bc-home-news__item:last-child
    .bc-home-news__item-media {
        align-self: stretch;
    }

    .bc-home-news__item-content,
    .bc-home-news__layout--3
    .bc-home-news__item:first-child
    .bc-home-news__item-content {
        display: grid;
        height: auto;
        padding: var(--bc-space-4) 0 0;
        grid-template-columns:
            minmax(0, 1fr)
            var(--bc-space-9);
        grid-template-rows:
            auto
            auto
            auto;
        column-gap: var(--bc-space-3);
        align-items: end;
    }

    .bc-home-news__item-content .bc-home-news__meta {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .bc-home-news__item-title {
        grid-column: 1;
        grid-row: 2;
        margin: var(--bc-space-3) 0 0;
        padding-left: var(--bc-space-4);
        border-left: 3px solid var(--bc-color-primary);
        font-size: var(--bc-font-size-h5);
        font-weight: 600;
        line-height: var(--bc-line-height-h5);
        letter-spacing: -0.015em;
    }

    .bc-home-news__item-excerpt {
        grid-column: 1;
        grid-row: 3;
        margin: var(--bc-space-3) 0 0;
        padding-left: var(--bc-space-4);
        font-size: var(--bc-font-size-body-sm);
        line-height: var(--bc-line-height-small);
        -webkit-line-clamp: 3;
    }

    .bc-home-news__item-arrow {
        grid-column: 2;
        grid-row: 2 / 4;
        width: var(--bc-space-9);
        height: var(--bc-space-9);
        margin-top: 0;
        align-self: end;
        border-radius: var(--bc-radius-sm);
        color: var(--bc-color-white);
        background: var(--bc-color-primary);
    }

    .bc-home-news__item-link:focus-visible .bc-home-news__item-arrow {
        color: var(--bc-color-white);
        background: var(--bc-color-primary-hover);
    }

    @media (hover: hover) and (pointer: fine) {
        .bc-home-news__item-link:hover .bc-home-news__item-arrow {
            color: var(--bc-color-white);
            background: var(--bc-color-primary-hover);
        }
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 479px) {

    .bc-home-news__meta {
        gap: var(--bc-space-2);
    }

}
/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bc-home-news__archive-link svg,
    .bc-home-news__featured-media,
    .bc-home-news__featured-title,
    .bc-home-news__featured-arrow,
    .bc-home-news__item-title,
    .bc-home-news__item-arrow,
    .bc-home-news__item-media {
        transition: none;
    }

}




/* =========================================================
   BC BRICK — HOME OWNER IDEOLOGY
========================================================= */

.bc-owner-ideology {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            var(--bc-color-primary) 0,
            var(--bc-color-primary) 50%,
            var(--bc-color-background-soft) 50%,
            var(--bc-color-background-soft) 100%
        );
}


.bc-owner-ideology *,
.bc-owner-ideology *::before,
.bc-owner-ideology *::after {
    box-sizing: border-box;
}


/* =========================================================
   DESKTOP GRID
========================================================= */

.bc-owner-ideology__inner {
    position: relative;

    display: grid;

    min-height: 720px;

    padding-block: var(--bc-section-md);

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(300px, 0.74fr)
        minmax(0, 1fr);

    align-items: center;

    gap: var(--bc-grid-gap-lg);
}


/* =========================================================
   LEFT SIDE
========================================================= */

.bc-owner-ideology__statement {
    position: relative;

    display: flex;

    min-width: 0;
    min-height: 570px;

    padding-right: var(--bc-space-4);

    flex-direction: column;
}


/* =========================================================
   EYEBROW
========================================================= */

.bc-owner-ideology__eyebrow {
    display: flex;

    margin:
        0
        0
        var(--bc-space-8);

    align-items: center;

    gap: var(--bc-space-3);

    color: var(--bc-color-accent-soft);

    font-family: var(--bc-font-main);
    font-size: var(--bc-font-size-body-sm);
    font-weight: 700;
    line-height: var(--bc-line-height-small);

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.bc-owner-ideology__eyebrow::before {
    width: var(--bc-space-6);
    height: 2px;

    flex: 0 0 auto;

    background: var(--bc-color-accent);

    content: "";
}


/* =========================================================
   SLOGAN
========================================================= */

.bc-owner-ideology__slogan {
    display: flex;

    max-width: 520px;

    flex-direction: column;

    color: var(--bc-color-white);

    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h1);
    font-weight: 700;
    line-height: 0.92;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.bc-owner-ideology__slogan-line {
    display: block;
}


.bc-owner-ideology__slogan-line
+ .bc-owner-ideology__slogan-line {
    margin-top: var(--bc-space-1);
}


.bc-owner-ideology__slogan-line--outline {
    margin-top: var(--bc-space-4);

    color: transparent;

    -webkit-text-stroke:
        1px
        var(--bc-color-accent);
}


/* =========================================================
   TECHNICAL BRICK
========================================================= */

.bc-owner-ideology__brick {
    width: min(78%, 350px);

    margin-top: auto;
    padding-top: var(--bc-space-8);

    color: var(--bc-color-white);

    opacity: 0.38;

    pointer-events: none;
}


.bc-owner-ideology__brick svg {
    display: block;

    width: 100%;
    height: auto;
}


.bc-owner-ideology__brick-body {
    fill: none;

    stroke: currentColor;

    stroke-width: 1.15;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.bc-owner-ideology__brick-guides {
    fill: none;

    stroke: currentColor;

    stroke-width: 0.8;

    stroke-dasharray: 5 6;

    opacity: 0.55;
}


.bc-owner-ideology__brick-arrows {
    fill: var(--bc-color-accent);

    stroke: none;
}


/* =========================================================
   OWNER PORTRAIT
========================================================= */

.bc-owner-ideology__portrait {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 370px;

    margin: 0;

    justify-self: center;
}


.bc-owner-ideology__portrait-media {
    position: relative;

    overflow: hidden;

    aspect-ratio: 3 / 4;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--bc-color-white) 55%,
            transparent
        );

    border-radius: var(--bc-radius-sm);

    background: var(--bc-color-background-soft);
}


.bc-owner-ideology__image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;

    object-position: center center;
}


/* =========================================================
   CAPTION — NOW INSIDE PHOTO
========================================================= */

.bc-owner-ideology__portrait-caption {
    position: absolute;

    z-index: 2;

    right: 0;
    bottom: 0;
    left: 0;

    display: flex;

    min-height: 132px;

    padding:
        var(--bc-space-10)
        var(--bc-space-5)
        var(--bc-space-5);

    flex-direction: column;
    justify-content: flex-end;

    gap: var(--bc-space-1);

    color: var(--bc-color-white);

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            color-mix(
                in srgb,
                var(--bc-color-primary) 88%,
                transparent
            ) 72%,
            var(--bc-color-primary) 100%
        );
}


.bc-owner-ideology__owner-name {
    display: block;

    color: var(--bc-color-white);

    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h5);
    font-weight: 700;
    line-height: var(--bc-line-height-h5);

    letter-spacing: -0.02em;
}


.bc-owner-ideology__owner-role {
    display: block;

    max-width: 290px;

    color:
        color-mix(
            in srgb,
            var(--bc-color-white) 78%,
            transparent
        );

    font-family: var(--bc-font-main);
    font-size: var(--bc-font-size-body-sm);
    line-height: var(--bc-line-height-body);
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.bc-owner-ideology__content {
    min-width: 0;

    padding-left: var(--bc-space-4);

    color: var(--bc-color-text);
}


/* =========================================================
   TITLE
========================================================= */

.bc-owner-ideology__title {
    max-width: 520px;

    margin:
        0
        0
        var(--bc-space-6);

    color: var(--bc-color-text);

    font-family: var(--bc-font-heading);
    font-size: var(--bc-font-size-h3);
    font-weight: 700;
    line-height: var(--bc-line-height-h3);

    letter-spacing: -0.03em;

    text-wrap: balance;
}


/* =========================================================
   TEXT
========================================================= */

.bc-owner-ideology__text {
    max-width: 600px;

    border-top:
        1px solid
        var(--bc-color-border);

    color: var(--bc-color-text);

    font-family: var(--bc-font-main);
    font-size: var(--bc-font-size-body);
    line-height: var(--bc-line-height-body);
}


.bc-owner-ideology__text > * {
    margin: 0;

    padding:
        var(--bc-space-5)
        0;

    border-bottom:
        1px solid
        var(--bc-color-border);
}


.bc-owner-ideology__text strong {
    color: var(--bc-color-primary);

    font-weight: 700;
}


/* =========================================================
   GLOBAL SITE BUTTON
========================================================= */

.bc-owner-ideology__button {
    margin-top: var(--bc-space-6);
}


.bc-owner-ideology__button svg {
    display: block;

    width: var(--bc-space-5);
    height: var(--bc-space-5);

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .bc-owner-ideology__inner {
        min-height: 660px;

        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(250px, 0.7fr)
            minmax(0, 1fr);

        gap: var(--bc-space-5);
    }


    .bc-owner-ideology__statement {
        min-height: 520px;
    }


    .bc-owner-ideology__slogan {
        font-size: var(--bc-font-size-h2);
    }


    .bc-owner-ideology__title {
        font-size: var(--bc-font-size-h4);
        line-height: var(--bc-line-height-h4);
    }


    .bc-owner-ideology__content {
        padding-left: var(--bc-space-2);
    }


    .bc-owner-ideology__text {
        font-size: var(--bc-font-size-body-sm);
    }

}


/* =========================================================
   <= 991
========================================================= */

@media (max-width: 991px) {

    .bc-owner-ideology {
        background: var(--bc-color-primary);
    }


    .bc-owner-ideology__inner {
        display: grid;

        min-height: 0;

        padding-top: var(--bc-space-10);
        padding-bottom: 0;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.8fr);

        align-items: end;

        gap:
            var(--bc-space-8)
            var(--bc-space-6);
    }


    .bc-owner-ideology__statement {
        min-height: 500px;

        padding-right: 0;
        padding-bottom: var(--bc-space-7);
    }


    .bc-owner-ideology__portrait {
        max-width: 340px;

        align-self: end;
    }


    .bc-owner-ideology__content {
        grid-column: 1 / -1;

        width: auto;

        margin-inline:
            calc(
                var(--bc-page-padding) * -1
            );

        padding:
            var(--bc-space-9)
            var(--bc-page-padding)
            var(--bc-space-10);

        background: var(--bc-color-background-soft);
    }


    .bc-owner-ideology__title {
        max-width: var(--bc-container-narrow);

        font-size: var(--bc-font-size-h3);
        line-height: var(--bc-line-height-h3);
    }


    .bc-owner-ideology__text {
        max-width: var(--bc-container-content);

        font-size: var(--bc-font-size-body);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .bc-owner-ideology__inner {
        display: block;

        padding-top: var(--bc-space-8);
    }


    /* -----------------------------------------
       statement
    ----------------------------------------- */

    .bc-owner-ideology__statement {
        min-height: 0;

        padding-bottom: var(--bc-space-7);
    }


    .bc-owner-ideology__eyebrow {
        margin-bottom: var(--bc-space-6);

        font-size: var(--bc-font-size-caption);
    }


    .bc-owner-ideology__eyebrow::before {
        width: var(--bc-space-7);
    }


	/* -----------------------------------------
   SLOGAN
----------------------------------------- */

.bc-owner-ideology__slogan {
    display: block;

    width: 100%;
    max-width: none;

    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.035em;
}


.bc-owner-ideology__slogan-line {
    display: inline;
}

.bc-owner-ideology__slogan-line:not(
    .bc-owner-ideology__slogan-line--outline
)::after {
    content: " ";
}


.bc-owner-ideology__slogan-line--outline {
    display: block;

    margin-top: var(--bc-space-2);
}


.bc-owner-ideology__brick {
    display: none;
}


    /* -----------------------------------------
       portrait
    ----------------------------------------- */

    .bc-owner-ideology__portrait {
        width: 100%;
        max-width: 440px;

        margin:
            0
            auto
            var(--bc-space-8);
    }


    .bc-owner-ideology__portrait-media {
        aspect-ratio: 4 / 5;
    }


    .bc-owner-ideology__portrait-caption {
        min-height: 116px;

        padding:
            var(--bc-space-9)
            var(--bc-space-4)
            var(--bc-space-4);
    }


    .bc-owner-ideology__owner-name {
        font-size: var(--bc-font-size-h6);
        line-height: var(--bc-line-height-h6);
    }


    .bc-owner-ideology__owner-role {
        font-size: var(--bc-font-size-caption);
    }


    /* -----------------------------------------
       content
    ----------------------------------------- */

    .bc-owner-ideology__content {
        width: auto;

        margin-inline:
            calc(
                var(--bc-page-padding) * -1
            );

        padding:
            var(--bc-space-8)
            var(--bc-page-padding)
            var(--bc-space-9);
    }


    .bc-owner-ideology__title {
        margin-bottom: var(--bc-space-5);

        font-size: var(--bc-font-size-h4);
        line-height: var(--bc-line-height-h4);
    }


    .bc-owner-ideology__text {
        font-size: var(--bc-font-size-body-sm);
    }


    .bc-owner-ideology__text > * {
        padding:
            var(--bc-space-4)
            0;
    }


    .bc-owner-ideology__button {
        margin-top: var(--bc-space-5);
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 479px) {


    .bc-owner-ideology__brick {
        width: 240px;
    }


    .bc-owner-ideology__title {
        font-size: var(--bc-font-size-h5);
        line-height: var(--bc-line-height-h5);
    }


    .bc-owner-ideology__button {
        width: 100%;
    }

}