/* ==========================================================================
   Avvyun Design System
   Typography: Fraunces (editorial serif) + Geist (interface sans)
   Palette is fixed — see :root — deployed with restraint, not decoration.
   ========================================================================== */

@font-face {
  font-family: "Fraunces Var";
  src: url("/assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-optical-sizing: auto;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Var";
  src: url("/assets/fonts/fraunces-var-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-optical-sizing: auto;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------- */

:root {
  /* brand palette — source of truth, do not extend */
  --c-white: #ffffff;
  --c-ink: #592e21;
  --c-ink-soft: #676767;
  --c-border: #a57c6c;
  --c-tan: #a77e6e;
  --c-cta: #55281a;

  /* tonal depth via opacity of the palette, never new hues */
  --c-ink-a04: rgba(89, 46, 33, 0.04);
  --c-ink-a08: rgba(89, 46, 33, 0.07);
  --c-ink-a14: rgba(89, 46, 33, 0.13);
  --c-ink-a20: rgba(89, 46, 33, 0.2);
  --c-ink-a45: rgba(89, 46, 33, 0.45);
  --c-border-a35: rgba(165, 124, 108, 0.35);
  --c-border-a60: rgba(165, 124, 108, 0.6);
  --c-tan-a08: rgba(167, 126, 110, 0.08);
  --c-tan-a14: rgba(167, 126, 110, 0.14);
  --c-tan-a18: rgba(167, 126, 110, 0.18);
  --c-cream: #faf6f3;

  --font-serif: "Fraunces Var", "Merriweather", Georgia, serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  --container-max: 1280px;
  --gutter: clamp(1.5rem, 4vw, 4rem);
  --nav-h: 88px;

  --ease-out: cubic-bezier(0.16, 0.8, 0.24, 1);
  --ease-spatial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
  --dur-fast: 180ms;
  --dur-base: 600ms;
  --dur-slow: 900ms;

  /* ---- Liquid Glass material -------------------------------------------
     Same recipe as the reference implementation (nuvvya.vc), inverted for a
     light canvas: on a near-black surface a bright white sheen and a black
     drop shadow read as "light hitting glass"; on cream, the physics flip —
     the fill is warm-white translucency, the shadow is soft and ink-toned
     rather than black, and the specular sheen is a brighter patch of the
     same white rather than a contrasting highlight. Built entirely from
     --c-white and --c-ink/--c-border, never a new hue. Corner radii stay
     tighter than the reference (4/8/12px vs 14/22/32) except the nav pill,
     to sit with Avvyun's own sharp-edged editorial system rather than
     import Nuvvya's rounder one. */
  --glass-fill: linear-gradient(165deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.46) 55%, rgba(255, 255, 255, 0.6) 100%);
  --glass-fill-soft: linear-gradient(165deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.42) 100%);
  --glass-border: rgba(89, 46, 33, 0.1);
  --glass-border-top: rgba(255, 255, 255, 0.9);
  --glass-blur: blur(20px) saturate(160%);
  --glass-blur-soft: blur(13px) saturate(140%);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 12px 32px rgba(89, 46, 33, 0.12), 0 0 0 1px rgba(165, 124, 108, 0.1);
  --glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 16px 40px rgba(89, 46, 33, 0.16), 0 0 0 1px rgba(165, 124, 108, 0.2), 0 0 22px rgba(167, 126, 110, 0.16);
  --glass-specular: radial-gradient(circle 220px at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(255, 255, 255, 0.6), transparent 70%);

  --radius-glass-sm: 4px;
  --radius-glass: 8px;
  --radius-glass-lg: 12px;
  --radius-pill: 999px;
}

/* ---- Reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Touch devices get no default tap-highlight rectangle; instead every
   tappable element dips briefly on :active — the same restrained,
   editorial feedback its :hover state already gives on desktop. */
@media (hover: none) {
  .av-nav__link:active { color: var(--c-tan); }
  .av-nav__brand:active { opacity: 0.72; }
  .av-mobile-menu__list a:active { color: var(--c-tan); opacity: 0.72; }
  .av-eyebrow-link:active { color: var(--c-tan); }
  .av-eyebrow-link:active::after { background: var(--c-ink); }
  .av-btn:active { opacity: 0.82; }
  .av-nav__cta:active { background: #6a3220; opacity: 0.9; }
  .av-nav__menu-btn:active { opacity: 0.6; }
}

body.avvyun {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.avvyun img { max-width: 100%; display: block; }
.avvyun a { text-decoration: none; }
.avvyun :where(a) { color: inherit; }
.avvyun ul { margin: 0; padding: 0; list-style: none; }
.avvyun h1, .avvyun h2, .avvyun h3, .avvyun p { margin: 0; }
.avvyun button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---- Layout primitives ------------------------------------------------ */

.av-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.av-section {
  padding-block: var(--space-10);
}

@media (max-width: 720px) {
  .av-section { padding-block: var(--space-8); }
}

.av-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* ---- Type system ------------------------------------------------------ */

.av-kicker {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-tan);
}

.av-display {
  font-family: var(--font-serif);
  font-weight: 340;
  font-size: clamp(2.75rem, 2.05rem + 3.1vw, 6.25rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}

.av-display em {
  font-style: italic;
  font-weight: 420;
}

.av-h2 {
  font-family: var(--font-serif);
  font-weight: 460;
  font-size: clamp(1.85rem, 1.5rem + 1.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.av-h3 {
  font-family: var(--font-serif);
  font-weight: 480;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem);
  line-height: 1.24;
  color: var(--c-ink);
}

.av-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.75;
  color: var(--c-ink-soft);
}

.av-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--c-ink-soft);
}

.av-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--c-ink-soft);
}

.av-numeral {
  font-family: var(--font-serif);
  font-weight: 340;
  font-variant-numeric: lining-nums proportional-nums;
  letter-spacing: -0.02em;
  color: var(--c-ink-a14);
  transition: color var(--dur-slow) var(--ease-out);
}

.av-eyebrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--c-ink);
  padding-bottom: 2px;
}
.av-eyebrow-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-border-a60);
  transform-origin: left;
  transition: background-color 320ms ease, transform 320ms var(--ease-spatial);
}
.av-eyebrow-link:hover::after { background: var(--c-ink); transform: scaleY(2); }

/* ---- Buttons ------------------------------------------------------ */

.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 0.9em 1.7em;
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.av-btn:hover { transform: translateY(-1px); }
.av-btn:active { transform: translateY(0); }

.av-btn--primary {
  background: var(--c-cta);
  color: var(--c-white);
}
.av-btn--primary:hover { background: #6a3220; }

.av-btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-border-a60);
}
.av-btn--ghost:hover { border-color: var(--c-ink); }

/* ---- Dividers ------------------------------------------------------ */

.av-hr {
  border: 0;
  border-top: 1px solid var(--c-border-a35);
}

.av-vr {
  border-left: 1px solid var(--c-border-a35);
}

/* ---- Nav ------------------------------------------------------------- */

/* The nav is a floating pane of glass detached from the viewport edge —
   .av-nav is a transparent positioning wrapper reserving the same overall
   height as before (so every page's `padding-top: var(--nav-h)` offset
   still lands correctly); .av-nav__row is the actual glass surface. */
.av-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  transition: height var(--dur-base) var(--ease-out);
}

.av-nav.is-scrolled {
  height: calc(var(--nav-h) - 20px);
}

.av-nav__row {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  padding-block: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: var(--radius-pill);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  box-shadow: var(--glass-shadow);
  position: relative;
  --pointer-x: 50%;
  --pointer-y: 0%;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), padding-block var(--dur-base) var(--ease-out);
}
.av-nav__row::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-specular);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
  pointer-events: none;
}
.av-nav__row:hover::after,
.av-nav__row:focus-within::after { opacity: 1; }

.av-nav.is-scrolled .av-nav__row {
  padding-block: calc(var(--space-3) - 3px);
  box-shadow: var(--glass-shadow-hover);
  border-color: rgba(89, 46, 33, 0.16);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .av-nav__row { background: rgba(255, 255, 255, 0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .av-nav__row, .av-nav__row::after { transition-duration: 1ms; }
}

.av-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.55em;
  transform: scale(1);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-spatial), opacity var(--dur-base) var(--ease-out);
}
.av-nav.is-scrolled .av-nav__brand { transform: scale(0.92); }

.av-nav__brand-mark {
  width: 22px;
  height: 22px;
  object-fit: cover;
  object-position: 42% 44%;
  border-radius: 2px;
  transform: scale(1.15);
}
.av-nav__brand-mark-clip { width: 22px; height: 22px; overflow: hidden; border-radius: 2px; flex: none; background: var(--c-white); border: 1px solid var(--c-border-a35); }

.av-nav__word {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.av-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.av-nav__link {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  padding-bottom: 3px;
  transition: color var(--dur-fast) ease;
}
.av-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--c-border);
  transition: right 320ms var(--ease-spatial);
}
.av-nav__link:hover, .av-nav__link.is-active { color: var(--c-ink); }
.av-nav__link:hover::after, .av-nav__link.is-active::after { right: 0; }

.av-nav__actions { display: flex; align-items: center; gap: var(--space-5); }

.av-nav__cta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--c-white);
  background: var(--c-cta);
  padding: 0.65em 1.35em;
  border-radius: 2px;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.av-nav__cta:hover { background: #6a3220; transform: translateY(-1px); }

.av-nav__menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}
.av-nav__menu-btn span { width: 20px; height: 1px; background: var(--c-ink); transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease; }

@media (max-width: 880px) {
  .av-nav__links { display: none; }
  .av-nav__menu-btn { display: flex; }
}

/* mobile menu overlay */
.av-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), var(--glass-fill-soft);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  padding: var(--gutter);
  padding-top: calc(var(--nav-h) + var(--space-4));
  transform: translateY(-100%);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.av-mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.av-mobile-menu__list { display: flex; flex-direction: column; gap: clamp(var(--space-4), 4vh, var(--space-6)); }
.av-mobile-menu__list a {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 420;
  font-size: clamp(1.65rem, 6vw + 0.5rem, 2.5rem);
  color: var(--c-ink);
  transition: color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.av-mobile-menu__foot { margin-top: clamp(var(--space-6), 8vh, var(--space-9)); display: flex; flex-direction: column; gap: var(--space-4); }

/* ---- Hero: scroll-driven cinematic scene -------------------------------
   .av-hero-scene is a tall track (several viewport heights); .av-hero is
   pinned via position:sticky while the track scrolls underneath it. A
   scroll listener reads how far the visitor has scrolled through the
   track (0-1) and drives every property below directly as a function of
   that progress — nothing is timed, nothing auto-plays. Scroll back up
   and the whole sequence reverses exactly. This is sticky positioning,
   not scroll-jacking: native scroll is never intercepted. ------------- */

.av-hero-scene {
  position: relative;
  height: 760vh;
}
.av-hero-scene.is-static { height: auto; }

.av-hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);
  background: radial-gradient(ellipse 76% 52% at 50% 8%, var(--c-tan-a18), transparent 62%), var(--c-white);
}
.av-hero-scene.is-static .av-hero {
  position: relative;
  top: auto;
  height: auto;
  min-height: 100svh;
}

.av-hero__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  will-change: transform, opacity;
}

/* Composition A — "Avvyun Ventures" as a typeset masthead statement.
   Reserved for the scroll scene only; the canonical logo artwork is
   used for metadata/share surfaces, never the hero itself. */
.av-hero__mast {
  margin-bottom: var(--space-9);
}
.av-hero__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3rem, 1.6rem + 6.2vw, 6rem);
  letter-spacing: 0.005em;
  color: var(--c-ink);
}

/* Shared building blocks for both compositions — a "V" (the structural
   anchor) and a "fragment" (the surrounding letters that dissolve away
   from / gather back around those anchors). Pre-JS default state shows
   composition B resolved, so the page is meaningful without motion. */
.av-hero__v, .av-hero__frag {
  display: inline-block;
}
.av-hero__v { color: inherit; will-change: opacity, color, transform; transform-origin: 50% 65%; }
.av-hero__frag { will-change: opacity, filter, transform; }
[data-v-a], [data-frag="left"], [data-frag="mid"], [data-frag="right"] { opacity: 0; }

/* Trajectories — the V itself becomes a small paper-plane form that
   flies from its source position (in "Avvyun Ventures") to its
   destination (in Vision/Velocity/Value), leaving a delicate dashed
   trail behind it. Not a decorative line with a marker on it: the
   plane IS the moving object, the dashed path is its trail, and the
   V is its origin and destination. JS samples each journey's curve
   into points once at build time; render() picks the current point by
   journeyDraw, derives the plane's rotation from the local tangent
   (nose follows direction of travel), and rebuilds the trail as the
   polyline already traversed. Every path is authored so its tangent
   is near-vertical at both ends — the plane departs facing down,
   arrives facing down — because that is the V's own implied
   direction, and it's what makes the fold-into-plane and unfold-back-
   into-V read as one continuous object, not two effects timed
   together. */
.av-hero__trajectories {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.av-hero__trajectories path[data-layer="trail"] {
  fill: none;
  stroke: var(--c-tan);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1.5 5.5;
  opacity: 0;
}
.av-hero__trajectories g[data-layer="plane"] {
  opacity: 0;
  transform-box: fill-box;
}
.av-plane__body {
  fill: var(--c-tan-a18);
  stroke: var(--c-ink);
  stroke-width: 2.1;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.av-plane__crease,
.av-plane__fold {
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 1.6;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.av-plane__fold { opacity: 0.75; }

@media (max-width: 720px) {
  .av-hero__name { font-size: 2.6rem; }
}

.av-hero__headline { max-width: 1100px; }
.av-hero__word { display: inline-block; }

p.av-hero__sub {
  margin-top: var(--space-9);
  max-width: 440px;
  margin-inline: auto;
  opacity: 1;
}

.av-hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  opacity: 1;
}
.av-hero__scroll-line { width: 1px; height: 40px; background: var(--c-border); position: relative; overflow: hidden; }
.av-hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -100%; left: 0; right: 0; height: 100%;
  background: var(--c-ink);
  animation: av-scroll-draw 2.4s var(--ease-out) infinite;
}
@keyframes av-scroll-draw {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .av-hero__scroll-line::after { animation: none; top: 0; }
}

/* ---- Reveal-on-scroll utility ------------------------------------------ */

.av-reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity var(--dur-slow) var(--ease-spatial), transform var(--dur-slow) var(--ease-spatial);
}
.av-reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.av-reveal-group > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* A slower, heavier variant — letters/lines arrive out of a soft blur
   rather than just fading up. Used where a moment should feel graver
   and more deliberate than the standard reveal (e.g. "Not for everyone"). */
.av-reveal--blur {
  filter: blur(14px);
  transition: opacity 1100ms var(--ease-spatial), transform 1100ms var(--ease-spatial), filter 1100ms var(--ease-spatial);
}
.av-reveal--blur.is-visible { filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .av-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .av-reveal--blur { filter: none !important; }
  .av-sequence__item, .av-sequence__rail-item, .av-thread__fill { transition: none !important; }
}

/* ---- Positioning statement ---------------------------------------------- */

.av-position {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
}
.av-position__statement { grid-column: 1 / 9; }
.av-position__meta { grid-column: 9 / 13; display: flex; flex-direction: column; gap: var(--space-4); }

@media (max-width: 880px) {
  .av-position__statement, .av-position__meta { grid-column: 1 / -1; }
  .av-position__meta { margin-top: var(--space-6); }
}

/* ---- Sequence (Modules / Stages sticky pattern) ------------------------- */

.av-sequence__head { max-width: 640px; margin-bottom: var(--space-9); }
.av-sequence__head .av-h2 { margin-top: var(--space-3); }

.av-sequence {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--gutter);
}

.av-sequence__rail { position: relative; }
.av-sequence__rail-inner { position: sticky; top: calc(var(--nav-h) + var(--space-8)); display: flex; flex-direction: column; gap: var(--space-5); }

.av-sequence__rail-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  cursor: default;
  transition: opacity var(--dur-slow) var(--ease-spatial), transform var(--dur-slow) var(--ease-spatial);
}
.av-sequence__rail-item.is-active { transform: translateX(5px); }
.av-sequence__rail-num {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--c-ink-a20);
  transition: color var(--dur-base) var(--ease-out);
  min-width: 1.6em;
}
.av-sequence__rail-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--c-ink-a45);
  transition: color var(--dur-base) var(--ease-out);
}
.av-sequence__rail-item.is-active .av-sequence__rail-num,
.av-sequence__rail-item.is-active .av-sequence__rail-label { color: var(--c-ink); }

.av-sequence__items { display: flex; flex-direction: column; }

.av-sequence__item {
  padding-block: var(--space-9);
  border-top: 1px solid var(--c-border-a35);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gutter);
  align-items: start;
  transition: opacity var(--dur-slow) var(--ease-spatial), transform var(--dur-slow) var(--ease-spatial), filter var(--dur-slow) var(--ease-spatial);
  will-change: opacity, transform, filter;
}
.av-sequence__item:first-child { border-top: none; }

.av-sequence__item-numeral {
  font-size: clamp(3.5rem, 3rem + 3vw, 6rem);
  line-height: 1;
  transition: color var(--dur-slow) var(--ease-spatial), transform var(--dur-slow) var(--ease-spatial);
}
.av-sequence__item.is-active .av-sequence__item-numeral { color: var(--c-ink-a20); transform: scale(1.12) translateX(5px); }

.av-sequence__item-body { max-width: 620px; }
h3.av-sequence__item-title { margin-bottom: var(--space-7); }
.av-sequence__item-text p + p { margin-top: var(--space-5); }

@media (max-width: 880px) {
  .av-sequence { grid-template-columns: 1fr; }
  .av-sequence__rail { display: none; }
  .av-sequence__item { grid-template-columns: 1fr; }
  .av-sequence__item-numeral { font-size: 3rem; }
}

/* Stages variant: a progress thread in the rail (not a floating numeral) —
   each stage carries its own numeral inline with its title instead. */

.av-thread {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-8));
  height: min(420px, 52vh);
}
.av-thread__track {
  position: relative;
  width: 1px;
  height: 100%;
  background: var(--c-border-a35);
}
.av-thread__fill {
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 0%;
  background: var(--c-ink);
  transition: height var(--dur-slow) var(--ease-spatial);
}
.av-thread__marker {
  position: absolute;
  top: 0;
  left: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-cta);
  transform: translateY(-50%);
  transition: top var(--dur-slow) var(--ease-spatial);
  box-shadow: 0 0 0 4px var(--c-white);
}
.av-thread__dots {
  position: absolute;
  top: 0;
  left: 16px;
  height: 100%;
  width: max-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.av-thread__dot {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--c-ink-a20);
  transition: color var(--dur-slow) var(--ease-spatial);
}
.av-thread__dot.is-active { color: var(--c-ink); }
.av-thread__dot.is-passed { color: var(--c-ink-a45); }

.av-sequence__item.av-stage-item { grid-template-columns: 1fr; }
.av-stage-item__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.av-stage-item__numeral {
  font-size: clamp(3.75rem, 3rem + 4vw, 7rem);
  line-height: 1;
  transition: color var(--dur-slow) var(--ease-spatial), transform var(--dur-slow) var(--ease-spatial);
}
.av-stage-item.is-active .av-stage-item__numeral { color: var(--c-ink-a20); transform: scale(1.08) translateX(6px); }
.av-stage-item__label { min-width: 0; }
.av-stage-item__head { transition: transform var(--dur-slow) var(--ease-spatial); }
.av-stage-item.is-active .av-stage-item__head { transform: translateX(4px); }

@media (max-width: 880px) {
  .av-stage-item__head { gap: var(--space-4); }
}

/* ---- Brand moment (Not for everyone) ------------------------------------ */

.av-moment {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(to bottom, var(--c-white), rgba(255, 255, 255, 0) 180px),
    linear-gradient(to top, var(--c-white), rgba(255, 255, 255, 0) 180px),
    var(--c-tan);
  color: var(--c-cream);
  text-align: center;
  /* Padding must clear the 180px fade zones above — otherwise the first
     and last lines sit inside the white-to-tan gradient itself rather
     than on solid tan, reading as if they're balanced on the seam. */
  padding-block: max(var(--space-11), 180px + var(--space-6));
}
/* A soft light drifting very slowly as the section scrolls through view —
   driven by JS (scroll progress through the section, not a timer), kept
   subtle enough to feel like a change in the room rather than an effect. */
.av-moment__glow {
  position: absolute;
  inset: -15% -20%;
  background: radial-gradient(ellipse 55% 42% at 50% 45%, rgba(255, 255, 255, 0.16), transparent 68%);
  pointer-events: none;
  will-change: transform;
}
.av-moment .av-container { position: relative; z-index: 1; }
.av-moment .av-kicker { color: rgba(250, 246, 243, 0.7); }
.av-moment .av-display { color: var(--c-cream); }
.av-moment__lines { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.av-moment__lines span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  color: rgba(250, 246, 243, 0.92);
}
p.av-moment__foot {
  margin-top: var(--space-8);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: rgba(250, 246, 243, 0.7);
}

/* ---- Earliest-stage / CTA statement -------------------------------------- */

.av-cta-block { text-align: center; max-width: 880px; margin-inline: auto; }
.av-cta-block .av-btn { margin-top: var(--space-8); }

/* ---- Three-path columns -------------------------------------------------- */

.av-built {
  max-width: 720px;
  margin-bottom: var(--space-9);
}
.av-built .av-h2 { margin-top: var(--space-3); margin-bottom: var(--space-5); }

.av-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.av-path {
  padding: var(--space-7) var(--space-6);
  border-top: 1px solid var(--c-border-a35);
  border-left: 1px solid var(--c-border-a35);
  display: flex;
  flex-direction: column;
}
.av-path:first-child { border-left: none; }
h3.av-path__title { margin-bottom: var(--space-6); }
p.av-path__text { margin-bottom: var(--space-6); }
.av-path .av-eyebrow-link { margin-top: auto; align-self: flex-start; }

@media (max-width: 880px) {
  .av-paths { grid-template-columns: 1fr; }
  .av-path { border-left: none; }
  .av-path:first-child { border-top: none; }
}

/* ---- Footer --------------------------------------------------------------- */

.av-footer {
  border-top: 1px solid var(--c-border-a35);
  padding-block: var(--space-9) var(--space-7);
}

.av-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--gutter);
  padding-bottom: var(--space-9);
}

.av-footer__brand img { width: 240px; height: auto; }

p.av-footer__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-tan);
  margin-bottom: var(--space-7);
}
.av-footer__links { display: flex; flex-direction: column; gap: var(--space-4); }
.av-footer__links a {
  position: relative;
  display: inline-block;
  width: fit-content;
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
  transition: color var(--dur-fast) ease;
}
.av-footer__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1px;
  background: var(--c-border);
  transition: right 320ms var(--ease-spatial);
}
.av-footer__links a:hover { color: var(--c-ink); }
.av-footer__links a:hover::after { right: 0; }

.av-footer__bottom {
  padding-top: var(--space-7);
  border-top: 1px solid var(--c-border-a35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.av-footer__legal { display: flex; gap: var(--space-6); }
.av-footer__legal a { font-size: 0.8125rem; color: var(--c-ink-soft); }
.av-footer__note { font-size: 0.8125rem; color: var(--c-ink-soft); }
.av-footer__icons { display: flex; gap: var(--space-3); }
.av-footer__icons a { color: var(--c-ink-soft); transition: color var(--dur-fast) ease; }
.av-footer__icons a:hover { color: var(--c-ink); }
.av-footer__icons svg { width: 28px; height: 28px; }

@media (max-width: 720px) {
  .av-footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .av-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Internal-page components
   Same design language as the homepage — palette, type scale, spacing,
   reveal/sequence choreography — composed differently per page. None of
   these introduce new tokens; they only arrange the existing ones.
   ========================================================================== */

/* ---- Page header — every internal page's opening composition. A quiet
   reveal, not the homepage's scroll-driven scene: kicker + statement,
   optionally paired with a short lede or a two-column meta (reusing
   .av-position for the split variant). ------------------------------- */

.av-page-header {
  padding-top: calc(var(--nav-h) + var(--space-9));
  padding-bottom: var(--space-7);
}
.av-page-header__kicker { margin-bottom: var(--space-4); }
.av-page-header__title { max-width: 900px; }
p.av-page-header__lede { margin-top: var(--space-6); max-width: 620px; }

@media (max-width: 720px) {
  .av-page-header { padding-top: calc(var(--nav-h) + var(--space-7)); }
}

/* ---- Prose — legal / long-form text pages. Restrained measure, generous
   vertical rhythm; list markers use the brand tan rather than default
   discs (the reset strips list-style entirely). ----------------------- */

.av-prose { max-width: 700px; }
h2.av-prose__h2 { margin-top: var(--space-9); margin-bottom: var(--space-4); }
.av-prose > h2.av-prose__h2:first-child { margin-top: 0; }
h3.av-prose__h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
p.av-prose__p { margin-top: var(--space-4); }
.av-prose__p:first-child { margin-top: 0; }

ul.av-prose__list {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.av-prose__list li {
  position: relative;
  padding-left: 1.4em;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-ink-soft);
}
.av-prose__list li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--c-tan);
}

hr.av-prose__hr {
  margin-block: var(--space-9);
  border: 0;
  border-top: 1px solid var(--c-border-a35);
}

/* ---- Form page — a shared composition for every Tally-embed page: an
   editorial heading, a short explanation, then the form quietly framed
   rather than a raw iframe dropped on the page. The embed itself is
   untouched — only the chrome around it changes. ---------------------- */

.av-form-page__intro { max-width: 620px; }
p.av-form-page__note { margin-top: var(--space-5); }

.av-form-frame {
  margin-top: var(--space-8);
  border: 1px solid var(--c-border-a35);
  border-radius: 3px;
  overflow: hidden;
  background: var(--c-cream);
}
.av-form-frame iframe {
  display: block;
  width: 100%;
  border: 0;
  background: var(--c-cream);
}

p.av-form-page__foot { margin-top: var(--space-6); }

/* ---- Index — the Ecosystem directory as a typographic table rather than
   a bordered HTML grid. Live entries read in full ink; in-development
   entries recede to soft ink with a small status label. ---------------- */

.av-index { display: flex; flex-direction: column; }
.av-index__row {
  padding-block: var(--space-6);
  border-top: 1px solid var(--c-border-a35);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--gutter);
  align-items: baseline;
}
.av-index__row:first-child { border-top: none; }

.av-index__host {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-serif);
  font-weight: 460;
  font-size: 1.2rem;
  color: var(--c-ink);
  width: fit-content;
}
a.av-index__host { padding-bottom: 2px; }
a.av-index__host::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--c-border);
  transition: right 320ms var(--ease-spatial);
}
a.av-index__host:hover::after { right: 0; }

.av-index__status {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-tan);
}

.av-index__row--soon .av-index__host { color: var(--c-ink-soft); font-style: italic; }

p.av-index__desc { font-size: 1rem; }

@media (max-width: 720px) {
  .av-index__row { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ---- Platform list — Community page. Large typographic entries in a
   vertical sequence; a quiet lateral shift and tan tint on hover, same
   restrained hover language as .av-eyebrow-link. ----------------------- */

.av-platform-list { display: flex; flex-direction: column; }
.av-platform {
  padding-block: var(--space-8);
  border-top: 1px solid var(--c-border-a35);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.av-platform:first-child { border-top: none; }

a.av-platform__name {
  transition: color var(--dur-fast) ease, transform var(--dur-base) var(--ease-spatial);
  width: fit-content;
}
.av-platform:hover a.av-platform__name { color: var(--c-tan); transform: translateX(8px); }

p.av-platform__caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 380;
  color: var(--c-ink-soft);
}

.av-platform__meta { display: flex; align-items: center; gap: var(--space-4); }

/* ==========================================================================
   Page-specific cinematic scenes
   Bespoke, scroll-progress-driven compositions in the spirit of the
   homepage hero — a pinned stage, progress computed from scroll position,
   state derived as a pure function of that progress. Each is scoped to its
   own data-attribute and only activates where that markup exists, so
   nothing here touches the homepage. Homepage hero/sequence/moment code
   above is untouched.
   ========================================================================== */

/* ---- About: "The Journey" — a pinned scene where a hairline route draws
   itself stop-to-stop (Milan → Boston → Los Angeles → Mumbai → Avvyun) and
   each place sharpens into focus as the line reaches it. A route being
   traced, not a sentence fading in. ------------------------------------ */

.av-journey-scene { position: relative; height: 320vh; }
.av-journey-scene.is-static { height: auto; }

.av-journey {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.av-journey-scene.is-static .av-journey {
  position: relative; top: auto; height: auto; min-height: 0;
}

.av-journey__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.av-journey__stop {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.15rem + 2.1vw, 3.1rem);
  color: var(--c-ink);
  opacity: 0.3;
  filter: blur(4px);
  transform: translateY(6px);
  white-space: nowrap;
  will-change: opacity, filter, transform;
}
.av-journey__stop--dest { font-style: italic; }

.av-journey__line {
  position: relative;
  height: 1px;
  width: clamp(28px, 6vw, 96px);
  background: var(--c-border-a35);
  margin-inline: var(--space-4);
  overflow: hidden;
  flex: none;
}
.av-journey__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  transform: scaleX(var(--lp, 0));
  transform-origin: left;
  will-change: transform;
}

p.av-journey__text {
  margin-top: var(--space-8);
  max-width: 640px;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  will-change: opacity, filter, transform;
}

/* Below 640px the row stacks vertically (5 stops + 4 connectors) and,
   together with the summary paragraph reserved below it — both count
   toward .av-journey's centered flex column even before the paragraph
   is visible — comfortably exceeds one screen's height. Centered on a
   short mobile viewport, that pushed the first stop up underneath the
   fixed nav bar (which sits on top of, not above, the pinned scene) and
   its connector line started right at the nav's lower edge, reading as
   cut off. Anchoring to the top with room reserved for the nav, and
   trimming sizes enough to fit the tallest stack in the shortest common
   viewport, keeps every stop and the full paragraph on-screen. */
@media (max-width: 640px) {
  .av-journey { justify-content: flex-start; padding-top: calc(var(--nav-h) + var(--space-4)); padding-bottom: var(--space-4); }
  .av-journey__row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .av-journey__stop { font-size: 1.45rem; }
  .av-journey__line { width: 1px; height: 18px; margin-inline: 0; margin-left: 1px; }
  .av-journey__line::after { transform: scaleY(var(--lp, 0)); transform-origin: top; }
  p.av-journey__text { margin-top: var(--space-5); font-size: 0.95rem; line-height: 1.55; }
}

@media (max-width: 640px) and (max-height: 700px) {
  .av-journey__row { gap: var(--space-2); }
  .av-journey__stop { font-size: 1.3rem; }
  .av-journey__line { height: 14px; }
  p.av-journey__text { margin-top: var(--space-4); font-size: 0.875rem; line-height: 1.4; }
}

/* ---- Founders: "Descending criteria" — a pinned stage where each of the
   six criteria briefly dominates before yielding to the next. One thing
   visible at a time; everything else waits. A declarative rhythm, not a
   static list. -------------------------------------------------------- */

.av-criteria-scene { position: relative; height: 480vh; }
.av-criteria-scene.is-static { height: auto; }

.av-criteria {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.av-criteria-scene.is-static .av-criteria {
  position: relative; top: auto; height: auto; min-height: 0; padding-block: var(--space-9);
}

.av-criteria__stage { position: relative; width: 100%; min-height: 220px; }
.av-criteria-scene.is-static .av-criteria__stage { min-height: 0; }

.av-criteria__item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  will-change: opacity, transform, filter;
}
.av-criteria-scene.is-static .av-criteria__item {
  position: relative;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  margin-bottom: var(--space-9);
}
.av-criteria-scene.is-static .av-criteria__item:last-child { margin-bottom: 0; }

.av-criteria__num {
  font-family: var(--font-serif);
  font-weight: 340;
  font-size: clamp(4rem, 2.6rem + 6vw, 9rem);
  line-height: 1;
  color: var(--c-ink-a20);
}
.av-criteria__label {
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-weight: 440;
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  line-height: 1.14;
  color: var(--c-ink);
  max-width: 780px;
}

.av-criteria__counter {
  position: absolute;
  left: 0;
  bottom: var(--space-8);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
}
.av-criteria-scene.is-static .av-criteria__counter { display: none; }

@media (max-width: 720px) {
  .av-criteria__counter { bottom: var(--space-6); }
}

/* ---- Ventures: "Institutional widening" — items stay in normal flow (no
   pin); each offer's hairline extends as it crosses the focus line, and
   the hairline's own ceiling widens down the list (item 6's line is the
   full measure, item 1's is a fraction) — access visibly expanding as you
   descend. Closes on a full-width rule drawing in before the CTA. -------- */

.av-offers { display: flex; flex-direction: column; margin-top: var(--space-6); max-width: 800px; }
.av-offer { padding-block: var(--space-6); }
.av-offer:first-child { padding-top: 0; }

.av-offer__rule {
  display: block;
  height: 1px;
  background: var(--c-ink);
  transform: scaleX(0);
  transform-origin: left;
  margin-bottom: var(--space-5);
  will-change: transform;
}

.av-offer__row {
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
  opacity: 0.3;
  filter: blur(2px);
  transform: translateX(-10px);
  will-change: opacity, filter, transform;
}

.av-close-rule {
  height: 1px;
  background: var(--c-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-spatial);
  margin-bottom: var(--space-8);
}
.av-close-rule.is-visible { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .av-close-rule { transition: none !important; transform: scaleX(1) !important; }
}

/* ---- Ecosystem: "System reveal" — a spine draws continuously down the
   live-platform directory as you scroll through it, while each row's
   branch connector and text light up individually via the same
   distance-from-focus-line approach used elsewhere, but expressed as a
   trunk-and-branches network assembling itself rather than a widening
   measure (Ventures) or a route (About). In-development entries keep the
   plain, unconnected treatment already in place — deliberately recessed,
   not wired into the live spine. ---------------------------------------- */

.av-network { position: relative; padding-left: 28px; }

.av-network__spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--c-border-a35);
  overflow: hidden;
}
.av-network__spine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  transform: scaleY(var(--fill, 0));
  transform-origin: top;
  will-change: transform;
}

.av-network__row { position: relative; }

.av-network__branch {
  position: absolute;
  left: -28px;
  top: 1.6rem;
  width: 20px;
  height: 1px;
  background: transparent;
  overflow: hidden;
}
.av-network__branch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
  will-change: transform;
}

.av-network__row .av-index__host,
.av-network__row .av-index__desc {
  opacity: 0.3;
  filter: blur(2px);
  transform: translateX(-8px);
  will-change: opacity, filter, transform;
}
.av-network__row .av-index__host { display: inline-flex; }

@media (max-width: 720px) {
  .av-network { padding-left: 20px; }
  .av-network__branch { left: -20px; width: 14px; }
}

/* ---- Community: "Emergence" — the warmest of the five. Each platform
   block surfaces with a gentle lateral drift and settles; the caption
   arrives a beat after the name, a conversational rhythm rather than a
   structural reveal. The entrance lives on .av-platform itself (not the
   name link) so the link's existing hover transform is never fought by
   an inline style. ------------------------------------------------------- */

.av-platform {
  opacity: 0;
  filter: blur(3px);
  will-change: opacity, filter, transform;
}
.av-platform__caption {
  opacity: 0;
  will-change: opacity, transform;
}