:root {
  --motion-fast: 120ms;
  --motion-ui: 200ms;
  --motion-page: 320ms;
  --motion-story: 500ms;
  --motion-ease-out: cubic-bezier(0, 0, .2, 1);
  --motion-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --motion-ease-emphasized: cubic-bezier(.2, 0, 0, 1);
}

.motion-page { overflow-x: clip; }

.motion-switcher {
  position: fixed;
  z-index: 60;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(28, 29, 31, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 36px rgba(20, 28, 43, .12);
  backdrop-filter: blur(18px);
}

.motion-switcher span {
  padding: 0 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.motion-switcher a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease-out), background-color var(--motion-fast) var(--motion-ease-out);
}

.motion-switcher a:hover { color: var(--ink); background: var(--ash); }
.motion-switcher a[aria-current="page"] { color: white; background: var(--ink); }

.motion-page .site-nav a,
.motion-page .site-footer nav a { position: relative; }

.motion-page .site-nav a::after,
.motion-page .site-footer nav a::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 400ms cubic-bezier(.65, 0, .35, 1);
}

.motion-page .site-nav a:hover::after,
.motion-page .site-footer nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.motion-page .button span[aria-hidden="true"] {
  display: inline-block;
  transition: transform var(--motion-fast) var(--motion-ease-out);
}

.motion-page .button:hover span[aria-hidden="true"] { transform: translateX(3px); }
.motion-page .button:active { transform: translateY(0) scale(.985); }

.motion-page.motion-ready [data-motion] {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance, 12px), 0);
  transition-property: opacity, transform, clip-path, filter;
  transition-duration: var(--motion-duration, var(--motion-page));
  transition-delay: calc(var(--motion-order, 0) * var(--motion-stagger, 48ms));
  transition-timing-function: var(--motion-ease-emphasized);
  will-change: opacity, transform;
}

.motion-page.motion-ready [data-motion].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-subtle {
  --motion-distance: 10px;
  --motion-stagger: 42ms;
}

.motion-subtle.motion-ready .hero [data-motion] { --motion-duration: 280ms; }
.motion-subtle.motion-ready .hero [data-motion] {
  animation: going38-hero-subtle 320ms var(--motion-ease-emphasized) both;
  animation-delay: calc(var(--motion-order, 0) * 52ms);
}
.motion-subtle.motion-ready .project-visual,
.motion-subtle.motion-ready .contact__portrait { --motion-duration: 340ms; }

.motion-subtle .project-card {
  transition: transform var(--motion-ui) var(--motion-ease-out), border-color var(--motion-ui) var(--motion-ease-out), box-shadow var(--motion-ui) var(--motion-ease-out);
}

.motion-subtle .project-card:hover {
  border-color: #c6ccd5;
  box-shadow: 0 14px 32px rgba(23, 33, 49, .07);
  transform: translateY(-3px);
}

.motion-subtle .project-image {
  transition: transform var(--motion-page) var(--motion-ease-emphasized);
}

.motion-subtle .project-card:hover .project-image { transform: scale(1.008); }

.motion-full {
  --motion-distance: 26px;
  --motion-stagger: 72ms;
}

.motion-full.motion-ready .hero [data-motion] {
  --motion-duration: 520ms;
  animation: going38-hero-full 540ms var(--motion-ease-emphasized) both;
  animation-delay: calc(var(--motion-order, 0) * 82ms);
  filter: blur(3px);
}

.motion-full.motion-ready .hero [data-motion].is-visible { filter: blur(0); }

@keyframes going38-hero-subtle {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes going38-hero-full {
  from { opacity: 0; filter: blur(3px); transform: translate3d(0, 26px, 0) scale(.985); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

.motion-full.motion-ready [data-motion-kind="media"] {
  clip-path: inset(0 0 14% 0 round 10px);
  transform: translate3d(0, var(--motion-distance), 0) scale(.975);
  --motion-duration: 520ms;
}

.motion-full.motion-ready [data-motion-kind="media"].is-visible {
  clip-path: inset(0 0 0 0 round 10px);
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-page.motion-reduced .motion-switcher {
  border-color: rgba(112, 85, 0, .28);
}

.motion-page.motion-reduced .motion-switcher span { color: #705500; }

.motion-full .project-card {
  transition: transform var(--motion-page) var(--motion-ease-emphasized), border-color var(--motion-page) var(--motion-ease-out), box-shadow var(--motion-page) var(--motion-ease-out);
}

.motion-full .project-card:hover {
  border-color: #bbc2cd;
  box-shadow: 0 22px 52px rgba(18, 26, 38, .11);
  transform: translateY(-7px);
}

.motion-full .project-visual,
.motion-full .contact__portrait { isolation: isolate; }

.motion-full .project-image,
.motion-full .contact__portrait img {
  transform: translate3d(0, var(--media-drift, 0px), 0) scale(1.025);
  transition: transform 420ms var(--motion-ease-emphasized);
  will-change: transform;
}

.motion-full .project-card:hover .project-image {
  transform: translate3d(0, var(--media-drift, 0px), 0) scale(1.045);
}

.motion-full .system-grid li,
.motion-full .service-list li,
.motion-full .process li { position: relative; }

.motion-full .system-grid li::after,
.motion-full .service-list li::after,
.motion-full .process li::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--blue);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms var(--motion-ease-emphasized);
}

.motion-full .system-grid li:hover::after,
.motion-full .service-list li:hover::after,
.motion-full .process li:hover::after { transform: scaleX(1); }

/* Attio-calibrated: calm surfaces, few reveals, and continuity inside media. */
.motion-attio {
  --motion-distance: 8px;
  --motion-stagger: 34ms;
}

.motion-attio .site-header.is-scrolled {
  box-shadow: none;
  background: rgba(255, 255, 255, .985);
}

.motion-attio.motion-ready [data-motion] {
  --motion-duration: 440ms;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

.motion-attio.motion-ready .hero [data-motion] {
  --motion-duration: 480ms;
}

.motion-attio.motion-ready [data-motion-kind="media-stage"] {
  transform: translate3d(0, 10px, 0) scale(.992);
  --motion-duration: 500ms;
}

.motion-attio.motion-ready [data-motion-kind="media-stage"].is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-attio .project-card {
  transition: border-color var(--motion-ui) var(--motion-ease-out),
              box-shadow var(--motion-page) var(--motion-ease-out),
              transform var(--motion-page) var(--motion-ease-emphasized);
}

.motion-attio .project-card.is-visible.is-focused {
  border-color: #c6ccd5;
  box-shadow: 0 18px 44px rgba(18, 26, 38, .075);
}

.motion-attio .project-card.is-visible:hover {
  border-color: #c2c9d3;
  box-shadow: 0 20px 46px rgba(18, 26, 38, .09);
  transform: translate3d(0, -3px, 0);
}

.motion-attio .project-visual,
.motion-attio .contact__portrait {
  isolation: isolate;
}

.motion-attio .project-image {
  transform: translate3d(0, var(--attio-media-shift, 0px), 0) scale(var(--attio-media-scale, 1.008));
  transform-origin: center;
  will-change: transform;
}

.motion-attio .service-list li,
.motion-attio .process li {
  position: relative;
}

.motion-attio .service-list li::before,
.motion-attio .process li::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: min(88px, 22%);
  height: 1px;
  background: var(--blue);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms cubic-bezier(.16, 1, .3, 1);
}

.motion-attio .service-list li.is-scene-active::before,
.motion-attio .process li.is-scene-active::before {
  transform: scaleX(1);
}

/* Phone-led synthesis: Full's clarity with slower, opacity-led movement. */
.motion-gentle {
  --motion-distance: 16px;
  --motion-stagger: 56ms;
  --motion-ease-gentle: cubic-bezier(.65, 0, .35, 1);
}

.motion-gentle.motion-ready [data-motion] {
  --motion-duration: 560ms;
  transition-timing-function: var(--motion-ease-gentle);
}

.motion-gentle.motion-ready .hero [data-motion] {
  --motion-duration: 820ms;
  animation: going38-hero-gentle 820ms var(--motion-ease-gentle) both;
  animation-delay: calc(var(--motion-order, 0) * 68ms);
}

@keyframes going38-hero-gentle {
  from { opacity: 0; transform: translate3d(0, var(--motion-distance, 16px), 0) scale(.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.motion-gentle.motion-ready [data-motion-kind="media"] {
  transform: translate3d(0, 14px, 0) scale(.99);
  --motion-duration: 840ms;
}

.motion-gentle.motion-ready [data-motion-kind="media"].is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-gentle .project-card {
  transition: transform 260ms var(--motion-ease-out),
              border-color 260ms var(--motion-ease-out),
              box-shadow 320ms var(--motion-ease-out);
}

.motion-gentle .project-card:hover {
  border-color: #c2c9d3;
  box-shadow: 0 18px 42px rgba(18, 26, 38, .085);
  transform: translateY(-4px);
}

.motion-gentle .project-image,
.motion-gentle .contact__portrait img {
  transform: translate3d(0, var(--media-drift, 0px), 0) scale(1.012);
  transition: transform 520ms var(--motion-ease-gentle);
  will-change: transform;
}

.motion-gentle .project-card:hover .project-image {
  transform: translate3d(0, var(--media-drift, 0px), 0) scale(1.02);
}

@media (min-width: 901px) {
  .motion-attio .services__statement,
  .motion-attio .process > div {
    position: sticky;
    top: 116px;
    align-self: start;
  }
}

.motion-progress {
  position: fixed;
  z-index: 70;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--blue);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@media (max-width: 900px) {
  .motion-full .project-image,
  .motion-full .contact__portrait img,
  .motion-gentle .project-image,
  .motion-gentle .contact__portrait img,
  .motion-attio .project-image { transform: none; }
}

@media (max-width: 560px) {
  .motion-switcher {
    right: 10px;
    bottom: 10px;
    left: 10px;
    justify-content: center;
  }
  .motion-switcher span { display: none; }
  .motion-switcher a { flex: 1; justify-content: center; padding-inline: 4px; font-size: 11px; }
  .motion-subtle.motion-ready [data-motion] { --motion-distance: 8px; --motion-stagger: 28ms; }
  .motion-full.motion-ready [data-motion] { --motion-distance: 18px; --motion-stagger: 48ms; }
  .motion-full.motion-ready .hero [data-motion] {
    --motion-duration: 460ms;
    animation-duration: 480ms;
    animation-delay: calc(var(--motion-order, 0) * 62ms);
    filter: blur(1.5px);
  }
  .motion-full.motion-ready [data-motion-kind="media"] { --motion-duration: 480ms; }
  .motion-attio.motion-ready [data-motion] { --motion-distance: 8px; --motion-stagger: 30ms; }
  .motion-attio.motion-ready [data-motion-kind="media-stage"] {
    transform: translate3d(0, 8px, 0) scale(.995);
    --motion-duration: 460ms;
  }
  .motion-attio.motion-ready [data-motion-kind="media-stage"].is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }
  .motion-gentle.motion-ready [data-motion] {
    --motion-distance: 12px;
    --motion-stagger: 44ms;
    --motion-duration: 560ms;
  }
  .motion-gentle.motion-ready .hero [data-motion] {
    --motion-duration: 720ms;
    animation-duration: 740ms;
    animation-delay: calc(var(--motion-order, 0) * 54ms);
  }
  .motion-gentle.motion-ready [data-motion-kind="media"] {
    transform: translate3d(0, 10px, 0) scale(.994);
    --motion-duration: 740ms;
  }
  .motion-gentle.motion-ready [data-motion-kind="media"].is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }
  .motion-page.motion-reduced .motion-switcher { flex-wrap: wrap; }
  .motion-page.motion-reduced .motion-switcher span {
    flex: 0 0 100%;
    display: block;
    padding: 3px 8px 1px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-page.motion-ready .hero [data-motion] { animation: none !important; }
  .motion-page.motion-ready [data-motion],
  .motion-page.motion-ready [data-motion].is-visible {
    opacity: 1;
    clip-path: none;
    filter: none;
    transform: none;
    transition-duration: .01ms;
    transition-delay: 0ms;
  }
  .motion-page .project-card,
  .motion-page .project-image,
  .motion-page .contact__portrait img,
  .motion-page .button span[aria-hidden="true"] { transform: none; }
  .motion-attio .service-list li::before,
  .motion-attio .process li::before { transition: none; }
  .motion-progress { display: none; }
}