:root {
  --motion-out: cubic-bezier(.16, 1, .3, 1);
  --motion-move: cubic-bezier(.65, 0, .35, 1);
  --motion-hover: ease;
}

/* Motion preview: preserve the official art direction and quiet the mechanics. */
.section-head h2,
.footer-brand-descriptor {
  animation: none;
}

.animated-nav {
  transition:
    width 360ms var(--motion-move),
    border-radius 280ms var(--motion-move),
    transform 460ms var(--motion-out),
    opacity 260ms ease-out,
    background-color 140ms var(--motion-hover),
    box-shadow 180ms var(--motion-hover);
}

.animated-nav.is-collapsed {
  border-radius: 18px;
}

.animated-nav.is-collapsed:hover {
  transform: scale(1.025);
}

.animated-nav-links {
  transition: opacity 160ms ease-out, transform 260ms var(--motion-out);
}

.animated-nav-links a::after {
  transition: transform 180ms var(--motion-out);
}

.animated-nav-links a.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

.animated-nav-trigger {
  transform: scale(.94);
  transition: width 260ms var(--motion-move), opacity 150ms ease-out, transform 220ms var(--motion-out);
}

.animated-nav.is-collapsed .animated-nav-trigger {
  transform: scale(1);
}

.flow-button {
  padding-left: 56px;
  transition:
    border-color 160ms ease,
    border-radius 320ms var(--motion-out),
    color 160ms ease,
    transform 140ms ease-out;
}

.flow-button:hover,
.flow-button:focus-visible {
  transform: translateY(-1px);
}

.flow-button:active {
  transform: translateY(0) scale(.97);
}

.flow-label {
  transition: transform 320ms var(--motion-out);
}

.flow-button:hover .flow-label,
.flow-button:focus-visible .flow-label {
  transform: translateX(9px);
}

.flow-fill {
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  will-change: transform;
  transition: transform 420ms var(--motion-out), opacity 120ms ease-out;
}

.flow-button:hover .flow-fill,
.flow-button:focus-visible .flow-fill {
  width: 18px;
  height: 18px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(20);
}

.flow-arrow {
  transition: transform 320ms var(--motion-out), opacity 140ms ease-out;
}

.cursor {
  transition:
    width 200ms var(--motion-out),
    height 200ms var(--motion-out),
    border-radius 220ms var(--motion-out),
    background-color 140ms ease,
    opacity 100ms ease-out;
}

.cursor.is-active {
  width: 32px;
  height: 32px;
}

.cursor.is-reel {
  width: 148px;
  height: 48px;
}

.cursor-label {
  transition: max-width 180ms var(--motion-out), opacity 120ms ease-out;
}

.hero-media,
.hero-line-inner,
.hero-topline,
.hero-footer {
  will-change: transform, opacity;
}

.hero-media::after {
  animation-duration: 18s;
}

.hero-video {
  will-change: transform;
}

/* Keep the decoded video layer steady. Moving a full-screen video on every
   pointer and scroll frame is noticeably heavier on modest GPUs. */
.motion-gsap .hero-video {
  --hero-parallax: 0px !important;
  transform: scale(1.035);
}

/* One calm reveal language; no blur or repeated clipping on every object. */
.reveal {
  opacity: 0;
  filter: none;
  clip-path: none;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 480ms ease-out var(--motion-delay, 0ms),
    transform 640ms var(--motion-out) var(--motion-delay, 0ms);
}

.reveal.in {
  opacity: 1;
  filter: none;
  clip-path: none;
  transform: translate3d(0, 0, 0);
}

.project-card.reveal {
  transform: translate3d(0, 22px, 0) scale(.992);
}

.project-card.reveal.in {
  transform: translate3d(0, 0, 0) scale(1);
}

.project-media img {
  transform: translate3d(var(--project-x, 0), var(--project-y, 0), 0) scale(1.012);
  will-change: transform;
  transition: transform 300ms var(--motion-out);
}

.project-meta h3 {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-radius 260ms var(--motion-out),
    transform 260ms var(--motion-out);
}

.project-meta > span {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-radius 240ms var(--motion-out),
    transform 260ms var(--motion-out);
}

.impact-card {
  will-change: auto;
}

.impact-card.is-primed {
  opacity: 0;
  transform: scale(.994);
}

.proof .impact-card.is-primed {
  clip-path: inset(0 100% 0 0 round clamp(22px, 2.6vw, 44px));
}

.web-block .impact-card.is-primed {
  clip-path: inset(0 0 0 100% round clamp(22px, 2.6vw, 44px));
}

.impact-card.is-primed.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0 round clamp(22px, 2.6vw, 44px));
  transform: scale(1);
  transition:
    clip-path 960ms var(--motion-out),
    transform 960ms var(--motion-out),
    opacity 180ms ease-out;
}

.impact-card::before,
.impact-card.is-visible:hover::before {
  opacity: .82;
  filter: none;
  transform: none;
  transition: opacity 180ms ease;
}

.kinetic-line {
  backface-visibility: hidden;
}

.service,
.step {
  isolation: isolate;
  background: transparent !important;
}

.service {
  padding-right: 0;
  padding-left: 0;
  transition: none;
}

.service:hover {
  padding-right: 0;
  padding-left: 0;
}

.service::before,
.step::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--row-color, var(--yellow));
  content: "";
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 340ms var(--motion-out);
}

.service:nth-child(1) { --row-color: var(--red); }
.service:nth-child(2) { --row-color: var(--yellow); }
.service:nth-child(3) { --row-color: var(--purple); }
.service:nth-child(4) { --row-color: var(--blue); }

.service span,
.service h3,
.service p {
  transition: transform 260ms var(--motion-out), color 160ms ease;
}

.service:hover > span:not(.row-fill),
.service:hover h3,
.service:hover p {
  color: inherit;
  background: transparent;
  border-radius: 0;
  padding: 0;
  letter-spacing: inherit;
  transform: none;
}

.step {
  transition: none;
}

.step:nth-child(1) { --row-color: var(--red); }
.step:nth-child(2) { --row-color: var(--yellow); }
.step:nth-child(3) { --row-color: var(--purple); }
.step:nth-child(4) { --row-color: var(--blue); }
.step:nth-child(5) { --row-color: var(--green); }

.step:hover {
  z-index: 1;
  border-radius: 0;
  background: transparent;
  transform: none;
}

.step b,
.step h3,
.step p {
  transition: transform 260ms var(--motion-out), color 160ms ease;
}

.step:hover b,
.step:hover h3,
.step:hover p {
  color: inherit;
  transform: none;
}

.browser {
  transform: translate3d(0, var(--browser-y, 0), 0) rotate(var(--browser-rotate, 2deg));
  will-change: transform;
  transition: box-shadow 180ms ease;
}

.about-mark {
  filter: none;
  transition: filter 180ms ease;
}

.about-mark img:not(.is-gif) {
  animation: none;
  transform: rotate(var(--about-rotate, 0deg));
  will-change: transform;
}

.section-head h2,
.section-head p,
.proof-copy p,
.web-copy > p,
.about-copy > p {
  transition: transform 180ms ease;
}

.footer-column {
  transition: background-color 180ms ease;
}

.footer-column nav a,
.footer-links a {
  transition: transform 180ms var(--motion-out), letter-spacing 180ms ease;
}

.footer-wordmark .footer-brand-name,
.footer-wordmark .footer-brand-descriptor {
  transition: transform 260ms var(--motion-out);
}

.reel-modal[open] {
  animation: modal-in-preview 240ms var(--motion-out) both;
}

.reel-modal::backdrop {
  backdrop-filter: blur(8px);
}

.reel-modal-close {
  transition:
    background-color 140ms ease,
    color 140ms ease,
    border-radius 200ms var(--motion-out),
    transform 160ms ease-out;
}

.reel-modal-close:hover,
.reel-modal-close:focus-visible {
  transform: rotate(4deg) scale(1.02);
}

.reel-center-play {
  transition:
    opacity 160ms ease-out,
    transform 220ms var(--motion-out),
    background-color 140ms ease,
    border-radius 220ms var(--motion-out);
}

.reel-controls {
  transition: opacity 160ms ease;
}

.reel-actions button {
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease-out;
}

@keyframes modal-in-preview {
  from { opacity: 0; transform: scale(.992); }
  to { opacity: 1; transform: scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  .project-card.reveal.in:hover {
    transform: translate3d(0, -3px, 0) scale(1);
  }

  .project-card:hover .project-media img {
    transform: translate3d(var(--project-x, 0), var(--project-y, 0), 0) scale(1.032);
    filter: none;
  }

  .project-card:hover .project-meta h3,
  .project-card:focus-visible .project-meta h3 {
    border-radius: 10px;
    transform: translateX(6px);
  }

  .project-card:hover .project-meta > span,
  .project-card:focus-visible .project-meta > span {
    border-radius: 13px;
    transform: translate(-3px, -2px) rotate(-8deg);
  }

  .service:hover::before,
  .step:hover::before {
    transform: scaleY(1);
  }

  .service:hover > span:not(.row-fill) {
    color: var(--ink);
    transform: translateX(5px) rotate(-4deg);
  }

  .service:hover h3,
  .service:hover p {
    color: var(--ink);
    transform: translateX(5px);
  }

  .step:hover b {
    color: var(--ink);
    transform: translateX(4px) rotate(-4deg);
  }

  .step:hover h3,
  .step:hover p {
    color: var(--ink);
    transform: translateX(4px);
  }

  .browser:hover {
    transform: translate3d(3px, calc(var(--browser-y, 0) - 3px), 0) rotate(calc(var(--browser-rotate, 2deg) - .6deg));
    box-shadow: 0 40px 86px rgba(0, 0, 0, .22);
  }

  .about-mark:hover {
    filter: brightness(1.04);
    transform: none;
  }
}

@media (max-width: 900px) {
  .reveal {
    transform: translate3d(0, 13px, 0);
  }

  .project-card.reveal {
    transform: translate3d(0, 16px, 0) scale(.995);
  }

  .impact-card.is-primed,
  .proof .impact-card.is-primed,
  .web-block .impact-card.is-primed {
    clip-path: inset(0 0 12% 0 round clamp(22px, 2.6vw, 44px));
    transform: translate3d(0, 18px, 0) scale(.996);
  }

  .impact-card.is-primed.is-visible {
    clip-path: inset(0 0 0 0 round clamp(22px, 2.6vw, 44px));
    transform: translate3d(0, 0, 0) scale(1);
    transition-duration: 720ms;
  }
}

@media (max-width: 360px) {
  .section-head h2 {
    font-size: clamp(36px, 12vw, 42px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media::after,
  .section-head h2,
  .footer-brand-descriptor,
  .reel-modal[open] {
    animation: none;
  }

  .reveal,
  .project-card.reveal,
  .reveal.in,
  .project-card.reveal.in,
  .impact-card,
  .impact-card.is-primed,
  .impact-card.is-primed.is-visible,
  .kinetic-line,
  .browser,
  .about-mark img:not(.is-gif) {
    opacity: 1;
    clip-path: none;
    filter: none;
    transform: none;
    transition: none;
  }

  .service::before,
  .step::before {
    display: none;
  }
}

/* GSAP direction: chromatic reveals and orchestrated section moments. */
.motion-gsap .reveal,
.motion-gsap .reveal.in {
  opacity: 1;
  visibility: visible;
  filter: none;
  clip-path: none;
  transform: none;
  transition: none;
}

.motion-gsap .hero-word-clip,
.motion-gsap .footer-char-clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.motion-gsap .hero-word,
.motion-gsap .footer-char {
  display: inline-block;
  will-change: transform;
}

.motion-gsap .hero-video {
  --hero-parallax: 0px;
  will-change: transform;
}

.motion-gsap .project-card,
.motion-gsap .project-card.reveal,
.motion-gsap .project-card.reveal.in {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-gsap .project-media {
  position: relative;
  isolation: isolate;
}

.motion-gsap .project-media img {
  position: relative;
  z-index: 0;
  transform: none;
  will-change: transform;
}

.motion-gsap .project-wipe {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: var(--wipe-color);
  pointer-events: none;
  will-change: transform;
}

.motion-gsap .impact-card,
.motion-gsap .impact-card.is-primed,
.motion-gsap .impact-card.is-primed.is-visible {
  opacity: 1;
  clip-path: none;
  transform: none;
  transition: none;
}

.motion-gsap .service::before,
.motion-gsap .step::before {
  display: none;
}

.motion-gsap .service,
.motion-gsap .step {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
}

.motion-gsap .row-fill {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  background: var(--row-fill-color);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--motion-out);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .motion-gsap .service:hover > .row-fill,
  .motion-gsap .step:hover > .row-fill {
    background: var(--row-fill-color);
    transform: scaleX(1);
  }
}

.motion-gsap .service > *:not(.row-fill),
.motion-gsap .step > *:not(.row-fill) {
  position: relative;
  z-index: 1;
}

.motion-gsap .service:hover,
.motion-gsap .step:hover {
  padding-right: 0;
  border-radius: 0;
  transform: none;
  background: transparent !important;
}

.motion-gsap .service:hover span:not(.row-fill),
.motion-gsap .service:hover h3,
.motion-gsap .service:hover p,
.motion-gsap .step:hover b,
.motion-gsap .step:hover h3,
.motion-gsap .step:hover p {
  color: var(--ink);
  background: transparent;
  letter-spacing: inherit;
}

.motion-gsap .step:hover b,
.motion-gsap .step:hover h3,
.motion-gsap .step:hover p {
  color: var(--ink);
}

.motion-gsap .process-line {
  position: relative;
}

.motion-gsap .process-progress {
  position: absolute;
  z-index: 4;
  top: -2px;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  height: 4px;
  pointer-events: none;
}

.motion-gsap .process-progress span {
  display: block;
  background: var(--segment-color);
  transform: scaleX(0);
  will-change: transform;
}

.motion-gsap .about-mark {
  overflow: hidden;
  will-change: clip-path, transform;
}

.motion-gsap .about-mark img:not(.is-gif) {
  animation: none;
  transform: none;
}

.motion-gsap .footer-brand-name {
  display: inline-flex;
  overflow: hidden;
}

.motion-gsap .cursor.is-clicking {
  width: 24px;
  height: 24px;
}

.motion-gsap .animated-nav-links a.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (max-width: 900px) {
  .motion-gsap .process-line {
    padding-left: 8px;
  }

  .motion-gsap .process-progress {
    top: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: 4px;
    width: 4px;
    height: 100%;
  }

  .motion-gsap .process-progress span {
    transform: scaleY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-gsap .hero-word,
  .motion-gsap .footer-char,
  .motion-gsap .project-wipe,
  .motion-gsap .project-media img,
  .motion-gsap .row-fill,
  .motion-gsap .process-progress span,
  .motion-gsap .impact-card,
  .motion-gsap .kinetic-line,
  .motion-gsap .about-mark,
  .motion-gsap .about-mark img {
    opacity: 1;
    visibility: visible;
    clip-path: none;
    transform: none;
    animation: none;
    transition: none;
  }

  .motion-gsap .project-wipe,
  .motion-gsap .row-fill,
  .motion-gsap .process-progress {
    display: none;
  }
}

/* V2: readable text reveals, stable impact cards and an editorial project gallery. */
.motion-gsap .cut-clip {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  vertical-align: baseline;
  white-space: nowrap;
}

.motion-gsap .cut-piece {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* Scroll-reading reveal: muted copy remains in place while each word gains
   contrast as it crosses the reading window. */
.motion-gsap .magic-word {
  --magic-opacity: 0;
  position: relative;
  display: inline-grid;
  vertical-align: baseline;
  will-change: opacity;
}

.motion-gsap .magic-word::before,
.motion-gsap .magic-word-visible {
  grid-area: 1 / 1;
}

.motion-gsap .magic-word::before {
  content: attr(data-word);
  opacity: .19;
  pointer-events: none;
}

.motion-gsap .magic-word-visible {
  display: block;
  opacity: var(--magic-opacity);
}

/* The official service hover targets every descendant span. Magic Text also
   uses spans, so lock those words in place and animate only their opacity. */
.motion-gsap .service:hover .magic-word,
.motion-gsap .service:hover .magic-word-visible {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  transform: none;
}

.motion-gsap .browser-screen h3 > span {
  display: block;
}

/* A quiet pulse gives the white screen a living state without moving its
   layout or fighting the browser-card entrance transform. */
.motion-gsap .browser {
  position: relative;
}

.motion-gsap .browser-pulse-shell {
  min-width: 0;
  transform-origin: center;
  animation: browser-card-breathe 2.1s cubic-bezier(.65, 0, .35, 1) infinite;
  will-change: transform;
}

.motion-gsap .browser-pulse-shell .browser {
  width: 100%;
}

@keyframes browser-card-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -4px, 0) scale(1.014); }
}

.motion-gsap .browser::after {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 208, 90, .78);
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(.982);
  animation: browser-soft-pulse 2.4s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes browser-soft-pulse {
  0%, 48%, 100% { opacity: 0; transform: scale(.982); }
  18% { opacity: .72; transform: scale(1); }
}

.motion-gsap .impact-card,
.motion-gsap .impact-card.is-primed,
.motion-gsap .impact-card.is-primed.is-visible {
  clip-path: none;
  overflow: hidden;
  transform: none;
}

.motion-gsap .proof-statement .kinetic-line,
.motion-gsap .web-copy .kinetic-line,
.motion-gsap .about-copy .kinetic-line {
  transform: none;
}

.motion-gsap .service {
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}

.motion-gsap .service::before,
.motion-gsap .service:hover::before {
  display: none;
  background: transparent;
}

.motion-gsap .service:hover {
  display: grid;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}

.motion-gsap .row-accent {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 7px;
  display: block;
  transform: scaleY(0);
  transform-origin: center top;
  will-change: transform;
}

.motion-gsap .service > *:not(.row-accent):not(.row-fill) {
  position: relative;
  z-index: 1;
}

.motion-gsap .service:hover > span:not(.row-accent):not(.row-fill),
.motion-gsap .service:hover h3,
.motion-gsap .service:hover p {
  color: var(--ink);
  background: transparent;
  letter-spacing: inherit;
}

@media (min-width: 901px) {
  .motion-gsap .project-grid.project-accordion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .motion-gsap .project-grid.project-accordion .project-card {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    transition: flex .7s cubic-bezier(.16, 1, .3, 1);
  }

  .motion-gsap .project-grid.project-accordion.has-active .project-card:not(.is-active) {
    flex-grow: .72;
  }

  .motion-gsap .project-grid.project-accordion .project-card.is-active {
    flex-grow: 2.8;
  }

  .motion-gsap .project-grid.project-accordion .project-media {
    height: clamp(360px, 42vw, 620px);
    aspect-ratio: auto;
  }

  .motion-gsap .project-grid.project-accordion .project-meta h3 {
    white-space: nowrap;
  }

  .motion-gsap .project-grid.project-accordion .project-meta {
    min-height: 76px;
  }

  .motion-gsap .project-grid.project-accordion.has-active .project-card:not(.is-active) .project-meta > div {
    display: none !important;
  }

  .motion-gsap .project-grid.project-accordion.has-active .project-card:not(.is-active) .project-meta > span {
    margin-left: auto;
  }
}

.motion-gsap .footer-links a:last-child {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  letter-spacing: .01em;
  font-size: clamp(11px, 1vw, 14px);
  transform-origin: left center;
}

.motion-gsap .footer-links a:last-child:hover,
.motion-gsap .footer-links a:last-child:focus-visible {
  letter-spacing: .01em;
  transform: none;
}

@media (max-width: 900px) {
  .motion-gsap .row-accent {
    width: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-gsap .cut-piece,
  .motion-gsap .magic-word,
  .motion-gsap .row-accent,
  .motion-gsap .browser,
  .motion-gsap .impact-card {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .motion-gsap .row-accent {
    display: none;
  }

  .motion-gsap .magic-word-visible {
    opacity: 1;
  }

  .motion-gsap .magic-word::before {
    display: none;
  }
}

/* Target cursor: it snaps only to intentional interactive and keyword targets. */
.motion-gsap .cursor {
  display: grid;
}

.motion-gsap .cursor.is-reel {
  display: grid;
}

.target-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 0;
  height: 0;
  pointer-events: none;
  mix-blend-mode: normal;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .42));
  will-change: transform, opacity;
}

.target-cursor-dot,
.target-cursor-corner {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.target-cursor-orbit {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  will-change: transform;
}

.target-cursor-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .72);
  transform: translate(-50%, -50%);
}

.target-cursor-corner {
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .38));
  will-change: transform;
}

.target-cursor-corner--tl { border-right: 0; border-bottom: 0; }
.target-cursor-corner--tr { border-left: 0; border-bottom: 0; }
.target-cursor-corner--br { border-left: 0; border-top: 0; }
.target-cursor-corner--bl { border-right: 0; border-top: 0; }

.rotating-copy {
  margin-top: 19px;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.rotating-copy .rotating-word {
  display: inline-block;
  min-width: 7ch;
  overflow: hidden;
  color: var(--yellow);
  will-change: transform, opacity;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .target-cursor {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-gsap .browser-pulse-shell,
  .motion-gsap .browser::after {
    animation: none;
    transform: none;
  }

  .motion-gsap .browser::after { opacity: 0; }
}

/* Digital stage: full-width atmosphere instead of another rounded card. */
.digital-stage.web-block.section-pad {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  padding: clamp(96px, 9vw, 148px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(180, 218, 255, .94), transparent 42%),
    radial-gradient(circle at 22% 80%, rgba(94, 157, 244, .78), transparent 40%),
    linear-gradient(132deg, #155cbd 0%, #2e7ced 48%, #9dcaff 100%);
  color: var(--bg);
}

.digital-stage::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  opacity: .48;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.pixel-snow-container,
.digital-stage-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pixel-snow-container {
  overflow: hidden;
  contain: layout style paint;
}

.pixel-snow-container canvas {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.digital-pixel-snow {
  z-index: 1;
  opacity: .38;
  mix-blend-mode: screen;
}

.digital-stage-glow {
  z-index: 1;
  background: linear-gradient(90deg, rgba(17,17,17,.34), transparent 45%, rgba(17,17,17,.14));
}

.digital-stage > .wrap {
  position: relative;
  z-index: 2;
}

.motion-gsap .digital-stage-card,
.motion-gsap .digital-stage-card.is-primed,
.motion-gsap .digital-stage-card.is-primed.is-visible {
  min-height: 0;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  color: var(--bg);
  box-shadow: none;
  clip-path: none;
}

.motion-gsap .digital-stage-card::before {
  display: none;
}

.digital-stage .web-grid {
  min-height: 570px;
}

.digital-stage .web-copy .eyebrow {
  color: var(--yellow);
}

.digital-stage .web-copy h2,
.digital-stage .web-copy h2 .kinetic-line,
.digital-stage .web-copy > p:not(.eyebrow) {
  color: var(--bg);
}

.digital-stage .web-copy > p:not(.eyebrow) {
  max-width: 510px;
}

.digital-stage .browser,
.digital-stage .browser-screen,
.digital-stage .browser-screen h3,
.digital-stage .browser-screen h3 .cut-piece {
  color: #111111;
}

.proof .impact-card--purple {
  background:
    radial-gradient(circle at 17% 22%, rgba(212, 157, 255, .68), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(112, 54, 215, .72), transparent 42%),
    linear-gradient(125deg, #481266 0%, #8628c3 44%, #b748ff 72%, #7d3ee3 100%);
}

.proof .impact-card--purple::before {
  z-index: 1;
  background: linear-gradient(118deg, rgba(255, 255, 255, .1), transparent 34%, rgba(17, 17, 17, .08));
}

.proof-pixel-snow {
  z-index: 0;
  border-radius: inherit;
  opacity: .36;
  mix-blend-mode: screen;
}

.proof-inner {
  position: relative;
  z-index: 2;
}

.motion-gsap .project-meta h3 {
  margin-left: 0;
}

.about-logo-pulse {
  display: grid;
  place-items: center;
  width: 100%;
  transform-origin: center;
  animation: about-logo-breathe 1.9s cubic-bezier(.65, 0, .35, 1) infinite;
  will-change: transform;
}

.about-logo-pulse img:not(.is-gif) {
  width: 64%;
}

.about-logo-pulse img.is-gif {
  width: min(100%, 600px);
}

.footer-wordmark .footer-brand-name,
.footer-wordmark .footer-brand-descriptor,
.footer-wordmark .footer-brand-name span {
  color: #f7f5f0;
}

.service-accordion-toggle {
  display: none;
}

@media (max-width: 900px) {
  /* Projects become a vertical image accordion: one case receives the visual
     focus while the remaining projects stay available as compact previews. */
  .motion-gsap .project-grid.project-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .motion-gsap .project-grid.project-accordion .project-card,
  .motion-gsap .project-grid.project-accordion .project-card.reveal,
  .motion-gsap .project-grid.project-accordion .project-card.reveal.in {
    position: relative;
    height: 86px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--project-color, #2e7ced);
    transform: none;
    transition: height 680ms cubic-bezier(.16, 1, .3, 1), border-radius 420ms var(--motion-out);
  }

  .motion-gsap .project-grid.project-accordion .project-card.is-active,
  .motion-gsap .project-grid.project-accordion .project-card.is-active.reveal.in {
    height: clamp(390px, 118vw, 520px);
    border-radius: 24px;
  }

  .motion-gsap .project-grid.project-accordion .project-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: inherit;
  }

  .motion-gsap .project-grid.project-accordion .project-media::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 17, 17, .04) 35%, rgba(17, 17, 17, .78) 100%);
    content: "";
    pointer-events: none;
  }

  .motion-gsap .project-grid.project-accordion .project-media img {
    transform: scale(1.04);
    transition: transform 680ms cubic-bezier(.16, 1, .3, 1);
  }

  .motion-gsap .project-grid.project-accordion .project-card.is-active .project-media img {
    transform: scale(1.01);
  }

  .motion-gsap .project-grid.project-accordion .project-meta {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: flex-end;
    min-height: 86px;
    padding: 14px;
    color: #f7f5f0;
    pointer-events: none;
  }

  .motion-gsap .project-grid.project-accordion .project-meta h3 {
    max-width: calc(100vw - 116px);
    margin: 0 0 4px;
    padding: 7px 10px;
    border-radius: 9px;
    background: #f7f5f0;
    color: #111111;
    font-size: clamp(21px, 6.7vw, 28px);
    line-height: 1;
    white-space: nowrap;
    transform: none;
  }

  .motion-gsap .project-grid.project-accordion .project-meta p {
    color: rgba(247, 245, 240, .8);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 240ms ease, transform 360ms var(--motion-out);
  }

  .motion-gsap .project-grid.project-accordion .project-card.is-active .project-meta p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 240ms;
  }

  .motion-gsap .project-grid.project-accordion .project-meta > span {
    width: 38px;
    height: 38px;
    border-color: rgba(247, 245, 240, .65);
    background: #f7f5f0;
    color: #111111;
  }

  /* Services retain the clean editorial list on touch devices. The desktop
     color fill becomes a thin accent reveal instead of a persistent tint. */
  .motion-gsap .service > .row-fill {
    display: block !important;
    inset: auto 0 0;
    width: 100%;
    height: 3px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: var(--row-fill-color) !important;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
  }

  .motion-gsap .service.reveal.in > .row-fill {
    animation: mobile-service-color-in 700ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .motion-gsap .service:hover span:not(.row-fill) {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    transform: none;
  }

  .motion-gsap .service,
  .motion-gsap .service:hover {
    grid-template-columns: 34px minmax(0, 1fr) 38px;
    gap: 12px;
    padding: 21px 0 20px;
    background: transparent !important;
    border-radius: 0;
    transform: none;
  }

  .motion-gsap .service > span:not(.row-fill) {
    grid-column: 1;
    align-self: start;
    padding-top: 7px;
  }

  .motion-gsap .service h3 {
    grid-column: 2;
    font-size: clamp(37px, 10.8vw, 52px);
    line-height: 1;
  }

  .service-accordion-toggle {
    position: relative;
    grid-column: 3;
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    align-self: center;
    border: 1px solid rgba(17, 17, 17, .7);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 220ms ease, transform 300ms var(--motion-out);
  }

  .service-accordion-toggle::before,
  .service-accordion-toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    background: #111111;
    content: "";
    transform: translate(-50%, -50%);
    transition: transform 280ms var(--motion-out);
  }

  .service-accordion-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .motion-gsap .service p {
    grid-column: 2 / 4;
    max-width: 310px;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-5px);
    transition: max-height 420ms var(--motion-out), opacity 220ms ease, transform 320ms var(--motion-out), padding-top 320ms var(--motion-out);
  }

  .motion-gsap .service.is-open p {
    max-height: 120px;
    padding-top: 13px;
    opacity: 1;
    transform: translateY(0);
  }

  .motion-gsap .service.is-open .service-accordion-toggle {
    background: var(--service-color);
    transform: rotate(180deg);
  }

  .motion-gsap .service.is-open .service-accordion-toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes mobile-service-color-in {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes about-logo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@media (max-width: 900px) {
  .digital-stage.web-block.section-pad {
    min-height: 0;
    padding: 92px 0;
  }

  .digital-stage .web-grid {
    min-height: 0;
    gap: 64px;
  }

}

@media (max-width: 520px) {
  /* The blue flakes need a touch more separation from the lighter phone
     gradient. Normal blending keeps them blue instead of washing them out. */
  .digital-pixel-snow {
    opacity: .28;
    mix-blend-mode: normal;
  }

  .hero-overlay {
    padding-bottom: 32px;
  }

  .footer-wordmark {
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-logo-pulse {
    animation: none;
    transform: none;
  }
}