/* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } @font-face { font-family: 'Inter'; src: url('../assets/Inter-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } html { font-size: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; line-height: 1.3; font-size: 0.8rem; font-family: "Inter", sans-serif; color: red; font-optical-sizing: auto; font-weight: 500; font-style: normal; background-color: #fefefe; padding: 1.2em; text-box-trim: trim-both; text-box-edge: cap alphabetic; } /* ── Page transition overlay ─────────────────────────────────── A fixed full-screen div that sits on top of everything. Starts opaque (covers the page), fades out on load. On navigation it fades back in, then we navigate. ─────────────────────────────────────────────────────────────── */ #page-transition { position: fixed; inset: 0; background: #fefefe; z-index: 9999; pointer-events: none; opacity: 1; transition: opacity 0.6s cubic-bezier(.22,1,.36,1); } #page-transition.is-hidden { opacity: 0; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } img { display: block; max-width: 100%; } /* ============================================================ HEADER ============================================================ */ header { overflow: hidden; margin-bottom: 1.2em; } .brand { float: left; font-size: 1.4rem; letter-spacing: 0.01em; text-transform: uppercase; display: flex; align-items: flex-start; margin-right: 0.2em; line-height: 1.2; font-weight: 460; white-space: nowrap; } .brand__suffix { font-size: 0.74rem; font-weight: 620; text-transform: uppercase; vertical-align: baseline; letter-spacing: 0; margin-top: 0.15em; margin-left: 0.25em; } .claim { font-size: 1.4rem; line-height: 1.2; font-weight: 460; } /* ============================================================ INTERACTION WRAP — MOBILE FIRST A horizontally scrollable strip of images. ============================================================ */ .interaction-wrap { margin-left: -1.2em; margin-right: -1.2em; margin-bottom: 1.2em; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .interaction-wrap::-webkit-scrollbar { display: none; } .interaction-track { display: flex; flex-direction: row; gap: 0.4em; padding: 0 1.2em; width: max-content; } .interaction-item { flex: 0 0 auto; width: 60vw; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 0.6em; } .interaction-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ INTERACTION WRAP — DESKTOP The .interaction-wrap becomes an invisible full-screen zone that captures mouse events. Images are spawned by JS as fixed-position elements directly on . ============================================================ */ @media (hover: hover) and (pointer: fine) { .interaction-wrap { position: fixed; inset: 0; overflow: visible; margin: 0; z-index: 1; pointer-events: all; background: transparent; } .interaction-track { display: none; } header, .address-block { position: relative; z-index: 2; pointer-events: none; } header a, .address-block a { pointer-events: all; } /* ── Spawned image cards ────────────────────────────────── JS creates

elements on . ─────────────────────────────────────────────────────────── */ .cursor-card { position: fixed; width: 180px; aspect-ratio: 3 / 4; border-radius: 0.6em; overflow: hidden; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; } .cursor-card img { width: 100%; height: 100%; object-fit: cover; display: block; } } /* ============================================================ ADDRESS BLOCK ============================================================ */ .address-block { margin-top: auto; } .caps { text-transform: uppercase; font-size: 0.74rem; font-weight: 520; } /* ============================================================ FOOTER LINKS ============================================================ */ .footer-links { margin-top: 1.2em; } .footer-links ul { display: flex; gap: 0.6em; margin: 0; padding: 0; list-style: none; } .footer-links a { display: block; } /* ============================================================ PAGE CONTENT (legal / policy subpages) ============================================================ */ .page-content { max-width: 42rem; } .page-content .caps { display: block; margin-bottom: 0; }