/* About content spacing, following DESIGN-SYSTEM.md. Tokens are scoped to
   content sections so the shared hero, header, and footer are unaffected. */
.about-intro-video,
.about-chat,
.about-mission-transition,
.about-mission-values,
.about-review,
.about-booking {
  --about-space-section: var(--_spacing---spacing--3xl);
  --about-space-major: var(--_spacing---spacing--xl);
  --about-space-component: var(--_spacing---spacing--md);
  --about-space-tight: var(--_spacing---spacing--sm);
}

.about-chat {
  padding-top: var(--about-space-section);
  padding-bottom: var(--about-space-section);
}

.about-chat .about-chat-inner {
  margin-bottom: var(--about-space-major);
}

.about-chat .about-chat-inner.mb-0 {
  margin-bottom: 0;
}

.about-chat .heading-27,
.about-chat .paragraph-17 {
  margin-top: 0;
  margin-bottom: var(--about-space-tight);
}

.about-chat .paragraph-17.mb-0 {
  margin-bottom: 0;
}

.about-chat .about-vision {
  margin-top: 64px;
  row-gap: var(--about-space-component);
}

.about-chat .heading-28c {
  margin-top: 0;
  margin-bottom: 0;
}

/* The exported button utility adds 24px of margin on top of the CTA gap. */
.about-chat .about-vision > .btn--primary {
  margin-top: 0;
  margin-bottom: 0;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .about-chat {
    padding-bottom: 96px;
  }

  .about-chat .about-vision {
    margin-top: 48px;
  }

  .about-intro-video,
  .about-chat,
  .about-mission-transition,
  .about-mission-values,
  .about-review,
  .about-booking {
    --about-space-section: 72px;
    --about-space-major: 36px;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .about-chat .about-vision {
    margin-top: 48px;
  }

  .about-intro-video,
  .about-chat,
  .about-mission-transition,
  .about-mission-values,
  .about-review,
  .about-booking {
    --about-space-section: var(--_spacing---spacing--2xl);
    --about-space-major: 36px;
  }

  .about-chat .heading-28c {
    font-size: clamp(19px, 3.67vw, 22px);
  }
}

@media screen and (max-width: 479px) {
  .about-chat {
    padding-top: 32px;
  }

  .about-chat .about-vision > .btn--primary {
    font-size: 14px;
  }

  .about-chat .about-vision {
    margin-top: 40px;
  }

  .about-intro-video,
  .about-chat,
  .about-mission-transition,
  .about-mission-values,
  .about-review,
  .about-booking {
    --about-space-section: 56px;
    --about-space-major: var(--_spacing---spacing--lg);
  }
}

@media screen and (max-width: 767px) {
  .about-chat .about-chat-inner,
  .about-chat .about-chat-inner.mb-0 {
    row-gap: var(--about-space-major);
  }
}