/* Navanem UX layer: loaded last on every page. */

/* Navigation stays reachable on long pages; anchors land below it. */
.site-header{position:sticky;top:0;z-index:40}
html{scroll-padding-top:92px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Keyboard focus: one visible style for every control. */
:where(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.site-footer :where(a,button):focus-visible,.focus-section :where(a,button):focus-visible,.pricing-more :where(a,button):focus-visible{outline-color:var(--mint)}

/* Answer blocks: every paragraph reads like the first one. */
.answer-block>div:last-child>p:not(.answer-date){max-width:65ch;font-size:clamp(16px,1.45cqw,18px);line-height:1.75}
.answer-block>div:last-child>p+p:not(.answer-date){margin-top:1.1em}

/* Links inside running text are recognisable without relying on colour. */
main :is(p,li,dd,figcaption) a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 50%,transparent);transition:text-decoration-color .15s}
main :is(p,li,dd,figcaption) a:not([class]):hover{text-decoration-color:currentColor;text-decoration-thickness:2px}

/* Comfortable reading measure for long-form text. */
.resource-article>section>:is(p,ul,ol),.resource-article>.review-line,.privacy-content>:is(p,ul,ol),.local-note>p,.project-note>p,.resource-summary>p{max-width:72ch}
p{text-wrap:pretty}
:is(h2,h3):not(.display){text-wrap:balance}

/* Forms: 16px fields avoid the automatic zoom of mobile and tablet Safari. */
#main .brief-form :is(input:not([type=checkbox]),select,textarea){font-size:16px}

/* Breadcrumb links: 44px touch height without moving the layout. */
.breadcrumbs a{display:inline-block;padding:13px 0;margin:-13px 0}

/* Footer legibility. */
.footer-brand .eyebrow{font-size:10px}
@media (width>=701px) and (width<=960px){.footer-contact .footer-cta{font-size:13px;padding:12px 16px}}
@media (width<=700px){.footer-brand p{font-size:13px}.footer-bottom{font-size:12px;row-gap:6px;flex-wrap:wrap}}

/* Mobile menu: the contact action looks like the primary action it is. */
.mobile-menu nav a[href$="/contact/"]{margin-top:18px;padding:16px 18px;border-bottom:0;background:var(--ink);color:var(--paper);font-size:18px;font-weight:650}
.mobile-menu nav a[href$="/contact/"]:hover{background:var(--purple);color:var(--mint)}
.mobile-menu nav{max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}