/* ---- Page and design tokens --------------------------------------------------------------------- */

body {
  margin: 0;
  background: #ECE8DF;
}

.r {
  --g: #ECE8DF;
  --g2: #E3E0D7;
  --card: #F3F0EA;
  --deep: #DDD9D1;
  --ink: #14141A;
  --ink2: #2E2D32;
  --ink3: #3F3E41;
  --mut: #595859;
  --faint: #8B8986;
  --line: #BCB9B4;
  --grid: #D4D1C9;
  --neu: #BCB9B4;
  --sq: #A9A6A0;
  --art: #777572;
  --acc: #2339F5;
  --acct: #2339F5;
  --acch: #1B257D;
  --accl: #DEE1FE;
  --accd: #1B257D;
  --linkh: #1B257D;
  --onacc: #FFFFFF;
  --onacc2: #DEE1FE;
  --onaccbig: #FFFFFF;
  --invfg: #2339F5;
  --dk-bg: #14141A;
  --dk-fg: #ECE8DF;
  --dk-mut: #A3A2AA;
  --dk-line: #34343B;
  --dk-panel: #1D1D24;
  --dk-acc: #8E9BFF;
  --dk-hi: #ECE8DF;
  --shadow: rgba(20,20,26,.10);
  --shadow2: rgba(20,20,26,.22);
  --grain-op: .2;
  --grain-blend: multiply;
  --grain-filter: none;
  --f-body: 'Geist',sans-serif;
  --f-mono: 'Geist Mono',monospace;
  --f-disp: 'Geist',sans-serif;
  --disp-tt: uppercase;
  --k-h1: 1;
  --k-h2: 1;
  --k-stat: 1;
  --k-num: 1;
  --k-big: 1;
  --k-cta: 1;
  --h1-mw: 860px;
  background: var(--g);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.page {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.page-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
}

.masthead {
  position: relative;
}

.heading-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.m-0 {
  margin: 0;
}

.c-mut {
  color: var(--mut);
}

.c-acct {
  color: var(--acct);
}

.c-ink3 {
  color: var(--ink3);
}

.c-dk-mut {
  color: var(--dk-mut);
}

.c-onacc2 {
  color: var(--onacc2);
}

.c-accd {
  color: var(--accd);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


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

.r h1,.r h2,.r .bal {
  text-wrap: balance;
}

.r p,.r .pr {
  text-wrap: pretty;
}

.t-h1 {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: calc(clamp(40px,5.8vw,84px) * var(--k-h1));
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: var(--disp-tt);
}

.t-h2 {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: calc(clamp(34px,4.4vw,64px) * var(--k-h2));
  line-height: .94;
  letter-spacing: -.015em;
  text-transform: var(--disp-tt);
}

.t-h2s {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: calc(clamp(26px,3vw,40px) * var(--k-h2));
  line-height: .96;
  letter-spacing: -.01em;
  text-transform: var(--disp-tt);
}

.t-cta {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: calc(clamp(44px,8.4vw,120px) * var(--k-cta));
  line-height: .88;
  letter-spacing: -.025em;
  text-transform: var(--disp-tt);
}

.t-h3 {
  font-family: var(--f-disp);
  font-size: calc(34px * var(--k-big));
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.04;
  text-wrap: balance;
}

.t-h3b {
  font-family: var(--f-disp);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
}

.t-h4 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-wrap: balance;
}

.t-lead {
  font-size: 18px;
  line-height: 1.5;
}

.t-body {
  font-size: 15px;
  line-height: 1.55;
}

.t-small {
  font-size: 14px;
  line-height: 1.5;
}

.t-eye {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
}

.t-lab {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
}

.t-micro {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
}

.tz {
  visibility: hidden;
}


/* ---- Opening sequence: frame lines draw in, then labels fade in --------------------------------- */

/* The opening runs about 3.4 s:
   0.20–0.88 s  header and hero frame lines draw in; the tracking boxes flicker on (0.23–0.75 s)
   0.72–1.03 s  brand, BLOG and TEAM fade in
   0.85–1.37 s  the headline types (data-typed-delay and data-typed-step on the h1)
   1.33–1.53 s  the sub-line fades in
   2.30–3.35 s  CONTACT US fills with squares (timing in buildNavSquares, decor.js), then its label shows */

.ln {
  position: absolute;
  z-index: 3;
  background: var(--line);
  pointer-events: none;
}

.ln.h {
  height: 1px;
  transform-origin: left;
  animation: ln-x .9s cubic-bezier(.65,0,.35,1) both;
}

.ln.v {
  width: 1px;
  transform-origin: top;
  animation: ln-y .7s cubic-bezier(.65,0,.35,1) both;
}

.fi {
  animation: fi .5s ease both;
}

@keyframes ln-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes ln-y {
  from {
    transform: scaleY(0);
  }
}

@keyframes fi {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

.ln.ln-header-top {
  top: -1px;
  left: -1px;
  right: -1px;
  animation-duration: 0.4s;
  animation-delay: 0.2s;
}

.ln.ln-header-bottom {
  bottom: -1px;
  left: -1px;
  right: -1px;
  animation-duration: 0.4s;
  animation-delay: 0.25s;
}

.ln.ln-nav-1 {
  left: -1px;
  top: 0;
  bottom: 0;
  animation-duration: 0.25s;
  animation-delay: 0.52s;
}

.ln.ln-nav-2 {
  left: -1px;
  top: 0;
  bottom: 0;
  animation-duration: 0.25s;
  animation-delay: 0.55s;
}

.ln.ln-nav-3 {
  left: -1px;
  top: 0;
  bottom: 0;
  animation-duration: 0.25s;
  animation-delay: 0.58s;
}

.ln.ln-hero-left {
  left: 0;
  top: 0;
  bottom: 0;
  animation-duration: 0.35s;
  animation-delay: 0.5s;
}

.ln.ln-hero-right {
  right: 0;
  top: 0;
  bottom: 0;
  animation-duration: 0.35s;
  animation-delay: 0.53s;
}

.ln.ln-hero-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  animation-duration: 0.45s;
  animation-delay: 0.3s;
}

.brand {
  animation-duration: 0.25s;
  animation-delay: 0.72s;
}

.fi-nav-1 {
  animation-duration: 0.25s;
  animation-delay: 0.75s;
}

.fi-nav-2 {
  animation-duration: 0.25s;
  animation-delay: 0.78s;
}

.hero-lead {
  animation-duration: 0.2s;
  animation-delay: 1.33s;
}


/* ---- Tracking boxes on the hero head ------------------------------------------------------------ */

.hud .hb {
  animation: lamp .3s both;
}

.hud [data-hud="eye"] {
  animation-delay: 0.23s;
}

.hud [data-hud="spec"] {
  animation-delay: 0.3s;
}

.hud [data-hud="lips"] {
  animation-delay: 0.38s;
}

.hud [data-hud="jaw"] {
  animation-delay: 0.45s;
}

@keyframes lamp {
  0% {
    opacity: 0;
    animation-timing-function: steps(1,end);
  }
  10% {
    opacity: .8;
    animation-timing-function: steps(1,end);
  }
  18% {
    opacity: .1;
    animation-timing-function: steps(1,end);
  }
  30% {
    opacity: 1;
    animation-timing-function: steps(1,end);
  }
  40% {
    opacity: .25;
    animation-timing-function: steps(1,end);
  }
  48% {
    opacity: .9;
    animation-timing-function: steps(1,end);
  }
  60% {
    opacity: .4;
    animation-timing-function: steps(1,end);
  }
  72%,100% {
    opacity: 1;
  }
}


/* ---- Links and helpers -------------------------------------------------------------------------- */

.r a {
  color: var(--acct);
}

.r a:hover {
  color: var(--linkh);
}

.r ::selection {
  background: var(--acc);
  color: var(--onacc);
}

.mono {
  font-family: var(--f-mono);
}

.disp {
  font-family: var(--f-disp);
}

.face {
  container-type: inline-size;
}

.face pre {
  font-family: 'Geist Mono',monospace;
  font-size: calc(100cqw / 132);
  font-variant-ligatures: none;
}

.halo {
  text-shadow: 0 0 18px var(--g),0 0 6px var(--g),0 0 2px var(--g);
}


/* ---- Header and navigation ---------------------------------------------------------------------- */

.r .navb {
  color: var(--ink3);
  transition: background-color .2s ease,color .2s ease;
}

.navb .arr {
  align-self: flex-end;
  font-size: 15px;
  opacity: 0;
  transform: translate(-5px,5px);
  transition: opacity .2s ease,transform .25s ease;
}

.r .navb:hover,.r .navb:focus-visible {
  background: var(--ink);
  color: var(--g);
}

.navb:hover .arr,.navb:focus-visible .arr {
  opacity: 1;
  transform: none;
}

.r .navc {
  color: var(--onacc);
  transition: color .2s ease;
}

.r .navc:hover,
.r .navc:focus-visible {
  color: var(--invfg);
}

.navc .nbg {
  position: absolute;
  inset: 0;
  background: var(--acc);
  transition: background-color .2s ease;
  animation: fo .3s ease 2.85s both;
}

.r .navc:hover .nbg,.r .navc:focus-visible .nbg {
  background: var(--onacc);
}

.navc .nsq {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(30,12px);
  grid-auto-rows: 12px;
  gap: 4px;
  align-content: start;
}

.navc .nsq i {
  background: var(--acc);
  animation: nsq .4s cubic-bezier(.2,.7,.2,1) var(--d) both;
}

.navc .nt {
  position: relative;
  animation: fi .4s ease 2.95s both;
}

@keyframes nsq {
  from {
    opacity: 0;
    scale: .2;
  }
}

@keyframes fo {
  from {
    opacity: 0;
  }
}

.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid transparent;
}

.brand {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  padding: 16px 24px;
  text-decoration: none;
}

.r .brand,
.r .brand:hover {
  color: var(--ink);
}

.brand-name {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 690px;
}

.nav-link {
  position: relative;
  flex: 1 1 130px;
  min-height: 60px;
  padding: 14px 16px;
  border-left: 1px solid transparent;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-contact {
  position: relative;
  flex: 1 1 160px;
  min-height: 60px;
  padding: 14px 16px;
  border-left: 1px solid transparent;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-contact-arrow {
  align-self: flex-end;
  font-size: 16px;
}


/* ---- Hero --------------------------------------------------------------------------------------- */

.hero {
  border: 1px solid transparent;
  border-top: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1320 / 740;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1320 / 740;
}

.hero-art {
  position: absolute;
  inset: 0;
  margin: 0;
  line-height: 1;
  letter-spacing: 0;
  color: var(--art);
  white-space: pre;
  overflow: hidden;
}

.hero-copy {
  position: relative;
  padding: 0 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  pointer-events: none;
}

.hero-title {
  max-width: var(--h1-mw);
}

.hero-lead {
  margin: 0;
  max-width: 500px;
  color: var(--ink2);
}


/* ---- Citations ---------------------------------------------------------------------------------- */

.chips {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}

.r .src {
  display: inline-flex;
  align-items: baseline;
  padding: 8px 5px;
  margin: -8px -5px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--acct);
  text-decoration: none;
}

.src .n {
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 2px;
  transition: background-color .15s ease,color .15s ease;
}

.r .src:hover .n,.r .src:focus-visible .n {
  background: var(--acc);
  color: var(--onacc);
}

.src .t {
  position: absolute;
  left: -4px;
  bottom: 100%;
  z-index: 4;
  box-sizing: border-box;
  width: max-content;
  padding: 4px 8px;
  border-bottom: 6px solid transparent;
  background: var(--acc) padding-box;
  color: var(--onacc);
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  translate: 0 4px;
  transition: opacity .16s ease .22s,translate .2s ease .22s,visibility 0s linear .42s;
}

.r .src:hover .t,.r .src:focus-visible .t {
  z-index: 5;
  opacity: 1;
  visibility: visible;
  translate: none;
  transition: opacity .14s ease,translate .2s cubic-bezier(.2,.7,.2,1),visibility 0s;
}

.chips:has(.src:hover) .src:not(:hover) .t,
.chips:has(.src:focus-visible) .src:not(:focus-visible) .t {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.chips.warm .t {
  translate: none;
}

.r .chips.warm .src:hover .t,
.r .chips.warm .src:focus-visible .t {
  transition: opacity .1s ease,visibility 0s;
}

.chips.dn .t {
  bottom: auto;
  top: 100%;
  border-bottom: 0;
  border-top: 6px solid transparent;
  translate: 0 -4px;
}

.chips.end .t {
  left: auto;
  right: -4px;
}

.chips.fit .t {
  max-width: calc(100% + 8px);
  white-space: normal;
}

.r .inv .src {
  color: var(--onacc);
}

.r .inv .src:hover .n,.r .inv .src:focus-visible .n {
  background: var(--onacc);
  color: var(--invfg);
}

.inv .src .t {
  background-color: var(--onacc);
  color: var(--invfg);
}

.r .dkc .src {
  color: var(--dk-acc);
}

.r .dkc .src:hover .n,.r .dkc .src:focus-visible .n {
  background: var(--dk-acc);
  color: var(--dk-bg);
}

.dkc .src .t {
  background-color: var(--dk-acc);
  color: var(--dk-bg);
}

.r .ref {
  color: var(--mut);
  text-decoration: none;
  transition: color .2s ease;
}

.r .ref:hover,.r .ref:focus-visible {
  color: var(--acct);
  text-decoration: underline;
}


/* ---- 01 Samples --------------------------------------------------------------------------------- */

.lw {
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}

.lanes .lw.from-r {
  transform: translateX(105%);
}

.lanes .lw.from-l {
  transform: translateX(-105%);
}

.lanes.in .lw {
  transform: none;
}

.track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: mq-l 90s linear infinite;
  animation-play-state: paused;
}

.track.rev {
  animation-name: mq-r;
  animation-duration: 110s;
}

.track.slow {
  animation-duration: 130s;
}

.lanes.in .track {
  animation-play-state: running;
}

.lanes.in .lane:hover .track {
  animation-play-state: paused;
}

@keyframes mq-l {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes mq-r {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.card .hd {
  color: var(--mut);
  border-bottom: 1px dashed var(--line);
  transition: background-color .2s ease,color .2s ease,border-color .2s ease;
}

.card:hover .hd {
  background: var(--acc);
  color: var(--onacc);
  border-bottom: 1px solid var(--acc);
}

.cn {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 0 solid var(--acc);
  z-index: 2;
  transition: width .2s ease,height .2s ease,border-width .2s ease;
}

.cn.tl {
  top: -1px;
  left: -1px;
  border-top-width: 1px;
  border-left-width: 1px;
}

.cn.tr {
  top: -1px;
  right: -1px;
  border-top-width: 1px;
  border-right-width: 1px;
}

.cn.bl {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.cn.br {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.card:hover .cn {
  width: 16px;
  height: 16px;
}

.card:hover .cn.tl {
  border-top-width: 3px;
  border-left-width: 3px;
}

.card:hover .cn.tr {
  border-top-width: 3px;
  border-right-width: 3px;
}

.card:hover .cn.bl {
  border-bottom-width: 3px;
  border-left-width: 3px;
}

.card:hover .cn.br {
  border-bottom-width: 3px;
  border-right-width: 3px;
}

.samples {
  border: 1px solid var(--line);
  border-top: 0;
  position: relative;
  padding: 168px 0;
  overflow: hidden;
}

.lanes {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lane {
  overflow: hidden;
}

.lw.lane-delay-1 {
  transition-delay: 0.07s;
}

.lw.lane-delay-2 {
  transition-delay: 0.14s;
}

.card {
  flex: 0 0 168px;
  width: 168px;
  height: 180px;
  position: relative;
  border: 1px solid var(--line);
  background: var(--card);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.card .hd {
  display: flex;
  justify-content: space-between;
  padding: 6px 9px;
}

.card-body {
  flex: 1;
  padding: 9px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 0;
}

.card-video {
  flex: 1;
  background: repeating-linear-gradient(135deg, var(--deep) 0 6px, var(--g2) 6px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-video-time {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 9px;
  color: var(--mut);
}

.card-call {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.card-call-tile {
  background: var(--deep);
}

.card-call-self {
  background: var(--accl);
  outline: 1px solid var(--acc);
  outline-offset: -1px;
}

.card-bubble {
  align-self: flex-start;
  max-width: 94%;
  background: var(--g2);
  padding: 7px 9px;
  font-size: 11.5px;
  line-height: 1.35;
  border-radius: 10px 10px 10px 3px;
}

.card-time {
  font-size: 9px;
  color: var(--mut);
}

.card-caption {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink3);
}

.card-post-head {
  display: flex;
  gap: 7px;
  align-items: center;
}

.card-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--line);
}

.card-author {
  font-size: 11px;
  font-weight: 500;
}

.card-from {
  font-size: 9.5px;
  color: var(--mut);
}

.card-subject {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
}

.card-photo {
  flex: 1;
  background: var(--g2);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.card-line {
  height: 4px;
  background: var(--deep);
}

.card-line-long {
  width: 90%;
}

.card-line-short {
  width: 70%;
}

.samples-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.samples-callout {
  width: min(560px, 92%);
  aspect-ratio: 1.55 / 1;
  background: radial-gradient(ellipse closest-side, var(--g) 0%, var(--g) 74%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.samples-title {
  max-width: 400px;
}


/* ---- 02 Cases ----------------------------------------------------------------------------------- */

.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--grain-op);
  mix-blend-mode: var(--grain-blend);
  filter: var(--grain-filter);
}

.case {
  flex: 1 1 260px;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  transition: flex-grow .5s cubic-bezier(.2,.7,.2,1);
}

.case:hover,.case:focus-visible,.case:has(:focus-visible) {
  flex-grow: 2.3;
}

.case .num {
  display: block;
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: calc(min(86px,17.5cqi) * var(--k-num));
  line-height: .9;
  letter-spacing: -.035em;
  white-space: nowrap;
  transition: color .3s ease;
}

.case:hover .num,
.case:focus-visible .num,
.case:has(:focus-visible) .num {
  color: var(--acct);
}

.case .sub {
  display: block;
  width: 330px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.case .more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1);
}

.case .more > div {
  min-height: 0;
  overflow: hidden;
}

.case .mi {
  width: 440px;
  opacity: 0;
  transition: opacity .2s ease;
}

.case:hover .more,
.case:focus-visible .more,
.case:has(:focus-visible) .more {
  grid-template-rows: 1fr;
}

.case:hover .mi,
.case:focus-visible .mi,
.case:has(:focus-visible) .mi {
  opacity: 1;
  transition: opacity .35s ease .15s;
}

.cases {
  border: 1px solid var(--line);
  border-top: 0;
  position: relative;
}

.cases-head {
  padding: 96px 32px 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  position: relative;
}

.fraud {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  margin-left: auto;
}

.fraud-caption {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  color: var(--mut);
}

.fraud-figure {
  color: var(--acct);
  font-weight: 600;
}

.case-row {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  position: relative;
}

.case-panel {
  min-height: 520px;
  padding: 28px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  outline-color: var(--acc);
}

.case-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--mut);
}

.case-place {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.case-vector {
  display: inline-block;
  margin-top: 14px;
  color: var(--acct);
}

.case-divider {
  border-right: 1px solid var(--line);
}


/* ---- 03 State of the art ------------------------------------------------------------------------ */

.tile {
  overflow: hidden;
}

.tile .more {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease,transform .3s ease;
}

.tile:hover .more,
.tile:focus-visible .more,
.tile:has(:focus-visible) .more {
  opacity: 1;
  transform: none;
}

.tile:hover .less,
.tile:focus-visible .less,
.tile:has(:focus-visible) .less {
  opacity: 0;
}

.less {
  transition: opacity .2s ease;
}

.state {
  border: 1px solid var(--line);
  border-top: 0;
  padding: 96px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.state-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.state-heading {
  max-width: 900px;
}

.tile {
  position: relative;
  min-height: 320px;
  padding: 22px;
  box-sizing: border-box;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  outline-color: var(--acc);
}

.less {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.tile .more {
  position: absolute;
  inset: 0;
  padding: 22px;
  background: var(--acc);
  color: var(--onacc);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}


/* ---- 04 Why us: bento cards and their click replays --------------------------------------------- */

.bento .bx {
  outline: 2px solid transparent;
  outline-offset: -2px;
  cursor: pointer;
  transition: translate .8s cubic-bezier(.16,1,.3,1),opacity .6s ease,transform .25s ease,box-shadow .25s ease,outline-color .25s ease;
  transition-delay: var(--stagger, 0s), var(--stagger, 0s), 0s, 0s, 0s;
}

.bento:not(.in) .bx {
  opacity: 0;
}

.bento:not(.in) .bx.gl {
  translate: -64px 0;
}

.bento:not(.in) .bx.gr {
  translate: 64px 0;
}

.bento:not(.in) .bx.gu {
  translate: 0 48px;
}

.bx:hover,.bx:focus-visible,.bx:has(:focus-visible) {
  transform: translateY(-4px);
  outline-color: var(--acc);
  box-shadow: 0 16px 32px var(--shadow);
}

.bx.dk:hover,.bx.dk:focus-visible,.bx.dk:has(:focus-visible) {
  outline-color: var(--dk-acc);
  box-shadow: 0 16px 32px var(--shadow2);
}

.bx.bl:hover,.bx.bl:focus-visible,.bx.bl:has(:focus-visible) {
  outline-color: var(--ink);
  box-shadow: 0 16px 32px color-mix(in srgb,var(--acc) 28%,transparent);
}

.bx .k-pop,.bx .k-growx,.bx .k-on,.bx .k-thk {
  transform-box: fill-box;
  transform-origin: center;
}

.bx .k-growx,.bx .k-thk {
  transform-origin: 0 50%;
}

.bx .k-thk,.bx .k-vl,.bx .k-on,.bx .k-hl {
  opacity: 0;
}

.bx .k-vl {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.pa .k-pop {
  animation: kpa .45s cubic-bezier(.2,.7,.2,1) var(--d,0s) both;
}

.pb .k-pop {
  animation: kpb .45s cubic-bezier(.2,.7,.2,1) var(--d,0s) both;
}

.pa .k-flash {
  animation: kfa .5s steps(4,end) var(--d,0s) both;
}

.pb .k-flash {
  animation: kfb .5s steps(4,end) var(--d,0s) both;
}

.pa .k-fade {
  animation: kda .5s ease var(--d,0s) both;
}

.pb .k-fade {
  animation: kdb .5s ease var(--d,0s) both;
}

.pa .k-thk {
  animation: kha 2s cubic-bezier(.45,0,.55,1) both,koa .4s ease 2.45s forwards;
}

.pb .k-thk {
  animation: khb 2s cubic-bezier(.45,0,.55,1) both,kob .4s ease 2.45s forwards;
}

.pa .k-vl {
  animation: kva .2s linear var(--d) both,koa .4s ease 2.45s forwards;
}

.pb .k-vl {
  animation: kvb .2s linear var(--d) both,kob .4s ease 2.45s forwards;
}

.pa .k-on {
  animation: kna .3s cubic-bezier(.2,.7,.2,1) var(--d) both,koa .4s ease 2.45s forwards;
}

.pb .k-on {
  animation: knb .3s cubic-bezier(.2,.7,.2,1) var(--d) both,kob .4s ease 2.45s forwards;
}

.pa .k-hl {
  animation: kia .55s ease var(--d) both;
}

.pb .k-hl {
  animation: kib .55s ease var(--d) both;
}

.pa .k-hlt {
  animation: kja .55s ease var(--d) both;
}

.pb .k-hlt {
  animation: kjb .55s ease var(--d) both;
}

.pa .k-slide {
  animation: ksa 1.8s cubic-bezier(.45,.05,.2,1) both;
}

.pb .k-slide {
  animation: ksb 1.8s cubic-bezier(.45,.05,.2,1) both;
}

.pa .k-growx {
  animation: kxa .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) both;
}

.pb .k-growx {
  animation: kxb .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) both;
}

.pa .k-draw {
  animation: kla 1.2s cubic-bezier(.4,0,.2,1) var(--d,0s) both;
}

.pb .k-draw {
  animation: klb 1.2s cubic-bezier(.4,0,.2,1) var(--d,0s) both;
}

.pa .k-drop {
  animation: kta .35s cubic-bezier(.3,1.6,.5,1) var(--d,0s) both;
}

.pb .k-drop {
  animation: ktb .35s cubic-bezier(.3,1.6,.5,1) var(--d,0s) both;
}

.pa .k-march {
  animation: kma .6s linear var(--d,0s) both;
}

.pb .k-march {
  animation: kmb .6s linear var(--d,0s) both;
}

@keyframes kpa {
  from {
    opacity: 0;
    scale: .2;
  }
}

@keyframes kpb {
  from {
    opacity: 0;
    scale: .2;
  }
}

@keyframes kfa {
  0% {
    opacity: 1;
  }
  25% {
    opacity: .2;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: .4;
  }
}

@keyframes kfb {
  0% {
    opacity: 1;
  }
  25% {
    opacity: .2;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: .4;
  }
}

@keyframes kda {
  from {
    opacity: 0;
  }
}

@keyframes kdb {
  from {
    opacity: 0;
  }
}

@keyframes kha {
  from {
    opacity: 1;
    scale: 0 1;
  }
  to {
    opacity: 1;
    scale: 1 1;
  }
}

@keyframes khb {
  from {
    opacity: 1;
    scale: 0 1;
  }
  to {
    opacity: 1;
    scale: 1 1;
  }
}

@keyframes koa {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes kob {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes kva {
  from {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes kvb {
  from {
    opacity: 1;
    stroke-dashoffset: 1;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes kna {
  from {
    opacity: 0;
    scale: .2;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes knb {
  from {
    opacity: 0;
    scale: .2;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes kia {
  0%,100% {
    opacity: 0;
  }
  18%,60% {
    opacity: 1;
  }
}

@keyframes kib {
  0%,100% {
    opacity: 0;
  }
  18%,60% {
    opacity: 1;
  }
}

@keyframes kja {
  18%,60% {
    fill: var(--acc);
  }
}

@keyframes kjb {
  18%,60% {
    fill: var(--acc);
  }
}

@keyframes ksa {
  to {
    translate: var(--sx) 0;
  }
}

@keyframes ksb {
  to {
    translate: var(--sx) 0;
  }
}

@keyframes kxa {
  from {
    scale: 0 1;
  }
}

@keyframes kxb {
  from {
    scale: 0 1;
  }
}

@keyframes kla {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes klb {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes kta {
  from {
    translate: 0 -6px;
  }
}

@keyframes ktb {
  from {
    translate: 0 -6px;
  }
}

@keyframes kma {
  from {
    stroke-dashoffset: 18;
  }
}

@keyframes kmb {
  from {
    stroke-dashoffset: 18;
  }
}

.method {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--g2);
  padding: 96px 32px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.bgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 248px;
  gap: 16px;
}

.bx-approach {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--dk-bg);
  color: var(--dk-fg);
  padding: 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.bx-fakes {
  grid-column: span 2;
  background: var(--acc);
  color: var(--onacc);
  padding: 22px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  --stagger: 0.08s;
}

.bx-security {
  background: var(--g);
  border: 1px solid var(--line);
  padding: 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  --stagger: 0.16s;
}

.bx-device {
  background: var(--accl);
  padding: 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  --stagger: 0.24s;
}

.bx-data {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  --stagger: 0.12s;
}

.bx-scale {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  --stagger: 0.2s;
}

.bx-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}

.bx-copy-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 540px;
}

.fakes-lead {
  font-weight: 600;
}

.waffle {
  display: grid;
  grid-template-columns: repeat(34, 12px);
  gap: 4px;
  overflow: hidden;
}

.scale-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 24px;
}

.scale-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--mut);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-swatch-ours {
  width: 20px;
  height: 3px;
  background: var(--acc);
}

.legend-swatch-other {
  width: 20px;
  height: 2px;
  background: var(--faint);
}


/* ---- 04 Bento graphics -------------------------------------------------------------------------- */

.wq {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--sq);
  opacity: 0;
  scale: .2;
  transition: opacity .35s ease,scale .4s cubic-bezier(.2,.7,.2,1),filter .2s ease;
}

.wq.f {
  background: var(--acc);
}

.wq.x {
  background: transparent;
  outline: 1px dashed var(--faint);
  outline-offset: -1px;
}

.bento.in .wq {
  opacity: 1;
  scale: 1;
}

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .5s;
}

.bento.in .draw,.fz.in .draw {
  stroke-dashoffset: 0;
}

.fz .ar,.fz .dt,.bento .dt {
  opacity: 0;
  transition: opacity .6s ease 1.5s;
}

.fz.in .ar,.fz.in .dt,.bento.in .dt {
  opacity: 1;
}

.sbar {
  transform-box: fill-box;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .9s;
}

.bento.in .sbar {
  transform: none;
}


/* ---- 05 Work with us, 06 Contact ---------------------------------------------------------------- */

.work .wc {
  position: relative;
  transition: background-color .25s ease,opacity .6s ease,translate .7s cubic-bezier(.16,1,.3,1);
  transition-delay: 0s, var(--stagger, 0s), var(--stagger, 0s);
}

.work:not(.in) .wc {
  opacity: 0;
  translate: 0 28px;
}

.wc::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 100%;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.r .wc:hover,.r .wc:focus-visible {
  background: var(--g2);
}

.wc:hover::before,.wc:focus-visible::before {
  transform: scaleX(1);
}

.wc .wt {
  transition: color .2s ease,transform .3s ease;
}

.wc:hover .wt,.wc:focus-visible .wt {
  color: var(--acct);
  transform: translateX(4px);
}

.r .em::placeholder {
  color: var(--onacc2);
  opacity: 1;
}

.work-section {
  border: 1px solid var(--line);
  border-top: 0;
}

.work-head {
  padding: 96px 32px 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.work-intro {
  margin: 0;
  max-width: 400px;
  color: var(--ink3);
}

.work {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--line);
}

.wc {
  padding: 32px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  box-sizing: border-box;
  text-decoration: none;
}

.r .wc,
.r .wc:hover {
  color: var(--ink);
}

.wc-divided {
  border-right: 1px solid var(--line);
}

.wc-2 {
  --stagger: 0.1s;
}

.wc-3 {
  --stagger: 0.2s;
}

.wc-4 {
  --stagger: 0.3s;
}

.wc-text {
  flex: 1;
  color: var(--ink3);
}

.contact {
  border: 1px solid var(--acc);
  background: var(--acc);
  color: var(--onacc);
  padding: 96px 32px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.r .cta-h {
  height: 0.88em;
  color: var(--onaccbig);
  white-space: nowrap;
}

.contact-form {
  flex: 0 1 auto;
  align-self: flex-end;
  width: min(560px, 100%);
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--onacc);
  position: relative;
}

.em {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 58px;
  padding: 0 16px;
  background: transparent;
  color: var(--onacc);
  border: 0;
  font: 400 17px var(--f-body);
  outline-color: var(--onacc);
}

.r .contact-submit {
  display: inline-flex;
  align-items: center;
  min-height: 58px;
  padding: 0 24px;
  background: var(--onacc);
  color: var(--invfg);
  border: 0;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.r .contact-submit:hover {
  color: var(--invfg);
}


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

.site-footer {
  border: 1px solid var(--line);
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
}

.sources {
  flex: 3 1 560px;
  margin: 0;
  padding: 28px 32px 28px 56px;
  columns: 2 300px;
  column-gap: 32px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--mut);
}

.sources li {
  margin-bottom: 4px;
}

.footer-meta {
  flex: 1 1 240px;
  border-left: 1px solid var(--line);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--mut);
  letter-spacing: 0.06em;
}

.footer-brand {
  color: var(--ink);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.01em;
}

.footer-credits {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* ---- Phones: a note instead of the site ------------------------------------------------------- */

.mobile-note {
  display: none;
}

@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .page {
    min-height: 0;
  }
  .page-inner {
    display: none;
  }
  .mobile-note {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    min-height: calc(100vh - 24px);
    min-height: calc(100svh - 24px);
    margin: 12px;
    padding: 24px;
    box-sizing: border-box;
    border: 1px solid var(--line);
  }
}

.mobile-note-brand {
  animation-delay: 0.1s;
}

.mobile-note-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation-delay: 0.25s;
}

.mobile-note-lead {
  margin: 0;
  color: var(--ink2);
}

/* a blue square steps along a row of grey ones, like the site's other square grids */
.mobile-note-squares {
  display: flex;
  gap: 4px;
  animation-delay: 0.4s;
}

.mobile-note-squares i {
  width: 12px;
  height: 12px;
  background: var(--sq);
  animation: mn-step 1.2s steps(1, end) infinite;
}

.mobile-note-squares i:nth-child(2) {
  animation-delay: 0.2s;
}

.mobile-note-squares i:nth-child(3) {
  animation-delay: 0.4s;
}

.mobile-note-squares i:nth-child(4) {
  animation-delay: 0.6s;
}

.mobile-note-squares i:nth-child(5) {
  animation-delay: 0.8s;
}

.mobile-note-squares i:nth-child(6) {
  animation-delay: 1s;
}

@keyframes mn-step {
  0% {
    background: var(--acc);
  }
  16.67%, 100% {
    background: var(--sq);
  }
}


/* ---- Reduced motion ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .track,
  .ln,
  .fi,
  .navc .nsq i,
  .navc .nbg,
  .navc .nt,
  .hud .hb,
  .bx [class*=k-],
  .mobile-note-squares i {
    animation: none !important;
  }
  .lw,
  .bx,
  .wq,
  .wc,
  .draw,
  .sbar,
  .case,
  .case .more,
  .src .t,
  .fz .ar,
  .fz .dt,
  .bento .dt {
    transition: none !important;
  }
}


/* ---- Small screens ------------------------------------------------------------------------------ */

@media (max-width:760px) {
  #top {
    aspect-ratio: auto !important;
  }
  .hud {
    display: none;
  }
  .case .more {
    grid-template-rows: 1fr;
  }
  .case .mi {
    opacity: 1;
    width: auto;
  }
  .case .sub {
    width: auto;
  }
  .tile .more {
    opacity: 1;
    transform: none;
  }
  .bgrid {
    grid-template-columns: minmax(0,1fr) !important;
    grid-auto-rows: auto !important;
  }
  .bgrid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 220px;
  }
  .cta-h {
    white-space: normal !important;
    height: auto !important;
  }
  .src .t {
    white-space: normal;
    max-width: min(44ch,70vw);
  }
}