/* ========================================================================== SECTION TYPOGRAPHY UNIFICATION PASS ========================================================================== Every full-width section on the site repeats the same visual pattern: an small uppercase "eyebrow" label, a large H2 section title, and an intro paragraph underneath. Because each section grew its own bespoke class name over time, their font-sizes drifted apart (eyebrows ranged 0.7rem-0.875rem, headings 1.75rem-3.6rem, intros 0.9375rem-1.3rem, and a couple of headings even had one-off inline "style=" overrides). This file re-aligns all three tiers to the design tokens already defined in variables.css, so every section reads at the same scale. Scope: only the PRIMARY section-level eyebrow/heading/paragraph triplet is unified here. Nested sub-panel headings inside a section (e.g. the "goals & mission" overlay card heading, the small consultation-form title, or a team member's role tag inside a card) are intentionally left untouched — they sit a level below the section header in the page's own hierarchy, and forcing them to the same size would flatten that hierarchy rather than fix it. THIS FILE IS FULLY UNDO-ABLE: Delete public/css/typography-unify.css (or just remove the one line added near the end of each page's ) and every section instantly reverts to its original, pre-existing styling. Nothing in any other CSS or HTML file was edited to make this work. ========================================================================== */ /* ---- Tier 1: Section eyebrow (small uppercase label above a heading) ---- */ .eyebrow, .ds-eyebrow, .section-eyebrow-tag, .cp-section-eyebrow, .cp-mission-eyebrow, .cp-partners-eyebrow { font-size: 0.78rem !important; /* ~12px — subtle compact scale */ font-weight: var(--font-weight-bold) !important; letter-spacing: 0.14em !important; line-height: 1.4 !important; } /* ---- Tier 2: Section title (the H2 that follows the eyebrow) ---- */ .goals-mission-heading, .about-mission-header h2, .philosophy-heading, .ds-title, .client-trust-title, .services-dark-heading, .start-heading, .why-tkm-heading, .journey-heading, .team-sage-heading, .our-work-heading, .locations-heading, .testimonials-main-title, .pricing-heading, .blog-news-heading, .faq-section-heading, h2.what-we-look-title, .about-cta-title, .cp-locations-title, .cp-mission-heading, .cp-partners-heading { font-size: clamp(1.42rem, 2vw + 0.32rem, 2.15rem) !important; line-height: var(--line-height-snug) !important; /* 1.28 */ } /* ---- Tier 3: Section intro paragraph (directly under the title) ---- */ .philosophy-body, .services-dark-intro, .why-tkm-paragraph, .journey-intro, .team-sage-paragraph, .ds-subtitle, .what-we-look-intro, .about-cta-desc, .cp-locations-desc { font-size: clamp(0.88rem, 0.8vw + 0.18rem, 1.01rem) !important; line-height: var(--line-height-relaxed) !important; /* 1.7 */ } /* ---- "Our Journey" heading: kept on a single line on tablet/desktop ---- Its 720px wrap width and the shared Tier 2 size were forcing this longer sentence onto two lines. Below 1000px viewport width it still wraps normally — forcing nowrap there would overflow the screen on mobile. */ .journey-header { max-width: none !important; } @media (min-width: 1000px) { .journey-heading { font-size: clamp(1.22rem, 1.22vw + 0.5rem, 1.75rem) !important; white-space: nowrap !important; } } /* ---- "Our Services" slider cards: title + description ---- Card-level, so left out of the general Tier 2/3 groups above, but the same request applies to them: trimmed down ~5% */ .service-slide-title { font-size: clamp(1.22rem, 1.4vw + 0.18rem, 1.65rem) !important; } .service-slide-desc { font-size: clamp(0.85rem, 0.65vw + 0.14rem, 0.95rem) !important; }