/* About Us — mobile layout aligned with esttech.com (430px viewport, mobile UA) */
@media (max-width: 980px) {
  body:has(.page-about) {
    --header-h: 89px;
  }

  body:has(.page-about) .site-brand__logo {
    width: 80px;
    height: 78px;
  }

  body:has(.page-about) .site-brand__name {
    display: block;
    left: 72px;
    top: 28px;
    font-size: 22px;
  }

  body:has(.page-about) .site-header__inner {
    max-width: 320px;
    padding-inline: 0;
    margin-inline: auto;
  }

  body:has(.page-about) .site-nav__burger {
    right: 0;
  }

  .page-about .site-container {
    width: 100%;
    max-width: 430px;
    padding-inline: 75px;
  }

  .page-about .about-meet__inner,
  .page-about .about-locations-intro__inner,
  .page-about .about-global__inner,
  .page-about .about-support__inner {
    max-width: none;
    margin-inline: auto;
  }

  .page-about .about-hero__stage,
  .page-about .about-journey__inner,
  .page-about .about-location__inner,
  .page-about .about-culture__stage {
    padding-inline: 0;
  }

  /* Hero — full-width bg, proportional height (320:188 @ source) */
  .page-about .about-hero {
    width: 100%;
    height: auto;
    margin-inline: 0;
    aspect-ratio: 320 / 188;
  }

  .page-about .about-hero__stage {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
    padding-top: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .page-about .about-hero__logo {
    width: 280px;
    height: 148px;
    object-fit: contain;
  }

  /* Meet ESTTECH */
  .page-about .about-meet {
    height: auto;
    padding: 41px 0 27px;
  }

  .page-about .about-meet__title {
    font-size: 50px;
    line-height: 45px;
  }

  .page-about .about-meet__tagline {
    font-size: 22px;
    line-height: 19.8px;
  }

  .page-about .about-meet__intro {
    font-size: 14px;
    line-height: 15.4px;
    font-weight: 400;
  }

  /* Our Journey — full-width bg */
  .page-about .about-journey {
    width: 100%;
    height: auto;
    margin-inline: 0;
    aspect-ratio: 320 / 475;
  }

  .page-about .about-journey__inner {
    padding: 42px 0 0;
    margin-inline: auto;
    height: 100%;
  }

  .page-about .about-journey .about-section-title {
    font-size: 30px;
    line-height: 27px;
  }

  .page-about .about-journey .about-section-copy {
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 400;
    margin-top: 10px;
  }

  /* Our Locations intro */
  .page-about .about-locations-intro {
    height: auto;
    min-height: 253px;
    padding: 20px 0;
  }

  .page-about .about-locations-intro .about-section-title {
    font-size: 30px;
    line-height: 27px;
  }

  .page-about .about-locations-intro .about-section-copy {
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 400;
  }

  /* Location cards — full-width bg, text centered on image */
  .page-about .about-location {
    width: 100%;
    height: auto;
    margin-inline: 0;
  }

  .page-about .about-location:nth-child(5) {
    aspect-ratio: 320 / 173;
  }

  .page-about .about-location:nth-child(6) {
    aspect-ratio: 320 / 173;
  }

  .page-about .about-location:nth-child(7) {
    aspect-ratio: 320 / 180;
  }

  .page-about .about-location:nth-child(8) {
    aspect-ratio: 320 / 188;
  }

  .page-about .about-location:nth-child(9) {
    aspect-ratio: 320 / 202;
  }

  .page-about .about-location__inner {
    height: 100%;
    padding: 0;
    margin-inline: auto;
    justify-content: center;
    background: none;
  }

  .page-about .about-location__label {
    font-size: 16px;
    line-height: 22.4px;
  }

  .page-about .about-location__title {
    font-size: 28px;
    line-height: 25.2px;
  }

  /* Global presence */
  .page-about .about-global {
    height: auto;
    padding: 20px 0;
    align-items: flex-start;
  }

  .page-about .about-global .about-section-title {
    font-size: 36px;
    line-height: 32.4px;
    text-align: start;
  }

  .page-about .about-global .about-section-copy {
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 400;
    text-align: start;
  }

  /* Culture — full-width bg with logo + copy overlay */
  .page-about .about-culture {
    width: 100%;
    height: auto;
    margin-inline: 0;
    aspect-ratio: 320 / 408;
  }

  .page-about .about-culture__stage {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    padding: 0;
  }

  .page-about .about-culture__logo {
    position: absolute;
    top: 24%;
    right: 12px;
    left: auto;
    transform: none;
    width: 157px;
    height: 157px;
    margin: 0;
  }

  .page-about .about-culture__copy {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    width: 280px;
    max-width: 280px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 15.4px;
    font-weight: 400;
    background: none;
  }

  /* Support */
  .page-about .about-support {
    height: auto;
    padding: 20px 0;
    align-items: flex-start;
  }

  .page-about .about-support .about-section-title {
    font-size: 34px;
    line-height: 30.6px;
    text-align: start;
  }

  .page-about .about-support .about-section-copy {
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 400;
    text-align: start;
  }

  .page-about .about-support__actions {
    margin-top: 28px;
  }

  .page-about .about-support__actions .btn--wide {
    width: 195px;
    min-width: 195px;
  }
}

@media (max-width: 768px) {
  body:has(.page-about) {
    --header-h: 89px;
  }
}