/* ========================================================================== site/grid.css · ONE CONTENT GRID FOR THE WHOLE SITE Written 2026-09-20. Linked LAST in the of all six live pages — index, google-ads, about-us, our-management, legal-documents and contact-us — after site/align.css and after the ui-r4t layer. --------------------------------------------------------------------------- THE REFERENCE --------------------------------------------------------------------------- The header already owns the site's grid. site-chrome/header.css publishes it to the bar on every page: @media (min-width: 761px){ html body header.bar{ --pad: clamp(24px, 4vw, 72px); --maxw: min(1440px, calc(100% - 2 * clamp(24px, 4vw, 72px))); --grid-edge: max(var(--pad), calc((100% - var(--maxw)) / 2)); --nav-gutter: var(--grid-edge); } } .brow (logo + menu) and .krow (section row) are padded with --nav-gutter, so the logo's left edge and the last tab's right edge ARE the grid lines. The homepage was built on the same numbers and lands on them exactly at every width — it is the approved reference and this file does not move it. --------------------------------------------------------------------------- WHAT WAS WRONG — measured, not assumed --------------------------------------------------------------------------- The five other pages read their lane from :root, and :root said something different. site/ds.css (loaded by all five) declares: :root{ --pad: clamp(18px, 4vw, 72px); --maxw: clamp(1280px, 80vw, 1920px); } @media (max-width: 860px){ :root{ --pad: var(--gut) } } <- 18px A hard 1280–1920 track instead of "1440 capped, gutters otherwise", and the phone gutter starting 100px early. Every lane on those pages is built with the right formula — .w, .wrap, .k-wrap, .w8-wrap all say `min(var(--maxw), 100% - 2 * var(--pad))` — they were simply fed the wrong two numbers. Measured against the header's own line: viewport header gutter section gutter drift 1920px 240 192 48px too WIDE 1600px 80 160 80px too NARROW 1440px 57.6 80 22.4px too NARROW 1280px 51.2 51.2 ok 1024px 41 41 ok 834px 33.4 18 15.4px too WIDE 768px 30.7 18 12.7px too WIDE 390px 18 18 ok So the same section slid inward at 1440 and outward at 1920 — which is exactly what "sometimes too narrow, sometimes too wide" looks like. --------------------------------------------------------------------------- THE FIX --------------------------------------------------------------------------- Section 1 publishes the header's grid to :root, so every lane already written against --maxw/--pad snaps onto the header line with no rule of its own. Section 2 corrects the four lanes that hard-code their width instead of reading the tokens. Section 3 removes a doubled phone inset. NOT TOUCHED, deliberately: · the Homepage first screen (.screen) and the Google Ads hero (#overview), including the copy of that hero carried onto the four inner pages. They are approved; nothing here selects them. #overview's corridor keeps its own inset — see the note at the end of this file. · every internal grid: card counts, column tracks, rail peeks, the centred composition of the closing CTA panels (#verify, #start). Cards are not stretched to touch the boundary; only the lane they sit in is corrected. · full-width section backgrounds, which stay full width. · colour, type, spacing, radii, order, markup, behaviour. UNDO: delete the one line that loads this file from each page. ========================================================================== */ /* ========================================================================== 1 · THE GRID, PUBLISHED TO :root The header's four lines, now said once for the whole document. --maxw is expressed through var(--pad) rather than repeating the clamp, so the phone branch below only has to restate one value and the two can never drift apart again. `html:root` (0,1,1), not `:root` (0,1,0): site/ds.css, about/_shell.css, contact/_shell.css, legal/_shell.css, mgmt/_shell.css and home-system/ home.css all declare these on :root or html:root. This file loads after all of them, so equal-or-higher specificity is what settles it. ========================================================================== */ html:root{ --pad: clamp(24px, 4vw, 72px); --maxw: min(1440px, calc(100% - 2 * var(--pad))); --grid-edge: max(var(--pad), calc((100% - var(--maxw)) / 2)); /* The same two numbers under names nothing else on the site declares. --pad and --maxw are re-declared INSIDE three sections of the Google Ads page (.sv, .w8 and .gss-cta each carry their own private 1240/1400px track), so a lane written against them inherits the local value, not the page's. --site-gutter / --site-lane cannot be shadowed, because no other stylesheet has ever heard of them. Section 2 builds on these. */ --site-gutter: clamp(24px, 4vw, 72px); --site-lane: min(1440px, calc(100% - 2 * var(--site-gutter))); } /* The phone gutter. 760px is where the HEADER changes idiom — below it the bar stops reading its own --grid-edge override and falls back to :root, so the page must change on the same line or the two disagree between 761 and 860, which is precisely what ds.css's 860px breakpoint was doing. --gut is 18px on all six pages; the fallback is there for safety only. */ @media (max-width: 760px){ html:root{ --pad: var(--gut, 18px); --site-gutter: var(--gut, 18px); } } /* ========================================================================== 2 · THE LANES THAT DO NOT READ THE TOKENS Everything else on the site already computes `min(var(--maxw), 100% - 2 * var(--pad))` and is corrected by section 1 alone — .w on contact-us / our-management, .wrap and .pg .wrap on legal-documents, #sfoot .f-wrap, --ab3-lane. These seven carry a hard number, or read a token that a section above them has redefined. One :is() pair, so the seven get one identical lane and the next person has one place to look. Specificity is (1,1,0) — an id in the left :is() raises the whole selector — which is what it takes to out-rank `.sv .k-wrap` and `.gss-cta .k-wrap` at (0,2,0). max-width and padding are zeroed in the same breath so a lane is decided by exactly one property, its width. WHAT EACH ONE WAS #gads-services .k-wrap .sv declares --maxw:1400px 1400 @1920 #w8-system .w8-wrap .w8 declares --maxw:1400px 1400 @1920 #wcu-ga .w8-wrap the same sheet, the same 1400px 1400 @1920 .gss-cta .k-wrap .gss-cta declares --maxw:1400px 1400 @1920 #gads-packages .gp-in max-width:1240px, INSIDE a section that had already padded itself by --pad — two insets stacked 1240 @1920 #gfaq .gfaq-wrap a 1120px track, 320px inside the grid at 1920 1120 @1920 # .k9-in see --k9-lane below 1160 @1920 All seven are now var(--site-lane): 1440px capped, the header's gutter otherwise. Nothing inside them moves — the cards, tabs, accordions and rails keep their own grids and are not stretched to the boundary. On the HOMEPAGE the one member of this list that exists, #gfaq .gfaq-wrap, keeps its own rule: home-system/home.css says `#faq10 #gfaq .gfaq-wrap{ width: min(var(--maxw), 100% - 2*var(--pad)) }` at (2,1,0), which out-ranks the (1,1,0) here and computes the same number. Measured before and after this file: unchanged at every viewport. ========================================================================== */ :is(#gads-services, #w8-system, #wcu-ga, #gads-packages, #gfaq, .gss-cta) :is(.k-wrap, .w8-wrap, .gp-in, .gfaq-wrap){ width: var(--site-lane); max-width: none; margin-inline: auto; padding-left: 0; padding-right: 0; } /* #gads-packages padded ITSELF by --pad and then capped .gp-in at 1240px, so the packages started 42px inside the FAQ heading below them and the system dock above. The section keeps its vertical padding; only the horizontal pair goes, and the lane moves to .gp-in where it belongs. */ #gads-packages{ padding-left: 0; padding-right: 0; } /* about-us · all six sections. about-k9/k9.css builds them on one token, --k9-lane, set to `min(1160px, 100% - 2*clamp(18px, 3.2vw, 40px))` — a second, private grid with its own cap AND its own gutter, 82px inside the header at 1440 and 140px inside it at 1920. Re-pointing the token moves all six at once and leaves .k9-in, the 12-tick rule and every internal layout untouched. */ html:root{ --k9-lane: var(--site-lane); } /* ========================================================================== 3 · THE DOUBLED PHONE INSET on contact-us A cascade collision, not a design. contact/_shell.css says @media (max-width: 760px){ .w{ width:100%; padding-inline: var(--gut) } } and contact/_site.css, which loads after it, re-states the unconditional .w{ width: min(var(--maxw), 100% - 2*var(--pad)); margin-inline:auto } Same specificity, later file, so the WIDTH went back to the lane while the PADDING from the media block stayed. The lane already holds 18px of gutter in its width, so the padding added a second one: at 390px every heading and paragraph on contact-us began at 36px while the logo above began at 18px. Restated here as one rule so the width, the centring and the padding are decided in the same place. Safe on the other pages: our-management's .w gets the lane it already computes, and the padding it is losing was never applied there (measured 18px before, 18px after). */ @media (max-width: 760px){ .w{ width: min(var(--maxw), 100% - 2 * var(--pad)); margin-inline: auto; padding-left: 0; padding-right: 0; } } /* ========================================================================== NOT CHANGED — recorded so the next pass does not have to measure it again ========================================================================== #overview, the hero, on the Google Ads page and on the four inner pages that carry a copy of it, insets its blue corridor (.k5-cor) by its own --side / --e rather than by --grid-edge: 297px at 1920, 75px at 1440, 21px at 390 — +57, +17.4 and +3 against the header line. The band itself is full width and stays full width; it is the content inside it that sits in from the grid. It is left exactly as it is because the hero is approved and out of scope. Aligning it later is a one-line change — point gads-hero-rail/hero-rail.css's --e at var(--grid-edge) — but it is a hero change, so it is the client's call and not an alignment repair. ========================================================================== */