/* The Future People — components, copied from the design system (components/bundle.css). */
:root { --tfp-mark-src: url(../assets/tfp-mark-white.png); }

body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 28px; background: var(--ground); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Focus: one rule for everything interactive */
.tfp-btn:focus-visible, .tfp-link:focus-visible, .tfp-nav a:focus-visible, .tfp-input:focus-visible, .tfp-brand:focus-visible {
  outline: var(--rule-strong) solid var(--focus-ring); outline-offset: 2px;
}
.tfp-footer a:focus-visible { outline: var(--rule-strong) solid var(--white); outline-offset: 2px; }

/* Mark: a masked span so it takes the ink of whatever it sits on. Set --tfp-mark-src to the white mark file. */
.tfp-mark { display: inline-block; width: 32px; height: 32px; flex: none; background: currentColor;
  -webkit-mask: var(--tfp-mark-src) center / contain no-repeat; mask: var(--tfp-mark-src) center / contain no-repeat; }

/* Button */
.tfp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4); border: var(--rule) solid transparent; border-radius: var(--radius-0);
  font: 600 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.tfp-btn--primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tfp-btn--primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.tfp-btn--secondary { background: transparent; color: var(--ink); border-color: var(--edge); }
.tfp-btn--secondary:hover { border-color: var(--ink); }
.tfp-btn--ghost { background: transparent; color: var(--ink); padding: 0 var(--space-2); text-decoration: underline; text-underline-offset: 4px; }
.tfp-btn--lg { min-height: 52px; padding: 0 var(--space-6); font-size: 17px; }
.tfp-btn[disabled], .tfp-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
/* On black: invert */
.tfp-on-black .tfp-btn--primary { background: var(--white); border-color: var(--white); color: var(--black); }
.tfp-on-black .tfp-btn--secondary { color: var(--white); border-color: var(--white-2); }

/* Text link */
.tfp-link { color: var(--link); text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: 4px; }
.tfp-link:hover { text-decoration-thickness: var(--rule-strong); }
.tfp-link--arrow { font-weight: 600; text-decoration: none; display: inline-flex; gap: var(--space-2); align-items: baseline; }
.tfp-link--arrow::after { content: "→"; transition: transform .15s ease; }
.tfp-link--arrow:hover { text-decoration: underline; text-decoration-thickness: var(--rule-strong); }
.tfp-link--arrow:hover::after { transform: translateX(4px); }

/* Tag and eyebrow */
.tfp-eyebrow { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tfp-tag { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border: var(--rule) solid var(--edge);
  font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.tfp-tag--ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* Layout */
.tfp-wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px)); }
.tfp-band { padding-block: var(--space-24); }
.tfp-band--2 { background: var(--ground-2); }
.tfp-band--black, .tfp-on-black { background: var(--black); color: var(--white); }
@media (max-width: 640px) { .tfp-band { padding-block: var(--space-12); } }

/* Site header */
.tfp-header { background: var(--ground); border-bottom: var(--rule) solid var(--ink); }
.tfp-header__in { display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-height); }
.tfp-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none;
  font: 700 18px/20px var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.tfp-nav { display: flex; gap: var(--space-6); margin-left: auto; overflow-x: auto; }
.tfp-nav a { color: var(--ink); text-decoration: none; font: 600 15px/20px var(--font-sans); padding-block: var(--space-2); white-space: nowrap; }
.tfp-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.tfp-nav a[aria-current="page"] { box-shadow: inset 0 calc(-1 * var(--rule-strong)) 0 var(--ink); }
@media (max-width: 640px) { .tfp-header__in { flex-wrap: wrap; gap: 0 var(--space-6); } .tfp-nav { order: 3; width: 100%; margin-left: 0; } .tfp-header .tfp-btn { margin-left: auto; } }

/* Hero */
.tfp-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
.tfp-hero__copy { display: grid; gap: var(--space-4); min-width: 0; }
.tfp-hero h1 { margin: 0; font: 800 76px/76px var(--font-display); letter-spacing: -.03em; text-wrap: balance; color: var(--white); }
.tfp-hero__lede { margin: 0; max-width: var(--measure-text); font-size: 20px; line-height: 30px; color: var(--ink-2); }
.tfp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.hero { position: relative; background: var(--black); color: var(--white); overflow: hidden; }
.hero .tfp-hero { position: relative; }
.hero .tfp-on-black { background: transparent; }
.hero .tfp-hero__lede, .hero .tfp-eyebrow { color: var(--white-2); }
.hero__mark { display: grid; place-items: center; aspect-ratio: 1; max-width: 100%; }
.hero__mark .tfp-mark { width: 72%; height: 72%; color: var(--white); }
@media (max-width: 760px) { .tfp-hero { grid-template-columns: minmax(0, 1fr); } .tfp-hero h1 { font-size: 44px; line-height: 46px; } .hero__mark { max-width: 280px; margin-inline: auto; } }

/* Feature card */
.tfp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-8); }
.tfp-card { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); background: var(--ground);
  border: var(--rule) solid var(--ink); min-width: 0; }
.tfp-card h3 { margin: 0; font: 700 22px/28px var(--font-display); letter-spacing: -.01em; }
.tfp-card p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-2); }
.tfp-card .tfp-link--arrow { margin-top: var(--space-2); font-size: 15px; }

/* Footer */
.tfp-footer { background: var(--black); color: var(--white); padding-block: var(--space-16) var(--space-8); }
[data-theme="dark"] .tfp-footer { border-top: var(--rule) solid var(--line); }
.tfp-footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: var(--space-12); align-items: start; }
.tfp-footer h4 { margin: 0 0 var(--space-3); font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--white-2); }
.tfp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.tfp-footer a { color: var(--white); text-decoration: none; font-size: 15px; line-height: 24px; }
.tfp-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tfp-footer__brand { display: flex; align-items: center; gap: var(--space-3); font: 700 20px/24px var(--font-display); }
.tfp-footer__legal { margin: var(--space-12) 0 0; padding-top: var(--space-6); border-top: var(--rule) solid var(--white-2);
  font: 400 13px/20px var(--font-mono); color: var(--white-2); }
@media (max-width: 640px) { .tfp-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tfp-footer__grid > :first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { .tfp-btn, .tfp-link--arrow::after { transition: none; } }

/* ---- Page styles for the launch site ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.skip { position: absolute; left: -999px; top: var(--space-2); background: var(--ink); color: var(--on-ink); padding: var(--space-2) var(--space-3); z-index: 20; }
.skip:focus { left: var(--space-2); }
.tfp-header { position: sticky; top: 0; z-index: 10; }
/* ---- Teaser: the hero fills the viewport, cubes shiver, and a lens pulls focus through five planes ---- */
.tfp-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; background: transparent; border-bottom: 0; }
.tfp-header .tfp-brand { color: var(--white); }
.tfp-header .tfp-brand:focus-visible { outline-color: var(--white); }
.hero { box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--header-height) + var(--space-8)) var(--space-12); }
.hero__mark { width: min(100%, 56svh); margin-inline: auto; }
.hero .tfp-hero { gap: var(--space-16); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Ground: a soft grey pool of light under a fine monochrome grain */
.hero { background: radial-gradient(ellipse 70% 60% at 50% 42%, #161616 0%, #090909 55%, #000000 100%); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  /* the colour matrix copies the red channel into all three, so the grain is grey in every browser */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.particles-wrap { position: absolute; inset: 0; overflow: hidden; }
.layer { position: absolute; inset: 0; }
.layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: auto; }

/* Chromatic aberration (the filters are inline in index.html) on the words and the mark, with an amount the
   script ties to their blur, so it is gone when they are in focus. The mark's filter sits on a wrapper because
   a mask is applied after a filter and would cut the fringes off. The cubes draw their own fringe in canvas. */
.hero .tfp-hero__copy > * { filter: url(#ca-text); }
.hero__mark-ca { filter: url(#ca-mark); display: grid; place-items: center; width: 100%; height: 100%; }

/*
  The lens only ever rests on two planes: the mark (with the mid cubes) and the words.
  One 18s cycle: on the mark for 5s, a 2s pull in to the words, 6.5s on the words, a 2s pull back.
  The near cubes sit between those two planes and never come fully sharp; the far cubes stay soft throughout.
*/
.hero .tfp-hero__copy { animation: focus-near 18s ease-in-out infinite; will-change: filter; }
.hero__mark { animation: focus-mid 18s ease-in-out infinite; will-change: filter; }
.layer-far  { animation: shiver-bg .22s steps(2, jump-none) infinite; will-change: transform; }  /* softness comes from its low-resolution canvas */
.layer-mid  { animation: shiver-bg .18s steps(2, jump-none) .06s infinite, focus-mid 18s ease-in-out infinite; will-change: transform, filter; }
.layer-near { animation: shiver-bg .15s steps(2, jump-none) .03s infinite, focus-nearest 18s ease-in-out infinite; will-change: transform, filter; }
@keyframes shiver-bg {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-1px, 1px); }
  66%  { transform: translate(1px, -1px); }
  100% { transform: translate(1px, 1px); }
}
/* the lens: 0%–28% the mark · 40%–76% the words · 88%–100% the mark */
@keyframes focus-mid     { 0%, 28% { filter: blur(0); }    40%, 76% { filter: blur(9px); }  88%, 100% { filter: blur(0); } }
@keyframes focus-near    { 0%, 28% { filter: blur(10px); } 40%, 76% { filter: blur(0); }    88%, 100% { filter: blur(10px); } }
@keyframes focus-nearest { 0%, 28% { filter: blur(3.5px); } 40%, 76% { filter: blur(2px); } 88%, 100% { filter: blur(3.5px); } }
@media (prefers-reduced-motion: reduce) {
  .hero .tfp-hero__copy, .hero__mark, .layer, .hero .tfp-hero__copy > *, .hero__mark-ca { animation: none; filter: none; }
}
@media (max-width: 760px) { .hero .tfp-hero { gap: var(--space-8); } .hero__mark { order: -1; max-width: 180px; margin-inline: 0; } }