@layer components {
  .nh-fq {
    container-type: inline-size;
    container-name: nh-fq;
    position: relative;
    min-height: 34vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-block: var(--space-3xl);
  }

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

  .nh-fq__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .nh-fq__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      135deg,
      oklch(0.10 0.04 142 / 0.68) 0%,
      oklch(0.14 0.03 142 / 0.54) 100%
    );
  }

  .nh-fq__content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .nh-fq__inner {
    max-width: 58rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .nh-fq__accent {
    width: 4.8rem;
    height: 0.4rem;
    background: var(--success);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-l);
  }

  .nh-fq__text {
    margin: 0;
    padding: 0;
    border: none;
  }

  .nh-fq__headline {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: var(--always-light);
    line-height: 1.15;
    margin-bottom: var(--space-m);
    letter-spacing: -0.01em;
  }

  .nh-fq__body {
    font-size: var(--text-ml);
    color: var(--always-light);
    opacity: 0.82;
    line-height: 1.6;
    max-width: 48rem;
    /* Centre the narrower body within the wider blockquote — without this the
       48rem box sits left of the (up to 58rem) headline. */
    margin-inline: auto;
  }

  @container nh-fq (max-width: 768px) {
    .nh-fq__overlay {
      background: linear-gradient(
        180deg,
        oklch(0.10 0.04 142 / 0.72) 0%,
        oklch(0.14 0.02 142 / 0.45) 100%
      );
    }
  }

  @container nh-fq (max-width: 640px) {
    .nh-fq__headline { font-size: var(--text-2xl); }
    .nh-fq__body { font-size: var(--text-m); }
    .nh-fq__accent { width: 3.6rem; height: 0.3rem; }
  }
}