@font-face { font-family: 'Jost'; src: url('../fonts/jost-latin-var.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Brand colors — exact values from Design Spec, do not alter */ --color-navy: #0A1D3B; --color-ivory: #FFFFF0; --color-copper: #B97332; --color-steel: #4783B4; --color-sky: #87CEFA; --color-white: #FFFFFF; /* Derived */ --color-navy-soft: #16274a; --color-copper-dark: #9c5f28; --color-border: rgba(10, 29, 59, 0.12); --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 6rem; --radius-sm: 8px; --radius-md: 12px; --shadow-card: 0 12px 30px -12px rgba(10, 29, 59, 0.25); --container-max: 1200px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 7rem; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; /* Do NOT add overflow-x here. `overflow-x: hidden` on forces its computed overflow-y to `auto`, which makes a scroll container and therefore the scrollport for every sticky descendant. Since itself never scrolls (the viewport does), position:sticky then has zero scroll range and silently degenerates to static -- this killed the sticky hero pin in index.html. The `overflow-x: hidden` on above is the safe one: it propagates to the viewport and leaves itself `visible`. */ font-family: var(--font-sans); background: var(--color-ivory); color: var(--color-navy); line-height: 1.55; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--color-navy); line-height: 1.15; margin: 0 0 var(--space-3); font-weight: 500; } h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); } h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 var(--space-3); } a { color: var(--color-copper); text-decoration-thickness: 1px; text-underline-offset: 2px; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); } /* Visible keyboard focus state — required by AGENTS.md */ :focus-visible { outline: 3px solid var(--color-copper); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Skip link: visually hidden until keyboard-focused, per WCAG 2.4.1 */ a.visually-hidden:focus { position: fixed; top: var(--space-4, 1rem); left: var(--space-4, 1rem); width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; z-index: 1000; padding: var(--space-2, 0.5rem) var(--space-4, 1rem); background: var(--color-navy, #10243e); color: var(--color-ivory, #fdfaf1); border-radius: 4px; text-decoration: none; }