(every page's `framer-` "Main" class) is `display:flex;align-items:center`, so a block child with no explicit width shrinks to its content instead of spanning the column — exactly round-1's "small centred block" bug (gutters.txt). Every lifted/H5* section root declares its own `width:100%` for this reason (confirmed by grep); this one needs the same. */ width: 100%; align-self: stretch; padding: 96px 0; } .hwg-about-cta__inner { /* 48px / 16px below 1199px — the same gutter the nav uses (`.framer-5wiiI{padding:36px 48px}`, unscoped, full-bleed) and every lifted section root uses (e.g. `.framer-BNcNr .framer-8xlv5t{padding:0 48px;width:100%;max-width:4848px}` — max-width 4848 is effectively uncapped at real viewport sizes). A `max-width:1200 + margin:auto` centred column (this file's first fix-round attempt) does NOT match that convention above ~1296px: it leaves the content column ~120px further in than the logo at 1440px, which is exactly what gutters.mjs would still flag. No max-width here for the same reason those lifted rules have none. */ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 0 48px; } /* 48 px side margin down to 810 px, like the nav and the lifted sections; 16 px below (H6 gate r4 minor 1). */ @media (max-width: 809.98px) { .hwg-about-cta__inner { padding: 0 16px; } } .hwg-about-cta__header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 46em; } /* FIX ROUND 3: the pill has inline height:100% (lifted markup); like every other framer-EYLHz pill on the site it needs a 48px-tall parent (lift: `.framer-ZE6M8 .framer-rqbmy5-container{flex:none; width:auto;height:48px;position:relative}`), otherwise it collapses to its 26px label height. */ .hwg-about-cta__btn { flex: none; width: auto; height: 48px; position: relative; } /* Round-1's white-on-white invisible ring (WCAG 2.4.7) can't recur — the button is now the site's own framer-EYLHz classes, not the removed .hwg-pill-btn + hwg-fill combination — but give it an explicit monochrome ring anyway, matching H3's shared control style, instead of relying on the still-open cross-cutting default-blue-ring issue the rest of the site has (H5c carryover). */ .hwg-about-cta .framer-EYLHz:focus-visible { outline: 2px solid var(--hwg-black); outline-offset: 3px; } /* ================== Contact ========================================== The hero (contact.njk) is lifted/contact--hero.html verbatim now, mounted under this page's own root (`.framer-kWufe`, base.njk's lifted/contact--root-open.html), so its own typography and the 2-column grid need no CSS here (framer.css already matches live under that scope — confirmed by grep, see contact.njk's file comment). What's left, all gate fix-round items: */ /* FIX ROUND 3 — form column. contact.njk now mounts only the FORM STACK of H5d's partial inside the lift's own "Contact Form Content" cell (framer-d5nw3l, grid-column span 2 of framer-5x3tf6), with the lift's own "SEND US A MESSAGE" label (framer-7qhkb8) above it — the same DOM shape as live. form.css keys two rules on `[data-section="contact"] .framer-d5nw3l`, written for the partial's own flex-column skeleton on Home: at >=1200px it halves the cell and pushes it right (`width:calc((100% - 12px)/2);margin-left:auto`), and at every width it sets gap:48px, beating the lift's own `.framer-kWufe .framer-d5nw3l{gap:24px}` below 810px (same specificity, form.css loads later). On /contact the cell is already one grid column pair, so both are undone here, and only for the cell that is a direct child of the lift's grid. Measured against live in docs/reports/H6.md (form x/y/w, label, Send button at 1440/1280/1200/1199/1024/900/810/809/768/430/390/375/360/320). */ body[data-page-type="contact"] .framer-5x3tf6 > .framer-d5nw3l { width: 100%; margin-left: 0; } @media (max-width: 809.98px) { body[data-page-type="contact"] .framer-5x3tf6 > .framer-d5nw3l { gap: 24px; } } /* Fallback only: if contact.njk ever cannot cut the form stack out of the partial, it mounts the whole partial (its own section, padding, top rule and "Let's Talk" header) in the cell. These rules flatten that nested section so the form still fills the column; they match nothing in the normal build (there is no framer-56h9ld on /contact then). */ body[data-page-type="contact"] .framer-5x3tf6 > .framer-d5nw3l .framer-56h9ld { width: 100%; align-self: stretch; padding: 0; --border-top-width: 0px; --border-bottom-width: 0px; --border-left-width: 0px; --border-right-width: 0px; } body[data-page-type="contact"] .framer-5x3tf6 > .framer-d5nw3l .framer-1rigns8 { padding: 0; } body[data-page-type="contact"] .framer-5x3tf6 > .framer-d5nw3l .framer-d5nw3l { width: 100%; margin-left: 0; } body[data-page-type="contact"] .framer-d5nw3l .framer-1denpim { display: none; } /* H8 R3/G8: the "Let's Talk" h1 (Bingo Dilan, 1em line box) pokes 1.4-2.5px above its header box, and the lift's header grid (framer-cc9dt5) is overflow:hidden, which shaved the top of the glyphs. Its parent header (framer-uz96z1) is overflow:hidden too. Nothing in either needs clipping (an h1 and a paragraph, no animation layer). */ .framer-kWufe .framer-uz96z1, .framer-kWufe .framer-cc9dt5 { overflow: visible; } /* G8 (live bug: /contact scrolls sideways at <=439px, scrollWidth 457). Causes: the decorative asterisk's negative right offset, and the 36px email line (white-space:pre, 12.24em wide = 441px) that no width below ~473px can hold. `overflow-x:clip` on the Hero root stays as a guard for the asterisk, but the TEXT no longer relies on it: the email/Book-a-Call links are sized to the column they sit in. framer-1a5rkb3 (their column, width:100% of the left grid cell) becomes an inline-size container, and the link text is min(36px, column / 12.3) — 36px wherever the column holds 441px (every width >=1200, and <810 from ~473px up), smaller only where it must be. This also keeps the line clear of the form at 810-1199, where live's own 36px line runs into the form column (live bug, not copied). `clip` rather than `hidden` so the Hero is not made a scroll container. */ .framer-kWufe [data-framer-name="Hero"] { overflow-x: clip; } .framer-kWufe .hwg-asterisk { right: 0 !important; } .framer-kWufe .framer-1a5rkb3 { container-type: inline-size; } .framer-kWufe a.framer-z1Vmi .framer-text { font-size: min(36px, calc(100cqi / 12.3)) !important; } /* >=44px targets (ux-laws target size): the email/Book-a-Call links drop to ~41px tall once their text scales down; the LinkedIn link is 25px tall at every width. Only below 810px (touch layouts), so the desktop layout keeps live's exact rhythm. */ @media (max-width: 809.98px) { .framer-kWufe a.framer-z1Vmi, .framer-kWufe a.framer-6KNax { min-height: 44px; } } /* Chrome's default blue focus ring on the hero's links (email/Book a Call/LinkedIn) and on the legal pages' inline links -> the site's 2px black ring (H3's shared control style). */ [data-section="contact"] a:focus-visible, .hwg-legal a:focus-visible { outline: 2px solid var(--hwg-black); outline-offset: 4px; } /* ================== Legal ============================================ legal.njk now reproduces lifted/legal--content.html's own wrapper classes (framer-jo1jje etc., H1's — copied, not `{% include %}`-d, because that fragment is Privacy-Policy-specific hardcoded copy H6 doesn't own to parametrise for the other two documents), mounted under this page's own root (`.framer-AgArl`, base.njk's lifted/legal--root-open.html), so title/date/intro/section typography need no CSS here (framer.css already matches live under that scope — confirmed by grep, see legal.njk's file comment). What's left: */ /* minor finding "scrolls sideways at 375px and below": framer-jo1jje's own width comes from Framer's flex-item defaults inside the layout's outer column, which can shrink to content — the cookie-policy document's one un-spaced flattened-table run ("TypeNamePurposeDurationEssential `__cf_bm`Bot protection...", D15-kept content, H2's) is exactly the kind of string that forces that shrink-to-fit width wider than the viewport. `width:100%;align-self:stretch` pins the section to the column's full width regardless of content; `overflow-wrap:anywhere` on the body (an inherited property, so it reaches the //

 text inside that run too) lets the
   browser break the run itself instead of growing the box. */
.hwg-legal {
  width: 100%;
  align-self: stretch;
}
/* framer.css's own .framer-AgArl .framer-1y7sb27 rule (two class selectors, specificity 0,2,0)
   already sets word-wrap/word-break:break-word, which alone was enough to keep scrollWidth <=
   innerWidth at every width tested (390/375/360/320) — but the intent here is `anywhere` (breaks
   mid-word even in a min-content/grid context, a stronger guarantee against this specific
   flattened-table run than break-word's word-boundary-first behaviour), so the selector below
   matches that specificity (two classes) to make sure it actually wins the cascade rather than
   relying on being silently equivalent in this one case. */
.hwg-legal .hwg-legal__body {
  overflow-wrap: anywhere;
  min-width: 0;
}
/* FIX ROUND 3: the round-2 `code` chip rule is gone (its font-family never applied and its #f2f2f2
   was not a brand token). legal.njk now gives  live's own preset class
   (framer-styles-preset-16slblw: #333 text on a 10% black tint, .1em/.2em padding, 6px radius),
   which framer.css already scopes under this page's root (.framer-Z1hnZ); brand.css maps its code
   font to Outfit (Fragment Mono is dropped by the contract). */

/* legal links (inline + Previous/Next) are 18px tall, below the >=44px target-size rule
   (ux-laws R5); originally: legal inline links are 20px tall at 375px, below the >=44px target-size rule
   (ux-laws R5). Vertical padding on inline text doesn't change line layout. */
.hwg-legal a {
  padding-block: 13px; /* 18px line + 26px = 44px (was 12px -> 42px, gate r3 minor) */
}

/* ================== 404 ============================================= */
/* major finding "H6's wrapper moves and shrinks the lifted section": round-1 added an inner
   `.hwg-page-inner` (max-width:1200 + its own 48/16px padding) plus padding/min-height/flex on the
   outer wrapper. lifted/404--content.html's own class (framer-457wxi, H1's, included verbatim by
   404.njk) already has its own centred layout and padding from framer.css, scoped under this
   page's root (`.framer-ZE6M8`) — the extra wrapper fought that instead of matching live's
   geometry. The gate's own test (drop the inner div; give the outer wrapper `width:100%;
   align-self:stretch`, nothing else) reproduced live's numbers exactly at 1440 and within 14px at
   768/390 — that's the whole rule below now. */
.hwg-404 {
  width: 100%;
  align-self: stretch;
}

/* FIX ROUND 3 (gate minor): the "Go back Home" pill showed Chrome's default blue ring; use the site's
   2px black ring like every other H6 control. */
.hwg-404 a:focus-visible {
  outline: 2px solid var(--hwg-black);
  outline-offset: 3px;
}