, consecutive containers are separated by dead space and the rails render as disconnected stubs. Moving it inside means stacked containers abut and the rails read as two continuous lines down the page. Section padding therefore belongs HERE, not in sections.css. */ .page-grid .hero, .page-grid .spread, .page-grid .values, .page-grid .leadership, .page-grid .news, .page-grid .outro, .page-grid .footer { padding-block: 0; } .page-grid .hero > .container { padding-block: 44px 64px; } /* Vision 72/36 and Mission 36/72 read as one paired spread. */ .page-grid .spread--vision > .container { padding-block: var(--section-y) 36px; } .page-grid .spread--mission > .container { padding-block: 36px var(--section-y); } .page-grid .values > .container { padding-block: var(--section-y); } .page-grid .leadership > .container { padding-block: var(--section-y); } /* The rows deck butts the container's bottom edge so its final hairline lands on the next section break, making the rails connect through it. Breathing room lives inside the rows, not below the deck. */ .page-grid .news > .container { padding-block: var(--section-y) 0; } .page-grid .outro > .container { padding-block: var(--section-y); } .page-grid .footer > .container { padding-block: 80px 0; } /* 3. Close the grid ---------------------------------------- Top: the nav's bottom border is already the first horizontal, so the rails start from a corner. Bottom: the dark footer IS the closure, as on opus.com — the rails simply end where the light surface does. No extra hairline at the boundary (the colour change is the boundary) and no rails inside the dark zone, where they would be invisible and would clash with the footer's own inset content. */ .page-grid .footer .container { border-left: 0; border-right: 0; } /* The full-bleed momentum band spans edge to edge and deliberately interrupts the rails, the way opus.com's full-bleed media does. Its own top and bottom borders keep the horizontal rhythm unbroken. */ /* 4. Phone: drop the rails -------------------------------- At ≤767px --outer-gutter is 0, so rails would sit hard against the viewport edges and read as a border around the page rather than as a grid. Horizontal section breaks stay. */ @media (max-width: 767px) { .page-grid .container { border-left: 0; border-right: 0; } .page-grid .footer > .container { padding-block: 44px 0; } }