@layer doverie-layout {
  /* Page-level flow is separated from component visuals. Decorative scenes and
     composition-internal artwork remain absolutely positioned by design. */
  .design-page {
    height: auto;
    min-height: 0;
  }

  @media (min-width: 768px) {
    .design-page > :is(.hero, .first-steps, .services, .pricing, .workflow, .trust, .contacts, .faq, .statement, .footer) {
      position: relative;
      top: auto;
      left: auto;
      flex: none;
    }
    .design-page > .hero { height: 1080px; }
    .design-page > .first-steps { height: 615px; }
    .design-page > .services { height: 619px; }
    .design-page > .pricing { height: 1011px; }
    .design-page > .workflow { height: 672px; }
    .design-page > .trust { height: 1041px; margin-bottom: -7px; }
    .design-page > .contacts { height: 715px; margin-bottom: 167px; }
    .design-page > .faq { height: 392px; margin-bottom: 195px; }
    .design-page > .statement { height: 281px; margin-bottom: -14px; }
    .design-page > .footer { height: 1111px; }
  }

  @media (width <= 767px) {
    .design-page {
      width: 100%;
      overflow: hidden;
    }
    .design-page > :is(.hero, .first-steps, .services, .pricing, .workflow, .trust, .contacts, .faq, .statement, .footer) {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      flex: none;
    }
    .design-page > .hero { height: 714px; }
    .design-page > .first-steps { height: 1250px; margin-bottom: -145px; }
    .design-page > .services { height: 864px; }
    .design-page > .pricing { height: 658px; }
    .design-page > .workflow { height: 696px; }
    .design-page > .trust { height: 923px; }
    .design-page > .contacts { height: 1466px; margin-bottom: -576px; }
    .design-page > .faq { height: 387px; margin-bottom: 153px; }
    .design-page > .statement { height: 101px; margin-bottom: 109px; }
    .design-page > .footer { height: 1148px; }
    .design-page.is-footer-form-open > .footer { height: 1770px; }

    /* The existing absolute footer background remains anchored to the original
       seam, while the flow container grows naturally with the online form. */
    .design-page.is-footer-form-open .footer-online-form { top: -210px; }
  }

  /* Services is an approved fixed 1920px Figma artboard. Its hero, carousel,
     turnkey, request and footer intentionally overlap in absolute coordinates;
     converting those sections to normal flow breaks the request/footer seam. */

  /* News useful-section and Contacts composite backgrounds intentionally keep
     their artboard positioning; their internal layers overlap by design. */
}