/* Keep the chapter canvas as tall as the expanded mobile browser viewport. */
@supports (height: 100lvh) {
  @media (max-width: 700px) {
    main > .hero,
    main > .choice-intro,
    main > .why-page,
    main > .snap-panel,
    main > .capabilities { min-height: 100lvh; }

    .hero.identity-hero,
    main > .why-page:not(.why-page-capability),
    main > .snap-approach:not(.snap-communicate) { min-height: 100lvh; }

    .snap-clients,
    .snap-company { height: 100lvh; min-height: 100lvh; }

    .snap-approach:not(.snap-communicate) > .sequence-section {
      min-height: 0;
    }
  }
}

@media (max-width: 700px) {
  .snap-company > .company {
    justify-content: center;
    padding-top: clamp(42px, 6svh, 66px);
    padding-bottom: clamp(30px, 4svh, 44px);
  }
}

@media (max-width: 700px) and (max-height: 720px) {
  .snap-company > .company { padding-top: 18px; padding-bottom: 18px; }
}

@media (min-width: 901px) {
  /* The heading reveal needs a little room for the final glyph's overhang. */
  #clients .chapter-title > span,
  #company .chapter-title > span {
    width: max-content;
    max-width: none;
    padding-right: .14em;
  }

  /* Match the two Growth Logic visuals on their upper edge. */
  .snap-approach:not(.snap-communicate) .approach-funnel {
    top: -84px;
  }
}

.site-footer {
  grid-template-columns: 1.35fr 2fr 1fr;
}

.site-footer .footer-address p + p {
  margin-top: 2px;
}

@media (max-width: 900px) {
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  body > .site-footer { grid-template-columns: 1fr; }
  .site-footer .footer-company { margin-top: 14px; }
}

/* Keep the mobile chapter at the same snap position in both scroll directions. */
@media (max-width: 700px) {
  main > .snap-approach:not(.snap-communicate) {
    height: 100lvh;
    min-height: 100lvh;
  }
  .snap-approach:not(.snap-communicate) > .sequence-section {
    flex: 1 1 0;
    min-height: 0;
    padding-top: clamp(88px, 11svh, 106px);
    padding-bottom: clamp(28px, 4svh, 38px);
  }

  /* The values are present while Company arrives, then rise with its heading. */
  .snap-company:not(.heading-sequence) > .company,
  .snap-company.heading-sequence:not(.is-heading-receding) > .company {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .snap-company.heading-sequence.is-heading-receding > .company {
    opacity: 1;
    transform: translateY(0);
  }
  .snap-company.heading-sequence:not(.is-heading-receding) .company-value {
    padding-top: 12px;
    padding-bottom: 13px;
  }
  .snap-company .company-top .type-line > span {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .snap-company > .company {
    justify-content: center;
    padding-top: clamp(108px, 13svh, 132px);
    padding-bottom: 16px;
  }

  .capabilities .section-heading { row-gap: 0; }
  .capabilities .section-heading > p { margin: 0; }
  .capabilities .section-heading > p:first-of-type { margin-top: 26px; }
  .capabilities .section-heading > .execution-scope { margin-top: 8px; }
}

@media (max-width: 700px) and (max-height: 720px) {
  .snap-company > .company { padding-top: 82px; padding-bottom: 8px; }
  .snap-company > .chapter-divider { display: none; }
  .snap-company.heading-sequence:not(.is-heading-receding) .company-value {
    padding-top: 21px;
    padding-bottom: 22px;
  }
}

@media (max-width: 700px) and (max-height: 600px) {
  .snap-company .company-value,
  .snap-company.heading-sequence:not(.is-heading-receding) .company-value {
    padding-top: 10px;
    padding-bottom: 11px;
  }
}

@media (min-width: 701px) {
  .capabilities .section-heading > .execution-scope { margin-top: 6px; }
}

/* Light Structure First as its spread becomes visible. */
@keyframes structure-title-light {
  0% { color: #b8c8be; text-shadow: 0 0 0 rgba(105, 220, 168, 0); }
  48% { color: #c7ffdd; text-shadow: 0 0 19px rgba(105, 220, 168, .58), 0 0 38px rgba(105, 220, 168, .22); }
  100% { color: var(--continuity-ink); text-shadow: 0 0 10px rgba(105, 220, 168, .18); }
}

@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .snap-approach:not(.snap-communicate) .sequence-intro.visible h2 span {
    animation: structure-title-light 1.3s ease-out .12s both;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .snap-approach:not(.snap-communicate) .sequence-intro.visible h2 span {
    animation: none;
  }
  .snap-approach:not(.snap-communicate).heading-sequence.is-heading-receding .sequence-intro h2 span {
    animation: structure-title-light 1.3s ease-out both;
  }
}