.motion-toggle { min-height: 44px; border: 0; padding: 4px 12px; background: var(--violet); color: #fff; font: 650 11px var(--sans); white-space: nowrap; }
.motion-toggle::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; background: #fff; vertical-align: 1px; }
.motion-toggle[aria-pressed='false'] { background: var(--ink); }
.motion-toggle[hidden] { display: none; }
.hero-title { perspective: 900px; }
.hero-line { transform-origin: left center; }
.challenge-line { display: block; }
.challenge-title em.challenge-line { padding-bottom: .15em; }
.work-rail { min-width: 0; }
.scroll-word { display: inline-block; }
main { overflow: clip; }

html.motion-ready .hero-line { translate: var(--line-x, 0px) var(--line-y, 0px); rotate: var(--line-angle, 0deg); }
html.motion-ready .hero-title { opacity: var(--hero-ink, 1); }
html.motion-ready .hero-visual { transform: perspective(1100px) rotateY(var(--hero-angle, 0deg)); }
html.motion-ready .hero-window { border-radius: var(--hero-round, 0px); }
html.motion-ready .experience-ticket { rotate: var(--ticket-angle, 0deg); }

html.motion-ready .challenge { min-height: 94svh; display: grid; align-items: center; padding-block: clamp(70px, 8vh, 120px); }
html.motion-ready .challenge-title { font-size: clamp(72px, 10vw, 160px); position: relative; z-index: 1; }
html.motion-ready .challenge-line { translate: var(--challenge-x, 0px) 0; rotate: var(--challenge-angle, 0deg); }
html.motion-ready .challenge-art { inset: -20% -8% -20% 15%; opacity: .48; }
html.motion-ready .challenge-art img { rotate: var(--plan-angle, 0deg); scale: var(--plan-zoom, 1.14); }
html.motion-ready .challenge-copy { translate: 0 var(--challenge-copy-y, 0px); }

html.motion-ready .about-photo { rotate: var(--portrait-angle, 0deg); translate: 0 var(--portrait-y, 0px); }
html.motion-ready .about-photo .photo-frame { clip-path: inset(0 var(--portrait-crop, 0%) 0 0); }
html.motion-ready .about-photo img { scale: var(--portrait-scale, 1); }
html.motion-ready .scroll-word { opacity: var(--word-opacity, 1); translate: 0 var(--word-rise, 0px); }
html.motion-ready .field-note .stage { rotate: var(--stage-angle, 0deg); translate: 0 var(--stage-y, 0px); }
html.motion-ready .field-note.scroll-stage .field-note-track { min-height: 172vh; }

html.motion-ready .services-inner { align-items: start; }
html.motion-ready .services-heading { position: sticky; top: 16vh; }
html.motion-ready .services-list { border-top: 0; min-width: 0; }
html.motion-ready .service { position: sticky; top: calc(65px + var(--card-index, 0) * 26px); min-height: 230px; padding: clamp(24px, 3vw, 45px); margin-bottom: 92px; border: 1px solid #736286; background: var(--deep); box-shadow: 0 -12px 35px #14111d22; translate: var(--card-x, 0px) 0; scale: var(--card-scale, 1); transform-origin: center top; overflow: clip; }
html.motion-ready .service:last-child { margin-bottom: 0; }
html.motion-ready .service::before { content: ''; position: absolute; inset: auto 0 0; height: 4px; background: #c4acff; scale: var(--card-progress, 1) 1; transform-origin: left; }
html.motion-ready .service:nth-child(2) { background: #2d2242; }
html.motion-ready .service:nth-child(3) { background: #3e285c; }
html.motion-ready .service:nth-child(4) { background: #4b24da; }
html.motion-ready .service dt { font-size: clamp(23px, 2.5vw, 39px); }
html.motion-ready .service dd { color: #f3eaff; }
html.motion-ready .service[data-entered] { animation: none; }

html.motion-ready .work.horizontal-work { min-height: calc(100svh + var(--work-distance, 0px) + 200px); padding-block: 48px 80px; }
html.motion-ready .horizontal-work .work-track { position: sticky; top: 6vh; }
html.motion-ready .horizontal-work .work-intro { margin-bottom: 28px; }
html.motion-ready .horizontal-work h2 { font-size: clamp(48px, 5.2vw, 84px); }
html.motion-ready .horizontal-work .work-rail { overflow: clip; padding-block: 14px 40px; }
html.motion-ready .horizontal-work .work-grid { display: flex; gap: 34px; width: max-content; translate: var(--work-x, 0px) 0; }
html.motion-ready .horizontal-work .project { width: clamp(480px, 60vw, 820px); flex: 0 0 clamp(480px, 60vw, 820px); margin-top: 0; }
html.motion-ready .horizontal-work .project-image, html.motion-ready .horizontal-work .project-image img { aspect-ratio: 1.8 / 1; }
html.motion-ready .project { rotate: var(--project-angle, 0deg); scale: var(--project-scale, 1); }
html.motion-ready .project-image > img { translate: 0 var(--project-image-y, 0px); }
html.motion-ready .project .project-logo { translate: none; }
html.motion-ready .venetian-art img { aspect-ratio: auto !important; }

html.motion-ready .contact { background: var(--lavender); overflow: clip; }
html.motion-ready .contact h2 { scale: var(--contact-scale, 1); transform-origin: left bottom; }
html.motion-ready .contact-panel { translate: 0 var(--contact-y, 0px); rotate: var(--contact-angle, 0deg); }
.site-foot { overflow: clip; }
.foot-inner { display: grid; grid-template-columns: 1fr auto; padding-block: 35px 25px; }
.foot-inner .wordmark { grid-column: 1 / -1; font-size: clamp(62px, 15.7vw, 255px); gap: .12em; letter-spacing: -.07em; padding-bottom: 20px; }
.foot-inner .brand-mark { width: .76em; height: .9em; flex-basis: .76em; }
html.motion-ready .site-foot .wordmark { translate: var(--footer-x, 0px) 0; scale: var(--footer-scale, 1); transform-origin: left bottom; }

@media (max-width: 930px) {
  html.motion-ready .services-inner { grid-template-columns: minmax(0, 1fr); }
  html.motion-ready .services-heading { position: static; }
  html.motion-ready .services-list { padding-bottom: 18px; }
  html.motion-ready .service { top: calc(32px + var(--card-index, 0) * 20px); min-height: 200px; margin-bottom: 62px; }
  html.motion-ready .service:last-child { margin-bottom: 0; }
  html.motion-ready .challenge-inner { grid-template-columns: minmax(0, 1fr); }
  html.motion-ready .challenge-copy { max-width: 42ch; justify-self: start; }
  html.motion-ready .challenge-title { font-size: clamp(67px, 14vw, 124px); }
  html.motion-ready .challenge { min-height: 88svh; }
  .motion-toggle { padding-inline: 10px; }
}

@media (max-width: 540px) {
  .main-nav { justify-content: space-between; gap: 12px; }
  .main-nav a { font-size: 12px; }
  .motion-toggle { min-height: 36px; align-self: center; font-size: 10px; }
  html.motion-ready .service { min-height: 214px; padding: 25px; }
  html.motion-ready .service dt { font-size: 27px; }
  html.motion-ready .service dd { font-size: 15px; }
  html.motion-ready .about-photo { rotate: var(--portrait-angle, 0deg); }
  .foot-inner .wordmark { font-size: clamp(52px, 16vw, 90px); }
  .foot-inner p { order: initial; width: auto; font-size: 8px; }
  .foot-inner .privacy { font-size: 10px; }
}