.section-label {
  color: var(--color-accent);
  font-size: var(--step--2);
  font-weight: 600;
  text-align: center;
}

.section-title {
  font-family: var(--secondary-font);
  font-size: var(--step-1);
  font-weight: 500;
  text-align: center;
}

/* ===== Hero ===== */

@media only screen and (min-width: 0rem) {
  .hero {
    padding: var(--section-padding);

    .hero-content {
      .hero-headline {
        margin-bottom: var(--space-xs-s);

        font-family: var(--secondary-font);
        font-size: var(--step-4);
        font-weight: 500;
      }

      .hero-subheadline {
        margin-bottom: var(--space-m-l);

        font-size: var(--step-0);
      }

      .hero-ctas {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs);
        margin-bottom: var(--space-m-l);
      }
    }

    .hero-image {
      overflow: hidden;
      border-radius: 4px;
    }
  }
}

@media only screen and (min-width: 48rem) {
  .hero {
    .content-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-l);
    }

    .hero-content {
      flex: 1.15;

      .hero-ctas {
        margin-bottom: 0;
      }
    }

    .hero-image {
      flex: 1;
    }
  }
}

/* ===== Expertise ===== */

@media only screen and (min-width: 0rem) {
  .expertise {
    padding: var(--section-padding);
    background: var(--color-surface-2);

    .content-wrapper {
      .section-label {
        margin-bottom: var(--space-3xs);
      }

      .section-title {
        margin-bottom: var(--space-m);
      }

      .expertise-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-m);

        .info-card {
          display: flex;
          flex-direction: column;
          flex: 1;
          align-items: start;

          padding: var(--space-l);
          background-color: var(--color-surface);

          .card-icon {
            margin-bottom: var(--space-s);
            width: var(--step-3);
          }

          .title {
            margin-bottom: var(--space-3xs);

            font-size: var(--step-0);
            font-weight: 600;
          }

          .card-body {
            font-size: var(--step-0);
          }
        }
      }
    }
  }
}

@media only screen and (min-width: 48rem) {
  .expertise .content-wrapper .expertise-list {
    flex-direction: row;
  }
}

/* ===== Products ===== */

@media only screen and (min-width: 0rem) {
  .products {
    padding: var(--section-padding);

    .section-label {
      margin-bottom: var(--space-3xs);
    }

    .section-title {
      margin-bottom: var(--space-m);
    }

    .product-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-m);
    }

    .product-card {
      overflow: hidden;
      border: 1px solid var(--color-divider);
      border-radius: 4px;
      transition:
        border-color var(--duration-normal) var(--ease),
        box-shadow var(--duration-normal) var(--ease),
        transform var(--duration-normal) var(--ease),
        background var(--duration-normal) var(--ease);

      .product-card__media {
        aspect-ratio: 2.5 / 1;
        border-bottom: 1px solid var(--color-divider);
        overflow: hidden;

        > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }

      /* Remove after all products pictures are in */
      .product-card__grain {
        display: block;
        width: 100%;
        height: 100%;
        background:
          radial-gradient(
            circle at top left,
            rgba(151, 107, 70, 0.18),
            transparent 45%
          ),
          linear-gradient(135deg, #faf6f0 0%, #f0e8dd 100%);
      }

      .product-card__body {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);
        padding: var(--space-m);
      }

      .product-card__eyebrow {
        font-size: var(--step--2);
        font-weight: 600;
        letter-spacing: 0.1em;
        color: var(--color-accent);
      }

      .product-card__title {
        font-family: var(--secondary-font);
        font-size: var(--step-1);
        font-weight: 500;
      }

      .product-card__description {
        font-size: var(--step-0);
        font-weight: 400;
        color: var(--color-text);
        margin-bottom: var(--space-3xs);
      }
    }

    .product-card:hover,
    .product-card:focus-within {
      border-color: var(--color-accent-divider);
      box-shadow:
        0 4px 8px -8px rgba(0, 0, 0, 0.3),
        0 22px 32px -28px rgba(0, 0, 0, 0.2);
      transform: translateY(-2px);
      background: linear-gradient(135deg, #fdfdfd 0%, #f5f8f5 100%);
    }
  }
}

@media only screen and (min-width: 48rem) {
  .products {
    .product-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

/* ===== Process ===== */

@media only screen and (min-width: 0rem) {
  .process {
    padding: var(--section-padding);
    background: var(--color-surface-2);

    .section-label {
      margin-bottom: var(--space-3xs);
    }

    .section-title {
      margin-bottom: var(--space-m);
    }

    .process-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
      gap: var(--space-m);
    }

    .process-step {
      border: 1px solid var(--color-divider);
      border-radius: 4px;
      background: var(--color-surface);
      padding: var(--space-m);

      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }

    .process-step__eyebrow {
      font-size: var(--step-0);
      font-weight: 600;
      letter-spacing: 0.1em;
      color: var(--color-accent);
      opacity: 0.8;
    }

    .process-step__title {
      font-size: var(--step-0);
      font-weight: 500;
    }

    .process-step__body {
      font-size: var(--step--1);
    }
  }
}

/* ===== Founder ===== */

@media only screen and (min-width: 0rem) {
  .founder {
    padding: var(--section-padding);

    .content-wrapper {
      display: flex;
      flex-direction: column;
      gap: var(--space-s-m);
    }

    .founder-image {
      border-radius: 4px;
      max-width: 12em;
      object-fit: cover;
    }

    .founder-quote__text {
      position: relative;
      margin-bottom: var(--space-2xs);

      font-size: var(--step-0);
      font-weight: 400;
      line-height: 1.3;

      &::before {
        position: absolute;
        top: -0.2em;
        left: -0.2em;

        content: "“";
        font-family: var(--secondary-font);
        font-size: 3em;
        line-height: 1;
        color: var(--color-accent);
        opacity: 0.15;
      }
    }

    .founder-quote__name {
      font-size: var(--step--1);
      font-weight: 500;
      color: var(--color-text);
    }

    .founder-quote__title {
      font-size: var(--step--2);
      color: var(--color-text);
      opacity: 0.9;
    }
  }
}

@media only screen and (min-width: 48rem) {
  .founder {
    .content-wrapper {
      max-width: 52rem;
      flex-direction: row-reverse;
    }
  }
}

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

@media only screen and (min-width: 0rem) {
  .faq {
    padding: var(--section-padding);
    background: var(--color-surface-2);

    .content-wrapper {
      max-width: 48rem;
    }

    .section-label {
      margin-bottom: var(--space-3xs);
    }

    .section-title {
      margin-bottom: var(--space-m);
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }

    .faq-item {
      overflow: hidden;
      border: 1px solid var(--color-divider);
      border-radius: 4px;

      font-size: var(--step-0);
      background: var(--color-surface);

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        padding: var(--space-s);
        border: 0;

        background-color: var(--color-surface);
        text-align: left;
        font-weight: 500;

        .icon {
          width: 24px;
          height: 24px;
          margin-left: 16px;

          transition: transform var(--duration-normal) var(--ease);
        }

        .icon > svg {
          width: 100%;
          height: 100%;

          stroke: var(--color-text);
          stroke-width: 0.125em;
          fill: none;
        }
      }

      .header.is-open .icon {
        transform: rotate(-180deg);
      }

      .content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--duration-slow) var(--ease);
        overflow: hidden;

        &.is-open {
          grid-template-rows: 1fr;
        }

        .content-inner {
          min-height: 0;

          > p {
            padding: 0 var(--space-s) var(--space-s);

            font-weight: 400;
          }
        }
      }
    }
  }
}

/* ===== Contact Us ===== */

@media only screen and (min-width: 0rem) {
  .contact-us {
    padding: var(--section-padding);
  }
}