. These three rules reproduce the original `#figeneric_inner_about_banner_new h3` styling exactly, including both responsive breakpoints, so nothing moves on screen. */ #figeneric_inner_about_banner_new .banner_title { font-size: 75px; line-height: 75px; margin: 0; color: #fff; text-shadow: 0 0 9px #000; font-weight: 400; text-transform: capitalize; } @media (max-width: 780px) { #figeneric_inner_about_banner_new .banner_title { font-size: 30px; line-height: 33px; } } @media (max-width: 480px) { #figeneric_inner_about_banner_new .banner_title { font-size: 30px; line-height: 22px; } } /* --------------------------------------------------------------------------- Typography role scale — /impeccable typeset pass, 2026-08-11 The inherited template collapsed the heading roles: h2 rendered at the exact same 60px/700 as h1 (no distinction between page title and section title), and h4 (27px) was a pixel LARGER than h3 (26px) — an inverted scale where a subordinate card title outweighed its parent section heading. Both break the "size decreases with heading level" convention screen-reader users and sighted skimmers both rely on to read hierarchy at a glance. Fix: give h2/h3/h4 their own sizes so the scale actually descends (h1 60 > h2 40 > h3 32 > h4 22 > h5 22.5(unchanged, functions as a lead paragraph, not a real heading level) > body 18). Family, weight (700), color, and the existing text-transform/spacing are all preserved — this changes size and line-height only, nothing else about the established look. Same two-breakpoint pattern as the banner_title fix above. h2/h3 need !important: the legacy template scopes its own font-size for these tags per section wrapper (`#home h2`, `#figeneric_three_columns h3`, and others — a different ID per section, inconsistent per page), which outranks a bare `h2`/`h3` selector by specificity regardless of load order. Rather than chase every section ID across six pages (fragile, guaranteed to miss one eventually), !important pins the role scale globally. h4 had no such conflict, so it needed none. Scoped to exactly two properties (font-size, line-height) on two selectors — not a general license to reach for !important elsewhere in this file. CTA links (class="button" — "More Info" / "Learn More" / "What We Offer") were identical in weight to plain body links (18px/400): the origin rule is `.layout .button { font-weight: normal }`, so a bare `.button` override can't win on specificity either. Matched the same `.layout .button` selector instead of reaching for !important here — equal specificity, later in the cascade, wins cleanly. This also affects the header's "Schedule a Free Assessment" button, which was already visually a filled button (border/background) and reads fine bolder; if that turns out unwanted, split it back out with a `:not(#figeneric_header_button .button)` guard. */ h2 { font-size: 40px !important; line-height: 1.2 !important; } h3 { font-size: 32px !important; line-height: 1.3 !important; } h4 { font-size: 22px; line-height: 1.3; } .layout .button { font-weight: 700; } @media (max-width: 780px) { h2 { font-size: 28px !important; } h3 { font-size: 24px !important; } h4 { font-size: 19px; } } @media (max-width: 480px) { h2 { font-size: 24px !important; } h3 { font-size: 20px !important; } h4 { font-size: 17px; } } /* --------------------------------------------------------------------------- Accessibility Statement — exception to the global heading role scale above. The typeset pass sets `h3 { font-size: 32px !important }` site-wide. That is right for section headings on the marketing pages, but this one page is a dense, text-heavy policy document whose six sub-headings ("General", "Disclaimer", "Here For You", …) were deliberately set at 19px by the original template (`#template .page_accessibility_statement h3`). The global !important rule outranks that and inflated them to 32px, which makes the page read as six shouted fragments rather than a document. Restored to the template's intended sizes. Higher specificity plus !important is required only because the rule it corrects is itself !important. Same two breakpoints as everything else in this file. --------------------------------------------------------------------------- */ #template .page_accessibility_statement h3, #template.layout-home .page_accessibility_statement h3 { font-size: 19px !important; line-height: 1.4 !important; } @media (max-width: 780px) { #template .page_accessibility_statement h3, #template.layout-home .page_accessibility_statement h3 { font-size: 17px !important; } } /* --------------------------------------------------------------------------- Tom's photograph on the homepage. The expert panel treated "no photo of Tom on the homepage" as the single most damaging concrete gap on the site — all four panelists independently. The asset already existed (used on About Us), so this is a placement fix, not new work. Sized and centred above the first column heading so the three-column grid keeps its rhythm. --------------------------------------------------------------------------- */ .tom_photo { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto 20px; border-radius: 50%; } /* --------------------------------------------------------------------------- Second-reader block. The expert panel's correction to its own v1: for a 65+ ICP the adult child or spouse is often the FIRST visitor, running a skepticism pass before the parent ever sees the site — so this is v1 content, not a later nice-to-have. Copy-only, no maintenance tail. Styled as a quiet aside rather than another sales panel: the reader it is written for is looking for verifiable facts, and anything that reads as a pitch defeats the purpose. --------------------------------------------------------------------------- */ #second_reader { padding: 10px 0 30px; } #second_reader .second_reader { max-width: 820px; margin: 0 auto; padding: 28px 32px; border-left: 4px solid #c92234; background: rgba(0, 0, 0, 0.03); text-align: left; } #second_reader .second_reader h2 { margin-top: 0; } #second_reader .second_reader p:last-child { margin-bottom: 0; } @media (max-width: 480px) { #second_reader .second_reader { padding: 20px; } }