/* Digital architecture: a sparse, quiet system map, never a repeated grid. */
.site-ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: #fff;
}
.architecture-map {
  display: block;
  width: 100%;
  height: 100%;
  mask-image: linear-gradient(
    180deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}
.architecture-map__paths {
  fill: none;
  stroke: url(#architecture-ink);
  stroke-width: 0.8;
}
.architecture-map use {
  vector-effect: non-scaling-stroke;
}
.architecture-map__nodes {
  fill: #fff;
  stroke: #77777c;
  stroke-width: 0.8;
  opacity: 0.23;
}
.architecture-map__signals {
  fill: none;
  stroke: #c82837;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.18;
}
.architecture-map__signals use {
  stroke-dasharray: 24 1976;
  animation: architecture-signal 38s linear infinite;
  /* All six routes flow together; their paths originate on different edges. */
  animation-delay: -8s;
}
.stage-bg__grid {
  display: block;
}
@keyframes architecture-signal {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -2000;
  }
}
@media (max-width: 639px) {
  .architecture-map__secondary {
    display: none;
  }
  .architecture-map__signals {
    opacity: 0.12;
  }
}
@media (prefers-reduced-motion: reduce) {
  .architecture-map__signals use {
    animation: none;
  }
  .architecture-map__signals {
    display: none;
  }
}
.motion-paused .architecture-map__signals {
  display: none;
}

/* White canvas with warm neutral card surfaces. */
:root {
  --paper: #fff;
  --card-surface: #fbfbfb;
}
body {
  background: #fff;
}
.studio-ceo,
.testimonial-card,
.faq-item,
.work-stack-item,
.process-card,
.contact-form,
.project-dialog {
  background: var(--card-surface);
}
.work-stack--pin .work-stack-item__title {
  -webkit-text-stroke-color: var(--card-surface);
}
.contact-control input,
.contact-control textarea,
.contact-select__trigger,
.contact-control--phone {
  background-color: #fff;
}
.process-card {
  border: 1px solid rgba(10, 10, 12, 0.06);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 2px 20px 0px;
}

.faq-item {
  border: 1px solid rgba(10, 10, 12, 0.06);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 2px 5px 0px;
}

/* The two dark sections retain the original soft grid behind the fluid art. */
.dark-band__grid {
  z-index: 0;
  opacity: 0.3;
}