/* SCANTIX original brand components, refreshed 2026-10-29. */

/* video-playback.css */
.scroll-video__sound {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(48px, 15%);
  transform: translateX(-50%);
  max-width: calc(100% - 48px);
  min-height: 40px;
  padding: 10px 18px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 999px;
  background: rgb(11 33 89 / 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    0 3px 12px rgb(0 0 0 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.15);
  color: #faf8f3;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease;
}
.scroll-video__sound[hidden] {
  display: none;
}
.scroll-video__sound:hover {
  background: rgb(11 33 89 / 0.75);
}
.scroll-video__sound:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* preview.css */
* {
  box-sizing: border-box;
}
:root {
  --glass-lift-shadow: 0 3px 10px rgb(7 21 47 / 0.08), 0 1px 3px rgb(7 21 47 / 0.04);
  --site-background: #0b2159;
  --site-background-rgb: 11 33 89;
  --site-text-muted: rgb(250 248 243 / .9);
  --site-text-subtle: rgb(250 248 243 / .9);
  --forms-background: var(--site-background);
}
html {
  color-scheme: dark;
  background: var(--site-background);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: #faf8f3;
  background: var(--site-background);
  font-family: Arial, Helvetica, sans-serif;
}
a {
  color: inherit;
}
/* Sticky keeps the original header space, so the hero and cards do not shift. */
body > header {
  position: sticky;
  top: 0;
  z-index: 10;
  pointer-events: none;
}
body > header > fluid-spline-nav {
  pointer-events: none;
}
fluid-spline-nav {
  display: block;
  height: 145px;
}
/* Extra room below the hero words places the cards beyond the opening screen. */
.hero {
  display: flex;
  align-items: flex-end;
  min-height: calc(100svh - 145px + 64px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 42px 48px 138px;
  scroll-margin-top: 24px;
}
.hero-foot {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 18px;
  line-height: 40px;
}
.hero-foot__terms {
  margin: 0;
  font: inherit;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.35em;
}
.hero-foot__term {
  white-space: nowrap;
}
.forms {
  width: 100%;
  padding-inline: 48px;
  max-width: 1440px;
  margin: 0 auto;
  scroll-margin-top: 16px;
  overflow-x: clip;
}
.curve-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 110px 48px 100px;
  scroll-margin-top: 24px;
}
.curve-note__copy {
  min-width: 0;
}
h2 {
  margin: 28px 0;
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.055em;
  font-weight: 400;
}
.curve-note h2 {
  margin-top: 0;
}
.curve-note p {
  max-width: 470px;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 32px;
}
.curve-note__copy > a {
  display: inline-block;
  padding-block: 12px;
  font-size: 13px;
  text-underline-offset: 5px;
}
.curve-graphic {
  position: relative;
  display: grid;
  place-content: center;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  justify-self: end;
  min-width: 0;
  margin: 0;
  color: #777;
  text-align: center;
}
.curve-graphic__mark {
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
}
.curve-graphic__label {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.14em;
}
.curve-graphic > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 800px) {
  .curve-graphic {
    /* Keep the reserved graphic area aligned with the adjacent text. */
    contain: size;
    align-self: stretch;
    width: auto;
    height: 100%;
    max-width: 100%;
  }
}
.color-band--story { --story-robot-bottom: calc(clamp(24px, 4vw, 64px) + 52px); }
.site-updates {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: start;
  min-height: clamp(820px, 95svh, 1000px);
  overflow: hidden;
  background: var(--site-background);
  scroll-margin-top: 0;
}
.site-updates__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 76%, transparent);
}
.site-updates__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--site-background) 0%,
    rgb(var(--site-background-rgb) / 0.88) 20%,
    rgb(var(--site-background-rgb) / 0.48) 45%,
    rgb(var(--site-background-rgb) / 0.06) 78%
  );
}
.site-updates__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 50%;
  opacity: 1;
  transform: scale(1);
}
.site-updates[data-reveal="visible"] .site-updates__image {
  transition:
    opacity 1700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 2400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-updates[data-reveal="pending"] .site-updates__image {
  opacity: 0;
  transform: scale(1.035);
}
.site-updates__content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 1440px;
  margin: 0 auto;
  padding: 118px 48px 320px;
  text-align: right;
}
.site-updates h2 {
  max-width: 760px;
  margin: 0 0 28px auto;
  font-size: clamp(64px, 7.4vw, 108px);
  line-height: 0.99;
  letter-spacing: -0.065em;
}
.site-updates p {
  max-width: none;
  margin: 0 0 0 auto;
  color: var(--site-text-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* The close-up meets the screen edge, with the film layered over its body.
   Multiply blends the supplied white background into this section's pale ground. */
.site-updates__robot {
  --robot-width: clamp(960px, 82vw, 1320px);
  position: absolute;
  z-index: 0;
  left: calc(var(--robot-width) * -0.2);
  bottom: var(--story-robot-bottom);
  display: block;
  width: var(--robot-width);
  max-width: none;
  height: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}

/* The film CTA shares the site's glass control material and brand palette. */
.scroll-video__pitchdeck {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
.pitchdeck-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  width: min(100%, 360px);
  min-height: 72px;
  padding: 20px 30px;
  border: 1px solid rgb(250 248 243 / .3);
  border-radius: 999px;
  background: rgb(11 33 89 / .96);
  color: #faf8f3;
  box-shadow: var(--glass-lift-shadow);
  font: inherit;
  font-size: 20px;
  line-height: 1.4;
  text-decoration: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background 220ms ease, transform 220ms ease;
}
.pitchdeck-link__label,
.pitchdeck-link > svg {
  position: relative;
  z-index: 1;
}
.pitchdeck-link > svg {
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pitchdeck-link:hover {
  background: #1d4e9d;
  transform: scale(1.06);
}
.pitchdeck-link:focus-visible {
  outline: 2px solid #0b2159;
  outline-offset: 5px;
}
@media (max-width: 700px) {
  .scroll-video__pitchdeck { margin-top: 40px; }
  .pitchdeck-link { min-height: 64px; padding: 17px 24px; gap: 24px; font-size: 18px; }
}
@media (max-width: 360px) {
  .pitchdeck-link { padding-inline: 20px; gap: 20px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pitchdeck-link { transition: none; }
  .pitchdeck-link:hover { transform: none; }
}

/* Fixed-size film, aligned with the service cards at every viewport width. */
scroll-video {
  --film-tail: clamp(240px, 30vw, 440px);
  --film-house-overlap: clamp(40px, 7vw, 96px);
  display: block;
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--story-robot-bottom) - 12px);
  padding-bottom: var(--film-tail);
  pointer-events: none;
}
.scroll-video__stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 48px;
}
.scroll-video__frame {
  contain: layout style;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  border-radius: 24px;
  pointer-events: auto;
}
.scroll-video__definition {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.scroll-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 799px) {
  fluid-spline-nav {
    height: 116px;
  }
  .hero {
    min-height: calc(100svh - 116px + 48px);
    padding: 30px 24px 102px;
  }
  .hero-foot {
    align-items: end;
    font-size: 22px;
  }
  .hero-foot span {
    max-width: 100%;
  }
  .forms {
    width: 100%;
  }
  .curve-note {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 70px 24px;
  }
  .curve-graphic {
    justify-self: center;
  }
  .color-band--story { --story-robot-bottom: 32px; }
  .site-updates {
    --updates-robot-width: clamp(720px, 200vw, 980px);
    min-height: 760px;
    align-items: start;
  }
  .site-updates__content {
    padding: 118px 24px max(clamp(500px, 95vw, 620px), calc(var(--updates-robot-width) * 1072 / 1920 + var(--updates-robot-bottom) + 24px));
  }
  .site-updates__robot {
    --robot-width: var(--updates-robot-width);
    left: calc(var(--robot-width) * -0.36);
    bottom: var(--story-robot-bottom);
  }
  .site-updates h2 {
    margin: 0 0 24px auto;
    font-size: clamp(44px, 12vw, 72px);
    letter-spacing: -0.06em;
  }
  .site-updates p {
    font-size: 14px;
    max-width: min(100%, 26ch);
    line-height: 1.65;
    text-wrap: pretty;
  }
  .site-updates__image {
    object-position: 70% 50%;
  }
  .site-updates__backdrop {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 78%, transparent);
  }
  .site-updates__backdrop::after {
    background: linear-gradient(
      to bottom,
      rgb(var(--site-background-rgb) / 0.82) 4%,
      rgb(var(--site-background-rgb) / 0.6) 28%,
      rgb(var(--site-background-rgb) / 0.08) 66%
    );
  }
  .scroll-video__stage { padding-inline: 24px; }
}
@media (min-width: 800px) {
  .site-updates {
    min-height: clamp(760px, 85svh, 900px);
  }
  .site-updates__robot {
    --robot-width: clamp(800px, 82vw, 1320px);
    left: 0;
    bottom: var(--story-robot-bottom);
  }
  .site-updates__content {
    max-width: none;
    padding: clamp(80px, 7vw, 128px) clamp(32px, 5vw, 120px) clamp(480px, 35vw, 600px);
    text-align: right;
  }
  .site-updates h2 {
    max-width: 760px;
    margin: 0 0 28px auto;
    font-size: clamp(64px, 7.4vw, 108px);
    line-height: 0.99;
    letter-spacing: -0.065em;
  }
  .site-updates p {
    max-width: min(38ch, 28vw);
    margin: 0 0 0 auto;
    font-size: 18px;
    line-height: 1.5;
    white-space: normal;
    text-wrap: pretty;
  }
  .hero-foot,
  .hero-foot__terms {
    justify-content: center;
  }
}
@media (max-width: 599px) {
  .color-band--story { --story-robot-bottom: calc(clamp(24px, calc(460px - 100vw), 64px) + 32px); }
  .hero {
    padding-inline: 20px;
  }
  .hero-foot {
    font-size: 18px;
  }
  .hero-foot__terms {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-foot__separator,
  .hero-foot__term--extra {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .site-updates[data-reveal="visible"] .site-updates__image {
    transition: none;
  }
  .site-updates[data-reveal="pending"] .site-updates__image {
    opacity: 1;
    transform: none;
  }
}

/* scan-benefits.css */
.scan-benefits {
  --benefits-ease: cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 1440px;
  margin: 0 auto;
  padding: 110px 48px 160px;
  min-height: var(--benefits-section-height, auto);
  scroll-margin-top: 40px;
}
scan-benefits {
  display: block;
}
.scan-benefits__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(40px, 4.5vw, 64px);
}
.scan-benefits__content {
  min-width: 0;
}
.scan-benefits__list {
  min-height: var(--benefits-list-height, 0px);
}
.scan-benefits h2 {
  margin: 0 0 28px;
  font-size: clamp(44px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.scan-benefits__item {
  border-top: 1px solid rgb(255 255 255 / 0.18);
}
.scan-benefits__item:last-child {
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
}
.scan-benefits__item h3 {
  margin: 0;
  font: inherit;
}
.scan-benefits__trigger {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border: 0;
  background: transparent;
  color: var(--site-text-subtle, #a3a3a3);
  font: inherit;
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.5;
  letter-spacing: 0.055em;
  text-align: left;
  cursor: pointer;
  transition: color 240ms ease;
}
.scan-benefits__trigger[data-pointer-near] {
  color: var(--site-text-muted, #d6d6d6);
}
.scan-benefits__trigger:hover,
.scan-benefits__trigger:focus-visible,
.scan-benefits__trigger[aria-expanded="true"] {
  color: #faf8f3;
}
.scan-benefits__trigger > span {
  pointer-events: none;
}
.scan-benefits__trigger > span:first-child {
  transform-origin: left center;
  transition: transform 400ms var(--benefits-ease);
}
.scan-benefits__trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 7px;
  border-radius: 12px;
}
.scan-benefits__toggle {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.035);
  transition:
    background 400ms var(--benefits-ease),
    border-color 400ms ease,
    transform 400ms var(--benefits-ease);
}
.scan-benefits__toggle::before,
.scan-benefits__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition:
    transform 450ms var(--benefits-ease),
    opacity 240ms ease;
}
.scan-benefits__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
[data-open] > h3 .scan-benefits__toggle {
  border-color: rgb(255 255 255 / 0.45);
  background: rgb(255 255 255 / 0.1);
}
.scan-benefits__trigger:hover .scan-benefits__toggle,
.scan-benefits__trigger:focus-visible .scan-benefits__toggle {
  border-color: rgb(255 255 255 / 0.62);
  background: rgb(255 255 255 / 0.14);
}
[data-open] > h3 .scan-benefits__toggle::after {
  transform: translate(-50%, -50%) rotate(0);
  opacity: 0;
}
.scan-benefits__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 500ms var(--benefits-ease),
    opacity 300ms ease,
    visibility 0s 500ms;
}
[data-open] > .scan-benefits__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 500ms var(--benefits-ease),
    opacity 400ms ease 80ms,
    visibility 0s;
}
.scan-benefits__panel-inner {
  min-height: 0;
  overflow: hidden;
}
.scan-benefits__panel p {
  max-width: 440px;
  margin: 0;
  padding: 0 28px 22px 0;
  color: var(--site-text-muted, #b2b2b2);
  font-size: 15px;
  line-height: 1.65;
}
.scan-benefits__visual {
  position: relative;
  min-width: 0;
  width: min(100%, 420px);
  aspect-ratio: 5 / 4;
  margin: 0;
  justify-self: center;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
  box-shadow: var(--glass-lift-shadow);
}
.scan-benefits__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  border: 1px solid rgb(255 255 255 / .32);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
  pointer-events: none;
}
.scan-benefits__visual picture { display: contents; }
.scan-benefits__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scan-benefits__visual img[data-active] {
  opacity: 1;
}
.scan-benefits__visual img[data-benefit-image="default"] {
  transform: scale(1);
  transform-origin: 50% 35%;
  transition:
    opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 160ms var(--benefits-ease);
}
.scan-benefits__visual[data-photo-motion] img[data-benefit-image="default"] {
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .scan-benefits__trigger > span:first-child {
    transform: translate(var(--label-pull-x, 0px), var(--label-pull-y, 0px))
      scale(var(--label-scale, 1));
  }
  .scan-benefits__toggle {
    transform: translate(var(--toggle-pull-x, 0px), var(--toggle-pull-y, 0px))
      scale(var(--toggle-scale, 1));
  }
  .scan-benefits__trigger:hover {
    --label-scale: 1.015;
    --toggle-scale: 1.02;
  }
}

@media (max-width: 799px) {
  .scan-benefits {
    padding: 80px 28px 128px;
    scroll-margin-top: 24px;
  }
  .scan-benefits__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .scan-benefits h2 {
    margin-bottom: 24px;
    font-size: clamp(34px, 9.5vw, 48px);
  }
  .scan-benefits__trigger {
    min-height: 64px;
    gap: 12px;
    font-size: 13px;
    letter-spacing: 0.035em;
  }
  .scan-benefits__panel p {
    max-width: 520px;
    padding: 0 4px 10px 0;
    font-size: 14px;
    line-height: 1.6;
  }
  .scan-benefits__visual {
    width: min(100%, 520px);
    border-radius: 14px;
  }
}
@media (max-width: 599px) {
  .scan-benefits {
    --benefits-top-space: 36px;
    padding-block: 36px 80px;
    scroll-margin-top: 16px;
  }
  .scan-benefits__layout {
    gap: 16px;
  }
  .scan-benefits h2 {
    margin-bottom: 16px;
  }
  .scan-benefits__trigger {
    min-height: 52px;
    padding-block: 10px;
  }
  .scan-benefits__panel p {
    padding-bottom: 8px;
    line-height: 1.5;
  }
  /* Keep the complete 5:4 photo in view alongside the compact accordion. */
  .scan-benefits__visual {
    width: min(100%, 42.5svh);
  }
}
@media (max-width: 599px) and (max-height: 650px) {
  .scan-benefits {
    --benefits-top-space: 24px;
    padding-top: 24px;
  }
  .scan-benefits__layout {
    gap: 12px;
  }
  .scan-benefits__trigger {
    min-height: 48px;
    padding-block: 8px;
  }
  .scan-benefits__visual {
    width: min(100%, 32svh);
  }
}
@media (max-width: 359px) {
  .scan-benefits__trigger {
    font-size: 12px;
    letter-spacing: 0.025em;
  }
  .scan-benefits__toggle {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scan-benefits__visual img[data-benefit-image="default"] {
    transition: none;
    transform: none;
    will-change: auto;
  }
  .scan-benefits__panel,
  [data-open] > .scan-benefits__panel,
  .scan-benefits__visual img,
  .scan-benefits__trigger > span:first-child,
  .scan-benefits__toggle,
  .scan-benefits__toggle::before,
  .scan-benefits__toggle::after {
    transition: none;
    transform: none;
  }
  .scan-benefits__toggle::before {
    transform: translate(-50%, -50%);
  }
  .scan-benefits__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* hero.css */
.hero {
  position: relative;
  isolation: isolate;
  max-width: none;
}

/* Give the cards their own blue space after the scan has fully faded out. */
.forms {
  position: relative;
  z-index: 1;
  margin-top: clamp(80px, 10svh, 128px);
}
.forms > liminal-forms[glass] {
  --forms-background: transparent;
}

.hero[data-orbit-ready="true"] {
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.hero[data-dragging="true"] {
  cursor: grabbing;
}

.hero-foot {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1344px;
  margin-inline: auto;
  pointer-events: none;
  text-shadow: 0 1px 12px #000;
}

.hero-scan {
  --hero-brightness: 1.1;
  position: absolute;
  inset: -145px 0 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  background: var(--hero-clear-color, var(--site-background, #0647ff));
  pointer-events: none;
}

.hero-scan__canvas,
.hero-scan__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--hero-brightness));
  opacity: 0;
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Individual points handle their own entrance inside the renderer. */
.hero-scan__canvas {
  transition-duration: 180ms;
}

.hero-scan[data-visible="true"] > canvas,
.hero-scan[data-visible="true"] > img {
  opacity: 1;
}

/* Keep the scan clear at the top and sides; blend only its bottom into the page. */
.hero-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 67%,
    rgb(var(--site-background-rgb, 6 71 255) / 0.4) 85%,
    var(--site-background, #0647ff) 100%
  );
}

@media (max-width: 799px) {
  .forms {
    margin-top: clamp(56px, 8svh, 80px);
  }
  .hero-scan {
    top: -116px;
  }
  .hero-scan::after {
    background: linear-gradient(
      to bottom,
      transparent 68%,
      rgb(var(--site-background-rgb, 6 71 255) / 0.4) 85%,
      var(--site-background, #0647ff) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scan__canvas,
  .hero-scan__poster {
    transition: none;
  }
}

/* scroll-video-glass.css */
/* The facade begins behind the film's lower edge, with a stationary fade. */
.scroll-video__architecture {
  --film-building-image-height: clamp(850px, 100vw, 1440px);
  position: absolute;
  right: 0;
  top: calc(100% - var(--film-tail) - var(--film-house-overlap));
  bottom: 0;
  width: calc(var(--film-building-image-height) * 941 / 1672);
  overflow: hidden;
  /* A stationary spatial mask; no scroll-driven opacity animation. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    rgb(0 0 0 / 0.06) 5%,
    rgb(0 0 0 / 0.25) 12%,
    rgb(0 0 0 / 0.65) 22%,
    #000 34%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    rgb(0 0 0 / 0.06) 5%,
    rgb(0 0 0 / 0.25) 12%,
    rgb(0 0 0 / 0.65) 22%,
    #000 34%
  );
  pointer-events: none;
  user-select: none;
}
.scroll-video__architecture img {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: var(--film-building-image-height);
}
.scroll-video__architecture::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--film-building-image-height);
  background: var(--site-grain, url("../../../assets/background-grain.svg")) repeat 0 0 / var(--grain-size, 192px) var(--grain-size, 192px);
  mix-blend-mode: soft-light;
  -webkit-mask: var(--film-building-mask, linear-gradient(transparent, transparent)) center / 100% 100% no-repeat;
  mask: var(--film-building-mask, linear-gradient(transparent, transparent)) center / 100% 100% no-repeat;
}

/* The border is glass; the inset picture and native controls stay sharp. */
.scroll-video__frame {
  background: transparent;
  overflow: visible;
  min-width: 0;
}
.scroll-video__glass,
.scroll-video__frost,
.scroll-video__rim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scroll-video__glass {
  z-index: 0;
}
.scroll-video__frost {
  background: rgb(255 255 255 / 0.075);
}
.scroll-video__rim {
  width: 100%;
  height: 100%;
  z-index: 3;
  fill: none;
  overflow: visible;
}
.scroll-video__rim path {
  vector-effect: non-scaling-stroke;
}
.scroll-video__rim-soft {
  stroke: rgb(255 255 255 / 0.12);
  stroke-width: 2px;
  filter: blur(1px);
}
.scroll-video__rim-sharp {
  stroke: rgb(255 255 255 / 0.32);
  stroke-width: 1px;
}
.scroll-video__rim-light {
  stroke-width: 2px;
  mix-blend-mode: normal;
  opacity: 0.2;
}
.scroll-video__window {
  position: absolute;
  z-index: 1;
  left: var(--film-inset, 12px);
  right: var(--film-inset, 12px);
  top: 50%;
  height: var(--film-media-height, calc(100% - 24px));
  transform: translateY(-50%);
  overflow: hidden;
  border-radius: 24px;
  background: #080808;
}
.scroll-video__poster,
.scroll-video__player-mount {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--film-player-width, 100%);
  height: var(--film-player-height, 100%);
  transform: translate(-50%, -50%);
  border: 0;
}
.scroll-video__player-mount iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Crop the 4:3 thumbnail to the same 16:9 picture as the live player. */
.scroll-video__poster {
  object-fit: cover;
}
.scroll-video__player-mount {
  z-index: 1;
}
.scroll-video__fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 32px;
  background: #111;
  color: #faf8f3;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
}
.scroll-video__fallback small {
  color: #aaa;
  font-size: 12px;
}
.scroll-video__fallback[hidden] {
  display: none;
}
.scroll-video__fallback:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -12px;
}
scroll-video:fullscreen {
  background: var(--site-background, #000);
}

/* device-preview.css */
.workflow {
  max-width: 1440px;
  margin: 0 auto;
  /* Move the diagram toward the film while preserving the section's total height. */
  padding: 24px 48px 112px;
  scroll-margin-top: 32px;
}
.workflow__heading {
  text-align: center;
  margin-bottom: 32px;
}
.workflow__heading h2 {
  margin: 0;
  font-size: clamp(36px, 4vw, 52px);
}
.workflow__diagram {
  position: relative;
  width: min(560px, 90%);
  aspect-ratio: 1;
  margin: 0 auto;
}
.workflow__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgb(255 255 255 / 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.workflow__route-compact {
  display: none;
}
.workflow__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.workflow__step {
  position: absolute;
  display: grid;
  justify-items: center;
  width: 24%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.workflow__step:nth-child(1) {
  left: 50%;
  top: 14%;
}
.workflow__step:nth-child(2) {
  left: 86%;
  top: 50%;
}
.workflow__step:nth-child(3) {
  left: 50%;
  top: 86%;
}
.workflow__step:nth-child(4) {
  left: 14%;
  top: 50%;
}
.workflow__icon {
  display: grid;
  place-items: center;
  width: clamp(40px, 10vw, 68px);
  aspect-ratio: 1;
  border: 1px solid #444;
  border-radius: 50%;
  color: #bcbcbc;
  background: #080808;
}
.workflow__icon svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.workflow__step h3 {
  margin: 12px 0 0;
  color: var(--site-text-subtle, #aaa);
  font-size: clamp(10px, 1.6vw, 13px);
  font-weight: 400;
  letter-spacing: 0.065em;
  line-height: 1.2;
  text-transform: uppercase;
}
.workflow__center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  width: 34%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.workflow__center-title {
  color: var(--site-text-subtle, #bcbcbc);
  font-size: clamp(16px, 2.4vw, 23px);
  letter-spacing: -0.045em;
  line-height: 1.1;
}
.workflow__robot {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 639 / 700;
  margin: 10px 0;
}
.workflow__graphic {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 639 / 700;
  opacity: 0.95;
}
/* Each soft contact follows a foot in the original transparent image. */
.workflow__contact-shadow {
  position: absolute;
  z-index: 0;
  width: 16%;
  height: 4.5%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    rgb(22 9 42 / 0.42),
    rgb(22 9 42 / 0.2) 32%,
    rgb(22 9 42 / 0) 72%
  );
  pointer-events: none;
}
.workflow__contact-shadow--left {
  left: 11.7%;
  top: 91.8%;
}
.workflow__contact-shadow--front {
  left: 38.3%;
  top: 97.5%;
  width: 18%;
  height: 5%;
}
.workflow__contact-shadow--back {
  left: 53.9%;
  top: 85.8%;
  width: 14%;
  height: 4%;
}
.workflow__contact-shadow--right {
  left: 81.1%;
  top: 90.2%;
}
.workflow__center-caption {
  color: var(--site-text-subtle, #777);
  font-size: clamp(7px, 1vw, 8px);
  letter-spacing: 0.13em;
  line-height: 1.5;
}

.device-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 56px 48px 110px;
  scroll-margin-top: 48px;
  overflow-x: clip;
}
device-preview {
  display: block;
  --device-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.device-switcher {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(360px, 100%);
  margin: 0 auto 32px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
}
.device-switcher[hidden] {
  display: none;
}
.device-switcher__indicator {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / 3);
  border-radius: 999px;
  background: transparent;
  transform: translateX(calc(var(--device-index, 0) * 100%));
  transition: transform 550ms var(--device-ease);
}
.device-switcher__glass,
.device-switcher__frost,
.device-switcher__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.device-switcher__glass {
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.075),
    transparent 48%,
    rgb(255 255 255 / 0.02)
  );
}
.device-switcher__rim {
  z-index: 0;
  border: 1px solid rgb(255 255 255 / 0.28);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 0.4),
    inset 0 -1px 1px rgb(255 255 255 / 0.12),
    var(--glass-lift-shadow);
  background: linear-gradient(145deg, rgb(255 255 255 / 0.075), transparent 42%);
}
.device-switcher__indicator > .device-switcher__rim {
  border-color: rgb(255 255 255 / 0.62);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 0.65),
    inset 0 -1px 1px rgb(255 255 255 / 0.2),
    0 2px 6px rgb(7 21 47 / 0.07);
  background: linear-gradient(145deg, rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.04) 62%);
}
.device-switcher button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--site-text-subtle, #d7d7d7);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}
.device-switcher button:hover,
.device-switcher button[aria-selected="true"] {
  color: #faf8f3;
}
.device-switcher button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}
.device-switcher button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.device-stage {
  display: grid;
  place-items: center;
  position: relative;
  padding-block: 32px;
}
device-preview[data-ready] .device-stage {
  height: var(--stage-height);
  transition: height 650ms var(--device-ease);
}
.device-stage:focus-visible {
  outline: 1px solid #777;
  outline-offset: 6px;
  border-radius: 24px;
}
.device-mockup {
  display: block;
  max-width: 100%;
  object-fit: contain;
}
.device-mockup[hidden],
.device-shell[hidden] {
  display: none;
}
.device-shell {
  --device-bezel: 16px;
  position: relative;
  width: min(960px, 90%);
  margin: 0;
  padding: var(--device-bezel);
  border: 1px solid #656565;
  border-radius: 26px;
  background: #141414;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
device-preview[data-ready] .device-shell {
  width: var(--device-width);
  height: var(--device-height);
  transition:
    width 650ms var(--device-ease),
    height 650ms var(--device-ease),
    padding 650ms var(--device-ease),
    border-radius 650ms var(--device-ease);
}
.device-screen {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #050505;
}
.device-viewer {
  position: absolute;
  inset: 0;
  display: block;
  border: 0;
  transform-origin: top left;
  color-scheme: light;
}
device-preview[data-ready] .device-screen {
  height: 100%;
  aspect-ratio: auto;
}
.device-placeholder {
  width: 100%;
  height: 100%;
  background: #faf8f3;
}
.device-camera {
  position: absolute;
  top: calc(var(--device-bezel) / 2 - 2px);
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6c6c6c;
}
.device-base {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  width: 108%;
  height: 14px;
  border-radius: 2px 2px 40px 40px / 2px 2px 12px 12px;
  background: #bdbdbd;
  transform: translateX(-50%);
  opacity: 1;
  transition:
    opacity 240ms ease,
    transform 650ms var(--device-ease);
}
.device-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 42%;
  width: 16%;
  height: 4px;
  background: #444;
  border-radius: 0 0 12px 12px;
}
device-preview[data-device="tablet"] .device-shell {
  border-radius: 30px;
}
device-preview[data-device="phone"] .device-shell {
  border-radius: 38px;
}
device-preview[data-device="phone"] .device-screen {
  border-radius: 26px;
}
device-preview:not([data-device="laptop"]) .device-base {
  transform: translateX(-50%) scaleX(0.84);
  opacity: 0;
}
.device-section__action {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.viewer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 52px;
  padding: 15px 24px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background 200ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.viewer-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viewer-link:not(:disabled):hover {
  background: #dedede;
  transform: translateY(-2px);
}
.viewer-link:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
  font-family: inherit;
}
.viewer-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

@media (max-width: 799px) {
  .workflow {
    padding: 16px 24px 80px;
  }
  .workflow__heading {
    margin-bottom: 28px;
  }
  .workflow__diagram {
    margin-block: 20px;
  }
  .workflow__route {
    stroke-width: 2;
  }
  .device-section {
    padding: 48px 24px 72px;
  }
  .device-switcher {
    margin-bottom: 8px;
  }
  .device-base {
    height: 10px;
  }
}
@media (max-width: 599px) {
  .workflow__center-title,
  .workflow__center-caption,
  .workflow__route-wide {
    display: none;
  }
  .workflow__route-compact {
    display: block;
  }
  .workflow__center {
    width: 38%;
  }
  .workflow__robot {
    margin: 0;
  }
}
@media (max-width: 359px) {
  .device-switcher button {
    gap: 5px;
    font-size: 12px;
    padding-inline: 4px;
  }
  .device-switcher button svg {
    width: 15px;
    height: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .device-switcher__indicator,
  .device-switcher button,
  device-preview[data-ready] .device-stage,
  device-preview[data-ready] .device-shell,
  .device-base,
  .viewer-link {
    transition: none;
  }
  .viewer-link:hover {
    transform: none;
  }
}

/* language-switcher.css */
language-switcher {
  --device-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 76px;
  height: 30px;
  padding: 2px;
  border-radius: 999px;
  background: transparent;
  color: #faf8f3;
  box-sizing: border-box;
}
language-switcher .language-switcher__indicator {
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / 2);
  transform: translateX(calc(var(--language-index, 0) * 100%));
}
language-switcher button {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(250 248 243 / 0.65);
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
  font:
    500 10px/1 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.055em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 220ms ease;
}
/* Keep a comfortable touch height around the smaller visible pill. */
language-switcher button::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}
language-switcher button:hover,
language-switcher button[aria-pressed="true"] {
  color: #faf8f3;
}
language-switcher button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
fluid-spline-nav[compact] language-switcher {
  width: 68px;
  height: 28px;
}
fluid-spline-nav[compact] language-switcher button::before {
  inset-block: -10px;
}
@media (max-width: 599px) {
  fluid-spline-nav[compact] language-switcher {
    top: 0;
    width: 52px;
    height: 22px;
  }
  fluid-spline-nav[compact] language-switcher button {
    font-size: 9px;
    letter-spacing: 0.025em;
  }
  fluid-spline-nav[compact] language-switcher button::before {
    inset-block: -13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  language-switcher button,
  language-switcher .language-switcher__indicator {
    transition: none;
  }
}

/* workflow-glass.css */
/* The original small circles and open diagram stay in place. */
.workflow__icon {
  position: relative;
  border: 0;
  background: transparent;
  color: #d0d0d0;
}
.workflow__glass,
.workflow__frost,
.workflow__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.workflow__glass {
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.075),
    transparent 48%,
    rgb(255 255 255 / 0.02)
  );
  box-shadow: inset 0 0 10px rgb(255 255 255 / 0.035);
}
.workflow__rim {
  border: 1px solid rgb(255 255 255 / 0.2);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 0.36),
    inset 0 -1px 1px rgb(255 255 255 / 0.1),
    var(--glass-lift-shadow);
  background: linear-gradient(145deg, rgb(255 255 255 / 0.075), transparent 42%);
}
.workflow__icon > svg {
  position: relative;
  z-index: 2;
}
.workflow__route {
  pointer-events: none;
}

/* Hide only the moving artwork, leaving the centered robot in place. */
.workflow[data-workflow-reveal="pending"]
  :is(
    .workflow__glass,
    .workflow__rim,
    .workflow__icon > svg,
    .workflow__step h3,
    .workflow__route
  ) {
  opacity: 0;
}
.workflow[data-workflow-reveal="running"] .workflow__icon {
  will-change: transform;
}

/* A small light follows the existing arcs, disappearing behind the step gaps. */
.workflow__orbit circle {
  --orbit-start: 0;
  --orbit-end: -1000;
  stroke: #fff;
  vector-effect: non-scaling-stroke;
  stroke-dashoffset: var(--orbit-start);
  animation: workflow-orbit 18s linear infinite paused;
}
.workflow__orbit-tail {
  stroke-width: 1;
  stroke-dasharray: 28 972;
  opacity: 0.24;
}
.workflow__orbit-tail--soft {
  stroke-width: 3;
  opacity: 0.12;
  filter: blur(1px);
}
.workflow__orbit .workflow__orbit-tip {
  --orbit-start: -27;
  --orbit-end: -1027;
  stroke-width: 1.7;
  stroke-dasharray: 1 999;
  opacity: 0.6;
}
.workflow[data-motion-active="true"] .workflow__orbit circle {
  animation-play-state: running;
}
@keyframes workflow-orbit {
  from {
    stroke-dashoffset: var(--orbit-start);
  }
  to {
    stroke-dashoffset: var(--orbit-end);
  }
}
@media (prefers-reduced-motion: reduce) {
  .workflow__orbit {
    display: none;
  }
  .workflow__orbit circle {
    animation: none;
  }
}

/* team.css */
.team {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 48px 112px;
  scroll-margin-top: 32px;
}
.team__heading {
  margin-bottom: 48px;
}
.team [data-team-enter] {
  opacity: 0;
}
.team__heading h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 68px);
}
.team__definitions {
  position: absolute;
  pointer-events: none;
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.team__grid > li {
  min-width: 0;
}
.team-member {
  margin: 0;
}
.team-member__portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 32px;
  clip-path: url("#team-portrait-contour");
  background: #151515;
}
.team-member__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1);
  transform: scale(1);
  transform-origin: 50% 30%;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.team[data-portrait-motion] .team-member__portrait img {
  will-change: transform;
}
.team-member__caption {
  padding: 24px 4px 0;
}
.team-member h3 {
  margin: 0 0 10px;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.035em;
}
.team-member__role {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--site-text-muted, #c8c8c8);
}
.team-member__focus {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--site-text-subtle, #888);
}

@media (max-width: 1099px) {
  .team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 28px;
  }
}
@media (max-width: 799px) {
  .team {
    padding: 48px 24px 80px;
  }
  .team__heading {
    margin-bottom: 36px;
  }
  .team__grid {
    gap: 36px 20px;
  }
  .team-member__caption {
    padding-top: 20px;
  }
}
@media (max-width: 539px) {
  .team__heading {
    max-width: 360px;
    margin-inline: auto;
  }
  .team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
  }
  .team-member__caption {
    padding: 16px 0 0;
  }
  .team-member h3 {
    margin-bottom: 8px;
    font-size: clamp(17px, 4.5vw, 21px);
  }
  .team-member__role {
    font-size: 12px;
  }
  .team-member__focus {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .team-member__portrait img {
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* The same service copy is readable before JavaScript and slotted into the cards. */
liminal-forms [slot$="-title"] a { color: inherit; text-decoration: none; }
liminal-forms [slot$="-title"] a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

/* scan-stats.css — shares the team and benefits content edges. */
.scan-stats {
  max-width: 1440px;
  margin-inline: auto;
  padding: 48px 48px 16px;
  color: #faf8f3;
}
.forms + .scan-stats { padding-top: 112px; }
.scan-stats__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.scan-stats__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  justify-self: center;
  text-align: center;
}
.scan-stats__item dt {
  order: 2;
  position: relative;
  z-index: 1;
  margin-top: clamp(-40px, -2.7vw, -24px);
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.5;
  color: rgb(215 218 226 / .64);
  width: var(--count-ink-width, auto);
}
.scan-stats__item dd { margin: 0; padding-right: var(--count-unit-space, 0px); }
/* Add a little breathing room before the benefits chapter. */
.scan-stats + .color-band--benefits { padding-top: 24px; }
.scan-stats__display {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  white-space: nowrap;
  font-size: clamp(72px, 11vw, 164px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-kerning: none;
  line-height: 1.08;
  letter-spacing: -.065em;
  color: #d7dae2;
}
.scan-stats__reel,
.scan-stats__display > [data-stat-count] {
  /* A slightly softer white, fading earlier into the same transparent bottom edge. */
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / .85) 17%, transparent 79%);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / .85) 17%, transparent 79%);
}
.scan-stats__display [data-stat-count] {
  color: #fff;
}
.scan-stats__unit {
  position: absolute;
  left: calc(100% + .1em);
  top: .8em;
  font-size: .2em;
  letter-spacing: -.025em;
  opacity: .64;
}
.scan-stats__reel {
  position: relative;
  display: block;
  height: 1.08em;
  overflow: hidden;
  contain: layout paint style;
}
.scan-stats__sizer { display: block; visibility: hidden; }
.scan-stats__track {
  position: absolute;
  top: 0;
  left: var(--count-ink-offset, 0px);
  width: var(--count-advance-width, 100%);
  text-align: center;
}
.scan-stats__track > span { display: block; height: 1.08em; }
.scan-stats__track[data-count-motion] {
  filter: blur(var(--count-blur, 0px));
  text-shadow:
    0 calc(var(--count-smear, 0px) * -1) 1px rgb(250 248 243 / .22),
    0 var(--count-smear, 0px) 1px rgb(250 248 243 / .22);
  will-change: filter;
}
@media (prefers-reduced-motion: reduce) {
  .scan-stats__track[data-count-motion] { filter: none; text-shadow: none; will-change: auto; }
}
.scan-stats__accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 799px) {
  .scan-stats { padding: 36px 24px 48px; }
  .forms + .scan-stats { padding-top: 84px; }
  .scan-stats__grid { display: grid; grid-template-columns: 1fr; gap: 48px; padding: 0; }
  .scan-stats__item { padding: 0; }
  .scan-stats__item dd { padding-right: 0; }
  .scan-stats__display { font-size: clamp(96px, 28vw, 132px); }
  .scan-stats__item dt { margin-top: -28px; font-size: 15px; }
}

/* company-marquee.css */
.company-strip {
  padding: 76px 0 24px;
  background: var(--site-background, #000);
  scroll-margin-top: 24px;
}
company-marquee {
  display: block;
}
.company-strip__window {
  --edge-fade: clamp(36px, 11vw, 180px);
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)),
    transparent
  );
}
.company-strip__window:focus-visible {
  outline: 1px solid #555;
  outline-offset: -1px;
}
.company-strip__track {
  display: flex;
  width: max-content;
}
.company-strip__group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 auto;
  width: max-content;
  min-width: 100vw;
  gap: clamp(28px, 3vw, 48px);
  margin: 0;
  padding: 20px clamp(14px, 1.5vw, 24px);
  list-style: none;
}
.company-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 188px;
  gap: 10px;
  height: 66px;
  color: #d7dae2;
  opacity: 0.64;
  user-select: none;
}
.company-logo__mark {
  display: block;
  width: var(--logo-width);
  height: var(--logo-height);
  max-width: 100%;
  background: currentColor;
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
  mask: var(--logo-mask) center / contain no-repeat;
  mask-mode: alpha;
}
.company-logo--keinsaas {
  --logo-mask: url("../../../assets/companies/keinsaas.svg");
  --logo-width: 160px;
  --logo-height: 30px;
}
.company-logo--innsbruck {
  --logo-mask: url("../../../assets/companies/innsbruck.a64f74607f9a.svg");
  --logo-width: 178px;
  --logo-height: 47px;
}
.company-logo--bit {
  --logo-mask: url("../../../assets/companies/berliner-immobilien-team.svg");
  --logo-width: 142px;
  --logo-height: 56px;
}
.company-logo--dgego {
  --logo-mask: url("../../../assets/companies/dgego.svg");
  --logo-width: 114px;
  --logo-height: 49px;
}
.company-logo svg {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.company-logo--arcova {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.065em;
}
.company-logo--formhaus {
  font-size: 25px;
  letter-spacing: -0.04em;
}
company-marquee[data-ready] .company-strip__window {
  overflow: hidden;
}
company-marquee[data-ready] .company-strip__track {
  animation: company-drift var(--company-duration, 50s) linear infinite paused;
}
company-marquee[data-motion-active] .company-strip__track { animation-play-state: running; }
@keyframes company-drift {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 799px) {
  .company-strip {
    padding: 48px 0 12px;
  }
  .company-strip__group {
    gap: 28px;
    padding: 16px 14px;
  }
  .company-logo {
    width: 154px;
    height: 56px;
    gap: 8px;
  }
  .company-logo--keinsaas {
    --logo-width: 138px;
    --logo-height: 26px;
  }
  .company-logo--innsbruck {
    --logo-width: 152px;
    --logo-height: 40px;
  }
  .company-logo--bit {
    --logo-width: 124px;
    --logo-height: 48px;
  }
  .company-logo--dgego {
    --logo-width: 100px;
    --logo-height: 42px;
  }
  .company-logo svg {
    flex-basis: 25px;
    width: 25px;
    height: 25px;
  }
  .company-logo--arcova {
    font-size: 24px;
  }
  .company-logo--formhaus {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  company-marquee[data-ready] .company-strip__track {
    animation: none;
  }
  .company-strip__group[data-copy] {
    display: none;
  }
  company-marquee[data-ready] .company-strip__window {
    overflow-x: auto;
  }
  .company-strip__window {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* footer.css */
.site-footer {
  --footer-ease: cubic-bezier(0.22, 1, 0.36, 1);
  margin: 28px 8px 8px;
  color: #000;
  scroll-margin-top: 24px;
  overflow: clip;
}
.footer-reveal {
  transform: none;
  opacity: 1;
}
.site-footer[data-footer-reveal="pending"] .footer-reveal {
  transform: translateY(clamp(64px, 9vw, 120px));
  opacity: 0;
}
.site-footer[data-footer-reveal="visible"] .footer-reveal {
  transition:
    transform 600ms var(--footer-ease),
    opacity 450ms ease-out;
}
.site-footer [data-footer-enter] {
  opacity: 0;
  pointer-events: none;
}
.footer-crest {
  position: relative;
  height: clamp(80px, 11vw, 158px);
}
.footer-crest__shape {
  display: block;
  width: 100%;
  height: 100%;
  fill: #fff;
}
.footer-top {
  position: absolute;
  top: clamp(14px, 2.2vw, 32px);
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #c7c7c7;
  border-radius: 50%;
  transform: translateX(-50%);
  transition:
    background 220ms ease,
    border-color 220ms ease;
}
.footer-top svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 400ms var(--footer-ease);
}
.footer-top:hover {
  background: #eee;
  border-color: #999;
}
.footer-top:hover svg {
  transform: translateY(-3px);
}
.footer-surface {
  margin-top: -1px;
  padding: 4px 40px 28px;
  background: #fff;
  border-radius: 0 0 48px 48px;
}
.footer-inner {
  max-width: 1344px;
  margin: 0 auto;
}
.footer-invitation {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: end;
  gap: 64px;
  padding: 0 0 68px;
}
.footer-invitation h2 {
  margin: 0 0 24px;
  font-size: clamp(52px, 6.3vw, 90px);
  line-height: 0.99;
  letter-spacing: -0.065em;
}
.footer-invitation p {
  margin: 0;
  color: #626262;
  font-size: 15px;
  line-height: 1.65;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: end;
  padding: 0 0 4px;
}
.footer-contact__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  min-height: 58px;
  padding: 17px 24px;
  border: 1px solid #000;
  border-radius: 999px;
  background: #000;
  color: #faf8f3;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition:
    background 220ms ease,
    transform 400ms var(--footer-ease);
}
.footer-contact__button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-contact__button:hover {
  background: #292929;
  transform: translateY(-2px);
}
.footer-contact__email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  color: #626262;
  font-size: 13px;
  text-decoration: none;
  text-underline-offset: 4px;
}
.footer-contact__email:hover {
  color: #000;
  text-decoration: underline;
}
.footer-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  border-top: 1px solid #d8d8d8;
  padding: 15px 0 32px;
}
.footer-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
  text-underline-offset: 5px;
}
.footer-navigation a:hover {
  text-decoration: underline;
}
.footer-wordmark {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px 0 22px;
  font-size: clamp(56px, 21vw, 300px);
  line-height: 0.85;
  font-weight: 500;
  letter-spacing: -0.065em;
  text-decoration: none;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  font-size: 10px;
  line-height: 1.6;
  color: #626262;
  text-align: center;
}
.site-footer a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 5px;
}

/* Keep the authored footer geometry and reveal; only its material and ink change. */
.site-footer[data-footer-glass] {
  color: #faf8f3;
}
.site-footer[data-footer-glass] .footer-reveal {
  position: relative;
  opacity: 1;
}
.site-footer[data-footer-glass] .footer-crest,
.site-footer[data-footer-glass] .footer-surface {
  position: relative;
  z-index: 1;
}
/* Fade the material itself, keeping refractive glass outside translucent parents. */
.site-footer[data-footer-glass][data-footer-reveal="pending"]
  :is(.footer-glass__surface, .footer-glass__outline, .glass-elevation) {
  opacity: 0;
}
.site-footer[data-footer-glass][data-footer-reveal="visible"]
  :is(.footer-glass__surface, .footer-glass__outline, .glass-elevation) {
  transition: opacity 850ms ease-out;
}
.site-footer[data-footer-glass] .footer-crest__shape {
  opacity: 0;
}
.site-footer[data-footer-glass] .footer-surface {
  background: transparent;
}
.site-footer[data-footer-glass] .footer-invitation h2,
.site-footer[data-footer-glass] .footer-wordmark {
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.12);
}
.site-footer[data-footer-glass] .footer-invitation p,
.site-footer[data-footer-glass] .footer-contact__email,
.site-footer[data-footer-glass] .footer-bottom {
  color: var(--site-text-muted, rgb(255 255 255 / 0.68));
}
.site-footer[data-footer-glass] .footer-top {
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.03);
}
.site-footer[data-footer-glass] .footer-top:hover {
  border-color: rgb(255 255 255 / 0.5);
  background: rgb(255 255 255 / 0.12);
}
.site-footer[data-footer-glass] .footer-contact__button {
  border-color: #f7f7f7;
  background: #f7f7f7;
  color: #111;
}
.site-footer[data-footer-glass] .footer-contact__button:hover {
  border-color: #fff;
  background: #fff;
}
.site-footer[data-footer-glass] .footer-contact__email:hover {
  color: #faf8f3;
}
.site-footer[data-footer-glass] .footer-navigation {
  border-top-color: rgb(255 255 255 / 0.18);
}
.site-footer[data-footer-glass] .footer-navigation a:hover,
.site-footer[data-footer-glass] .footer-wordmark:hover {
  color: #faf8f3;
}
.site-footer[data-footer-glass] a:focus-visible {
  outline-color: #fff;
}

@media (max-width: 799px) {
  .site-footer {
    margin-top: 16px;
  }
  .footer-surface {
    padding: 16px 24px 24px;
    border-radius: 0 0 32px 32px;
  }
  .footer-invitation {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 42px;
  }
  .footer-invitation h2 {
    font-size: clamp(44px, 9vw, 68px);
  }
  .footer-contact {
    justify-self: start;
  }
  .footer-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 4px 24px;
    padding-bottom: 24px;
  }
  .footer-wordmark {
    padding-block: 8px 14px;
  }
  .footer-bottom {
    margin-top: 24px;
    font-size: 9px;
  }
}
@media (max-width: 379px) {
  .footer-surface {
    padding-inline: 20px;
  }
  .footer-navigation {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-invitation p {
    font-size: 14px;
  }
  .footer-desktop-break {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer[data-footer-reveal] .footer-reveal {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .site-footer[data-footer-glass][data-footer-reveal]
    :is(.footer-glass__surface, .footer-glass__outline, .glass-elevation) {
    opacity: 1;
    transition: none;
  }
  .footer-top,
  .footer-top svg,
  .footer-contact__button {
    transition: none;
  }
  .footer-top:hover svg,
  .footer-contact__button:hover {
    transform: none;
  }
}
.footer-bottom {
  position: relative;
}
.footer-legal {
  display: flex;
  gap: 18px;
  position: absolute;
  left: 0;
  font-size: 11px;
}
.footer-legal a {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
}
.footer-legal a:hover {
  opacity: 1;
}
.footer-legal a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}
@media (max-width: 599px) {
  .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }
  .footer-legal {
    position: static;
    order: 2;
    font-size: 11px;
  }
}

/* footer-glass.css */
.site-footer[data-footer-glass] {
  overflow-clip-margin: 12px;
}
.footer-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.footer-glass__definitions {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.footer-glass__surface,
.footer-glass__frost {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.footer-glass__outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  overflow: visible;
  pointer-events: none;
}
.footer-glass__outline path {
  vector-effect: non-scaling-stroke;
}
.footer-glass__edge-soft {
  stroke: rgb(255 255 255 / 0.12);
  stroke-width: 2px;
  filter: blur(1px);
}
.footer-glass__edge {
  stroke: rgb(255 255 255 / 0.32);
  stroke-width: 1px;
}
.footer-glass__rim {
  stroke-width: 2px;
}
.footer-glass__rim--screen {
  mix-blend-mode: normal;
  opacity: 0.2;
}
.footer-glass__rim--overlay {
  mix-blend-mode: normal;
  opacity: .4;
}

/* brand.css */
/* The supplied PNG is untouched. Crop its transparent export margins in the
   layout so the visible wordmark, rather than its canvas, is centered. */
.brand-wordmark {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2455 / 517;
  overflow: hidden;
}
.brand-wordmark img {
  position: absolute;
  display: block;
  left: -8.92057%;
  top: -11.992263%;
  width: 115.315682%;
  max-width: none;
  height: auto;
  pointer-events: none;
}
fluid-spline-nav .nav-wordmark {
  width: 230px;
  transform: translateY(-3px);
}
fluid-spline-nav[compact] .nav-wordmark {
  width: 180px;
}
/* Apply the static highlight after the transparent margins are cropped.
   Only the small logo layer receives the effect, not the glass or the scan. */
fluid-spline-nav[glass] .nav-wordmark .brand-wordmark {
  filter: brightness(1.06) drop-shadow(0 0 2px rgb(235 242 255 / 0.12));
}
.footer-wordmark img {
  filter: brightness(0);
}
.site-footer[data-footer-glass] .brand-wordmark img {
  filter: brightness(0) invert(1);
}
.footer-wordmark {
  width: min(100%, 1100px);
  font-size: inherit;
  line-height: normal;
  letter-spacing: normal;
}

/* social-links.css */
.social-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-links--nav {
  justify-content: center;
  padding-top: 4px;
}
.social-links--footer {
  margin-top: 4px;
}
.social-link {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 220ms ease,
    border-color 220ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.social-link svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-link .social-link__dot {
  fill: currentColor;
  stroke: none;
}
.social-link:hover {
  background: rgb(127 127 127 / 0.12);
  border-color: rgb(127 127 127 / 0.2);
  transform: translateY(-1px) scale(1.04);
}
.social-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .social-link {
    transition: none;
  }
  .social-link:hover {
    transform: none;
  }
}

/* color-experiment.css */
/* Reversible palette and spacing experiment. All visual overrides are gated.
   Original blue checkpoint: experiments/2026-09-20-before-color-bands/.
   Current design rationale: experiments/2026-09-21-palette-audit.md. */
.color-band {
  display: contents;
}

html[data-color-experiment="blueprint"] .color-band {
  display: flow-root;
  background: var(--site-background);
}

/* Logos sit between the opening scan and the service cards, with room on both sides. */
html[data-color-experiment="blueprint"] .company-strip {
  padding-block: 64px 72px;
}
html[data-color-experiment="blueprint"] .company-strip + .forms { margin-top: 24px; }

/* The benefits chapter shares the existing dark blue background. */
html[data-color-experiment="blueprint"] .color-band--benefits {
  --site-background: #0b2159;
  --site-background-rgb: 11 33 89;
  --site-text-muted: #faf8f3;
  --site-text-subtle: #faf8f3;
  color: #faf8f3;
}

/* Documentation and film retain their light ground before the next hard cut. */
html[data-color-experiment="blueprint"] .color-band--story {
  --site-background: #faf8f3;
  --site-background-rgb: 250 248 243;
  --site-text-muted: #445b78;
  --site-text-subtle: #445b78;
  color: #102b53;
}
html[data-color-experiment="blueprint"] .scan-benefits {
  padding-top: 96px;
}
html[data-color-experiment="blueprint"] .scan-benefits__item {
  border-color: rgb(255 255 255 / 0.3);
}
html[data-color-experiment="blueprint"] .scan-benefits__trigger:hover,
html[data-color-experiment="blueprint"] .scan-benefits__trigger:focus-visible,
html[data-color-experiment="blueprint"] .scan-benefits__trigger[aria-expanded="true"] {
  color: #faf8f3;
}
html[data-color-experiment="blueprint"] .scan-benefits__trigger:focus-visible {
  outline-color: #fff;
}
html[data-color-experiment="blueprint"] .scan-benefits__toggle {
  border-color: rgb(255 255 255 / 0.45);
  background: rgb(255 255 255 / 0.1);
}
html[data-color-experiment="blueprint"] [data-open] .scan-benefits__toggle,
html[data-color-experiment="blueprint"] .scan-benefits__trigger:hover .scan-benefits__toggle {
  border-color: rgb(255 255 255 / 0.8);
  background: rgb(255 255 255 / 0.16);
}
/* Only the temporary illustrations need this matte treatment; photos keep their colors. */
html[data-color-experiment="blueprint"] .scan-benefits__visual img[data-benefit-artwork],
html[data-color-experiment="blueprint"] .scan-benefits__mobile-image[data-benefit-artwork] {
  filter: invert(1);
  mix-blend-mode: multiply;
}

/* Full-width section backgrounds preserve the existing sticky-video siblings. */
html[data-color-experiment="blueprint"] .workflow {
  --site-background: #0b2159;
  --site-background-rgb: 11 33 89;
  --site-text-muted: rgb(250 248 243 / .9);
  --site-text-subtle: rgb(250 248 243 / .9);
  max-width: none;
  padding-top: 64px;
  background: var(--site-background);
  color: #faf8f3;
}
html[data-color-experiment="blueprint"] .workflow__icon {
  color: #faf8f3;
}
html[data-color-experiment="blueprint"] .workflow__route {
  stroke: rgb(255 255 255 / 0.4);
}
html[data-color-experiment="blueprint"] .workflow__graphic-back {
  stroke: rgb(255 255 255 / 0.38);
}
html[data-color-experiment="blueprint"] .workflow__orbit circle {
  stroke: #fff;
}
html[data-color-experiment="blueprint"] .workflow__rim {
  border-color: rgb(255 255 255 / 0.3);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 0.55),
    inset 0 -1px 1px rgb(255 255 255 / 0.1),
    var(--glass-lift-shadow);
}

/* The device preview begins at a second crisp edge on warm cream. */
html[data-color-experiment="blueprint"] .device-section {
  --site-background: #faf8f3;
  --site-background-rgb: 250 248 243;
  --site-text-muted: #635b6d;
  --site-text-subtle: #635b6d;
  max-width: none;
  padding-top: 80px;
  padding-bottom: 112px;
  background: var(--site-background);
  color: #252036;
}
html[data-color-experiment="blueprint"] .device-section > device-preview {
  max-width: 1344px;
  margin-inline: auto;
}
html[data-color-experiment="blueprint"] .device-switcher button {
  color: var(--site-text-subtle);
}
html[data-color-experiment="blueprint"] .device-switcher button:hover,
html[data-color-experiment="blueprint"] .device-switcher button[aria-selected="true"] {
  color: #0b2159;
}
html[data-color-experiment="blueprint"] .device-switcher .device-switcher__rim {
  border-color: rgb(11 33 89 / 0.16);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 0.9),
    var(--glass-lift-shadow);
}
html[data-color-experiment="blueprint"]
  .device-switcher
  .device-switcher__indicator
  > .device-switcher__rim {
  border-color: rgb(11 33 89 / 0.3);
  background: rgb(255 255 255 / 0.45);
}
html[data-color-experiment="blueprint"] .viewer-link {
  color: #faf8f3;
  background: #0b2159;
  border-color: #0b2159;
}
html[data-color-experiment="blueprint"] .viewer-link:not(:disabled):hover {
  background: #071840;
  border-color: #071840;
}
html[data-color-experiment="blueprint"] .viewer-link:focus-visible {
  outline-color: #0b2159;
}

/* The second cut introduces the people and contact chapter at its heading. */
html[data-color-experiment="blueprint"] .color-band--people {
  --site-background: #0b2159;
  --site-background-rgb: 11 33 89;
  --site-text-muted: rgb(250 248 243 / .9);
  --site-text-subtle: rgb(250 248 243 / .75);
  color: #faf8f3;
}
html[data-color-experiment="blueprint"] .team {
  padding-top: 96px;
}

@media (max-width: 799px) {
  html[data-color-experiment="blueprint"] .company-strip {
    padding-block: 48px 56px;
  }
  html[data-color-experiment="blueprint"] .company-strip + .forms { margin-top: 16px; }
  html[data-color-experiment="blueprint"] .scan-benefits {
    padding-top: var(--benefits-top-space, 72px);
  }
  html[data-color-experiment="blueprint"] .workflow {
    padding-top: 48px;
  }
  html[data-color-experiment="blueprint"] .device-section {
    padding-top: 64px;
    padding-bottom: 88px;
  }
  html[data-color-experiment="blueprint"] .team {
    padding-top: 72px;
  }
}

@media (max-width: 599px) {
  /* Rebalance the existing space around the heading and diagram on phones.
     Keep the purple band's height and both neighboring section boundaries. */
  html[data-color-experiment="blueprint"] .workflow {
    padding-top: 74px;
    padding-bottom: 54px;
  }
}

/* background-grain.css */
/* A small, cached tile on the painted backgrounds, never a page-wide overlay.
   Foreground ink, portraits and media stay above it. The hero's opaque render
   surface remains untextured and ends above the cards.
   Existing glass retains its smooth, blurred backdrop without surface noise. */
body,
.company-strip,
html[data-color-experiment] .color-band,
.site-updates,
html[data-color-experiment] .workflow,
html[data-color-experiment] .device-section {
  background-image: var(--site-grain, url("../../../assets/background-grain.svg"));
  background-repeat: repeat;
  background-size: var(--grain-size, 192px) var(--grain-size, 192px);
  background-blend-mode: soft-light;
}

/* The white-backed robot already blends into the section with multiply, so
   the background's grain carries through it without covering the headline. */

/* A full-color architectural cutout rises from the bottom-left corner.
   The section's purple becomes its sky; grain stays below all foreground UI. */
html[data-color-experiment="blueprint"] .workflow {
  --workflow-photo-width: clamp(220px, calc((100vw - 560px) / 2 + 20px), 640px);
  position: relative;
  isolation: isolate;
  background-image: var(--site-grain, url("../../../assets/background-grain.svg"));
  background-size: var(--grain-size, 192px) var(--grain-size, 192px);
  background-position: 0 0;
  background-repeat: repeat;
  background-blend-mode: soft-light;
}

/* Keep the architectural backdrop independent of the interactive diagram. */
.workflow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--workflow-photo, none) left bottom / var(--workflow-photo-width) auto no-repeat;
}
.workflow__heading, .workflow__diagram { position: relative; z-index: 1; }
.workflow__step { transition: opacity 240ms ease, filter 240ms ease; }
.workflow__step .workflow__icon,
.workflow__step h3 { scale: 1; transition: scale 280ms cubic-bezier(.22, 1, .36, 1); }
.workflow__center, .workflow__route { transition: opacity 240ms ease; }
.workflow[data-workflow-active] .workflow__step:not([data-step-active]) { opacity: .4; filter: grayscale(1); }
.workflow__step[data-step-active] .workflow__icon,
.workflow__step[data-step-active] h3 { scale: 1.12; }
.workflow[data-workflow-active] .workflow__center { opacity: .55; }
.workflow[data-workflow-active] .workflow__route { opacity: .35; }
@media (hover: none), (pointer: coarse) {
  .workflow::before { transition: opacity 280ms ease, filter 280ms ease; }
  .workflow[data-workflow-active]::before { opacity: .35; filter: grayscale(.65) blur(2px); }
}
.workflow__step:focus-visible { outline: none; }
.workflow__step:focus-visible .workflow__icon { outline: 2px solid currentColor; outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
  .workflow::before, .workflow__step, .workflow__step .workflow__icon,
  .workflow__step h3, .workflow__center, .workflow__route { transition: none; }
}

@media (max-width: 599px) {
  html[data-color-experiment="blueprint"] .workflow {
    --workflow-photo-width: min(44vw, 240px);
  }
  .workflow::before { background-image: var(--workflow-photo-small, var(--workflow-photo, none)); }
}

/* hero-intro.css */
/* Keep the point-cloud loading stage isolated from the site UI. */
html[data-hero-intro="loading"] body { background-image: none; }
html[data-hero-intro="loading"] body > header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
}
html[data-hero-intro="entering"] body > header {
  animation: intro-nav-in 950ms cubic-bezier(.22, 1, .36, 1) 180ms both;
}
@keyframes intro-nav-in {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-hero-intro="entering"] body > header { animation: none; }
}
/* Only the entry view is gated. Every section keeps its authored geometry. */
html[data-hero-intro] {
  scrollbar-gutter: stable;
}
html[data-hero-intro="loading"],
html[data-hero-intro="loading"] body {
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-hero-intro="loading"] .hero {
  pointer-events: none;
}
html[data-hero-intro="loading"],
html[data-hero-intro="loading"] *,
html[data-hero-intro-cursor="center"],
html[data-hero-intro-cursor="center"] * {
  cursor: none !important;
}

/* A brief center cue; the real pointer returns as soon as the visitor moves it. */
.hero-intro-cursor {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid rgb(35 48 68 / 0.55);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

html[data-hero-intro="entering"]
  :where(
    body > main > :not(.hero),
    body > main > .color-band > *,
    body > footer,
    body > .color-band,
    body > .color-band > *
  ) {
  transition: opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-hero-intro="loading"]
  :is(
    body > main > :not(.hero),
    body > main > .color-band > *,
    .hero-foot,
    body > footer,
    body > .color-band,
    body > .color-band > *
  ) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Each card now owns its scroll entrance after the loader has released the page. */
html[data-hero-intro="entering"] .forms {
  transition: none;
}

/* Reveal complete phrases in overlapping beats, with each dot following its phrase. */
html[data-hero-intro="loading"] .hero-foot__term {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
}
html[data-hero-intro="loading"] .hero-foot__separator {
  opacity: 0;
}
html[data-hero-intro="entering"] .hero-foot__term {
  --intro-term-delay: 500ms;
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity 1150ms cubic-bezier(0.22, 1, 0.36, 1) var(--intro-term-delay),
    filter 1150ms cubic-bezier(0.22, 1, 0.36, 1) var(--intro-term-delay),
    transform 1150ms cubic-bezier(0.22, 1, 0.36, 1) var(--intro-term-delay);
}
html[data-hero-intro="entering"] .hero-foot__separator {
  opacity: 1;
  transition: opacity 1150ms cubic-bezier(0.22, 1, 0.36, 1) var(--intro-term-delay);
}
html[data-hero-intro="entering"] .hero-foot__terms > :nth-child(2),
html[data-hero-intro="entering"] .hero-foot__terms > :nth-child(3) {
  --intro-term-delay: 670ms;
}
html[data-hero-intro="entering"] .hero-foot__terms > :nth-child(4),
html[data-hero-intro="entering"] .hero-foot__terms > :nth-child(5) {
  --intro-term-delay: 840ms;
}
html[data-hero-intro="entering"] .hero-foot__terms > :nth-child(6),
html[data-hero-intro="entering"] .hero-foot__terms > :nth-child(7) {
  --intro-term-delay: 1010ms;
}

.hero-loader {
  --intro-progress: 0;
  display: none;
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: clamp(112px, 18svh, 200px);
  width: min(260px, calc(100vw - 96px));
  transform: translateX(-50%);
  color: #faf8f3;
  pointer-events: none;
}
html[data-hero-intro="loading"] .hero-loader,
html[data-hero-intro="entering"] .hero-loader {
  display: block;
}
.hero-loader__track {
  height: 6px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.23);
  border-radius: 999px;
}
.hero-loader__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: inherit;
  transform: scaleX(clamp(0, var(--intro-progress), 1));
  transform-origin: left center;
  transition: transform 180ms linear;
}
html[data-hero-intro="entering"] .hero-loader {
  opacity: 0;
  transition: opacity 450ms ease;
}
.hero-loader[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-hero-intro]
    :is(
      body > main > :not(.hero),
      body > main > .color-band > *,
      .hero-foot,
      body > footer,
      body > .color-band,
      body > .color-band > *
    ),
  html[data-hero-intro] .hero-foot__term,
  html[data-hero-intro] .hero-foot__separator,
  .hero-loader,
  .hero-loader__fill {
    transition: none !important;
  }
}

/* site-cursor.css */
/* A native image cursor stays responsive without an animation/rendering loop. */
@media (hover: hover) and (pointer: fine) {
  :root {
    --site-dot-cursor: url("../../../assets/graphics/cursor-d84db1b619ff.svg") 8 8, default;
  }
  html,
  body,
  .image-viewer {
    cursor: var(--site-dot-cursor);
  }
  .hero[data-orbit-ready="true"],
  .hero[data-dragging="true"] {
    cursor: var(--site-dot-cursor);
  }
  :is(
    a[href],
    button:not(:disabled),
    summary,
    select:not(:disabled),
    input[type="range"]:not(:disabled),
    [role="button"],
    [role="tab"],
    [role="slider"]
  ):not([aria-disabled="true"]) {
    cursor: pointer;
  }
  .image-viewer button:disabled,
  .image-viewer [aria-disabled="true"] {
    cursor: var(--site-dot-cursor);
  }
}

.hero-pointer-hint {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgb(13 24 42 / 0.22);
  color: rgb(250 248 243 / 0.9);
  font:
    400 11px/1.3 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.hero-drag-hint {
  position: absolute;
  z-index: 3;
  top: 43%;
  left: 50%;
  display: none;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 9px 13px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  background: rgb(13 24 42 / 0.2);
  color: rgb(250 248 243 / 0.88);
  font:
    400 12px/1.3 Arial,
    Helvetica,
    sans-serif;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: var(--glass-lift-shadow);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 450ms ease;
}
.hero-drag-hint svg {
  width: 27px;
  height: 16px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-drag-hint circle {
  fill: currentColor;
  stroke: none;
}
@media (hover: hover) and (pointer: fine) and (min-width: 800px) {
  .hero-pointer-hint[data-visible] {
    opacity: 1;
  }
}
@media (max-width: 799px), (pointer: coarse) {
  .hero-drag-hint {
    display: flex;
  }
  .hero[data-orbit-ready="true"] .hero-drag-hint:not([data-dismissed]) {
    opacity: 1;
  }
  .hero[data-orbit-ready="true"] .hero-drag-hint:not([data-dismissed]) circle {
    animation: hero-drag-cue 2400ms ease-in-out 2;
  }
}
html[data-hero-intro="loading"] :is(.hero-pointer-hint, .hero-drag-hint),
html[data-hero-intro-cursor="center"] .hero-pointer-hint {
  opacity: 0 !important;
}
@keyframes hero-drag-cue {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pointer-hint,
  .hero-drag-hint {
    transition: none;
  }
  .hero-drag-hint circle {
    animation: none !important;
  }
}

#workflow-orbit-mask {
  mask-type: alpha;
}

/* Persistent topbar: keep section headings clear of the straight 64/56px bar. */
main section[id], .site-footer[id] { scroll-margin-top: 74px; }
@media (max-width: 799px) {
  main section[id], .site-footer[id] { scroll-margin-top: 64px; }
}

/* Align these sections to the existing team content edges. */
@media (min-width: 800px) {
  .scan-benefits__visual { justify-self: end; }
}
@media (max-width: 799px) {
  .forms, .scan-benefits { padding-inline: 24px; }
}

/* Step explanations sit beside the diagram, with reserved room on small screens. */
.workflow__explanation {
  position: absolute;
  left: calc(100% + 32px);
  top: 50%;
  width: min(280px, calc((100vw - 560px) / 2 - 96px));
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
  pointer-events: none;
}
.workflow[data-workflow-active] .workflow__explanation { opacity: 1; visibility: visible; }
.workflow__explanation h3 {
  margin: 0 0 12px;
  color: #faf8f3;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -.025em;
}
.workflow__explanation p {
  margin: 0;
  color: var(--site-text-muted);
  font-size: 15px;
  line-height: 1.65;
}
@media (max-width: 1199px) {
  .workflow__diagram { margin-bottom: 160px; }
  .workflow__explanation {
    left: 50%;
    top: calc(100% + 24px);
    width: min(360px, 100%);
    transform: translateX(-50%);
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .workflow__explanation { transition: none; }
}

/* SCANTIX sky-blue accents and room for the text-card hover lift. */
:root { --site-accent: #38b6ff; }
.text-accent { color: var(--site-accent); }
.forms { overflow: visible; }
html[data-color-experiment="blueprint"] .scan-benefits__trigger:is(:hover, :focus-visible) > span:first-child {
  color: var(--site-accent);
}

/* Keep the preview level with the accordion, independently of its heading. */
@media (min-width: 800px) {
  .scan-benefits__layout { align-items: start; row-gap: 28px; }
  .scan-benefits__content { display: contents; }
  .scan-benefits__content > h2 { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
  .scan-benefits__list { grid-column: 1; grid-row: 2; min-height: 0; }
  .scan-benefits__visual {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 0;
  }
}

/* Navigation controls share the contrast of the section behind the toolbar. */
fluid-spline-nav language-switcher,
fluid-spline-nav language-switcher button {
  color: var(--ribbon-ink, #faf8f3);
}
fluid-spline-nav language-switcher button { opacity: .7; }
fluid-spline-nav language-switcher button:is(:hover, [aria-pressed="true"]) { opacity: 1; }
fluid-spline-nav[data-background="light"] language-switcher button { text-shadow: none; }
fluid-spline-nav language-switcher button:focus-visible { outline-color: currentColor; }
fluid-spline-nav[data-background="light"] language-switcher,
fluid-spline-nav[data-background="light"] language-switcher button { color: #0b2159; }

/* Per-control contrast also works when an open menu spans two color bands. */
fluid-spline-nav language-switcher[data-nav-background] button,
fluid-spline-nav language-switcher[data-nav-background],
fluid-spline-nav .social-links[data-nav-background] .social-link {
  color: var(--nav-control-ink);
}
fluid-spline-nav language-switcher[data-nav-background="light"] button { text-shadow: none; }
fluid-spline-nav .nav-wordmark[data-nav-background="dark"] img {
  filter: brightness(0) invert(98%) sepia(8%) saturate(220%) hue-rotate(340deg);
}
fluid-spline-nav .nav-wordmark[data-nav-background="light"] img { filter: none; }

/* Highlight the active label, icon and its explanation heading together. */
.workflow__step[data-step-active] h3,
html[data-color-experiment="blueprint"] .workflow__step[data-step-active] .workflow__icon,
.workflow[data-workflow-active] .workflow__explanation h3 {
  color: var(--site-accent, #38b6ff);
}

/* Footer wordmark: the reference logo's backward cube-like flip. */
.footer-logo-cube {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 2455 / 517;
  perspective: 1400px;
  perspective-origin: 89% 50%;
}
.footer-logo-cube .footer-logo-lettering {
  clip-path: inset(0 22% 0 0);
}
.footer-logo-cube .footer-logo-face {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 78%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: footer-logo-front 5s cubic-bezier(.65,.05,.3,.95) infinite;
  animation-play-state: paused;
}
.footer-logo-cube .footer-logo-face--back {
  transform: rotateX(180deg);
  animation-name: footer-logo-back;
}
.footer-logo-cube[data-visible] .footer-logo-face { animation-play-state: running; }
@keyframes footer-logo-front {
  0%, 12% { transform: rotateX(0deg); }
  50%, 62% { transform: rotateX(180deg); }
  100% { transform: rotateX(360deg); }
}
@keyframes footer-logo-back {
  0%, 12% { transform: rotateX(180deg); }
  50%, 62% { transform: rotateX(360deg); }
  100% { transform: rotateX(540deg); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-logo-cube .footer-logo-face { animation: none; }
  .footer-logo-cube .footer-logo-face--back { display: none; }
}

/* Alternate the white X with its original brand colors on each half-turn. */
.site-footer[data-footer-glass] .footer-logo-face--back img {
  filter: none;
}

@media (max-width: 359px) {
  fluid-spline-nav[compact] .nav-wordmark { width: 140px; }
}



/* Mobile raster grain avoids Safari's coarse SVG filter rasterization. */
@media (max-width: 799px), (pointer: coarse) {
  :root { --site-grain: url("../../../assets/background-grain-mobile.220ac52c9d0e.webp"); --grain-size: 128px; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body > header { padding-top: env(safe-area-inset-top, 0px); }
  .site-footer { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
}

/* Missing assets preserve the layout when index.html is opened on its own. */
img[data-asset-unavailable] { visibility: hidden; }
html[data-hero-intro="ready"] .hero-loader { display: none; }
.scantix-document { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #143cff; }
.scantix-document::backdrop { background: #143cff; }
.scantix-document iframe { display: block; width: 100%; height: 100%; border: 0; }
.scantix-document__close { position: fixed; right: 16px; bottom: 16px; z-index: 1; width: 42px; height: 42px; border: 1px solid #ffffff80; border-radius: 50%; color: #faf8f3; background: #173dff; font: 26px/1 Arial, sans-serif; cursor: pointer; box-shadow: 0 2px 12px #0003; }
.scantix-document__close:focus-visible { outline: 3px solid white; outline-offset: 3px; }