@font-face {
  font-family: "Albert Sans";
  src: url("fonts/albert-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: block;
}

:root {
  --ground: #0B0B0B;
  --ink: #FFFFFF;
  --silver-hi: #E6E6E8;
  --silver-lo: #616162;
  --silver-ramp: linear-gradient(90deg, var(--silver-lo), var(--silver-hi) 50%, var(--silver-lo));
  --silver-text: #A2A3A5;
  --meta: #8E8F92;
  --hairline: rgb(255 255 255 / 0.14);

  --paper: #FFFFFF;
  --paper-ink: #0B0B0B;
  --paper-second: #5C5D60;
  --paper-meta: #6E6F72;
  --paper-hairline: rgb(11 11 11 / 0.12);

  --gutter: 40px;
  --gap: 24px;
  --section: 168px;
  --display: "Albert Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ground); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: var(--display); font-weight: 400; }
ol, ul { list-style: none; }

/* The site's bar is fixed over the top 94 px, so the skip link shows just under it (hidden, it sits behind the bar). */
.skip {
  position: absolute; left: var(--gutter); top: calc(var(--bar-h) + 8px); z-index: 10;
  padding: 8px 14px; border-radius: 999px; background: var(--silver-hi); color: var(--ground);
  font: 500 13px/16px var(--mono); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.meta, .label {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--meta);
}

/* The opening is a cover: the logo film, the statement directly under it, the four meta lines at the corners.
   Rows: top bar · space · film · statement · space · bottom row; the two 1fr rows centre the film and the statement as one group.
   The cover fills the screen under the site's 94 px bar, so every height is 100svh minus the bar, and the film and the
   statement keep their proportions. Its four corners sit on the site's gutter (64 px, 24 px up to 600 px wide), so
   "Company profile" stands directly under the bar's lockup; the film and the statement stay centred. */
.opening {
  --site-gutter: 64px;
  position: relative;
  min-height: calc(100svh - var(--bar-h));
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(24px, 1fr) auto auto minmax(32px, 1.2fr) auto;
  padding: 28px var(--gutter) 36px;
}

.top {
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
.opening .top, .opening .bottom { margin-inline: calc(var(--site-gutter) - var(--gutter)); }
@media (max-width: 600px) { .opening { --site-gutter: 24px; } }
/* Short landscape screens (about 800 px high or less): the cover gives up a little of its air, so all of it, the foot row
   included, still fits the first screen under the bar. Taller screens and portrait screens are unchanged. */
@media (max-height: 800px) and (min-aspect-ratio: 1/1) {
  .opening { padding-bottom: 24px; grid-template-rows: auto minmax(12px, 1fr) auto auto minmax(16px, 1.2fr) auto; }
}

/* The film box shows the frame band the motion uses (rows 102 to 942 of 1080 in 16:9, 190 to 870 of 1080 in 1:1):
   only empty ground is cut, never the mark. The film's grained black fades into the page ground on a soft ellipse,
   so it has no edge; the held lockup sits inside the solid part (66%), untouched. */
.film {
  grid-row: 3;
  justify-self: center;
  position: relative;
  width: min(100%, calc((100svh - var(--bar-h)) * 1.15), 1400px);
  aspect-ratio: 16 / 7;
  -webkit-mask-image: radial-gradient(farthest-side at 50% 52%, #000 66%, rgb(0 0 0 / 0.84) 74.5%, rgb(0 0 0 / 0.5) 83%, rgb(0 0 0 / 0.16) 91.5%, transparent);
          mask-image: radial-gradient(farthest-side at 50% 52%, #000 66%, rgb(0 0 0 / 0.84) 74.5%, rgb(0 0 0 / 0.5) 83%, rgb(0 0 0 / 0.16) 91.5%, transparent);
}
.film-still, .film-still img, .film-play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.film-still img, .film-play { object-fit: cover; object-position: 50% 42.5%; }
/* The video never takes the pointer: no right-click menu with Loop or Picture in picture, no hover; the Sound button is the one control. */
.film-play { opacity: 0; pointer-events: none; }
.film.is-live .film-play { opacity: 1; transition: opacity 600ms ease; }
/* Portrait screens take the 1:1 film edge to edge, so its sides meet the screen edges as the film's own frame does;
   only its top and bottom fade into the page ground. */
@media (max-aspect-ratio: 1/1) {
  .film {
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    aspect-ratio: 27 / 17;
    -webkit-mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.5) 12%, #000 27%, #000 75%, rgb(0 0 0 / 0.5) 89%, transparent);
            mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.5) 12%, #000 27%, #000 75%, rgb(0 0 0 / 0.5) 89%, transparent);
  }
  .film-still img, .film-play { object-position: 50% 47.5%; }
}

.statement {
  grid-row: 4;
  justify-self: center;
  max-width: 19em;
  font-size: clamp(30px, min(3vw, calc((100svh - var(--bar-h)) * 0.046)), 50px);
  line-height: 1.06;
  font-weight: 460;
  letter-spacing: -0.03em;
  text-align: center;
  text-wrap: balance;
}
.statement .then { color: var(--silver-text); }

.bottom {
  grid-row: 6;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 48px;
}
.who .meta { display: block; margin-bottom: 12px; }
.who p { font-size: 17px; line-height: 1.45; letter-spacing: -0.005em; color: var(--ink); max-width: 30em; text-wrap: balance; }

.sound {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 15px 8px 12px;
  border: 1px solid var(--meta);
  border-radius: 999px;
  background: transparent;
  color: var(--silver-hi);
  font: 400 12px/16px var(--mono);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.sound[hidden] { display: none; }
/* The pill is 34 px tall; this unseen halo makes the target 44 by 44 px or more (the pill's padding box plus 6 px each side) and moves nothing. */
.sound::after { content: ""; position: absolute; inset: -6px; }
.sound-icon { flex: none; width: 14px; height: 14px; }
.sound-state { color: var(--meta); transition: color 200ms; }
.sound:hover { border-color: var(--silver-hi); }
.sound:focus-visible { outline: 2px solid var(--silver-hi); outline-offset: 3px; }
.sound[aria-pressed="true"] { background: var(--silver-hi); border-color: var(--silver-hi); color: var(--ground); }
.sound[aria-pressed="true"] .sound-state { color: var(--silver-lo); }
.sound[aria-pressed="false"] .sound-on, .sound[aria-pressed="true"] .sound-off { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sound, .sound-state { transition: none; }
}

.chapter {
  position: relative;
  padding: var(--section) var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  margin-bottom: 96px;
}
.display {
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.08;
  font-weight: 460;
  letter-spacing: -0.028em;
}
.body-l { font-size: 19px; line-height: 1.5; letter-spacing: -0.005em; }

.condition .grid { align-items: center; row-gap: 40px; }
.cond-fig { grid-column: 1 / span 6; }
.cond-copy { grid-column: 8 / span 5; }
.cond-copy .body-l { color: var(--silver-text); margin-top: 32px; max-width: 26em; }
.diagram { display: block; width: 100%; height: auto; }
.diagram .dlabel { font-family: var(--mono); font-size: 15px; letter-spacing: 0.02em; }
.figcap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend svg { width: 12px; height: 12px; color: var(--silver-hi); }

.not-list { grid-column: 4 / span 9; border-bottom: 1px solid var(--hairline); }
.not-list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  padding: 22px 0 24px;
  border-top: 1px solid var(--hairline);
}
.not-list .idx { font-family: var(--mono); font-size: 12px; color: var(--meta); }
.not-list .struck {
  font-size: clamp(26px, 2.9vw, 46px);
  line-height: 1.12;
  font-weight: 420;
  letter-spacing: -0.024em;
  color: var(--silver-text);
  background: var(--silver-ramp) no-repeat 0 57% / 100% 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.exclusions .side { grid-column: 1 / span 3; }

.method {
  background: var(--paper);
  color: var(--paper-ink);
  --hairline: var(--paper-hairline);
}
.method .label, .method .meta { color: var(--paper-meta); }
.method .sec-head { margin-bottom: 72px; }
.method-head { align-items: end; margin-bottom: 120px; }
.method-head h2 { grid-column: 1 / span 6; }
.method-head p { grid-column: 8 / span 5; color: var(--paper-second); }

.method-body { position: relative; }
/* Sticky places measure from the bar's lower edge (the bar covers the top 94 px), so each keeps its gap below the bar. */
.step-index { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--bar-h) + 96px); }
.step-index ol { display: grid; gap: 4px; }
.step-index a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 12px 7px 8px;
  border-radius: 2px;
  font: 400 13px/18px var(--mono);
  letter-spacing: 0.01em;
  color: var(--paper-second);
  text-decoration: none;
  transition: background-color 200ms, color 200ms;
}
.step-index a .n { color: var(--paper-meta); transition: color 200ms; }
.step-index a:hover { color: var(--paper-ink); }
.step-index a[aria-current="step"] { background: var(--paper-ink); color: var(--paper); }
.step-index a[aria-current="step"] .n { color: var(--silver-text); }
.step-index a:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 2px; }

.steps { grid-column: 4 / span 9; }
.step {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-bottom: 120px;
  scroll-margin-top: 96px;
}
.step-copy { grid-column: 1 / span 4; }
.step-no { font: 400 12px/16px var(--mono); color: var(--paper-meta); margin-bottom: 18px; }
.step h3 { font-size: clamp(26px, 2.4vw, 40px); line-height: 1.1; font-weight: 460; letter-spacing: -0.024em; }
.step h4.sub { font-size: 19px; line-height: 1.4; font-weight: 520; letter-spacing: -0.01em; margin-top: 28px; }
.step p, .step li { font-size: 17px; line-height: 1.55; letter-spacing: -0.003em; color: var(--paper-second); }
.step h3 + p { margin-top: 28px; }
.step h4.sub + p { margin-top: 12px; }
.step-list { margin-top: 14px; border-top: 1px solid var(--hairline); }
.step-list li { padding: 12px 0 13px; border-bottom: 1px solid var(--hairline); color: var(--paper-ink); }
.step-copy > p + p { margin-top: 14px; }
.note { margin-top: 36px; padding: 18px 0 0; border-top: 1px solid var(--paper-ink); }
.note .label { display: block; margin-bottom: 10px; }
.note p { color: var(--paper-ink); }
.note .note-reg { margin-top: 14px; color: var(--paper-second); }

.step-fig { grid-column: 5 / span 5; }
.step-fig .figcap { margin-top: 14px; }
.step-fig .figcap .label { max-width: 34em; }

.stage { display: none; }
@media (min-width: 1024px) {
  .js .method-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .js .steps { grid-column: 4 / span 4; grid-row: 1; }
  .js .step { display: block; min-height: 78vh; }
  .js .step .step-fig { display: none; }
  .js .stage {
    display: block;
    grid-column: 8 / span 5;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: max(calc(var(--bar-h) + 96px), calc(50vh + var(--bar-h) / 2 - 330px));
  }
  .js .step-index { grid-row: 1; }
  .stage-frame { position: relative; }
  .stage .step-fig { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transition: opacity 420ms ease, visibility 0s linear 420ms; }
  .stage .step-fig.is-active { position: relative; opacity: 1; visibility: visible; transition: opacity 420ms ease, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .stage .step-fig, .stage .step-fig.is-active { transition: none; }
}

.founder .grid { align-items: center; row-gap: 48px; }
.frame-wrap { grid-column: 1 / span 7; perspective: 1600px; perspective-origin: 30% 50%; padding: 28px 0; }
.plane {
  position: relative;
  aspect-ratio: 16 / 11;
  transform: rotateY(17deg);
  transform-origin: left center;
  transform-style: preserve-3d;
}
.plane-face {
  position: absolute; inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #151516, #0B0B0B 60%);
  border: 1px solid rgb(230 230 232 / 0.5);
  display: grid;
  align-content: end;
  padding: 7% 8%;
}
.plane::before, .plane::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgb(230 230 232 / 0.22);
  pointer-events: none;
}
.plane::before { transform: translate3d(-12px, 12px, -40px); }
.plane::after { transform: translate3d(-24px, 24px, -80px); border-color: rgb(230 230 232 / 0.1); }
.founder-copy { grid-column: 9 / span 4; }
.founder-copy .display { font-size: clamp(26px, 2.4vw, 40px); line-height: 1.12; letter-spacing: -0.024em; }
.founder-copy .body-l { color: var(--silver-text); margin-top: 28px; }

.finish { overflow: hidden; isolation: isolate; padding-bottom: 40px; }
.finish .grid { align-items: center; }
.particulars { grid-column: 1 / -1; margin-top: 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 16px 0 72px; border-top: 1px solid var(--hairline); }
.particulars > div { grid-column: span 4; }
.particulars .label { display: block; margin-bottom: 10px; }
.particulars p, .particulars dd { font-size: 17px; line-height: 1.5; color: var(--ink); }
.particulars dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; }
.particulars dt { font-size: 17px; line-height: 1.5; color: var(--silver-text); }

@media (max-width: 1023px) {
  .method-body { display: block; }
  .step-index {
    position: sticky; top: var(--bar-h); z-index: 5;
    margin: 0 calc(var(--gutter) * -1) 56px;
    padding: 10px var(--gutter);
    background: rgb(255 255 255 / 0.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hairline);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .step-index::-webkit-scrollbar { display: none; }
  .step-index ol { display: flex; gap: 6px; width: max-content; }
  .step-index a { border: 1px solid var(--paper-hairline); border-radius: 999px; padding: 7px 14px 7px 12px; gap: 10px; white-space: nowrap; }
  .step-index a[aria-current="step"] { border-color: var(--paper-ink); }
  .step { scroll-margin-top: 72px; row-gap: 32px; }
  .step-copy { grid-column: 1 / -1; grid-row: 1; }
  .step-fig { grid-column: 1 / -1; grid-row: 2; }
  .method-head h2 { grid-column: 1 / -1; }
  .method-head p { grid-column: 1 / -1; margin-top: 28px; }
  .cond-fig { grid-column: 1 / span 7; }
  .cond-copy { grid-column: 8 / span 5; }
  .founder .frame-wrap { grid-column: 1 / -1; }
  .founder-copy { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --gap: 16px; --section: 104px; }
  .opening { padding: 18px var(--gutter) 24px; grid-template-rows: auto minmax(16px, 1fr) auto auto minmax(28px, 1.2fr) auto; }
  .top { height: 32px; }
  .statement { font-size: 29px; line-height: 1.08; letter-spacing: -0.028em; max-width: 13em; margin-top: 6px; }
  .bottom { gap: 16px; }
  .who .meta { margin-bottom: 8px; }
  .who p { font-size: 15px; line-height: 1.45; }

  .sec-head { margin-bottom: 48px; }
  .body-l { font-size: 16px; }
  .cond-copy { grid-column: 1 / -1; grid-row: 1; }
  .cond-copy .body-l { margin-top: 20px; }
  .cond-fig { grid-column: 1 / -1; grid-row: 2; margin: 0 -6px; }
  .exclusions .side { display: none; }
  .not-list { grid-column: 1 / -1; }
  .not-list li { grid-template-columns: 44px minmax(0, 1fr); padding: 16px 0 18px; }
  .not-list .struck { font-size: 25px; }
  .method .sec-head { margin-bottom: 48px; }
  .method-head { margin-bottom: 64px; }
  .method-head p { margin-top: 20px; }
  .step { padding-bottom: 88px; }
  .step p, .step li { font-size: 16px; }
  .step h4.sub { font-size: 17px; }
  .figcap { flex-direction: column; }
  .frame-wrap { padding: 12px 0 12px 24px; perspective: 900px; }
  .plane { aspect-ratio: 4 / 3; transform: rotateY(14deg); }
  .plane::before { transform: translate3d(-10px, 10px, -40px); }
  .plane::after { transform: translate3d(-20px, 20px, -80px); }
  .founder-copy .display { font-size: 24px; }
  .founder-copy .body-l { margin-top: 18px; }
  .particulars { margin-top: 56px; }
  .particulars { row-gap: 32px; padding-bottom: 56px; }
  .particulars > div { grid-column: 1 / -1; }
  .particulars p, .particulars dd, .particulars dt { font-size: 16px; }
}

.founder { padding-bottom: 96px; }
.founder .frame-wrap { grid-column: 2 / span 5; width: calc(100% - 24px); max-width: 440px; justify-self: center; padding: 24px 0; }
.founder .plane { aspect-ratio: 405 / 500; }
.founder .plane-face { padding: 0; display: block; }
.founder-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.finish { padding-top: 0; }
.finish .particulars { margin-top: 0; padding-top: 24px; }
@media (max-width: 1023px) {
  .founder .frame-wrap { grid-column: 1 / -1; max-width: 360px; }
}
@media (max-width: 760px) {
  .founder { padding-bottom: 64px; }
}

/* ---- The website's header and footer, and the five motions. ----
   Header and footer: the website's own values (its /privacy/ page), copied rule for rule and scoped to
   .site-header and .site-footer, so they cannot reach the profile's own rules. The website's names for its colours are set
   inside that scope only; no profile token changes (its #0B0B0B, #A2A3A5, #8E8F92 and #E6E6E8 are the profile's
   --ground, --silver-text, --meta and --silver-hi; #2A2A2D, the site's rule, is new and lives only there). */
:root { --bar-h: 94px; }
html { scroll-padding-top: var(--bar-h); }
.sub-header ~ main { margin-top: var(--bar-h); }

.site-header, .site-footer {
  --black: #0B0B0B; --ink-2: #A2A3A5; --label: #8E8F92; --rule: #2A2A2D;
  --gutter: 64px; --max: 1312px; --col-gap: 32px;
  font-family: "Albert Sans", system-ui, sans-serif; font-size: 17px; line-height: 1.5; color: #fff;
}
@media (max-width: 600px) { .site-header, .site-footer { --gutter: 24px; } }
.site-header *, .site-header *::before, .site-header *::after, .site-header::before, .site-header::after,
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.site-header p, .site-footer p { margin: 0; }
.site-header a:focus-visible, .site-footer a:focus-visible { outline: 2px solid var(--silver-hi); outline-offset: 4px; border-radius: 4px; }
.site-header .lockup img, .site-footer .lockup img { display: block; height: 30px; width: auto; }

/* Header: one bar, fixed, solid black (the cover's own ground), 94 px tall. Desktop: the lockup and the five section links,
   each back to its place on the home page; at 1200 px and below the links fold into the phone menu. */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; height: var(--bar-h); padding: 25px var(--gutter); background: var(--black); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0; }
.site-header.stuck::after, .nav-open .site-header::after { opacity: 1; }
.site-header a { display: inline-flex; align-items: center; min-height: 44px; }
.site-header .nav-panel { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; margin-left: 56px; }
.site-header .nav-panel nav { flex: 1 1 auto; }
.site-header .nav-links { display: flex; gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.site-header .nav-links a { position: relative; font-size: 16px; line-height: 1.5; color: #fff; text-decoration: none; white-space: nowrap; transition: color .22s cubic-bezier(.2, 0, 0, 1); }
/* The website header's own hover (not one of the five): on a hovered or keyboard-focused link the others dim and a small silver dot shows under it. */
.site-header .nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--silver-hi); opacity: 0; transition: opacity .22s cubic-bezier(.2, 0, 0, 1); }
@media (hover: hover) {
  .site-header .nav-links:has(a:hover) a:not(:hover) { color: var(--ink-2); }
  .site-header .nav-links a:hover::after { opacity: 1; }
}
.site-header .nav-links:has(a:focus-visible) a:not(:focus-visible) { color: var(--ink-2); }
.site-header .nav-links a:focus-visible::after { opacity: 1; }
.site-header .nav-toggle { display: none; position: relative; flex: none; width: 48px; margin: 0 -6px 0 auto; color: #fff; }
.site-header .nav-toggle::before, .site-header .nav-toggle::after { content: ""; position: absolute; top: 11px; bottom: 11px; width: 5px; border: 1px solid var(--label); }
.site-header .nav-toggle::before { left: 6px; border-right: 0; }
.site-header .nav-toggle::after { right: 6px; border-left: 0; }
.site-header .nt-glyph { position: absolute; left: 50%; top: 50%; width: 14px; height: 7px; translate: -50% -50%; }
.site-header .nt-glyph::before, .site-header .nt-glyph::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; }
.site-header .nt-glyph::before { top: 0; }
.site-header .nt-glyph::after { bottom: 0; right: 6px; }
.nav-open .site-header .nt-glyph::before { top: 3px; rotate: 45deg; }
.nav-open .site-header .nt-glyph::after { bottom: 3px; right: 0; rotate: -45deg; }

/* The header button slot. This page leaves the website's header button off. To add it, place the website's one line,
   <a class="btn btn-bar" ...>, in .nav-panel after the nav; these are its rules, as the website's. */
.site-header .btn { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 26px 0 28px; border-radius: 999px; color: #fff; font-size: 18px; font-weight: 500; text-decoration: none; white-space: nowrap;
  --btn-beam: #3847ff; --btn-line: #afb5ff; --btn-violet: #4738ff; --btn-azure: #386bff;
  background-color: var(--btn-beam); background-image: linear-gradient(to bottom, color-mix(in srgb, var(--btn-line) 16%, transparent), transparent 50%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--btn-line) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--btn-violet) 50%, transparent),
    0 8px 22px -10px color-mix(in srgb, var(--btn-azure) 85%, transparent), 0 0 26px -8px color-mix(in srgb, var(--btn-beam) 70%, transparent);
  transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), color 120ms cubic-bezier(.2, 0, 0, 1), box-shadow 120ms cubic-bezier(.2, 0, 0, 1); }
@media (hover: hover) {
  .site-header .btn:hover { background-color: color-mix(in srgb, var(--btn-beam) 90%, var(--btn-line));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--btn-line) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--btn-violet) 65%, transparent),
      0 8px 24px -9px var(--btn-azure), 0 0 30px -8px color-mix(in srgb, var(--btn-beam) 85%, transparent); }
}
.site-header .btn:active { background-color: #fff; background-image: none; color: var(--btn-beam); box-shadow: 0 0 0 1px #fff, 0 0 24px -6px color-mix(in srgb, var(--btn-line) 70%, transparent); }
.site-header .btn:focus-visible { outline: 2px solid var(--silver-hi); outline-offset: 4px; border-radius: 999px; }
.site-header .btn svg { width: 16px; height: 16px; flex: none; }
.site-header .btn-bar { flex: none; min-height: 44px; margin-left: 32px; gap: 10px; padding: 0 18px 0 20px; font-size: 16px; }
.site-header .btn-bar svg { width: 14px; height: 14px; }
@media (forced-colors: active) {
  .site-header .btn { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .site-header .btn:active { background: Highlight; color: HighlightText; }
}

@media (max-width: 1200px) {
  .site-header .nav-toggle { display: inline-flex; }
  .site-header .nav-panel { display: none; position: fixed; inset: var(--bar-h) 0 0 0; z-index: 20; flex-direction: column; align-items: stretch; margin: 0;
    padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom)); background: var(--black); overflow-y: auto; overscroll-behavior: contain; }
  .nav-open .site-header .nav-panel, .site-header .nav-panel:target { display: flex; }
  .site-header .nav-panel nav { flex: none; margin-bottom: 48px; }
  .site-header .nav-links { flex-direction: column; }
  .site-header .nav-links a { display: flex; width: 100%; min-height: 76px; padding: 14px 0; font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; border-bottom: 1px solid var(--rule); }
  .site-header .nav-links a::after { content: none; }
  .site-header .nav-panel .btn-bar { margin: auto 0 0; min-height: 56px; padding: 0 26px 0 28px; justify-content: space-between; font-size: 18px; }
  .site-header .nav-panel .btn-bar svg { width: 16px; height: 16px; }
  html.nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-links a, .site-header .nav-links a::after, .site-header .btn { transition: none; }
}

/* Footer (black): the website's footer row, word for word. Two labelled groups on calm black, a muted label over a brighter
   value, then the wordmark large in fine horizontal lines resting on the floor of the page (its shape is the website's own
   data: SVG, byte for byte: nothing is linked, and img-src 'self' data: allows it). */
.site-footer { position: relative; border-top: 1px solid var(--rule); }
.site-footer.on-black { background: var(--black); color: #fff; }
.site-footer .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.site-footer .foot-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; padding: 64px 0 0; border-top: 1px solid var(--rule); }
.site-footer .foot-in .lockup { grid-column: 1 / span 4; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: -12px; }
.site-footer .foot-in .lockup img { height: 24px; }
.site-footer .foot-label { margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 14px; line-height: 20px; letter-spacing: 0.01em; color: var(--label); }
.site-footer .foot-nav { grid-column: 7 / span 2; display: flex; flex-direction: column; align-items: flex-start; }
.site-footer .foot-nav .foot-label { margin-bottom: 0; }
.site-footer .foot-nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: "IBM Plex Mono", monospace; font-size: 14px; color: var(--silver-hi); text-decoration: none; }
.site-footer .foot-nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--label); text-underline-offset: 5px; }
.site-footer .foot-io { grid-column: 9 / span 4; }
.site-footer .foot-io .foot-label { margin-bottom: 11px; }
.site-footer .io { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.site-footer .fw-band { --fw-pitch: 6px; --fw-line: 1.5px; position: relative; margin-top: 96px; padding-bottom: 64px; container-type: inline-size; }
.site-footer .fw-band::before { content: ""; position: absolute; z-index: 0; inset: -56px calc(-1 * var(--gutter)) 0; pointer-events: none;
  background: radial-gradient(40% 60% at 36% 62%, rgb(230 230 232 / 0.07), rgb(230 230 232 / 0) 72%),
              radial-gradient(28% 44% at 69% 50%, rgb(230 230 232 / 0.045), rgb(230 230 232 / 0) 70%); }
.site-footer .fw { --fw-shape: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2277.9%20-720%203859.7%20920%22%3E%3Cpath%20d%3D%22M140.3%20-105.6%20147.6%20-106.7V200H77.9V-500H142.2L146.7%20-402Q169.1%20-446%20214.85%20-476.5Q260.6%20-507%20330.5%20-507Q396%20-507%20448.05%20-475.5Q500.1%20-444%20530%20-386.5Q559.9%20-329%20559.9%20-250Q559.9%20-172%20531.35%20-114.5Q502.8%20-57%20451.25%20-25Q399.7%207%20330.6%207Q257.3%207%20209.6%20-25.35Q161.9%20-57.7%20140.3%20-105.6ZM484.8%20-250Q484.8%20-338.3%20439%20-390.15Q393.2%20-442%20316.1%20-442Q267.4%20-442%20228.95%20-419.2Q190.5%20-396.4%20169.05%20-353.25Q147.6%20-310.1%20147.6%20-250Q147.6%20-190.8%20169.1%20-147.65Q190.6%20-104.5%20229.05%20-81.25Q267.5%20-58%20316.2%20-58Q393.3%20-58%20439.05%20-109.85Q484.8%20-161.7%20484.8%20-250Z%20M683.9%20-500H748.2L751.8%20-422.3Q771%20-450.4%20799.6%20-470.6Q828.2%20-490.8%20863.5%20-499.05Q898.8%20-507.3%20939.2%20-500V-430.4Q897%20-438.6%20863.05%20-430.25Q829.1%20-421.9%20804.65%20-399.3Q780.2%20-376.7%20766.9%20-342.4Q753.6%20-308.1%20753.6%20-263.6V0H683.9Z%20M1247.8%207Q1177%207%201121.2%20-24Q1065.4%20-55%201033.45%20-112.5Q1001.5%20-170%201001.5%20-249.1Q1001.5%20-329%201033.9%20-387Q1066.3%20-445%201122.55%20-476Q1178.8%20-507%201249.6%20-507Q1320.4%20-507%201376.6%20-476Q1432.8%20-445%201465.15%20-387.45Q1497.5%20-329.9%201497.5%20-250.9Q1497.5%20-170.9%201464.7%20-112.95Q1431.9%20-55%201375.25%20-24Q1318.6%207%201247.8%207ZM1246.9%20-58.9Q1292.1%20-58.9%201332.15%20-79Q1372.2%20-99.1%201397.3%20-141.7Q1422.4%20-184.3%201422.4%20-250Q1422.4%20-316.6%201397.75%20-358.75Q1373.1%20-400.9%201333.5%20-421Q1293.9%20-441.1%201248.7%20-441.1Q1203.5%20-441.1%201164.35%20-421Q1125.2%20-400.9%201100.95%20-358.3Q1076.7%20-315.7%201076.7%20-250Q1076.7%20-183.4%201100.5%20-141.25Q1124.3%20-99.1%201163%20-79Q1201.7%20-58.9%201246.9%20-58.9Z%20M1657.3%20-150.8Q1663.4%20-120%201679.65%20-99.8Q1695.9%20-79.6%201722.15%20-69.25Q1748.4%20-58.9%201783.9%20-58.9Q1839.5%20-58.9%201868.15%20-80.55Q1896.8%20-102.2%201896.8%20-135.1Q1896.8%20-162.7%201879.7%20-179.3Q1862.6%20-195.9%201834.75%20-206.5Q1806.9%20-217.1%201773.4%20-225.1Q1747.8%20-231%201717.8%20-239.35Q1687.8%20-247.7%201660.7%20-262.55Q1633.6%20-277.4%201616.4%20-301.35Q1599.2%20-325.3%201599.2%20-364.3Q1599.2%20-406.9%201622.55%20-439.15Q1645.9%20-471.4%201687.1%20-489.2Q1728.3%20-507%201781.9%20-507Q1843.7%20-507%201892.05%20-480Q1940.4%20-453%201959.1%20-395.4L1894.3%20-373.3Q1886.8%20-401%201867.6%20-415.8Q1848.4%20-430.6%201825.15%20-435.85Q1801.9%20-441.1%201779.3%20-441.1Q1732.1%20-441.1%201703.2%20-422.4Q1674.3%20-403.7%201674.3%20-367.1Q1674.3%20-346.9%201683.9%20-333.7Q1693.5%20-320.5%201710.25%20-312.15Q1727%20-303.8%201749.6%20-298.2Q1772.2%20-292.6%201798.2%20-285.8Q1827.2%20-278.9%201857.2%20-268.55Q1887.2%20-258.2%201913.15%20-241.85Q1939.1%20-225.5%201955.5%20-200.1Q1971.9%20-174.7%201971.9%20-136.8Q1971.9%20-93%201948.1%20-60.75Q1924.3%20-28.5%201882%20-10.75Q1839.7%207%201783.8%207Q1707.1%207%201657.15%20-27.15Q1607.2%20-61.3%201590.5%20-128.6Z%20M2435.5%20-500H2507.9L2223.2%20200H2156.1L2240.5%20-6.3L2037.2%20-500H2113.2L2277.5%20-88.9Z%20M2604.9%20-500H2669.2L2672.8%20-423.1Q2696%20-462.7%202735.65%20-484.85Q2775.3%20-507%202829.9%20-507Q2886.6%20-507%202929.65%20-482.55Q2972.7%20-458.1%202996.9%20-409.5Q3021.1%20-360.9%203021.1%20-287.4V0H2951.4V-279.4Q2951.4%20-359.5%202916.65%20-401.25Q2881.9%20-443%202817.2%20-443Q2750.3%20-443%202712.45%20-398.5Q2674.6%20-354%202674.6%20-266.8V0H2604.9Z%20M3200.1%20-500V-640H3269.8V-500H3405V-435H3269.8V-158.3Q3269.8%20-112.8%203289.6%20-91Q3309.4%20-69.2%203340.4%20-64.4Q3371.4%20-59.6%203405%20-64.2V-3.9Q3366.7%205.1%203329.8%201Q3292.9%20-3.1%203263.8%20-21.55Q3234.7%20-40%203217.4%20-73.45Q3200.1%20-106.9%203200.1%20-158.3V-435H3124.4V-500Z%20M3517.9%20-720H3587.6V-425.7Q3611%20-465%203652.85%20-486Q3694.7%20-507%203747.5%20-507Q3802.5%20-507%203845.5%20-482.2Q3888.5%20-457.4%203913.05%20-408.3Q3937.6%20-359.2%203937.6%20-285.5V0H3863.4V-277.5Q3863.4%20-357.6%203829.25%20-400.25Q3795.1%20-442.9%203730.3%20-442.9Q3663.4%20-442.9%203625.5%20-397.3Q3587.6%20-351.7%203587.6%20-264.5V0H3517.9Z%22%2F%3E%3C%2Fsvg%3E"); position: relative; z-index: 1; display: none; width: 100%; aspect-ratio: 3859.7 / 920; }
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .site-footer .fw { display: block; background: linear-gradient(90deg, #616162 0%, #E6E6E8 50%, #616162 100%);
    -webkit-mask: var(--fw-shape) 0 0 / 100% auto no-repeat, linear-gradient(#000 0 var(--fw-line), transparent 0) 0 calc(100cqw * 0.186543 - var(--fw-line)) / 100% var(--fw-pitch) repeat-y;
    -webkit-mask-composite: source-in;
    mask: var(--fw-shape) 0 0 / 100% auto no-repeat, linear-gradient(#000 0 var(--fw-line), transparent 0) 0 calc(100cqw * 0.186543 - var(--fw-line)) / 100% var(--fw-pitch) repeat-y;
    mask-composite: intersect; }
}
@media (forced-colors: active) { .site-footer .fw-band { display: none; } }
@media (max-width: 900px) {
  .site-footer .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .site-footer .foot-in .lockup { grid-column: 1 / -1; }
  .site-footer .foot-nav { grid-column: 1; }
  .site-footer .foot-io { grid-column: 2; }
  .site-footer .fw-band { --fw-pitch: 5px; margin-top: 88px; padding-bottom: 56px; }
}
@media (max-width: 600px) {
  .site-footer .foot-in { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding-top: 48px; }
  .site-footer .foot-in .lockup, .site-footer .foot-nav, .site-footer .foot-io { grid-column: 1; }
  .site-footer .foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .site-footer .foot-nav .foot-label { grid-column: 1 / -1; margin-bottom: 0; }
  .site-footer .foot-nav a { justify-self: start; }
  .site-footer .fw-band { --fw-pitch: 3.5px; margin-top: 64px; padding-bottom: 40px; }
  .site-footer .fw-band::before { inset: -40px calc(-1 * var(--gutter)) 0; }
}

/* The five motions, and nothing else new, matched to the website's list:
   easing cubic-bezier(0.2, 0, 0, 1) everywhere, transform and opacity only (the focus ring's colour is the one exception),
   lift 220 ms, press 160 ms, enter 200 ms per card at least 40 ms apart, ring 180 ms; the count-up is profile.js's.
   The cards are the page's plates: the What we do drawing, the How we work drawings (on a desktop, the sticky frame that
   shows them) and the founder's framed photo. All of it sits inside prefers-reduced-motion: no-preference, so a reader who
   asks for reduced motion gets none of it; forced colours keep the plain ring. Lift and entering need profile.js (html.mo);
   without it every card simply shows. */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .mo-card { position: relative; isolation: isolate; transition: transform 220ms cubic-bezier(0.2, 0, 0, 1); }
    .mo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
      box-shadow: 0 16px 32px -20px rgba(11, 11, 11, 0.32); transition: opacity 220ms cubic-bezier(0.2, 0, 0, 1); }
    html.mo .mo-card.mo-up { transform: translateY(-4px); }
    html.mo .mo-card.mo-up::after { opacity: 1; }
  }
  .sound { transition: background-color 200ms, color 200ms, border-color 200ms, transform 160ms cubic-bezier(0.2, 0, 0, 1); }
  .site-header .nav-toggle { transition: transform 160ms cubic-bezier(0.2, 0, 0, 1); }
  .site-header .btn { transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), color 120ms cubic-bezier(.2, 0, 0, 1), box-shadow 120ms cubic-bezier(.2, 0, 0, 1), transform 160ms cubic-bezier(0.2, 0, 0, 1); }
  .sound:active, .site-header .nav-toggle:active, .site-header .btn:active { transform: scale(0.97); }
  html.mo .mo-card.mo-wait { opacity: 0; transform: translateY(12px); transition: none; }
  html.mo .mo-card.mo-go { opacity: 1; transform: none; transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1); }
  @media (forced-colors: none) {
    a:focus-visible, button:focus-visible { animation: ring-in 180ms cubic-bezier(0.2, 0, 0, 1); }
  }
}
@keyframes ring-in { from { outline-color: transparent; } }
/* The skip link had the browser's own ring, which has no colour to ease in from; it takes the site's link ring (its pill keeps its round ends). */
.skip:focus-visible { outline: 2px solid var(--silver-hi); outline-offset: 4px; }

/* Print and save as PDF show every plate at once: none waits below the fold to enter. (profile.js settles the step numbers.) */
@media print {
  html.mo .mo-card.mo-wait { opacity: 1; transform: none; }
}
/* A step number that is counting up is drawn in an aria-hidden span; it takes no selection, so copying the number gives its printed text. */
.step-no [aria-hidden="true"] { -webkit-user-select: none; user-select: none; }