/* ========================================================================== BASE — reset + element defaults Mirrors the normalisation Framer applies, without its editor scaffolding. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Offset for the fixed header when jumping to #contact etc. */ scroll-padding-top: var(--header-h); } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: var(--ls-0); color: var(--c-body); background-color: var(--c-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Framer clips horizontal overflow on the body; marquee rows depend on it. */ overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); /* Every heading on the live site computes to weight 500, never 700. */ font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-0); color: inherit; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } /* Framer sets object-fit: cover on effectively every image node. */ img, video, svg, canvas { display: block; max-width: 100%; height: auto; } img { /* Prevents CLS while the intrinsic ratio resolves. */ height: auto; } figure { margin: 0; } address { font-style: normal; } /* -------------------------------------------------------------------------- ACCESSIBILITY -------------------------------------------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--gutter); z-index: calc(var(--z-menu) + 1); padding: 12px 20px; background: var(--c-ink); color: var(--c-surface); border-radius: var(--r-sm); font-size: var(--fs-14); transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: 12px; } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; } /* -------------------------------------------------------------------------- REDUCED MOTION The Framer original does not honour this. Respecting it is a genuine accessibility improvement and is invisible to everyone else — GSAP reads the same signal in app.js and skips its timelines. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- ANIMATION ENTRY STATES Elements the GSAP layer will reveal start hidden, but ONLY when JS is available — otherwise a script failure would leave the page blank. app.js sets .js on immediately, before paint. -------------------------------------------------------------------------- */ .js [data-anim] { will-change: transform, opacity; } /* No-JS and reduced-motion users get the fully-resolved state. */ @media (prefers-reduced-motion: reduce) { .js [data-anim] { opacity: 1 !important; transform: none !important; will-change: auto; } }