/* Shared block styles used across multiple page types */

/* ── Background utilities ──────────────────────────────────── */

.bg--white,
.split-content__column--white,
.product-showcase__column--white {
  background-color: var(--off-white);
  color: var(--ink-stone);
}

.bg--deep-forest,
.split-content__column--deep-forest,
.product-showcase__column--deep-forest,
.logo-cloud--section-deep-forest {
  background-color: var(--deep-forest);
  color: var(--off-white);
}

.bg--deep-forest-dark,
.split-content__column--deep-forest-dark,
.product-showcase__column--deep-forest-dark,
.logo-cloud--section-deep-forest-dark {
  background-color: var(--deep-forest-dark);
  color: var(--off-white);
}

.bg--deep-forest-light,
.split-content__column--deep-forest-light,
.product-showcase__column--deep-forest-light,
.logo-cloud--section-deep-forest-light {
  background-color: var(--deep-forest-light);
  color: var(--ink-stone);
}

.bg--harvest-gold,
.split-content__column--harvest-gold,
.product-showcase__column--harvest-gold,
.logo-cloud--section-harvest-gold {
  background-color: var(--harvest-gold);
  color: var(--ink-stone);
}

.bg--harvest-gold-dark,
.split-content__column--harvest-gold-dark,
.product-showcase__column--harvest-gold-dark,
.logo-cloud--section-harvest-gold-dark {
  background-color: var(--harvest-gold-dark);
  color: var(--off-white);
}

.bg--harvest-gold-light,
.split-content__column--harvest-gold-light,
.product-showcase__column--harvest-gold-light,
.logo-cloud--section-harvest-gold-light {
  background-color: var(--harvest-gold-light);
  color: var(--ink-stone);
}

.bg--eco-cream,
.split-content__column--eco-cream,
.product-showcase__column--eco-cream,
.logo-cloud--section-eco-cream {
  background-color: var(--eco-cream);
  color: var(--ink-stone);
}

.bg--eco-cream-dark,
.split-content__column--eco-cream-dark,
.product-showcase__column--eco-cream-dark,
.logo-cloud--section-eco-cream-dark {
  background-color: var(--eco-cream-dark);
  color: var(--ink-stone);
}

.bg--eco-cream-light,
.split-content__column--eco-cream-light,
.product-showcase__column--eco-cream-light,
.logo-cloud--section-eco-cream-light {
  background-color: var(--eco-cream-light);
  color: var(--ink-stone);
}

/* Section backgrounds */

.split-content--section-white,
.product-showcase--section-white,
.logo-cloud--section-white {
  background-color: var(--off-white);
}

.split-content--section-deep-forest,
.product-showcase--section-deep-forest,
.logo-cloud--section-deep-forest {
  background-color: var(--deep-forest);
  color: var(--off-white);
}

.split-content--section-deep-forest-dark,
.product-showcase--section-deep-forest-dark,
.logo-cloud--section-deep-forest-dark {
  background-color: var(--deep-forest-dark);
  color: var(--off-white);
}

.split-content--section-deep-forest-light,
.product-showcase--section-deep-forest-light,
.logo-cloud--section-deep-forest-light {
  background-color: var(--deep-forest-light);
  color: var(--ink-stone);
}

.split-content--section-harvest-gold,
.product-showcase--section-harvest-gold,
.logo-cloud--section-harvest-gold {
  background-color: var(--harvest-gold);
  color: var(--ink-stone);
}

.split-content--section-harvest-gold-dark,
.product-showcase--section-harvest-gold-dark,
.logo-cloud--section-harvest-gold-dark {
  background-color: var(--harvest-gold-dark);
  color: var(--off-white);
}

.split-content--section-harvest-gold-light,
.product-showcase--section-harvest-gold-light,
.logo-cloud--section-harvest-gold-light {
  background-color: var(--harvest-gold-light);
  color: var(--ink-stone);
}

.split-content--section-eco-cream,
.product-showcase--section-eco-cream,
.logo-cloud--section-eco-cream {
  background-color: var(--eco-cream);
  color: var(--ink-stone);
}

.split-content--section-eco-cream-dark,
.product-showcase--section-eco-cream-dark,
.logo-cloud--section-eco-cream-dark {
  background-color: var(--eco-cream-dark);
  color: var(--ink-stone);
}

.split-content--section-eco-cream-light,
.product-showcase--section-eco-cream-light,
.logo-cloud--section-eco-cream-light {
  background-color: var(--eco-cream-light);
  color: var(--ink-stone);
}

/* ── Hero ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--deep-forest-dark);
  color: var(--off-white);
  overflow: hidden;
}

.hero--height-10vh { height: 10vh; }
.hero--height-20vh { height: 20vh; }
.hero--height-30vh { height: 30vh; }
.hero--height-40vh { height: 40vh; }
.hero--height-50vh { height: 50vh; }

.hero--align-left {
  justify-content: flex-start;
  text-align: left;
}

.hero--align-center {
  justify-content: center;
  text-align: center;
}

.hero--align-right {
  justify-content: flex-end;
  text-align: right;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20, 54, 37, 0.9) 0%,
    rgba(20, 54, 37, 0.6) 60%,
    rgba(20, 54, 37, 0.3) 100%
  );
}

.hero--overlay-dark .hero__media::after {
  background: linear-gradient(
    90deg,
    rgba(26, 28, 25, 0.85) 0%,
    rgba(26, 28, 25, 0.55) 60%,
    rgba(26, 28, 25, 0.25) 100%
  );
}

.hero--overlay-none .hero__media::after {
  background: none;
}

.hero--overlay-position-right .hero__media::after {
  background: linear-gradient(
    270deg,
    rgba(20, 54, 37, 0.9) 0%,
    rgba(20, 54, 37, 0.6) 60%,
    rgba(20, 54, 37, 0.3) 100%
  );
}

.hero--overlay-position-top .hero__media::after {
  background: linear-gradient(
    180deg,
    rgba(20, 54, 37, 0.9) 0%,
    rgba(20, 54, 37, 0.6) 60%,
    rgba(20, 54, 37, 0.3) 100%
  );
}

.hero--overlay-position-bottom .hero__media::after {
  background: linear-gradient(
    0deg,
    rgba(20, 54, 37, 0.9) 0%,
    rgba(20, 54, 37, 0.6) 60%,
    rgba(20, 54, 37, 0.3) 100%
  );
}

.hero--overlay-dark.hero--overlay-position-right .hero__media::after {
  background: linear-gradient(
    270deg,
    rgba(26, 28, 25, 0.85) 0%,
    rgba(26, 28, 25, 0.55) 60%,
    rgba(26, 28, 25, 0.25) 100%
  );
}

.hero--overlay-dark.hero--overlay-position-top .hero__media::after {
  background: linear-gradient(
    180deg,
    rgba(26, 28, 25, 0.85) 0%,
    rgba(26, 28, 25, 0.55) 60%,
    rgba(26, 28, 25, 0.25) 100%
  );
}

.hero--overlay-dark.hero--overlay-position-bottom .hero__media::after {
  background: linear-gradient(
    0deg,
    rgba(26, 28, 25, 0.85) 0%,
    rgba(26, 28, 25, 0.55) 60%,
    rgba(26, 28, 25, 0.25) 100%
  );
}

.hero__media picture,
.carousel__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img,
.carousel__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-top: var(--section-padding-mobile);
  padding-bottom: var(--section-padding-mobile);
  max-width: 120ch;
}

@media (min-width: 768px) {
  .hero__content {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
  }
}

.hero__heading {
  margin: 0 0 var(--stack-md);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--off-white);
}

@media (min-width: 768px) {
  .hero__heading {
    font-size: 48px;
  }
}

.hero__subheading {
  margin: 0 0 var(--stack-lg);
  font-size: 16px;
  color: rgba(253, 253, 253, 0.9);
  line-height: 1.6;
}

.hero__subheading:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .hero__subheading {
    font-size: 18px;
  }
}

.hero__cta,
.cta__button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--harvest-gold);
  color: var(--deep-forest);
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background-color 0.2s ease;
}

@media (min-width: 768px) {
  .hero__cta,
  .cta__button {
    padding: 0.875rem 1.75rem;
  }
}

.hero__cta:hover,
.cta__button:hover {
  background-color: var(--harvest-gold-dark);
}

/* ── Carousel ──────────────────────────────────────────────── */

.carousel {
  position: relative;
  height: 40vh;
  display: flex;
  flex-direction: column;
  background-color: var(--deep-forest-dark);
  color: var(--off-white);
  overflow: hidden;
}

.carousel--height-10vh { height: 10vh; }
.carousel--height-20vh { height: 20vh; }
.carousel--height-30vh { height: 30vh; }
.carousel--height-40vh { height: 40vh; }
.carousel--height-50vh { height: 50vh; }

.carousel__track {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  transition: transform 0.5s ease-in-out;
}

.carousel__track.no-transition {
  transition: none;
}

.carousel__slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.carousel__slide--align-left {
  justify-content: flex-start;
  text-align: left;
}

.carousel__slide--align-center {
  justify-content: center;
  text-align: center;
}

.carousel__slide--align-right {
  justify-content: flex-end;
  text-align: right;
}

.carousel__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.carousel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20, 54, 37, 0.9) 0%,
    rgba(20, 54, 37, 0.6) 60%,
    rgba(20, 54, 37, 0.3) 100%
  );
}

.carousel__content {
  position: relative;
  z-index: 1;
  padding-top: var(--section-padding-mobile);
  padding-bottom: calc(var(--section-padding-mobile) + 2rem);
  max-width: 120ch;
}

@media (min-width: 768px) {
  .carousel__content {
    padding-top: var(--section-padding);
    padding-bottom: calc(var(--section-padding) + 1.5rem);
  }
}

.carousel__heading {
  margin: 0 0 var(--stack-md);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--off-white);
}

@media (min-width: 768px) {
  .carousel__heading {
    font-size: 48px;
  }
}

.carousel__subheading {
  margin: 0 0 var(--stack-lg);
  font-size: 16px;
  color: rgba(253, 253, 253, 0.9);
  line-height: 1.6;
}

.carousel__subheading:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .carousel__subheading {
    font-size: 18px;
  }
}

.carousel__cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--harvest-gold);
  color: var(--deep-forest);
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background-color 0.2s ease;
}

@media (min-width: 768px) {
  .carousel__cta {
    padding: 0.875rem 1.75rem;
  }
}

.carousel__cta:hover {
  background-color: var(--harvest-gold-dark);
}

.carousel__dots {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}

.carousel__dot {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(253, 253, 253, 0.4);
  cursor: pointer;
}

.carousel__dot.is-active {
  background-color: var(--harvest-gold);
}

/* ── Split content ─────────────────────────────────────────── */

.split-content {
  padding: var(--section-padding-mobile) 0;
}

@media (min-width: 768px) {
  .split-content {
    padding: var(--section-padding) 0;
  }
}

.split-content__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
  align-items: stretch;
}

@media (min-width: 768px) {
  .split-content__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.split-content__column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.split-content__column--media {
  padding: 0;
  order: -1;
}

.split-content__column--media picture,
.split-content__column--media img {
  display: block;
  width: 100%;
  height: 100%;
}

.split-content__column--media img {
  object-fit: cover;
  border-radius: 0;
}

.split-content__column--media-contain {
  background-color: var(--off-white);
}

.split-content__column--media-contain picture,
.split-content__column--media-contain img {
  object-fit: contain;
}

.split-content__column--media-embed {
  position: relative;
  min-height: 280px;
  padding: 0;
  background-color: var(--off-white);
}

.split-content__column--media-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.split-content--gap .split-content__column--media {
  border-radius: var(--radius-lg);
}

.split-content--gap .split-content__inner {
  gap: 1.5rem;
}

.split-content--joined .split-content__inner {
  gap: 0;
}

@media (max-width: 767px) {
  .split-content--joined .split-content__column--media {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .split-content--joined .split-content__column--text {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

@media (min-width: 768px) {
  .split-content__column--media {
    order: initial;
  }

  .split-content--gap .split-content__column--media {
    border-radius: var(--radius-lg);
  }

  .split-content--joined .split-content__column--text {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  .split-content--joined .split-content__column--media {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  .split-content--image-left .split-content__column--text {
    order: 2;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  .split-content--image-left .split-content__column--media {
    order: 1;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
}

.split-content__heading {
  margin: 0 0 var(--stack-md);
  font-size: 28px;
  color: var(--deep-forest);
}

@media (min-width: 768px) {
  .split-content__heading {
    font-size: 32px;
  }
}

.split-content--section-deep-forest .split-content__heading,
.split-content--section-deep-forest-dark .split-content__heading,
.split-content__column--deep-forest .split-content__heading,
.split-content__column--deep-forest-dark .split-content__heading,
.split-content__column--harvest-gold-dark .split-content__heading {
  color: var(--off-white);
}

.split-content__body {
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .split-content__body {
    font-size: 18px;
  }
}

.split-content__body > *:first-child {
  margin-top: 0;
}

.split-content__body > *:last-child {
  margin-bottom: 0;
}

.split-content__body ul {
  padding-left: 1.25rem;
}

.split-content__body li {
  margin-bottom: var(--stack-sm);
}

.split-content__cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: var(--stack-md);
  padding: 0.75rem 1.5rem;
  background-color: var(--deep-forest);
  color: var(--eco-cream);
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background-color 0.2s ease;
}

@media (min-width: 768px) {
  .split-content__cta {
    padding: 0.875rem 1.75rem;
  }
}

.split-content__cta:hover {
  background-color: var(--deep-forest-dark);
}

/* ── Text block ────────────────────────────────────────────── */

.text-block {
  margin: var(--stack-lg) 0;
  padding: var(--section-padding-mobile) 0;
  font-size: 16px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .text-block {
    padding: var(--section-padding) 0;
    font-size: 18px;
  }
}

.text-block__content {
  max-width: none;
}

.text-block--section-white {
  background-color: var(--off-white);
}

.text-block--section-deep-forest {
  background-color: var(--deep-forest);
  color: var(--off-white);
}

.text-block--section-deep-forest-dark {
  background-color: var(--deep-forest-dark);
  color: var(--off-white);
}

.text-block--section-deep-forest-light {
  background-color: var(--deep-forest-light);
  color: var(--ink-stone);
}

.text-block--section-harvest-gold {
  background-color: var(--harvest-gold);
  color: var(--ink-stone);
}

.text-block--section-harvest-gold-dark {
  background-color: var(--harvest-gold-dark);
  color: var(--off-white);
}

.text-block--section-harvest-gold-light {
  background-color: var(--harvest-gold-light);
  color: var(--ink-stone);
}

.text-block--section-eco-cream {
  background-color: var(--eco-cream);
  color: var(--ink-stone);
}

.text-block--section-eco-cream-dark {
  background-color: var(--eco-cream-dark);
  color: var(--ink-stone);
}

.text-block--section-eco-cream-light {
  background-color: var(--eco-cream-light);
  color: var(--ink-stone);
}

/* ── Image block ───────────────────────────────────────────── */

.image-block {
  margin: var(--stack-lg) 0;
  text-align: center;
}

.image-block img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.image-block__caption {
  margin-top: var(--stack-sm);
  font-size: 0.875rem;
  color: var(--ink-stone);
  opacity: 0.8;
}

/* ── CTA block ─────────────────────────────────────────────── */

.cta {
  padding: var(--section-padding-mobile) var(--gutter);
  text-align: center;
  background-color: var(--eco-cream);
}

@media (min-width: 768px) {
  .cta {
    padding: var(--section-padding) var(--gutter);
  }
}

.cta__heading {
  margin: 0 0 var(--stack-md);
  font-size: 28px;
}

@media (min-width: 768px) {
  .cta__heading {
    font-size: 32px;
  }
}

.cta__text {
  margin: 0 0 var(--stack-lg);
  color: var(--ink-stone);
  opacity: 0.85;
  font-size: 16px;
}

@media (min-width: 768px) {
  .cta__text {
    font-size: 18px;
  }
}

/* ── Product showcase ──────────────────────────────────────── */

.product-showcase {
  padding: var(--section-padding-mobile) 0;
}

@media (min-width: 768px) {
  .product-showcase {
    padding: var(--section-padding) 0;
  }
}

.product-showcase__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
  align-items: stretch;
}

@media (min-width: 768px) {
  .product-showcase__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.product-showcase__column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.product-showcase__column--grid {
  padding: 1.5rem;
}

.product-showcase--gap .product-showcase__inner {
  gap: 1.5rem;
}

.product-showcase--joined .product-showcase__inner {
  gap: 0;
}

@media (min-width: 768px) {
  .product-showcase--joined .product-showcase__column--text {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  .product-showcase--joined .product-showcase__column--grid {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
}

.product-showcase__text {
  max-width: 60ch;
}

.product-showcase__heading {
  margin: 0 0 var(--stack-md);
  font-size: 28px;
  color: var(--deep-forest);
}

@media (min-width: 768px) {
  .product-showcase__heading {
    font-size: 32px;
  }
}

.product-showcase--section-deep-forest .product-showcase__heading,
.product-showcase--section-deep-forest-dark .product-showcase__heading,
.product-showcase__column--deep-forest .product-showcase__heading,
.product-showcase__column--deep-forest-dark .product-showcase__heading,
.product-showcase__column--harvest-gold-dark .product-showcase__heading {
  color: var(--off-white);
}

.product-showcase__body {
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .product-showcase__body {
    font-size: 18px;
  }
}

.product-showcase__body > *:first-child {
  margin-top: 0;
}

.product-showcase__body > *:last-child {
  margin-bottom: 0;
}

.product-showcase__cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: var(--stack-md);
  padding: 0.75rem 1.5rem;
  background-color: var(--deep-forest);
  color: var(--eco-cream);
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background-color 0.2s ease;
}

@media (min-width: 768px) {
  .product-showcase__cta {
    padding: 0.875rem 1.75rem;
  }
}

.product-showcase__cta:hover {
  background-color: var(--deep-forest-dark);
}

.product-showcase__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .product-showcase__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--off-white);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

.product-card__media {
  aspect-ratio: 2.5 / 1;
  overflow: hidden;
  background-color: var(--eco-cream-dark);
}

.product-card__media picture,
.product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem;
}

.product-card__title {
  margin: 0 0 var(--stack-sm);
  font-size: 18px;
  font-weight: 600;
}

.product-card__description {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-stone);
  opacity: 0.8;
}

/* ── Logo cloud ────────────────────────────────────────────── */

.logo-cloud {
  padding: 5rem 0;
}

.logo-cloud__inner {
  text-align: center;
}

.logo-cloud__heading {
  margin: 0 0 var(--stack-md);
  font-size: 28px;
  color: var(--deep-forest);
}

@media (min-width: 768px) {
  .logo-cloud__heading {
    font-size: 32px;
  }
}

.logo-cloud--section-deep-forest .logo-cloud__heading,
.logo-cloud--section-deep-forest-dark .logo-cloud__heading {
  color: var(--off-white);
}

.logo-cloud__intro {
  margin: 0 auto var(--stack-lg);
  max-width: none;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-stone);
  opacity: 0.85;
}

@media (min-width: 768px) {
  .logo-cloud__intro {
    font-size: 18px;
  }
}

.logo-cloud__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.logo-cloud__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.5rem;
  height: 5.5rem;
  padding: 0.5rem;
  background-color: var(--off-white);
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logo-cloud__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.logo-cloud__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── Card grid ─────────────────────────────────────────────── */

.card-grid {
  padding: var(--section-padding-mobile) 0;
}

@media (min-width: 768px) {
  .card-grid {
    padding: var(--section-padding) 0;
  }
}

.card-grid__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
  align-items: stretch;
}

@media (min-width: 768px) {
  .card-grid__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.card-grid__column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-grid__column--grid {
  padding: 1.5rem;
}

.card-grid--gap .card-grid__inner {
  gap: 1.5rem;
}

.card-grid--joined .card-grid__inner {
  gap: 0;
}

@media (min-width: 768px) {
  .card-grid--joined .card-grid__column--text {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  .card-grid--joined .card-grid__column--grid {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
}

.card-grid__heading {
  margin: 0 0 var(--stack-md);
  font-size: 28px;
  color: var(--deep-forest);
}

@media (min-width: 768px) {
  .card-grid__heading {
    font-size: 32px;
  }
}

.card-grid--section-deep-forest .card-grid__heading,
.card-grid--section-deep-forest-dark .card-grid__heading,
.card-grid__column--deep-forest .card-grid__heading,
.card-grid__column--deep-forest-dark .card-grid__heading,
.card-grid__column--harvest-gold-dark .card-grid__heading {
  color: var(--off-white);
}

.card-grid__body {
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .card-grid__body {
    font-size: 18px;
  }
}

.card-grid__body > *:first-child {
  margin-top: 0;
}

.card-grid__body > *:last-child {
  margin-bottom: 0;
}

.card-grid__cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: var(--stack-md);
  padding: 0.75rem 1.5rem;
  background-color: var(--deep-forest);
  color: var(--eco-cream);
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background-color 0.2s ease;
}

@media (min-width: 768px) {
  .card-grid__cta {
    padding: 0.875rem 1.75rem;
  }
}

.card-grid__cta:hover {
  background-color: var(--deep-forest-dark);
}

.card-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .card-grid__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.card-grid__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-grid__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

/* Card background colours */

.card-grid__card--bg-white {
  background-color: var(--off-white);
}

.card-grid__card--bg-eco-cream {
  background-color: var(--eco-cream);
}

.card-grid__card--bg-eco-cream-dark {
  background-color: var(--eco-cream-dark);
}

.card-grid__card--bg-eco-cream-light {
  background-color: var(--eco-cream-light);
}

.card-grid__card--bg-harvest-gold {
  background-color: var(--harvest-gold);
}

.card-grid__card--bg-harvest-gold-dark {
  background-color: var(--harvest-gold-dark);
  color: var(--off-white);
}

.card-grid__card--bg-harvest-gold-light {
  background-color: var(--harvest-gold-light);
}

.card-grid__card--bg-deep-forest {
  background-color: var(--deep-forest);
  color: var(--off-white);
}

.card-grid__card--bg-deep-forest-dark {
  background-color: var(--deep-forest-dark);
  color: var(--off-white);
}

.card-grid__card--bg-deep-forest-light {
  background-color: var(--deep-forest-light);
}

/* Icon alignment — affects both icon and content */

.card-grid__card--icon-center {
  align-items: center;
  text-align: center;
}

.card-grid__card--icon-left {
  align-items: flex-start;
  text-align: left;
}

.card-grid__card--icon-right {
  align-items: flex-end;
  text-align: right;
}

/* Icon size */

.card-grid__card--icon-sm .card-grid__card-media {
  max-width: 3.5rem;
  aspect-ratio: 1 / 1;
}

.card-grid__card--icon-md .card-grid__card-media {
  max-width: 4.5rem;
  aspect-ratio: 1 / 1;
}

.card-grid__card--icon-lg .card-grid__card-media {
  max-width: 6rem;
  aspect-ratio: 1 / 1;
}

.card-grid__card-media {
  overflow: hidden;
  background-color: transparent;
  margin: 1.5rem 0 0;
}

.card-grid__card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem 1.25rem;
}

.card-grid__card-media picture,
.card-grid__card-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.card-grid__card-title {
  margin: 0 0 var(--stack-sm);
  font-size: 18px;
  font-weight: 600;
}

.card-grid__card-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-stone);
  opacity: 0.8;
}

/* ── Contact form section ──────────────────────────────────── */

.contact-form-section {
  padding: var(--section-padding-mobile) 0;
}

@media (min-width: 768px) {
  .contact-form-section {
    padding: var(--section-padding) 0;
  }
}

.contact-form-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
  align-items: stretch;
}

@media (min-width: 768px) {
  .contact-form-section__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form-section__column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.contact-form-section__column--media {
  padding: 0;
}

.contact-form-section__column--media picture,
.contact-form-section__column--media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-form-section--gap .contact-form-section__inner {
  gap: 1.5rem;
}

.contact-form-section--joined .contact-form-section__inner {
  gap: 0;
}

@media (min-width: 768px) {
  .contact-form-section--joined .contact-form-section__column--content {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  .contact-form-section--joined .contact-form-section__column--media {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  .contact-form-section--image-left .contact-form-section__column--content {
    order: 2;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  .contact-form-section--image-left .contact-form-section__column--media {
    order: 1;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
}

.contact-form-section__heading {
  margin: 0 0 var(--stack-md);
  font-size: 28px;
  color: var(--deep-forest);
}

@media (min-width: 768px) {
  .contact-form-section__heading {
    font-size: 32px;
  }
}

.contact-form-section--section-deep-forest .contact-form-section__heading,
.contact-form-section--section-deep-forest-dark .contact-form-section__heading,
.contact-form-section__column--deep-forest .contact-form-section__heading,
.contact-form-section__column--deep-forest-dark .contact-form-section__heading,
.contact-form-section__column--harvest-gold-dark .contact-form-section__heading {
  color: var(--off-white);
}

.contact-form-section__body {
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
  opacity: 0.9;
}

.contact-form-section__body > *:first-child {
  margin-top: 0;
}

.contact-form-section__body > *:last-child {
  margin-bottom: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: var(--stack-md);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: inherit;
}

.contact-form__input,
.contact-form__textarea {
  padding: 0.75rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background-color: var(--surface);
  color: var(--on-surface);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--primary);
  border-width: 2px;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 8rem;
}

.contact-form__submit {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  background-color: var(--deep-forest);
  color: var(--eco-cream);
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contact-form__submit:hover {
  background-color: var(--deep-forest-dark);
}

.contact-form__feedback {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.contact-form__feedback.is-success {
  background-color: var(--deep-forest-light);
  color: var(--off-white);
}

.contact-form__feedback.is-error {
  background-color: var(--error);
  color: var(--on-error);
}

/* ── Product hero ──────────────────────────────────────────── */

.product-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30vh;
  padding: var(--section-padding-mobile) 0;
  background-color: var(--deep-forest-dark);
  color: var(--off-white);
  overflow: hidden;
  text-align: center;
}

@media (min-width: 768px) {
  .product-hero {
    min-height: 40vh;
    padding: var(--section-padding) 0;
  }
}

.product-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.product-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20, 54, 37, 0.85) 0%,
    rgba(20, 54, 37, 0.6) 60%,
    rgba(20, 54, 37, 0.3) 100%
  );
}

.product-hero__media picture,
.product-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-hero__content {
  position: relative;
  z-index: 1;
}

.product-hero__heading {
  margin: 0 0 var(--stack-md);
  font-size: 32px;
  color: var(--off-white);
}

@media (min-width: 768px) {
  .product-hero__heading {
    font-size: 48px;
  }
}

.product-hero__subheading {
  margin: 0;
  font-size: 16px;
  color: rgba(253, 253, 253, 0.9);
}

@media (min-width: 768px) {
  .product-hero__subheading {
    font-size: 18px;
  }
}

/* ── Card grid & contact form background utilities ─────────── */

.card-grid--section-white,
.contact-form-section--section-white {
  background-color: var(--off-white);
}

.card-grid--section-deep-forest,
.contact-form-section--section-deep-forest {
  background-color: var(--deep-forest);
  color: var(--off-white);
}

.card-grid--section-deep-forest-dark,
.contact-form-section--section-deep-forest-dark {
  background-color: var(--deep-forest-dark);
  color: var(--off-white);
}

.card-grid--section-deep-forest-light,
.contact-form-section--section-deep-forest-light {
  background-color: var(--deep-forest-light);
  color: var(--ink-stone);
}

.card-grid--section-harvest-gold,
.contact-form-section--section-harvest-gold {
  background-color: var(--harvest-gold);
  color: var(--ink-stone);
}

.card-grid--section-harvest-gold-dark,
.contact-form-section--section-harvest-gold-dark {
  background-color: var(--harvest-gold-dark);
  color: var(--off-white);
}

.card-grid--section-harvest-gold-light,
.contact-form-section--section-harvest-gold-light {
  background-color: var(--harvest-gold-light);
  color: var(--ink-stone);
}

.card-grid--section-eco-cream,
.contact-form-section--section-eco-cream {
  background-color: var(--eco-cream);
  color: var(--ink-stone);
}

.card-grid--section-eco-cream-dark,
.contact-form-section--section-eco-cream-dark {
  background-color: var(--eco-cream-dark);
  color: var(--ink-stone);
}

.card-grid--section-eco-cream-light,
.contact-form-section--section-eco-cream-light {
  background-color: var(--eco-cream-light);
  color: var(--ink-stone);
}

.card-grid__column--white,
.contact-form-section__column--white {
  background-color: var(--off-white);
  color: var(--ink-stone);
}

.card-grid__column--deep-forest,
.contact-form-section__column--deep-forest {
  background-color: var(--deep-forest);
  color: var(--off-white);
}

.card-grid__column--deep-forest-dark,
.contact-form-section__column--deep-forest-dark {
  background-color: var(--deep-forest-dark);
  color: var(--off-white);
}

.card-grid__column--deep-forest-light,
.contact-form-section__column--deep-forest-light {
  background-color: var(--deep-forest-light);
  color: var(--ink-stone);
}

.card-grid__column--harvest-gold,
.contact-form-section__column--harvest-gold {
  background-color: var(--harvest-gold);
  color: var(--ink-stone);
}

.card-grid__column--harvest-gold-dark,
.contact-form-section__column--harvest-gold-dark {
  background-color: var(--harvest-gold-dark);
  color: var(--off-white);
}

.card-grid__column--harvest-gold-light,
.contact-form-section__column--harvest-gold-light {
  background-color: var(--harvest-gold-light);
  color: var(--ink-stone);
}

.card-grid__column--eco-cream,
.contact-form-section__column--eco-cream {
  background-color: var(--eco-cream);
  color: var(--ink-stone);
}

.card-grid__column--eco-cream-dark,
.contact-form-section__column--eco-cream-dark {
  background-color: var(--eco-cream-dark);
  color: var(--ink-stone);
}

.card-grid__column--eco-cream-light,
.contact-form-section__column--eco-cream-light {
  background-color: var(--eco-cream-light);
  color: var(--ink-stone);
}

.card-grid__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: var(--stack-md);
}

.card-grid__gallery-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-grid__gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.card-grid__gallery-card-media {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background-color: var(--eco-cream-dark);
  border-radius: var(--radius);
}

.card-grid__gallery-card-media picture,
.card-grid__gallery-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}