:root {
  --bg: #fff;
  --ink: #1c1a18;
  --muted: rgba(28, 26, 24, 0.6);
  --accent: #fff;
  /* White on white: only a soft shadow, like the fur's, lifts it off the page. */
  --lift: 0 1px 2px rgba(40, 32, 24, 0.45), 0 0 6px rgba(40, 32, 24, 0.25);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The first screen: the word, as a furry white balloon on white fur, read only by its own shading. */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* A small chevron that pulses gently: there's more below. */
.down { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); width: 40px; height: 40px;
  margin-left: -20px; display: grid; place-items: center; }
.down span { width: 14px; height: 14px; border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  filter: drop-shadow(0 1px 1.5px rgba(40, 32, 24, 0.5));
  transform: rotate(45deg); animation: nudge 2.4s ease-in-out infinite; opacity: 0.85; }
.down:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
@keyframes nudge { 0%, 100% { transform: translateY(-3px) rotate(45deg); } 50% { transform: translateY(5px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .down span { animation: none; } html { scroll-behavior: auto; } }

/* About us. */
/* Cream fur behind it (drawn by balloon.js); this colour shows until it's drawn. */
.about { padding: 96px 16px 72px; background-color: rgb(241, 235, 226); }
.about .inner { max-width: 620px; margin: 0 auto; }
.about h2 { margin: 0 0 18px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); text-shadow: var(--lift); font-weight: 800; }
.about h3 { margin: 40px 0 8px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.about .lead { font-size: clamp(26px, 5vw, 38px); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 22px; }
.about p { margin: 0 0 14px; }
.about a { color: var(--accent); text-shadow: var(--lift); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.about .small { margin-top: 56px; font-size: 13px; color: var(--muted); }
.about .small a { color: var(--accent); }