/** * Home 2 • Desktop ONLY — hero-specific overrides on top of figma-desktop-shared.css * Source (superseded): "Home 2 • Desktop.png" @1440 * Source (current): Agentis design export /designs/v1-original/index.html * * BugZap #109 + #110, measured 2026-08-06 with staging and the export both at * innerWidth 1512. Per the standing ruling (Christine 2026-08-05, "please follow * font sizing of Agentis design", widened by Matt to all typography and geometry), the * export wins over the superseded @1440 Figma frame wherever they disagree. * * Hero inner is identical in both (1440x744 @36,80, gap 46px, 64px gutters); * the two columns divide it differently: export lead 646 / right 620, * ours was lead 743 / right 496. */ @media (min-width: 992px) { body.home .hero-home--layout-single .hero-home__inner { padding-top: 0; padding-bottom: 0; padding-right: 64px; /* match the header gutter so the collage right-aligns with the Contact Us button */ padding-left: 64px; max-width: 1440px; margin-inline: auto; height: 744px; min-height: 744px; max-height: 744px; align-items: stretch; gap: 46px; } /* #110: export lead column measures 646x744 @100,80 (ours was 743). */ body.home .hero-home__lead { flex: 1 1 auto; max-width: 646px; padding-top: 0; padding-bottom: 0; justify-content: center; } /* #109: export H1 is 84px / 92.4px (1.1) / -3.36px (-0.04em), weight 400. Ours was 64px / 76.8px (1.2) / -0.64px (-0.01em). At 646px wide the export title wraps to three lines (646x277 @100,280); ours wrapped to two. */ body.home .hero-home__title { font-size: 84px; line-height: 1.1; letter-spacing: -3.36px; } /* #110: accent rule tracks the lead column - export 646x26 @100,598. margin-top 40 and gap 22 already matched. */ body.home .hero-home__accent { margin-top: 40px; width: min(646px, 100%); gap: 22px; } /* #110: export right column is 620x744 @792,80 (ours was 496 @916). Both columns still share the same right edge (1412) and 64px gutter. NOTE: the export fills this column with an animated two-column marquee of seven 304px-wide images, not a single photo. Christine's "(will replace photo)" is read as a container-width fix only; the marquee is a separate structural decision and is deliberately NOT built here. */ body.home .hero-home__photo { flex: 0 0 620px; width: 620px; max-width: none; } } @media (min-width: 1440px) { body.home .hero-home--layout-single .hero-home__inner { padding-right: 64px; padding-left: 64px; max-width: 1440px; margin-inline: auto; } body.home .hero-home__photo { flex-basis: 620px; width: 620px; } } /* ========================================================================= BugZap #111 / #112 / #113 / #114 / #115 / #116 - HOME ONLY Measured 2026-08-06 with staging and the Agentis design export both at innerWidth 1512. Per the standing ruling (Christine 2026-08-05, "please follow font sizing of Agentis design", widened by Matt to all typography and geometry) the export wins wherever it disagrees with the superseded @1440 Figma frames. Everything below is body.home-scoped ON PURPOSE. The same chapter+heading-top signature also appears on /?page_id=11 (History), /lifestyle-wellness/ and /public-affairs-policy/, and content-features also appears on /services/, /about/ and /business-leadership/. The Agentis design export has NO history page, so a global change there would be unverifiable. Promote these rules out of the home scope only after the other pages have been measured against the export. ========================================================================= */ @media (min-width: 992px) { /* ---- #111 + #116 ------------------------------------------------------- The export puts the heading in the SAME column as the intro and lets the media fill the full height of both rows; our --heading-top variant emits a full-width __header above the 2-column __grid instead. display:contents hoists __content/__media out of __grid so all three can be placed on one container grid, which reproduces the export exactly: row 1 -> 174 + 16 + 161 = 351 (export container 1280x351) row 3 -> 124 + 16 + 200 = 340 (export container 1280x340) __grid's own 80px gap and --valign-top's align-items are lost to display:contents, so both are re-declared on the container. */ body.home .content-list--chapter.content-list--heading-top .content-list__container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; row-gap: 16px; align-items: start; } body.home .content-list--chapter.content-list--heading-top .content-list__grid { display: contents; } body.home .content-list--chapter.content-list--heading-top .content-list__header { grid-column: 1; grid-row: 1; margin-bottom: 0; /* kills the 80/60/40px --heading-top header offsets */ } body.home .content-list--chapter.content-list--heading-top .content-list__content { grid-column: 1; grid-row: 2; gap: 16px; /* export row-gap; --chapter sets 2.5rem */ } body.home .content-list--chapter.content-list--heading-top .content-list__media { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; } /* --image-left flips which column each part lands in */ body.home .content-list--chapter.content-list--heading-top.content-list--image-left .content-list__header, body.home .content-list--chapter.content-list--heading-top.content-list--image-left .content-list__content { grid-column: 2; } body.home .content-list--chapter.content-list--heading-top.content-list--image-left .content-list__media { grid-column: 1; } /* #116: export intro paragraph rhythm and button offset */ body.home .content-list--chapter.content-list--heading-top .content-list__intro p + p { margin-top: 12px; } body.home .content-list--chapter.content-list--heading-top .content-list__actions { margin-top: 16px; } /* ---- #112 -------------------------------------------------------------- Export renders everything after the first line of the row-1 heading as at 32px/300 Barlow rather than as a second 52px Hoefler line. The span itself is emitted by blocks/content-list/content-list.php; the global stylesheet only makes it display:block so the line break survives on other pages. */ body.home .content-list--chapter .content-list__heading-sub { display: block; margin-top: 8px; font-family: var(--font-family-base, "Barlow", "Helvetica Neue", Arial, sans-serif); font-size: 2rem; /* 32px */ line-height: 1.3; /* 41.6px */ font-weight: 300; letter-spacing: -0.48px; } /* ---- #113 -------------------------------------------------------------- "font size and spacing to match Agentis design". The export renders this row with our BASE content-list rhythm plus a 4px list gap - i.e. --lg-items is carried in the export markup but not honoured by the export CSS. Column math, export: 62 + 16 + 54 + 32 + 90 + 64 + 47 = 365. NOTE: the media difference on this row is an ASSET difference, not CSS - ours is 568x430, the export's is 580x506. Flagged for image replacement; deliberately not chased here. */ body.home .content-list--lg-items .content-list__content { gap: 2rem; } body.home .content-list--lg-items .content-list__list { gap: 4px; } body.home .content-list--lg-items .content-list__item { font-size: 1.0625rem; /* 17px */ line-height: 1.6; /* 27.2px */ font-weight: 300; } body.home .content-list--lg-items .content-list__actions { margin-top: 2rem; } /* ---- #114 -------------------------------------------------------------- "this container needs to be less wide - see the Agentis design export and no bolded text". Export: __text max-width 720 centred in the 980 head (ours 814), and __title gap 24 (ours 40). The "bolded text" is the inside __text: font-weight:bolder resolves RELATIVE TO ITS PARENT, and at a 300 parent bolder maps to 400, not 700 - which is exactly what the export renders. */ /* NOTE: the margin-top below is fighting the selector group at blocks/content-features/content-features.css:527-530, whose `.content-features--bg-navy.content-features--cards-filled .content-features__title .content-features__text` arm is (0,3,0). A `body.home .content-features__text` chain is only (0,2,0) and silently loses, so the selector carries the full four-class path. */ body.home .content-features--cards-filled .content-features__title .content-features__text { /* __title's own gap is already the export's 24px; the extra 16 came from this element's own margin-top, which the export does not carry. */ margin-top: 0 !important; /* audit A3: see services twin */ max-width: 720px; margin-inline: auto; } body.home .content-features__text strong, body.home .content-features__text b { font-weight: 400; } /* ---- #115 -------------------------------------------------------------- "less spacing between containers - should fit titles into 2 lines on desktop". Export grid gap is 24, ours 40. Both fill 1280: 4 x 302 + 3 x 24 = 1280 (export) 4 x 290 + 3 x 40 = 1280 (ours) The extra 12px of item width is what pulls every card heading back to two lines, so the gap is the whole fix. */ /* The 40px gutter is set by an explicit bg-navy/cards-filled/cols-4 rule at content-features.css:225 that was authored from the superseded Figma frame 10773:68285 ("ours sat on the 24px cols-4 base") - the base is already the export's value. That rule is (0,4,0), so this override has to match its class chain to win. Left in place rather than deleted because /about/ and /business-leadership/ also carry content-features blocks that have not yet been measured against the export. */ body.home .content-features--bg-navy.content-features--cards-filled.content-features--cols-4 .content-features__list { gap: 24px; } } /* ========================================================================= BugZap #52/#55 validation round (new Agentis design preview, 2026-08-07). The card padding / icon size (#52: items 302x374, pad 24, icon 31x31) and the featured-work photos (#55: 610x476 in a 1280x476 row) already matched the export exactly - the remaining deltas were four head-to-body gaps. Section heights after this block: 744/503/575/678/944/579/2860/617 vs export 744/503/575/683/944/564/2883/617 (residuals are line-wrap and caption content differences, not geometry). ========================================================================= */ @media (min-width: 992px) { body.home .content-list--chapter .content-list__intro { margin-top: -24px !important; } body.home .content-list--chapter .content-list__actions { margin-top: -8px !important; } body.home .content-features--cards-filled .content-features__list { margin-top: -16px !important; } body.home .featured-work__list { margin-top: -40px !important; } }