:root { --bg: #0b0b0b; --ink: #f2f0ea; --muted: #8f8c85; --line: #232323; --accent: #d9c9a3; --font-wordmark: "degular", "Archivo", "Inter Tight", system-ui, sans-serif; --font-body: "Archivo", "Inter Tight", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --pad: clamp(20px, 4vw, 56px); --radius: 28px; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint, the lassie.ai feel */ } * { box-sizing: border-box; } html { background: var(--bg); color-scheme: dark; overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* ---------- header: floating pill, hides going down, returns coming up ---------- */ .site-header { position: fixed; inset: 18px var(--pad) auto; z-index: 20; display: flex; justify-content: space-between; align-items: center; transition: transform 0.5s var(--ease), opacity 0.4s var(--ease); mix-blend-mode: difference; } .site-header.tucked { transform: translateY(-140%); opacity: 0; } .wordmark { font-family: var(--font-wordmark); font-weight: 700; font-size: 18px; letter-spacing: 0.22em; text-transform: uppercase; } .header-mail { font-size: 14px; opacity: 0.85; transition: opacity 0.3s var(--ease); } .header-mail:hover { opacity: 1; } /* ---------- hero: full bleed, crops into a rounded card as you scroll ---------- */ .hero { height: 190vh; position: relative; } .hero-frame { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 100%, #1c1a16 0%, #0b0b0b 70%); /* inset(top right bottom left round radius) -- driven by main.js */ clip-path: inset(0% 0% 0% 0% round 0px); will-change: clip-path; contain: layout paint; overflow: hidden; } .hero-media { position: absolute; inset: 0; overflow: hidden; } .hero-video { width: 100%; height: 100%; object-fit: cover; will-change: transform; /* slight counter-parallax while the frame crops */ } .hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.35)); } .tagline { position: relative; z-index: 2; margin: 0; font-family: var(--font-wordmark); font-weight: 500; font-size: clamp(34px, 6.5vw, 96px); letter-spacing: -0.025em; line-height: 1; text-align: center; padding: 0 var(--pad); } .hero-tag { position: absolute; left: var(--pad); bottom: 30px; z-index: 2; color: var(--ink); opacity: 0.75; } /* ---------- scroll reveals ---------- The hidden state only exists once JS adds .js to , so with JS off every word is on the page from the first paint. Reveals never gate content. */ .line { display: block; overflow: hidden; } .line > span { display: block; } html.js .line > span { transform: translateY(110%); transition: transform 0.9s var(--ease); } html.js .reveal.in .line > span { transform: translateY(0); } html.js .line:nth-child(2) > span { transition-delay: 0.07s; } html.js .line:nth-child(3) > span { transition-delay: 0.14s; } html.js .fade { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } html.js .fade.in { opacity: 1; transform: none; } html.js .rows li { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } html.js .rows.in li { opacity: 1; transform: none; } html.js .rows.in li:nth-child(2) { transition-delay: 0.09s; } html.js .rows.in li:nth-child(3) { transition-delay: 0.18s; } /* ---------- content ---------- */ main { position: relative; z-index: 2; background: var(--bg); } section { padding: clamp(72px, 11vw, 160px) var(--pad); border-top: 1px solid var(--line); max-width: 1200px; margin: 0 auto; } .eyebrow { display: block; margin-bottom: 28px; } .statement h2, .contact h2 { font-family: var(--font-wordmark); font-weight: 500; font-size: clamp(28px, 4.2vw, 58px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 28px; max-width: 20ch; } .statement p { max-width: 52ch; color: var(--muted); font-size: 18px; margin: 0; } .list h3 { font-weight: 500; font-size: 22px; margin: 0 0 24px; } .rows { list-style: none; margin: 0; padding: 0; } .rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); font-size: clamp(18px, 2.2vw, 26px); } .rows li:last-child { border-bottom: 1px solid var(--line); } .steps li { justify-content: flex-start; font-size: 18px; } .steps li .mono { min-width: 34px; } .mail-big { display: inline-block; font-family: var(--font-wordmark); font-size: clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--muted); padding-bottom: 4px; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .mail-big:hover { color: var(--accent); border-color: var(--accent); } .site-footer { display: flex; justify-content: space-between; padding: 34px var(--pad); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); position: relative; z-index: 2; background: var(--bg); } @media (max-width: 640px) { .header-mail { display: none; } .hero { height: 165vh; } .rows li { flex-direction: column; gap: 6px; align-items: flex-start; } .steps li { flex-direction: row; gap: 12px; } } @media (prefers-reduced-motion: reduce) { .hero { height: 100vh; } .hero-frame { clip-path: none !important; } .hero-video { transform: none !important; } html.js .line > span, html.js .fade, html.js .rows li { opacity: 1 !important; transform: none !important; transition: none !important; } .site-header { transition: none; } }