/* ========================================================================== SECTION HEADS — the one opening every major section on the site takes ========================================================================== Added 2026-09-13. Linked LAST on all six pages. SMALL KICKER quiet context — mono caps Big Bold Title. the section's name, and its strongest line One smaller line. what the section is for (optional) ── breathing room ── the section's own content, in the layout it already had Only that opening is centred. Tabs, rails, grids, forms and tables under it keep their own structure and their full width. THE LEVELS, site-wide L1 page hero headline each page's hero sheet — NOT set here L2 major section title --hd-title 42px @1440 · 26px @390 L3 title inside a section --hd-sub 30px @1440 · 20px @390 L4 card / component title left to each component, always below L3 A NEW SECTION joins with four classes and no CSS of its own:

What this is about

Section Name.

One sentence on what it is for.

optional
HOW IT WINS Every live section was styled by its own sheets with #id selectors, the strongest being 1-2-0 (`#gads-services .sv-head .k-h2`, `#wcu-ga .w8-head .w8-sub`). Part 3 addresses the same nodes as `:is(#section ids) .hd-intro > .hd-role` — also 1-2-0 — and wins on source order, the rule every site layer follows. No !important. Tune it through part 1's tokens only. A per-section correction sets a token on that section (`#office{ --hd-desc-w: 44rem }`), never a property, so it cannot start a specificity argument. Parts: 1 tokens · 2 section rhythm · 3 the intro · 4 level 3 · 5 per-section fitting · 6 phones ========================================================================== */ /* ========================================================================== 1 · TOKENS ========================================================================== */ :root{ --hd-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif; --hd-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --hd-ink: #0B0D12; /* --ink */ --hd-kicker-ink: #3A414C; /* --ink-2 */ --hd-desc-ink: #414652; /* the homepage's supporting line */ /* L2 — the major section title. 26px on a phone, 42px at 1440, 46px cap. Every page hero is 52–73px on a desktop and 30–34px on a phone, so the section title always sits clearly one level below it — and every card title (≤ 20px on a phone, ≤ 30px on a desktop) clearly below that. */ --hd-title: clamp(26px, calc(19.6px + 1.55vw), 46px); --hd-title-lh: 1.08; --hd-title-ls: clamp(-1.5px, -.1vw, -.5px); /* L3 — a title inside a section: a service row, an industry, a company */ --hd-sub: clamp(20px, calc(14.5px + 1.05vw), 30px); --hd-sub-ls: clamp(-1.1px, -.075vw, -.4px); /* the kicker — restrained, secondary, never decorative */ --hd-kicker: 11.5px; --hd-kicker-ls: .2em; /* the supporting line */ --hd-desc: clamp(15px, calc(14.3px + .15vw), 17px); --hd-desc-lh: 1.55; --hd-desc-w: 35rem; /* inside the unit the gaps are small, because the type already carries its own air: 8px of margin reads as ~20px from kicker to cap height, 12px as ~28px from the title's baseline to the line under it */ --hd-gap-1: 8px; --hd-gap-2: 12px; /* from the unit to the content — always larger than both gaps above */ --hd-lede: clamp(28px, 2.8vw, 40px); } /* ========================================================================== 2 · SECTION RHYTHM site/shelf.css owns every block's padding through these three tokens. The opening used to sit 42px under a block's top edge and up to 70px above its own content — heading pinned to the ceiling, floating off its goods. The block now gives the unit more room above than the unit gives its content below: edge → 52 → heading unit → 40 → content → 56 → edge. ========================================================================== */ :root{ --sh-pt: clamp(36px, 3.6vw, 52px); --sh-pb: clamp(40px, 3.9vw, 56px); --sh-lede: var(--hd-lede); } /* ========================================================================== 3 · THE INTRO ========================================================================== */ /* the unit — one centred column, sized by its words */ :where(.hd-intro), :is(#services, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10, #gads-services, #w8-system, #wcu-ga, #pricing, #gfaq, #chapters, #journey, #reach, #people, #tc-system, #tc-who, #tc-close, #who, #docs, #verify, #ways, #enquiry, #after, #teams, #office, #answers, #start) .hd-intro, main#top > #q7.q7 .mp-head{ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0; text-align: center; margin-bottom: var(--hd-lede); } /* the client rail drew a hairline beside its title — a left-set device */ main#top > #q7.q7 .mp-head::after{ content: none; display: none; } /* small — the kicker */ :where(.hd-intro) > .hd-kicker, :is(#services, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10, #gads-services, #w8-system, #wcu-ga, #pricing, #gfaq, #chapters, #journey, #reach, #people, #tc-system, #tc-who, #tc-close, #who, #docs, #verify, #ways, #enquiry, #after, #teams, #office, #answers, #start) .hd-intro > .hd-kicker, main#top > #q7.q7 .q7h-eye{ flex: none; order: 0; align-self: auto; width: auto; max-width: 100%; margin: 0; /* the trailing letter-space after the last character is balanced by the same amount in front, so the caps centre on their ink, not their box */ padding: 0 0 0 var(--hd-kicker-ls); border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--hd-mono); font-size: var(--hd-kicker); font-weight: 500; line-height: 1.35; letter-spacing: var(--hd-kicker-ls); text-transform: uppercase; color: var(--hd-kicker-ink); text-align: center; /* a kicker that wraps on a phone splits evenly, never leaving one word */ text-wrap: balance; } /* the leading 26px rule and the bullet marks were left-aligned devices; in a centred unit they only push the words off centre */ :is(#services, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10, #gads-services, #w8-system, #wcu-ga, #pricing, #gfaq, #chapters, #journey, #reach, #people, #tc-system, #tc-who, #tc-close, #who, #docs, #verify, #ways, #enquiry, #after, #teams, #office, #answers, #start) .hd-intro > .hd-kicker::before, :is(#services, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10, #gads-services, #w8-system, #wcu-ga, #pricing, #gfaq, #chapters, #journey, #reach, #people, #tc-system, #tc-who, #tc-close, #who, #docs, #verify, #ways, #enquiry, #after, #teams, #office, #answers, #start) .hd-intro > .hd-kicker::after{ content: none; display: none; } :where(.hd-intro) > .hd-kicker > i{ display: none; } /* BIG / BOLD — the title */ :where(.hd-intro) > .hd-title, :is(#services, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10, #gads-services, #w8-system, #wcu-ga, #pricing, #gfaq, #chapters, #journey, #reach, #people, #tc-system, #tc-who, #tc-close, #who, #docs, #verify, #ways, #enquiry, #after, #teams, #office, #answers, #start) .hd-intro > .hd-title, main#top > #q7.q7 .mp-t{ flex: none; order: 0; align-self: auto; width: auto; max-width: 100%; margin: var(--hd-gap-1) 0 0; padding: 0; font-family: var(--hd-sans); font-size: var(--hd-title); font-weight: 800; line-height: var(--hd-title-lh); letter-spacing: var(--hd-title-ls); text-transform: none; color: var(--hd-ink); text-align: center; text-wrap: balance; } /* optical centre: the accent full stop is light, so a title that ends on one reads left of its box. Half its advance in front puts the words back on the axis. Titles without the stop ("FAQ", "PPC Advertising Plans") are not moved. */ :is(#services, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10, #gads-services, #w8-system, #wcu-ga, #pricing, #gfaq, #chapters, #journey, #reach, #people, #tc-system, #tc-who, #tc-close, #who, #docs, #verify, #ways, #enquiry, #after, #teams, #office, #answers, #start) .hd-intro > .hd-title:has(> i:last-child, > .ab-dot:last-child), main#top > #q7.q7 .mp-t:has(> i:last-child){ padding-left: .22em; } /* small — the supporting line */ :where(.hd-intro) > .hd-desc, :is(#services, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10, #gads-services, #w8-system, #wcu-ga, #pricing, #gfaq, #chapters, #journey, #reach, #people, #tc-system, #tc-who, #tc-close, #who, #docs, #verify, #ways, #enquiry, #after, #teams, #office, #answers, #start) .hd-intro > .hd-desc, main#top > #q7.q7 .q7h-sub{ flex: none; order: 0; align-self: auto; width: auto; max-width: min(100%, var(--hd-desc-w)); margin: var(--hd-gap-2) 0 0; padding: 0; font-family: var(--hd-sans); font-size: var(--hd-desc); font-weight: 400; line-height: var(--hd-desc-lh); letter-spacing: normal; color: var(--hd-desc-ink); text-align: center; text-wrap: balance; } /* a supporting line that is really two paragraphs (Contact Us, Our Offices) */ :is(#office) .hd-intro > .hd-desc > p{ margin: 0; max-width: none; font: inherit; color: inherit; text-align: inherit; text-wrap: pretty; } :is(#office) .hd-intro > .hd-desc > p + p{ margin-top: .6em; } /* ========================================================================== 4 · LEVEL 3 — a title inside a section Three sat so close to the old 56px section titles that, once those came down to L2, they read as section titles of their own: the homepage's service rows (37.7px), the open industry (32px) and the company card in About Us (34px). They take the L3 step. Nothing else about the components changes. Selectors repeat each owner's own, at its specificity, and win on order. ========================================================================== */ #svc3 .s3-info h2, #indwork .v03-name, #about5 .ab-nm{ font-size: var(--hd-sub); line-height: 1.1; letter-spacing: var(--hd-sub-ls); } /* the homepage's phone-only closing band (#mact, injected after Why Choose Us) repeats the hero's sentence as a call to action. At 29.6px it sat above every section title and a hair under the hero itself; a closing band is a section, so it takes L2 — like "Start Here." and "Talk To Us." */ #mact .line{ font-size: var(--hd-title); letter-spacing: var(--hd-title-ls); line-height: var(--hd-title-lh); } /* ========================================================================== 5 · PER-SECTION FITTING Where a section's own structure changes how the unit meets its content. Set a token where a token will do. ========================================================================== */ /* Legal Documents has no separate hero — its registration record IS the hero, and site/shelf.css pads it with the same tokens part 2 raised. A hero is level 1 and keeps its own height, so it keeps the old values. */ #reg.s1{ padding-block: clamp(30px, 3vw, 42px) clamp(34px, 3.4vw, 46px); } @media (max-width: 760px){ #reg.s1{ padding-block: 28px 32px; } } /* Success Stories: the head is a flex row (desktop) or dissolved (phone), so the deck's own top margin was added to the unit's instead of collapsing into it — 78px of gap. The unit's --hd-lede is the gap. */ #ss1 .ss-deck{ margin-top: 0; } /* Verification Support: the band set its text beside its two actions. With the opening centred, the actions sit under it, centred, one lede down. */ #verify .s3-b{ grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; } #verify .s3-a{ justify-content: center; } /* Google Ads: the hero stops short so the client rail shows in the first screen (gads-vm-v1/vm.css reserves 254px for it). The rail's opening is now the full three-line unit, so that reserve put the first row of client cards just under the fold — 926px on a 900px screen. The hero had the room (104px above its content, 113px below at 1440×900), so the reserve grows with the screen's height: 254px on a 720px laptop, as before, up to 300px from 820px up. The hero's type and its content are not touched. */ #hx.h3{ --h3-show: clamp(254px, calc(100svh - 520px), 300px); --h3-show-m: 262px; } /* supporting lines that are really paragraphs get a longer measure, so they run three or four comfortable lines instead of six narrow ones */ #pricing, #tc-system, #tc-who{ --hd-desc-w: 42rem; } #office{ --hd-desc-w: 44rem; } /* ========================================================================== 6 · PHONES The same unit, re-cut for a 390px screen rather than shrunk: the kicker stays readable, the title stays the strongest line without wrapping into a paragraph, and the unit costs as little of the first view as it can. ========================================================================== */ @media (max-width: 760px){ :root{ --hd-kicker: 11px; --hd-kicker-ls: .16em; --hd-gap-1: 6px; --hd-gap-2: 8px; --hd-lede: 24px; --sh-pt: 32px; --sh-pb: 36px; } }