/* [project]/workspace/src/styles/globals.css [client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
      --slack-beam-angle: 0deg;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: var(--font-app-sans, ui-sans-serif, system-ui, sans-serif);
    --font-mono: var(--font-app-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    --color-zinc-50: #fafafa;
    --spacing: .25rem;
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-bold: 700;
    --leading-relaxed: 1.625;
    --radius-sm: calc(var(--radius) * .6);
    --radius-md: calc(var(--radius) * .8);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-primary: var(--primary);
    --color-muted-foreground: var(--muted-foreground);
    --color-border: var(--border);
    --color-ring: var(--ring);
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-zinc-50: lab(98.26% 0 0);
    }
  }
}

@layer base {
  * {
    border-color: var(--color-border);
    outline-color: var(--color-ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  html {
    font-family: var(--font-app-sans, ui-sans-serif, system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components;

@layer utilities {
  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .h-full {
    height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .max-w-\[320px\] {
    max-width: 320px;
  }

  .flex-1 {
    flex: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-in {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .animate-out {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .resize {
    resize: both;
  }

  .flex-col {
    flex-direction: column;
  }

  .items-center {
    align-items: center;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .rounded {
    border-radius: .25rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .bg-background {
    background-color: var(--color-background);
  }

  .bg-zinc-50 {
    background-color: var(--color-zinc-50);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .text-center {
    text-align: center;
  }

  .font-heading {
    font-family: var(--font-app-heading, var(--font-app-sans, ui-sans-serif, system-ui, sans-serif));
  }

  .font-mono {
    font-family: var(--font-app-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  }

  .font-sans {
    font-family: var(--font-app-sans, ui-sans-serif, system-ui, sans-serif);
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .text-foreground {
    color: var(--color-foreground);
  }

  .text-muted-foreground {
    color: var(--color-muted-foreground);
  }

  .lowercase {
    text-transform: lowercase;
  }

  .italic {
    font-style: italic;
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .fade-in {
    --tw-enter-opacity: 0;
  }

  .fade-out {
    --tw-exit-opacity: 0;
  }

  .paused {
    animation-play-state: paused;
  }

  .running {
    animation-play-state: running;
  }

  .slide-in-from-bottom-4 {
    --tw-enter-translate-y: calc(4*var(--spacing));
  }

  .zoom-in {
    --tw-enter-scale: 0;
  }

  .zoom-out {
    --tw-exit-scale: 0;
  }

  @media (hover: hover) {
    .hover\:text-primary:hover {
      color: var(--color-primary);
    }
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

:root {
  --background: #fff;
  --foreground: #0a0a0a;
  --card: #fff;
  --card-foreground: #0a0a0a;
  --popover: #fff;
  --popover-foreground: #0a0a0a;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #e40014;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --chart-1: #d4d4d4;
  --chart-2: #737373;
  --chart-3: #525252;
  --chart-4: #404040;
  --chart-5: #262626;
  --radius: .625rem;
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #171717;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #171717;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #a1a1a1;
}

@supports (color: lab(0% 0 0)) {
  :root {
    --background: lab(100% 0 0);
    --foreground: lab(2.75381% 0 0);
    --card: lab(100% 0 0);
    --card-foreground: lab(2.75381% 0 0);
    --popover: lab(100% 0 0);
    --popover-foreground: lab(2.75381% 0 0);
    --primary: lab(7.78201% -.0000149012 0);
    --primary-foreground: lab(98.26% 0 0);
    --secondary: lab(96.52% -.0000298023 .0000119209);
    --secondary-foreground: lab(7.78201% -.0000149012 0);
    --muted: lab(96.52% -.0000298023 .0000119209);
    --muted-foreground: lab(48.496% 0 0);
    --accent: lab(96.52% -.0000298023 .0000119209);
    --accent-foreground: lab(7.78201% -.0000149012 0);
    --destructive: lab(48.4493% 77.4328 61.5452);
    --border: lab(90.952% 0 -.0000119209);
    --input: lab(90.952% 0 -.0000119209);
    --ring: lab(66.128% -.0000298023 .0000119209);
    --chart-1: lab(84.92% 0 -.0000119209);
    --chart-2: lab(48.496% 0 0);
    --chart-3: lab(34.924% 0 0);
    --chart-4: lab(27.036% 0 0);
    --chart-5: lab(15.204% 0 -.00000596046);
    --sidebar: lab(98.26% 0 0);
    --sidebar-foreground: lab(2.75381% 0 0);
    --sidebar-primary: lab(7.78201% -.0000149012 0);
    --sidebar-primary-foreground: lab(98.26% 0 0);
    --sidebar-accent: lab(96.52% -.0000298023 .0000119209);
    --sidebar-accent-foreground: lab(7.78201% -.0000149012 0);
    --sidebar-border: lab(90.952% 0 -.0000119209);
    --sidebar-ring: lab(66.128% -.0000298023 .0000119209);
  }
}

*, :before, :after {
  border-color: revert;
  outline-color: revert;
}

html {
  -webkit-font-smoothing: revert;
  -moz-osx-font-smoothing: revert;
  font-family: revert;
}

:root {
  --graphite: #1a1a1a;
  --silver: #828282;
  --wetlands: #73736c;
  --light-gray: #f5f4f5;
  --white: #fff;
  --ink: var(--graphite);
  --muted: var(--silver);
  --dim: var(--wetlands);
  --border: #edecee;
  --surface: var(--light-gray);
  --card: #f9f9f9;
  --background: var(--white);
  --hairline: #1a1a1a1a;
  --rail: #0000000d;
  --ink-2: #272727;
  --ink-3: #3f3f46;
  --paper: #faf9f7;
  --glass: #ffffff0a;
  --font-display: var(--font-app-heading, "Manrope"), system-ui, sans-serif;
  --font-body: var(--font-app-sans, "Manrope"), system-ui, sans-serif;
  --font-mono: var(--font-app-mono, "Geist Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
  --h1-size: clamp(34px, 3.9vw, 56px);
  --h1-lh: 1.15;
  --h1-ls: -.06em;
  --h2-size: clamp(32px, 3.33vw, 48px);
  --h2-lh: 1.15;
  --h2-ls: -.06em;
  --h3-size: clamp(28px, 2.78vw, 40px);
  --h3-lh: 1.2;
  --h3-ls: -.06em;
  --h4-size: clamp(24px, 2.22vw, 32px);
  --h4-lh: 1.2;
  --h4-ls: -.06em;
  --h5-size: 24px;
  --h5-lh: 1.2;
  --h5-ls: -.06em;
  --h6-size: 20px;
  --h6-lh: 1.3;
  --h6-ls: -.03em;
  --body-lg: 20px;
  --body-md: 18px;
  --body-rg: 16px;
  --body-sm: 14px;
  --body-xs: 12px;
  --body-lh: 1.5;
  --body-ls: -.03em;
  --caption-rg: 14px;
  --caption-xs: 12px;
  --caption-lh: 1.5;
  --caption-ls: .05em;
  --nav-size: 16px;
  --nav-lh: 24px;
  --nav-weight: 500;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-16: 64px;
  --stroke: 1px;
  --container: 1312px;
  --container-nav: 1320px;
  --gutter: clamp(28px, 4.44vw, 64px);
  --gutter-nav: clamp(20px, 4.17vw, 60px);
  --gutter-rail: max(var(--gutter-nav), calc((100% - var(--container-nav)) / 2));
  --cta-notch: 61px;
  --rail-inset: clamp(20px, 4.17vw, 60px);
  --section-pad-top: clamp(80px, 152px - 5vw, 96px);
  --nav-h: 64px;
  --menu-width: min(80vw, 24em);
  --dur-accordion: .3s;
  interpolate-size: allow-keywords;
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-pill: 54px;
  --notch: 8px;
  --notch-lg: 16px;
  --notch-xl: 32px;
  --glass-rim-bright: inset 1px 1px 0 #fff3, inset -1px -1px 0 #ffffff14;
  --glass-rim-dim: inset 1px 1px 0 #ffffff0d, inset -1px -1px 0 #ffffff05;
  --notch-clip: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  --shadow-mockup: 0 8px 17px #0000001a, 0 30px 30px #00000017, 0 68px 41px #0000000d;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-swap: cubic-bezier(.65, 0, .35, 1);
  --dur-micro: .15s;
  --dur-hover: .5s;
  --dur-reveal: 1s;
  --dur-step: 90ms;
  --ease-reveal: cubic-bezier(.33, 1, .68, 1);
  --cta-lift: 1.6em;
  --cta-stagger: 24ms;
  --cta-ease-hover: cubic-bezier(.625, .05, 0, 1);
}

@media (max-width: 991px) {
  :root {
    --h1-size: 36px;
    --h2-size: 32px;
    --h3-size: 28px;
    --h4-size: 24px;
    --h5-size: 24px;
    --h6-size: 20px;
    --body-lg: 20px;
    --body-md: 18px;
    --body-rg: 16px;
    --body-sm: 14px;
    --body-xs: 12px;
    --caption-rg: 14px;
    --caption-xs: 12px;
  }
}

@media (max-width: 767px) {
  :root {
    --h1-size: 34px;
    --h2-size: 32px;
    --h3-size: 28px;
    --h4-size: 24px;
    --h5-size: 24px;
    --h6-size: 20px;
    --body-lg: 20px;
    --body-md: 18px;
    --body-rg: 16px;
    --body-sm: 14px;
    --body-xs: 12px;
    --caption-rg: 14px;
    --caption-xs: 12px;
  }
}

@media (max-width: 479px) {
  :root {
    --h1-size: 36px;
    --h2-size: 32px;
    --h3-size: 28px;
    --h4-size: 24px;
    --h5-size: 24px;
    --h6-size: 20px;
    --body-lg: 20px;
    --body-md: 18px;
    --body-rg: 16px;
    --body-sm: 14px;
    --body-xs: 12px;
    --caption-rg: 14px;
    --caption-xs: 12px;
  }
}

*, :before, :after {
  box-sizing: border-box;
}

body {
  background: var(--background);
  color: var(--ink);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}

[data-reveal-item] {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-reveal),transform var(--dur-reveal) var(--ease-reveal);
}

[data-reveal-item="up"] {
  transform: translateY(16px);
}

[data-reveal-item="drift"] {
  transform: translate(48px);
}

[data-reveal-item="pop"] {
  transform: scale(.9);
}

[data-reveal-item="line"] {
  transform: scaleY(0);
}

[data-reveal-item="wipe"] {
  clip-path: inset(0 100% 0 0);
  transition: opacity var(--dur-reveal) var(--ease-reveal),clip-path var(--dur-reveal) var(--ease-reveal);
}

[data-reveal].is-revealed [data-reveal-item] {
  opacity: 1;
  transform: none;
}

[data-reveal].is-revealed [data-reveal-item="wipe"] {
  clip-path: inset(0);
}

[data-reveal-step="1"] {
  transition-delay: calc(1 * var(--dur-step));
}

[data-reveal-step="2"] {
  transition-delay: calc(2 * var(--dur-step));
}

[data-reveal-step="3"] {
  transition-delay: calc(3 * var(--dur-step));
}

[data-reveal-step="4"] {
  transition-delay: calc(4 * var(--dur-step));
}

[data-reveal-step="5"] {
  transition-delay: calc(5 * var(--dur-step));
}

[data-reveal-step="6"] {
  transition-delay: calc(6 * var(--dur-step));
}

[data-reveal-step="7"] {
  transition-delay: calc(7 * var(--dur-step));
}

@media (scripting: none) {
  [data-reveal-item] {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

.cta-label {
  clip-path: inset(0% 0% -15%);
  display: inline-flex;
}

.cta-char {
  white-space: pre;
  text-shadow: 0 calc(var(--cta-dir) * var(--cta-lift)) currentColor;
  transition: translate .3s var(--cta-ease-hover),text-shadow .1s .15s ease;
  display: inline-block;
}

.cta-char:nth-child(odd) {
  --cta-dir: -1;
}

.cta-char:nth-child(2n) {
  --cta-dir: 1;
}

.cta-icon-outer {
  clip-path: inset(0% 0% -15%);
  flex: none;
  align-items: center;
  height: 1.5em;
  display: inline-flex;
}

.cta-icon {
  --cta-dir: var(--cta-icon-dir, -1);
  --cta-i: var(--cta-icon-i, 12);
  width: var(--cta-icon-w, 6px);
  height: var(--cta-icon-h, 11px);
  filter: drop-shadow(0 calc(var(--cta-dir) * var(--cta-lift)) currentColor);
  transition: translate .3s var(--cta-ease-hover);
}

.cta-char:nth-child(2) {
  --cta-i: 1;
}

.cta-char:nth-child(3) {
  --cta-i: 2;
}

.cta-char:nth-child(4) {
  --cta-i: 3;
}

.cta-char:nth-child(5) {
  --cta-i: 4;
}

.cta-char:nth-child(6) {
  --cta-i: 5;
}

.cta-char:nth-child(7) {
  --cta-i: 6;
}

.cta-char:nth-child(8) {
  --cta-i: 7;
}

.cta-char:nth-child(9) {
  --cta-i: 8;
}

.cta-char:nth-child(10) {
  --cta-i: 9;
}

.cta-char:nth-child(11) {
  --cta-i: 10;
}

.cta-char:nth-child(12) {
  --cta-i: 11;
}

.cta-char:nth-child(13) {
  --cta-i: 12;
}

.cta-char:nth-child(14) {
  --cta-i: 13;
}

.cta-char:nth-child(15) {
  --cta-i: 14;
}

.cta-char:nth-child(16) {
  --cta-i: 15;
}

.cta-char:nth-child(17) {
  --cta-i: 16;
}

.cta-char:nth-child(18) {
  --cta-i: 17;
}

.cta-char:nth-child(19) {
  --cta-i: 18;
}

.cta-char:nth-child(20) {
  --cta-i: 19;
}

.cta-char:nth-child(n+21) {
  --cta-i: 20;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :has( > .cta-label):is(:hover, :focus-visible) .cta-char {
    translate: 0 calc(var(--cta-dir) * var(--cta-lift) * -1);
    transition: translate .5s calc(var(--cta-i, 0) * var(--cta-stagger)) var(--cta-ease-hover),text-shadow .175s calc(var(--cta-i, 0) * var(--cta-stagger) + .25s) ease;
  }

  :has( > .cta-label):is(:hover, :focus-visible) .cta-icon {
    translate: 0 calc(var(--cta-dir) * var(--cta-lift) * -1);
    transition: translate .5s calc(var(--cta-i) * var(--cta-stagger)) var(--cta-ease-hover);
  }
}

.navbar {
  z-index: 200;
  background: var(--graphite);
  color: var(--white);
  padding: 0 var(--gutter-nav);
  transition: background var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out);
  position: sticky;
  top: 0;
}

.navbar-light {
  background: var(--background);
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--rail);
}

.navbar-inner {
  max-width: var(--container-nav);
  height: var(--nav-h);
  grid-template-columns: 1fr auto auto;
  align-items: center;
  margin: 0 auto;
  display: grid;
}

.navbar-nav {
  align-items: center;
  gap: var(--space-6);
  height: 100%;
  padding: 0;
  display: flex;
}

.navbar-logo {
  align-items: center;
  min-height: 44px;
  display: flex;
  position: relative;
}

.navbar-logo-svg {
  width: 123px;
  height: 16px;
  color: var(--white);
  --logo-ground: var(--graphite);
}

.navbar-light .navbar-logo-svg {
  color: var(--ink);
  --logo-ground: var(--background);
}

.logo-fill {
  fill: currentColor;
  transition: fill var(--dur-hover) var(--ease-out);
}

.logo-cut {
  fill: var(--logo-ground, var(--graphite));
  transition: fill var(--dur-hover) var(--ease-out);
}

.navbar-links {
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.navbar-link {
  align-items: center;
  gap: var(--space-1);
  height: var(--nav-h);
  padding: 0 var(--space-4);
  color: var(--white);
  font: var(--nav-weight) var(--nav-size) / var(--nav-lh) var(--font-body);
  transition: opacity var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out);
  display: inline-flex;
}

.navbar-link:hover {
  opacity: .7;
}

.navbar-light .navbar-link {
  color: var(--ink);
}

.navbar-link-icon {
  width: 8px;
  height: 8px;
  transition: filter var(--dur-hover) var(--ease-out);
  margin: 4px;
}

.navbar-light .navbar-link-icon {
  filter: brightness(.102);
}

.navbar-cta {
  background: var(--white);
  width: 160px;
  height: 48px;
  color: var(--graphite);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  letter-spacing: var(--body-ls);
  clip-path: var(--notch-clip);
  transition: background var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out);
  justify-content: center;
  justify-self: end;
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.navbar-cta:hover {
  background: var(--surface);
}

.navbar-light .navbar-cta {
  background: var(--graphite);
  color: var(--white);
}

.navbar-light .navbar-cta:hover {
  background: #000;
}

.navbar-cta:focus-visible {
  box-shadow: inset 0 0 0 2px var(--silver);
  outline: none;
}

.navbar-light .navbar-cta .cta-icon {
  filter: brightness(0) invert(1) drop-shadow(0 calc(var(--cta-dir) * var(--cta-lift)) currentColor);
}

.page {
  z-index: 2;
  background: var(--background);
  position: relative;
}

.underlay-nav {
  display: none;
}

.underlay-nav__toggle {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  outline-offset: 0px;
  font: 400 16px / 1.5 var(--font-body);
  color: inherit;
  cursor: pointer;
  background-color: #0000;
  border: 1px #000;
  outline: 3px #555;
  justify-content: center;
  justify-self: end;
  align-items: center;
  margin: -1em;
  padding: 1em;
  display: none;
}

.underlay-nav__toggle-text {
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-end;
  height: 24px;
  display: flex;
  overflow: hidden;
}

.underlay-nav__toggle-label {
  font: 400 16px / 24px var(--font-body);
  letter-spacing: var(--body-ls);
}

.underlay-nav__toggle-icon {
  grid-column-gap: .375em;
  grid-row-gap: .375em;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  margin-bottom: -.3em;
  display: flex;
}

.underlay-nav__toggle-bar {
  background-color: currentColor;
  flex: none;
  width: 100%;
  height: .125em;
  padding: 0;
}

.underlay-nav__menu {
  z-index: 1;
  width: var(--menu-width);
  background: var(--graphite);
  color: var(--white);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
}

.nav-plain-open [data-main] {
  transform: translate(calc(-1 * var(--menu-width)));
  transition: transform var(--dur-hover) var(--ease-out);
}

.nav-plain-open .underlay-nav__overlay {
  visibility: visible;
  pointer-events: auto;
  transform: translate(calc(-1 * var(--menu-width)));
  transition: transform var(--dur-hover) var(--ease-out);
}

.nav-plain-open .underlay-nav__dark {
  opacity: 1;
  visibility: visible;
}

.nav-plain-open [data-reveal-l], .nav-plain-open [data-reveal-s] {
  opacity: 1;
  transform: none;
}

.nav-plain-open .underlay-nav__toggle-label {
  transition: transform var(--dur-hover) var(--ease-out);
  transform: translateY(-100%);
}

.underlay-nav__overlay {
  z-index: 100;
  pointer-events: none;
  cursor: pointer;
  visibility: hidden;
  position: fixed;
  inset: 0% -1px 0% 0%;
  overflow: clip;
}

.underlay-nav__inner {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 6.5em 1.5em 2em;
  display: flex;
  overflow: auto;
}

.underlay-nav__list {
  flex-flow: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.underlay-nav__list.is--small {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
}

.underlay-nav__link-large {
  border-radius: var(--radius-sm);
  width: 100%;
  padding: .5em .75em;
}

.underlay-nav__link-large.w--current {
  color: var(--graphite);
  background-color: var(--white);
}

.underlay-nav__link-label {
  font: 400 clamp(30px,6.4vw,44px) / 1.1 var(--font-display);
  letter-spacing: var(--h2-ls);
}

.underlay-nav__bottom {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 1.5em;
  display: flex;
  position: relative;
}

.underlay-nav__bottom-col {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.underlay-nav__link-small {
  font: 400 var(--body-sm) / 1.1 var(--font-body);
  letter-spacing: var(--body-ls);
}

.underlay-nav__link-small.is--faded {
  opacity: .5;
}

.underlay-nav__corner {
  transform-origin: 100% 0;
  color: var(--graphite);
  background-image: radial-gradient(circle farthest-side at 0 100%,#1a1a1a00 99%,var(--graphite));
  width: 2em;
  height: 2em;
}

.underlay-nav__corner.is--bottom {
  transform-origin: 100% 100%;
  background-image: radial-gradient(circle farthest-side at 0 0,#1a1a1a00 99%,var(--graphite));
}

.underlay-nav__dark {
  opacity: 0;
  background-color: #0000004d;
  position: absolute;
  inset: 0%;
}

.underlay-nav__bottom-border {
  opacity: .15;
  transform-origin: 0%;
  background-color: currentColor;
  width: 100%;
  height: 1px;
  position: absolute;
  inset: 0% 0% auto;
}

.underlay-nav__borders {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: absolute;
  inset: 0;
}

.underlay-nav__border {
  background-color: var(--graphite);
  width: 100%;
  height: 1em;
}

.underlay-nav__border-row {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}

body[data-nav-theme="light"] .underlay-nav__menu {
  background: var(--background);
  color: var(--ink);
}

body[data-nav-theme="light"] .underlay-nav__border {
  background-color: var(--background);
}

body[data-nav-theme="light"] .underlay-nav__corner {
  background-image: radial-gradient(circle farthest-side at 0 100%,#fff0 99%,var(--background));
}

body[data-nav-theme="light"] .underlay-nav__corner.is--bottom {
  background-image: radial-gradient(circle farthest-side at 0 0,#fff0 99%,var(--background));
}

body[data-nav-theme="light"] .underlay-nav__link-large.w--current {
  background-color: var(--graphite);
  color: var(--white);
}

.hero {
  background: var(--graphite);
  color: var(--white);
  padding: 80px var(--gutter);
  position: relative;
  overflow: hidden;
}

.hero-ascii-right {
  color: #ffffff1a;
  width: 1428px;
  height: 912px;
  font: 14px / 14px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: -153px;
  right: -793px;
  overflow: hidden;
}

.hero-ascii-left {
  color: #ffffff1a;
  width: 921px;
  height: 588px;
  font: 6.4px / 6.4px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: -117px;
  left: -237px;
  overflow: hidden;
}

.hero-marquee {
  --hm-w: clamp(240px, 26vw, 400px);
  --hm-gap: 24px;
  z-index: 1;
  margin: 88px calc(-1 * var(--gutter)) 0;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #00000040, #000000bf 4.5%, #000 9.5% 90.5%, #000000bf 95.5%, #00000040);
  mask-image: linear-gradient(to right, #00000040, #000000bf 4.5%, #000 9.5% 90.5%, #000000bf 95.5%, #00000040);
}

.hero-marquee-track {
  gap: var(--hm-gap);
  padding: 0 var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  display: flex;
  overflow-x: auto;
}

.hero-marquee.is-live {
  cursor: grab;
  touch-action: pan-y;
}

.hero-marquee.is-dragging {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

.hero-marquee.is-live .hero-marquee-track {
  will-change: transform;
  width: max-content;
  overflow: visible;
}

.hero-marquee-card {
  gap: var(--space-3);
  width: var(--hm-w);
  color: var(--white);
  scroll-snap-align: start;
  outline-offset: 4px;
  flex-direction: column;
  flex: none;
  text-decoration: none;
  display: flex;
}

.hero-marquee-card[data-copy="1"] {
  display: none;
}

.hero-marquee.is-live .hero-marquee-card[data-copy="1"] {
  display: flex;
}

.hero-marquee-card:focus-visible {
  outline: 2px solid var(--white);
}

.hero-marquee-visual {
  aspect-ratio: 4 / 3;
  background: #242424;
  display: block;
  position: relative;
  overflow: hidden;
}

.hero-marquee-field {
  object-fit: cover;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.hero-marquee-shot {
  border-radius: var(--radius-sm);
  pointer-events: none;
  width: 72%;
  height: auto;
  transition: transform var(--dur-hover) var(--ease-out);
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translate(-50%);
}

.hero-marquee-card:is(:hover, :focus-visible) .hero-marquee-shot {
  transform: translate(-50%)translateY(-6px);
}

.hero-marquee-label {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font: 400 var(--body-xs) / 1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
}

.hero-marquee-client {
  color: var(--white);
}

.hero-marquee-read {
  color: var(--silver);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}

.hero-marquee-card:is(:hover, :focus-visible) .hero-marquee-read {
  opacity: 1;
}

.hero-lottie {
  z-index: 1;
  height: 460px;
  margin: 116px calc(-1 * var(--gutter)) 0;
  pointer-events: none;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #00000040, #000000bf 4.5%, #000 9.5% 90.5%, #000000bf 95.5%, #00000040);
  mask-image: linear-gradient(to right, #00000040, #000000bf 4.5%, #000 9.5% 90.5%, #000000bf 95.5%, #00000040);
}

.hero-lottie svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-inner {
  z-index: 1;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: var(--container);
  flex-direction: column;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.hero-eyebrow {
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.hero-eyebrow-icon {
  width: 5px;
  height: 10px;
}

.hero-eyebrow-text {
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  background: linear-gradient(90deg,var(--silver) 0%,var(--silver) 40%,var(--white) 50%,var(--silver) 60%,var(--silver) 100%) 50% 0 / 250% 100% no-repeat;
  color: #0000;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 3.6s cubic-bezier(.45, 0, .55, 1) infinite hero-eyebrow-sweep;
}

@keyframes hero-eyebrow-sweep {
  0% {
    background-position-x: 100%;
  }

  72%, to {
    background-position-x: 0%;
  }
}

.hero-title {
  max-width: 1028px;
  color: var(--silver);
  font: 400 var(--h1-size) / var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-ls);
  margin: 0;
}

.hero-title-em {
  color: var(--white);
}

.hero-sub {
  color: var(--silver);
  font: 400 clamp(16px,1.25vw,var(--body-md)) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.hero-sub-break {
  display: inline;
}

.hero-cta {
  background: var(--white);
  color: var(--graphite);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  letter-spacing: var(--body-ls);
  clip-path: var(--notch-clip);
  transition: background var(--dur-hover) var(--ease-out);
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  display: inline-flex;
}

.hero-cta:hover {
  background: var(--surface);
}

.hero-cta:focus-visible {
  box-shadow: inset 0 0 0 2px var(--silver);
  outline: none;
}

.hero-stage {
  z-index: 1;
  height: 460px;
  margin: 52px calc(-1 * var(--gutter)) 0;
  pointer-events: none;
  position: relative;
  overflow: hidden;
}

.hero-card-left {
  width: 547px;
  height: 308px;
  padding: var(--space-3);
  background: var(--ink-2);
  opacity: .6;
  filter: blur(37px);
  position: absolute;
  top: 68px;
  right: calc(50% + 320px);
}

.hero-card-left-img {
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.hero-card-right {
  width: 547px;
  height: 308px;
  padding: var(--space-3);
  background: var(--ink-2);
  opacity: .6;
  filter: blur(37px);
  position: absolute;
  top: 68px;
  left: calc(50% + 320px);
}

.hero-card-right-img {
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.hero-card-main {
  width: 575px;
  height: 324px;
  box-shadow: var(--shadow-mockup);
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translate(-50%);
}

.hero-card-main-body {
  width: 100%;
  height: 100%;
  padding: var(--space-3);
  background: var(--ink-2);
  clip-path: polygon(0 0,100% 0,100% 100%,var(--notch-lg) 100%,0 calc(100% - var(--notch-lg)));
}

.hero-card-main-panel {
  border-radius: var(--radius-md);
  background: var(--paper);
  height: 100%;
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.hero-card-main-img {
  border-radius: var(--radius-sm);
  width: calc(100% - 20px);
  height: auto;
  position: absolute;
  top: 10px;
  left: 10px;
  transform: rotate(.4deg);
  box-shadow: -9px 10px 30px #00000005;
}

.hero-cursor-a {
  border: var(--stroke) solid var(--ink-3);
  border-radius: var(--radius-pill);
  background: var(--ink-2);
  color: var(--white);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  letter-spacing: var(--body-ls);
  filter: drop-shadow(-2px 2px 3px #5454541a);
  align-items: center;
  padding: 7px 12px;
  display: inline-flex;
  position: absolute;
  top: 80px;
  right: calc(50% + 255px);
}

.hero-cursor-a-arrow {
  width: 13px;
  height: 14px;
  position: absolute;
  top: -15px;
  left: 96px;
  transform: scaleY(-1)rotate(-161.79deg);
}

.hero-cursor-b {
  border: var(--stroke) solid var(--ink-3);
  border-radius: var(--radius-pill);
  background: var(--ink-2);
  color: var(--white);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  letter-spacing: var(--body-ls);
  filter: drop-shadow(-2px 2px 3px #5454541a);
  align-items: center;
  padding: 7px 12px;
  display: inline-flex;
  position: absolute;
  top: 376px;
  right: calc(50% - 330px);
}

.hero-cursor-b-arrow {
  width: 13px;
  height: 14px;
  position: absolute;
  top: -15px;
  left: -13px;
  transform: rotate(-18.21deg);
}

.hero-dither {
  background: var(--background) url("/images/hero/dither.png") center bottom / 100% auto no-repeat;
  height: 52px;
  image-rendering: pixelated;
}

.logos {
  padding: var(--space-16) var(--gutter-nav);
  background: var(--background);
  position: relative;
}

.logos-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.logos-inner {
  align-items: center;
  gap: var(--space-8);
  max-width: var(--container-nav);
  padding: var(--space-8) 60px;
  border-top: var(--stroke) solid var(--rail);
  border-bottom: var(--stroke) solid var(--rail);
  margin: 0 auto;
  display: flex;
  position: relative;
}

.logos-dot-tl {
  background: radial-gradient(circle,var(--ink) 1px,var(--white) 1.5px);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -10px;
  left: -10px;
}

.logos-dot-tr {
  background: radial-gradient(circle,var(--ink) 1px,var(--white) 1.5px);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -10px;
  right: -10px;
}

.logos-dot-bl {
  background: radial-gradient(circle,var(--ink) 1px,var(--white) 1.5px);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: -10px;
  left: -10px;
}

.logos-dot-br {
  background: radial-gradient(circle,var(--ink) 1px,var(--white) 1.5px);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: -10px;
  right: -10px;
}

.logos-caption {
  color: var(--dim);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  margin: 0;
}

.logos-carousel {
  flex: auto;
  min-width: 0;
  padding: 0 48px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000 0%, #000 10% 90%, #0000 100%);
  mask-image: linear-gradient(90deg, #0000 0%, #000 10% 90%, #0000 100%);
}

.logos-track {
  width: max-content;
  animation: 30s linear infinite logos-marquee;
  display: flex;
}

.logos-carousel:hover .logos-track {
  animation-play-state: paused;
}

.logos-set {
  align-items: center;
  gap: 52px;
  margin: 0;
  padding: 0 52px 0 0;
  list-style: none;
  display: flex;
}

.logos-logo {
  flex: none;
}

.logos-logo-muted {
  opacity: .4;
  filter: grayscale();
  flex: none;
}

.logos-logo-mono {
  opacity: .55;
  filter: grayscale();
  flex: none;
}

@keyframes logos-marquee {
  0% {
    transform: translate(0);
  }

  to {
    transform: translate(-50%);
  }
}

.rich-text {
  color: var(--ink);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.rich-text :where(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, figure, blockquote, hr) {
  margin: 0;
}

.rich-text > * + * {
  margin-top: var(--space-6);
}

.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6 {
  font-family: var(--font-display);
  font-weight: 400;
}

.rich-text h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
}

.rich-text h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
}

.rich-text h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
}

.rich-text h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  letter-spacing: var(--h4-ls);
}

.rich-text h5 {
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  letter-spacing: var(--h5-ls);
}

.rich-text h6 {
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  letter-spacing: var(--h6-ls);
}

.rich-text > * + :is(h1, h2, h3, h4, h5, h6), .rich-text > * + hr, .rich-text > hr + * {
  margin-top: var(--space-16);
}

.rich-text p {
  color: var(--dim);
}

.rich-text a {
  color: var(--ink);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--hairline);
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}

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

.rich-text strong {
  color: var(--ink);
  font-weight: 500;
}

.rich-text ul, .rich-text ol {
  padding-left: var(--space-6);
  color: var(--dim);
}

.rich-text li + li {
  margin-top: var(--space-2);
}

.rich-text li::marker {
  color: var(--muted);
}

.rich-text blockquote {
  padding: var(--space-6) var(--space-8);
  border-left: var(--stroke) solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font-size: var(--body-lg);
}

.rich-text blockquote p {
  color: inherit;
}

.rich-text code {
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: 400 var(--body-sm) / 1 var(--font-mono);
  letter-spacing: 0;
  padding: 2px 6px;
}

.rich-text pre {
  padding: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--graphite);
  color: var(--white);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-mono);
  letter-spacing: 0;
  overflow-x: auto;
}

.rich-text pre code {
  color: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
}

.rich-text hr {
  border: 0;
  border-top: var(--stroke) solid var(--hairline);
}

.rich-text img {
  width: 100%;
  height: auto;
}

.rich-text figcaption {
  margin-top: var(--space-3);
  color: var(--muted);
  font: 400 var(--caption-rg) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
}

.model {
  padding: var(--section-pad-top) var(--gutter-nav);
  border-top: var(--stroke) solid var(--rail);
  background: var(--background);
  position: relative;
}

.model-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.model-inner {
  max-width: calc(1200px + 2 * var(--rail-inset));
  padding: 0 var(--rail-inset);
  flex-direction: column;
  gap: 80px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.model-title {
  max-width: 700px;
  color: var(--ink);
  font: 400 var(--h2-size) / var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0;
}

.model-badges {
  vertical-align: middle;
  width: 77px;
  height: 36px;
  margin: 0 6px;
  display: inline-block;
  position: relative;
}

.model-badge-claude {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 4px;
  left: 0;
}

.model-badge-openai {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 4px;
  left: 49px;
}

.model-badge-native {
  width: 45px;
  height: 49px;
  position: absolute;
  top: -1px;
  left: 19px;
}

.model-title-break {
  display: inline;
}

.model-row {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  display: grid;
}

.model-row-flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: start;
  display: grid;
}

.model-visual {
  background: var(--graphite);
  height: 438px;
  color: var(--white);
  margin-right: 24px;
  position: relative;
  overflow: hidden;
}

.model-visual-flip {
  background: var(--graphite);
  height: 438px;
  color: var(--white);
  order: 2;
  margin-left: 24px;
  position: relative;
  overflow: hidden;
}

.model-visual-bg {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

@keyframes model-ground-drift {
  0% {
    transform: scale(1.08)translateY(-2.5%);
  }

  to {
    transform: scale(1.08)translateY(2.5%);
  }
}

@supports (animation-timeline: view()) {
  .model-visual-bg {
    animation: linear both model-ground-drift;
    animation-timeline: view();
    animation-range: cover;
  }
}

.model-visual-mobile {
  width: 100%;
  height: auto;
  display: none;
}

.model-copy {
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  height: 438px;
  padding: 0 24px;
  display: flex;
}

.model-copy-title {
  color: var(--ink);
  font: 400 var(--h3-size) / var(--h3-lh) var(--font-display);
  letter-spacing: var(--h3-ls);
  margin: 0;
}

.model-copy-dim {
  color: var(--dim);
}

.model-copy-text {
  color: var(--dim);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.slack-voice {
  width: 280px;
  box-shadow: var(--glass-rim-bright);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #0006;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  display: flex;
  position: absolute;
  top: 64px;
  left: 84px;
}

.slack-voice-head {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.slack-voice-media {
  align-items: center;
  gap: 11px;
  display: flex;
}

.slack-play {
  width: 32px;
  height: 32px;
}

.slack-wave {
  width: 86px;
  height: 32px;
}

.slack-time {
  color: #ffffff80;
  font: 400 10px / 12px var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.slack-text {
  color: var(--white);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.slack-reply {
  width: 328px;
  box-shadow: var(--glass-rim-bright);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #0006;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  display: flex;
  position: absolute;
  top: 201px;
  left: 209px;
}

.slack-reply-text {
  width: 215px;
  color: var(--white);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.slack-live {
  width: 298px;
  height: 55px;
  box-shadow: var(--glass-rim-bright);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #0006;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  display: flex;
  position: absolute;
  top: 318px;
  left: 84px;
}

@property --slack-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.slack-live-beam {
  pointer-events: none;
  background: conic-gradient(from var(--slack-beam-angle),#fff0 0deg,#ffffffe6 40deg,#fff0 80deg,#fff0 360deg);
  -webkit-mask-composite: xor;
  padding: 1px;
  animation: 4s linear infinite slack-beam;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

@keyframes slack-beam {
  to {
    --slack-beam-angle: 360deg;
  }
}

.slack-live-text {
  color: var(--white);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.slack-avatar-a {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 128px;
  left: 40px;
}

.slack-avatar-b {
  border-radius: 50%;
  width: 31px;
  height: 31px;
  position: absolute;
  top: 339px;
  left: 40px;
}

.slack-agent-native {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 242px;
  right: 61px;
  box-shadow: 0 1px 2px #00000042, 0 3px 3px #00000038, 0 7px 4px #00000021;
}

.slack-agent-person {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 246px;
  right: 46px;
}

.stack-chip-1 {
  filter: blur(2px);
  white-space: nowrap;
  height: 40px;
  box-shadow: var(--glass-rim-dim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #ffffff0f;
  border-radius: 1000px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
  position: absolute;
  top: 106px;
  left: -93px;
}

.stack-chip-2 {
  white-space: nowrap;
  height: 40px;
  box-shadow: var(--glass-rim-dim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #ffffff0f;
  border-radius: 1000px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
  position: absolute;
  top: 155px;
  left: -30px;
}

.stack-chip-3 {
  white-space: nowrap;
  height: 40px;
  box-shadow: var(--glass-rim-dim);
  -webkit-backdrop-filter: blur(4.5px);
  backdrop-filter: blur(4.5px);
  background: #ffffff03;
  border-radius: 1000px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
  position: absolute;
  top: 155px;
  left: 106px;
}

.stack-chip-4 {
  white-space: nowrap;
  height: 40px;
  box-shadow: var(--glass-rim-dim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #ffffff0f;
  border-radius: 1000px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
  position: absolute;
  top: 199px;
  left: -25px;
}

.stack-chip-5 {
  white-space: nowrap;
  height: 40px;
  box-shadow: var(--glass-rim-dim);
  -webkit-backdrop-filter: blur(4.5px);
  backdrop-filter: blur(4.5px);
  background: #ffffff03;
  border-radius: 1000px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
  position: absolute;
  top: 200px;
  left: 111px;
}

.stack-chip-6 {
  white-space: nowrap;
  height: 40px;
  box-shadow: var(--glass-rim-dim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #ffffff0f;
  border-radius: 1000px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
  position: absolute;
  top: 245px;
  left: -68px;
}

.stack-chip-7 {
  white-space: nowrap;
  height: 40px;
  box-shadow: var(--glass-rim-dim);
  -webkit-backdrop-filter: blur(4.5px);
  backdrop-filter: blur(4.5px);
  background: #ffffff03;
  border-radius: 1000px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
  position: absolute;
  top: 245px;
  left: 96px;
}

.stack-chip-8 {
  white-space: nowrap;
  height: 40px;
  box-shadow: var(--glass-rim-dim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #ffffff0f;
  border-radius: 1000px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
  position: absolute;
  top: 289px;
  left: 7px;
}

.stack-chip-9 {
  filter: blur(2px);
  white-space: nowrap;
  height: 40px;
  box-shadow: var(--glass-rim-dim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #ffffff0f;
  border-radius: 1000px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
  position: absolute;
  top: 329px;
  left: -85px;
}

.stack-chip-dash {
  background: linear-gradient(90deg, #ffffff80, #fff0);
  border-radius: 1000px;
  flex: none;
  width: 20px;
  height: 2px;
}

.stack-chip-label {
  color: var(--white);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.stack-shade {
  background: linear-gradient(90deg, #000c 1.66%, #0000 99.6%);
  width: 321px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.stack-shade-right {
  background: linear-gradient(270deg, #000c 1.66%, #0000 68%);
  width: 321px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 320px;
}

.stack-message {
  width: 354px;
  box-shadow: var(--glass-rim-bright);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  align-items: center;
  gap: 8px;
  padding: 12px;
  display: flex;
  position: absolute;
  top: 182px;
  left: 365px;
}

.stack-message-avatar {
  border-radius: 50%;
  flex: none;
  width: 24px;
  height: 24px;
}

.stack-message-box {
  border: var(--stroke) solid #ffffff14;
  background: #00000080;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px;
  display: flex;
}

.stack-message-text {
  color: #ffffffbf;
  width: 264px;
  font: 300 var(--body-xs) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.stack-message-meta {
  color: #ffffff80;
  font: 400 7px / 12px var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.stack-line {
  filter: drop-shadow(0 0 3px #ffffff73);
  width: 2px;
  height: 438px;
  position: absolute;
  top: 0;
  left: 320px;
  overflow: visible;
  -webkit-mask-image: linear-gradient(#0000 0%, #000 25% 75%, #0000 100%);
  mask-image: linear-gradient(#0000 0%, #000 25% 75%, #0000 100%);
}

.stack-line-track {
  stroke: #ffffff4d;
  stroke-width: 1.25px;
}

.stack-line-flow {
  stroke: var(--white);
  stroke-width: 1.25px;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1px;
  animation: 3.6s cubic-bezier(.65, 0, .35, 1) infinite line-flow;
}

.stack-core {
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  background: #ffffff1a;
  place-items: center;
  width: 48px;
  height: 48px;
  animation: 3.6s linear infinite stack-core-flow;
  display: grid;
  position: absolute;
  top: 195px;
  left: 297px;
  box-shadow: inset 0 0 0 1px #fff0, 0 0 132px #ffffff80;
}

@keyframes stack-core-flow {
  0%, 14% {
    box-shadow: inset 0 0 0 1px #fff0, 0 0 132px #ffffff80;
  }

  20%, 70% {
    box-shadow: inset 0 0 0 1px #fff6, 0 0 132px #ffffff80;
  }

  76%, to {
    box-shadow: inset 0 0 0 1px #fff0, 0 0 132px #ffffff80;
  }
}

.stack-core-mark {
  width: 48px;
  height: 48px;
}

.board-conn-top {
  width: 190px;
  height: 21px;
  position: absolute;
  top: 73px;
  left: 226px;
}

.board-flow {
  filter: drop-shadow(0 0 3px #ffffff73);
  width: 306px;
  height: 78px;
  position: absolute;
  top: 77px;
  left: 169px;
  overflow: visible;
}

[data-reveal]:not(.is-revealed) .board-flow-stem, [data-reveal]:not(.is-revealed) .board-flow-inner, [data-reveal]:not(.is-revealed) .board-flow-outer, [data-reveal]:not(.is-revealed) .stack-line-flow, [data-reveal]:not(.is-revealed) .stack-core, [data-reveal]:not(.is-revealed) .slack-live-beam {
  animation-play-state: paused;
}

.board-flow-track {
  stroke: #ffffff4d;
  stroke-width: 1.25px;
}

.board-flow-stem {
  stroke: var(--white);
  stroke-width: 1.25px;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1px;
  animation: 3.6s cubic-bezier(.65, 0, .35, 1) infinite line-flow;
}

.board-flow-inner {
  stroke: var(--white);
  stroke-width: 1.25px;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1px;
  animation: 3.6s cubic-bezier(.65, 0, .35, 1) .26s infinite line-flow;
}

.board-flow-outer {
  stroke: var(--white);
  stroke-width: 1.25px;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1px;
  animation: 3.6s cubic-bezier(.65, 0, .35, 1) .53s infinite line-flow;
}

@keyframes line-flow {
  0% {
    stroke-dashoffset: 1px;
  }

  35% {
    stroke-dashoffset: 0;
  }

  55% {
    stroke-dashoffset: 0;
  }

  90%, to {
    stroke-dashoffset: -1px;
  }
}

.board-core {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 51px;
  left: 286px;
}

.board-card {
  width: 440px;
  box-shadow: var(--glass-rim-bright);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #1a1a1a66;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
  display: flex;
  position: absolute;
  top: 148px;
  left: 101px;
}

.board-head {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.board-head-title {
  align-items: center;
  gap: 8px;
  display: flex;
}

.board-dot {
  background: var(--white);
  border-radius: 50%;
  width: 4px;
  height: 4px;
}

.board-head-label {
  color: var(--white);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.board-avatars {
  padding-right: 8px;
  display: flex;
}

.board-avatar {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin-right: -8px;
}

.board-divider {
  background: #fff3;
  width: 100%;
  height: 1px;
}

.board-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.board-row-label {
  color: var(--white);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.board-tag-done {
  color: #12a801;
  font: 400 10px / 1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #12a80133;
  border-radius: 44px;
  padding: 4px 8px;
}

.board-tag-wip {
  color: #92a801;
  font: 400 10px / 1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #92a80133;
  border-radius: 44px;
  padding: 4px 8px;
}

.work {
  padding: var(--section-pad-top) var(--gutter-nav);
  background: var(--background);
  position: relative;
  overflow: hidden;
}

.work-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-top: var(--stroke) solid var(--rail);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.work-decor {
  color: #bfbfbf;
  width: 1109px;
  height: 470px;
  font: 10px / 10px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: 26px;
  left: calc(50% - 46px);
  overflow: hidden;
}

.work-inner {
  max-width: var(--container-nav);
  flex-direction: column;
  gap: 80px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.work-head {
  padding: 0 var(--rail-inset);
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  display: flex;
}

.work-head-copy {
  gap: var(--space-6);
  flex-direction: column;
  max-width: 368px;
  display: flex;
}

.work-title {
  color: var(--ink);
  font: 400 var(--h1-size) / var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-ls);
  margin: 0;
}

.work-sub {
  color: var(--dim);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.work-cta {
  --cta-icon-i: 20;
  background: var(--graphite);
  color: var(--white);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  letter-spacing: var(--body-ls);
  clip-path: var(--notch-clip);
  transition: background var(--dur-hover) var(--ease-out);
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  display: inline-flex;
}

.work-cta:hover {
  background: var(--ink-2);
}

.work-cta:focus-visible {
  box-shadow: inset 0 0 0 2px var(--silver);
  outline: none;
}

.work-feature, .work-feature-flip {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  display: grid;
}

.work-feature-visual {
  background: #ececec;
  height: 480px;
  display: block;
  position: relative;
  overflow: hidden;
}

.work-feature-visual-flip {
  background: #ececec;
  align-self: stretch;
  min-height: 501px;
  display: block;
  position: relative;
  overflow: hidden;
}

.work-field {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.work-shot {
  border-radius: var(--radius-sm);
  width: 78.2%;
  height: auto;
  transition: transform var(--dur-hover) var(--ease-out);
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%);
  box-shadow: -9px 10px 30px #00000005, -37px 39px 54px #00000005;
}

.work-feature-copy {
  align-items: flex-start;
  gap: var(--space-4);
  flex-direction: column;
  padding: 0 32px;
  display: flex;
}

.work-eyebrow {
  color: var(--dim);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  display: flex;
}

.work-eyebrow-item {
  white-space: nowrap;
}

.work-eyebrow-sep {
  opacity: .6;
  width: 8px;
  height: 8px;
  margin: 4px;
}

.work-feature-title {
  color: var(--ink);
  font: 400 var(--h4-size) / var(--h4-lh) var(--font-display);
  letter-spacing: var(--h4-ls);
  margin: 0;
}

.work-feature-text {
  color: var(--dim);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.work-link {
  --cta-icon-i: 15;
  --cta-icon-dir: 1;
  --cta-icon-w: 16px;
  --cta-icon-h: 16px;
  color: var(--dim);
  font: 400 var(--caption-rg) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  transition: color var(--dur-hover) var(--ease-out);
  align-items: center;
  gap: 12px;
  display: inline-flex;
}

.work-link:hover {
  color: var(--ink);
}

.work-quote {
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-4);
  background: var(--card);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  flex-direction: column;
  margin: 0;
  display: flex;
  position: relative;
}

.work-quote-mark {
  width: 24px;
  height: 24px;
  margin-bottom: -12px;
}

.work-quote-text {
  color: var(--muted);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.work-quote-em {
  color: var(--ink);
}

.work-quote-foot {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  display: flex;
}

.work-quote-person {
  align-items: center;
  gap: 8px;
  display: flex;
}

.work-quote-avatar {
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  width: 40px;
  height: 40px;
}

.work-quote-meta {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.work-quote-name {
  color: var(--ink);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.work-quote-role {
  color: var(--dim);
  font: 400 var(--body-xs) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.work-quote-logo {
  flex: none;
  height: auto;
}

.work-callout {
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  background: var(--card);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  flex-direction: column;
  margin: 0;
  display: flex;
  position: relative;
}

.work-callout-value {
  color: var(--ink);
  font: 400 var(--h2-size) / 1.05 var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0;
}

.work-callout-text {
  color: var(--muted);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.work-callout-em {
  color: var(--ink);
}

.work-callout-foot {
  align-items: center;
  gap: 16px;
  min-height: 24px;
  display: flex;
}

.work-callout-logo {
  flex: none;
  height: auto;
}

.work-ledger {
  gap: var(--space-6);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.work-card {
  flex-direction: column;
  display: flex;
}

.work-card-visual {
  background: #ececec;
  height: 320px;
  display: block;
  position: relative;
  overflow: hidden;
}

.work-card-shot {
  border-radius: var(--radius-sm);
  width: 70.2%;
  height: auto;
  transition: transform var(--dur-hover) var(--ease-out);
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%);
}

.work-card-copy {
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  flex-direction: column;
  display: flex;
}

.work-card-title {
  color: var(--ink);
  font: 400 var(--h6-size) / var(--h6-lh) var(--font-display);
  letter-spacing: var(--h6-ls);
  margin: 0;
}

.process {
  padding: var(--section-pad-top) 0;
  background: var(--graphite);
  color: var(--white);
  flex-direction: column;
  gap: 80px;
  display: flex;
  position: relative;
}

.process-corner {
  width: 61px;
  height: 61px;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.process-head {
  align-items: flex-start;
  gap: var(--space-6);
  padding: 0 var(--gutter-rail);
  flex-direction: column;
  display: flex;
}

.process-title {
  max-width: 586px;
  color: var(--white);
  font: 400 var(--h1-size) / var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-ls);
  margin: 0;
}

.process-sub {
  max-width: 586px;
  color: var(--silver);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.process-steps-outer {
  padding: 0 var(--gutter-rail);
  border-top: var(--stroke) solid #ffffff0d;
}

.process-steps {
  max-width: var(--container-nav);
  border-left: var(--stroke) solid #ffffff0d;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 391px;
  margin: 0 auto;
  display: grid;
}

.process-step {
  border-right: var(--stroke) solid #ffffff0d;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 16px;
  display: flex;
}

.process-step-art {
  align-self: flex-start;
  width: auto;
  height: 98px;
}

.process-design-block {
  animation: 6s cubic-bezier(.65, 0, .35, 1) infinite process-design-step;
}

@keyframes process-design-step {
  0%, 17% {
    transform: translate(0);
  }

  25%, 42% {
    transform: translate(24px);
  }

  50%, 67% {
    transform: translate(24px, 24px);
  }

  75%, 92% {
    transform: translateY(24px);
  }

  to {
    transform: translate(0);
  }
}

.process-ring {
  animation: 3.2s ease-in-out infinite process-ring-light;
}

.process-ring:first-child {
  --ring: .1;
  animation-delay: .88s;
}

.process-ring:nth-child(2) {
  --ring: .15;
  animation-delay: .66s;
}

.process-ring:nth-child(3) {
  --ring: .2;
  animation-delay: .44s;
}

.process-ring:nth-child(4) {
  --ring: .3;
  animation-delay: .22s;
}

.process-ring:nth-child(5) {
  --ring: .4;
  animation-delay: 0s;
}

@keyframes process-ring-light {
  0%, 40%, to {
    stroke-opacity: var(--ring);
  }

  18% {
    stroke-opacity: .7;
  }
}

.process-step-copy {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.process-step-title {
  color: var(--white);
  font: 400 var(--h5-size) / var(--h5-lh) var(--font-display);
  letter-spacing: var(--h5-ls);
  margin: 0;
}

.process-step-text {
  color: var(--silver);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.process-loops {
  flex-direction: column;
  margin-top: -80px;
  display: flex;
}

.process-loop {
  padding: 32px var(--gutter-rail);
  border-top: var(--stroke) solid #ffffff0d;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  display: flex;
}

.process-loop-label {
  color: var(--silver);
  font: 400 var(--caption-rg) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  flex: none;
  align-items: center;
  gap: 80px;
  display: flex;
}

.process-loop-index {
  width: 27px;
}

.process-loop-name {
  white-space: nowrap;
}

.process-loop-track {
  flex: 0 764px;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000 0%, #000 15% 85%, #0000 100%);
  mask-image: linear-gradient(90deg, #0000 0%, #000 15% 85%, #0000 100%);
}

.process-loop-marquee {
  width: max-content;
  animation: 40s linear infinite process-marquee;
  display: flex;
}

.process-loop-track:hover .process-loop-marquee {
  animation-play-state: paused;
}

.process-loop-marquee-reverse {
  width: max-content;
  animation: 40s linear infinite reverse process-marquee;
  display: flex;
}

.process-loop-track:hover .process-loop-marquee-reverse {
  animation-play-state: paused;
}

.process-chips {
  gap: 10px;
  width: max-content;
  margin: 0;
  padding: 0 10px 0 0;
  list-style: none;
  display: flex;
}

.process-chip {
  border: var(--stroke) dashed #8a8a8a66;
  border-radius: var(--radius-sm);
  color: #ffffffd6;
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  white-space: nowrap;
  background: #262626;
  flex: none;
  padding: 4px 12px;
}

.process-tools {
  gap: 12px;
  width: max-content;
  margin: 0;
  padding: 0 12px 0 0;
  list-style: none;
  display: flex;
}

.process-tool {
  border: var(--stroke) dashed #8a8a8a66;
  border-radius: var(--radius-sm);
  background: #262626;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}

.process-tool-icon {
  max-width: 32px;
  max-height: 32px;
}

@keyframes process-marquee {
  0% {
    transform: translate(0);
  }

  to {
    transform: translate(-50%);
  }
}

.working {
  padding: 0 var(--gutter-rail) var(--section-pad-top);
  background: var(--graphite);
  color: var(--white);
  flex-direction: column;
  gap: 56px;
  display: flex;
}

.working-head {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-16);
  display: flex;
}

.working-title {
  max-width: 640px;
  color: var(--white);
  font: 400 var(--h1-size) / var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-ls);
  margin: 0;
}

.working-sub {
  max-width: 420px;
  color: var(--silver);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.working-film {
  aspect-ratio: 16 / 9;
  width: 100%;
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--cta-notch)),calc(100% - var(--cta-notch)) 100%,0 100%);
  transition: clip-path var(--dur-hover) var(--ease-out);
  background: #242424;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.working-film.is-started {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
}

.working-film-player {
  object-fit: cover;
  background: #242424;
  width: 100%;
  height: 100%;
  display: block;
}

.working-film-play {
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  color: var(--white);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out);
  background: linear-gradient(to top, #0000009e, #0000 55%), #0000002e;
  border: 0;
  flex-direction: column;
  padding: 0;
  display: flex;
  position: absolute;
  inset: 0;
}

.working-film-play[hidden] {
  display: none;
}

.working-film-play:is(:hover, :focus-visible) {
  background: linear-gradient(to top, #0000009e, #0000 55%), #00000052;
}

.working-film-play:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -6px;
}

.working-film-play-icon {
  border: var(--stroke) solid #fff6;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  width: 88px;
  height: 88px;
  transition: transform var(--dur-hover) var(--ease-out);
  background: #1a1a1a8c;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.working-film-play:is(:hover, :focus-visible) .working-film-play-icon {
  transform: scale(1.06);
}

.working-film-play-glyph {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}

.working-film-play-label {
  font: 400 var(--body-xs) / 1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px #0000008c;
}

.working-film-foot {
  pointer-events: none;
  text-shadow: 0 1px 12px #0000008c;
  transition: opacity var(--dur-hover) var(--ease-out),visibility var(--dur-hover);
  flex-direction: column;
  gap: 2px;
  display: flex;
  position: absolute;
  top: 24px;
  left: 24px;
}

.working-film.is-started .working-film-play, .working-film.is-started .working-film-foot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.working-film-name {
  color: var(--white);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.working-film-role {
  color: #ffffffb8;
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.working-stage {
  position: relative;
}

.working-subs {
  z-index: 1;
  align-items: center;
  gap: var(--space-4);
  pointer-events: none;
  width: min(76%, 820px);
  transition: opacity var(--dur-hover) var(--ease-out),visibility var(--dur-hover);
  flex-direction: column;
  display: flex;
  position: absolute;
  bottom: 32px;
  left: 50%;
  translate: -50%;
}

.working-film.is-started + .working-subs {
  opacity: 0;
  visibility: hidden;
}

.working-subs-lines {
  width: 100%;
  display: grid;
}

.working-line {
  color: var(--white);
  font: 400 clamp(20px,2.1vw,30px) / 1.25 var(--font-display);
  letter-spacing: -.045em;
  text-align: center;
  text-shadow: 0 2px 18px #000000b3;
  text-wrap: balance;
  opacity: 0;
  transition: opacity .7s var(--ease-out),translate .7s var(--ease-out);
  grid-area: 1 / 1;
  align-self: end;
  margin: 0;
  translate: 0 8px;
}

.working-line.is-on {
  opacity: 1;
  translate: 0;
}

.working-subs-dots {
  pointer-events: auto;
  gap: 4px;
  display: flex;
}

.working-subs-dot {
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  width: 28px;
  height: 24px;
  padding: 0;
  display: grid;
}

.working-subs-dot:before {
  content: "";
  width: 16px;
  height: 2px;
  transition: background var(--dur-hover) var(--ease-out);
  background: #ffffff59;
}

.working-subs-dot[aria-pressed="true"]:before {
  background: var(--white);
}

.working-subs-dot:focus-visible {
  outline: 1px solid var(--white);
}

.testimonials {
  padding: var(--section-pad-top) var(--gutter-rail);
  background: var(--graphite);
  color: var(--white);
  flex-direction: column;
  gap: 80px;
  display: flex;
  position: relative;
}

.testimonials-corner {
  width: 61px;
  height: 61px;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(90deg);
}

.testimonials-head {
  gap: var(--space-6);
  flex-direction: column;
  max-width: 586px;
  display: flex;
}

.testimonials-title {
  color: var(--white);
  font: 400 var(--h1-size) / var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-ls);
  margin: 0;
}

.testimonials-sub {
  color: var(--silver);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.testimonials-grid {
  max-width: var(--container-nav);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  height: 560px;
  margin: 0 auto;
  display: grid;
}

.testimonial-a {
  background: #242424;
  flex-direction: column;
  grid-area: 1 / 1 / 2 / 2;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 16px;
  display: flex;
}

.testimonial-b {
  background: #242424;
  flex-direction: column;
  grid-area: 2 / 1 / 3 / 2;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 16px;
  display: flex;
}

.testimonial-body {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.testimonial-quote-mark {
  width: 24px;
  height: 24px;
}

.testimonial-text {
  color: var(--silver);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.testimonial-em {
  color: var(--white);
}

.testimonial-person {
  align-items: center;
  gap: 16px;
  margin: 0;
  display: flex;
}

.testimonial-avatar {
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  width: 48px;
  height: 48px;
}

.testimonial-meta {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.testimonial-name {
  color: var(--white);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.testimonial-role {
  color: var(--white);
  opacity: .6;
  font: 400 var(--body-xs) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.testimonial-video {
  background: #242424;
  flex-direction: column;
  grid-area: 1 / 2 / 3 / 3;
  justify-content: space-between;
  margin: 0;
  padding: 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.testimonial-video-img {
  object-fit: cover;
  object-position: 62% center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.testimonial-video-play {
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #ffffff26;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
  position: relative;
}

.testimonial-video-play-icon {
  width: 24px;
  height: 24px;
}

.testimonial-video-person {
  background: linear-gradient(#1a1a1a00, #1a1a1a99);
  flex-direction: column;
  gap: 3px;
  margin: 0 -16px -16px;
  padding: 40px 16px 16px;
  display: flex;
  position: relative;
}

.testimonial-video-name {
  color: var(--white);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.testimonial-stat {
  transition: background var(--dur-hover) var(--ease-out);
  background: #242424;
  flex-direction: column;
  grid-area: 1 / 3 / 2 / 4;
  justify-content: space-between;
  padding: 10px;
  display: flex;
}

.testimonial-stat:hover {
  background: #2a2a2a;
}

.testimonial-stat-body {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.testimonial-stat-value {
  color: var(--white);
  font: 400 var(--h2-size) / var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-ls);
}

.testimonial-stat-label {
  color: var(--silver);
  font: 400 calc(var(--body-md) - 2px) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.testimonial-stat-foot {
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.testimonial-stat-arrow {
  width: 14px;
  height: 14px;
}

.testimonial-cta {
  transition: background var(--dur-hover) var(--ease-out);
  background: #242424;
  grid-area: 1 / 4 / 2 / 5;
  align-items: flex-end;
  padding: 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.testimonial-cta:hover {
  background: #2a2a2a;
}

.testimonial-cta-dots {
  color: #ffffff57;
  width: 197px;
  height: 145px;
  font: 7px / 7px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: -10px;
  left: -26px;
  overflow: hidden;
}

.testimonial-cta-arrow {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 16px;
  right: 16px;
}

.testimonial-cta-label {
  color: var(--white);
  font: 400 var(--h3-size) / var(--h3-lh) var(--font-display);
  letter-spacing: var(--h3-ls);
  position: relative;
}

.testimonial-wide {
  background: #242424;
  flex-direction: column;
  grid-area: 2 / 3 / 3 / 5;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 24px;
  display: flex;
}

.testimonial-wide-text {
  max-width: 596px;
  color: var(--silver);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.testimonial-wide-foot {
  align-items: left;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  display: flex;
}

.testimonial-wide-name {
  color: var(--white);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.testimonial-wide-role {
  color: var(--white);
  opacity: .6;
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.testimonial-wide-logo {
  width: 95px;
  height: 20px;
}

.faq {
  padding: 0 var(--gutter-nav);
  background: var(--background);
  position: relative;
}

.faq-outer {
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-bottom: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  margin: 0 auto;
  padding: 56px 60px 80px;
  position: relative;
}

.faq-dot-l {
  background: radial-gradient(circle,var(--ink) 1px,var(--white) 1.5px);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 46px;
  left: -10px;
}

.faq-dot-r {
  background: radial-gradient(circle,var(--ink) 1px,var(--white) 1.5px);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 46px;
  right: -10px;
}

.faq-inner {
  border-top: var(--stroke) solid var(--rail);
  grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
  gap: 24px;
  padding-top: 56px;
  display: grid;
}

.faq-aside {
  border-right: var(--stroke) solid var(--rail);
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.faq-aside-copy {
  gap: var(--space-6);
  flex-direction: column;
  display: flex;
  position: relative;
}

.faq-title {
  color: var(--ink);
  font: 400 var(--h2-size) / var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0;
}

.faq-sub {
  max-width: 476px;
  color: var(--muted);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.faq-decor {
  color: #bfbfbf;
  width: 1109px;
  height: 470px;
  font: 10px / 10px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: 190px;
  left: -428px;
  overflow: hidden;
}

.faq-aside-foot {
  flex-direction: column;
  gap: 16px;
  display: flex;
  position: relative;
}

.faq-more {
  color: var(--ink);
  font: 400 var(--body-lg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.faq-link {
  --cta-icon-w: 16px;
  --cta-icon-h: 16px;
  color: var(--dim);
  font: 400 var(--caption-rg) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  transition: color var(--dur-hover) var(--ease-out);
  align-items: center;
  gap: 12px;
  display: inline-flex;
}

.faq-link:hover {
  color: var(--ink);
}

.faq-list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.faq-item {
  background: var(--card);
  transition: background var(--dur-accordion) var(--ease-out);
}

.faq-item::details-content {
  block-size: 0;
  transition: block-size var(--dur-accordion) var(--ease-out),content-visibility var(--dur-accordion) allow-discrete;
  overflow: hidden;
}

.faq-item[open]::details-content {
  block-size: auto;
}

.faq-item[open] {
  background: var(--surface);
}

.faq-question {
  cursor: pointer;
  transition: padding-bottom var(--dur-accordion) var(--ease-out);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 32px;
  list-style: none;
  display: flex;
}

.faq-item[open] .faq-question {
  padding-bottom: 24px;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 4px;
}

.faq-question-text {
  color: var(--ink);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.faq-question-icon {
  background: url("/images/faq/plus.svg") center / 16px no-repeat;
  flex: none;
  width: 16px;
  height: 16px;
}

.faq-item[open] .faq-question-icon {
  background-image: url("/images/faq/minus.svg");
}

.faq-answer {
  color: var(--muted);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
  padding: 0 32px 32px;
}

.tgrid-light {
  padding: 0 var(--gutter-nav);
  border-top: var(--stroke) solid #f2f2f2;
  border-bottom: var(--stroke) solid #f2f2f2;
  background: var(--background);
}

.tgrid-light-rail {
  max-width: var(--container-nav);
  border-right: var(--stroke) solid #f2f2f2;
  border-left: var(--stroke) solid #f2f2f2;
  background-image: linear-gradient(to right, #f2f2f2 1px, #0000 1px), linear-gradient(#f2f2f2 1px, #0000 1px);
  background-position: 40px 0;
  background-size: 15px 16px;
  height: 80px;
  margin: 0 auto;
}

.tgrid-dark {
  padding: 0 var(--gutter-nav);
  border-top: var(--stroke) solid #262626;
  border-bottom: var(--stroke) solid #262626;
  background: var(--graphite);
}

.tgrid-dark-rail {
  max-width: var(--container-nav);
  border-right: var(--stroke) solid #262626;
  border-left: var(--stroke) solid #262626;
  background-image: linear-gradient(to right, #262626 1px, #0000 1px), linear-gradient(#262626 1px, #0000 1px);
  background-position: 40px 0;
  background-size: 15px 16px;
  height: 80px;
  margin: 0 auto;
}

.footer {
  padding: 0 var(--gutter-nav);
  background: var(--background);
  position: relative;
}

.footer-ascii-left {
  color: #bfbfbf;
  width: 260px;
  font: 10px / 10px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.footer-ascii-right {
  color: #bfbfbf;
  width: 260px;
  font: 10px / 10px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.footer-rail-top {
  max-width: var(--container-nav);
  height: calc(48px + var(--cta-notch));
  margin: 0 auto calc(-1 * var(--cta-notch));
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
}

.footer-cta {
  max-width: var(--container-nav);
  background: var(--graphite);
  min-height: 400px;
  color: var(--white);
  clip-path: polygon(0 var(--cta-notch),var(--cta-notch) 0,100% 0,100% 100%,0 100%);
  align-items: flex-end;
  margin: 0 auto;
  padding: 64px 48px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.footer-cta-bg {
  object-fit: cover;
  opacity: .5;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.footer-cta-row {
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
  display: flex;
  position: relative;
}

.footer-cta-title {
  color: #eeeeec;
  max-width: 567px;
  font: 400 var(--h1-size) / var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-ls);
  margin: 0;
}

.footer-cta-strike {
  display: inline-block;
  position: relative;
}

.footer-cta-scribble {
  pointer-events: none;
  width: 178px;
  height: 68px;
  position: absolute;
  top: -6px;
  left: -4px;
}

.footer-cta-tag {
  border: var(--stroke) solid #000;
  background: var(--white);
  color: #000;
  font: 400 var(--caption-rg) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  border-radius: 4px;
  padding: 4px 8px;
  position: absolute;
  top: 40px;
  left: 100px;
  transform: rotate(-3.31deg);
}

.footer-cta-btn {
  background: var(--white);
  color: var(--graphite);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  letter-spacing: var(--body-ls);
  clip-path: var(--notch-clip);
  transition: background var(--dur-hover) var(--ease-out);
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  display: inline-flex;
}

.footer-cta-btn:hover {
  background: var(--surface);
}

.footer-cta-btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--silver);
  outline: none;
}

.footer-grid {
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  grid-template-columns: 336px 1fr;
  gap: 128px;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
}

.footer-mark {
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  margin: 0 auto;
  padding: 10px 0 0;
  position: relative;
  overflow: hidden;
}

.footer-mark-img {
  opacity: .11;
  width: 101.49%;
  max-width: none;
  height: auto;
  display: block;
}

.footer-mark-veil {
  pointer-events: none;
  background: linear-gradient(#fff0, #ffffffd9);
  position: absolute;
  inset: 0;
}

.footer-rail-bottom {
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-bottom: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  height: 48px;
  margin: 0 auto;
}

.footer-brand {
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  display: flex;
}

.footer-brand-top {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.footer-logo {
  width: 123px;
  height: 16px;
}

.footer-tagline {
  color: var(--silver);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.footer-legal {
  color: var(--silver);
  font: 400 var(--body-xs) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  display: flex;
}

.footer-legal-item {
  white-space: nowrap;
}

.footer-legal-sep {
  font-size: var(--body-sm);
}

.footer-legal-link {
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}

.footer-legal-link:hover {
  color: var(--ink);
}

.footer-nav {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}

.footer-col {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.footer-col-title {
  color: var(--ink);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.footer-links {
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.footer-link {
  color: var(--silver);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  transition: color var(--dur-micro) var(--ease-out);
  display: inline-block;
}

.footer-link:hover {
  color: var(--ink);
}

.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.stories {
  padding: 56px var(--gutter-nav) 60px;
  background: var(--background);
  position: relative;
  overflow: hidden;
}

.stories-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  background: linear-gradient(to right,transparent calc(47.85% - var(--stroke)),var(--rail) calc(47.85% - var(--stroke)),var(--rail) 47.85%,transparent 47.85%);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.stories-decor {
  color: #ededed;
  width: 630px;
  font: 9px / 9px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 660px);
  overflow: hidden;
}

.stories-inner {
  max-width: var(--container-nav);
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  align-items: end;
  margin: 0 auto;
  display: grid;
  position: relative;
}

.stories-copy {
  align-items: flex-start;
  gap: var(--space-6);
  padding: 0 0 52px var(--gutter);
  flex-direction: column;
  display: flex;
}

.stories-title {
  color: var(--ink);
  font: 400 var(--h1-size) / var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-ls);
  margin: 0;
}

.stories-sub {
  color: var(--dim);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.stories-cta {
  --cta-icon-i: 11;
  --cta-icon-dir: 1;
  --cta-icon-w: 6px;
  --cta-icon-h: 11px;
  clip-path: var(--notch-clip);
  background: var(--ink);
  color: var(--white);
  font: 400 var(--body-rg) / 1.25 var(--font-body);
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  text-decoration: none;
  display: inline-flex;
}

.stories-feature {
  touch-action: pan-y;
  padding: 0 16px 0 17px;
  display: grid;
  position: relative;
}

.story {
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s var(--ease-out),translate 0s .35s,visibility 0s .35s;
  grid-area: 1 / 1;
  display: grid;
  translate: 0 14px;
}

.story.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity .6s var(--ease-out),translate .8s var(--ease-out),visibility 0s;
  translate: 0;
}

.story-hit {
  grid-template-columns: minmax(0, 399fr) minmax(0, 247fr);
  gap: 10px;
  text-decoration: none;
  display: grid;
}

.story-cover {
  aspect-ratio: 399 / 353;
  clip-path: polygon(0 0,100% 0,100% 100%,var(--notch-xl) 100%,0 calc(100% - var(--notch-xl)));
  background: var(--graphite);
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
}

.story-cover-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-hover) var(--ease-out);
  position: absolute;
  inset: 0;
}

.story-cover-logo {
  z-index: 1;
  filter: brightness(0) invert();
  width: auto;
  height: 24px;
  position: relative;
}

.story-stat {
  clip-path: polygon(0 0,calc(100% - var(--notch-xl)) 0,100% var(--notch-xl),100% 100%,0 100%);
  background: var(--surface);
  transition: background var(--dur-hover) var(--ease-out);
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.story-stat-arrow {
  filter: invert();
  width: 24px;
  height: 24px;
  transition: translate var(--dur-hover) var(--ease-out);
  position: absolute;
  top: 16px;
  left: 16px;
}

.story-stat-decor {
  color: #bcbcbc;
  width: 215px;
  height: 184px;
  font: 8px / 8px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: 44px;
  left: 16px;
  overflow: hidden;
}

.story-stat-value {
  color: var(--ink);
  font: 400 var(--h2-size) / 1.15 var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0;
  position: relative;
}

.story-stat-label {
  color: var(--muted);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  margin: 0;
  position: relative;
}

.story-quote {
  clip-path: polygon(var(--notch-xl) 0,100% 0,100% calc(100% - var(--notch-xl)),calc(100% - var(--notch-xl)) 100%,0 100%,0 var(--notch-xl));
  background: var(--surface);
  transition: background var(--dur-hover) var(--ease-out);
  flex-direction: column;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 24px;
  display: flex;
}

.story-quote-text {
  color: var(--dim);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.story-quote-foot {
  align-items: center;
  gap: 12px;
  display: flex;
}

.story-quote-avatar {
  object-fit: cover;
  width: 40px;
  height: 40px;
}

.story-quote-meta {
  flex-direction: column;
  display: flex;
}

.story-quote-name {
  color: var(--ink);
  font: 400 var(--body-rg) / 1.4 var(--font-body);
}

.story-quote-role {
  color: var(--muted);
  font: 400 var(--body-sm) / 1.4 var(--font-body);
}

.story-dots {
  gap: 8px;
  margin-top: 22px;
  display: flex;
  position: absolute;
  top: 100%;
  left: 17px;
}

.story-dot {
  background: var(--rail);
  box-sizing: content-box;
  cursor: pointer;
  width: 28px;
  height: 3px;
  transition: background var(--dur-micro) var(--ease-out);
  background-clip: content-box;
  border: 0;
  padding: 11px 0;
}

.story-dot.is-active {
  background-color: var(--ink);
}

.ledger {
  padding: 0 var(--gutter-nav) var(--section-pad-top);
  background: var(--background);
  position: relative;
}

.ledger-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.ledger-inner {
  max-width: var(--container-nav);
  margin: 0 auto;
  position: relative;
}

.ledger-bar {
  border-bottom: var(--stroke) solid var(--rail);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 17px 16px;
  display: flex;
}

.ledger-filters {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.ledger-filter {
  border: var(--stroke) solid var(--border);
  background: var(--background);
  color: var(--dim);
  font: 400 var(--body-sm) / 1.5 var(--font-body);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out);
  padding: 8px 16px;
}

.ledger-filter.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.ledger-search {
  border: var(--stroke) solid var(--border);
  align-items: center;
  gap: 10px;
  width: 240px;
  padding: 9px 17px;
  display: flex;
}

.ledger-search-input {
  width: 100%;
  color: var(--ink);
  font: 400 var(--body-sm) / 1.3 var(--font-body);
  background: none;
  border: 0;
  outline: none;
}

.ledger-search-icon {
  flex: none;
  width: 10px;
  height: 10px;
}

.ledger-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
  padding: 64px 0 0;
  display: grid;
}

.ledger-card {
  flex-direction: column;
  display: flex;
}

.ledger-card-visual {
  aspect-ratio: 424 / 320;
  background: #ececec;
  width: 100%;
  max-height: 320px;
  display: block;
  position: relative;
  overflow: hidden;
}

.ledger-card-shot {
  border-radius: var(--radius-sm);
  width: 83%;
  height: auto;
  transition: transform var(--dur-hover) var(--ease-out);
  position: absolute;
  top: 9.7%;
  left: 50%;
  transform: translate(-50%);
}

.ledger-card-copy {
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  display: flex;
}

.ledger-card-title {
  color: var(--ink);
  font: 400 var(--h6-size) / var(--h6-lh) var(--font-display);
  letter-spacing: var(--h6-ls);
  margin: 0;
}

.ledger-empty {
  color: var(--muted);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  margin: 48px 0 0;
}

.story-hit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.story-hit:is(:hover, :focus-visible) .story-cover-img {
  transform: scale(1.05);
}

.story-hit:is(:hover, :focus-visible) .story-stat, .story-hit:is(:hover, :focus-visible) .story-quote {
  background: var(--border);
}

.story-hit:is(:hover, :focus-visible) .story-stat-arrow {
  translate: 4px -4px;
}

.ledger-card-visual:is(:hover, :focus-visible) .ledger-card-shot, .work-feature-visual:is(:hover, :focus-visible) .work-shot, .work-feature-visual-flip:is(:hover, :focus-visible) .work-shot, .work-card-visual:is(:hover, :focus-visible) .work-card-shot {
  transform: translate(-50%)scale(1.03);
}

.proof-work:is(:hover, :focus-visible) .proof-work-shot, .proof-work-cut:is(:hover, :focus-visible) .proof-work-shot {
  transform: scale(1.03);
}

.voices {
  padding: var(--section-pad-top) var(--gutter-rail);
  background: var(--graphite);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.voices-corner {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.voices-inner {
  max-width: var(--container-nav);
  margin: 0 auto;
}

.voices-title {
  color: var(--white);
  font: 400 var(--h2-size) / var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0 0 16px;
}

.voices-sub {
  color: var(--silver);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.voices-stage {
  margin-top: 56px;
  display: grid;
}

.voice {
  background: var(--ink-2);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out),visibility var(--dur-hover);
  text-align: center;
  flex-direction: column;
  grid-area: 1 / 1;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 80px 40px;
  display: flex;
  position: relative;
}

.voice.is-active {
  visibility: visible;
  opacity: 1;
}

.voice-badge {
  clip-path: var(--notch-clip);
  background: var(--glass);
  color: var(--white);
  font: 400 var(--caption-xs) / 1.4 var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  display: flex;
  position: absolute;
  top: 24px;
  right: 24px;
}

.voice-badge-icon {
  filter: brightness(0) invert();
  width: 8px;
  height: 8px;
}

.voice-logo {
  filter: brightness(0) invert();
  width: auto;
  height: 32px;
}

.voice-text {
  max-width: 60ch;
  color: var(--silver);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  text-align: center;
  margin: 0;
}

.voice-foot {
  align-items: center;
  gap: 12px;
  display: flex;
}

.voice-avatar {
  object-fit: cover;
  width: 40px;
  height: 40px;
}

.voice-meta {
  text-align: left;
  flex-direction: column;
  display: flex;
}

.voice-name {
  color: var(--white);
  font: 400 var(--body-rg) / 1.4 var(--font-body);
}

.voice-role {
  color: var(--silver);
  font: 400 var(--body-sm) / 1.4 var(--font-body);
}

.voices-tabs {
  border-top: var(--stroke) solid #ffffff14;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  display: grid;
}

.voices-tab {
  cursor: pointer;
  height: 96px;
  transition: background var(--dur-micro) var(--ease-out);
  background: none;
  border: 0;
  place-items: center;
  padding: 0 16px;
  display: grid;
  position: relative;
}

.voices-tab.is-active {
  background: var(--ink-2);
}

.voices-tab-logo {
  filter: brightness(0) invert();
  opacity: .55;
  width: auto;
  height: 24px;
  transition: opacity var(--dur-micro) var(--ease-out);
}

.voices-tab-timer {
  background: var(--white);
  transform-origin: 0;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
}

.voices-tab.is-active .voices-tab-logo {
  opacity: 1;
}

.landed {
  min-height: 62vh;
  padding: 96px var(--gutter-nav);
  background: var(--graphite);
  color: var(--white);
  align-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.landed-ascii {
  color: #ffffff1a;
  width: 921px;
  height: 588px;
  font: 6.4px / 6.4px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: -117px;
  left: -237px;
  overflow: hidden;
}

.landed-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid #ffffff14;
  border-left: var(--stroke) solid #ffffff14;
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.landed-inner {
  z-index: 1;
  max-width: var(--container-nav);
  padding: 0 var(--rail-inset);
  margin: 0 auto;
  position: relative;
}

.landed-eyebrow {
  margin: 0 0 var(--space-6);
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.landed-eyebrow-icon {
  width: 5px;
  height: 10px;
}

.landed-eyebrow-text {
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
}

.landed-title {
  color: var(--white);
  font: 400 var(--h1-size) / var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-ls);
  margin: 0 0 20px;
}

.landed-sub {
  max-width: 52ch;
  color: var(--silver);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0 0 40px;
}

.landed-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  display: flex;
}

.landed-cta {
  --cta-icon-i: 12;
  --cta-icon-dir: 1;
  --cta-icon-w: 6px;
  --cta-icon-h: 11px;
  clip-path: var(--notch-clip);
  background: var(--white);
  color: var(--graphite);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  letter-spacing: var(--body-ls);
  transition: background var(--dur-hover) var(--ease-out);
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  text-decoration: none;
  display: inline-flex;
}

.landed-cta:hover {
  background: var(--surface);
}

.landed-back {
  color: var(--silver);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  text-underline-offset: 4px;
  text-decoration: underline;
}

.landed-link {
  color: var(--white);
  text-underline-offset: 4px;
  text-decoration: underline;
}

.job-head {
  padding: var(--section-pad-top) var(--gutter-nav) 56px;
  background: var(--background);
  position: relative;
}

.job-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.job-head-inner {
  max-width: calc(74ch + 2 * var(--rail-inset));
  padding: 0 var(--rail-inset);
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.job-crumbs {
  color: var(--dim);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  display: flex;
}

.job-crumbs-icon {
  width: 5px;
  height: 10px;
}

.job-crumb-link {
  color: var(--dim);
  text-decoration: none;
}

.job-crumb-sep {
  color: var(--muted);
}

.job-crumb-current {
  color: var(--ink);
}

.job-title {
  color: var(--ink);
  font: 400 var(--h1-size) / var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-ls);
  margin: 0 0 16px;
}

.job-intro {
  max-width: 52ch;
  color: var(--dim);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.job-meta {
  color: var(--dim);
  font: 400 var(--caption-rg) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  margin: 0 0 32px;
}

.job-cta {
  --cta-icon-i: 9;
  --cta-icon-dir: 1;
  --cta-icon-w: 6px;
  --cta-icon-h: 11px;
  clip-path: var(--notch-clip);
  background: var(--ink);
  color: var(--white);
  font: 400 var(--body-rg) / 1.25 var(--font-body);
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  text-decoration: none;
  display: inline-flex;
}

.job-body {
  padding: 56px var(--gutter-nav) var(--section-pad-top);
  background: var(--background);
  border-top: var(--stroke) solid var(--rail);
  position: relative;
}

.job-inner {
  max-width: calc(74ch + 2 * var(--rail-inset));
  padding: 0 var(--rail-inset);
  margin: 0 auto;
  position: relative;
}

.job-inner .rich-text h2 {
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  letter-spacing: var(--h4-ls);
}

.job-inner .rich-text p, .job-inner .rich-text li {
  font-size: var(--body-md);
}

.roles-title {
  color: var(--muted);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  margin: 0 0 24px;
}

.roles-list {
  border-top: var(--stroke) solid var(--border);
  margin: 0;
  padding: 0;
  list-style: none;
}

.roles-item {
  border-bottom: var(--stroke) solid var(--border);
}

.roles-link {
  color: var(--ink);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 24px;
  padding: 28px 0;
  text-decoration: none;
  display: grid;
}

.roles-name {
  font: 400 var(--h4-size) / var(--h4-lh) var(--font-display);
  letter-spacing: var(--h4-ls);
}

.roles-meta {
  color: var(--dim);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  grid-row: 2;
}

.roles-view {
  color: var(--ink);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  text-underline-offset: 4px;
  grid-row: 1 / span 2;
  align-self: center;
  text-decoration: underline;
}

.job-apply {
  padding: var(--section-pad-top) var(--gutter-nav);
  background: var(--graphite);
  color: var(--white);
  scroll-margin-top: 64px;
  position: relative;
}

.job-rail-dark {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid #ffffff14;
  border-left: var(--stroke) solid #ffffff14;
  background: linear-gradient(to right,transparent calc(47.85% - var(--stroke)),#ffffff14 calc(47.85% - var(--stroke)),#ffffff14 47.85%,transparent 47.85%);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.job-apply-inner {
  max-width: var(--container-nav);
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  align-items: start;
  margin: 0 auto;
  display: grid;
  position: relative;
}

.job-apply-copy {
  padding: 0 var(--gutter) 0 var(--rail-inset);
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.job-apply-title {
  color: var(--white);
  font: 400 var(--h2-size) / var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0 0 8px;
}

.job-apply-text {
  max-width: 48ch;
  color: var(--silver);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.job-questions {
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 0 0 1.4em;
  display: flex;
}

.job-question {
  color: var(--white);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  padding-left: .4em;
}

.job-form {
  clip-path: polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg));
  background: var(--ink-2);
  flex-direction: column;
  gap: 28px;
  margin-left: 17px;
  padding: 32px;
  display: flex;
}

.transition {
  z-index: 100;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: clip;
}

.transition__panel {
  opacity: 0;
  flex-flow: row;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.transition__col {
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.transition__pixel {
  aspect-ratio: 1;
  background-color: var(--ink);
  width: 100%;
}

body[data-nav-theme="dark"] .transition__pixel {
  background-color: var(--white);
}

.gtm-noscript {
  visibility: hidden;
  display: none;
}

.preloader {
  z-index: 300;
  background: var(--ink);
  justify-content: center;
  align-items: center;
  animation: 0s linear 4s forwards preloader-failsafe;
  display: flex;
  position: fixed;
  inset: 0;
}

.preloader-ascii {
  color: #ffffff1f;
  font: 10px / 10px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.preloader-logo {
  width: clamp(150px, 18vw, 260px);
  height: auto;
  color: var(--white);
  --logo-ground: var(--ink);
  opacity: 0;
  position: relative;
}

@keyframes preloader-failsafe {
  to {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce), (scripting: none) {
  .preloader {
    display: none;
  }
}

.legal-head {
  padding: var(--section-pad-top) var(--gutter-nav) 40px;
  background: var(--background);
  position: relative;
}

.legal-head-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.legal-head-inner {
  max-width: calc(74ch + 2 * var(--rail-inset));
  padding: 0 var(--rail-inset);
  margin: 0 auto;
  position: relative;
}

.legal-crumbs {
  color: var(--dim);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  display: flex;
}

.legal-crumbs-icon {
  width: 5px;
  height: 10px;
}

.legal-crumb-link {
  color: var(--dim);
  text-decoration: none;
}

.legal-crumb-sep {
  color: var(--muted);
}

.legal-crumb-current {
  color: var(--ink);
}

.legal-title {
  color: var(--ink);
  font: 400 var(--h2-size) / var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0 0 12px;
}

.legal-updated {
  color: var(--muted);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  margin: 0;
}

.legal-body {
  padding: 0 var(--gutter-nav) var(--section-pad-top);
  background: var(--background);
  position: relative;
}

.legal-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.legal-inner {
  max-width: calc(74ch + 2 * var(--rail-inset));
  padding: 0 var(--rail-inset);
  margin: 0 auto;
  position: relative;
}

.legal-inner .rich-text h2 {
  margin-top: var(--space-16);
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  letter-spacing: var(--h5-ls);
}

.legal-inner .rich-text p, .legal-inner .rich-text li {
  color: var(--dim);
  font-size: var(--body-rg);
}

.legal-inner .rich-text strong {
  color: var(--ink);
}

.legal-note {
  border-left: 3px solid var(--ink);
  background: var(--surface);
  margin: 0 0 40px;
  padding: 20px 24px;
}

.legal-note-title {
  color: var(--ink);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.legal-note-text {
  color: var(--dim);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  margin: 0;
}

.about-hero {
  padding: 64px var(--gutter-nav) 80px;
  background: var(--graphite);
  color: var(--white);
  border-top: var(--stroke) solid #ffffff14;
  position: relative;
  overflow: hidden;
}

.about-ascii-left {
  color: #ffffff1a;
  width: 921px;
  height: 588px;
  font: 6.4px / 6.4px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: -117px;
  left: -237px;
  overflow: hidden;
}

.about-ascii-right {
  color: #ffffff14;
  width: 1100px;
  height: 760px;
  font: 12px / 12px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  bottom: -260px;
  right: -420px;
  overflow: hidden;
}

.about-rail-dark {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid #ffffff14;
  border-left: var(--stroke) solid #ffffff14;
  background: linear-gradient(to right,transparent calc(47.85% - var(--stroke)),#ffffff14 calc(47.85% - var(--stroke)),#ffffff14 47.85%,transparent 47.85%);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.about-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  background: linear-gradient(to right,transparent calc(47.85% - var(--stroke)),var(--rail) calc(47.85% - var(--stroke)),var(--rail) 47.85%,transparent 47.85%);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.about-hero-inner {
  z-index: 1;
  max-width: var(--container-nav);
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  align-items: start;
  margin: 0 auto;
  display: grid;
  position: relative;
}

.about-hero-copy {
  align-items: flex-start;
  gap: var(--space-6);
  padding: 8px var(--gutter) 0 var(--rail-inset);
  flex-direction: column;
  display: flex;
}

.about-eyebrow {
  align-items: center;
  gap: 10px;
  margin: 0;
  display: inline-flex;
}

.about-eyebrow-icon {
  width: 5px;
  height: 10px;
}

.about-eyebrow-text {
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
}

.about-hero-word {
  color: var(--white);
  font: 300 clamp(72px,10vw,148px) / .85 var(--font-display);
  letter-spacing: -.07em;
  white-space: nowrap;
  margin: 8px 0 0;
}

.about-hero-meta {
  color: var(--silver);
  font: 400 var(--caption-rg) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  margin: 0;
}

.about-hero-defs {
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 1.6em;
  display: flex;
}

.about-hero-def {
  color: var(--silver);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  padding-left: .4em;
}

.about-hero-def::marker {
  color: var(--silver);
  font: 400 var(--caption-rg) var(--font-mono);
}

.about-facts {
  flex-direction: column;
  width: 100%;
  margin: 16px 0 0;
  display: flex;
}

.about-fact {
  border-top: var(--stroke) solid #ffffff14;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 14px 0;
  display: flex;
}

.about-fact-key {
  min-width: 128px;
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
}

.about-fact-value {
  color: var(--white);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  flex: 200px;
  margin: 0;
}

.about-hero-people {
  clip-path: polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg));
  background: var(--ink-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-left: 17px;
  padding: 24px;
  display: grid;
}

.about-hero-person {
  flex-direction: column;
  gap: 16px;
  margin: 0;
  display: flex;
}

.about-hero-photo {
  aspect-ratio: 4 / 5;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  object-fit: cover;
  background: var(--graphite);
  width: 100%;
  height: auto;
  display: block;
}

.about-hero-caption {
  flex-direction: column;
  gap: 6px;
  padding: 0 4px 4px;
  display: flex;
}

.about-hero-name {
  color: var(--white);
  font: 400 20px / 1.2 var(--font-display);
  letter-spacing: -.04em;
}

.about-hero-role {
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
}

.about-label {
  padding: 0 var(--rail-inset);
  color: var(--ink);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  align-items: center;
  gap: 12px;
  margin: 0;
  display: flex;
}

.about-label-dark {
  padding: 0 var(--rail-inset);
  color: var(--white);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  align-items: center;
  gap: 12px;
  margin: 0;
  display: flex;
}

.about-label-num {
  border: var(--stroke) solid currentColor;
  opacity: .6;
  padding: 2px 6px;
}

.about-qa {
  padding: 0 var(--rail-inset);
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.about-q {
  color: var(--ink);
  font: 400 var(--h5-size) / var(--h5-lh) var(--font-display);
  letter-spacing: var(--h5-ls);
  margin: 0;
}

.about-a {
  max-width: 58ch;
  color: var(--dim);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.about-split {
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  align-items: start;
  display: grid;
}

.about-name {
  padding: 120px var(--gutter-nav);
  background: var(--background);
  position: relative;
}

.about-name-inner {
  max-width: var(--container-nav);
  flex-direction: column;
  gap: 40px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.about-pair {
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  display: grid;
}

.about-why {
  padding: 120px var(--gutter-nav);
  background: var(--graphite);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.about-why-ascii {
  color: #ffffff12;
  width: 900px;
  height: 100%;
  font: 8px / 8px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: 0;
  right: -160px;
  overflow: hidden;
}

.about-why-inner {
  z-index: 1;
  max-width: var(--container-nav);
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  align-items: start;
  margin: 0 auto;
  display: grid;
  position: relative;
}

.about-why-copy {
  flex-direction: column;
  gap: 40px;
  display: flex;
}

.about-q-dark {
  color: var(--white);
  font: 400 var(--h5-size) / var(--h5-lh) var(--font-display);
  letter-spacing: var(--h5-ls);
  margin: 0;
}

.about-a-dark {
  max-width: 52ch;
  color: var(--silver);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.about-versus-wrap {
  padding: 0 var(--rail-inset);
}

.about-versus {
  border-collapse: collapse;
  width: 100%;
}

.about-versus-caption {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.about-versus-old-head {
  width: 50%;
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-align: left;
  text-transform: uppercase;
  padding: 0 24px 16px 0;
}

.about-versus-new-head {
  color: var(--white);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-align: left;
  text-transform: uppercase;
  padding: 0 0 16px;
}

.about-versus-row {
  border-top: var(--stroke) solid #ffffff1f;
}

.about-versus-old {
  color: #fff6;
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  vertical-align: top;
  padding: 28px 24px 28px 0;
  -webkit-text-decoration: line-through #ffffff4d;
  text-decoration: line-through #ffffff4d;
  text-decoration-thickness: 1px;
}

.about-versus-new {
  color: var(--white);
  font: 400 20px / 1.35 var(--font-display);
  letter-spacing: -.03em;
  vertical-align: top;
  padding: 26px 0;
}

.about-founders {
  padding: 120px var(--gutter-nav);
  background: var(--background);
  position: relative;
}

.about-founders-inner {
  max-width: var(--container-nav);
  flex-direction: column;
  gap: 64px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.about-people {
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  display: grid;
}

.about-person {
  margin: 0 var(--rail-inset);
  clip-path: polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg));
  background: var(--surface);
  flex-direction: column;
  display: flex;
}

.about-person-body {
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  display: flex;
}

.about-person-head {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.about-person-name {
  color: var(--ink);
  font: 400 28px / 1.2 var(--font-display);
  letter-spacing: -.05em;
  margin: 0;
}

.about-person-role {
  color: var(--muted);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  margin: 0;
}

.about-person-bio {
  color: var(--dim);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  margin: 0;
}

.about-person-stat {
  border-top: var(--stroke) solid var(--border);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
  padding-top: 20px;
  display: flex;
}

.about-person-num {
  color: var(--ink);
  font: 300 48px / 1 var(--font-display);
  letter-spacing: -.06em;
  white-space: nowrap;
}

.about-person-arrow {
  color: var(--muted);
  margin: 0 .12em;
}

.about-person-caption {
  max-width: 26ch;
  color: var(--muted);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
}

.about-statement {
  padding: 0 var(--rail-inset);
  color: var(--ink);
  font: 400 var(--h2-size) / var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0;
}

.about-statement-dim {
  color: var(--muted);
}

.about-where {
  padding: 120px var(--gutter-nav);
  background: var(--background);
  border-top: var(--stroke) solid var(--rail);
  position: relative;
}

.about-where-inner {
  max-width: var(--container-nav);
  flex-direction: column;
  gap: 64px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.about-working {
  padding: 120px var(--gutter-nav) 120px;
  background: var(--background);
  border-top: var(--stroke) solid var(--rail);
  position: relative;
}

.about-working-inner {
  max-width: var(--container-nav);
  flex-direction: column;
  gap: 64px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.about-row-first {
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  align-items: start;
  display: grid;
}

.about-row {
  border-top: var(--stroke) solid var(--border);
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  align-items: start;
  padding-top: 64px;
  display: grid;
}

.about-clients {
  padding: 0 var(--rail-inset);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 16px;
  margin: 0;
  list-style: none;
  display: grid;
}

.about-client {
  min-width: 0;
}

.about-client-link {
  color: var(--ink);
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  display: flex;
}

.about-client-visual {
  aspect-ratio: 4 / 3;
  background: #242424;
  display: block;
  position: relative;
  overflow: hidden;
}

.about-client-field {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.about-client-shot {
  border-radius: var(--radius-sm);
  width: 70%;
  height: auto;
  transition: transform var(--dur-hover) var(--ease-out);
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translate(-50%);
}

.about-client-link:hover .about-client-shot {
  transform: translate(-50%, -5%);
}

.about-client-name {
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
}

.about-steps {
  clip-path: inset(var(--stroke) 0 0 0);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-step {
  padding: 20px var(--rail-inset);
  border-top: var(--stroke) solid var(--border);
  align-items: baseline;
  gap: 24px;
  display: flex;
}

.about-step-num {
  color: var(--muted);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
}

.about-step-text {
  color: var(--ink);
  font: 400 20px / 1.35 var(--font-display);
  letter-spacing: -.03em;
}

.about-start {
  border-top: var(--stroke) solid var(--border);
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  align-items: end;
  padding-top: 64px;
  display: grid;
}

.about-start-q {
  color: var(--ink);
  font: 400 var(--h2-size) / var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0;
}

.about-cta {
  --cta-icon-i: 11;
  --cta-icon-dir: 1;
  --cta-icon-w: 6px;
  --cta-icon-h: 11px;
  margin: 0 var(--rail-inset);
  clip-path: var(--notch-clip);
  background: var(--ink);
  color: var(--white);
  font: 400 var(--body-rg) / 1.25 var(--font-body);
  justify-self: start;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  text-decoration: none;
  display: inline-flex;
}

.brief {
  padding: 64px var(--gutter-nav) 80px;
  background: var(--graphite);
  color: var(--white);
  border-top: var(--stroke) solid #ffffff14;
  position: relative;
  overflow: hidden;
}

.brief-ascii-left {
  color: #ffffff1a;
  width: 921px;
  height: 588px;
  font: 6.4px / 6.4px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: -117px;
  left: -237px;
  overflow: hidden;
}

.brief-ascii-right {
  color: #ffffff14;
  width: 1100px;
  height: 760px;
  font: 12px / 12px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  bottom: -260px;
  right: -420px;
  overflow: hidden;
}

.brief-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid #ffffff14;
  border-left: var(--stroke) solid #ffffff14;
  background: linear-gradient(to right,transparent calc(47.85% - var(--stroke)),#ffffff14 calc(47.85% - var(--stroke)),#ffffff14 47.85%,transparent 47.85%);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.brief-inner {
  z-index: 1;
  max-width: var(--container-nav);
  grid-template-columns: minmax(0, 631fr) minmax(0, 689fr);
  align-items: start;
  margin: 0 auto;
  display: grid;
  position: relative;
}

.brief-copy {
  align-items: flex-start;
  gap: var(--space-6);
  padding: 8px var(--gutter) 0 var(--rail-inset);
  flex-direction: column;
  display: flex;
}

.brief-eyebrow {
  align-items: center;
  gap: 10px;
  margin: 0;
  display: inline-flex;
}

.brief-eyebrow-icon {
  width: 5px;
  height: 10px;
}

.brief-eyebrow-text {
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
}

.brief-title {
  color: var(--white);
  font: 400 var(--h1-size) / var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-ls);
  margin: 0;
}

.brief-sub {
  max-width: 46ch;
  color: var(--silver);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.brief-facts {
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 24px 0 0;
  display: flex;
}

.brief-fact {
  border-top: var(--stroke) solid #ffffff14;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 14px 0;
  display: flex;
}

.brief-fact-key {
  min-width: 128px;
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
}

.brief-fact-value {
  color: var(--white);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  margin: 0;
}

.brief-form {
  clip-path: polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg));
  background: var(--ink-2);
  flex-direction: column;
  gap: 28px;
  margin-left: 17px;
  padding: 32px;
  display: flex;
}

.brief-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  display: grid;
}

.brief-field {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.brief-label {
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
}

.brief-required {
  color: var(--white);
}

.brief-input {
  border: var(--stroke) solid var(--ink-3);
  background: var(--graphite);
  width: 100%;
  color: var(--white);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  transition: border-color var(--dur-micro) var(--ease-out);
  padding: 12px 14px;
}

.brief-input:focus-visible {
  border-color: var(--white);
  outline: none;
}

.brief-textarea {
  border: var(--stroke) solid var(--ink-3);
  background: var(--graphite);
  width: 100%;
  color: var(--white);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  resize: vertical;
  transition: border-color var(--dur-micro) var(--ease-out);
  padding: 12px 14px;
}

.brief-textarea:focus-visible {
  border-color: var(--white);
  outline: none;
}

.brief-set {
  border: 0;
  margin: 0;
  padding: 0;
}

.brief-legend {
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  padding: 0 0 12px;
}

.brief-chips {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.brief-chip {
  display: inline-flex;
}

.brief-chip-input {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
}

.brief-chip-face {
  border: var(--stroke) solid var(--ink-3);
  color: var(--silver);
  font: 400 var(--body-sm) / 1.4 var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out);
  padding: 9px 14px;
  display: inline-flex;
}

.brief-chip-input:checked + .brief-chip-face {
  border-color: var(--white);
  background: var(--white);
  color: var(--graphite);
}

.brief-chip-input:focus-visible + .brief-chip-face {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.brief-send {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  display: flex;
}

.brief-submit {
  --cta-icon-i: 10;
  --cta-icon-dir: 1;
  --cta-icon-w: 6px;
  --cta-icon-h: 11px;
  clip-path: var(--notch-clip);
  background: var(--white);
  color: var(--graphite);
  font: 400 var(--body-rg) / 1.5 var(--font-body);
  letter-spacing: var(--body-ls);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out);
  border: 0;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  display: inline-flex;
}

.brief-submit:hover {
  background: var(--surface);
}

.brief-note {
  color: var(--silver);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  margin: 0;
}

.ladder {
  padding: var(--section-pad-top) var(--gutter-nav);
  background: var(--background);
  position: relative;
}

.ladder-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.ladder-inner {
  max-width: var(--container-nav);
  padding: 0 var(--rail-inset);
  margin: 0 auto;
  position: relative;
}

.ladder-title {
  color: var(--ink);
  font: 400 var(--h2-size) / var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0 0 48px;
}

.ladder-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.ladder-step {
  border-top: var(--stroke) solid var(--hairline);
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  display: flex;
}

.ladder-step-num {
  color: var(--muted);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  margin: 0;
}

.ladder-step-title {
  color: var(--ink);
  font: 400 var(--h6-size) / var(--h6-lh) var(--font-display);
  letter-spacing: var(--h6-ls);
  margin: 0;
}

.ladder-step-text {
  color: var(--dim);
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.study {
  position: relative;
}

.study-head {
  padding: var(--section-pad-top) var(--gutter-nav) 40px;
  background: var(--background);
  position: relative;
}

.study-head-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
  overflow: hidden;
}

.study-head-ascii {
  color: #d4d4d4;
  width: 1000px;
  height: 680px;
  font: 10px / 10px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: -260px;
  right: -460px;
  overflow: hidden;
}

.study-head-inner {
  max-width: var(--container-nav);
  padding: 0 var(--rail-inset);
  margin: 0 auto;
  position: relative;
}

.study-crumbs {
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  background: linear-gradient(90deg,var(--dim) 0%,var(--dim) 40%,var(--ink) 50%,var(--dim) 60%,var(--dim) 100%) 50% 0 / 250% 100% no-repeat;
  color: #0000;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  animation: 3.6s cubic-bezier(.45, 0, .55, 1) infinite hero-eyebrow-sweep;
  display: flex;
}

.study-crumbs-icon {
  width: 5px;
  height: 10px;
}

.study-crumb-link {
  color: inherit;
  text-decoration: none;
}

.study-crumb-sep, .study-crumb-current {
  color: inherit;
}

.study-title {
  max-width: 34ch;
  color: var(--ink);
  font: 400 var(--h2-size) / var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-ls);
  margin: 0 0 20px;
}

.study-lede {
  color: var(--dim);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.study-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 40px 0 0;
  display: grid;
}

.study-kpi {
  background: var(--card);
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  display: flex;
}

.study-kpi-value {
  color: var(--ink);
  font: 400 var(--h3-size) / 1.1 var(--font-display);
  letter-spacing: var(--h3-ls);
  margin: 0;
}

.study-kpi-label {
  color: var(--dim);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.study-cover {
  width: calc(100% - 2 * var(--gutter-nav));
  max-width: var(--container-nav);
  background: #ececec;
  height: 620px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.study-cover-field {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.study-cover-shot {
  border-radius: var(--radius-sm);
  width: 62%;
  height: auto;
  box-shadow: var(--shadow-mockup);
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translate(-50%);
}

.study-reel {
  width: calc(100% - 2 * var(--gutter-nav));
  max-width: var(--container-nav);
  background: #0d0f12;
  margin: 0 auto;
  overflow: hidden;
}

.study-reel-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  display: block;
}

.study-body {
  padding: var(--section-pad-top) var(--gutter-nav);
  background: var(--background);
  position: relative;
}

.study-body-inner {
  max-width: var(--container-nav);
  padding: 0 var(--rail-inset);
  grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
  margin: 0 auto;
  display: grid;
  position: relative;
}

.study-aside {
  top: calc(var(--nav-h) + 24px);
  flex-direction: column;
  gap: 16px;
  display: flex;
  position: sticky;
}

.study-meta {
  background: var(--card);
  padding: 24px;
}

.study-meta-logo {
  width: 120px;
  height: auto;
  margin-bottom: 32px;
}

.study-facts {
  margin: 0;
}

.study-fact-key {
  border-top: var(--stroke) solid var(--hairline);
  color: var(--muted);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
  padding-top: 16px;
}

.study-fact-value {
  color: var(--ink);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 4px 0 16px;
}

.study-aside-cta {
  background: var(--card);
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.study-aside-decor {
  color: #d9d9d9;
  width: 240px;
  height: 150px;
  font: 7px / 7px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  bottom: -30px;
  right: -40px;
  overflow: hidden;
}

.study-aside-title {
  color: var(--ink);
  font: 400 var(--h6-size) / var(--h6-lh) var(--font-display);
  letter-spacing: var(--h6-ls);
  margin: 0;
  position: relative;
}

.study-aside-btn {
  --cta-icon-i: 11;
  --cta-icon-dir: 1;
  --cta-icon-w: 6px;
  --cta-icon-h: 11px;
  clip-path: var(--notch-clip);
  background: var(--ink);
  color: var(--white);
  font: 400 var(--body-sm) / 1.25 var(--font-body);
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.study-main {
  flex-direction: column;
  gap: 48px;
  display: flex;
}

.study-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  display: grid;
}

.study-stat-card {
  background: var(--graphite);
  min-height: 280px;
  color: var(--white);
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.study-stat-decor {
  color: #ffffff57;
  width: 197px;
  height: 145px;
  font: 7px / 7px var(--font-mono);
  white-space: pre;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  position: absolute;
  top: -10px;
  left: -26px;
  overflow: hidden;
}

.study-stat-label {
  color: var(--white);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  margin: 0;
  position: relative;
}

.study-stat-value {
  color: var(--white);
  font: 400 var(--h3-size) / 1.1 var(--font-display);
  letter-spacing: var(--h3-ls);
  margin: 0;
  position: relative;
}

.study-stat-card:nth-child(2n) {
  background: var(--surface);
  color: var(--ink);
}

.study-stat-card:nth-child(2n) .study-stat-label, .study-stat-card:nth-child(2n) .study-stat-value {
  color: var(--ink);
}

.study-stat-card:nth-child(2n) .study-stat-decor {
  color: #bcbcbc;
}

.study-quote-card {
  background: var(--card);
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 24px;
  display: flex;
}

.study-quote-mark {
  width: 24px;
  height: 24px;
}

.study-quote-text {
  color: var(--ink);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  flex: 1;
  margin: 0;
}

.study-quote-foot {
  align-items: center;
  gap: 12px;
  display: flex;
}

.study-quote-avatar {
  object-fit: cover;
  width: 40px;
  height: 40px;
}

.study-quote-meta {
  flex-direction: column;
  display: flex;
}

.study-quote-name {
  color: var(--ink);
  font: 400 var(--body-rg) / 1.4 var(--font-body);
}

.study-quote-role {
  color: var(--muted);
  font: 400 var(--body-sm) / 1.4 var(--font-body);
}

.study-video-card {
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%);
  background: var(--graphite);
  color: var(--white);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  margin: 0;
  display: grid;
  overflow: hidden;
}

.study-video-frame {
  aspect-ratio: 9 / 16;
  background: #242424;
  position: relative;
}

.study-video-player {
  object-fit: cover;
  object-position: 50% 30%;
  background: #242424;
  width: 100%;
  height: 100%;
  display: block;
}

.study-video-play {
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  color: var(--white);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out),opacity var(--dur-hover) var(--ease-out),visibility var(--dur-hover);
  background: #0003;
  border: 0;
  flex-direction: column;
  padding: 0;
  display: flex;
  position: absolute;
  inset: 0;
}

.study-video-play[hidden] {
  display: none;
}

.study-video-play:is(:hover, :focus-visible) {
  background: #00000057;
}

.study-video-play:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -6px;
}

.study-video-card.is-started .study-video-play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.study-video-play-icon {
  border: var(--stroke) solid #fff6;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  width: 72px;
  height: 72px;
  transition: transform var(--dur-hover) var(--ease-out);
  background: #1a1a1a8c;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.study-video-play:is(:hover, :focus-visible) .study-video-play-icon {
  transform: scale(1.06);
}

.study-video-play-glyph {
  width: 24px;
  height: 24px;
  margin-left: 3px;
}

.study-video-play-label {
  font: 400 var(--body-xs) / 1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px #0000008c;
}

.study-video-meta {
  justify-content: space-between;
  gap: var(--space-8);
  flex-direction: column;
  padding: 32px;
  display: flex;
}

.study-video-label {
  color: var(--silver);
  font: 400 var(--caption-xs) / var(--caption-lh) var(--font-mono);
  letter-spacing: var(--caption-ls);
  text-transform: uppercase;
}

.study-video-person {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.study-video-name {
  color: var(--white);
  font: 400 var(--h3-size) / 1.1 var(--font-display);
  letter-spacing: var(--h3-ls);
}

.study-video-role {
  color: var(--silver);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
}

.study-shot {
  object-fit: cover;
  object-position: top center;
  width: 100%;
  height: 280px;
}

.study-mark {
  background: #ea2290;
  place-items: center;
  min-height: 280px;
  display: grid;
}

.study-mark-img {
  width: 52%;
  max-width: 229px;
  height: auto;
}

.study-wide-shot {
  border: var(--stroke) solid var(--hairline);
  border-radius: var(--radius-sm);
  width: 100%;
  height: auto;
  display: block;
}

.study-figure {
  flex-direction: column;
  gap: 16px;
  margin: 0;
  display: flex;
}

.brief-honeypot {
  display: none;
}

.proof-grid {
  max-width: var(--container-nav);
  grid-template-rows: repeat(2, minmax(278px, auto));
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 300px);
  gap: 4px;
  margin: 0 auto;
  display: grid;
}

.proof-quote {
  background: #242424;
  flex-direction: column;
  grid-area: 1 / 1 / 2 / 4;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 32px;
  display: flex;
  overflow: hidden;
}

.proof-quote-text {
  max-width: 46ch;
  color: var(--silver);
  font: 400 var(--h4-size) / 1.3 var(--font-display);
  letter-spacing: var(--h4-ls);
  margin: 0;
}

.proof-cta {
  transition: background var(--dur-hover) var(--ease-out);
  background: #242424;
  grid-area: 1 / 4 / 2 / 5;
  align-items: flex-end;
  padding: 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.proof-stat {
  transition: background var(--dur-hover) var(--ease-out);
  background: #242424;
  flex-direction: column;
  grid-area: 2 / 3 / 3 / 4;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  display: flex;
}

.proof-credit {
  transition: background var(--dur-hover) var(--ease-out);
  background: #242424;
  flex-direction: column;
  grid-area: 2 / 4 / 3 / 5;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 16px;
  display: flex;
}

.proof-cta:is(:hover, :focus-visible), .proof-stat:is(:hover, :focus-visible), .proof-credit:is(:hover, :focus-visible) {
  background: #2f2f2f;
}

.proof-video {
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%);
  background: #242424;
  grid-area: 1 / 5 / 3 / 6;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.proof-video:after {
  content: "";
  pointer-events: none;
  background: #0000004d;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to top, #0000 0 52px, #000 96px);
  mask-image: linear-gradient(to top, #0000 0 52px, #000 96px);
}

.proof-video-player::-webkit-media-controls-panel {
  background-image: none;
}

.proof-video-player {
  object-fit: cover;
  background: #242424;
  width: 100%;
  height: 100%;
  display: block;
}

.proof-video-foot {
  z-index: 1;
  pointer-events: none;
  text-shadow: 0 1px 12px #0000008c;
  flex-direction: column;
  gap: 2px;
  display: flex;
  position: absolute;
  top: 16px;
  left: 16px;
}

.proof-video-name {
  color: #fff;
  font: 400 var(--body-sm) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.proof-video-role {
  color: #ffffffb8;
  font: 400 var(--body-xs) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
}

.proof-work {
  transition: background var(--dur-hover) var(--ease-out);
  background: #242424;
  display: block;
  position: relative;
  overflow: hidden;
}

.proof-work-cut {
  clip-path: polygon(0 0,100% 0,100% 100%,var(--notch-lg) 100%,0 calc(100% - var(--notch-lg)));
  transition: background var(--dur-hover) var(--ease-out);
  background: #242424;
  display: block;
  position: relative;
  overflow: hidden;
}

.proof-work-shot {
  object-fit: cover;
  object-position: top center;
  width: 100%;
  height: 100%;
  transition: transform var(--dur-hover) var(--ease-out);
  position: absolute;
  inset: 0;
}

.proof-work-label {
  color: var(--white);
  font: 400 var(--body-xs) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  background: linear-gradient(to top, #000000d1, #0000);
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.study-field {
  object-fit: cover;
  width: 100%;
  height: 280px;
}

.study-field-frame {
  place-items: center;
  display: grid;
}

.study-field-frame > * {
  grid-area: 1 / 1;
}

.study-field-logo {
  width: auto;
  height: 32px;
}

.study-results {
  margin: 0;
}

.study-result {
  border-top: var(--stroke) solid var(--hairline);
  padding: 24px 0;
}

.study-result-value {
  color: var(--ink);
  font: 400 var(--h3-size) / 1.1 var(--font-display);
  letter-spacing: var(--h3-ls);
  margin: 0;
}

.study-result-label {
  color: var(--dim);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 6px 0 0;
}

.study-closing {
  background: var(--card);
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 48px 40px;
  display: flex;
}

.study-closing-text {
  max-width: 58ch;
  color: var(--muted);
  font: 400 var(--body-md) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  text-align: center;
  margin: 0;
}

.study-closing-em {
  color: var(--ink);
}

.study-nav {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 8px;
  display: flex;
}

.study-nav-prev {
  color: var(--ink);
  align-items: center;
  gap: 12px;
  text-decoration: none;
  display: flex;
}

.study-nav-next {
  color: var(--ink);
  text-align: right;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  display: flex;
}

.study-nav-icon {
  background: var(--ink);
  object-fit: contain;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 5px 7px;
}

.study-nav-prev .study-nav-icon {
  transform: scaleX(-1);
}

.study-nav-meta {
  flex-direction: column;
  display: flex;
}

.study-nav-label {
  color: var(--ink);
  font: 400 var(--body-rg) / 1.4 var(--font-body);
}

.study-nav-name {
  color: var(--muted);
  font: 400 var(--body-sm) / 1.4 var(--font-body);
}

.study-more {
  padding: var(--section-pad-top) var(--gutter-nav);
  border-top: var(--stroke) solid var(--rail);
  background: var(--background);
  position: relative;
}

.study-more-rail {
  top: 0;
  right: var(--gutter-nav);
  bottom: 0;
  left: var(--gutter-nav);
  max-width: var(--container-nav);
  border-right: var(--stroke) solid var(--rail);
  border-left: var(--stroke) solid var(--rail);
  pointer-events: none;
  margin: 0 auto;
  position: absolute;
}

.study-more-inner {
  max-width: var(--container-nav);
  padding: 0 var(--rail-inset);
  margin: 0 auto;
  position: relative;
}

.study-more-title {
  color: var(--ink);
  font: 400 var(--h4-size) / var(--h4-lh) var(--font-display);
  letter-spacing: var(--h4-ls);
  margin: 0 0 12px;
}

.study-more-sub {
  max-width: 62ch;
  color: var(--dim);
  font: 400 var(--body-rg) / var(--body-lh) var(--font-body);
  letter-spacing: var(--body-ls);
  margin: 0;
}

.study-more-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-top: 40px;
  display: grid;
}

@media (max-width: 900px) {
  .stories {
    padding: 40px var(--gutter) 48px;
  }

  .stories-rail, .ledger-rail, .study-head-rail, .study-more-rail {
    right: var(--gutter);
    left: var(--gutter);
  }

  .stories-rail {
    background: none;
  }

  .stories-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .stories-copy, .stories-feature {
    padding: 0 var(--rail-inset);
  }

  .stories-sub-break, .voices-sub-break, .study-lede-break {
    display: none;
  }

  .story-hit {
    grid-template-columns: 1fr;
  }

  .story-cover {
    aspect-ratio: 16 / 10;
  }

  .story-stat {
    min-height: 200px;
  }

  .story-stat-decor {
    height: 72px;
    top: 48px;
  }

  .story-dots {
    left: var(--rail-inset);
  }

  .ledger {
    padding: 0 var(--gutter) var(--section-pad-top);
  }

  .ledger-bar {
    padding: 20px var(--rail-inset);
  }

  .ledger-search {
    width: 100%;
  }

  .ledger-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 32px;
  }

  .ledger-card-visual {
    aspect-ratio: 4 / 3;
    width: 100%;
  }

  .ledger-card-copy {
    padding: 16px var(--rail-inset);
  }

  .voices {
    padding: var(--section-pad-top) var(--gutter);
  }

  .voice {
    padding: 32px 20px 40px;
  }

  .voice-badge {
    align-self: center;
    position: static;
  }

  .voices-tabs {
    grid-auto-columns: auto;
    grid-auto-flow: row;
  }

  .voices-tab {
    height: 64px;
  }

  .landed {
    min-height: 0;
    padding: 64px var(--gutter);
  }

  .landed-rail {
    right: var(--gutter);
    left: var(--gutter);
  }

  .legal-head {
    padding: var(--section-pad-top) var(--gutter) 32px;
  }

  .legal-head-rail, .legal-rail {
    right: var(--gutter);
    left: var(--gutter);
  }

  .legal-body {
    padding: 0 var(--gutter) var(--section-pad-top);
  }

  .legal-note {
    padding: 16px 18px;
  }

  .about-hero {
    padding: 48px var(--gutter) 56px;
  }

  .about-name, .about-why, .about-founders, .about-where, .about-working {
    padding: 72px var(--gutter);
  }

  .about-rail, .about-rail-dark {
    right: var(--gutter);
    left: var(--gutter);
    background: none;
  }

  .about-ascii-right {
    display: none;
  }

  .about-hero-inner, .about-pair, .about-why-inner, .about-split, .about-row-first, .about-row, .about-start {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .about-hero-copy {
    padding: 0 var(--rail-inset);
  }

  .about-hero-people {
    margin-left: 0;
    padding: 16px;
  }

  .about-pair, .about-row, .about-start {
    padding-top: 40px;
  }

  .about-name-inner, .about-founders-inner, .about-where-inner, .about-working-inner {
    gap: 40px;
  }

  .about-people {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .about-person-body {
    padding: 24px;
  }

  .about-person-num {
    font-size: 40px;
  }

  .about-versus-old, .about-versus-new {
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 15px;
  }

  .about-clients {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-step-text {
    font-size: 18px;
  }

  .job-head {
    padding: var(--section-pad-top) var(--gutter) 40px;
  }

  .job-body {
    padding: 40px var(--gutter) var(--section-pad-top);
  }

  .job-apply {
    padding: var(--section-pad-top) var(--gutter);
  }

  .job-rail, .job-rail-dark {
    right: var(--gutter);
    left: var(--gutter);
    background: none;
  }

  .job-apply-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .job-apply-copy {
    padding: 0 var(--rail-inset);
  }

  .job-form {
    padding: 24px var(--rail-inset);
    margin-left: 0;
  }

  .roles-link {
    grid-template-columns: minmax(0, 1fr);
  }

  .roles-view {
    grid-row: auto;
  }

  .brief {
    padding: 40px var(--gutter) 56px;
  }

  .brief-rail {
    right: var(--gutter);
    left: var(--gutter);
    background: none;
  }

  .brief-ascii-right {
    display: none;
  }

  .brief-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .brief-copy {
    padding: 0 var(--rail-inset);
  }

  .brief-fact {
    flex-direction: column;
    gap: 4px;
  }

  .brief-form {
    padding: 24px var(--rail-inset);
    margin-left: 0;
  }

  .brief-row {
    grid-template-columns: 1fr;
  }

  .ladder {
    padding: var(--section-pad-top) var(--gutter);
  }

  .ladder-rail {
    right: var(--gutter);
    left: var(--gutter);
  }

  .ladder-title {
    margin-bottom: 32px;
  }

  .ladder-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .study-head {
    padding: var(--section-pad-top) var(--gutter) 32px;
  }

  .study-cover {
    width: calc(100% - 2 * var(--gutter));
    aspect-ratio: 4 / 3;
    height: auto;
    margin: 0 auto;
  }

  .study-cover-shot {
    width: 82%;
    top: 24px;
  }

  .study-reel {
    width: calc(100% - 2 * var(--gutter));
  }

  .study-body {
    padding: var(--section-pad-top) var(--gutter);
  }

  .study-body-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .study-aside {
    position: static;
  }

  .study-pair {
    grid-template-columns: 1fr;
  }

  .study-stat-card, .study-mark {
    min-height: 200px;
  }

  .study-field {
    height: 200px;
  }

  .study-closing {
    padding: 32px 16px;
  }

  .proof-grid {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    height: auto;
  }

  .study-video-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .study-video-frame {
    width: 100%;
    max-height: 70vh;
  }

  .study-video-meta {
    gap: var(--space-6);
    padding: 20px;
  }

  .proof-quote, .proof-cta, .proof-stat, .proof-credit, .proof-video {
    grid-area: auto;
  }

  .proof-video {
    aspect-ratio: 9 / 16;
    width: 100%;
    max-height: 70vh;
  }

  .proof-video-player {
    object-position: 50% 30%;
  }

  .proof-quote {
    padding: 24px;
  }

  .proof-work, .proof-work-cut {
    min-height: 220px;
  }

  .testimonial-stat-label {
    font-size: var(--body-sm);
  }

  .study-more {
    padding: var(--section-pad-top) var(--gutter);
  }

  .study-head-ascii {
    width: 520px;
    height: 360px;
    font: 9px / 9px var(--font-mono);
    top: -190px;
    right: -300px;
  }

  .study-kpis {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 32px 0 0;
  }

  .study-kpi {
    padding: 20px;
  }

  .study-more-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  :root {
    --cta-notch: 30px;
  }

  .work-eyebrow {
    gap: 8px;
  }

  .work-quote-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .model-visual-mobile {
    width: calc(100% + 2 * var(--rail-inset));
    max-width: none;
    margin: 0 calc(-1 * var(--rail-inset));
  }

  :root {
    --section-pad-top: clamp(48px, 12vw, 96px);
  }

  .navbar-nav {
    padding: 0;
  }

  .navbar-links, .navbar-cta {
    display: none;
  }

  .underlay-nav {
    display: block;
  }

  .underlay-nav__toggle {
    display: flex;
  }

  .hero {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hero-lottie {
    height: 280px;
    margin-top: 40px;
  }

  .hero-marquee {
    --hm-w: min(64vw, 320px);
    --hm-gap: 16px;
    margin-top: 48px;
  }

  .hero-ascii-right {
    width: 714px;
    height: 456px;
    font: 9px / 9px var(--font-mono);
    top: -77px;
    right: -397px;
  }

  .hero-ascii-left {
    display: none;
  }

  .hero-inner {
    gap: 20px;
  }

  .hero-title {
    max-width: none;
  }

  .hero-sub-break {
    display: none;
  }

  .hero-stage {
    height: auto;
    padding: 0 var(--gutter) 40px;
    margin-top: 40px;
  }

  .hero-card-left, .hero-card-right {
    display: none;
  }

  .hero-card-main {
    aspect-ratio: 575 / 324;
    width: 100%;
    height: auto;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  .hero-cursor-a, .hero-cursor-b {
    display: none;
  }

  .hero-dither {
    height: 32px;
  }

  .logos {
    padding: 40px var(--gutter);
  }

  .logos-rail {
    right: var(--gutter);
    left: var(--gutter);
  }

  .logos-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    padding: 32px;
  }

  .logos-caption {
    text-align: center;
    white-space: normal;
  }

  .logos-carousel {
    padding: 0;
  }

  .model {
    padding: var(--section-pad-top) var(--gutter) 48px;
  }

  .model-rail {
    right: var(--gutter);
    left: var(--gutter);
  }

  .model-inner {
    gap: 48px;
  }

  .model-title {
    max-width: none;
  }

  .model-title-break {
    display: none;
  }

  .model-row, .model-row-flip {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .model-visual, .model-visual-flip {
    display: none;
  }

  .model-visual-mobile {
    display: block;
  }

  .model-copy {
    border: 0;
    height: auto;
    padding: 0;
  }

  .work {
    padding: var(--section-pad-top) var(--gutter) 48px;
  }

  .work-rail {
    right: var(--gutter);
    left: var(--gutter);
  }

  .work-decor {
    z-index: -1;
    width: 520px;
    height: 300px;
    font: 9px / 9px var(--font-mono);
    top: 8px;
    left: -110px;
  }

  .work-inner {
    z-index: 0;
    gap: 48px;
    position: relative;
  }

  .work-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .work-feature, .work-feature-flip {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .work-feature-visual {
    aspect-ratio: 628 / 480;
    height: auto;
  }

  .work-feature-visual-flip {
    aspect-ratio: 628 / 480;
    order: -1;
    min-height: 0;
  }

  .work-shot {
    width: 82%;
    top: 8%;
  }

  .work-feature-copy {
    padding: 0 var(--rail-inset);
  }

  .work-ledger {
    grid-template-columns: 1fr;
  }

  .work-card-visual {
    aspect-ratio: 648 / 320;
    width: 100%;
    height: auto;
  }

  .work-card-shot {
    width: 70%;
    top: 12%;
  }

  .work-card-copy {
    padding: var(--space-4) var(--rail-inset);
  }

  .process {
    padding: var(--section-pad-top) 0 48px;
    gap: 48px;
  }

  .process-head, .process-steps-outer {
    padding: 0 var(--gutter);
  }

  .process-steps {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .process-step {
    border-bottom: var(--stroke) solid #ffffff0d;
    gap: 24px;
  }

  .process-loops {
    margin-top: -48px;
  }

  .process-loop {
    padding: 24px var(--gutter);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .process-loop-label {
    gap: 24px;
  }

  .process-loop-track {
    flex: none;
    width: 100%;
  }

  .testimonials {
    padding: var(--section-pad-top) var(--gutter) 48px;
    gap: 48px;
  }

  .working {
    padding: 0 var(--gutter) var(--section-pad-top);
    gap: 32px;
  }

  .working-head {
    align-items: flex-start;
    gap: var(--space-6);
    flex-direction: column;
  }

  .working-film-play-icon {
    width: 64px;
    height: 64px;
  }

  .working-film-play-label {
    display: none;
  }

  .working-film-foot {
    top: auto;
    bottom: 16px;
    left: 16px;
  }

  .working-subs {
    width: 100%;
    padding-top: var(--space-6);
    align-items: flex-start;
    position: static;
    translate: none;
  }

  .working-film.is-started + .working-subs {
    opacity: 1;
    visibility: visible;
  }

  .working-line {
    text-align: left;
    text-shadow: none;
    align-self: start;
    font-size: 20px;
  }

  .working-subs-dots {
    margin-left: -6px;
  }

  .testimonials-grid {
    grid-template-rows: none;
    grid-template-columns: 1fr;
    height: auto;
  }

  .testimonial-a, .testimonial-b {
    grid-area: auto;
  }

  .testimonial-video {
    grid-area: auto;
    min-height: 420px;
  }

  .testimonial-stat, .testimonial-cta {
    grid-area: auto;
    min-height: 200px;
  }

  .testimonial-wide {
    grid-area: auto;
  }

  .faq {
    padding: 0 var(--gutter);
  }

  .faq-outer {
    padding: var(--section-pad-top) 0 48px;
    border: 0;
  }

  .faq-dot-l, .faq-dot-r {
    display: none;
  }

  .faq-inner {
    z-index: 0;
    flex-direction: column;
    gap: 32px;
    padding-top: 40px;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .faq-aside {
    display: contents;
  }

  .faq-aside-copy {
    order: 1;
  }

  .faq-list {
    order: 2;
  }

  .faq-aside-foot {
    order: 3;
  }

  .faq-decor {
    z-index: -1;
    width: 460px;
    height: 300px;
    font: 9px / 9px var(--font-mono);
    top: 150px;
    left: -70px;
  }

  .faq-question {
    padding: 20px;
  }

  .faq-item[open] .faq-question {
    padding-bottom: 16px;
  }

  .faq-answer {
    padding: 0 20px 20px;
  }

  .tgrid-light {
    padding: 0 var(--gutter);
  }

  .tgrid-light-rail {
    height: 48px;
  }

  .tgrid-dark {
    padding: 0 var(--gutter);
  }

  .tgrid-dark-rail {
    height: 48px;
  }

  .footer {
    padding: 32px var(--gutter);
  }

  .footer-ascii-left, .footer-ascii-right, .footer-rail-top {
    display: none;
  }

  .footer-cta {
    align-items: stretch;
    min-height: 420px;
    padding: 56px 24px 40px;
  }

  .footer-cta-row {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
  }

  .footer-cta-scribble {
    width: 118px;
    height: 45px;
  }

  .footer-cta-tag {
    font-size: 12px;
    top: 20px;
    left: 64px;
  }

  .footer-grid {
    border: 0;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 32px 0;
  }

  .footer-link {
    padding: 5px 0;
  }

  .work-link, .faq-link, .hero-eyebrow {
    padding: 3px 0;
  }

  .legal-crumb-link, .study-crumb-link, .footer-legal-link {
    padding: 3px 0;
    display: inline-block;
  }

  .footer-rail-bottom {
    display: none;
  }

  .footer-mark {
    border: 0;
  }

  .footer-nav {
    grid-template-columns: 1fr 1fr;
  }

  .navbar-cta, .hero-cta, .work-cta, .footer-cta-btn, .footer-col-title {
    font-size: var(--body-sm);
  }

  .process-corner, .testimonials-corner {
    width: 30px;
    height: 30px;
  }

  .process-step-art {
    height: 56px;
  }

  .testimonial-cta-arrow {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .proof-grid {
    grid-template-rows: repeat(3, minmax(260px, auto));
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proof-quote {
    grid-area: 1 / 1 / 2 / 3;
  }

  .proof-video {
    grid-area: 1 / 3 / 3 / 4;
  }

  .proof-stat {
    grid-area: 3 / 1 / 4 / 2;
  }

  .proof-credit {
    grid-area: 3 / 2 / 4 / 3;
  }

  .proof-cta {
    grid-area: 3 / 3 / 4 / 4;
  }
}

@media (max-width: 1200px) {
  .stories-sub-break {
    display: none;
  }
}

@keyframes astroFadeInOut {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes astroFadeIn {
  0% {
    opacity: 0;
    mix-blend-mode: plus-lighter;
  }

  to {
    opacity: 1;
    mix-blend-mode: plus-lighter;
  }
}

@keyframes astroFadeOut {
  0% {
    opacity: 1;
    mix-blend-mode: plus-lighter;
  }

  to {
    opacity: 0;
    mix-blend-mode: plus-lighter;
  }
}

@keyframes astroSlideFromRight {
  0% {
    transform: translate(100%);
  }
}

@keyframes astroSlideFromLeft {
  0% {
    transform: translate(-100%);
  }
}

@keyframes astroSlideToRight {
  to {
    transform: translate(100%);
  }
}

@keyframes astroSlideToLeft {
  to {
    transform: translate(-100%);
  }
}

@media (prefers-reduced-motion) {
  ::view-transition-group(*) {
    animation: none !important;
  }

  ::view-transition-old(*) {
    animation: none !important;
  }

  ::view-transition-new(*) {
    animation: none !important;
  }

  [data-astro-transition-scope] {
    animation: none !important;
  }
}

.astro-route-announcer {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));
    filter: blur(var(--tw-exit-blur, 0));
  }
}

/* [next]/internal/font/google/geist_caca019b.module.css [client] (css) */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/53b9e256198e5412-s.390ncx5urfkfu.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7178b3e590c64307-s.21jp631_3pja2.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Fallback;
  src: local(Arial);
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0.0%;
  size-adjust: 104.76%;
}

.geist_caca019b-module__5D2XsG__className {
  font-family: Geist, Geist Fallback;
  font-style: normal;
}

/* [next]/internal/font/google/geist_mono_7d6154f0.module.css [client] (css) */
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/5ce348bf30bf5439-s.31988l_ccedte.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/4fa387ec64143e14-s.2tuy5pz7dlieh.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/6306c77e7c8268e4-s.2dbetqa9o8jxf.woff2") format("woff2");
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7d817b4c03b0c5f1-s.1uyisp29ctx0d.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/bbc41e54d2fcbd21-s.1rgnod-3esatf.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/797e433ab948586e-s.p.0r6juujl39pe6.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Mono Fallback;
  src: local(Arial);
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.geist_mono_7d6154f0-module__zK-ooG__className {
  font-family: Geist Mono, Geist Mono Fallback;
  font-style: normal;
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__03uak4h._.css.map*/