/* Layout: a fixed full-screen WebGL stage behind native-scrolling chapters, on a light base. The
   hero's current of energy runs through a glass lens that shows it sorted into the four areas of the
   profile; as the page scrolls, the same lines re-form into a different shape for each company.
   The words lead. Each chapter places them differently against its formation: beside it on either
   side, centered with the formation around them, below it, or on glass over a full-bleed scene. On
   phones the formation takes the top of the screen and the words sit below. Text that floats over
   moving lines rests on frosted glass; buttons are softly extruded from the page. Each area keeps
   one color throughout, in the words and in the lines. */

@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/mona-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --bg: #f2f3f6;
  --fg: #11141d;
  --fg-2: rgba(17, 20, 29, 0.74);
  --muted: rgba(17, 20, 29, 0.62);
  --line: rgba(17, 20, 29, 0.1);
  --stage-bg: #f2f3f6;
  --stage-ink: #1b2030;

  /* The four areas: audio hardware, machine learning, developer platforms, customer workflows. */
  --area-0: #a94c29;
  --area-1: #3a56c9;
  --area-2: #1d7566;
  --area-3: #8c6418;

  /* Supporting colors, one or two from each company's own site, deepened to hold up as fine lines. */
  --brand-yourleadai: #d97a45;
  --brand-aaro: #a8825a;
  --brand-stemsai: #6f5bd3;
  --brand-infer: #c4401f;
  --brand-sona: #245b6e;
  --brand-sona-2: #cf8160;
  --brand-neobiolinus: #1f3fd0;
  --brand-goodtwin: #c8321c;
  --brand-goodtwin-2: #e58a6b;

  --neu-light: rgba(255, 255, 255, 0.95);
  --neu-dark: rgba(152, 162, 186, 0.5);
  --glass: rgba(255, 255, 255, 0.58);
  --glass-edge: rgba(255, 255, 255, 0.8);

  --sans: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4.5vw, 72px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 9 3M4.2 3H9v4.8'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body { margin: 0; overflow-x: clip; background: var(--bg); }

h1, h2, h3, p, ul { margin: 0; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100lvh;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}

.has-stage #stage { opacity: 1; }

.no-webgl #stage { display: none; }

/* Each chapter's ground: a light tint from its company's palette. The stage shifts the page toward
   it as the chapter's lines arrive, alternating warm and cool so neighbors read apart. */
.hero, .contact { --tint: #f2f3f6; }
#yourleadai { --tint: #f7f0e6; }
#flow7 { --tint: #eef0f6; }
#aaro { --tint: #f6eee6; }
#stemsai { --tint: #efeef9; }
#infer { --tint: #eaf3ef; }
#sona { --tint: #e8f1f3; }
#neobiolinus { --tint: #ebeffa; }
#goodtwin { --tint: #f9ede7; }

/* Without WebGL, each chapter carries its own ground. */
.no-webgl [data-formation] { --bg: var(--tint); background: var(--bg); }

/* Each area keeps one color: in the profile, the Flow7 family, and each company's accents. */
[data-area="0"] { --accent: var(--area-0); }
[data-area="1"] { --accent: var(--area-1); }
[data-area="2"] { --accent: var(--area-2); }
[data-area="3"] { --accent: var(--area-3); }
[data-area="neobiolinus"] { --accent: var(--brand-neobiolinus); }
[data-area="goodtwin"] { --accent: var(--brand-goodtwin); }

.area { color: var(--accent); font-weight: 600; }

.nowrap { white-space: nowrap; }

/* Top bar */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--gutter) 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

.mark,
.bar-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.mark { font-weight: 600; letter-spacing: -0.01em; }

.bar-nav { display: flex; gap: clamp(16px, 3vw, 36px); }

.bar-nav a { color: var(--fg-2); font-size: 0.95rem; transition: color 160ms ease; }

.bar-nav a:hover { color: var(--fg); }

main { position: relative; z-index: 2; }

/* Type */
.display {
  font-size: clamp(3.2rem, 8.4vw, 8.6rem);
  font-stretch: 104%;
  font-weight: 520;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-wrap: balance;
}

.display a { color: inherit; text-decoration: none; }

.product .display { font-size: clamp(3rem, 7.2vw, 7.2rem); }

/* Flow7 holds its companies the way a parent company does: larger than any of them. */
.display-parent { font-size: clamp(4.2rem, 13vw, 12.5rem); letter-spacing: -0.05em; }

.product .display-long { font-size: clamp(2.6rem, 5.4vw, 5.6rem); }

.eyebrow {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow a { text-decoration: none; transition: color 160ms ease; }

.eyebrow a:hover { color: var(--fg); }

/* Companies under Flow7 carry a short rule leading from the parent's name. */
.child .eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: 12px;
  background: currentColor;
  vertical-align: middle;
}

.link {
  color: var(--fg);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  white-space: nowrap;
  transition: text-decoration-color 200ms ease;
}

.link::after,
.soft.visit::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.4em;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform 260ms var(--ease);
}

.link:hover { text-decoration-color: currentColor; }

.link:hover::after,
.soft.visit:hover::after { transform: translate(2px, -2px); }

/* Soft, extruded buttons. The label keeps full contrast; the shadow is never the only cue. */
.soft {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-weight: 620;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 8px 8px 18px var(--neu-dark), -8px -8px 18px var(--neu-light);
  transition: box-shadow 260ms var(--ease), transform 260ms var(--ease);
}

.soft:hover { transform: translateY(-1px); box-shadow: 10px 10px 22px var(--neu-dark), -10px -10px 22px var(--neu-light); }

.soft:active { transform: none; box-shadow: inset 5px 5px 12px var(--neu-dark), inset -5px -5px 12px var(--neu-light); }

.chapter {
  position: relative;
  padding-inline: var(--gutter);
}

/* Hero: a centered stack. The name, then the lens on its current, then the profile. Its exit
   begins as the page starts to move, while the lens and its current are still in view. */
.hero { min-height: 115svh; }

.hero-copy {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 92px 56px;
  text-align: center;
}

.hero .display { font-size: clamp(3.2rem, 9vw, 9rem); }

/* Holds the lens's place; the stage draws the glass here and moves it with the page. */
.lens-slot {
  width: min(600px, 88vw);
  height: clamp(130px, 24svh, 230px);
  margin-block: clamp(18px, 3.4svh, 36px);
  pointer-events: none;
}

/* Without WebGL there is no lens to hold a place for; keep a plain gap under the name. */
.no-webgl .lens-slot { height: 0; margin-block: 0 26px; }

.role {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 540;
  letter-spacing: -0.01em;
}

.lede {
  max-width: 60ch;
  margin-top: 16px;
  color: var(--fg-2);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 34px;
  margin-top: 36px;
  font-size: 1.05rem;
}

/* A chapter: the intro holds beside its formation, then the work follows in the same column, and a
   gap at the end leaves the stage clear while the lines re-form for the next chapter. */
.pin { position: relative; height: 92svh; }

.parent { padding-bottom: 50svh; }

/* Fade the lines behind the words. */
.pin::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 calc(-1 * var(--gutter));
  z-index: -1;
  width: min(900px, 66vw);
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) 62%, transparent);
}

.intro {
  position: sticky;
  top: 22svh;
  max-width: min(620px, 46vw);
}

.kind {
  margin-top: 22px;
  color: var(--fg-2);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.product .kind { color: var(--accent); font-weight: 560; }

.meta { margin-top: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }

.intro .visit { margin-top: 30px; }

.umbrella { margin-top: 18px; color: var(--fg-2); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }

/* Flow7's companies in a row below the strand that splits toward them. */
.parent .intro { top: 13svh; max-width: 940px; }

.family {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 25svh;
  padding: 0;
  list-style: none;
}

.family li { display: grid; justify-items: center; gap: 6px; }

.family a {
  color: var(--accent);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color 200ms ease;
}

.family a:hover { text-decoration-color: currentColor; }

.family span { max-width: 15em; color: var(--fg-2); font-size: 0.92rem; line-height: 1.4; }

/* Compositions: where the words sit against each formation. Beside it on the right: */
.c-right .intro { margin-left: auto; }

.c-right .pin::before {
  inset: 0 calc(-1 * var(--gutter)) 0 auto;
  background: linear-gradient(270deg, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) 62%, transparent);
}

/* Centered, with the formation around them: */
.c-center .intro { margin-inline: auto; text-align: center; }

.c-center.product .intro { max-width: 520px; }

.c-center.product .display { font-size: clamp(3rem, 6vw, 6rem); }

/* Below it, but never past the bottom of a short window (held a little longer, since the words
   leave upward through the formation): */
.c-above .intro { top: min(60svh, calc(100svh - 290px)); }

.c-above .pin { height: 104svh; }

/* On glass over a full-bleed scene: */
.c-full .intro {
  top: 30svh;
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(26px, 3vw, 38px) clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 24px 60px rgba(30, 38, 66, 0.12);
  text-align: center;
}

.c-center .pin::before,
.c-above .pin::before,
.c-full .pin::before { display: none; }

/* The work, one statement at a time: a numbered label taken from the statement, its opening
   clause in bold, and an accent rule in the chapter's color. Without the stage the statements
   are a plain list in the chapter's column with the company's site after them. */
.story { max-width: min(620px, 46vw); padding-block: 10svh 50svh; }

.c-right .story { margin-left: auto; }

.c-center .story,
.c-full .story { margin-inline: auto; }

.c-center.product .story { max-width: 470px; }

.story-stage { display: grid; gap: clamp(64px, 16svh, 190px); }

.story-mark { display: none; }

.beats {
  display: grid;
  gap: clamp(64px, 16svh, 190px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: beat;
}

.beats li {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px) clamp(34px, 3.4vw, 44px);
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 44px rgba(30, 38, 66, 0.1);
  color: var(--fg-2);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.6;
  text-wrap: pretty;
  counter-increment: beat;
}

.beats li::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: clamp(18px, 1.8vw, 22px);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 0%, transparent));
}

.kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 640;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
}

.kicker::before {
  content: counter(beat, decimal-leading-zero);
  margin-right: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.beats strong { color: var(--fg); font-weight: 620; }

/* Without the stage, each statement rises into place as it arrives. */
.beats-ready:not(.has-stage) .beats li { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease), transform 900ms var(--ease); }

.beats-ready:not(.has-stage) .beats li.in { opacity: 1; transform: none; }

.shot {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  box-shadow: 10px 10px 26px var(--neu-dark), -10px -10px 26px var(--neu-light);
  transition: transform 400ms var(--ease);
}

.shot:hover { transform: translateY(-3px); }

.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

/* With the stage running, a chapter's statements spread around its formation, which moves to the
   middle of the screen: each on the side where its subject is, all of them open, each joined by a
   line to the part of the formation it is about. The stage script places them; the company's own
   site follows, centered. */
/* (Specific enough to override each composition's column rules, which only apply to the list.) */
.has-stage .chapter.product .story {
  max-width: none;
  margin: 0 calc(-1 * var(--gutter)) 10svh;
  padding: 0;
  overflow-x: clip;
}

.has-stage .story-stage { position: relative; display: block; }

.has-stage .story-mark { display: none; }

.has-stage .beats { position: absolute; inset: 0; display: block; pointer-events: none; }

/* (The stage sets each statement's opacity as it scrolls: in as it arrives, back once read.) */
.has-stage .beats li {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card-w, min(380px, calc(100vw - 40px)));
  transform: translateY(22px);
  transition: transform 1000ms var(--ease);
  pointer-events: auto;
}

.has-stage .story-stage .shot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--shot-w, min(520px, calc(100vw - 40px)));
  transform: translateY(22px);
  transition: transform 1000ms var(--ease);
}

.has-stage .beats li.in,
.has-stage .story-stage .shot.in { transform: none; }

.has-stage .story-stage .shot.in:hover { transform: translateY(-3px); }

/* The lines from each statement to its subject: drawn above the page, below the bar. */
.links {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.no-webgl .links { display: none; }

.leader { opacity: 0; }

.leader path {
  fill: none;
  stroke: var(--link, var(--fg));
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 2 6;
  animation: leader-flow 1.2s linear infinite;
}

.leader .dot { fill: var(--link, var(--fg)); }

.leader .halo {
  fill: none;
  stroke: var(--link, var(--fg));
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: leader-halo 2.4s var(--ease) infinite;
}

@keyframes leader-flow { to { stroke-dashoffset: -16; } }

@keyframes leader-halo {
  from { opacity: 0.7; transform: scale(0.5); }
  to { opacity: 0; transform: scale(1.9); }
}

/* Contact: the four lanes rest across the top of the screen; the words sit below them. */
.contact {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 46svh calc(env(safe-area-inset-bottom, 0px) + 48px);
}

.contact-title { color: var(--muted); font-size: 1rem; font-weight: 560; }

.contact-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 32px;
  margin-top: 22px;
}

.email {
  font-size: clamp(2.1rem, 6.4vw, 6.2rem);
  font-stretch: 104%;
  font-weight: 520;
  letter-spacing: -0.045em;
  line-height: 0.98;
  overflow-wrap: anywhere;
  text-decoration: none;
  background: linear-gradient(90deg, var(--area-0), var(--area-1), var(--area-2), var(--area-3)) 0 100% / 0 2px no-repeat;
  transition: background-size 700ms var(--ease);
}

.email:hover { background-size: 100% 2px; }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.colophon { margin-top: 72px; color: var(--muted); font-size: 0.9rem; }

/* Resting places, set by the stage where everything on screen is composed (each section's top,
   each statement at reading height). The browser lands a scroll on one, bending the scroll's own
   momentum to get there. On wide screens every scroll lands on one; on phones only scrolls that end
   near one, so a tall statement can still be read through. */
.has-stage { scroll-snap-type: y proximity; }

@media (min-width: 1000px) {
  .has-stage { scroll-snap-type: y mandatory; }
}

.snaps { position: absolute; top: 0; left: 0; width: 1px; height: 0; pointer-events: none; }

.snaps i { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; }

.no-webgl .snaps { display: none; }

/* The page for an address that doesn't exist. */
.missing {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 36px;
  padding: var(--gutter);
  text-align: center;
}

/* Phones: the stage takes the top of the screen; glass becomes a plain translucent fill. */
@media (max-width: 999px) {
  .bar-nav a:not(:last-child) { display: none; }
  .intro,
  .story { max-width: 620px; }
  .hero-copy { padding-block: 84px 40px; }
  .intro { top: 50svh; }
  .parent .intro { top: 12svh; }
  .c-full .intro { top: 46svh; }
  .c-right .intro,
  .c-right .story { margin-left: 0; }
  .pin::before { display: none; }
  .intro::before {
    content: "";
    position: absolute;
    inset: -28px calc(-1 * var(--gutter)) -40px;
    z-index: -1;
    background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 88%, transparent) 28px);
  }
  .parent .intro::before,
  .c-full .intro::before { display: none; }
  /* The Flow7 family as one row of names, so the pinned intro fits; each company's own chapter
     carries its description. */
  .family { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 22svh; }
  .family span { display: none; }
  .story-stage,
  .beats { gap: 12svh; }
  .beats li {
    padding: 20px 22px 20px 36px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 14px 34px rgba(30, 38, 66, 0.08);
  }
  .beats li::before { top: 20px; bottom: 20px; left: 18px; }
  .has-stage .story-mark { top: calc(env(safe-area-inset-top, 0px) + 84px); }
  .bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg) 92%, transparent); }
}

/* Short windows: a tighter hero stack so the profile and buttons stay in view. */
@media (min-width: 1000px) and (max-height: 760px) {
  .hero-copy { padding-block: 76px 28px; }
  .lens-slot { margin-block: 12px 18px; }
  .hero .lede { margin-top: 10px; }
  .actions { margin-top: 22px; }
  .display-parent { font-size: clamp(4.2rem, min(13vw, 18svh), 12.5rem); }
  .parent .intro { top: 11svh; }
  .family { margin-top: 22svh; }
  .story-stage,
  .beats { gap: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-stage { scroll-snap-type: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}