/* Rightscoped. Ink, paper and one signal colour; colours match tools/rml.py.

   The page has no light or dark mode. It is dark down to the end of "How we
   work" (the problem being worked out), light through services, why us and
   team (clear), then dark again for contact. Bands of lines join the two
   tones: see "Tone bands" below. */
:root {
  --ink: #0b0e13;
  --ink-2: #11161d;
  --paper: #f3efe6;
  --muted: rgba(243, 239, 230, 0.68);
  --faint: rgba(243, 239, 230, 0.45);
  --line: rgba(243, 239, 230, 0.12);
  --line-strong: rgba(243, 239, 230, 0.26);
  --accent: #c8f25a;
  --sand: #e3b873;
  --glass: rgba(11, 14, 19, 0.82);
  --lime: #c8f25a;
  --lime-ink: #16200a;
  --wrap: 1180px;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
.tone-light, .nav.is-light {
  --ink: #f2f1ec;
  --ink-2: #ffffff;
  --paper: #0b0e13;
  --muted: rgba(11, 14, 19, 0.7);
  --faint: rgba(11, 14, 19, 0.5);
  --line: rgba(11, 14, 19, 0.1);
  --line-strong: rgba(11, 14, 19, 0.22);
  --accent: #4d7000;
  --sand: #a86f12;
  --glass: rgba(242, 241, 236, 0.94);
  color-scheme: light;
}
.tone-light { background: var(--ink); color: var(--paper); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--serif); letter-spacing: -0.01em; }
h1 { font-size: clamp(3.2rem, 7.4vw, 6.4rem); line-height: 0.95; }
h2 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1; max-width: 18ch; }
h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
em { font-style: italic; }
h1 em, h2 em { color: var(--accent); }
p { margin: 0; }
.mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lime); color: var(--lime-ink); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Buttons and links: square-cut, with an arrow that moves on hover. */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 22px; border: 0; border-radius: 3px;
  background: var(--lime); color: var(--lime-ink);
  font: 600 0.98rem/1 var(--body); text-decoration: none; cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.2s;
}
.btn::after { content: "→"; transition: transform 0.3s var(--ease); }
.btn:hover::after { transform: translateX(4px); }
.link { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size 0.35s var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; color: var(--paper); border-bottom: 1px solid transparent; transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; }
.nav.is-scrolled { background: var(--glass); border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.1rem/1 var(--body); letter-spacing: -0.02em; }
.brand__mark { width: 26px; height: 26px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.brand__mark .tick { stroke: var(--accent); }
.brand:hover .brand__mark { transform: scale(0.88); }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a { color: var(--muted); text-decoration: none; font-size: 0.95rem; transition: color 0.2s; }
.nav__links a:hover, .nav__links a.nav__cta { color: var(--paper); }
.nav__cta { border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.nav__toggle { display: none; }

/* Hero */
.hero { padding: 40px 0 24px; }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; min-height: min(82vh, 760px); }
.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--muted); margin-bottom: 34px; }
.eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--accent); }
.lede { margin-top: 30px; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--muted); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 40px; }

/* Headline: words rise in behind a mask */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.12em 0; margin-bottom: -0.12em; }
.split .w > span { display: inline-block; transform: translateY(110%); animation: rise 1s var(--ease) forwards; animation-delay: 120ms; }
.split .d1 { animation-delay: 190ms; }
.split .d2 { animation-delay: 260ms; }
.split .d3 { animation-delay: 330ms; }
.split .d4 { animation-delay: 400ms; }
.split .d5 { animation-delay: 470ms; }
@keyframes rise { to { transform: none; } }

/* Rive stages */
.rive-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 620px; margin-inline: auto; }
.rive-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.rive-stage.is-live canvas { opacity: 1; }
.rive-fallback { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; color: var(--paper); }
.rive-stage.is-static .rive-fallback { opacity: 1; }

/* Sections */
.section { padding: clamp(88px, 12vw, 150px) 0; }
.section--tight { padding: 0 0 clamp(64px, 8vw, 100px); }
.kicker { display: flex; align-items: baseline; gap: 14px; color: var(--muted); margin-bottom: 26px; }
.kicker b { font-weight: 500; color: var(--accent); }
.section__lede { color: var(--muted); font-size: 1.12rem; max-width: 38em; margin-top: 26px; }


/* Tone bands: where the page changes tone, horizontal lines of the next
   tone grow thicker row by row until they close up into it, so the change
   reads as lines resolving rather than a flip. Where scroll-driven animation
   is supported, each line also grows as the band scrolls into view (a
   compositor-only transform, so it stays smooth on slower phones). */
.band { display: flex; flex-direction: column; height: clamp(260px, 50vh, 480px); background: var(--from); }
.band--in { --from: #0b0e13; --to: #f2f1ec; }
.band--out { --from: #f2f1ec; --to: #0b0e13; }
.band i { flex: 1; position: relative; }
.band i::after { content: ""; position: absolute; inset: 0; background: var(--to); transform-origin: 50% 100%; transform: scaleY(var(--s)); }
.band i:first-child::after { background: var(--lime); }
.band--out i:first-child::after { background: #4d7000; }
.band i:nth-child(1) { --s: 0.060; --a: 3.0%; }
.band i:nth-child(2) { --s: 0.035; --a: 4.3%; }
.band i:nth-child(3) { --s: 0.035; --a: 5.6%; }
.band i:nth-child(4) { --s: 0.035; --a: 6.9%; }
.band i:nth-child(5) { --s: 0.035; --a: 8.2%; }
.band i:nth-child(6) { --s: 0.036; --a: 9.5%; }
.band i:nth-child(7) { --s: 0.052; --a: 10.8%; }
.band i:nth-child(8) { --s: 0.072; --a: 12.1%; }
.band i:nth-child(9) { --s: 0.095; --a: 13.4%; }
.band i:nth-child(10) { --s: 0.122; --a: 14.7%; }
.band i:nth-child(11) { --s: 0.154; --a: 16.0%; }
.band i:nth-child(12) { --s: 0.189; --a: 17.3%; }
.band i:nth-child(13) { --s: 0.230; --a: 18.6%; }
.band i:nth-child(14) { --s: 0.274; --a: 19.9%; }
.band i:nth-child(15) { --s: 0.324; --a: 21.2%; }
.band i:nth-child(16) { --s: 0.378; --a: 22.5%; }
.band i:nth-child(17) { --s: 0.437; --a: 23.8%; }
.band i:nth-child(18) { --s: 0.501; --a: 25.1%; }
.band i:nth-child(19) { --s: 0.571; --a: 26.4%; }
.band i:nth-child(20) { --s: 0.646; --a: 27.7%; }
.band i:nth-child(21) { --s: 0.726; --a: 29.0%; }
.band i:nth-child(22) { --s: 0.812; --a: 30.3%; }
.band i:nth-child(23) { --s: 0.903; --a: 31.6%; }
.band i:nth-child(24) { --s: 1.000; --a: 32.9%; }
@supports (animation-timeline: view()) {
  .band { view-timeline-name: --band; }
  .band i::after { animation: line-grow linear both; animation-timeline: --band; animation-range: cover var(--a) cover calc(var(--a) + 24%); }
}
@keyframes line-grow { from { transform: scaleY(0); } to { transform: scaleY(var(--s)); } }

/* How we work: one example followed through three still steps. */
.steps { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.step { padding: 30px 30px 0 0; }
.step + .step { padding-left: 30px; border-left: 1px solid var(--line); }
.step__icon { width: 44px; height: 44px; color: var(--paper); margin-bottom: 22px; }
.step__icon .acc { stroke: var(--accent); }
.step__name { font: 400 2rem/1.1 var(--serif); margin-bottom: 10px; }
.step p:last-child { color: var(--muted); max-width: 30em; }

/* Scenes: scroll-scrubbed SVG drawings built by scenes.js. Every colour is a
   token, so a scene reads on the dark and the light parts of the page. */
.scene { width: 100%; height: auto; overflow: visible; font-family: var(--body); }
.scene--handover { margin-top: clamp(40px, 6vw, 72px); }
.scene text { fill: var(--paper); }
.scene .sc-small, .scene .sc-callout { font: 500 12px var(--mono); letter-spacing: 0.06em; }
.scene .sc-callout { fill: var(--accent); }
.scene .sc-small { fill: var(--muted); }
.scene .sc-say { font: 400 28px var(--serif); fill: var(--paper); }
.scene .sc-row { text-transform: uppercase; }
.scene .sc-track { stroke: var(--line-strong); stroke-width: 1; }
.scene .sc-hand { fill: var(--ink); stroke: var(--line-strong); stroke-width: 1.5; transition: fill 0.4s ease, stroke 0.4s ease; }
.scene .sc-hand.is-past { fill: var(--sand); stroke: var(--sand); }
.scene .sc-mark { fill: var(--paper); }
.scene .sc-mark--us { fill: var(--accent); }
@media (max-width: 760px) { .scene .sc-say { font-size: 20px; } }
.scene .sc-tick { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Services: an index, not a grid of boxes */
.services { list-style: none; padding: 0; margin: 64px 0 0; border-top: 1px solid var(--line-strong); }
.service { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--line); position: relative; }
.service::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--accent); transition: width 0.6s var(--ease); }
.service:hover::before { width: 100%; }
.service__num { color: var(--faint); }
.service h3 { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--serif); transition: transform 0.4s var(--ease); }
.service:hover h3 { transform: translateX(8px); }
.service p { color: var(--muted); }
.services__more { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px; margin-top: 36px; color: var(--muted); }

/* Why us */
.section-head { max-width: 760px; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 72px; border-top: 1px solid var(--line-strong); }
.principle { padding: 26px 26px 0 0; }
.principle + .principle { padding-left: 26px; border-left: 1px solid var(--line); }
.principle h3 { margin-bottom: 10px; }
.principle p { color: var(--muted); }

/* Team */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line-strong); }
.founder h3 { font: 400 clamp(2rem, 3.4vw, 2.8rem)/1 var(--serif); }
.founder__role { color: var(--muted); margin-top: 14px; }
.founder__bio { color: var(--muted); font-size: 1.08rem; }
.founder__links { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px; }

/* Meet us */

/* Contact */
.contact h2 { max-width: 14ch; font-size: clamp(2.8rem, 6vw, 5rem); }
.contact__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-top: 48px; }
.contact__email { display: inline-block; font: 400 clamp(1.7rem, 3.6vw, 2.8rem)/1.1 var(--serif); text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1px no-repeat; padding-bottom: 6px; }
.contact__email:hover { color: var(--accent); }
.contact__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 28px; }
.copy { padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 3px; background: transparent; color: var(--muted); font: 500 0.78rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.copy:hover { color: var(--paper); border-color: var(--paper); }
.contact__note { color: var(--muted); }
.contact__who { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.contact__who .link { margin-left: 4px; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 32px 0 44px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer__meta { color: var(--faint); font-size: 0.9rem; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 3px; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; z-index: 60; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .hero__visual { order: -1; max-width: 400px; margin: 0 auto; width: 100%; }
  .founder, .contact__grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav__toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 3px; background: transparent; color: var(--paper); cursor: pointer; }
  .nav__toggle span[aria-hidden] { width: 18px; height: 1.5px; background: currentColor; position: relative; transition: background 0.2s; }
  .nav__toggle span[aria-hidden]::before, .nav__toggle span[aria-hidden]::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease); }
  .nav__toggle span[aria-hidden]::before { top: -6px; }
  .nav__toggle span[aria-hidden]::after { top: 6px; }
  .nav.is-open .nav__toggle span[aria-hidden] { background: transparent; }
  .nav.is-open .nav__toggle span[aria-hidden]::before { transform: translateY(6px) rotate(45deg); }
  .nav.is-open .nav__toggle span[aria-hidden]::after { transform: translateY(-6px) rotate(-45deg); }
  /* The menu unfolds downward and its links follow one after another. */
  .nav__links {
    position: absolute; top: 72px; left: 0; right: 0; height: calc(100dvh - 72px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 12px 20px 32px;
    background: var(--ink); visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path 0.55s var(--ease), visibility 0s linear 0.55s;
  }
  .nav.is-open .nav__links { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.55s var(--ease), visibility 0s; }
  .nav.is-open { background: var(--ink); }
  .nav__links a { padding: 16px 0; border-bottom: 1px solid var(--line); font: 400 2rem/1.1 var(--serif); color: var(--paper); opacity: 0; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.5s var(--ease); }
  .nav.is-open .nav__links a { opacity: 1; transform: none; }
  .nav.is-open .nav__links a:nth-child(1) { transition-delay: 0.08s; }
  .nav.is-open .nav__links a:nth-child(2) { transition-delay: 0.13s; }
  .nav.is-open .nav__links a:nth-child(3) { transition-delay: 0.18s; }
  .nav.is-open .nav__links a:nth-child(4) { transition-delay: 0.23s; }
  .nav.is-open .nav__links a:nth-child(5) { transition-delay: 0.28s; }
  .nav__cta { border-bottom-color: var(--line); }
  .principles { grid-template-columns: 1fr; }
  .principle, .principle + .principle { padding: 24px 0 0; border-left: 0; margin-top: 0; }
  .principle + .principle { border-top: 1px solid var(--line); margin-top: 24px; }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 26px 0 0; border-left: 0; }
  .step + .step { border-top: 1px solid var(--line); margin-top: 26px; }
  .service { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .split .w > span { transform: none; }
  .band i::after { transform: scaleY(var(--s)); }
}

/* 404 */
.notfound { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; padding: 60px 0; }
.notfound svg { margin-bottom: 28px; }
.notfound h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.notfound .hero__actions { margin-top: 32px; }