, which every skin caps (max-width) for readable line lengths -- so without this the hero renders as a narrow floating box with the page background showing down both sides, which reads as broken rather than designed. The negative- margin breakout lets it span the viewport while

keeps constraining the prose. Scoped to hero_bg templates (see TEMPLATE_FLAGS): editorial/ minimal deliberately keep a small inline hero image, which stretching to 100vw would blow out. */ body.hero-bg .hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Banded sections read as bands only when they span the page. Same breakout, with the inner content re-constrained so the text still lines up with the column above it. */ .stats-band, .cta-band { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; padding-left: max(1.25rem, calc(50vw - var(--content-max, 1140px) / 2)); padding-right: max(1.25rem, calc(50vw - var(--content-max, 1140px) / 2)); } /* 5 services in an auto-fit grid landed as 4 + 1 orphan, so the track count is capped at 3 below and the last row is never a lone card. `display: grid` belongs HERE too, with the columns it governs. Only classic and darkpro declared it in their own style.css; minimal and modern set grid-template-columns without it, so their service cards laid out as plain stacked blocks and every column rule -- theirs and this file's -- was silently inert. Measured on minimal: five 852x639 images stacked 31px apart, ~3200px of near-contiguous photo in a 13400px page, which is what "too many big images close together" was. The other four skins ship their own _services_grid.html with different markup and are unaffected. */ body .services-grid .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } @media (min-width: 900px) { body .services-grid .grid { grid-template-columns: repeat(3, 1fr); } } /* Footer nav -- an even, aligned column grid instead of flex-wrap. Every skin declares `.footer-links { display: flex; flex-wrap: wrap }`, which packs 15 links of wildly different widths into ragged rows (measured 4 rows of 3/4/5/3). A grid puts them on a shared baseline and in aligned columns, so the footer reads as a site map rather than a run-on list. `body footer` (element + element + class) deliberately outspecifies each skin's own `.footer-links` -- base.css loads FIRST, so an equal- specificity rule here would lose the cascade to every skin. Colors, font-size and max-width all stay with the skins. */ body footer .footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.55rem 1.5rem; align-items: start; justify-content: start; } body footer .footer-links a { line-height: 1.45; } /* Image sections: give the media real presence instead of a small inset picture beside a narrow ragged text column. */ @media (min-width: 900px) { body .content-block.v-image-left, body .content-block.v-image-right { grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: center; } } /* aspect-ratio, NOT height:100% -- inside the align-items:center grid the media cell has no resolved height, so height:100% collapsed the image to 0px (caught by measuring the live page, not by reading the CSS). */ body .content-block .section-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 420px; object-fit: cover; } /* Header: brand + nav + CTA were wrapping onto three cramped left-aligned rows while most of the bar sat empty, because service names make for long nav labels. Widen the bar to the content width, let the nav take the middle and the CTA sit hard right, and tighten nav type so a typical 5-6 item nav fits one row on desktop. */ body .header-inner { max-width: var(--content-max, 1140px); flex-wrap: wrap; row-gap: 0.4rem; } .site-header nav { margin-left: auto; } .site-header nav a { white-space: nowrap; } @media (min-width: 1000px) { .site-header nav { font-size: 0.78rem; letter-spacing: 0.04em; } .header-inner > .cta-button { margin-left: 0.75rem; } } /* Heading-profile variation (see the per-skin _sections/*.html overrides). Some skins promote a benefits lead to a real h3, others render a process step title as a plain label -- these two rules make both read at the right visual weight, so a markup change never becomes a design change. .step-title matches the h3 the shared process partial uses; .benefit-item h3 sits at body scale rather than the h3 clamp, since it labels one bullet, not a section. */ .step-title { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.3; margin: 0 0 0.3rem; } .benefit-item h3 { font-size: 1rem; margin: 0 0 0.2rem; line-height: 1.35; } .benefit-item p { margin: 0; } .benefits-headed { display: grid; gap: 1rem; margin-top: 1.25rem; } @media (min-width: 700px) { .benefits-headed { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 2rem; } } /* Brand lockup in the header -- the generated monogram mark (mark.svg, see backend/logo.py) beside the brand name. Structure only: every skin already styles `.brand` for its own font/size/color and that still applies to the text, which is why the wordmark is real HTML rather than baked into the SVG (an -loaded SVG is its own document and cannot inherit the header's color -- it would be black on the dark-header skins). The mark is sized off the text it sits next to, so it scales with each skin's own .brand font-size instead of needing eight overrides. */ .brand { display: inline-flex; align-items: center; gap: 0.6em; } .brand-mark { flex: none; width: 1.9em; height: 1.9em; display: block; } .brand-text { display: inline-block; }