/* A2CP89 V16: desktop structure for the three long-form service pages. */

@media (min-width: 64rem) {
  main .a2cp-hero:has(~ .a2cp-pillar-answer) {
    height: clamp(38rem, calc(100svh - 4.6rem), 43rem);
    min-height: 0;
  }

  main .a2cp-hero:has(~ .a2cp-pillar-answer) .a2cp-hero__copy {
    padding: clamp(3.5rem, 5vw, 5.5rem) clamp(2.5rem, 5vw, 5.5rem);
    text-align: left;
  }

  main .a2cp-hero:has(~ .a2cp-pillar-answer) .a2cp-hero__copy > :where(.a2cp-kicker, h1, .a2cp-lead, .a2cp-actions) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  main .a2cp-hero:has(~ .a2cp-pillar-answer) :where(h1, .a2cp-kicker, .a2cp-lead) {
    text-align: left !important;
  }

  main .a2cp-hero:has(~ .a2cp-pillar-answer) .a2cp-actions {
    justify-content: flex-start;
  }

  main .a2cp-hero:has(~ .a2cp-pillar-answer) :where(.a2cp-hero__media, .a2cp-hero__visual) {
    height: 100%;
    min-height: 0;
  }

  main .a2cp-hero ~ .a2cp-pillar-answer {
    margin-block: clamp(2.5rem, 4vw, 4rem);
    padding: clamp(3.5rem, 5vw, 5rem);
  }

  main .a2cp-hero ~ :where(
    .a2cp-pillar-copy,
    .a2cp-cost-section,
    .a2cp-faq-section,
    .a2cp-references-section,
    .a2cp-related-section
  ) {
    padding-block: clamp(3.5rem, 5vw, 4.75rem);
  }

  main .a2cp-hero ~ :where(
    .a2cp-pillar-answer,
    .a2cp-pillar-copy,
    .a2cp-pillar-steps,
    .a2cp-cost-section,
    .a2cp-faq-section,
    .a2cp-references-section,
    .a2cp-related-section
  ) h2 {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 18ch;
    text-align: left;
  }

  main .a2cp-hero ~ .a2cp-pillar-steps,
  main .a2cp-attic-hero ~ .a2cp-pillar-steps {
    align-items: start;
    display: grid;
    gap: clamp(4rem, 7vw, 7rem);
    grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
    padding-block: clamp(3.5rem, 5vw, 4.75rem);
  }

  main .a2cp-hero ~ .a2cp-pillar-steps .a2cp-pillar-steps__heading,
  main .a2cp-attic-hero ~ .a2cp-pillar-steps .a2cp-pillar-steps__heading {
    display: block;
    position: sticky;
    top: 7rem;
  }

  main .a2cp-hero ~ .a2cp-pillar-steps .a2cp-pillar-steps__heading > *,
  main .a2cp-attic-hero ~ .a2cp-pillar-steps .a2cp-pillar-steps__heading > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left;
  }

  main .a2cp-hero ~ .a2cp-pillar-gallery {
    padding-block: clamp(3.5rem, 5vw, 4.75rem);
  }

  main .a2cp-hero ~ .a2cp-pillar-gallery .a2cp-section-heading {
    align-items: end !important;
    display: grid !important;
    gap: clamp(2rem, 5vw, 5rem);
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.8fr);
    left: auto;
    margin: 0 auto clamp(2.5rem, 4vw, 4rem) !important;
    max-width: 72rem !important;
    text-align: left;
    transform: none;
    width: min(72rem, calc(100vw - 2rem)) !important;
  }

  main .a2cp-hero ~ .a2cp-pillar-gallery .a2cp-section-heading > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left;
  }

  /* One construction grid: section question on the left, evidence on the right. */
  main .a2cp-hero ~ :where(
    .a2cp-pillar-copy,
    .a2cp-cost-section,
    .a2cp-faq-section,
    .a2cp-references-section,
    .a2cp-related-section
  ) {
    align-items: start;
    column-gap: clamp(4rem, 7vw, 7rem);
    display: grid;
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
    row-gap: 1.5rem;
  }

  main .a2cp-hero ~ section > :where(.a2cp-kicker, .a2cp-updated),
  main .a2cp-hero ~ section > header > :where(.a2cp-kicker, .a2cp-updated) {
    display: none !important;
  }

  main .a2cp-hero ~ :where(
    .a2cp-pillar-copy,
    .a2cp-cost-section,
    .a2cp-faq-section,
    .a2cp-references-section,
    .a2cp-related-section
  ) > h2 {
    align-self: start;
    font-size: clamp(2.65rem, 3.7vw, 3.8rem);
    grid-column: 1;
    grid-row: 1 / span 8;
    line-height: 0.98;
    max-width: 12ch;
  }

  main .a2cp-hero ~ :where(
    .a2cp-pillar-copy,
    .a2cp-cost-section,
    .a2cp-faq-section,
    .a2cp-references-section,
    .a2cp-related-section
  ) > :not(h2, .a2cp-kicker, .a2cp-updated) {
    grid-column: 2;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none;
    width: 100%;
  }

  main .a2cp-hero ~ .a2cp-pillar-answer {
    align-items: start;
    display: grid;
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
    column-gap: clamp(4rem, 7vw, 7rem);
    row-gap: 2.5rem;
  }

  main .a2cp-hero ~ .a2cp-pillar-answer > h2 {
    font-size: clamp(2.8rem, 4vw, 4.1rem);
    grid-column: 1;
    grid-row: 1;
    line-height: 0.98;
    max-width: 12ch;
  }

  main .a2cp-hero ~ .a2cp-pillar-answer > .a2cp-lead {
    align-self: end;
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
  }

  main .a2cp-hero ~ .a2cp-pillar-answer > :where(.a2cp-pillar-answer__facts, .a2cp-pillar-answer__note) {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  main .a2cp-hero ~ .a2cp-pillar-gallery .a2cp-section-heading > h2 {
    font-size: clamp(2.65rem, 3.7vw, 3.8rem);
    grid-column: 1;
    line-height: 0.98;
    max-width: 12ch;
  }

  main .a2cp-hero ~ .a2cp-pillar-gallery .a2cp-section-heading > .a2cp-lead {
    align-self: end;
    grid-column: 2;
  }

  main .a2cp-hero ~ .a2cp-cta {
    padding: clamp(3rem, 4vw, 4rem);
  }

  main .a2cp-hero ~ .a2cp-cta h2 {
    font-size: clamp(2.5rem, 3.5vw, 3.6rem);
    max-width: 16ch;
  }
}