/*
 * High-similarity visual separation, 2026-07-24.
 * Content, imagery, company data, functionality and custom sections remain
 * unchanged. These rules only recompose the repeated hero/page-hero pattern.
 */
html,
body.teas-page {
  width: 100% !important;
  max-width: none !important;
  overflow-x: clip !important;
}

.teas-page--home .teas-hero__content::before {
  display: none !important;
}

.teas-page--home .teas-hero h1 {
  max-width: 12em !important;
  font-size: clamp(36px, 4vw, 58px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.025em !important;
}

.teas-page--home .teas-button {
  min-width: 148px !important;
  min-height: 50px !important;
  padding: 13px 25px !important;
  border-radius: 3px !important;
}

@media screen and (min-width: 821px) {
  .teas-side-rail {
    display: none !important;
  }

  .teas-page main,
  .teas-page .teas-footer {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .teas-page--home .teas-hero {
    width: min(calc(100% - 48px), 1540px) !important;
    height: min(76dvh, 760px) !important;
    min-height: 590px !important;
    margin: 18px auto 0 !important;
  }

  .teas-page--home .teas-hero__visual,
  .teas-page--home .teas-hero__visual img,
  .teas-page--home .teas-hero__content {
    height: 100% !important;
    min-height: 0 !important;
  }

  .teas-page--home .teas-hero__content {
    width: min(calc(100% - 96px), 1380px) !important;
    padding: 48px 0 !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article) {
    position: relative !important;
    width: min(calc(100% - 48px), 1540px) !important;
    min-height: 0 !important;
    margin: 18px auto 0 !important;
    overflow: hidden !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article)
    .teas-page-hero__copy,
  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article)
    .teas-page-hero__media {
    min-height: 0 !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article)
    .teas-page-hero__copy {
    height: auto !important;
  }
}

@media screen and (max-width: 820px) {
  body.teas-page,
  .teas-page main,
  .teas-page .teas-footer,
  .teas-header,
  .teas-header__inner {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .teas-page--home .teas-hero {
    width: 100% !important;
    height: min(72dvh, 650px) !important;
    min-height: 540px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .teas-page--home .teas-hero__visual,
  .teas-page--home .teas-hero__visual img,
  .teas-page--home .teas-hero__content {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .teas-page--home .teas-hero__content {
    padding: 34px 22px !important;
  }

  .teas-page--home .teas-hero h1 {
    font-size: clamp(30px, 9.2vw, 40px) !important;
    line-height: 1.28 !important;
  }

  .teas-page--home .teas-button {
    min-width: 132px !important;
    min-height: 46px !important;
    padding: 11px 20px !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article) {
    width: 100% !important;
    margin: 0 !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article)
    .teas-page-hero__copy,
  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article)
    .teas-page-hero__media {
    min-height: 0 !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article)
    .teas-page-hero__copy {
    height: auto !important;
  }
}

/* Quiet: shorter image stage with a light editorial title block below it. */
@media screen and (min-width: 821px) {
  .teas-page--home .teas-hero {
    width: min(calc(100% - 72px), 1500px) !important;
    height: min(72dvh, 700px) !important;
    border-radius: 5px !important;
  }

  .teas-page--home .teas-hero__visual::after {
    background: linear-gradient(
      90deg,
      rgba(17, 23, 30, 0.46),
      rgba(17, 23, 30, 0.1) 70%
    ) !important;
  }

  .teas-page--home .teas-hero__content {
    justify-content: flex-end !important;
    padding-bottom: 70px !important;
  }

  .teas-page--home .teas-hero h1 {
    max-width: 10em !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article) {
    display: grid !important;
    grid-template-rows: 430px auto !important;
    grid-template-columns: 1fr !important;
    width: min(calc(100% - 72px), 1500px) !important;
    border-radius: 5px !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article)
    .teas-page-hero__media {
    grid-row: 1 !important;
    height: 430px !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article)
    .teas-page-hero__copy {
    grid-row: 2 !important;
    min-height: 0 !important;
    padding: 32px clamp(38px, 5vw, 68px) !important;
    border-bottom: 1px solid var(--teas-line) !important;
    background: color-mix(in srgb, var(--teas-surface) 94%, var(--teas-surface-soft)) !important;
    color: var(--teas-ink) !important;
  }

  body.teas-page--sub .teas-page-hero__copy > p {
    color: var(--teas-accent) !important;
  }

  body.teas-page--sub .teas-page-hero__copy h1 {
    color: var(--teas-ink) !important;
    font-size: clamp(34px, 3.5vw, 50px) !important;
  }
}

@media screen and (max-width: 820px) {
  .teas-page--home .teas-hero__content {
    justify-content: flex-end !important;
    padding-bottom: 44px !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article) {
    display: grid !important;
    grid-template-rows: 330px auto !important;
    grid-template-columns: 1fr !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article)
    .teas-page-hero__media {
    grid-row: 1 !important;
    height: 330px !important;
  }

  body.teas-page--sub
    .teas-page-hero:not(.teas-page-hero--article)
    .teas-page-hero__copy {
    grid-row: 2 !important;
    min-height: 0 !important;
    padding: 24px 22px !important;
    background: color-mix(in srgb, var(--teas-surface) 94%, var(--teas-surface-soft)) !important;
    color: var(--teas-ink) !important;
  }

  body.teas-page--sub .teas-page-hero__copy > p,
  body.teas-page--sub .teas-page-hero__copy h1 {
    background: transparent !important;
    color: var(--teas-ink) !important;
    backdrop-filter: none !important;
  }
}