/* Elev8 responsive retrofit. The site's pages are a fixed 1180px-wide desktop canvas built entirely with inline style="" attributes (a design-comp export). Some pages (the ones) are hydrated client-side by a React-based runtime, which RE-SERIALIZES every inline style attribute when it renders: "position:absolute" becomes "position: absolute", "repeat(3,1fr)" becomes "repeat(3, 1fr)", hex colors become rgb(). Plain (non-hydrated) pages keep the original unspaced text. Every [style*="..."] selector below is therefore written to match a substring that is IDENTICAL in both forms: either the property name up to and including its colon (nothing is ever inserted BEFORE a colon, so "prop:" matches "prop:value" and "prop: value" alike), or a value fragment with no colon/comma in it, or -- where a value itself would need to survive comma-normalization -- a structural :has() selector instead of style text. Inline styles beat any selector-based CSS rule regardless of specificity, so every rule uses !important deliberately. */ /* overflow-x:hidden on makes it its own scroll container, which Chromium then clips to the viewport height instead of growing to fit body's real content -- verified live (scrollHeight got stuck at exactly window.innerHeight). height:auto fixes it: html still clips horizontally but stops capping its own vertical extent. Deliberately NOT also set on : overflow-x:hidden on body makes body itself the sticky-positioning containing block, which broke every `position:sticky` header sitewide (they stopped sticking, scrolling away with the page instead) -- verified live. html's rule alone already prevents all horizontal overflow; the body rule was redundant. */ html { overflow-x: hidden !important; height: auto !important; max-width: 100vw !important; } @media (max-width: 860px) { /* 1. Load-bearing fix: stop forcing a fixed-width canvas on every page body. Value-only match (no colon), safe under normalization. Most pages use 1180px; the legal pages (privacy/terms) use a narrower 900px. */ [style*="1180px"], [style*="900px"] { min-width: 0 !important; width: 100% !important; } /* 2. Section/header/footer gutters and vertical rhythm, compacted for a phone */ header, footer, section, div:has(> nav) { padding-left: 16px !important; padding-right: 16px !important; } section { padding-top: 40px !important; padding-bottom: 40px !important; } header { padding-top: 12px !important; padding-bottom: 12px !important; } footer { padding-top: 28px !important; padding-bottom: 28px !important; } /* 3. Collapse every multi-column grid used site-wide to one column. Property-prefix match only (the colon is never separated from the property name by normalization) -- no need to enumerate every value. */ [style*="grid-template-columns:"] { /* minmax(0, 1fr), not bare 1fr -- a bare 1fr track still grows to fit a cell's intrinsic min-content width (e.g. a table inside), blowing past the container regardless of "1 column" -- verified live. */ grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; } /* 4. Kill full-bleed decorative hero photography -- at this width it either vanishes behind the text or crushes it. Structural match (a div whose direct child is the parallax hero photo) instead of style text, since the wrapper's style spans several colons/semicolons that normalization would otherwise break. */ div:has(> img[data-plx]) { display: none !important; } /* 5. Hide the giant faded "8" / quote-mark watermark numerals. Value-only match ("-webkit-text-stroke:" prefix is colon-safe). */ [style*="-webkit-text-stroke:"] { display: none !important; } /* 6. Footer: stack the brand block above the link row instead of side by side */ footer[style*="justify-content:"] { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } /* 7. Nav: hover-only dropdowns don't exist on touch. Hide the submenus and flatten the top-level links into a scrollable row instead of a half-dead menu. Applies to every