/* ============================================================================= The closing CTA band — styles _partials/final-cta.html. One band on every page (marketing, 2026-09-25). It is the home page's band, moved here unchanged: Figma v4zuHnfQeDWmJsqAyNqiDq, 931x140 on desktop, the 284px mobile variant from node 1433:550. Until then each of the five pages drew its own (931 / 975 / 938 wide, two different washes, three corner radii); the per-page copy is what survived, and it lives in front matter. The page owns only the space above the band: .page- .final-cta { padding-top: … } Bottom is always 0 — the contact panel follows immediately and its own margin supplies the gap before the footer. ========================================================================== */ .final-cta { padding: 0; } .final-cta__band { position: relative; max-width: 931px; margin: 0 auto; min-height: 140px; padding: 28px 62px; background: var(--gradient-cta-band); border-radius: var(--radius-panel); overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 63px; transition: border-radius 0.2s ease; } /* With the contact panel expanded the band joins onto it, so it keeps only its top corners. `contact-open` is on , set by assets/js/contact-form.js. */ .contact-open .final-cta__band { border-radius: var(--radius-panel) var(--radius-panel) 0 0; } .final-cta__title { margin: 0; font: var(--display-m); letter-spacing: var(--ls-display); color: var(--color-cream); } .final-cta__actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 15px; } .final-cta__actions .btn--outline-light { width: 318px; height: 33px; padding: 0 32px; justify-content: center; } /* Tablet: the band stacks and centres, and goes fluid with a 24px margin. */ @media (max-width: 1280px) { .final-cta__band { max-width: calc(100% - 48px); flex-direction: column; align-items: center; text-align: center; gap: 28px; padding: 40px 40px 44px; } .final-cta__actions { align-items: center; } .final-cta__title { font-size: clamp(26px, 3vw, 36px); } } /* The contact panel joins onto the band and must be the SAME width, or the band overhangs it and the join shows a step on each side. 931px above 1280 is the panel's own default. Never the overlay (the header CTA's centred dialog, at any width): :where(:not(.is-overlay)) excludes it without adding specificity, the same guard the page sheets use. */ @media (min-width: 768px) and (max-width: 1280px) { .contact-modal:where(:not(.is-overlay)) { max-width: calc(100% - 48px); } } /* Mobile — Figma node 1433:550: a 284px band with a centred 20px title over stacked outline buttons. */ @media (max-width: 767px) { .final-cta__band { max-width: 284px; gap: 20px; padding: 26px var(--space-4); border-radius: 30px; } .final-cta__title { font-size: var(--text-lg); line-height: 1.1; max-width: 200px; } .final-cta__actions { align-items: stretch; gap: var(--space-3); width: 100%; } /* nowrap with tighter tracking: the label fits one line in the fallback face as well as in Eurostile. */ .final-cta__actions .btn--outline-light { width: 100%; padding: 6px var(--space-3); font-size: var(--text-xs); letter-spacing: 0.06em; white-space: nowrap; } }