/* ═══════════════════════════════════════════════════════════════════════════ JJNRE — Shared UI tokens & normalization layer Loaded LAST in on every public page AND the IDX listing template (listing.html), so it propagates to all generated /homes-for-sale/ pages. Scope: spacing, alignment, containment, component sizing ONLY. Brand colors (#eb1d25 / #003964) and fonts (Bebas Neue / DM Sans) are intentionally NOT redefined here — they remain exactly as each page sets them. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Spacing scale: 4px (0.25rem) base unit ─────────────────────────────── */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-7:1.75rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-14:3.5rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem; /* ── Layout tokens (single source of truth, static + IDX) ───────────────── */ --section-y:2.5rem; /* vertical rhythm between page sections */ --gutter:2rem; /* container side gutter, desktop */ --max-w:1200px; /* content max-width */ --btn-pad:.8rem 2rem; /* standard button padding */ --modal-pad:2rem 1.75rem;/* modal internal padding (snapped from 1.8rem) */ } @media (max-width:768px){ :root{ --gutter:1.25rem; } /* one mobile gutter everywhere */ } /* ── 1. SECTION RHYTHM ───────────────────────────────────────────────────── ONE vertical rhythm sitewide, symmetric top and bottom, driven by --section-y. Matt's call (Jul 2026): every content section gets the same number top and bottom, and that number is 40px. Why !important: an audit measured FIFTEEN different padding pairs across the site, and most of the outliers come from inline style="padding:..." on the section elements themselves — 80/80, 64/48, 64/80, 44/56, 44/64, 40/16, 0/56, 96/80. An inline style beats any stylesheet selector, so a normal rule here silently did nothing and the drift survived. Overriding from the shared layer is what keeps this to one file instead of edits inside twenty-four. Page heroes are the deliberate exception (see the block directly below): they sit under an 84px fixed nav, so their top padding has to carry that clearance or the headline tucks under the bar. They are symmetric once the nav height is accounted for. (The previous comment here claimed sections were "standardized UP to the flagship 6rem pattern" while --section-y was set to 2.5rem. The comment was describing a value the file no longer had.) */ .section, .section-alt, .section-pad, .ab-sec, .agent-bio-section, .aph-section, .search-agents-section, .cc-lead, .svc-lead, .wyl-band, .hub-sec, #agents-grid{ padding-top:var(--section-y) !important; padding-bottom:var(--section-y) !important; } /* Same rhythm, one notch of specificity higher (element + class = 0,1,1). Several pages declare their own !important padding in a