/* About hero */
.about-hero {
  position: relative;
  overflow: visible;
  gap: calc(40 * var(--u));
}

/* Big circle: only its bottom part shows under the hero top edge, the rest
   sits behind the header (so the hero needs overflow: visible). */
.about-hero::before {
  content: "";
  position: absolute;
  top: calc(-450 * var(--u));
  left: 40%;
  width: calc(800 * var(--u));
  height: calc(800 * var(--u));
  border-radius: 50%;
  background: var(--color-sea-nymph);
  filter: blur(calc(70 * var(--u)));
  z-index: 0;
}

.about-title,
.about-hero > .btn {
  position: relative;
  z-index: 1;
}

/* On phones --u gets bigger, which would make this circle grow on a smaller
   screen, so it gets its own fixed sizes here. */
@media (max-width: 767px) {
  .about-hero::before {
    top: -270px;
    left: 35%;
    width: 320px;
    height: 320px;
    filter: blur(28px);
  }
}

/* hidden on small phones, no room for it */
@media (max-width: 480px) {
  .about-hero::before {
    display: none;
  }
}

/* Origin */
.origin {
  margin: 0 var(--page-gutter) calc(100 * var(--u));
  padding: calc(110 * var(--u)) var(--page-gutter);
  border-radius: calc(24 * var(--u));
  background: color-mix(in srgb, var(--color-pastel-blood) 28%, var(--color-cream) 72%);
  display: flex;
  align-items: center;
  gap: calc(80 * var(--u));
  justify-content: space-between;
  flex-wrap: wrap;
}

.origin-title {
  max-width: calc(650 * var(--u));
}

.origin-text {
  line-height: 1.5;
  max-width: calc(760 * var(--u));
  color: var(--color-pine-forest);
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}

/* How we work */
.process-title {
  margin-bottom: calc(24 * var(--u));
}

.process-text {
  max-width: calc(680 * var(--u));
  line-height: 1.5;
  margin-bottom: calc(60 * var(--u));
}

/* steps stick to the top while scrolling, the opaque background lets each one
   cover the previous */
.step {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  padding: calc(50 * var(--u)) 0;
  background: var(--color-cream);
  border-top: 1px solid var(--color-sage-line);
}

.step:last-child {
  border-bottom: 1px solid var(--color-sage-line);
}

.step-num {
  font-weight: 500;
  font-size: max(var(--font-min), calc(300 * var(--fu)));
  line-height: 1;
  color: var(--color-sea-nymph);
  flex-shrink: 0;
  min-width: calc(154 * var(--u));
}

.step-copy {
  width: 44%;
  flex-shrink: 0;
  text-align: left;
}

.step-title {
  font-weight: var(--body-b-weight);
  font-size: var(--h3-size);
  text-transform: uppercase;
  margin-bottom: calc(12 * var(--u));
}

.step-text {
  line-height: 1.4;
  max-width: calc(720 * var(--u));
  color: var(--color-pine-forest);
}

@media (max-width: 600px) {
  .step {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--u));
  }
  .step-copy {
    width: 100%;
  }
}

/* Cultures */
.cultures-head {
  display: flex;
  justify-content: space-between;
  gap: calc(60 * var(--u));
  flex-wrap: wrap;
  margin-bottom: calc(70 * var(--u));
}

.cultures-title {
  max-width: calc(650 * var(--u));
}

.cultures-text {
  align-self: flex-end;
  max-width: calc(680 * var(--u));
  line-height: 1.5;
  color: var(--color-pine-forest);
}

.cultures-grid {
  display: grid;
  grid-template-columns: 4fr 4fr 4fr 4fr 3fr;
  gap: calc(20 * var(--u));
}

.culture {
  border-radius: calc(24 * var(--u));
  background: var(--color-sage-20);
  padding: calc(32 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(40 * var(--u));
  position: relative;
  overflow: hidden;
}

.culture > * {
  position: relative;
  z-index: 1;
}

/* blurred blob in one corner of each card */
.culture::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-sea-nymph);
  filter: blur(calc(50 * var(--u)));
  pointer-events: none;
  top: -25%;
  left: -25%;
}

.culture:nth-child(1)::before {
  top: auto;
  left: auto;
  bottom: -25%;
  right: -25%;
}

.culture:nth-child(3)::before {
  left: auto;
  right: -25%;
}

.culture-title {
  font-weight: var(--body-b-weight);
  font-size: max(var(--font-min), calc(20 * var(--fu)));
  text-transform: uppercase;
  color: var(--color-pine-forest);
}

/* the last card is an h3 and uses the h3 size */
h3.culture-title {
  font-size: var(--h3-size);
  line-height: 1em;
}

.culture-text {
  font-size: var(--body-r-size);
  line-height: 1em;
  color: var(--color-pine-forest);
}

.culture-text-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 767px) {
  .cultures-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cultures-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .cultures-grid {
    grid-template-columns: 1fr;
  }
  .culture {
    aspect-ratio: auto;
    min-height: calc(200 * var(--u));
  }
}

/* Behind the work */
.behind {
  display: flex;
  gap: calc(60 * var(--u));
  align-items: stretch;
}

.behind-media {
  flex: 1 1 55%;
  min-height: calc(480 * var(--u));
  border-radius: calc(40 * var(--u));
  overflow: hidden;
}

.behind-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.behind-copy {
  flex: 1 1 35%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(70 * var(--u));
}

.behind-title {
  font-weight: 700;
  font-size: max(var(--font-min), calc(44 * var(--fu)));
  text-transform: uppercase;
  color: var(--color-persian-plum);
}

.behind-text {
  line-height: 1.5;
  color: var(--color-pine-forest);
}

@media (max-width: 767px) {
  .behind {
    flex-direction: column;
  }
  .behind-media {
    min-height: calc(320 * var(--u));
  }
}

/* Culture cards: photo full width at the top, text padded below */
.culture {
  padding: 0;
  gap: 0;
  justify-content: flex-start;
}
.culture .culture-image {
  margin: 0;
  flex: none;
  height: calc(300 * var(--u));
}
.culture .culture-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
}
.culture-body {
  flex: 1;
  padding: calc(16 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(16 * var(--u));
}
@media (max-width: 600px) {
  .culture .culture-image {
    height: calc(200 * var(--u));
  }
}

/* Culture cards: title 36px at 1920, caption under the photo */
.culture h4.culture-title {
  font-size: max(var(--font-min), calc(36 * var(--fu)));
}
.culture .culture-note {
  margin: 0;
  font-size: var(--body-s-size);
  line-height: 1.3;
  color: var(--color-pine-forest);
}

/* Last card: single title, centred and at its original h3 size */
.culture-body:has(h3.culture-title) {
  justify-content: center;
}