— and that ONE element carries both the page's design tokens and the page background (background:var(--ink); color:var(--white)). Decomposing the page into sections dissolved the wrapper, so nothing declared the tokens and nothing painted the background: --ink silently resolved to the GLOBAL #070d0c and the body showed through. Measured: source paints #1A1717 on .hmg-tm, staging painted #070D0C on . Re-declared here on the body, which is the only element that still spans the whole page once the wrapper is gone. (Fourth instance of the same class of bug on this migration: something the source scoped to a wrapper gets lost, and pages fall back to a global.) */ body.hm-page-testimonials { --sage:#052926; --ink:#1A1717; --cyan:#66FCF1; --white:#FFFFFF; --teal-surface:#0a514b; --teal-mid:#073b39; --ocean:#0b2a3a; --glass-fill:rgba(255,255,255,0.065); --glass-fill-strong:rgba(255,255,255,0.10); --glass-border:rgba(255,255,255,0.14); --glass-shadow:0 24px 48px rgba(0,0,0,0.38); --text-dim:rgba(255,255,255,0.62); --text-faint:rgba(255,255,255,0.40); --ease:cubic-bezier(.22,.61,.36,1); /* The source DOES declare --wrap:1480px here. I first read this off a regex over the first `body.hm-page-testimonials {...}` block in the source stylesheet and concluded there was none; a later block adds it. Reading the live computed value on the declaring element is the authority, not a grep over source text. */ --wrap:1480px; } body.hm-page-testimonials { color:var(--white); background:var(--ink); } @media(prefers-reduced-motion:reduce) { body.hm-page-testimonials html.js body.hm-page-testimonials .rv {opacity:1;transform:none} } @media(max-width:860px) { body.hm-page-testimonials body.hm-page-testimonials .wall__dust {display:none} body.hm-page-testimonials body.hm-page-testimonials .wall__glow {animation:none} } /* ── thank-you ──────────────────────────────────────── */ body.hm-page-thank-you { --sage:#052926; --ink:#1A1717; --cyan:#66FCF1; --white:#FFFFFF; --teal-surface:#0a514b; --teal-mid:#073b39; --ocean:#0b2a3a; --glass-fill:rgba(255,255,255,0.065); --glass-fill-strong:rgba(255,255,255,0.10); --glass-border:rgba(255,255,255,0.14); --glass-shadow:0 24px 48px rgba(0,0,0,0.38); --text-dim:rgba(255,255,255,0.62); --text-faint:rgba(255,255,255,0.40); --wrap:1180px; --ease:cubic-bezier(.22,.61,.36,1); } body.hm-page-thank-you { font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--white);background:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased;line-height:1.5} body.hm-page-thank-you .skip {position:absolute;left:-9999px;top:0;z-index:100;background:var(--cyan);color:var(--ink);padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none} body.hm-page-thank-you .wall {position:fixed;inset:0;z-index:-3; background: radial-gradient(120% 80% at 50% -10%, rgba(102,252,241,0.18) 0%, rgba(102,252,241,0) 45%), linear-gradient(180deg, var(--teal-surface) 0%, var(--sage) 38%, #062120 66%, var(--ink) 100%)} body.hm-page-thank-you .wall__glow {position:fixed;inset:-20% -20% -20% -20%;z-index:-2;pointer-events:none; background: radial-gradient(38% 30% at 20% 25%, rgba(11,42,58,0.55), transparent 70%), radial-gradient(34% 26% at 82% 60%, rgba(102,252,241,0.10), transparent 70%), radial-gradient(40% 30% at 60% 90%, rgba(11,42,58,0.45), transparent 70%); animation:drift 26s var(--ease) infinite alternate} @keyframes drift {0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2%,0) scale(1.08)}} body.hm-page-thank-you .wall__dust {position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.35), transparent), radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.25), transparent), radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.30), transparent), radial-gradient(1.5px 1.5px at 85% 80%, rgba(255,255,255,.20), transparent), radial-gradient(1.5px 1.5px at 55% 50%, rgba(255,255,255,.22), transparent), radial-gradient(1.5px 1.5px at 10% 85%, rgba(255,255,255,.20), transparent); background-size:600px 600px;animation:rise 40s linear infinite} body.hm-page-thank-you .wall__veil {position:fixed;inset:0;z-index:-1;pointer-events:none;background:#020c0b;opacity:calc(var(--depth,0)*0.5)} body.hm-page-thank-you #octoCanvas {position:fixed;inset:0;z-index:0;pointer-events:none;width:100vw;height:100vh} @media(prefers-reduced-motion:reduce) { body.hm-page-thank-you {animation:none!important;transition:none!important} } /* ── web-design-development ──────────────────────────────────────── */ /* Same scope-wrapper loss as testimonials above — see that note. The source's body.hm-page-web-design-development scope DOES declare --wrap:1480px, so it is carried verbatim rather than left on the shared `none`. */ body.hm-page-web-design-development { --sage:#052926; --ink:#1A1717; --cyan:#66FCF1; --white:#FFFFFF; --teal-surface:#0a514b; --teal-mid:#073b39; --ocean:#0b2a3a; --glass-fill:rgba(255,255,255,0.065); --glass-fill-strong:rgba(255,255,255,0.10); --glass-border:rgba(255,255,255,0.14); --glass-shadow:0 24px 48px rgba(0,0,0,0.38); --text-dim:rgba(255,255,255,0.62); --text-faint:rgba(255,255,255,0.40); --ease:cubic-bezier(.22,.61,.36,1); --wrap:1480px; } body.hm-page-web-design-development { color:var(--white); background:var(--ink); } @media(prefers-reduced-motion:reduce) { body.hm-page-web-design-development html.js body.hm-page-web-design-development .rv {opacity:1;transform:none} } @media(max-width:860px) { body.hm-page-web-design-development body.hm-page-web-design-development #octoCanvas {display:none!important} body.hm-page-web-design-development body.hm-page-web-design-development .wall__dust {display:none} body.hm-page-web-design-development body.hm-page-web-design-development .wall__glow {animation:none} } /* ── Why these say body.hm-page-* and not .hmg-tm / .hmg-wd ──────────────── The source scopes them to a WRAPPER element —

— that decomposing the page into sections dissolved. Nine rules were still written against those wrappers, so on staging they matched NOTHING: the .wall, .wall__glow and .wall__dust layers rendered as empty fixed divs and the deep green glow behind web-design-development and testimonials simply was not drawn. The page looked flat black instead of the source's gradient. Fifth instance of the same failure on this migration, and the first one the scope-parity gate did NOT catch, because that gate compares TOKEN VALUES and this is a dead selector — the tokens all resolved correctly while the rules using them never ran. Gate extended to check painted layers too. */ /* ── Shared layout primitives, lifted from the source ────────────────────── .sec / .wrap / .head / .eyebrow / .lead / .btn / .glass / .grain / .rv and friends are used by EVERY section, so they belong to no single one. That is precisely how they went missing: each section stylesheet lifted the rules for its own classes and left these to "the shared layer", which did not yet have them. Sections then rendered with none of the source's vertical rhythm — .sec alone carries its 120px band padding. ------------------------------------------------------------------------ */ .n-grab {position:relative;display:inline-block} .wrap {width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative} .sec {position:relative;padding:120px 0} .sec--hero {padding:0} .eyebrow {font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--text-faint)} .dot {color:var(--cyan)} .lead {font-size:clamp(15px,1.4vw,17px);font-weight:300;color:var(--text-dim);max-width:48ch} .glass { background:var(--glass-fill); border:1px solid var(--glass-border); border-radius:24px; box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,0.22); -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%); position:relative; overflow:hidden; } .glass::after {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%)} .grain::before {content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .head {margin-bottom:34px} .head .eyebrow {display:block;margin-bottom:14px} .head h2 {font-weight:700;font-size:clamp(28px,4.6vw,54px);letter-spacing:-.025em} .head p {font-weight:300;font-size:15px;color:var(--text-dim);margin-top:14px;max-width:60ch} .btn {display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:15px 26px;border-radius:999px; background:var(--cyan);color:var(--ink)!important;text-decoration:none;border:none;cursor:pointer;transition:.3s var(--ease)} .btn:hover {transform:translateY(-2px);box-shadow:0 10px 26px rgba(102,252,241,.28)} .btn svg {width:15px;height:15px} .btn--ghost {background:transparent;color:var(--white)!important;border:1px solid var(--glass-border)} .btn--ghost:hover {border-color:var(--cyan);color:var(--cyan);box-shadow:none} .sec--cta {padding-bottom:150px} .morelinks {display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:34px} .morelinks a {color:var(--text-faint);text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.02em;transition:.3s var(--ease)} .morelinks a:hover {color:var(--cyan)} .btn,.btn--ghost,a.btn,a.btn--ghost {text-decoration:none!important;border-bottom:none!important} /* The BASE colour goes first and the ghost variant overrides it. It used to be the other way round, and that made the ghost button unreadable: dark --ink text on a dark page, which is what "buttons should be white CTAs" was about. `a.btn` and `a.btn--ghost` weigh the same (0,1,1) and both were !important, so neither specificity nor !important decided it — SOURCE ORDER did, and the base rule was last. Order is the whole mechanism here; keep the variant below the base. */ .btn,a.btn {color:var(--ink)!important} .btn--ghost,a.btn--ghost {color:var(--white)!important;background:transparent!important} .btn--ghost:hover,a.btn--ghost:hover {color:var(--cyan)!important} .htrack-head {position:absolute;top:38px;left:0;right:0;z-index:3} .lead-eyebrow {font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--text-faint);margin:0} .htrack-vp {width:100%} .htrack {display:flex;align-items:stretch;gap:26px;padding:0 max(28px,calc((100vw - var(--wrap))/2));will-change:transform} .hbar {position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.10);z-index:3} .hbar i {display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 12px rgba(102,252,241,.6)} @media(max-width:860px) { .sec {padding:84px 0} .wrap {padding:0 20px} } @media(prefers-reduced-motion:reduce) { .rv {opacity:1;transform:none} } /* ── Per-page token overrides, from each page's own :root ───────────────── The source tunes these per page — the wrap is 1140px on the contact and thank-you pages and 1440px on the showcase-style ones. Hoisting a single baseline to :root fixed a collapsed gutter but flattened those, so each page gets its own values back here. ------------------------------------ */ body.hm-page-contact-us{--ink:#1A1717;--teal-surface:#0a514b;--teal-mid:#073b39;--ocean:#0b2a3a;--glass-fill:rgba(255,255,255,0.065);--glass-fill-strong:rgba(255,255,255,0.10);--glass-border:rgba(255,255,255,0.14);--glass-shadow:0 24px 48px rgba(0,0,0,0.38);--text-dim:rgba(255,255,255,0.62);--text-faint:rgba(255,255,255,0.40);--ease:cubic-bezier(.22,.61,.36,1);} body.hm-page-home{--ink:#1A1717;--teal-surface:#0a514b;--teal-mid:#073b39;--ocean:#0b2a3a;--glass-fill:rgba(255,255,255,0.065);--glass-fill-strong:rgba(255,255,255,0.10);--glass-border:rgba(255,255,255,0.14);--glass-shadow:0 24px 48px rgba(0,0,0,0.38);--text-dim:rgba(255,255,255,0.62);--text-faint:rgba(255,255,255,0.40);--ease:cubic-bezier(.22,.61,.36,1);} body.hm-page-google-ads{--ink:#1A1717;--teal-surface:#0a514b;--teal-mid:#073b39;--ocean:#0b2a3a;--glass-fill:rgba(255,255,255,0.065);--glass-fill-strong:rgba(255,255,255,0.10);--glass-border:rgba(255,255,255,0.14);--glass-shadow:0 24px 48px rgba(0,0,0,0.38);--text-dim:rgba(255,255,255,0.62);--text-faint:rgba(255,255,255,0.40);--wrap:1480px;--ease:cubic-bezier(.22,.61,.36,1);} body.hm-page-high-end-video-production{--teal-surface:#0a514b;--glass-border:rgba(255,255,255,0.14);--text-dim:rgba(255,255,255,0.66);--text-faint:rgba(255,255,255,0.42);--panel-h:clamp(220px,31vh,330px);--pv:4;--ease:cubic-bezier(.22,.61,.36,1);} body.hm-page-search-engine-optimisation{--ink:#1A1717;--teal-surface:#0a514b;--teal-mid:#073b39;--ocean:#0b2a3a;--glass-fill:rgba(255,255,255,0.065);--glass-fill-strong:rgba(255,255,255,0.10);--glass-border:rgba(255,255,255,0.14);--glass-shadow:0 24px 48px rgba(0,0,0,0.38);--text-dim:rgba(255,255,255,0.62);--text-faint:rgba(255,255,255,0.40);--serp-link:#8ab4f8;--tile-ar:16 / 9;--wrap:1480px;--ease:cubic-bezier(.22,.61,.36,1);} body.hm-page-social-media-management{--teal-surface:#0a514b;--glass-border:rgba(255,255,255,0.14);--text-dim:rgba(255,255,255,0.66);--text-faint:rgba(255,255,255,0.42);--ease:cubic-bezier(.22,.61,.36,1);} body.hm-page-thank-you{--ink:#1A1717;--teal-surface:#0a514b;--teal-mid:#073b39;--ocean:#0b2a3a;--glass-fill:rgba(255,255,255,0.065);--glass-fill-strong:rgba(255,255,255,0.10);--glass-border:rgba(255,255,255,0.14);--glass-shadow:0 24px 48px rgba(0,0,0,0.38);--text-dim:rgba(255,255,255,0.62);--text-faint:rgba(255,255,255,0.40);--ease:cubic-bezier(.22,.61,.36,1);} /* These pages declare no :root of their own, so --wrap was never defined and their .wrap is unconstrained — 1440px at a 1440 viewport, not 1180. The hoisted baseline would otherwise narrow them. `none` is the honest value: max-width:none is exactly "no constraint". */ /* testimonials sets --wrap in its own token block above (1480px, per source). */ /* ── Pages whose opening section carried no top spacing of its own ───────── Seventeen of the twenty pages clear the header because their hero owns its top padding. These three did not: they only ever LOOKED right because the header used to occupy 131px of normal flow, so taking it out of flow (which is what the source does) collided their first heading with the nav — contact-us and thank-you at y=64, start-a-project at y=120, against a nav whose bottom edge is 131. The values below reproduce the SOURCE's measured first-text position, which is worth being precise about because it is not all design: contact-us source 272 = .chero padding-top:64 + 150px of Elementor container padding (.e-con-inner) — page-builder chrome thank-you source 122 = .chero padding-top:64, and nothing else start-a-proj source 160 = 150px Elementor margin + 10px container padding So only thank-you's offset is authored design; the other two are largely an artefact of how the source was assembled. They are reproduced anyway because the brief is to match what the original RENDERS, not what it meant to say. Scaled with the viewport so a phone does not inherit a desktop gap — the ceiling is the measured desktop value. */ body.hm-page-contact-us .hmg-page > .hmg-section:first-child { padding-top: 208px; } body.hm-page-thank-you .hmg-page > .hmg-section:first-child { padding-top: 86px; } body.hm-page-start-a-project-with-us .hmg-page > .hmg-section:first-child { padding-top: 160px; } /* These are absolute values, not additions — the rule REPLACES whatever the section had, which is why start-a-project briefly went from 120 to 40 when it was written as a small "top-up". They are chosen so the first heading lands where the source puts it, except on thank-you: the source lands its heading at 122, which clears the SOURCE's 99px-tall nav but would sit under ours, which measures 131. Our header being 32px taller than the source's is a real difference and is left alone here — it is site-wide, unreported, and resizing it to chase one page would be the tail wagging the dog. Flagged instead. */ @media (max-width: 860px) { body.hm-page-contact-us .hmg-page > .hmg-section:first-child { padding-top: 112px; } body.hm-page-thank-you .hmg-page > .hmg-section:first-child { padding-top: 56px; } body.hm-page-start-a-project-with-us .hmg-page > .hmg-section:first-child { padding-top: 96px; } }