equal to the bar's rendered height plus a visual buffer, mobile-only (<1024px, the same breakpoint .call-bar itself uses to appear at all -- desktop never shows the bar so needs no extra space). This is additive whitespace between the CTA section and the footer; it does not touch the CTA band's own markup, class or centred measure (both stay exactly as shipped). */ @media (max-width: 1023px) { main { padding-bottom: 96px; } } /* ---------- .section--tight: reduced padding for minimal-content sections (dead-space fix, 2026-07-23) ---------- styles.css:239-243 (frozen, never edited) sizes every .section at 64/96/160px vertical padding (base/768/1200) regardless of content -- fine for a real content section, but three sections on the home page are deliberately minimal by design (a one-line link, a label + single button, a slim trust strip) and were sitting at 7-11% fill because the padding is sized for content they intentionally do not carry. Adding content there would contradict the design brief, so the padding is cut instead. Same 768/1200 breakpoints as .section so behaviour stays coherent; only the three sections named in the fix (service-areas one-liner, Projects/See- All-Our-Work link, credential/stats strip) carry this modifier -- the services grid, calculator, Instagram section, CTA band and hero are real content sections and keep the full .section scale untouched. */ .section--tight { padding: 40px 0; } @media (min-width: 768px) { .section--tight { padding: 56px 0; } } @media (min-width: 1200px) { .section--tight { padding: 72px 0; } } /* ---------- Defect fix (2026-09-21): mobile nav drawer clipped to header ---------- Bug: styles.css:176-182 (frozen, never edited) gives .header backdrop-filter: blur(8px) whenever it is non-transparent, or transparent-and-scrolled. backdrop-filter establishes a containing block for fixed-position descendants (CSS spec), and .nav.active (styles.css:217-224, frozen) is position:fixed; top:0; right:0; bottom:0. With the header as its containing block instead of the viewport, top:0/bottom:0 resolve against the header's own ~77-92px box, not the viewport -- measured on production at 390x844: drawer rect height 132px, only the first link fully inside it, the other 4 floating over page content with no drawer background behind them. Fix: while the drawer is open, drop backdrop-filter from .header (and transform, which creates the same containing-block effect and would also drag the header's own scroll-hide translateY onto the open drawer) so the header no longer establishes a containing block and .nav.active resolves against the viewport again, as authored. Background stays at its existing rgba(26, 26, 26, 0.92) (styles.css:178, untouched) so the header still reads solid/legible with the drawer open -- only the blur is dropped. .hamburger (now rendered as an X by its own .active class, styles.css: 213-215) is later in the header's DOM than .nav, and neither sets z-index, so within the header's single stacking context it already paints above the drawer in document order -- no z-index change needed here. :has() is supported in WebKit/Safari since 15.4, so this is CSS-only; no JS class toggle needed. */ .header:has(.nav.active) { -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; } /* ---------- Defect fix (2026-09-21): fixed call bar covers footer's last row on mobile ---------- Bug: below 1024px the fixed .call-bar (69px tall, see .call-bar rule above) sits at the very bottom of the viewport at max scroll and overlaps .footer__bottom (copyright + "Powered by RH Media" link) by ~37-40px. The existing `main { padding-bottom: 96px }` rule above (2026-07-22 call- bar clearance fix) only reserves clearance for the CTA band inside

-- the footer comes AFTER main in the document, so that rule does nothing for it. Fix: reserve the same clearance (bar height 69px + a visual buffer, matching the 96px the main-fix already uses for an identical 69px bar) at the very end of the document by extending .footer's own bottom padding, mobile-only. styles.css:109 (frozen, never edited) sets `.footer { padding: 96px 0 32px }`; this overrides only the bottom value via the cascade (design-system.css loads after styles.css), 32px -> 128px (32 existing + 96 clearance), so .footer__bottom's own bottom edge clears the bar. Desktop (>=1024px, where .call-bar is display:none !important per the rule above) is untouched. */ @media (max-width: 1023px) { .footer { padding-bottom: 128px; } } /* ---------- .section-head--stacked: force label + CTA to stack (bug fix, 2026-07-23) ---------- styles.css:104 (frozen, never edited) sets .label { display: inline-block } globally -- correct everywhere it's currently used (hero, .progression__ caption, .page-header, see the scoped overrides above/below) since those contexts want the label to sit inline with something else. But a bare .section-head is display:block with no rule forcing a line break between children, so an inline-block .label followed by an inline-block .btn just flows onto the same visual line like two words of text -- reads as a stray word ("PROJECTS [See All Our Work]") instead of a label over a button. Do NOT fix this by changing .label globally; it would break every intentional inline use above. Instead this modifier opts a single .section-head into stacked behaviour: flips its .label to block and centres + spaces the .label/.btn pair. Used once today: index.html's Projects / See All Our Work section. */ .section-head--stacked { text-align: center; } .section-head--stacked .label { display: block; } .section-head--stacked .btn { margin-top: 20px; }