/* ── Tokens ── */ :root { --lime: #A8CC36; --lime-dark: #97b82e; --black: #111111; --gray: #6B6B6B; --gray-light: #999999; --border: #E4E4E4; --white: #FFFFFF; --off-white: #F7F7F5; --font-heading: 'Google Sans Flex', sans-serif; --font-body: 'DM Sans', sans-serif; --container: 1280px; --container-wide: 1440px; --gutter: clamp(1.5rem, 5vw, 4rem); --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); --ease: cubic-bezier(0.22, 1, 0.36, 1); --radius-pill: 100px; } /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-width: thin; scrollbar-color: var(--lime) var(--black); /* clip (not hidden) so position:sticky descendants keep working */ overflow-x: clip; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: var(--lime); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--lime-dark); } body { font-family: var(--font-body); color: var(--gray); background-color: var(--white); line-height: 1.6; /* clip (not hidden) so position:sticky descendants keep working */ overflow-x: clip; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--black); font-optical-sizing: auto; font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "ROND" 0; } h1, h2 { font-weight: 700; } h3, h4 { font-weight: 600; } p { line-height: 1.75; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; color: inherit; border: none; outline: none; background: none; } :focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; } /* ── Skip link ── Visually hidden until keyboard-focused, then pinned top-left. Pairs with the in-page #main-content anchor. */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; padding: 8px 16px; background: #a8cc36; color: #111; font-weight: 600; text-decoration: none; } .skip-link:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; overflow: visible; } /* ── Global utilities ── */ body.no-scroll { overflow: hidden; } /* ── Preloader ── */ #preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } /* When arriving via internal navigation, hide the preloader via CSS so it never flashes. The class is set by an inline