/* About Us frame 211:7708. Page content stays in flow as columns collapse. */
@media (min-width: 768px) and (max-width: 1320px) {
  body.about-us-page .about-hero { display: flex; flex-direction: column; height: auto; padding: 0; background: var(--paper) var(--noise); }
  body.about-us-page .about-hero :is(.photo-collage,.photo-collage__frame) { display: contents; }
  body.about-us-page .about-hero .photo-collage__strip { order: 1; display: flex; gap: 12px; height: 140px; padding-left: 24px; overflow: hidden; }
  body.about-us-page .about-hero .photo-collage__strip + .photo-collage__strip { order: 3; margin-top: 48px; }
  body.about-us-page .about-hero .photo-collage__strip img { position: static !important; flex: none; width: 140px !important; height: 140px !important; object-fit: cover; }
  body.about-us-page .about-hero .photo-collage__rest { display: none; }
  body.about-us-page .about-hero__content { order: 2; position: static; width: min(690px,calc(100% - 48px)); height: auto; margin-inline: auto; padding: 48px 0 0; transform: none; }
  body.about-us-page .about-hero__title { width: min(100%,560px); margin: 0 auto; font-size: 48px; line-height: 48px; }
  body.about-us-page .about-hero__content > p { margin: 32px auto 0; font-size: 18px; line-height: 26px; }
  body.about-us-page .about-hero__content > strong { display: block; margin-top: 24px; font-size: 16px; }
  body.about-us-page .about-hero__content > div { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
  body.about-us-page .about-story { height: auto; margin-top: 80px; }
  body.about-us-page .about-story__intro { height: auto; }
  body.about-us-page .about-story__intro h2 { width: min(690px,calc(100% - 48px)); }
  body.about-us-page .about-story__row { grid-template-columns: minmax(0,555px); margin-top: 60px; padding-inline: 24px; }
  body.about-us-page .about-story__row > img { width: 100%; height: auto; aspect-ratio: 555 / 363; }
  body.about-us-page .about-story__row > div { padding-top: 0; text-align: center; }
  body.about-us-page .about-story__row .button { margin-inline: auto; }
  body.about-us-page .about-values { height: auto; grid-template-columns: minmax(0,500px); justify-content: center; gap: 60px; margin-top: 80px; padding-inline: 24px; }
  body.about-us-page .about-values__intro { grid-row: 1; }
  body.about-us-page .about-values__intro h2 { width: 100%; line-height: 50px; }
  body.about-us-page .about-value { padding-top: 0; }
  body.about-us-page .about-team { height: auto; margin-top: 80px; }
  body.about-us-page .about-team__intro { height: auto; }
  body.about-us-page .about-team__grid { grid-template-columns: repeat(2,minmax(0,325px)); grid-template-rows: none; height: auto; gap: 56px 24px; margin-top: 60px; }
  body.about-us-page .about-team-card > div { width: 100%; height: auto; aspect-ratio: 325 / 373; }
  body.about-us-page .about-collage { display: flex; flex-direction: column; height: auto; min-height: 0; padding: 60px 0; margin-top: 80px; }
  body.about-us-page .about-collage__lines { display: none; }
  body.about-us-page .about-collage__copy { position: static; width: min(644px,calc(100% - 48px)); margin-inline: auto; transform: none; text-align: center; }
  body.about-us-page .about-collage__copy .button { margin-inline: auto; }
  body.about-us-page .about-collage__media { position: static; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; width: auto; margin: 48px 24px 0; transform: none; }
  body.about-us-page .about-collage__media :is(.photo-collage__strip,.photo-collage__rest) { display: contents; }
  body.about-us-page .about-collage__media img { position: static; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
  body.about-us-page .faq-section { height: auto; min-height: 0; margin-top: 120px; padding-bottom: 80px; }
}

@media (max-width: 767px) {
  html:has(body.about-us-page) { scrollbar-width: none; }
  body.about-us-page { --page-gutter: 16px; }
  body.about-us-page :is(.about-hero__title,.about-hero__content > p,.about-story__intro h2,.about-story__lede,.about-story__row p,.about-values__intro h2,.about-values__intro > p:not(.eyebrow),.about-value h3,.about-value p,.about-collage h2,.about-collage__copy p,.about-team__intro h2,.about-team-card h3,.about-team-card p,.faq-section h2,.faq-list details p) { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
  body.about-us-page .about-hero__content { padding-top: 40px; }
  body.about-us-page .about-hero__content > p { margin-top: 32px; }
  body.about-us-page .about-hero__content > div { gap: 14px; margin-top: 44px; }
  body.about-us-page .about-story__intro h2 { margin-top: 32px; }
  body.about-us-page .about-story__lede { margin-top: 32px; }
  body.about-us-page .about-story__row { margin-top: 40px; }
  body.about-us-page .about-story__row > img { height: auto; aspect-ratio: 381 / 254; }
  body.about-us-page .about-story__row > div { padding-top: 40px; }
  body.about-us-page .about-story__row p + p { margin-top: 24px; }
  body.about-us-page .about-story__row .button { margin-top: 44px; }
  body.about-us-page .trusted-strip { margin-top: 88px; }
  body.about-us-page .about-values .eyebrow { width: 135px; padding: 0; height: 30px; min-height: 30px; font-size: 16px; }
  body.about-us-page .about-values__intro h2 { margin-top: 32px; }
  body.about-us-page .about-values__intro > p:not(.eyebrow) { margin-top: 32px; }
  body.about-us-page .about-values__intro > p:not(.eyebrow) + p { margin-top: 24px; }
  body.about-us-page .about-values .about-value { margin-top: 40px; }
  body.about-us-page .about-value h3 { margin-top: 24px; }
  body.about-us-page .about-value p { margin-top: 24px; }
  body.about-us-page .about-collage { margin-top: 80px; }
  body.about-us-page .about-collage__copy { margin-top: 40px; }
  body.about-us-page .about-collage__copy p { margin-top: 32px; }
  body.about-us-page .about-collage__copy .button { margin-top: 44px; }
  body.about-us-page .about-team__intro h2 { margin-top: 32px; }
  body.about-us-page .about-team__grid { grid-template-columns: minmax(0,325px); gap: 16px; margin-top: 40px; padding: 0 36px 0 53px; }
  body.about-us-page .about-team-card > div { height: auto; aspect-ratio: 325 / 373; }
  body.about-us-page .about-team-card h3 { margin-top: 24px; }
  body.about-us-page .about-team-card p { margin: 20px 0 0; }
  body.about-us-page .faq-section { margin-top: 80px; }
  body.about-us-page .faq-section .section-intro h2 { margin-top: 32px; }
  body.about-us-page .faq-list { margin-top: 40px; }
}

@media (max-width: 389px) {
  body.about-us-page .about-hero__content > div { gap: 12px; }
  body.about-us-page .about-hero__content > div .button { width: auto; flex: 1; max-width: 157px; font-size: 16px; }
  body.about-us-page .about-team__grid { padding-inline: 16px; justify-content: center; }
}
