/* The four legal pages (templates/page-legal.php), measured on production 2026-09-23 at 1440 / 900 / 390 (docs/audit/widgets/shots/rp-legal-/ — note the folder glob is never written here: `*` + `/` would close this comment): a LEFT-aligned prose column — live's inner is `max-w` 896 with 40px of padding from 1024 and 16px below, not centred — under 64px of section padding and over 88px. Body 18/29.25 with 24px between paragraphs; sub-heads are lines at 24/32 medium (20/28 below 1024);

s are Loretta Light 20/28; an is the italic cut at 24/32 (20/28 below 1024, and 20/28 inside an

); the H1 steps 28/35 → 32/40 → 48/60 with 32px under it. Every value is a token. */ .hbd-legal__body { max-width: none; padding: var(--hbd-legal-pad-top) var(--hbd-legal-gutter) var(--hbd-legal-pad-bottom); } .hbd-legal { width: 100%; min-width: 0; } /* Astra's .ast-container is a flex row, so an unpinned
shrinks to its content (the .hbd-tpl rule, base.css) */ .hbd-legal__article { max-width: var(--hbd-legal-col); margin-left: auto; margin-right: auto; } /* production's column is left-aligned; the client chose centred (2026-09-23) */ .hbd-legal__head { margin-bottom: var(--hbd-legal-h1-gap); } .hbd-legal .hbd-legal__head .hbd-heading { margin: 0; font-size: var(--hbd-legal-h1); line-height: var(--hbd-legal-h1-lh); letter-spacing: normal; } .hbd-legal .hbd-prose { font-family: var(--hbd-font-body); font-size: var(--hbd-legal-text); line-height: var(--hbd-legal-text-lh); color: var(--hbd-ink); } .hbd-legal .hbd-prose > h1 { font-size: var(--hbd-legal-h1); line-height: var(--hbd-legal-h1-lh); letter-spacing: normal; } /* Spacing rides on the gap *between* blocks (live's `mb-6` on every block but the last), so the column ends flush on its 88px bottom padding. The imported copy keeps the crawl's wrapper
around the paragraphs (bin/setup-pages.php), so the rules reach every block, not only the direct children. */ .hbd-legal .hbd-prose :is(div, p, ul, ol, h2, h3, h4, blockquote) { margin: 0; } .hbd-legal .hbd-prose :is(div, p, ul, ol, h2, h3, h4, blockquote) + :is(div, p, ul, ol, h2, h3, h4, blockquote) { margin-top: var(--hbd-legal-para-gap); } .hbd-legal .hbd-prose h1 + * { margin-top: var(--hbd-legal-h1-gap); } .hbd-legal .hbd-prose :is(h2, h3, h4) + :is(div, p, ul, ol, h2, h3, h4, blockquote) { margin-top: var(--hbd-legal-h3-gap); } /* 16 under a sub-heading, not the paragraph 24 (same specificity as the rule above, later, so it wins) */ .hbd-legal .hbd-prose p, .hbd-legal .hbd-prose ul, .hbd-legal .hbd-prose ol { font-size: var(--hbd-legal-text); line-height: var(--hbd-legal-text-lh); } .hbd-legal .hbd-prose li { font-size: var(--hbd-legal-li); line-height: var(--hbd-legal-li-lh); } .hbd-legal .hbd-prose a { font-size: inherit; line-height: inherit; } .hbd-legal .hbd-prose strong { font-family: var(--hbd-font-body); font-weight: 500; font-size: var(--hbd-legal-strong); line-height: var(--hbd-legal-strong-lh); } /* the body face even inside an

: production's sub-heads are Neue Haas medium in a Loretta heading box (terms, measured 2026-09-23) */ .hbd-legal .hbd-prose h2, .hbd-legal .hbd-prose h3, .hbd-legal .hbd-prose h4 { font-family: var(--hbd-font-display); font-weight: 300; font-size: var(--hbd-legal-h3); line-height: var(--hbd-legal-h3-lh); letter-spacing: normal; } .hbd-legal .hbd-prose em { font-family: var(--hbd-font-display); font-style: italic; font-weight: 500; font-size: var(--hbd-legal-em); line-height: var(--hbd-legal-em-lh); } .hbd-legal .hbd-prose h3 em { font-weight: 300; font-size: var(--hbd-legal-h3); line-height: var(--hbd-legal-h3-lh); } /* Lists are Tailwind-preflight flush on live: no indent, no marker, and nothing under them (the next paragraph starts where the last item ends). */ .hbd-legal .hbd-prose :is(ul, ol) { padding-left: 0; list-style: none; } .hbd-legal .hbd-prose :is(ul, ol) + :is(div, p, ul, ol, h2, h3, h4, blockquote) { margin-top: 0; } .hbd-prose h2, .hbd-prose h3 { font-family: var(--hbd-font-body); font-weight: 500; font-size: 1.25rem; margin-top: var(--hbd-space-6); } .hbd-prose ul, .hbd-prose ol { padding-left: 1.25rem; margin-bottom: var(--hbd-space-4); } /* Our custom page templates (page-thank-you.php, 404.php) render
straight after get_header(), skipping Astra's normal #primary.content-area wrapper (which Astra's own CSS gives width:100%). Their direct parent, #content .ast-container, is `display:flex`, so without an explicit width these two full-bleed row elements shrink-to-fit their card content instead of spanning the page. */ .hbd-thank-you, .hbd-404 { width: 100%; padding-block: var(--hbd-space-9); min-height: 60vh; display: grid; align-items: center; } .hbd-thank-you__card, .hbd-404__card { max-width: 40rem; margin: 0 auto; text-align: center; padding: var(--hbd-space-8) var(--hbd-space-6); } .hbd-thank-you__icon { display: inline-flex; width: 4rem; height: 4rem; border-radius: 50%; background: var(--hbd-sky); align-items: center; justify-content: center; margin-bottom: var(--hbd-space-5); } .hbd-thank-you__icon svg { width: 1.75rem; height: 1.75rem; color: var(--hbd-blue); } .hbd-404__actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: var(--hbd-space-5); } /* --------------------------------------------------------------------------------------------------- * Page Builder rows on a seeded page (inc/panels-seed.php, bin/pages/*.php) * * `hbd-page-faq-row` is live's `#section-faqSection`: the CTA card and the FAQ accordion in **one** * two-column section, on home and on the eleven other pages that carry the pair. The seeded layout * gives it two cells weighted 2/5 and 3/5; these rules give the row live's own box — the 1280 content * cap with the site's 20/60/80 gutter, 20px of vertical padding on a phone and 80 from 768, an 80px * column gap, and a single column below 1280, where the card is `display: none` * (`hbd-w-cta-card--desktop-only`) and the questions have the row to themselves. * * Two specificity notes, both about Page Builder's own rules rather than about design. The row is * addressed as `.panel-grid > .panel-row-style.hbd-page-faq-row` because the plugin lays its rows out with * `.panel-row-style:not([data-stretch-type]) { display: flex }`, which is 0-2-0 *and* printed into the * page after this file — so the selector here is 0-3-0. A bare class would leave the row a flex * container with `grid-template-columns` inert. And the two `!important`s cancel the cell * widths and collapsed-cell margins the plugin prints per page as `#pgc---`, an id * selector no class of ours can outrank; the same reason header.css overrides Astra's generated * mega-menu rules. Everything else here is ordinary cascade — Page Builder writes no padding, * max-width or grid of its own for a row. * --------------------------------------------------------------------------------------------------- */ .panel-grid > .panel-row-style.hbd-page-faq-row { --hbd-page-faq-pad: 20px; /* How far below the top of the window the card parks once it sticks. The site header is static, so this only has to be a comfortable margin, not a header's height. */ --hbd-page-faq-sticky-top: 40px; max-width: calc(var(--hbd-container) + 2 * var(--hbd-row-gutter)); margin-inline: auto; padding-inline: var(--hbd-row-gutter); padding-block: var(--hbd-page-faq-pad); display: grid; } /* The row owns the page box, so the widgets inside it must not each add their own container cap and gutter on top of it — that would inset the card and the question list inside their own cells. */ .hbd-page-faq-row .hbd-w > .hbd-w__inner { max-width: none; padding-inline: 0; } .hbd-page-faq-row > .panel-grid-cell { width: auto !important; margin: 0 !important; } /* The card rides along while the questions scroll past it: the accordion column is roughly three times the card's height, so left alone the card sits at the top and the reader spends most of the section beside empty space (client QC, 2026-09-21). Sticking the *cell* rather than the widget is what gives it room to travel — the cell's containing block is the row, which is as tall as the questions, where the widget's own wrapper is only as tall as the card. Only from 1280, because below that the card is `display: none` and the questions have the row to themselves. */ @media (min-width: 1280px) { .hbd-page-faq-row > .panel-grid-cell:first-child { position: sticky; top: var(--hbd-page-faq-sticky-top); align-self: start; } } @media (min-width: 768px) { .panel-grid > .panel-row-style.hbd-page-faq-row { --hbd-page-faq-pad: 80px; } } /* Live's `w-2/5` / `w-3/5` split of what the 80px gap leaves inside the 1280 content box. */ @media (min-width: 1280px) { .panel-grid > .panel-row-style.hbd-page-faq-row { grid-template-columns: 2fr 3fr; gap: var(--hbd-row-gutter); align-items: start; } } /* --------------------------------------------------------------------------------------------------- * `hbd-page-hero-row` — live's `/pincc/` `#section-pinccSection`: one band holding the hero column and * the stat-cards marquee, on one photograph that spans both of them. * * A widget in a 0.5 cell cannot paint a background across the whole band, so the **row** is the cover * image's containing block: `.hbd-w-hero--cover-column` goes `position: static` (its own stylesheet) * and the row is the positioned ancestor its `inset: 0` cover resolves against. Only the *second* cell * is positioned — positioning the first would make it the nearer containing block and pull the cover * back into the hero's own column — and it carries `z-index: 1` so the marquee paints over the * photograph rather than under it (a positioned `z-index: 0` cover otherwise paints above in-flow * content that comes later in the DOM). * * Measured 2026-09-21 (docs/audit/pages/pincc.md §3.1): 1346 / 956 wide inside the 80 / 60 gutter with * a 42 / 58 column gap from 1024, one column below it, and live's 700px band from 1024 up. * * The selector specificity note under `.hbd-page-faq-row` applies here too: the plugin prints * `.panel-row-style:not([data-stretch-type]) { display: flex }` after this file. * --------------------------------------------------------------------------------------------------- */ .panel-grid > .panel-row-style.hbd-page-hero-row { position: relative; display: grid; padding-inline: var(--hbd-hero-gutter); padding-bottom: var(--hbd-page-hero-pad-b); row-gap: var(--hbd-page-hero-gap-sm); /* Live pins this band's height per width and lets its own content overflow it (the standing divergence in docs/audit/widgets/hero.md §7). Below 1024 we pin the same number as a *floor* and pack the two rows at the top, so the band is live's and every section under it keeps live's y — which matters here because our hero column is 56px shorter than live's at 390: production ships three art-directed copies of the H1 and two of its sub-line and paints one per width, and this widget has one string for each (docs/audit/pages/pincc.md §3.2). */ min-height: var(--hbd-page-hero-h-sm, 0px); align-content: start; overflow: hidden; } .hbd-page-hero-row > .panel-grid-cell { width: auto !important; margin: 0 !important; } .hbd-page-hero-row > .panel-grid-cell + .panel-grid-cell { position: relative; z-index: 1; } /* The row owns the page gutter, so the hero inside it must not add its own on top. */ .hbd-page-hero-row .hbd-w-hero > .hbd-w__inner { max-width: none; padding-inline: 0; } /* It owns the full-bleed band too. `.hbd-row--full` is `margin-inline: calc(50% - 50vw)`, which assumes the widget spans the page: in a 0.5 cell the 50% resolves against the *cell*, so the column lands ~310px left of the viewport at 1440 and its copy is cut off outside the window (client QC, 2026-09-21). The hero keeps the class — it is the same sample the gallery bleeds full width — and the row cancels the margin, exactly as it cancels the inner's gutter above. */ .hbd-page-hero-row .hbd-w-hero.hbd-row--full { margin-inline: 0; } /* …and the hero itself must not be the cover's containing block. `.hbd-w-hero` is `position: relative`, so the cover's `inset: 0` resolved against the hero *column* and cropped the 1440-wide photograph to the column's 652 (client QC, 2026-09-21). Static here hands that job to the row, which is what the block comment above describes and what makes one photograph span both cells. The gallery's standalone sample keeps the widget's own `relative`, so it is unaffected. */ .hbd-page-hero-row .hbd-w-hero--cover-column { position: static; } @media (min-width: 1024px) { .panel-grid > .panel-row-style.hbd-page-hero-row { grid-template-columns: 1fr 1fr; gap: var(--hbd-page-hero-gap); padding-bottom: 0; min-height: var(--hbd-page-hero-h); align-content: stretch; align-items: stretch; /* Production caps the band's *content* at 1440 and centres it (`max-w-[1440px] mx-auto` on the `z-10` layer), while the photograph behind it still spans the window — so above 1440 the extra width becomes outer margin rather than a wider hero (client QC, 2026-09-21). The row is both layers here, so the cap is expressed as padding: each side keeps production's own gutter and adds half the overflow, which is inert at 1440 and below. */ padding-left: max(var(--hbd-hero-gutter), calc((100% - var(--hbd-page-hero-max)) / 2 + var(--hbd-hero-gutter))); padding-right: max(var(--hbd-page-hero-edge), calc((100% - var(--hbd-page-hero-max)) / 2 + var(--hbd-page-hero-edge))); } }